v3.0: Upload web/app/page.tsx — zero emojis, Lucide icons, responsive

web/app/page.tsx

@@ -1 +1,225 @@
-/app/web_final/page.tsx
+import Link from "next/link";
+import {
+  ShieldCheck, ShieldAlert, Scale, Gavel, ScanText, FileCheck,
+  TriangleAlert, ArrowRight, Zap, Eye, Download, ChevronRight,
+  Sparkles, Lock, Globe, Ban, FileX, Stamp, Layers, Tag, AlertTriangle,
+  ClipboardList, Landmark, Building, BookOpen, CheckCircle, Cpu
+} from "lucide-react";
+
+const CLAUSES = [
+  { icon: Scale, name: "Arbitration", desc: "Waives your right to sue in court", severity: "critical" },
+  { icon: ShieldAlert, name: "Liability limits", desc: "Company avoids responsibility for damages", severity: "critical" },
+  { icon: Ban, name: "Unilateral termination", desc: "They can close your account without reason", severity: "critical" },
+  { icon: FileX, name: "Unilateral change", desc: "Terms can change without your consent", severity: "high" },
+  { icon: Eye, name: "Content removal", desc: "Your content deleted without notice", severity: "high" },
+  { icon: Globe, name: "Jurisdiction", desc: "Disputes handled in their preferred court", severity: "medium" },
+  { icon: Gavel, name: "Choice of law", desc: "Foreign law overrides your local protections", severity: "medium" },
+  { icon: Lock, name: "IP Ownership", desc: "Intellectual property transferred entirely", severity: "critical" },
+  { icon: Layers, name: "41 CUAD Categories", desc: "Full taxonomy: NDA, MSA, SLA, and more", severity: "low" },
+  { icon: Tag, name: "ML Legal NER", desc: "Extract parties, dates, money, jurisdictions via Legal-BERT", severity: "low" },
+  { icon: AlertTriangle, name: "NLI Contradictions", desc: "Detect conflicting clauses with DeBERTa-v3 NLI model", severity: "high" },
+  { icon: ClipboardList, name: "Obligations", desc: "Track monetary, compliance, reporting tasks with priority", severity: "medium" },
+  { icon: Landmark, name: "Compliance", desc: "GDPR, CCPA, SOX, HIPAA, FINRA with negation detection", severity: "high" },
+  { icon: BookOpen, name: "Compare Contracts", desc: "Semantic similarity with sentence embeddings", severity: "low" },
+];
+
+const STEPS = [
+  { icon: Download, title: "Upload or paste", desc: "Drop a PDF, DOCX, or paste contract text directly." },
+  { icon: ScanText, title: "3 AI models analyze", desc: "Legal-BERT classifier + Legal NER + DeBERTa NLI scan your contract." },
+  { icon: TriangleAlert, title: "Get precise insights", desc: "Risk score, contradictions, obligations, compliance gaps with source indicators." },
+];
+
+const PRICING = [
+  {
+    name: "Free", price: "0", period: "", highlight: false, cta: "Get started",
+    features: ["10 scans per month", "41 clause categories", "Risk scoring", "ML Legal NER", "NLI contradiction detection", "Compliance with negation detection"],
+  },
+  {
+    name: "Pro", price: "999", period: "/mo", highlight: true, cta: "Start free trial",
+    features: ["Unlimited scans", "Upload PDF/DOCX files", "Contract comparison", "AI clause explanations", "Scan history", "PDF report export", "Obligation tracker with priority", "Priority support"],
+  },
+  {
+    name: "Team", price: "3,999", period: "/mo", highlight: false, cta: "Talk to us",
+    features: ["Everything in Pro", "5 team seats", "10,000 API calls", "Shared dashboard", "Slack support", "Custom clause rules", "Enterprise compliance"],
+  },
+];
+
+const sevColor: Record<string, string> = {
+  critical: "text-red-500 bg-red-50 border-red-200",
+  high: "text-amber-500 bg-amber-50 border-amber-200",
+  medium: "text-blue-500 bg-blue-50 border-blue-200",
+  low: "text-emerald-500 bg-emerald-50 border-emerald-200",
+};
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-white text-zinc-900">
+      {/* Hero */}
+      <section className="max-w-6xl mx-auto px-4 sm:px-6 pt-16 sm:pt-24 pb-16 sm:pb-20">
+        <div className="max-w-2xl">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-zinc-200 text-[13px] text-zinc-500 mb-6">
+            <Sparkles className="w-3.5 h-3.5 text-zinc-400" />
+            3 ML models · 41 clause categories · negation-aware compliance
+          </div>
+          <h1 className="text-3xl sm:text-[42px] lg:text-5xl font-semibold tracking-tight leading-[1.1]">
+            Know what you are<br className="hidden sm:block" /> agreeing to
+          </h1>
+          <p className="mt-5 text-base sm:text-[17px] text-zinc-500 leading-relaxed max-w-lg">
+            ClauseGuard scans contracts, terms of service, and leases using 3 specialized AI models.
+            Get precise clause detection, risk scoring, ML entity extraction, NLI contradiction alerts, and negation-aware compliance checks.
+          </p>
+          <div className="mt-8 flex flex-col sm:flex-row gap-3">
+            <Link href="/dashboard-pages/analyze" className="inline-flex items-center justify-center gap-2 bg-zinc-900 text-white px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-zinc-800 transition-colors">
+              <ScanText className="w-4 h-4" />Try the scanner
+            </Link>
+            <Link href="/dashboard-pages/compare" className="inline-flex items-center justify-center gap-2 border border-zinc-200 px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-zinc-50 transition-colors">
+              Compare contracts<ArrowRight className="w-4 h-4" />
+            </Link>
+          </div>
+          <p className="mt-4 text-xs text-zinc-400">No account needed for free tier. 10 scans/month.</p>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section id="features" className="border-t border-zinc-100">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
+          <div className="flex items-center gap-2 mb-2">
+            <ShieldCheck className="w-4 h-4 text-zinc-400" />
+            <p className="text-[13px] font-medium text-zinc-400 uppercase tracking-wider">Detection</p>
+          </div>
+          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">14 powerful analysis features</h2>
+          <p className="mt-2 text-zinc-500 text-sm sm:text-[15px] max-w-lg">
+            Based on the CUAD taxonomy + CLAUDETTE framework, the same datasets used by EU consumer protection researchers and Stanford NLP.
+          </p>
+          <div className="mt-8 sm:mt-10 grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-3">
+            {CLAUSES.map((c) => (
+              <div key={c.name} className="group border border-zinc-100 rounded-xl p-3 sm:p-4 hover:border-zinc-200 hover:shadow-sm transition-all cursor-default">
+                <div className={`w-7 h-7 sm:w-8 sm:h-8 rounded-lg flex items-center justify-center border ${sevColor[c.severity]}`}>
+                  <c.icon className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                </div>
+                <p className="mt-2.5 sm:mt-3 text-xs sm:text-sm font-medium">{c.name}</p>
+                <p className="mt-0.5 sm:mt-1 text-[11px] sm:text-[13px] text-zinc-500 leading-relaxed">{c.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* How it works */}
+      <section className="border-t border-zinc-100 bg-zinc-50/50">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
+          <div className="flex items-center gap-2 mb-2">
+            <Zap className="w-4 h-4 text-zinc-400" />
+            <p className="text-[13px] font-medium text-zinc-400 uppercase tracking-wider">How it works</p>
+          </div>
+          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">Three steps, under 30 seconds</h2>
+          <div className="mt-8 sm:mt-10 grid sm:grid-cols-3 gap-6 sm:gap-8">
+            {STEPS.map((s, i) => (
+              <div key={s.title} className="relative">
+                <div className="w-10 h-10 rounded-xl bg-white border border-zinc-200 flex items-center justify-center shadow-sm">
+                  <s.icon className="w-5 h-5 text-zinc-600" />
+                </div>
+                <h3 className="mt-4 text-[15px] font-medium">{s.title}</h3>
+                <p className="mt-1.5 text-[13px] text-zinc-500 leading-relaxed">{s.desc}</p>
+                {i < 2 && <ChevronRight className="hidden sm:block absolute top-4 -right-5 w-4 h-4 text-zinc-300" />}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Technology */}
+      <section className="border-t border-zinc-100">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
+          <div className="flex items-center gap-2 mb-2">
+            <Cpu className="w-4 h-4 text-zinc-400" />
+            <p className="text-[13px] font-medium text-zinc-400 uppercase tracking-wider">Technology</p>
+          </div>
+          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">Built on 3 production ML models</h2>
+          <div className="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
+            {[
+              { name: "Legal-BERT Classifier", icon: Cpu, desc: "LoRA fine-tuned on 41 CUAD categories with sigmoid multi-label classification and per-class thresholds", source: "Mokshith31/legalbert-contract-clause-classification" },
+              { name: "Legal-BERT NER", icon: Tag, desc: "ML-based named entity recognition for parties, dates, money, jurisdictions with regex augmentation", source: "matterstack/legal-bert-ner" },
+              { name: "DeBERTa-v3 NLI", icon: AlertTriangle, desc: "Cross-encoder model for semantic contradiction detection between clause pairs", source: "cross-encoder/nli-deberta-v3-base" },
+              { name: "Compliance Engine", icon: ShieldCheck, desc: "GDPR, CCPA, SOX, HIPAA, FINRA checking with negation detection and context snippets", source: "Negation-aware keyword + semantic" },
+              { name: "Obligation Tracker", icon: ClipboardList, desc: "Extracts monetary, compliance, reporting, delivery obligations with priority scoring", source: "Context-filtered regex" },
+              { name: "Comparison Engine", icon: Layers, desc: "Semantic similarity via sentence-transformers with SequenceMatcher fallback", source: "all-MiniLM-L6-v2" },
+            ].map((m) => (
+              <div key={m.name} className="border border-zinc-100 rounded-xl p-4 hover:border-zinc-200 hover:shadow-sm transition-all">
+                <div className="flex items-center gap-2 mb-2">
+                  <m.icon className="w-4 h-4 text-zinc-400" />
+                  <p className="text-sm font-medium text-zinc-900">{m.name}</p>
+                </div>
+                <p className="text-[13px] text-zinc-500 leading-relaxed">{m.desc}</p>
+                <p className="text-[11px] text-zinc-400 mt-2 font-mono">{m.source}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing */}
+      <section id="pricing" className="border-t border-zinc-100">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
+          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">Pricing</h2>
+          <p className="mt-2 text-zinc-500 text-sm sm:text-[15px]">Free forever. Upgrade when you need more.</p>
+          <div className="mt-8 sm:mt-10 grid sm:grid-cols-3 gap-4 sm:gap-5 max-w-4xl">
+            {PRICING.map((plan) => (
+              <div key={plan.name} className={`rounded-xl p-5 sm:p-6 transition-shadow ${plan.highlight ? "border-2 border-zinc-900 shadow-sm" : "border border-zinc-200"}`}>
+                <p className="text-[13px] font-medium text-zinc-400">{plan.name}</p>
+                <p className="mt-2 flex items-baseline gap-1">
+                  <span className="text-[11px] text-zinc-400">INR</span>
+                  <span className="text-2xl sm:text-3xl font-semibold tracking-tight">{plan.price}</span>
+                  <span className="text-sm text-zinc-400">{plan.period}</span>
+                </p>
+                <ul className="mt-5 space-y-2.5">
+                  {plan.features.map((f) => (
+                    <li key={f} className="flex items-start gap-2.5 text-[13px] text-zinc-600">
+                      <FileCheck className="w-3.5 h-3.5 text-zinc-300 mt-0.5 shrink-0" />{f}
+                    </li>
+                  ))}
+                </ul>
+                <Link href={plan.name === "Free" ? "/auth/signup" : plan.name === "Team" ? "mailto:hello@clauseguardweb.netlify.app" : "/auth/signup"}
+                  className={`mt-6 block w-full py-2.5 rounded-lg text-[13px] font-medium text-center transition-colors ${plan.highlight ? "bg-zinc-900 text-white hover:bg-zinc-800" : "border border-zinc-200 text-zinc-700 hover:bg-zinc-50"}`}>
+                  {plan.cta}
+                </Link>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="border-t border-zinc-100 bg-zinc-50/50">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-12 sm:py-16 text-center">
+          <Lock className="w-6 h-6 text-zinc-300 mx-auto mb-4" />
+          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">Read the fine print without reading it</h2>
+          <p className="mt-2 text-sm sm:text-[15px] text-zinc-500 max-w-md mx-auto">Join thousands protecting themselves before clicking accept.</p>
+          <div className="mt-6 flex flex-col sm:flex-row gap-3 justify-center">
+            <Link href="/auth/signup" className="inline-flex items-center justify-center gap-2 bg-zinc-900 text-white px-6 py-3 rounded-lg text-sm font-medium hover:bg-zinc-800 transition-colors">
+              <ScanText className="w-4 h-4" />Get started free
+            </Link>
+            <Link href="/dashboard-pages/compare" className="inline-flex items-center justify-center gap-2 border border-zinc-200 px-6 py-3 rounded-lg text-sm font-medium hover:bg-zinc-50 transition-colors">
+              <ArrowRight className="w-4 h-4" />Compare contracts
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-zinc-100">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 flex flex-col sm:flex-row justify-between items-center gap-4">
+          <div className="flex items-center gap-2">
+            <ShieldCheck className="w-4 h-4 text-zinc-300" />
+            <span className="text-[13px] text-zinc-400">ClauseGuard v3.0 — not legal advice</span>
+          </div>
+          <div className="flex gap-5 text-[13px] text-zinc-400">
+            <Link href="/privacy" className="hover:text-zinc-600">Privacy</Link>
+            <Link href="/terms" className="hover:text-zinc-600">Terms</Link>
+            <a href="mailto:hello@clauseguardweb.netlify.app" className="hover:text-zinc-600">Contact</a>
+          </div>
+        </div>
+      </footer>
+    </main>
+  );
+}