Production ready

frontend/app/use-cases/page.tsx

@@ -0,0 +1,92 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { ArrowLeft } from 'lucide-react'
+import { Footer } from '@/components/layout/Footer'
+
+export const metadata: Metadata = {
+  title: 'Use Cases — Website Change Monitoring for Every Team',
+  description:
+    'Discover how SiteChangeMonitor helps e-commerce, SEO, compliance, and competitive intelligence teams track website changes automatically.',
+  alternates: { canonical: '/use-cases' },
+  openGraph: {
+    title: 'Use Cases — SiteChangeMonitor',
+    description: 'Website change monitoring for e-commerce, SEO, compliance, and CI teams.',
+    url: '/use-cases',
+  },
+}
+
+const useCases = [
+  {
+    slug: 'ecommerce-price-monitoring',
+    title: 'E-Commerce Price Monitoring',
+    description: 'Track competitor prices on Shopify, Amazon, and any e-commerce site. Get alerted when prices drop or inventory changes.',
+  },
+  {
+    slug: 'seo-serp-tracking',
+    title: 'SEO & SERP Tracking',
+    description: 'Monitor search engine results pages for ranking changes, featured snippet updates, and competitor movements.',
+  },
+  {
+    slug: 'compliance-policy-monitoring',
+    title: 'Compliance & Policy Monitoring',
+    description: 'Track changes to terms of service, privacy policies, and regulatory pages. Maintain audit-proof snapshots.',
+  },
+  {
+    slug: 'competitor-intelligence',
+    title: 'Competitor Intelligence',
+    description: 'Monitor competitor websites for product launches, pricing changes, job postings, and strategic shifts.',
+  },
+]
+
+export default function UseCasesPage() {
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      <div className="flex-1 py-24 px-6">
+        <div className="mx-auto max-w-5xl space-y-12">
+          <div className="space-y-4">
+            <Link href="/" className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors">
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back to Home
+            </Link>
+            <h1 className="text-4xl md:text-5xl font-bold font-display text-foreground">
+              Use Cases
+            </h1>
+            <p className="text-xl text-muted-foreground max-w-3xl">
+              SiteChangeMonitor helps teams across industries track the web pages that matter most — with zero noise and instant alerts.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            {useCases.map((uc) => (
+              <Link
+                key={uc.slug}
+                href={`/use-cases/${uc.slug}`}
+                className="group rounded-2xl border border-border bg-card p-8 hover:border-primary/50 transition-colors"
+              >
+                <h2 className="text-xl font-bold text-foreground group-hover:text-primary transition-colors">
+                  {uc.title}
+                </h2>
+                <p className="mt-2 text-muted-foreground">{uc.description}</p>
+                <span className="mt-4 inline-block text-sm font-medium text-primary">
+                  Learn more →
+                </span>
+              </Link>
+            ))}
+          </div>
+
+          <section className="text-center py-12">
+            <h2 className="text-2xl font-bold text-foreground mb-4">Don&apos;t see your use case?</h2>
+            <p className="text-muted-foreground mb-6">Join the waitlist and tell us what you need. We&apos;re building for you.</p>
+            <Link
+              href="/"
+              className="inline-flex items-center rounded-full bg-primary px-8 py-3 font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+            >
+              Join the Waitlist
+            </Link>
+          </section>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  )
+}