feat: Mission 33 — Marketing Website Alignment + DB-Driven Content

Convert all website pages from hardcoded static arrays to DB-driven
content via public catalog API endpoints. Removes phantom "Pro" tier
(website showed 4 plans, DB only has 3). Adds Templates and Integrations
pages, parity audit script, and scroll-reveal design system classes.

- Backend: public GET /catalog/templates endpoint (unauthenticated, 60s cache)
- Website: api.ts client, moduleMap.ts for module-to-marketing mapping
- Pages converted: home, plans (3 tiers), features (module-driven)
- New pages: /templates (12 templates, category filters), /integrations (3 providers)
- Components: FeatureCard gains iconName + comingSoon props
- Nav: Header + Footer updated with Templates and Integrations links
- Design: catalog-card, badge-platform, badge-category, scroll-reveal classes
- Audit: scripts/parity-audit.ts verifies no fake feature claims (CI-friendly)
- Tests: 3 new catalog tests (305 total passing)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Website/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "audit:parity": "npx ts-node scripts/parity-audit.ts"
   },
   "dependencies": {
     "clsx": "^2.1.1",
@@ -24,6 +25,7 @@
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
     "tailwindcss": "^4",
+    "ts-node": "^10",
     "typescript": "^5"
   }
 }

Website/scripts/parity-audit.ts

@@ -0,0 +1,155 @@
+/**
+ * Parity Audit — Mission 33
+ *
+ * Verifies the marketing website does not claim features, plans, or providers
+ * that don't exist in the backend database.
+ *
+ * Usage:
+ *   AUDIT_API_URL=http://localhost:8000 npx ts-node scripts/parity-audit.ts
+ *
+ * Exit code 0 = PASS, 1 = FAIL (violations found)
+ */
+
+import * as fs from "fs";
+import * as path from "path";
+
+const API_BASE = process.env.AUDIT_API_URL ?? "http://localhost:8000";
+const WEBSITE_SRC = path.join(__dirname, "../src");
+
+interface Violation {
+  type: string;
+  value: string;
+  file: string;
+  line: number;
+}
+
+interface Envelope<T> {
+  success: boolean;
+  data: T;
+}
+
+async function fetchData<T>(endpoint: string): Promise<T[]> {
+  try {
+    const res = await fetch(`${API_BASE}/api/v1/catalog${endpoint}`);
+    if (!res.ok) {
+      console.error(`  WARN: ${endpoint} returned ${res.status}`);
+      return [];
+    }
+    const json: Envelope<T[]> = await res.json();
+    return json.success ? json.data : [];
+  } catch (err) {
+    console.error(`  WARN: Failed to fetch ${endpoint}:`, err);
+    return [];
+  }
+}
+
+function scanFiles(dir: string, ext: string): { filePath: string; content: string; lines: string[] }[] {
+  const results: { filePath: string; content: string; lines: string[] }[] = [];
+
+  function walk(d: string) {
+    for (const entry of fs.readdirSync(d, { withFileTypes: true })) {
+      const full = path.join(d, entry.name);
+      if (entry.isDirectory() && !entry.name.startsWith(".") && entry.name !== "node_modules") {
+        walk(full);
+      } else if (entry.isFile() && entry.name.endsWith(ext)) {
+        const content = fs.readFileSync(full, "utf-8");
+        results.push({
+          filePath: path.relative(WEBSITE_SRC, full),
+          content,
+          lines: content.split("\n"),
+        });
+      }
+    }
+  }
+
+  walk(dir);
+  return results;
+}
+
+async function main() {
+  console.log("Parity Audit — LeadPilot Website vs Backend DB");
+  console.log(`API: ${API_BASE}`);
+  console.log(`Source: ${WEBSITE_SRC}\n`);
+
+  // Fetch all catalog data
+  const [plans, providers] = await Promise.all([
+    fetchData<{ name: string; display_name: string }>("/plans"),
+    fetchData<{ key: string; label: string }>("/integration-providers"),
+  ]);
+
+  const dbPlanNames = new Set(plans.map((p) => p.name.toLowerCase()));
+  const dbPlanDisplayNames = new Set(plans.map((p) => p.display_name.toLowerCase()));
+  const dbProviderKeys = new Set(providers.map((p) => p.key.toLowerCase()));
+
+  console.log(`DB plans: ${[...dbPlanNames].join(", ")}`);
+  console.log(`DB providers: ${[...dbProviderKeys].join(", ")}\n`);
+
+  // Known phantom plan names that should NOT appear
+  const phantomPlanNames = ["pro", "starter", "basic", "professional", "premium"];
+  const phantomPlanPatterns = phantomPlanNames
+    .filter((name) => !dbPlanNames.has(name) && !dbPlanDisplayNames.has(name))
+    .map((name) => ({
+      name,
+      // Match as standalone word (plan name in quotes, or as plan title)
+      regex: new RegExp(`(?:name|tier|plan).*?["'\`]${name}["'\`]|["'\`]${name}["'\`].*?(?:plan|tier)`, "gi"),
+    }));
+
+  // Scan source files
+  const files = scanFiles(path.join(WEBSITE_SRC, "app"), ".tsx");
+  const violations: Violation[] = [];
+
+  for (const { filePath, lines } of files) {
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+
+      // Check for phantom plan names
+      for (const { name, regex } of phantomPlanPatterns) {
+        regex.lastIndex = 0;
+        if (regex.test(line)) {
+          violations.push({
+            type: "PHANTOM_PLAN",
+            value: name,
+            file: filePath,
+            line: i + 1,
+          });
+        }
+      }
+
+      // Also check for standalone "Pro" as a plan name in plan arrays/objects
+      // This catches hardcoded plan arrays like { name: "Pro", ... }
+      if (/name:\s*["']Pro["']/i.test(line) && !dbPlanNames.has("pro")) {
+        violations.push({
+          type: "PHANTOM_PLAN_PROPERTY",
+          value: "Pro",
+          file: filePath,
+          line: i + 1,
+        });
+      }
+    }
+  }
+
+  // Output
+  const result = {
+    audit_timestamp: new Date().toISOString(),
+    api_base: API_BASE,
+    plans_in_db: [...dbPlanNames],
+    providers_in_db: [...dbProviderKeys],
+    violations,
+    status: violations.length === 0 ? "PASS" : "FAIL",
+  };
+
+  console.log(JSON.stringify(result, null, 2));
+
+  if (violations.length > 0) {
+    console.error(`\n${violations.length} violation(s) found.`);
+    process.exit(1);
+  } else {
+    console.log("\nNo violations. Website is in parity with backend.");
+    process.exit(0);
+  }
+}
+
+main().catch((err) => {
+  console.error("Audit script failed:", err);
+  process.exit(2);
+});

Website/src/app/features/page.tsx

@@ -1,20 +1,10 @@
 import type { Metadata } from "next";
-import {
-  Brain,
-  Globe,
-  GitMerge,
-  Inbox,
-  BarChart3,
-  BookOpen,
-  Shield,
-  Database,
-  FileText,
-  Zap,
-  Bell,
-  Settings,
-} from "lucide-react";
+import { getModules } from "@/lib/api";
+import { MODULE_MARKETING_MAP, FEATURE_CATEGORIES } from "@/lib/moduleMap";
 import FeatureCard from "@/components/FeatureCard";
 import CTASection from "@/components/CTASection";
+import * as Icons from "lucide-react";
+import { type LucideIcon } from "lucide-react";
 
 export const metadata: Metadata = {
   title: "Features — Everything LeadPilot Does",
@@ -22,122 +12,29 @@ export const metadata: Metadata = {
     "AI qualification & scoring, multi-channel capture, smart routing, CRM sync, team inbox, analytics, playbooks, and more. The full LeadPilot feature set.",
 };
 
-const features = [
-  {
-    icon: Brain,
-    benefit: "Qualify at scale",
-    title: "AI Qualification & Scoring",
-    description:
-      "Custom AI prompts engage every lead the moment they arrive. Scores are assigned based on intent, fit, and urgency — so your reps only work leads worth their time.",
-  },
-  {
-    icon: Globe,
-    benefit: "Zero leakage",
-    title: "Multi-Channel Lead Capture",
-    description:
-      "Embed capture forms, integrate your existing chat widget, accept webhook payloads, and connect partner referral links — everything flows into one structured pipeline.",
-  },
-  {
-    icon: Database,
-    benefit: "Stay connected",
-    title: "CRM Sync & Integrations",
-    description:
-      "Push qualified leads directly to your CRM of choice. Map fields, set sync rules, and keep your sales stack in perfect alignment without manual exports.",
-  },
-  {
-    icon: GitMerge,
-    benefit: "Right rep, right time",
-    title: "Smart Routing Rules",
-    description:
-      "Route by territory, vertical, product line, rep availability, or any custom attribute. Rules compose like building blocks — no code required.",
-  },
-  {
-    icon: Inbox,
-    benefit: "Stay in the loop",
-    title: "Team Inbox & Human Handover",
-    description:
-      "All conversations flow into a shared team inbox. Reps can pick up context instantly, send messages, and mark leads without switching tools.",
-  },
-  {
-    icon: BarChart3,
-    benefit: "Measure what matters",
-    title: "Analytics & Conversion Tracking",
-    description:
-      "Track lead volume, qualification rate, response time, conversion by channel and rep, and pipeline velocity — all in real time from a single dashboard.",
-  },
-  {
-    icon: BookOpen,
-    benefit: "Start fast",
-    title: "Playbooks & Templates",
-    description:
-      "Pre-built qualification playbooks for common industries and use cases. Start with a template, customise the prompts, and go live in minutes.",
-  },
-  {
-    icon: Shield,
-    benefit: "Stay in control",
-    title: "Role-Based Access Control",
-    description:
-      "Assign owner, manager, and viewer roles. Control who can see which leads, edit routing rules, or access reporting — down to workspace level.",
-  },
-  {
-    icon: FileText,
-    benefit: "Full transparency",
-    title: "Audit Trail & Activity Log",
-    description:
-      "Every action on every lead is logged: capture, score change, routing event, message sent, rep assigned. Immutable, exportable, always available.",
-  },
-  {
-    icon: Database,
-    benefit: "Richer profiles",
-    title: "Custom Fields & Lead Enrichment",
-    description:
-      "Extend the lead model with custom fields that match your business. Enrich profiles with company data, source metadata, and conversation history automatically.",
-  },
-  {
-    icon: Bell,
-    benefit: "Never miss a beat",
-    title: "Real-Time Notifications",
-    description:
-      "Email and in-app alerts the moment a lead is assigned, qualified, or hits a threshold. Configure notification rules per rep, per team, or per lead stage.",
-  },
-  {
-    icon: Settings,
-    benefit: "Your rules",
-    title: "Workflow Automation",
-    description:
-      "Build trigger-based workflows that act on lead status changes, score thresholds, or time-based events. Automate follow-ups, escalations, and re-routing without code.",
-  },
-];
+function getIcon(iconName: string): LucideIcon {
+  if (iconName in Icons) return (Icons as unknown as Record<string, LucideIcon>)[iconName];
+  return Icons.Zap;
+}
+
+export default async function FeaturesPage() {
+  const modules = await getModules();
 
-const categories = [
-  {
-    label: "Capture & Intake",
-    icon: Zap,
-    features: ["Multi-Channel Capture", "Custom Fields & Lead Enrichment"],
-  },
-  {
-    label: "Intelligence",
-    icon: Brain,
-    features: ["AI Qualification & Scoring", "Playbooks & Templates", "Workflow Automation"],
-  },
-  {
-    label: "Operations",
-    icon: GitMerge,
-    features: ["Smart Routing Rules", "Team Inbox & Human Handover", "Real-Time Notifications"],
-  },
-  {
-    label: "Visibility",
-    icon: BarChart3,
-    features: ["Analytics & Conversion Tracking", "Audit Trail & Activity Log"],
-  },
-  {
-    label: "Platform",
-    icon: Shield,
-    features: ["CRM Sync & Integrations", "Role-Based Access Control"],
-  },
-];
+  // Map DB modules to marketing features
+  const allFeatures = modules
+    .filter((m) => MODULE_MARKETING_MAP[m.key])
+    .map((m) => ({
+      ...MODULE_MARKETING_MAP[m.key],
+      isEnabled: m.is_enabled,
+      moduleKey: m.key,
+    }));
+
+  // Categories with their features
+  const categoriesWithFeatures = FEATURE_CATEGORIES.map((cat) => ({
+    ...cat,
+    features: allFeatures.filter((f) => f.category === cat.key),
+  })).filter((cat) => cat.features.length > 0);
 
-export default function FeaturesPage() {
   return (
     <>
       {/* ─── HERO ─────────────────────────────────────────────────── */}
@@ -155,7 +52,6 @@ export default function FeaturesPage() {
               "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(15,118,110,0.25) 0%, transparent 70%)",
           }}
         />
-
         <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
           <p
             className="text-xs font-bold uppercase tracking-widest mb-4"
@@ -193,16 +89,20 @@ export default function FeaturesPage() {
       >
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex flex-wrap items-center gap-2 justify-center">
-            {categories.map(({ label, icon: Icon }) => (
-              <a
-                key={label}
-                href={`#${label.toLowerCase().replace(/ & /g, "-").replace(/ /g, "-")}`}
-                className="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium category-link"
-              >
-                <Icon className="w-3.5 h-3.5" aria-hidden="true" />
-                {label}
-              </a>
-            ))}
+            {categoriesWithFeatures.map(({ label, iconName }) => {
+              const CatIcon = getIcon(iconName);
+              const anchorId = label.toLowerCase().replace(/ & /g, "-").replace(/ /g, "-");
+              return (
+                <a
+                  key={label}
+                  href={`#${anchorId}`}
+                  className="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium category-link"
+                >
+                  <CatIcon className="w-3.5 h-3.5" aria-hidden="true" />
+                  {label}
+                </a>
+              );
+            })}
           </div>
         </div>
       </section>
@@ -214,20 +114,27 @@ export default function FeaturesPage() {
         aria-labelledby="features-grid-heading"
       >
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <h2 id="features-grid-heading" className="sr-only">
-            All features
-          </h2>
+          <h2 id="features-grid-heading" className="sr-only">All features</h2>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
-            {features.map((feat) => (
-              <FeatureCard key={feat.title} {...feat} dark />
+            {allFeatures.map((feat) => (
+              <FeatureCard
+                key={feat.moduleKey}
+                iconName={feat.iconName}
+                benefit={feat.benefit}
+                title={feat.marketingTitle}
+                description={feat.description}
+                dark
+                comingSoon={!feat.isEnabled}
+              />
             ))}
           </div>
         </div>
       </section>
 
       {/* ─── CATEGORIES DEEP DIVE ─────────────────────────────────── */}
-      {categories.map(({ label, icon: Icon, features: catFeats }) => {
+      {categoriesWithFeatures.map(({ label, iconName, features: catFeats }) => {
         const anchorId = label.toLowerCase().replace(/ & /g, "-").replace(/ /g, "-");
+        const CatIcon = getIcon(iconName);
         return (
           <section
             key={label}
@@ -242,7 +149,7 @@ export default function FeaturesPage() {
                   className="w-10 h-10 rounded-xl flex items-center justify-center"
                   style={{ background: "rgba(15,118,110,0.1)", border: "1px solid rgba(15,118,110,0.2)" }}
                 >
-                  <Icon className="w-5 h-5" style={{ color: "#0F766E" }} aria-hidden="true" />
+                  <CatIcon className="w-5 h-5" style={{ color: "#0F766E" }} aria-hidden="true" />
                 </div>
                 <h2
                   id={`${anchorId}-heading`}
@@ -253,11 +160,16 @@ export default function FeaturesPage() {
                 </h2>
               </div>
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
-                {features
-                  .filter((f) => catFeats.includes(f.title))
-                  .map((feat) => (
-                    <FeatureCard key={feat.title} {...feat} />
-                  ))}
+                {catFeats.map((feat) => (
+                  <FeatureCard
+                    key={feat.moduleKey}
+                    iconName={feat.iconName}
+                    benefit={feat.benefit}
+                    title={feat.marketingTitle}
+                    description={feat.description}
+                    comingSoon={!feat.isEnabled}
+                  />
+                ))}
               </div>
             </div>
           </section>

Website/src/app/globals.css

@@ -291,3 +291,121 @@ body {
     linear-gradient(90deg, rgba(15, 118, 110, 0.08) 1px, transparent 1px);
   background-size: 40px 40px;
 }
+
+/* ─── Mission 33: Scroll-reveal + Catalog cards ──────────────────── */
+
+@keyframes revealUp {
+  from { opacity: 0; transform: translateY(30px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+/* Initial hidden state for scroll-reveal sections */
+.reveal-hidden {
+  opacity: 0;
+  transform: translateY(30px);
+}
+.reveal-visible {
+  animation: revealUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+/* Staggered reveals — add delay-N class alongside reveal-hidden */
+.reveal-delay-1 { animation-delay: 0.1s; }
+.reveal-delay-2 { animation-delay: 0.2s; }
+.reveal-delay-3 { animation-delay: 0.3s; }
+.reveal-delay-4 { animation-delay: 0.4s; }
+.reveal-delay-5 { animation-delay: 0.5s; }
+
+/* Dark catalog card (templates, integrations) */
+.catalog-card {
+  background: rgba(255,255,255,0.03);
+  border: 1px solid rgba(255,255,255,0.07);
+  border-radius: 1rem;
+  transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
+}
+.catalog-card:hover {
+  border-color: rgba(15,118,110,0.4);
+  background: rgba(15,118,110,0.06);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15,118,110,0.12);
+}
+
+/* Muted variant for coming-soon / disabled items */
+.catalog-card-muted {
+  background: rgba(255,255,255,0.02);
+  border: 1px solid rgba(255,255,255,0.05);
+  border-radius: 1rem;
+  opacity: 0.55;
+  transition: opacity 0.3s;
+}
+.catalog-card-muted:hover {
+  opacity: 0.7;
+}
+
+/* Platform badge pills */
+.badge-platform {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.1);
+  color: rgba(148,163,184,0.9);
+}
+
+/* Category badge pills */
+.badge-category {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.badge-category[data-category="lead_generation"] {
+  background: rgba(20,184,166,0.15);
+  color: #14B8A6;
+  border: 1px solid rgba(20,184,166,0.3);
+}
+.badge-category[data-category="sales"] {
+  background: rgba(59,130,246,0.15);
+  color: #60A5FA;
+  border: 1px solid rgba(59,130,246,0.3);
+}
+.badge-category[data-category="customer_support"] {
+  background: rgba(245,158,11,0.15);
+  color: #FBBF24;
+  border: 1px solid rgba(245,158,11,0.3);
+}
+.badge-category[data-category="onboarding"] {
+  background: rgba(168,85,247,0.15);
+  color: #C084FC;
+  border: 1px solid rgba(168,85,247,0.3);
+}
+
+/* Skeleton loading line */
+.skeleton-line {
+  height: 12px;
+  border-radius: 6px;
+  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+/* Active category filter tab */
+.category-link-active {
+  background: rgba(15,118,110,0.15);
+  border: 1px solid rgba(20,184,166,0.4);
+  color: var(--secondary);
+}

Website/src/app/integrations/page.tsx

@@ -0,0 +1,231 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { ArrowRight, Cable, RefreshCw, Zap } from "lucide-react";
+import { getIntegrationProviders } from "@/lib/api";
+import CTASection from "@/components/CTASection";
+
+export const metadata: Metadata = {
+  title: "Integrations — Connect Your Entire Stack",
+  description:
+    "LeadPilot integrates natively with WhatsApp Cloud API, Meta (Instagram/Messenger), and Zoho CRM. Connect, sync, and automate.",
+};
+
+const PROVIDER_COLORS: Record<string, string> = {
+  whatsapp: "#25D366",
+  meta: "#1877F2",
+  zoho: "#E42527",
+};
+
+const howItWorks = [
+  {
+    icon: Cable,
+    step: "01",
+    title: "Connect",
+    description:
+      "Add your integration credentials from the Integrations Hub. LeadPilot handles authentication and connection health.",
+  },
+  {
+    icon: RefreshCw,
+    step: "02",
+    title: "Sync",
+    description:
+      "Leads, contacts, and conversations flow bidirectionally between LeadPilot and your connected platforms in real time.",
+  },
+  {
+    icon: Zap,
+    step: "03",
+    title: "Automate",
+    description:
+      "Build automation flows that span platforms — capture on WhatsApp, qualify with AI, push to Zoho CRM. All in one pipeline.",
+  },
+];
+
+export default async function IntegrationsPage() {
+  const providers = await getIntegrationProviders();
+
+  return (
+    <>
+      {/* ─── HERO ─────────────────────────────────────────────────── */}
+      <section
+        className="relative py-28 overflow-hidden"
+        style={{ background: "#0B1320" }}
+        aria-labelledby="integrations-hero-heading"
+      >
+        <div className="absolute inset-0 cockpit-grid opacity-40" aria-hidden="true" />
+        <div
+          className="absolute inset-0 pointer-events-none"
+          aria-hidden="true"
+          style={{
+            background:
+              "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(15,118,110,0.25) 0%, transparent 70%)",
+          }}
+        />
+        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <p
+            className="text-xs font-bold uppercase tracking-widest mb-4"
+            style={{ color: "#14B8A6" }}
+          >
+            Integrations
+          </p>
+          <h1
+            id="integrations-hero-heading"
+            className="text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-6 tracking-tight"
+          >
+            Connect your entire stack.
+            <br />
+            <span className="gradient-text">No code required.</span>
+          </h1>
+          <p
+            className="text-lg max-w-2xl mx-auto leading-relaxed"
+            style={{ color: "rgba(148,163,184,0.9)" }}
+          >
+            Native integrations with the messaging platforms and CRM your revenue team already uses.
+            Set up in minutes, stay connected forever.
+          </p>
+        </div>
+      </section>
+
+      {/* ─── PROVIDER CARDS ───────────────────────────────────────── */}
+      <section
+        className="py-24"
+        style={{ background: "#0B1320" }}
+        aria-labelledby="providers-heading"
+      >
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h2 id="providers-heading" className="sr-only">Available integrations</h2>
+
+          {providers.length === 0 ? (
+            <p className="text-center text-lg" style={{ color: "#64748B" }}>
+              Integrations are loading. Check back soon.
+            </p>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {providers.map((p) => {
+                const color = PROVIDER_COLORS[p.key] ?? "#0F766E";
+                return (
+                  <div
+                    key={p.key}
+                    className="catalog-card p-8 flex flex-col"
+                  >
+                    {/* Icon */}
+                    <div
+                      className="w-14 h-14 rounded-xl flex items-center justify-center mb-5"
+                      style={{
+                        background: `${color}15`,
+                        border: `1px solid ${color}30`,
+                      }}
+                    >
+                      <span className="text-2xl font-bold" style={{ color }}>
+                        {p.label.charAt(0)}
+                      </span>
+                    </div>
+
+                    {/* Name + description */}
+                    <h3 className="text-white font-bold text-lg mb-2">{p.label}</h3>
+                    <p
+                      className="text-sm leading-relaxed mb-5 flex-1"
+                      style={{ color: "rgba(148,163,184,0.85)" }}
+                    >
+                      {p.description}
+                    </p>
+
+                    {/* Required fields */}
+                    {p.fields.length > 0 && (
+                      <div>
+                        <p className="text-[10px] font-semibold uppercase tracking-wider mb-2" style={{ color: "#475569" }}>
+                          What you need
+                        </p>
+                        <ul className="space-y-1">
+                          {p.fields.map((f) => (
+                            <li key={f.name} className="text-xs" style={{ color: "#94A3B8" }}>
+                              • {f.label}
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* ─── HOW IT WORKS ─────────────────────────────────────────── */}
+      <section
+        className="py-24 border-t"
+        style={{ background: "#0E1826", borderColor: "rgba(255,255,255,0.06)" }}
+        aria-labelledby="how-integrations-work"
+      >
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <p
+              className="text-xs font-bold uppercase tracking-widest mb-3"
+              style={{ color: "#14B8A6" }}
+            >
+              How It Works
+            </p>
+            <h2
+              id="how-integrations-work"
+              className="text-3xl sm:text-4xl font-bold text-white tracking-tight"
+            >
+              Three steps to a connected pipeline
+            </h2>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {howItWorks.map(({ icon: Icon, step, title, description }) => (
+              <div key={step} className="text-center">
+                <div
+                  className="w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-5"
+                  style={{
+                    background: "rgba(15,118,110,0.15)",
+                    border: "1px solid rgba(20,184,166,0.3)",
+                  }}
+                >
+                  <Icon className="w-5 h-5" style={{ color: "#14B8A6" }} aria-hidden="true" />
+                </div>
+                <span
+                  className="text-xl font-bold block mb-2"
+                  style={{
+                    background: "linear-gradient(135deg, #0F766E, #14B8A6)",
+                    WebkitBackgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                    backgroundClip: "text",
+                  }}
+                >
+                  {step}
+                </span>
+                <h3 className="text-white font-semibold text-base mb-2">{title}</h3>
+                <p className="text-sm leading-relaxed" style={{ color: "#94A3B8" }}>
+                  {description}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          <div className="text-center mt-12">
+            <Link
+              href="/contact"
+              className="inline-flex items-center gap-2 text-sm font-semibold text-link-teal"
+            >
+              Need help connecting? Contact us
+              <ArrowRight className="w-4 h-4" aria-hidden="true" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* ─── CTA ──────────────────────────────────────────────────── */}
+      <CTASection
+        headline="Ready to connect your stack?"
+        subheadline="Set up integrations in minutes and start automating your lead pipeline today."
+        primaryLabel="Book a Demo"
+        primaryHref="/contact"
+        secondaryLabel="See Templates"
+        secondaryHref="/templates"
+      />
+    </>
+  );
+}

Website/src/app/page.tsx

@@ -1,12 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import {
-  Zap,
-  Target,
-  GitMerge,
-  BarChart3,
-  MessageSquare,
-  Shield,
   ArrowRight,
   CheckCircle,
   Users,
@@ -16,6 +10,8 @@ import {
 import CTASection from "@/components/CTASection";
 import FeatureCard from "@/components/FeatureCard";
 import PlanCard from "@/components/PlanCard";
+import { getPlans, getModules, getIntegrationProviders, getPublicTemplates } from "@/lib/api";
+import { MODULE_MARKETING_MAP } from "@/lib/moduleMap";
 
 export const metadata: Metadata = {
   title: "LeadPilot — AI-Native Lead Capture, Qualification & Routing",
@@ -23,136 +19,65 @@ export const metadata: Metadata = {
     "LeadPilot is the AI-native platform that captures, qualifies, and routes leads to the right rep automatically. Close more deals without growing headcount.",
 };
 
-const features = [
-  {
-    icon: Zap,
-    benefit: "Convert faster",
-    title: "AI Lead Qualification",
-    description:
-      "Custom AI prompts score and qualify every inbound lead in seconds. No manual filtering, no missed opportunities.",
-  },
-  {
-    icon: Target,
-    benefit: "Zero leakage",
-    title: "Multi-Channel Capture",
-    description:
-      "Capture leads from web forms, chat widgets, WhatsApp, and more — all routed into one unified pipeline.",
-  },
-  {
-    icon: GitMerge,
-    benefit: "Right rep, right time",
-    title: "Smart Routing Rules",
-    description:
-      "Route leads by territory, product line, availability, or any custom logic you define. Instant assignment.",
-  },
-  {
-    icon: BarChart3,
-    benefit: "Improve decisions",
-    title: "Conversion Analytics",
-    description:
-      "Track lead-to-close conversion rates, response times, and team performance across the full funnel.",
-  },
-  {
-    icon: MessageSquare,
-    benefit: "Stay human",
-    title: "Team Inbox & Handover",
-    description:
-      "AI handles first touch and qualification; your team steps in exactly when a human connection matters.",
-  },
-  {
-    icon: Shield,
-    benefit: "Audit-ready",
-    title: "Activity Log & Access Control",
-    description:
-      "Role-based permissions and full audit trail. Know who touched what, and when.",
-  },
-];
+// ── Pricing lookup (same as plans page) ─────────────────────────────
+
+const PLAN_PRICING: Record<string, { price: string; priceNote: string; tagline: string; available: boolean }> = {
+  free: { price: "$0", priceNote: "/ month", tagline: "Start capturing leads today", available: true },
+  growth: { price: "Coming Soon", priceNote: "", tagline: "For growing sales teams", available: false },
+  enterprise: { price: "Contact Us", priceNote: "", tagline: "Custom deployment for large organisations", available: false },
+};
+
+function entitlementToString(moduleKey: string, hardLimit: number | null): string | null {
+  const info = MODULE_MARKETING_MAP[moduleKey];
+  if (!info) return null;
+  if (hardLimit === null) return `${info.marketingTitle} (Unlimited)`;
+  if (hardLimit > 0) return `${info.marketingTitle} (up to ${hardLimit.toLocaleString()})`;
+  return info.marketingTitle;
+}
+
+// ── Static content (narrative, not feature claims) ──────────────────
 
 const steps = [
-  {
-    number: "01",
-    title: "Capture",
-    description:
-      "Leads arrive from any channel — your forms, chat, or integrations. LeadPilot ingests them all instantly.",
-  },
-  {
-    number: "02",
-    title: "Qualify",
-    description:
-      "Our AI engages, asks the right questions, and scores every lead based on your ideal customer profile.",
-  },
-  {
-    number: "03",
-    title: "Route",
-    description:
-      "Qualified leads are dispatched to the right rep or team — automatically, with zero manual hand-off.",
-  },
-  {
-    number: "04",
-    title: "Follow Up",
-    description:
-      "Automated follow-up sequences keep leads warm while your team focuses on closing.",
-  },
-  {
-    number: "05",
-    title: "Report",
-    description:
-      "Real-time dashboards show conversion rates, pipeline velocity, and where you're losing leads.",
-  },
+  { number: "01", title: "Capture", description: "Leads arrive from any channel — your forms, chat, or integrations. LeadPilot ingests them all instantly." },
+  { number: "02", title: "Qualify", description: "Our AI engages, asks the right questions, and scores every lead based on your ideal customer profile." },
+  { number: "03", title: "Route", description: "Qualified leads are dispatched to the right rep or team — automatically, with zero manual hand-off." },
+  { number: "04", title: "Follow Up", description: "Automated follow-up sequences keep leads warm while your team focuses on closing." },
+  { number: "05", title: "Report", description: "Real-time dashboards show conversion rates, pipeline velocity, and where you're losing leads." },
 ];
 
-const plans = [
-  {
-    name: "Free",
-    tagline: "Start capturing leads today",
-    price: "$0",
-    priceNote: "/ month",
-    features: [
-      "Basic lead capture (up to a limited number of leads)",
-      "AI qualification prompts",
-      "Manual routing",
-      "Email notifications",
-      "Basic analytics dashboard",
-      "1 team seat",
-    ],
-    ctaLabel: "Get Started Free",
-    ctaHref: "/plans",
-    available: true,
-    highlighted: true,
-  },
-  {
-    name: "Growth",
-    tagline: "For growing sales teams",
-    price: "Coming Soon",
-    features: [
-      "Everything in Free",
-      "Unlimited lead capture",
-      "Advanced AI qualification",
-      "Automated routing rules",
-      "CRM integrations",
-      "Up to 5 team seats",
-    ],
-    ctaLabel: "Coming Soon",
-    available: false,
-  },
-  {
-    name: "Pro",
-    tagline: "For high-volume pipelines",
-    price: "Coming Soon",
-    features: [
-      "Everything in Growth",
-      "Multi-channel capture",
-      "Custom AI playbooks",
-      "Team inbox & handover",
-      "Priority support",
-      "Unlimited seats",
-    ],
-    ctaLabel: "Coming Soon",
-    available: false,
-  },
-];
+// ── Provider icon map ───────────────────────────────────────────────
+
+const PROVIDER_COLORS: Record<string, string> = {
+  whatsapp: "#25D366",
+  meta: "#1877F2",
+  zoho: "#E42527",
+};
+
+export default async function HomePage() {
+  const [plans, modules, providers, templates] = await Promise.all([
+    getPlans(),
+    getModules(),
+    getIntegrationProviders(),
+    getPublicTemplates(),
+  ]);
+
+  // Feature highlights — up to 6 enabled modules
+  const featureHighlights = modules
+    .filter((m) => MODULE_MARKETING_MAP[m.key] && m.is_enabled)
+    .slice(0, 6)
+    .map((m) => ({
+      ...MODULE_MARKETING_MAP[m.key],
+      moduleKey: m.key,
+    }));
+
+  // Featured templates
+  const featuredTemplates = templates.filter((t) => t.is_featured).slice(0, 5);
+
+  // Waitlist plan names
+  const waitlistNames = plans
+    .filter((p) => !PLAN_PRICING[p.name]?.available)
+    .map((p) => p.display_name);
 
-export default function HomePage() {
   return (
     <>
       {/* ─── HERO ─────────────────────────────────────────────────── */}
@@ -161,56 +86,36 @@ export default function HomePage() {
         style={{ background: "#0B1320" }}
         aria-labelledby="hero-heading"
       >
-        {/* Cockpit grid background */}
         <div className="absolute inset-0 cockpit-grid opacity-60" aria-hidden="true" />
-
-        {/* Radial glow */}
         <div
           className="absolute inset-0 pointer-events-none"
           aria-hidden="true"
           style={{
-            background:
-              "radial-gradient(ellipse 70% 60% at 50% 0%, rgba(15,118,110,0.3) 0%, transparent 65%)",
+            background: "radial-gradient(ellipse 70% 60% at 50% 0%, rgba(15,118,110,0.3) 0%, transparent 65%)",
           }}
         />
-
-        {/* Subtle side glow */}
         <div
           className="absolute top-1/3 left-0 w-64 h-64 rounded-full pointer-events-none"
           aria-hidden="true"
-          style={{
-            background: "rgba(15,118,110,0.12)",
-            filter: "blur(80px)",
-          }}
+          style={{ background: "rgba(15,118,110,0.12)", filter: "blur(80px)" }}
         />
         <div
           className="absolute top-1/3 right-0 w-64 h-64 rounded-full pointer-events-none"
           aria-hidden="true"
-          style={{
-            background: "rgba(20,184,166,0.1)",
-            filter: "blur(80px)",
-          }}
+          style={{ background: "rgba(20,184,166,0.1)", filter: "blur(80px)" }}
         />
 
         <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 text-center">
-          {/* Badge */}
-          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full mb-8"
-            style={{
-              background: "rgba(15,118,110,0.15)",
-              border: "1px solid rgba(20,184,166,0.3)",
-            }}
+          <div
+            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full mb-8"
+            style={{ background: "rgba(15,118,110,0.15)", border: "1px solid rgba(20,184,166,0.3)" }}
           >
-            <span
-              className="w-2 h-2 rounded-full animate-pulse-glow"
-              style={{ background: "#14B8A6" }}
-              aria-hidden="true"
-            />
+            <span className="w-2 h-2 rounded-full animate-pulse-glow" style={{ background: "#14B8A6" }} aria-hidden="true" />
             <span className="text-xs font-semibold tracking-wider" style={{ color: "#14B8A6" }}>
               AI-NATIVE LEAD PLATFORM
             </span>
           </div>
 
-          {/* Headline */}
           <h1
             id="hero-heading"
             className="text-5xl sm:text-6xl md:text-7xl font-bold text-white mb-6 tracking-tight leading-none"
@@ -229,10 +134,7 @@ export default function HomePage() {
           </p>
 
           <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-            <Link
-              href="/contact"
-              className="px-8 py-4 rounded-xl font-semibold text-base btn-primary"
-            >
+            <Link href="/contact" className="px-8 py-4 rounded-xl font-semibold text-base btn-primary">
               Book a Demo
             </Link>
             <Link
@@ -244,7 +146,6 @@ export default function HomePage() {
             </Link>
           </div>
 
-          {/* Trust stats */}
           <div className="mt-20 grid grid-cols-3 gap-4 max-w-lg mx-auto">
             {[
               { icon: TrendingUp, label: "More pipeline", sub: "per rep" },
@@ -260,51 +161,26 @@ export default function HomePage() {
           </div>
         </div>
 
-        {/* Scroll indicator */}
-        <div
-          className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1"
-          aria-hidden="true"
-        >
+        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1" aria-hidden="true">
           <span className="text-xs" style={{ color: "#475569" }}>scroll</span>
-          <div
-            className="w-px h-8 animate-pulse"
-            style={{ background: "linear-gradient(to bottom, #0F766E, transparent)" }}
-          />
+          <div className="w-px h-8 animate-pulse" style={{ background: "linear-gradient(to bottom, #0F766E, transparent)" }} />
         </div>
       </section>
 
       {/* ─── SOCIAL PROOF STRIP ───────────────────────────────────── */}
       <section
         className="py-12 border-y"
-        style={{
-          background: "#0E1826",
-          borderColor: "rgba(255,255,255,0.06)",
-        }}
+        style={{ background: "#0E1826", borderColor: "rgba(255,255,255,0.06)" }}
         aria-label="Trusted by teams across industries"
       >
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <p
-            className="text-center text-xs font-semibold uppercase tracking-widest mb-8"
-            style={{ color: "#475569" }}
-          >
+          <p className="text-center text-xs font-semibold uppercase tracking-widest mb-8" style={{ color: "#475569" }}>
             Trusted by revenue teams in
           </p>
           <div className="grid grid-cols-3 md:grid-cols-6 gap-8 items-center">
-            {[
-              "Real Estate",
-              "Healthcare Clinics",
-              "Marketing Agencies",
-              "B2B Services",
-              "Automotive",
-              "Retail & SMB",
-            ].map((industry) => (
+            {["Real Estate", "Healthcare Clinics", "Marketing Agencies", "B2B Services", "Automotive", "Retail & SMB"].map((industry) => (
               <div key={industry} className="text-center">
-                <span
-                  className="text-sm font-medium"
-                  style={{ color: "rgba(148,163,184,0.5)" }}
-                >
-                  {industry}
-                </span>
+                <span className="text-sm font-medium" style={{ color: "rgba(148,163,184,0.5)" }}>{industry}</span>
               </div>
             ))}
           </div>
@@ -319,19 +195,9 @@ export default function HomePage() {
       >
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
-            {/* Problem */}
             <div>
-              <p
-                className="text-xs font-bold uppercase tracking-widest mb-3"
-                style={{ color: "#EF4444" }}
-              >
-                The Problem
-              </p>
-              <h2
-                id="problem-heading"
-                className="text-3xl sm:text-4xl font-bold mb-6 tracking-tight"
-                style={{ color: "#0F172A" }}
-              >
+              <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "#EF4444" }}>The Problem</p>
+              <h2 id="problem-heading" className="text-3xl sm:text-4xl font-bold mb-6 tracking-tight" style={{ color: "#0F172A" }}>
                 Leads slip through the cracks every day.
               </h2>
               <ul className="space-y-4">
@@ -342,31 +208,15 @@ export default function HomePage() {
                   "You can't see where the pipeline breaks without real-time data.",
                 ].map((point) => (
                   <li key={point} className="flex items-start gap-3">
-                    <div
-                      className="mt-1.5 w-1.5 h-1.5 rounded-full shrink-0"
-                      style={{ background: "#EF4444" }}
-                      aria-hidden="true"
-                    />
-                    <p className="text-sm leading-relaxed" style={{ color: "#64748B" }}>
-                      {point}
-                    </p>
+                    <div className="mt-1.5 w-1.5 h-1.5 rounded-full shrink-0" style={{ background: "#EF4444" }} aria-hidden="true" />
+                    <p className="text-sm leading-relaxed" style={{ color: "#64748B" }}>{point}</p>
                   </li>
                 ))}
               </ul>
             </div>
-
-            {/* Solution */}
             <div>
-              <p
-                className="text-xs font-bold uppercase tracking-widest mb-3"
-                style={{ color: "#0F766E" }}
-              >
-                The Solution
-              </p>
-              <h2
-                className="text-3xl sm:text-4xl font-bold mb-6 tracking-tight"
-                style={{ color: "#0F172A" }}
-              >
+              <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "#0F766E" }}>The Solution</p>
+              <h2 className="text-3xl sm:text-4xl font-bold mb-6 tracking-tight" style={{ color: "#0F172A" }}>
                 LeadPilot handles the pipeline. You handle the close.
               </h2>
               <ul className="space-y-4">
@@ -377,21 +227,12 @@ export default function HomePage() {
                   "Real-time analytics show you exactly where revenue is being left behind.",
                 ].map((point) => (
                   <li key={point} className="flex items-start gap-3">
-                    <CheckCircle
-                      className="w-4 h-4 mt-0.5 shrink-0"
-                      style={{ color: "#0F766E" }}
-                      aria-hidden="true"
-                    />
-                    <p className="text-sm leading-relaxed" style={{ color: "#64748B" }}>
-                      {point}
-                    </p>
+                    <CheckCircle className="w-4 h-4 mt-0.5 shrink-0" style={{ color: "#0F766E" }} aria-hidden="true" />
+                    <p className="text-sm leading-relaxed" style={{ color: "#64748B" }}>{point}</p>
                   </li>
                 ))}
               </ul>
-              <Link
-                href="/product"
-                className="inline-flex items-center gap-2 mt-8 text-sm font-semibold text-link-primary"
-              >
+              <Link href="/product" className="inline-flex items-center gap-2 mt-8 text-sm font-semibold text-link-primary">
                 See how it works
                 <ArrowRight className="w-4 h-4" aria-hidden="true" />
               </Link>
@@ -409,67 +250,40 @@ export default function HomePage() {
         <div
           className="absolute inset-0 pointer-events-none"
           aria-hidden="true"
-          style={{
-            background:
-              "radial-gradient(ellipse 50% 60% at 50% 100%, rgba(15,118,110,0.2) 0%, transparent 70%)",
-          }}
+          style={{ background: "radial-gradient(ellipse 50% 60% at 50% 100%, rgba(15,118,110,0.2) 0%, transparent 70%)" }}
         />
         <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
-            <p
-              className="text-xs font-bold uppercase tracking-widest mb-3"
-              style={{ color: "#14B8A6" }}
-            >
-              How It Works
-            </p>
-            <h2
-              id="how-it-works-heading"
-              className="text-3xl sm:text-4xl font-bold text-white tracking-tight"
-            >
+            <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "#14B8A6" }}>How It Works</p>
+            <h2 id="how-it-works-heading" className="text-3xl sm:text-4xl font-bold text-white tracking-tight">
               Five steps from lead to revenue
             </h2>
           </div>
-
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
             {steps.map((step, i) => (
               <div
                 key={step.number}
                 className="relative rounded-xl p-6"
-                style={{
-                  background: "rgba(255,255,255,0.03)",
-                  border: "1px solid rgba(255,255,255,0.07)",
-                }}
+                style={{ background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.07)" }}
               >
-                {/* Connector line */}
                 {i < steps.length - 1 && (
-                  <div
-                    className="hidden lg:block absolute top-10 -right-3 w-6 h-px"
-                    aria-hidden="true"
-                    style={{ background: "rgba(15,118,110,0.4)" }}
-                  />
+                  <div className="hidden lg:block absolute top-10 -right-3 w-6 h-px" aria-hidden="true" style={{ background: "rgba(15,118,110,0.4)" }} />
                 )}
                 <span
                   className="text-3xl font-bold block mb-4"
-                  style={{
-                    background: "linear-gradient(135deg, #0F766E, #14B8A6)",
-                    WebkitBackgroundClip: "text",
-                    WebkitTextFillColor: "transparent",
-                    backgroundClip: "text",
-                  }}
+                  style={{ background: "linear-gradient(135deg, #0F766E, #14B8A6)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text" }}
                 >
                   {step.number}
                 </span>
                 <h3 className="text-white font-semibold mb-2">{step.title}</h3>
-                <p className="text-xs leading-relaxed" style={{ color: "#64748B" }}>
-                  {step.description}
-                </p>
+                <p className="text-xs leading-relaxed" style={{ color: "#64748B" }}>{step.description}</p>
               </div>
             ))}
           </div>
         </div>
       </section>
 
-      {/* ─── FEATURE HIGHLIGHTS ───────────────────────────────────── */}
+      {/* ─── FEATURE HIGHLIGHTS (DB-driven) ───────────────────────── */}
       <section
         className="py-24"
         style={{ background: "#F8FAFC" }}
@@ -477,35 +291,27 @@ export default function HomePage() {
       >
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
-            <p
-              className="text-xs font-bold uppercase tracking-widest mb-3"
-              style={{ color: "#0F766E" }}
-            >
-              Platform Features
-            </p>
-            <h2
-              id="features-heading"
-              className="text-3xl sm:text-4xl font-bold tracking-tight"
-              style={{ color: "#0F172A" }}
-            >
+            <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "#0F766E" }}>Platform Features</p>
+            <h2 id="features-heading" className="text-3xl sm:text-4xl font-bold tracking-tight" style={{ color: "#0F172A" }}>
               Everything your revenue team needs
             </h2>
             <p className="mt-4 text-base max-w-xl mx-auto" style={{ color: "#64748B" }}>
               One platform for the entire lead lifecycle — from first touch to closed deal.
             </p>
           </div>
-
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
-            {features.map((feat) => (
-              <FeatureCard key={feat.title} {...feat} />
+            {featureHighlights.map((feat) => (
+              <FeatureCard
+                key={feat.moduleKey}
+                iconName={feat.iconName}
+                benefit={feat.benefit}
+                title={feat.marketingTitle}
+                description={feat.description}
+              />
             ))}
           </div>
-
           <div className="text-center mt-10">
-            <Link
-              href="/features"
-              className="inline-flex items-center gap-2 text-sm font-semibold text-link-primary"
-            >
+            <Link href="/features" className="inline-flex items-center gap-2 text-sm font-semibold text-link-primary">
               View all features
               <ArrowRight className="w-4 h-4" aria-hidden="true" />
             </Link>
@@ -513,7 +319,115 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* ─── MINI PLANS PREVIEW ───────────────────────────────────── */}
+      {/* ─── TEMPLATES TEASER (DB-driven) ─────────────────────────── */}
+      {featuredTemplates.length > 0 && (
+        <section
+          className="py-24 relative overflow-hidden"
+          style={{ background: "#0B1320" }}
+          aria-labelledby="templates-teaser-heading"
+        >
+          <div className="absolute inset-0 cockpit-grid opacity-30" aria-hidden="true" />
+          <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="text-center mb-16">
+              <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "#14B8A6" }}>
+                Templates
+              </p>
+              <h2 id="templates-teaser-heading" className="text-3xl sm:text-4xl font-bold text-white tracking-tight">
+                Ready-made automation flows
+              </h2>
+              <p className="mt-4 text-base max-w-xl mx-auto" style={{ color: "#64748B" }}>
+                Clone a template, customise it for your business, and go live in minutes.
+              </p>
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+              {featuredTemplates.map((t) => (
+                <div key={t.id} className="catalog-card p-5">
+                  <span className="badge-category" data-category={t.category}>
+                    {t.category.replace(/_/g, " ")}
+                  </span>
+                  <h3 className="text-white font-semibold text-sm mt-3 mb-1">{t.name}</h3>
+                  <p className="text-xs leading-relaxed line-clamp-2" style={{ color: "rgba(148,163,184,0.8)" }}>
+                    {t.description}
+                  </p>
+                  <div className="flex flex-wrap gap-1.5 mt-3">
+                    {t.platforms.map((p) => (
+                      <span key={p} className="badge-platform">{p}</span>
+                    ))}
+                  </div>
+                  {t.clone_count > 0 && (
+                    <p className="text-[10px] mt-2" style={{ color: "#475569" }}>
+                      {t.clone_count.toLocaleString()} clones
+                    </p>
+                  )}
+                </div>
+              ))}
+            </div>
+            <div className="text-center mt-10">
+              <Link href="/templates" className="inline-flex items-center gap-2 text-sm font-semibold text-link-teal">
+                Browse all templates
+                <ArrowRight className="w-4 h-4" aria-hidden="true" />
+              </Link>
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* ─── INTEGRATIONS TEASER (DB-driven) ──────────────────────── */}
+      {providers.length > 0 && (
+        <section
+          className="py-24"
+          style={{ background: "#F8FAFC" }}
+          aria-labelledby="integrations-teaser-heading"
+        >
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="text-center mb-16">
+              <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "#0F766E" }}>
+                Integrations
+              </p>
+              <h2 id="integrations-teaser-heading" className="text-3xl sm:text-4xl font-bold tracking-tight" style={{ color: "#0F172A" }}>
+                Connect your entire stack
+              </h2>
+              <p className="mt-4 text-base max-w-xl mx-auto" style={{ color: "#64748B" }}>
+                Native integrations with the platforms your revenue team already uses.
+              </p>
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 max-w-3xl mx-auto">
+              {providers.map((p) => (
+                <div
+                  key={p.key}
+                  className="rounded-xl p-6 text-center feature-card-light"
+                >
+                  <div
+                    className="w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-4"
+                    style={{
+                      background: `${PROVIDER_COLORS[p.key] ?? "#0F766E"}15`,
+                      border: `1px solid ${PROVIDER_COLORS[p.key] ?? "#0F766E"}30`,
+                    }}
+                  >
+                    <span className="text-lg font-bold" style={{ color: PROVIDER_COLORS[p.key] ?? "#0F766E" }}>
+                      {p.label.charAt(0)}
+                    </span>
+                  </div>
+                  <h3 className="font-semibold text-base mb-1" style={{ color: "#1E293B" }}>
+                    {p.label}
+                  </h3>
+                  <p className="text-xs leading-relaxed" style={{ color: "#64748B" }}>
+                    {p.description}
+                  </p>
+                </div>
+              ))}
+            </div>
+            <div className="text-center mt-10">
+              <Link href="/integrations" className="inline-flex items-center gap-2 text-sm font-semibold text-link-primary">
+                View all integrations
+                <ArrowRight className="w-4 h-4" aria-hidden="true" />
+              </Link>
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* ─── MINI PLANS PREVIEW (DB-driven) ───────────────────────── */}
       <section
         className="py-24 relative overflow-hidden"
         style={{ background: "#0B1320" }}
@@ -522,43 +436,49 @@ export default function HomePage() {
         <div
           className="absolute inset-0 pointer-events-none"
           aria-hidden="true"
-          style={{
-            background:
-              "radial-gradient(ellipse 60% 50% at 50% 50%, rgba(15,118,110,0.15) 0%, transparent 70%)",
-          }}
+          style={{ background: "radial-gradient(ellipse 60% 50% at 50% 50%, rgba(15,118,110,0.15) 0%, transparent 70%)" }}
         />
         <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
-            <p
-              className="text-xs font-bold uppercase tracking-widest mb-3"
-              style={{ color: "#14B8A6" }}
-            >
-              Plans
-            </p>
-            <h2
-              id="plans-preview-heading"
-              className="text-3xl sm:text-4xl font-bold text-white tracking-tight"
-            >
+            <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "#14B8A6" }}>Plans</p>
+            <h2 id="plans-preview-heading" className="text-3xl sm:text-4xl font-bold text-white tracking-tight">
               Start free. Scale when ready.
             </h2>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
-            {plans.map((plan) => (
-              <PlanCard key={plan.name} {...plan} />
-            ))}
+          <div className={`grid grid-cols-1 ${plans.length === 3 ? "md:grid-cols-3" : "md:grid-cols-2"} gap-6 max-w-4xl mx-auto`}>
+            {plans.map((plan) => {
+              const pricing = PLAN_PRICING[plan.name] ?? { price: "Contact Us", priceNote: "", tagline: "", available: false };
+              const featureLines = plan.entitlements
+                .map((e) => entitlementToString(e.module_key, e.hard_limit))
+                .filter((s): s is string => s !== null)
+                .slice(0, 6);
+
+              return (
+                <PlanCard
+                  key={plan.id}
+                  name={plan.display_name}
+                  tagline={pricing.tagline || plan.description || ""}
+                  price={pricing.price}
+                  priceNote={pricing.priceNote}
+                  features={featureLines}
+                  ctaLabel={pricing.available ? "Get Started Free" : "Coming Soon"}
+                  ctaHref="/plans"
+                  available={pricing.available}
+                  highlighted={plan.name === "free"}
+                />
+              );
+            })}
           </div>
 
-          <p className="text-center mt-8 text-sm" style={{ color: "#475569" }}>
-            Join the waitlist for Growth and Pro —{" "}
-            <Link
-              href="/plans"
-              className="underline underline-offset-2 transition-colors duration-200"
-              style={{ color: "#14B8A6" }}
-            >
-              see Plans page
-            </Link>
-          </p>
+          {waitlistNames.length > 0 && (
+            <p className="text-center mt-8 text-sm" style={{ color: "#475569" }}>
+              Join the waitlist for {waitlistNames.join(" and ")} —{" "}
+              <Link href="/plans" className="underline underline-offset-2 transition-colors duration-200" style={{ color: "#14B8A6" }}>
+                see Plans page
+              </Link>
+            </p>
+          )}
         </div>
       </section>
 

Website/src/app/plans/PlansClientContent.tsx

@@ -0,0 +1,467 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Check,
+  Clock,
+  ChevronDown,
+  ChevronUp,
+  Loader2,
+  CheckCircle,
+  AlertCircle,
+} from "lucide-react";
+import Link from "next/link";
+import type { CatalogPlan } from "@/lib/api";
+import { MODULE_MARKETING_MAP } from "@/lib/moduleMap";
+
+// ── Pricing config (not in DB — marketing copy) ─────────────────────
+
+const PLAN_PRICING: Record<string, { price: string; priceNote: string; tagline: string; available: boolean }> = {
+  free: {
+    price: "$0",
+    priceNote: "/ month, forever",
+    tagline: "Start capturing and qualifying leads today",
+    available: true,
+  },
+  growth: {
+    price: "Coming Soon",
+    priceNote: "",
+    tagline: "For growing sales teams with higher volume",
+    available: false,
+  },
+  enterprise: {
+    price: "Contact Us",
+    priceNote: "",
+    tagline: "Custom deployment for large organisations",
+    available: false,
+  },
+};
+
+function entitlementToString(moduleKey: string, hardLimit: number | null): string | null {
+  const info = MODULE_MARKETING_MAP[moduleKey];
+  if (!info) return null;
+  if (hardLimit === null) return `${info.marketingTitle} (Unlimited)`;
+  if (hardLimit > 0) return `${info.marketingTitle} (up to ${hardLimit.toLocaleString()})`;
+  return info.marketingTitle;
+}
+
+// ── FAQs (marketing copy, not feature claims) ───────────────────────
+
+const faqs = [
+  {
+    question: "Is the Free plan actually free? No hidden fees?",
+    answer:
+      "Yes. The Free plan is genuinely free with no credit card required. You get full access to core capture and qualification features up to the plan limits. We will always have a free tier.",
+  },
+  {
+    question: "When will Growth and Enterprise plans be available?",
+    answer:
+      "We're in active development. Join the waitlist below and you'll be among the first to know — and receive early-access pricing when we launch.",
+  },
+  {
+    question: "Can I upgrade from Free to a paid plan later?",
+    answer:
+      "Absolutely. Your data and configuration will carry over. Upgrading will unlock higher limits and additional features without any migration needed.",
+  },
+  {
+    question: "How does lead volume work on the Free plan?",
+    answer:
+      "The Free plan includes a reasonable monthly lead capture limit suitable for small teams getting started. We'll always be transparent about limits — no surprise overages.",
+  },
+  {
+    question: "Do you offer refunds?",
+    answer:
+      "Paid plans (when available) will include a 14-day money-back guarantee. We'd rather earn your business on value than lock you in.",
+  },
+];
+
+// ── Sub-components ──────────────────────────────────────────────────
+
+function WaitlistForm({ planNames }: { planNames: string[] }) {
+  const [email, setEmail] = useState("");
+  const [plan, setPlan] = useState(planNames[0] ?? "Growth");
+  const [state, setState] = useState<"idle" | "loading" | "success" | "error">("idle");
+  const [error, setError] = useState("");
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setError("Please enter a valid email address.");
+      return;
+    }
+    setError("");
+    setState("loading");
+    // TODO: wire to real waitlist API
+    await new Promise((r) => setTimeout(r, 1200));
+    setState("success");
+  }
+
+  if (state === "success") {
+    return (
+      <div className="flex flex-col items-center gap-3 py-8 text-center" role="alert">
+        <CheckCircle className="w-10 h-10" style={{ color: "#14B8A6" }} aria-hidden="true" />
+        <p className="text-base font-semibold text-white">You&apos;re on the list.</p>
+        <p className="text-sm" style={{ color: "#94A3B8" }}>
+          We&apos;ll notify you as soon as {plan} launches — including early-access pricing.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} aria-label="Waitlist signup form">
+      <div className="flex flex-col sm:flex-row gap-3">
+        <div className="flex-1">
+          <label htmlFor="waitlist-email" className="sr-only">Work email</label>
+          <input
+            id="waitlist-email"
+            type="email"
+            value={email}
+            onChange={(e) => { setEmail(e.target.value); setError(""); }}
+            placeholder="your@company.com"
+            required
+            aria-required="true"
+            aria-describedby={error ? "waitlist-error" : undefined}
+            className="w-full px-4 py-3 rounded-xl text-sm placeholder:text-slate-600"
+            style={{
+              background: "rgba(255,255,255,0.06)",
+              border: error ? "1px solid rgba(239,68,68,0.5)" : "1px solid rgba(255,255,255,0.1)",
+              color: "#F1F5F9",
+              outline: "none",
+            }}
+            onFocus={(e) => {
+              e.currentTarget.style.borderColor = "#0F766E";
+              e.currentTarget.style.boxShadow = "0 0 0 3px rgba(15,118,110,0.2)";
+            }}
+            onBlur={(e) => {
+              e.currentTarget.style.borderColor = error ? "rgba(239,68,68,0.5)" : "rgba(255,255,255,0.1)";
+              e.currentTarget.style.boxShadow = "none";
+            }}
+          />
+        </div>
+        <div>
+          <label htmlFor="waitlist-plan" className="sr-only">Plan interest</label>
+          <select
+            id="waitlist-plan"
+            value={plan}
+            onChange={(e) => setPlan(e.target.value)}
+            className="w-full sm:w-36 px-4 py-3 rounded-xl text-sm"
+            style={{
+              background: "rgba(255,255,255,0.06)",
+              border: "1px solid rgba(255,255,255,0.1)",
+              color: "#F1F5F9",
+              outline: "none",
+            }}
+          >
+            {planNames.map((name) => (
+              <option key={name} value={name}>{name}</option>
+            ))}
+          </select>
+        </div>
+        <button
+          type="submit"
+          disabled={state === "loading"}
+          className="px-6 py-3 rounded-xl font-semibold text-white text-sm flex items-center justify-center gap-2 transition-all duration-200"
+          style={{
+            background: state === "loading"
+              ? "rgba(15,118,110,0.5)"
+              : "linear-gradient(135deg, #0F766E, #14B8A6)",
+            cursor: state === "loading" ? "not-allowed" : "pointer",
+          }}
+          onMouseEnter={(e) => {
+            if (state !== "loading") e.currentTarget.style.boxShadow = "0 0 20px rgba(15,118,110,0.4)";
+          }}
+          onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "none"; }}
+        >
+          {state === "loading" && <Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" />}
+          {state === "loading" ? "Joining…" : "Join Waitlist"}
+        </button>
+      </div>
+      {error && (
+        <p id="waitlist-error" className="mt-2 text-xs flex items-center gap-1.5" style={{ color: "#FCA5A5" }} role="alert">
+          <AlertCircle className="w-3.5 h-3.5" aria-hidden="true" /> {error}
+        </p>
+      )}
+    </form>
+  );
+}
+
+function FAQItem({ question, answer }: { question: string; answer: string }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="rounded-xl overflow-hidden" style={{ border: "1px solid rgba(255,255,255,0.08)" }}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center justify-between px-6 py-5 text-left"
+        aria-expanded={open}
+        style={{ background: "rgba(255,255,255,0.03)" }}
+        onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(15,118,110,0.06)"; }}
+        onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.03)"; }}
+      >
+        <span className="text-sm font-semibold text-white pr-4">{question}</span>
+        {open
+          ? <ChevronUp className="w-4 h-4 shrink-0" style={{ color: "#14B8A6" }} aria-hidden="true" />
+          : <ChevronDown className="w-4 h-4 shrink-0" style={{ color: "#475569" }} aria-hidden="true" />
+        }
+      </button>
+      {open && (
+        <div
+          className="px-6 pb-5 pt-2"
+          style={{ background: "rgba(255,255,255,0.02)", borderTop: "1px solid rgba(255,255,255,0.06)" }}
+        >
+          <p className="text-sm leading-relaxed" style={{ color: "#94A3B8" }}>{answer}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Main Component ──────────────────────────────────────────────────
+
+export default function PlansClientContent({ plans }: { plans: CatalogPlan[] }) {
+  // Unavailable plan names for waitlist selector (exclude free)
+  const waitlistPlanNames = plans
+    .filter((p) => !PLAN_PRICING[p.name]?.available)
+    .map((p) => p.display_name);
+
+  return (
+    <>
+      {/* ─── HERO ─────────────────────────────────────────────────── */}
+      <section
+        className="relative py-28 overflow-hidden"
+        style={{ background: "#0B1320" }}
+        aria-labelledby="plans-hero-heading"
+      >
+        <div className="absolute inset-0 cockpit-grid opacity-40" aria-hidden="true" />
+        <div
+          className="absolute inset-0 pointer-events-none"
+          aria-hidden="true"
+          style={{
+            background: "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(15,118,110,0.25) 0%, transparent 70%)",
+          }}
+        />
+        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <p className="text-xs font-bold uppercase tracking-widest mb-4" style={{ color: "#14B8A6" }}>
+            Pricing
+          </p>
+          <h1
+            id="plans-hero-heading"
+            className="text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-6 tracking-tight"
+          >
+            Start free.
+            <br />
+            <span className="gradient-text">Scale when you&apos;re ready.</span>
+          </h1>
+          <p className="text-lg max-w-xl mx-auto leading-relaxed" style={{ color: "rgba(148,163,184,0.9)" }}>
+            The Free plan is available now with no credit card required.
+            {waitlistPlanNames.length > 0 && (
+              <> {waitlistPlanNames.join(" and ")} plans are coming soon — join the waitlist for early access.</>
+            )}
+          </p>
+        </div>
+      </section>
+
+      {/* ─── PLANS GRID ───────────────────────────────────────────── */}
+      <section
+        className="py-24"
+        style={{ background: "#0B1320" }}
+        aria-labelledby="plans-grid-heading"
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h2 id="plans-grid-heading" className="sr-only">Available plans</h2>
+
+          {plans.length === 0 ? (
+            <p className="text-center text-lg" style={{ color: "#64748B" }}>
+              Plans are loading. Check back soon.
+            </p>
+          ) : (
+            <div className={`grid grid-cols-1 ${plans.length === 3 ? "md:grid-cols-3" : "md:grid-cols-2 xl:grid-cols-4"} gap-6 max-w-5xl mx-auto`}>
+              {plans.map((plan) => {
+                const pricing = PLAN_PRICING[plan.name] ?? { price: "Contact Us", priceNote: "", tagline: plan.description ?? "", available: false };
+                const highlighted = plan.name === "free";
+
+                // Convert entitlements to marketing strings
+                const featureLines = plan.entitlements
+                  .map((e) => entitlementToString(e.module_key, e.hard_limit))
+                  .filter((s): s is string => s !== null);
+
+                return (
+                  <div
+                    key={plan.id}
+                    className="relative rounded-2xl p-8 flex flex-col transition-all duration-300"
+                    style={
+                      highlighted
+                        ? {
+                            background: "rgba(15,118,110,0.08)",
+                            border: "1px solid rgba(15,118,110,0.4)",
+                            boxShadow: "0 0 50px rgba(15,118,110,0.2)",
+                          }
+                        : pricing.available
+                        ? {
+                            background: "rgba(255,255,255,0.04)",
+                            border: "1px solid rgba(255,255,255,0.1)",
+                          }
+                        : {
+                            background: "rgba(255,255,255,0.02)",
+                            border: "1px solid rgba(255,255,255,0.06)",
+                          }
+                    }
+                  >
+                    {/* Badges */}
+                    {highlighted && (
+                      <div
+                        className="absolute -top-3.5 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full text-xs font-bold text-white whitespace-nowrap"
+                        style={{ background: "linear-gradient(135deg, #0F766E, #14B8A6)" }}
+                      >
+                        Available Now
+                      </div>
+                    )}
+                    {!pricing.available && (
+                      <div
+                        className="absolute top-4 right-4 flex items-center gap-1.5 px-2.5 py-1 rounded-full"
+                        style={{ background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.08)" }}
+                      >
+                        <Clock className="w-3 h-3" style={{ color: "#64748B" }} aria-hidden="true" />
+                        <span className="text-xs font-medium" style={{ color: "#64748B" }}>Coming Soon</span>
+                      </div>
+                    )}
+
+                    {/* Header */}
+                    <div className="mb-6">
+                      <h3
+                        className="text-lg font-bold mb-1"
+                        style={{ color: pricing.available ? "#F1F5F9" : "#64748B" }}
+                      >
+                        {plan.display_name}
+                      </h3>
+                      <p className="text-sm" style={{ color: pricing.available ? "#94A3B8" : "#475569" }}>
+                        {pricing.tagline}
+                      </p>
+                    </div>
+
+                    {/* Price */}
+                    <div className="mb-8">
+                      <span
+                        className="text-3xl font-bold"
+                        style={{ color: pricing.available ? "#FFFFFF" : "#475569" }}
+                      >
+                        {pricing.price}
+                      </span>
+                      {pricing.priceNote && (
+                        <span className="text-sm ml-2" style={{ color: "#64748B" }}>{pricing.priceNote}</span>
+                      )}
+                    </div>
+
+                    {/* Features from DB entitlements */}
+                    <ul className="space-y-3 mb-8 flex-1" role="list">
+                      {featureLines.map((feat) => (
+                        <li key={feat} className="flex items-start gap-2.5">
+                          <Check
+                            className="w-4 h-4 mt-0.5 shrink-0"
+                            style={{ color: pricing.available ? "#14B8A6" : "#334155" }}
+                            aria-hidden="true"
+                          />
+                          <span className="text-sm" style={{ color: pricing.available ? "#CBD5E1" : "#475569" }}>
+                            {feat}
+                          </span>
+                        </li>
+                      ))}
+                    </ul>
+
+                    {/* CTA */}
+                    {pricing.available ? (
+                      <Link
+                        href="/contact"
+                        className="block text-center px-6 py-3 rounded-xl font-semibold text-white text-sm transition-all duration-200"
+                        style={{ background: "linear-gradient(135deg, #0F766E, #14B8A6)" }}
+                        onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "0 0 25px rgba(15,118,110,0.45)"; }}
+                        onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "none"; }}
+                      >
+                        Get Started Free
+                      </Link>
+                    ) : (
+                      <a
+                        href="#waitlist"
+                        className="block text-center px-6 py-3 rounded-xl font-semibold text-sm transition-all duration-200"
+                        style={{
+                          background: "rgba(255,255,255,0.05)",
+                          border: "1px solid rgba(255,255,255,0.08)",
+                          color: "#475569",
+                        }}
+                        onMouseEnter={(e) => {
+                          e.currentTarget.style.color = "#94A3B8";
+                          e.currentTarget.style.borderColor = "rgba(255,255,255,0.15)";
+                        }}
+                        onMouseLeave={(e) => {
+                          e.currentTarget.style.color = "#475569";
+                          e.currentTarget.style.borderColor = "rgba(255,255,255,0.08)";
+                        }}
+                      >
+                        Join Waitlist
+                      </a>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          <p className="text-center mt-10 text-sm" style={{ color: "#475569" }}>
+            All plans include SSL, data privacy, and a secure hosting environment.{" "}
+            <Link href="/contact" className="underline underline-offset-2" style={{ color: "#14B8A6" }}>
+              Contact us
+            </Link>{" "}
+            with questions about pricing or custom arrangements.
+          </p>
+        </div>
+      </section>
+
+      {/* ─── WAITLIST ─────────────────────────────────────────────── */}
+      {waitlistPlanNames.length > 0 && (
+        <section
+          id="waitlist"
+          className="py-24 border-t"
+          style={{ background: "#0E1826", borderColor: "rgba(255,255,255,0.07)" }}
+          aria-labelledby="waitlist-heading"
+        >
+          <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "#14B8A6" }}>
+              Early Access
+            </p>
+            <h2 id="waitlist-heading" className="text-3xl font-bold text-white mb-4 tracking-tight">
+              Join the waitlist for paid plans.
+            </h2>
+            <p className="text-base mb-8" style={{ color: "#94A3B8" }}>
+              Be first in line when {waitlistPlanNames.join(" and ")} launch — with early-access pricing.
+            </p>
+            <WaitlistForm planNames={waitlistPlanNames} />
+          </div>
+        </section>
+      )}
+
+      {/* ─── FAQ ──────────────────────────────────────────────────── */}
+      <section
+        className="py-24 border-t"
+        style={{ background: "#0B1320", borderColor: "rgba(255,255,255,0.06)" }}
+        aria-labelledby="faq-heading"
+      >
+        <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
+          <h2 id="faq-heading" className="text-3xl font-bold text-white mb-10 tracking-tight text-center">
+            Pricing FAQ
+          </h2>
+          <div className="space-y-3">
+            {faqs.map((faq) => (
+              <FAQItem key={faq.question} {...faq} />
+            ))}
+          </div>
+          <p className="mt-10 text-center text-sm" style={{ color: "#475569" }}>
+            Still have questions?{" "}
+            <Link href="/contact" className="underline underline-offset-2" style={{ color: "#14B8A6" }}>
+              Contact us
+            </Link>
+          </p>
+        </div>
+      </section>
+    </>
+  );
+}

Website/src/app/plans/page.tsx

@@ -1,573 +1,14 @@
-"use client";
-
-import { useState } from "react";
-import {
-  Check,
-  Clock,
-  ChevronDown,
-  ChevronUp,
-  Loader2,
-  CheckCircle,
-  AlertCircle,
-} from "lucide-react";
-import Link from "next/link";
-
-const tiers = [
-  {
-    name: "Free",
-    tagline: "Start capturing and qualifying leads today",
-    price: "$0",
-    priceNote: "/ month, forever",
-    available: true,
-    highlighted: true,
-    ctaLabel: "Get Started Free",
-    ctaHref: "/contact",
-    features: [
-      "Lead capture (limited monthly volume)",
-      "AI qualification prompts (basic)",
-      "Manual routing to team members",
-      "Email notifications on new leads",
-      "Basic analytics dashboard",
-      "1 team seat",
-      "Community support",
-    ],
-    notIncluded: [
-      "Automated routing rules",
-      "CRM integrations",
-      "Advanced AI playbooks",
-      "Priority support",
-    ],
-  },
-  {
-    name: "Growth",
-    tagline: "For growing sales teams with higher volume",
-    price: "Coming Soon",
-    priceNote: "",
-    available: false,
-    highlighted: false,
-    ctaLabel: "Coming Soon",
-    ctaHref: "#waitlist",
-    features: [
-      "Everything in Free",
-      "Unlimited lead capture",
-      "Advanced AI qualification & scoring",
-      "Automated routing rules",
-      "CRM sync & integrations",
-      "Up to 5 team seats",
-      "Email & chat support",
-    ],
-    notIncluded: [],
-  },
-  {
-    name: "Pro",
-    tagline: "For high-volume pipelines and larger teams",
-    price: "Coming Soon",
-    priceNote: "",
-    available: false,
-    highlighted: false,
-    ctaLabel: "Coming Soon",
-    ctaHref: "#waitlist",
-    features: [
-      "Everything in Growth",
-      "Multi-channel capture",
-      "Custom AI playbooks & templates",
-      "Team inbox & human handover",
-      "Audit trail & activity log",
-      "Role-based access control",
-      "Priority support",
-      "Unlimited seats",
-    ],
-    notIncluded: [],
-  },
-  {
-    name: "Enterprise",
-    tagline: "Custom deployment for large organisations",
-    price: "Coming Soon",
-    priceNote: "",
-    available: false,
-    highlighted: false,
-    ctaLabel: "Coming Soon",
-    ctaHref: "#waitlist",
-    features: [
-      "Everything in Pro",
-      "Dedicated infrastructure option",
-      "Custom integrations & API access",
-      "SSO & advanced security controls",
-      "SLA-backed uptime guarantees",
-      "Dedicated account manager",
-      "Custom onboarding & training",
-    ],
-    notIncluded: [],
-  },
-];
-
-const faqs = [
-  {
-    question: "Is the Free plan actually free? No hidden fees?",
-    answer:
-      "Yes. The Free plan is genuinely free with no credit card required. You get full access to core capture and qualification features up to the plan limits. We will always have a free tier.",
-  },
-  {
-    question: "When will Growth and Pro plans be available?",
-    answer:
-      "We're in active development. Join the waitlist below and you'll be among the first to know — and receive early-access pricing when we launch.",
-  },
-  {
-    question: "Can I upgrade from Free to a paid plan later?",
-    answer:
-      "Absolutely. Your data and configuration will carry over. Upgrading will unlock higher limits and additional features without any migration needed.",
-  },
-  {
-    question: "How does lead volume work on the Free plan?",
-    answer:
-      "The Free plan includes a reasonable monthly lead capture limit suitable for small teams getting started. We'll always be transparent about limits — no surprise overages.",
-  },
-  {
-    question: "Do you offer refunds?",
-    answer:
-      "Paid plans (when available) will include a 14-day money-back guarantee. We'd rather earn your business on value than lock you in.",
-  },
-];
-
-function WaitlistForm() {
-  const [email, setEmail] = useState("");
-  const [plan, setPlan] = useState("Growth");
-  const [state, setState] = useState<"idle" | "loading" | "success" | "error">("idle");
-  const [error, setError] = useState("");
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      setError("Please enter a valid email address.");
-      return;
-    }
-    setError("");
-    setState("loading");
-    // TODO: wire to real waitlist API
-    await new Promise((r) => setTimeout(r, 1200));
-    setState("success");
-  }
-
-  if (state === "success") {
-    return (
-      <div
-        className="flex flex-col items-center gap-3 py-8 text-center"
-        role="alert"
-      >
-        <CheckCircle className="w-10 h-10" style={{ color: "#14B8A6" }} aria-hidden="true" />
-        <p className="text-base font-semibold text-white">You&apos;re on the list.</p>
-        <p className="text-sm" style={{ color: "#94A3B8" }}>
-          We&apos;ll notify you as soon as {plan} launches — including early-access pricing.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <form onSubmit={handleSubmit} aria-label="Waitlist signup form">
-      <div className="flex flex-col sm:flex-row gap-3">
-        <div className="flex-1">
-          <label htmlFor="waitlist-email" className="sr-only">
-            Work email
-          </label>
-          <input
-            id="waitlist-email"
-            type="email"
-            value={email}
-            onChange={(e) => { setEmail(e.target.value); setError(""); }}
-            placeholder="your@company.com"
-            required
-            aria-required="true"
-            aria-describedby={error ? "waitlist-error" : undefined}
-            className="w-full px-4 py-3 rounded-xl text-sm placeholder:text-slate-600"
-            style={{
-              background: "rgba(255,255,255,0.06)",
-              border: error ? "1px solid rgba(239,68,68,0.5)" : "1px solid rgba(255,255,255,0.1)",
-              color: "#F1F5F9",
-              outline: "none",
-            }}
-            onFocus={(e) => {
-              (e.currentTarget as HTMLElement).style.borderColor = "#0F766E";
-              (e.currentTarget as HTMLElement).style.boxShadow = "0 0 0 3px rgba(15,118,110,0.2)";
-            }}
-            onBlur={(e) => {
-              (e.currentTarget as HTMLElement).style.borderColor = error
-                ? "rgba(239,68,68,0.5)"
-                : "rgba(255,255,255,0.1)";
-              (e.currentTarget as HTMLElement).style.boxShadow = "none";
-            }}
-          />
-        </div>
-
-        <div>
-          <label htmlFor="waitlist-plan" className="sr-only">
-            Plan interest
-          </label>
-          <select
-            id="waitlist-plan"
-            value={plan}
-            onChange={(e) => setPlan(e.target.value)}
-            className="w-full sm:w-36 px-4 py-3 rounded-xl text-sm"
-            style={{
-              background: "rgba(255,255,255,0.06)",
-              border: "1px solid rgba(255,255,255,0.1)",
-              color: "#F1F5F9",
-              outline: "none",
-            }}
-          >
-            <option value="Growth">Growth</option>
-            <option value="Pro">Pro</option>
-            <option value="Enterprise">Enterprise</option>
-          </select>
-        </div>
-
-        <button
-          type="submit"
-          disabled={state === "loading"}
-          className="px-6 py-3 rounded-xl font-semibold text-white text-sm flex items-center justify-center gap-2 transition-all duration-200"
-          style={{
-            background: state === "loading"
-              ? "rgba(15,118,110,0.5)"
-              : "linear-gradient(135deg, #0F766E, #14B8A6)",
-            cursor: state === "loading" ? "not-allowed" : "pointer",
-          }}
-          onMouseEnter={(e) => {
-            if (state !== "loading") {
-              (e.currentTarget as HTMLElement).style.boxShadow = "0 0 20px rgba(15,118,110,0.4)";
-            }
-          }}
-          onMouseLeave={(e) => {
-            (e.currentTarget as HTMLElement).style.boxShadow = "none";
-          }}
-        >
-          {state === "loading" && <Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" />}
-          {state === "loading" ? "Joining…" : "Join Waitlist"}
-        </button>
-      </div>
-      {error && (
-        <p id="waitlist-error" className="mt-2 text-xs flex items-center gap-1.5" style={{ color: "#FCA5A5" }} role="alert">
-          <AlertCircle className="w-3.5 h-3.5" aria-hidden="true" /> {error}
-        </p>
-      )}
-    </form>
-  );
-}
-
-function FAQItem({ question, answer }: { question: string; answer: string }) {
-  const [open, setOpen] = useState(false);
-  return (
-    <div
-      className="rounded-xl overflow-hidden"
-      style={{ border: "1px solid rgba(255,255,255,0.08)" }}
-    >
-      <button
-        onClick={() => setOpen(!open)}
-        className="w-full flex items-center justify-between px-6 py-5 text-left"
-        aria-expanded={open}
-        style={{ background: "rgba(255,255,255,0.03)" }}
-        onMouseEnter={(e) => {
-          (e.currentTarget as HTMLElement).style.background = "rgba(15,118,110,0.06)";
-        }}
-        onMouseLeave={(e) => {
-          (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.03)";
-        }}
-      >
-        <span className="text-sm font-semibold text-white pr-4">{question}</span>
-        {open
-          ? <ChevronUp className="w-4 h-4 shrink-0" style={{ color: "#14B8A6" }} aria-hidden="true" />
-          : <ChevronDown className="w-4 h-4 shrink-0" style={{ color: "#475569" }} aria-hidden="true" />
-        }
-      </button>
-      {open && (
-        <div
-          className="px-6 pb-5 pt-2"
-          style={{ background: "rgba(255,255,255,0.02)", borderTop: "1px solid rgba(255,255,255,0.06)" }}
-        >
-          <p className="text-sm leading-relaxed" style={{ color: "#94A3B8" }}>
-            {answer}
-          </p>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default function PlansPage() {
-  return (
-    <>
-      {/* ─── HERO ───────────────────────────────────────���─────────── */}
-      <section
-        className="relative py-28 overflow-hidden"
-        style={{ background: "#0B1320" }}
-        aria-labelledby="plans-hero-heading"
-      >
-        <div className="absolute inset-0 cockpit-grid opacity-40" aria-hidden="true" />
-        <div
-          className="absolute inset-0 pointer-events-none"
-          aria-hidden="true"
-          style={{
-            background:
-              "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(15,118,110,0.25) 0%, transparent 70%)",
-          }}
-        />
-
-        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <p
-            className="text-xs font-bold uppercase tracking-widest mb-4"
-            style={{ color: "#14B8A6" }}
-          >
-            Pricing
-          </p>
-          <h1
-            id="plans-hero-heading"
-            className="text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-6 tracking-tight"
-          >
-            Start free.
-            <br />
-            <span className="gradient-text">Scale when you&apos;re ready.</span>
-          </h1>
-          <p
-            className="text-lg max-w-xl mx-auto leading-relaxed"
-            style={{ color: "rgba(148,163,184,0.9)" }}
-          >
-            The Free plan is available now with no credit card required.
-            Growth, Pro, and Enterprise plans are coming soon — join the waitlist for early access.
-          </p>
-        </div>
-      </section>
-
-      {/* ─── PLANS GRID ───────────────────────────────────────────── */}
-      <section
-        className="py-24"
-        style={{ background: "#0B1320" }}
-        aria-labelledby="plans-grid-heading"
-      >
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <h2 id="plans-grid-heading" className="sr-only">Available plans</h2>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
-            {tiers.map((tier) => (
-              <div
-                key={tier.name}
-                className="relative rounded-2xl p-8 flex flex-col transition-all duration-300"
-                style={
-                  tier.highlighted
-                    ? {
-                        background: "rgba(15,118,110,0.08)",
-                        border: "1px solid rgba(15,118,110,0.4)",
-                        boxShadow: "0 0 50px rgba(15,118,110,0.2)",
-                      }
-                    : tier.available
-                    ? {
-                        background: "rgba(255,255,255,0.04)",
-                        border: "1px solid rgba(255,255,255,0.1)",
-                      }
-                    : {
-                        background: "rgba(255,255,255,0.02)",
-                        border: "1px solid rgba(255,255,255,0.06)",
-                      }
-                }
-              >
-                {/* Badges */}
-                {tier.highlighted && (
-                  <div
-                    className="absolute -top-3.5 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full text-xs font-bold text-white whitespace-nowrap"
-                    style={{ background: "linear-gradient(135deg, #0F766E, #14B8A6)" }}
-                  >
-                    Available Now
-                  </div>
-                )}
-                {!tier.available && (
-                  <div
-                    className="absolute top-4 right-4 flex items-center gap-1.5 px-2.5 py-1 rounded-full"
-                    style={{
-                      background: "rgba(255,255,255,0.05)",
-                      border: "1px solid rgba(255,255,255,0.08)",
-                    }}
-                  >
-                    <Clock className="w-3 h-3" style={{ color: "#64748B" }} aria-hidden="true" />
-                    <span className="text-xs font-medium" style={{ color: "#64748B" }}>
-                      Coming Soon
-                    </span>
-                  </div>
-                )}
-
-                {/* Header */}
-                <div className="mb-6">
-                  <h3
-                    className="text-lg font-bold mb-1"
-                    style={{ color: tier.available ? "#F1F5F9" : "#64748B" }}
-                  >
-                    {tier.name}
-                  </h3>
-                  <p className="text-sm" style={{ color: tier.available ? "#94A3B8" : "#475569" }}>
-                    {tier.tagline}
-                  </p>
-                </div>
-
-                {/* Price */}
-                <div className="mb-8">
-                  <span
-                    className="text-3xl font-bold"
-                    style={{ color: tier.available ? "#FFFFFF" : "#475569" }}
-                  >
-                    {tier.price}
-                  </span>
-                  {tier.priceNote && (
-                    <span className="text-sm ml-2" style={{ color: "#64748B" }}>
-                      {tier.priceNote}
-                    </span>
-                  )}
-                </div>
-
-                {/* Features */}
-                <ul className="space-y-3 mb-8 flex-1" role="list">
-                  {tier.features.map((f) => (
-                    <li key={f} className="flex items-start gap-2.5">
-                      <Check
-                        className="w-4 h-4 mt-0.5 shrink-0"
-                        style={{ color: tier.available ? "#14B8A6" : "#334155" }}
-                        aria-hidden="true"
-                      />
-                      <span
-                        className="text-sm"
-                        style={{ color: tier.available ? "#CBD5E1" : "#475569" }}
-                      >
-                        {f}
-                      </span>
-                    </li>
-                  ))}
-                  {tier.notIncluded.map((f) => (
-                    <li key={f} className="flex items-start gap-2.5 opacity-40">
-                      <span
-                        className="w-4 h-4 mt-0.5 shrink-0 flex items-center justify-center text-xs"
-                        aria-hidden="true"
-                        style={{ color: "#475569" }}
-                      >
-                        —
-                      </span>
-                      <span className="text-sm line-through" style={{ color: "#475569" }}>
-                        {f}
-                      </span>
-                    </li>
-                  ))}
-                </ul>
-
-                {/* CTA */}
-                {tier.available ? (
-                  <Link
-                    href={tier.ctaHref}
-                    className="block text-center px-6 py-3 rounded-xl font-semibold text-white text-sm transition-all duration-200"
-                    style={{ background: "linear-gradient(135deg, #0F766E, #14B8A6)" }}
-                    onMouseEnter={(e) => {
-                      (e.currentTarget as HTMLElement).style.boxShadow =
-                        "0 0 25px rgba(15,118,110,0.45)";
-                    }}
-                    onMouseLeave={(e) => {
-                      (e.currentTarget as HTMLElement).style.boxShadow = "none";
-                    }}
-                  >
-                    {tier.ctaLabel}
-                  </Link>
-                ) : (
-                  <a
-                    href="#waitlist"
-                    className="block text-center px-6 py-3 rounded-xl font-semibold text-sm transition-all duration-200"
-                    style={{
-                      background: "rgba(255,255,255,0.05)",
-                      border: "1px solid rgba(255,255,255,0.08)",
-                      color: "#475569",
-                    }}
-                    onMouseEnter={(e) => {
-                      (e.currentTarget as HTMLElement).style.color = "#94A3B8";
-                      (e.currentTarget as HTMLElement).style.borderColor = "rgba(255,255,255,0.15)";
-                    }}
-                    onMouseLeave={(e) => {
-                      (e.currentTarget as HTMLElement).style.color = "#475569";
-                      (e.currentTarget as HTMLElement).style.borderColor = "rgba(255,255,255,0.08)";
-                    }}
-                  >
-                    Join Waitlist
-                  </a>
-                )}
-              </div>
-            ))}
-          </div>
-
-          {/* Comparison note */}
-          <p className="text-center mt-10 text-sm" style={{ color: "#475569" }}>
-            All plans include SSL, data privacy, and a secure hosting environment.{" "}
-            <Link
-              href="/contact"
-              className="underline underline-offset-2"
-              style={{ color: "#14B8A6" }}
-            >
-              Contact us
-            </Link>{" "}
-            with questions about pricing or custom arrangements.
-          </p>
-        </div>
-      </section>
-
-      {/* ─── WAITLIST ─────────────────────────────────────────────── */}
-      <section
-        id="waitlist"
-        className="py-24 border-t"
-        style={{ background: "#0E1826", borderColor: "rgba(255,255,255,0.07)" }}
-        aria-labelledby="waitlist-heading"
-      >
-        <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <p
-            className="text-xs font-bold uppercase tracking-widest mb-3"
-            style={{ color: "#14B8A6" }}
-          >
-            Early Access
-          </p>
-          <h2
-            id="waitlist-heading"
-            className="text-3xl font-bold text-white mb-4 tracking-tight"
-          >
-            Join the waitlist for paid plans.
-          </h2>
-          <p className="text-base mb-8" style={{ color: "#94A3B8" }}>
-            Be first in line when Growth, Pro, and Enterprise launch — with early-access pricing.
-          </p>
-
-          <WaitlistForm />
-        </div>
-      </section>
-
-      {/* ─── FAQ ───────────────────────────────────��──────────────── */}
-      <section
-        className="py-24 border-t"
-        style={{ background: "#0B1320", borderColor: "rgba(255,255,255,0.06)" }}
-        aria-labelledby="faq-heading"
-      >
-        <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
-          <h2
-            id="faq-heading"
-            className="text-3xl font-bold text-white mb-10 tracking-tight text-center"
-          >
-            Pricing FAQ
-          </h2>
-          <div className="space-y-3">
-            {faqs.map((faq) => (
-              <FAQItem key={faq.question} {...faq} />
-            ))}
-          </div>
-
-          <p className="mt-10 text-center text-sm" style={{ color: "#475569" }}>
-            Still have questions?{" "}
-            <Link
-              href="/contact"
-              className="underline underline-offset-2"
-              style={{ color: "#14B8A6" }}
-            >
-              Contact us
-            </Link>
-          </p>
-        </div>
-      </section>
-    </>
-  );
+import type { Metadata } from "next";
+import { getPlans } from "@/lib/api";
+import PlansClientContent from "./PlansClientContent";
+
+export const metadata: Metadata = {
+  title: "Plans — Start Free, Scale When Ready",
+  description:
+    "LeadPilot pricing: a free plan available now, plus Growth and Enterprise tiers coming soon. Join the waitlist for early access.",
+};
+
+export default async function PlansPage() {
+  const plans = await getPlans();
+  return <PlansClientContent plans={plans} />;
 }

Website/src/app/templates/CategoryFilter.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useState } from "react";
+import type { CatalogTemplate, CatalogEnum } from "@/lib/api";
+import TemplateCard from "./TemplateCard";
+
+interface Props {
+  templates: CatalogTemplate[];
+  categories: CatalogEnum[];
+}
+
+export default function CategoryFilter({ templates, categories }: Props) {
+  const [active, setActive] = useState<string | null>(null);
+
+  const filtered = active
+    ? templates.filter((t) => t.category === active)
+    : templates;
+
+  return (
+    <>
+      {/* Filter tabs */}
+      <div className="flex flex-wrap items-center gap-2 justify-center mb-12">
+        <button
+          onClick={() => setActive(null)}
+          className={`px-3 py-1.5 rounded-lg text-xs font-medium ${
+            active === null ? "category-link-active" : "category-link"
+          }`}
+        >
+          All
+        </button>
+        {categories.map((cat) => (
+          <button
+            key={cat.key}
+            onClick={() => setActive(cat.key)}
+            className={`px-3 py-1.5 rounded-lg text-xs font-medium ${
+              active === cat.key ? "category-link-active" : "category-link"
+            }`}
+          >
+            {cat.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Template grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+        {filtered.map((t) => (
+          <TemplateCard key={t.id} template={t} />
+        ))}
+      </div>
+
+      {filtered.length === 0 && (
+        <p className="text-center text-sm py-12" style={{ color: "#64748B" }}>
+          No templates in this category yet. Check back soon.
+        </p>
+      )}
+    </>
+  );
+}

Website/src/app/templates/TemplateCard.tsx

@@ -0,0 +1,55 @@
+import type { CatalogTemplate } from "@/lib/api";
+import { Star } from "lucide-react";
+
+interface Props {
+  template: CatalogTemplate;
+}
+
+export default function TemplateCard({ template: t }: Props) {
+  return (
+    <div className="catalog-card p-6 flex flex-col">
+      {/* Top row: category + featured */}
+      <div className="flex items-center gap-2 mb-3">
+        <span className="badge-category" data-category={t.category}>
+          {t.category.replace(/_/g, " ")}
+        </span>
+        {t.is_featured && (
+          <span className="inline-flex items-center gap-1 text-[10px] font-semibold" style={{ color: "#FBBF24" }}>
+            <Star className="w-3 h-3 fill-current" aria-hidden="true" />
+            Featured
+          </span>
+        )}
+      </div>
+
+      {/* Name + description */}
+      <h3 className="text-white font-semibold text-base mb-1">{t.name}</h3>
+      <p
+        className="text-sm leading-relaxed line-clamp-2 flex-1 mb-4"
+        style={{ color: "rgba(148,163,184,0.85)" }}
+      >
+        {t.description}
+      </p>
+
+      {/* Platform + integration badges */}
+      <div className="flex flex-wrap gap-1.5 mb-3">
+        {t.platforms.map((p) => (
+          <span key={p} className="badge-platform">{p}</span>
+        ))}
+      </div>
+
+      {/* Required integrations */}
+      {t.required_integrations.length > 0 && (
+        <p className="text-[10px] mb-2" style={{ color: "#475569" }}>
+          Requires: {t.required_integrations.join(", ")}
+        </p>
+      )}
+
+      {/* Clone count */}
+      {t.clone_count > 0 && (
+        <p className="text-[10px]" style={{ color: "#475569" }}>
+          {t.clone_count.toLocaleString()} clones
+        </p>
+      )}
+    </div>
+  );
+}

Website/src/app/templates/page.tsx

@@ -0,0 +1,121 @@
+import type { Metadata } from "next";
+import { getPublicTemplates, getTemplateCategories } from "@/lib/api";
+import CTASection from "@/components/CTASection";
+import CategoryFilter from "./CategoryFilter";
+import TemplateCard from "./TemplateCard";
+
+export const metadata: Metadata = {
+  title: "Templates — Ready-Made Automation Flows",
+  description:
+    "Browse LeadPilot's library of pre-built automation templates for WhatsApp, Instagram, Messenger, and more. Clone and customise in minutes.",
+};
+
+export default async function TemplatesPage() {
+  const [templates, categories] = await Promise.all([
+    getPublicTemplates(),
+    getTemplateCategories(),
+  ]);
+
+  const featuredTemplates = templates.filter((t) => t.is_featured);
+
+  return (
+    <>
+      {/* ─── HERO ─────────────────────────────────────────────────── */}
+      <section
+        className="relative py-28 overflow-hidden"
+        style={{ background: "#0B1320" }}
+        aria-labelledby="templates-hero-heading"
+      >
+        <div className="absolute inset-0 cockpit-grid opacity-40" aria-hidden="true" />
+        <div
+          className="absolute inset-0 pointer-events-none"
+          aria-hidden="true"
+          style={{
+            background:
+              "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(15,118,110,0.25) 0%, transparent 70%)",
+          }}
+        />
+        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <p
+            className="text-xs font-bold uppercase tracking-widest mb-4"
+            style={{ color: "#14B8A6" }}
+          >
+            Template Catalog
+          </p>
+          <h1
+            id="templates-hero-heading"
+            className="text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-6 tracking-tight"
+          >
+            Ready-made automation flows.
+            <br />
+            <span className="gradient-text">Clone. Customise. Launch.</span>
+          </h1>
+          <p
+            className="text-lg max-w-2xl mx-auto leading-relaxed"
+            style={{ color: "rgba(148,163,184,0.9)" }}
+          >
+            Pre-built workflows for lead qualification, appointment booking, support intake,
+            and more. Each template includes AI-powered nodes that you can tailor to your business.
+          </p>
+        </div>
+      </section>
+
+      {/* ─── FEATURED TEMPLATES ───────────────────────────────────── */}
+      {featuredTemplates.length > 0 && (
+        <section
+          className="py-16 border-b"
+          style={{ background: "#0E1826", borderColor: "rgba(255,255,255,0.06)" }}
+          aria-labelledby="featured-heading"
+        >
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <h2
+              id="featured-heading"
+              className="text-xs font-bold uppercase tracking-widest mb-8 text-center"
+              style={{ color: "#14B8A6" }}
+            >
+              Featured Templates
+            </h2>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+              {featuredTemplates.map((t) => (
+                <TemplateCard key={t.id} template={t} />
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* ─── ALL TEMPLATES (filterable) ───────────────────────────── */}
+      <section
+        className="py-24"
+        style={{ background: "#0B1320" }}
+        aria-labelledby="all-templates-heading"
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-10">
+            <h2
+              id="all-templates-heading"
+              className="text-2xl font-bold text-white tracking-tight mb-2"
+            >
+              All Templates
+            </h2>
+            <p className="text-sm" style={{ color: "#64748B" }}>
+              {templates.length} templates across {categories.length} categories
+            </p>
+          </div>
+
+          <CategoryFilter templates={templates} categories={categories} />
+        </div>
+      </section>
+
+      {/* ─── CTA ──────────────────────────────────────────────────── */}
+      <CTASection
+        headline="Ready to automate your pipeline?"
+        subheadline="Clone a template, customise it for your business, and go live in minutes."
+        primaryLabel="Book a Demo"
+        primaryHref="/contact"
+        secondaryLabel="Start Free"
+        secondaryHref="/plans"
+      />
+    </>
+  );
+}

Website/src/components/FeatureCard.tsx

@@ -1,23 +1,52 @@
-import { type LucideIcon } from "lucide-react";
+import * as Icons from "lucide-react";
+import { type LucideIcon, Clock } from "lucide-react";
 
 interface FeatureCardProps {
-  icon: LucideIcon;
+  icon?: LucideIcon;
+  iconName?: string;
   title: string;
   benefit: string;
   description: string;
   dark?: boolean;
+  comingSoon?: boolean;
+}
+
+function resolveIcon(iconName?: string, icon?: LucideIcon): LucideIcon {
+  if (icon) return icon;
+  if (iconName && iconName in Icons) {
+    return (Icons as unknown as Record<string, LucideIcon>)[iconName];
+  }
+  return Icons.Zap; // fallback
 }
 
 export default function FeatureCard({
-  icon: Icon,
+  icon,
+  iconName,
   title,
   benefit,
   description,
   dark = false,
+  comingSoon = false,
 }: FeatureCardProps) {
+  const Icon = resolveIcon(iconName, icon);
+
   if (dark) {
     return (
-      <div className="rounded-xl p-6 feature-card-dark">
+      <div className={`relative rounded-xl p-6 ${comingSoon ? "catalog-card-muted" : "feature-card-dark"}`}>
+        {comingSoon && (
+          <div
+            className="absolute top-4 right-4 flex items-center gap-1.5 px-2 py-0.5 rounded-full"
+            style={{
+              background: "rgba(255,255,255,0.06)",
+              border: "1px solid rgba(255,255,255,0.1)",
+            }}
+          >
+            <Clock className="w-3 h-3" style={{ color: "#64748B" }} aria-hidden="true" />
+            <span className="text-[10px] font-medium" style={{ color: "#64748B" }}>
+              Coming Soon
+            </span>
+          </div>
+        )}
         <div
           className="w-10 h-10 rounded-lg flex items-center justify-center mb-4"
           style={{ background: "rgba(15,118,110,0.2)", border: "1px solid rgba(20,184,166,0.25)" }}
@@ -39,7 +68,21 @@ export default function FeatureCard({
   }
 
   return (
-    <div className="rounded-xl p-6 feature-card-light">
+    <div className={`relative rounded-xl p-6 ${comingSoon ? "opacity-50" : "feature-card-light"}`}>
+      {comingSoon && (
+        <div
+          className="absolute top-4 right-4 flex items-center gap-1.5 px-2 py-0.5 rounded-full"
+          style={{
+            background: "rgba(15,118,110,0.08)",
+            border: "1px solid rgba(15,118,110,0.2)",
+          }}
+        >
+          <Clock className="w-3 h-3" style={{ color: "#64748B" }} aria-hidden="true" />
+          <span className="text-[10px] font-medium" style={{ color: "#64748B" }}>
+            Coming Soon
+          </span>
+        </div>
+      )}
       <div
         className="w-10 h-10 rounded-lg flex items-center justify-center mb-4"
         style={{ background: "rgba(15,118,110,0.08)", border: "1px solid rgba(15,118,110,0.15)" }}

Website/src/components/Footer.tsx

@@ -5,6 +5,8 @@ const footerNav = {
   Product: [
     { label: "How it Works", href: "/product" },
     { label: "Features", href: "/features" },
+    { label: "Templates", href: "/templates" },
+    { label: "Integrations", href: "/integrations" },
     { label: "Use Cases", href: "/use-cases" },
     { label: "Plans", href: "/plans" },
   ],

Website/src/components/Header.tsx

@@ -8,6 +8,8 @@ import { Menu, X, Zap } from "lucide-react";
 const navLinks = [
   { label: "Product", href: "/product" },
   { label: "Features", href: "/features" },
+  { label: "Templates", href: "/templates" },
+  { label: "Integrations", href: "/integrations" },
   { label: "Use Cases", href: "/use-cases" },
   { label: "Plans", href: "/plans" },
   { label: "About", href: "/about" },

Website/src/hooks/useIntersectionObserver.ts

@@ -0,0 +1,33 @@
+"use client";
+
+import { useEffect, useRef, type RefObject } from "react";
+
+/**
+ * Scroll-reveal hook: adds a CSS class when the element enters the viewport.
+ * Fires once, then disconnects the observer.
+ */
+export function useReveal<T extends HTMLElement>(
+  className = "reveal-visible",
+): RefObject<T | null> {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          el.classList.add(className);
+          observer.unobserve(el);
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [className]);
+
+  return ref;
+}

Website/src/lib/api.ts

@@ -0,0 +1,102 @@
+/**
+ * Catalog API client — fetches public data from the LeadPilot backend.
+ * Used by Server Components with ISR (revalidate every 60s).
+ */
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
+
+// ── Types ────────────────────────────────────────────────────────────
+
+export interface CatalogPlan {
+  id: string;
+  name: string;
+  display_name: string;
+  description: string | null;
+  sort_order: number;
+  entitlements: CatalogEntitlement[];
+}
+
+export interface CatalogEntitlement {
+  module_key: string;
+  hard_limit: number | null; // null = unlimited
+}
+
+export interface CatalogModule {
+  key: string;
+  label: string;
+  is_enabled: boolean;
+}
+
+export interface CatalogProvider {
+  key: string;
+  label: string;
+  description: string;
+  icon_hint: string;
+  fields: { name: string; label: string; type: string }[];
+}
+
+export interface CatalogTemplate {
+  id: string;
+  slug: string;
+  name: string;
+  description: string;
+  category: string;
+  industry_tags: string[];
+  platforms: string[];
+  required_integrations: string[];
+  is_featured: boolean;
+  clone_count: number;
+}
+
+export interface CatalogEnum {
+  key: string;
+  label: string;
+}
+
+// ── Generic fetcher ──────────────────────────────────────────────────
+
+interface Envelope<T> {
+  success: boolean;
+  data: T;
+  error: string | null;
+}
+
+async function fetchCatalog<T>(path: string): Promise<T> {
+  try {
+    const res = await fetch(`${API_BASE}/api/v1/catalog${path}`, {
+      next: { revalidate: 60 },
+    });
+    if (!res.ok) return [] as unknown as T;
+    const json: Envelope<T> = await res.json();
+    return json.success ? json.data : ([] as unknown as T);
+  } catch {
+    return [] as unknown as T;
+  }
+}
+
+// ── Typed fetchers ───────────────────────────────────────────────────
+
+export async function getPlans(): Promise<CatalogPlan[]> {
+  return fetchCatalog<CatalogPlan[]>("/plans");
+}
+
+export async function getModules(): Promise<CatalogModule[]> {
+  return fetchCatalog<CatalogModule[]>("/modules");
+}
+
+export async function getIntegrationProviders(): Promise<CatalogProvider[]> {
+  return fetchCatalog<CatalogProvider[]>("/integration-providers");
+}
+
+export async function getPublicTemplates(category?: string): Promise<CatalogTemplate[]> {
+  const params = category ? `?category=${encodeURIComponent(category)}` : "";
+  return fetchCatalog<CatalogTemplate[]>(`/templates${params}`);
+}
+
+export async function getTemplateCategories(): Promise<CatalogEnum[]> {
+  return fetchCatalog<CatalogEnum[]>("/template-categories");
+}
+
+export async function getTemplatePlatforms(): Promise<CatalogEnum[]> {
+  return fetchCatalog<CatalogEnum[]>("/template-platforms");
+}

Website/src/lib/moduleMap.ts

@@ -0,0 +1,149 @@
+/**
+ * Maps DB module keys to marketing-friendly content for the website.
+ * Only modules present here appear on the public site.
+ * A new DB module without an entry is silently excluded — no fake claims.
+ */
+
+export interface ModuleMarketingInfo {
+  marketingTitle: string;
+  benefit: string;
+  description: string;
+  iconName: string; // lucide-react icon name
+  category: "capture" | "intelligence" | "operations" | "visibility" | "platform";
+}
+
+export const MODULE_MARKETING_MAP: Record<string, ModuleMarketingInfo> = {
+  prompt_studio: {
+    marketingTitle: "AI Prompt Studio",
+    benefit: "Qualify at scale",
+    description:
+      "Custom AI prompts engage every lead the moment they arrive. Scores are assigned based on intent, fit, and urgency — so your reps only work leads worth their time.",
+    iconName: "Brain",
+    category: "intelligence",
+  },
+  runtime_engine: {
+    marketingTitle: "Runtime Engine",
+    benefit: "Always-on execution",
+    description:
+      "Process and route leads 24/7 with a high-throughput engine that handles qualification, scoring, and dispatch without downtime.",
+    iconName: "Zap",
+    category: "operations",
+  },
+  inbox: {
+    marketingTitle: "Team Inbox & Handover",
+    benefit: "Stay in the loop",
+    description:
+      "All conversations flow into a shared team inbox. Reps can pick up context instantly, send messages, and mark leads without switching tools.",
+    iconName: "Inbox",
+    category: "operations",
+  },
+  analytics: {
+    marketingTitle: "Analytics & Conversion Tracking",
+    benefit: "Measure what matters",
+    description:
+      "Track lead volume, qualification rate, response time, conversion by channel and rep, and pipeline velocity — all in real time from a single dashboard.",
+    iconName: "BarChart3",
+    category: "visibility",
+  },
+  integrations_hub: {
+    marketingTitle: "Integrations Hub",
+    benefit: "Connect your stack",
+    description:
+      "Manage all your connected platforms — WhatsApp, Meta, Zoho CRM — from a single dashboard. Configure, monitor, and troubleshoot in one place.",
+    iconName: "Globe",
+    category: "platform",
+  },
+  integrations_connect: {
+    marketingTitle: "Integration Connect",
+    benefit: "Zero leakage",
+    description:
+      "Capture leads from web forms, chat widgets, WhatsApp, and more — all routed into one unified pipeline with native integrations.",
+    iconName: "Cable",
+    category: "capture",
+  },
+  dispatch_engine: {
+    marketingTitle: "Smart Routing & Dispatch",
+    benefit: "Right rep, right time",
+    description:
+      "Route leads by territory, product line, availability, or any custom logic you define. Automated dispatch with instant assignment.",
+    iconName: "GitMerge",
+    category: "operations",
+  },
+  knowledge_files: {
+    marketingTitle: "Knowledge Base",
+    benefit: "AI with context",
+    description:
+      "Upload product docs, FAQs, and playbooks. Your AI agents reference real business knowledge to give accurate, on-brand answers.",
+    iconName: "BookOpen",
+    category: "intelligence",
+  },
+  automations: {
+    marketingTitle: "Workflow Automation",
+    benefit: "Your rules",
+    description:
+      "Build trigger-based workflows that act on lead status changes, score thresholds, or time-based events. Automate follow-ups, escalations, and re-routing.",
+    iconName: "Settings",
+    category: "intelligence",
+  },
+  webhooks_ingestion: {
+    marketingTitle: "Webhook Ingestion",
+    benefit: "Any source, any format",
+    description:
+      "Accept inbound data from any external system via webhooks. Parse, validate, and route payloads directly into your lead pipeline.",
+    iconName: "Webhook",
+    category: "capture",
+  },
+  zoho_sync: {
+    marketingTitle: "CRM Sync (Zoho)",
+    benefit: "Stay connected",
+    description:
+      "Push qualified leads directly to Zoho CRM. Map fields, set sync rules, and keep your sales stack in perfect alignment without manual exports.",
+    iconName: "Database",
+    category: "platform",
+  },
+  email_engine: {
+    marketingTitle: "Email Engine",
+    benefit: "Reach every inbox",
+    description:
+      "Send transactional and follow-up emails from your lead pipeline. Templated messages, delivery tracking, and automatic retry on failure.",
+    iconName: "Mail",
+    category: "operations",
+  },
+  email_verification: {
+    marketingTitle: "Email Verification",
+    benefit: "Clean data",
+    description:
+      "Validate email addresses at capture time to keep your pipeline clean. Reduce bounce rates and improve deliverability automatically.",
+    iconName: "ShieldCheck",
+    category: "capture",
+  },
+  diagnostics: {
+    marketingTitle: "System Diagnostics",
+    benefit: "Full transparency",
+    description:
+      "Monitor system health, message queues, and integration statuses. Real-time diagnostics help you catch issues before they affect leads.",
+    iconName: "Activity",
+    category: "visibility",
+  },
+  admin_portal: {
+    marketingTitle: "Admin Portal",
+    benefit: "Stay in control",
+    description:
+      "Role-based access control, user management, and workspace configuration. Know who touched what, and when, with a full audit trail.",
+    iconName: "Shield",
+    category: "platform",
+  },
+};
+
+/** Category groupings for the features page */
+export const FEATURE_CATEGORIES: {
+  key: ModuleMarketingInfo["category"];
+  label: string;
+  iconName: string;
+}[] = [
+  { key: "capture", label: "Capture & Intake", iconName: "Zap" },
+  { key: "intelligence", label: "Intelligence", iconName: "Brain" },
+  { key: "operations", label: "Operations", iconName: "GitMerge" },
+  { key: "visibility", label: "Visibility", iconName: "BarChart3" },
+  { key: "platform", label: "Platform", iconName: "Shield" },
+];

backend/app/api/v1/catalog.py

@@ -1,16 +1,19 @@
 """
-Catalog API — Mission 19
+Catalog API — Mission 19 + Mission 33
 Read-only endpoints for all enumerated reference data.
 No authentication required. Safe for 60s client caching.
 """
-from typing import Any
+from typing import Any, Optional
 
-from fastapi import APIRouter, Depends, Response
+from fastapi import APIRouter, Depends, Query, Response
 from sqlalchemy.ext.asyncio import AsyncSession
 from sqlmodel import select
 
 from app.core.db import get_db
-from app.models.models import Plan, PlanEntitlement, SystemModuleConfig
+from app.models.models import (
+    Plan, PlanEntitlement, SystemModuleConfig,
+    AutomationTemplate, TemplateUsageStat,
+)
 from app.schemas.envelope import wrap_data
 from app.core.catalog_registry import (
     INTEGRATION_PROVIDERS,
@@ -86,6 +89,47 @@ async def get_tiers(
     return await get_plans(response, db)
 
 
+@router.get("/templates")
+async def get_public_templates(
+    response: Response,
+    db: AsyncSession = Depends(get_db),
+    category: Optional[str] = Query(None),
+    featured: Optional[bool] = Query(None),
+) -> Any:
+    """Return public template metadata (no builder_graph_json or variables)."""
+    _set_cache(response)
+    query = (
+        select(AutomationTemplate, TemplateUsageStat)
+        .outerjoin(TemplateUsageStat, TemplateUsageStat.template_id == AutomationTemplate.id)
+        .where(AutomationTemplate.is_active == True)
+    )
+    if category:
+        query = query.where(AutomationTemplate.category == category)
+    if featured is not None:
+        query = query.where(AutomationTemplate.is_featured == featured)
+    query = query.order_by(
+        AutomationTemplate.is_featured.desc(),
+        AutomationTemplate.name.asc(),
+    )
+    result = await db.execute(query)
+    rows = result.all()
+    return wrap_data([
+        {
+            "id": str(t.id),
+            "slug": t.slug,
+            "name": t.name,
+            "description": t.description,
+            "category": t.category,
+            "industry_tags": t.industry_tags or [],
+            "platforms": t.platforms or [],
+            "required_integrations": t.required_integrations or [],
+            "is_featured": t.is_featured,
+            "clone_count": s.clone_count if s else 0,
+        }
+        for t, s in rows
+    ])
+
+
 @router.get("/modules")
 async def get_modules(
     response: Response,

backend/main.py

@@ -58,6 +58,7 @@ app.add_middleware(
     allow_origins=[
         "http://localhost:3000",
         "http://127.0.0.1:3000",
+        "http://localhost:3001",
         "https://ashrafkassem-leadpilot.hf.space",
     ],
     allow_credentials=True,

backend/tests/test_catalog.py

@@ -7,7 +7,11 @@ import pytest_asyncio
 from httpx import AsyncClient
 from sqlalchemy.ext.asyncio import AsyncSession
 
-from app.models.models import Plan, PlanEntitlement, SystemModuleConfig
+from app.models.models import (
+    Plan, PlanEntitlement, SystemModuleConfig,
+    AutomationTemplate, AutomationTemplateVersion, TemplateUsageStat,
+)
+from datetime import datetime
 
 
 # ── Seed helpers ─────────────────────────────────────────────────────
@@ -143,3 +147,91 @@ async def test_catalog_integration_providers_have_fields(async_client: AsyncClie
             assert "name" in field
             assert "label" in field
             assert "type" in field
+
+
+# ── Public templates endpoint (Mission 33) ────────────────────────────
+
+
+async def _seed_template(db: AsyncSession, slug: str = "test-tmpl", category: str = "lead_generation", is_featured: bool = False):
+    """Create a minimal template + published version + usage stat for testing."""
+    now = datetime.utcnow()
+    tmpl = AutomationTemplate(
+        slug=slug,
+        name=f"Test Template {slug}",
+        description=f"Description for {slug}",
+        category=category,
+        platforms=["whatsapp"],
+        required_integrations=["whatsapp"],
+        industry_tags=["test"],
+        is_active=True,
+        is_featured=is_featured,
+        created_at=now,
+        updated_at=now,
+    )
+    db.add(tmpl)
+    await db.flush()
+
+    ver = AutomationTemplateVersion(
+        template_id=tmpl.id,
+        version_number=1,
+        builder_graph_json={"nodes": [], "edges": []},
+        changelog="Seed",
+        is_published=True,
+        published_at=now,
+        created_at=now,
+        updated_at=now,
+    )
+    db.add(ver)
+
+    stat = TemplateUsageStat(
+        template_id=tmpl.id,
+        clone_count=0,
+        publish_count=0,
+        active_flows_count=0,
+        created_at=now,
+        updated_at=now,
+    )
+    db.add(stat)
+    await db.flush()
+    return tmpl
+
+
+@pytest.mark.asyncio
+async def test_catalog_templates_returns_list(async_client: AsyncClient, db_session: AsyncSession):
+    await _seed_template(db_session, slug="cat-tmpl-1")
+    response = await async_client.get("/api/v1/catalog/templates")
+    assert response.status_code == 200
+    data = response.json()
+    assert data["success"] is True
+    assert isinstance(data["data"], list)
+    assert len(data["data"]) >= 1
+    item = data["data"][0]
+    assert "slug" in item
+    assert "name" in item
+    assert "category" in item
+    assert "clone_count" in item
+    assert "Cache-Control" in response.headers
+    assert "max-age=60" in response.headers["Cache-Control"]
+
+
+@pytest.mark.asyncio
+async def test_catalog_templates_category_filter(async_client: AsyncClient, db_session: AsyncSession):
+    await _seed_template(db_session, slug="cat-lg-1", category="lead_generation")
+    await _seed_template(db_session, slug="cat-sales-1", category="sales")
+    response = await async_client.get("/api/v1/catalog/templates?category=lead_generation")
+    assert response.status_code == 200
+    data = response.json()
+    assert data["success"] is True
+    for item in data["data"]:
+        assert item["category"] == "lead_generation"
+
+
+@pytest.mark.asyncio
+async def test_catalog_templates_excludes_graph(async_client: AsyncClient, db_session: AsyncSession):
+    await _seed_template(db_session, slug="cat-no-graph")
+    response = await async_client.get("/api/v1/catalog/templates")
+    assert response.status_code == 200
+    data = response.json()
+    for item in data["data"]:
+        assert "builder_graph_json" not in item
+        assert "variables" not in item