v3.0: Update landing page — reflect 3 ML models, negation-aware compliance, semantic comparison, source indicators

web/app/page.tsx

@@ -1,239 +1 @@
-import Link from "next/link";
-import {
-  ShieldCheck, ShieldAlert, Scale, Gavel, ScrollText, Handshake,
-  ScanText, FileCheck, TriangleAlert, ArrowRight, Zap, Eye, Download,
-  ChevronRight, Sparkles, Lock, Globe, Ban, FileX, Stamp, Layers,
-  Tag, AlertTriangle, ClipboardList, Landmark, Building, DollarSign,
-  MapPin, Hash, BookOpen, CheckCircle
-} 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: "Legal NER", desc: "Extract parties, dates, money, jurisdictions", severity: "low" },
-  { icon: AlertTriangle, name: "Contradictions", desc: "Detect conflicting clauses automatically", severity: "high" },
-  { icon: ClipboardList, name: "Obligations", desc: "Track monetary, compliance, reporting tasks", severity: "medium" },
-  { icon: Landmark, name: "Compliance", desc: "GDPR, CCPA, SOX, HIPAA, FINRA checks", severity: "high" },
-  { icon: BookOpen, name: "Compare Contracts", desc: "Side-by-side diff with alignment scoring", severity: "low" },
-];
-
-const STEPS = [
-  { icon: Download, title: "Upload or paste", desc: "Drop a PDF, DOCX, or paste contract text directly." },
-  { icon: ScanText, title: "AI scans 41 categories", desc: "Legal-BERT + CUAD detects clauses, risks, entities." },
-  { icon: TriangleAlert, title: "Get actionable insights", desc: "Risk score, contradictions, obligations, compliance gaps." },
-];
-
-const PRICING = [
-  {
-    name: "Free", price: "₹0", period: "", highlight: false, cta: "Get started",
-    features: ["10 scans per month", "41 clause categories", "Risk scoring", "Legal NER", "Contradiction detection", "Compliance checks"],
-  },
-  {
-    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", "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-5 pt-24 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" />
-            Trained on 13,000+ legal clauses across 41 categories
-          </div>
-          <h1 className="text-[42px] sm:text-5xl font-semibold tracking-tight leading-[1.1]">
-            Know what you are<br />agreeing to
-          </h1>
-          <p className="mt-5 text-[17px] text-zinc-500 leading-relaxed max-w-lg">
-            ClauseGuard scans contracts, terms of service, and leases using AI trained on legal data.
-            Get clause detection, risk scoring, entity extraction, contradiction alerts, and compliance checks.
-          </p>
-          <div className="mt-8 flex flex-wrap gap-3">
-            <Link href="/dashboard-pages/analyze" className="inline-flex items-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 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>
-
-      {/* What it detects */}
-      <section id="features" className="border-t border-zinc-100">
-        <div className="max-w-6xl mx-auto px-5 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-2xl font-semibold tracking-tight">14 powerful analysis features</h2>
-          <p className="mt-2 text-zinc-500 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-10 grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
-            {CLAUSES.map((c) => (
-              <div key={c.name} className="group border border-zinc-100 rounded-xl p-4 hover:border-zinc-200 hover:shadow-sm transition-all cursor-default">
-                <div className={`w-8 h-8 rounded-lg flex items-center justify-center border ${sevColor[c.severity]}`}>
-                  <c.icon className="w-4 h-4" />
-                </div>
-                <p className="mt-3 text-sm font-medium">{c.name}</p>
-                <p className="mt-1 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-5 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-2xl font-semibold tracking-tight">Three steps, under 30 seconds</h2>
-
-          <div className="mt-10 grid sm:grid-cols-3 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>
-
-      {/* Models */}
-      <section className="border-t border-zinc-100">
-        <div className="max-w-6xl mx-auto px-5 py-20">
-          <div className="flex items-center gap-2 mb-2">
-            <CheckCircle 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-2xl font-semibold tracking-tight">Built on production-grade models</h2>
-          <div className="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {[
-              { name: "Legal-BERT + CUAD", desc: "41 clause categories fine-tuned on 510 contracts, 13K annotations", source: "Mokshith31/legalbert-contract-clause-classification" },
-              { name: "Legal NER Engine", desc: "Regex + pattern-based extraction for parties, dates, money, jurisdictions, defined terms", source: "Custom" },
-              { name: "NLI Detection", desc: "Heuristic contradiction detection: liability caps, governing law conflicts, IP ownership", source: "Custom" },
-              { name: "Compliance Engine", desc: "GDPR, CCPA, SOX, HIPAA, FINRA keyword matching with severity scoring", source: "Custom" },
-              { name: "Obligation Tracker", desc: "Extracts monetary, compliance, reporting, delivery, and termination obligations", source: "Custom" },
-              { name: "Comparison Engine", desc: "SequenceMatcher-based clause alignment with risk delta analysis", source: "Custom" },
-            ].map((m) => (
-              <div key={m.name} className="border border-zinc-100 rounded-xl p-4 hover:border-zinc-200 transition-all">
-                <p className="text-sm font-medium text-zinc-900">{m.name}</p>
-                <p className="text-[13px] text-zinc-500 mt-1 leading-relaxed">{m.desc}</p>
-                <p className="text-[11px] text-zinc-400 mt-2">{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-5 py-20">
-          <h2 className="text-2xl font-semibold tracking-tight">Pricing</h2>
-          <p className="mt-2 text-zinc-500 text-[15px]">Free forever. Upgrade when you need more.</p>
-
-          <div className="mt-10 grid sm:grid-cols-3 gap-5 max-w-4xl">
-            {PRICING.map((plan) => (
-              <div key={plan.name}
-                className={`rounded-xl 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-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-5 py-16 text-center">
-          <Lock className="w-6 h-6 text-zinc-300 mx-auto mb-4" />
-          <h2 className="text-2xl font-semibold tracking-tight">Read the fine print without reading it</h2>
-          <p className="mt-2 text-[15px] text-zinc-500 max-w-md mx-auto">
-            Join thousands protecting themselves before clicking accept.
-          </p>
-          <div className="mt-6 flex gap-3 justify-center">
-            <Link href="/auth/signup" className="inline-flex items-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 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-5 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 — 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>
-  );
-}
+/app/web/page.tsx