Upload web/app/page.tsx

web/app/page.tsx

@@ -2,45 +2,54 @@ 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
+  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: "high" },
-  { icon: ShieldAlert, name: "Liability limits", desc: "Company avoids responsibility for damages", severity: "high" },
-  { icon: Ban, name: "Unilateral termination", desc: "They can close your account without reason", severity: "high" },
-  { icon: FileX, name: "Unilateral change", desc: "Terms can change without your consent", severity: "medium" },
-  { icon: Eye, name: "Content removal", desc: "Your content deleted without notice", severity: "medium" },
+  { 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: Stamp, name: "Contract by using", desc: "You agree just by visiting the site", severity: "low" },
+  { 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: "Install", desc: "Add the Chrome extension. Two clicks, no signup required." },
-  { icon: ScanText, title: "Browse normally", desc: "Visit any terms page. ClauseGuard scans it in the background." },
-  { icon: TriangleAlert, title: "See the flags", desc: "Unfair clauses get highlighted. Open the sidebar for the full breakdown." },
+  { 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", "All 8 clause types", "Risk score and grade", "Chrome extension", "Local fallback"],
+    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 contracts and leases", "AI clause explanations", "Scan history", "PDF report export", "Email scan reports", "Priority support"],
+    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"],
+    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> = {
-  high: "text-red-500 bg-red-50",
-  medium: "text-amber-500 bg-amber-50",
-  low: "text-blue-500 bg-blue-50",
+  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() {
@@ -51,27 +60,26 @@ export default function Home() {
         <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 9,414 legal clauses
+            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 Terms of Service, contracts, and leases for unfair clauses.
-            Get a clear risk score before you click accept.
+            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">
-              <Download className="w-4 h-4" />
-              Add to Chrome
-            </Link>
-            <Link href="/dashboard-pages/analyze"
-              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">
+              <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</p>
+          <p className="mt-4 text-xs text-zinc-400">No account needed for free tier · 10 scans/month</p>
         </div>
       </section>
 
@@ -82,15 +90,15 @@ export default function Home() {
             <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">Eight types of unfair clauses</h2>
+          <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 CLAUDETTE taxonomy — the same framework used by EU consumer protection researchers.
+            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 ${sevColor[c.severity]}`}>
+                <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>
@@ -108,7 +116,7 @@ export default function Home() {
             <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 two seconds</h2>
+          <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) => (
@@ -127,6 +135,33 @@ export default function Home() {
         </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">
@@ -137,9 +172,7 @@ export default function Home() {
             {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"
+                  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">
@@ -156,9 +189,7 @@ export default function Home() {
                 </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.highlight ? "bg-zinc-900 text-white hover:bg-zinc-800" : "border border-zinc-200 text-zinc-700 hover:bg-zinc-50"
                 }`}>
                   {plan.cta}
                 </Link>
@@ -176,11 +207,15 @@ export default function Home() {
           <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">
+          <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">
-              <Download className="w-4 h-4" />
+              <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>