@utopia-studio-design/design-system-cli 0.6.2 → 0.7.0

package/data/templates/quantum-verification-story/src/components/sections/clients.tsx

@@ -0,0 +1,140 @@
+import { Landmark, Building2, Globe } from "lucide-react"
+import { ScrambleText } from "@/components/scramble-text"
+import { SectionBackdrop } from "@/components/section-backdrop"
+import { FadeUp } from "@/components/fade-up"
+
+const CX = 230
+const CY = 250
+const R = 162
+
+function nodePos(deg: number) {
+  const r = (deg * Math.PI) / 180
+  return { x: CX + R * Math.cos(r), y: CY + R * Math.sin(r) }
+}
+
+const nodes = [
+  { angle: -90, num: "01", lines: ["Government", "Contractors"],  tag: "Mandate-driven" },
+  { angle:  30, num: "02", lines: ["Regional Banks", "& NBFCs"],  tag: "RBI framework"  },
+  { angle: 150, num: "03", lines: ["IT Services", "Firms"],       tag: "10× reach"      },
+]
+
+const clients = [
+  {
+    tag: "Profile 01",
+    icon: Landmark,
+    name: "Government IT Contractors",
+    desc: "Mandates are live. Internal PQC capability is near-zero. Budget is allocated.",
+    deal: [{ l: "Entry Point", v: "Assessment" }, { l: "Urgency", v: "Mandate-driven" }],
+  },
+  {
+    tag: "Profile 02",
+    icon: Building2,
+    name: "Regional Banks & NBFCs",
+    desc: "Regulators are watching. Attackers aren't waiting. Give your CISO a defensible plan.",
+    deal: [{ l: "Entry Point", v: "CISO Briefing" }, { l: "Urgency", v: "RBI framework" }],
+  },
+  {
+    tag: "Profile 03",
+    icon: Globe,
+    name: "Tier-2 IT Services Firms",
+    desc: "Your US and EU clients demand PQC-ready vendors — we become your white-label capability.",
+    deal: [{ l: "Entry Point", v: "BD / Alliance" }, { l: "Multiplier", v: "10× reach" }],
+  },
+]
+
+export function ClientsSection() {
+  return (
+    <section
+      id="clients"
+      className="relative min-h-screen md:h-screen flex flex-col justify-center md:overflow-hidden border-b border-[var(--color-border)] bg-white"
+    >
+      <SectionBackdrop />
+      <div className="container-main relative z-10 py-6">
+        <div className="grid md:grid-cols-[1fr_1fr] gap-6 items-center">
+
+          {/* Left: header + orbital diagram */}
+          <div>
+            <FadeUp className="mb-4">
+              <ScrambleText text="Who We Serve" className="eyebrow mb-2 block" />
+              <h2 className="font-bold leading-[1.1] tracking-tight text-[var(--color-text-primary)]"
+                style={{ fontSize: "clamp(1.5rem, 2vw + 0.5rem, 2.5rem)" }}>
+                Three clients.{" "}
+                <span className="text-[var(--primary-500)]">Urgent</span> need. Right now.
+              </h2>
+            </FadeUp>
+            <FadeUp delay={0.05}>
+            <div className="overflow-hidden">
+              <svg viewBox="0 0 460 430" className="w-full block">
+                {/* Outer dashed orbit */}
+                <circle cx={CX} cy={CY} r={R} fill="none" stroke="var(--primary-500)" strokeWidth="1.4" strokeDasharray="7 5" opacity="0.58" />
+                {/* Inner dashed orbit */}
+                <circle cx={CX} cy={CY} r={R * 0.57} fill="none" stroke="var(--primary-500)" strokeWidth="1" strokeDasharray="5 4" opacity="0.28" />
+                {/* Inner fill */}
+                <circle cx={CX} cy={CY} r={R * 0.54} fill="rgba(0,0,0,0.03)" />
+                {/* Brand center circle */}
+                <circle cx={CX} cy={CY} r={R * 0.37} fill="var(--deep-900)" />
+
+                {/* Theme-driven neutral mark */}
+                <rect x={CX - 24} y={CY - 24} width="48" height="48" rx="8" fill="var(--primary-500)" transform={`rotate(45 ${CX} ${CY})`} />
+
+                {/* Client nodes */}
+                {nodes.map((n) => {
+                  const p = nodePos(n.angle)
+                  return (
+                    <g key={n.num}>
+                      <circle cx={p.x} cy={p.y} r={17} fill="var(--background)" stroke="var(--primary-400)" strokeWidth="1.5" />
+                      <text x={p.x} y={p.y + 4.5} textAnchor="middle" fill="var(--primary-500)" fontSize="9.5" fontWeight="700" fontFamily="var(--font-mono)">
+                        {n.num}
+                      </text>
+                      {n.lines.map((line, i) => (
+                        <text key={i} x={p.x} y={p.y + 30 + i * 12} textAnchor="middle" fill="var(--foreground)" fontSize="9.5" fontWeight="600" fontFamily="var(--font-sans)">
+                          {line}
+                        </text>
+                      ))}
+                      <text x={p.x} y={p.y + 60} textAnchor="middle" fill="var(--primary-600)" fontSize="8" fontFamily="var(--font-sans)" letterSpacing="0.05em">
+                        {n.tag}
+                      </text>
+                    </g>
+                  )
+                })}
+              </svg>
+            </div>
+            </FadeUp>
+          </div>
+
+          {/* Right: client profile cards */}
+          <div className="flex flex-col gap-3">
+            {clients.map((c, i) => {
+              const Icon = c.icon
+              return (
+                <FadeUp key={c.name} delay={i * 0.18}>
+                  <div className="rounded-xl border border-[var(--color-border)] bg-white hover:shadow-md hover:border-[var(--color-border-strong)] transition-all p-5">
+                    <div className="flex items-center justify-between mb-3">
+                      <span className="inline-block px-2.5 py-1 text-[10px] font-mono font-semibold uppercase tracking-[0.1em] rounded-full bg-[var(--primary-50)] text-[var(--primary-700)] border border-[var(--primary-200)]">
+                        {c.tag}
+                      </span>
+                      <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-[var(--deep-900)]">
+                        <Icon size={15} className="text-[var(--primary-400)]" strokeWidth={2} />
+                      </div>
+                    </div>
+                    <h3 className="text-[14px] font-bold mb-1.5 tracking-tight text-[var(--color-text-primary)]">{c.name}</h3>
+                    <p className="text-[12px] leading-[1.6] text-[var(--color-text-secondary)] mb-3">{c.desc}</p>
+                    <div className="border-t border-[var(--color-border)] pt-3 grid grid-cols-2 gap-2">
+                      {c.deal.map((d) => (
+                        <div key={d.l}>
+                          <label className="block font-mono text-[9px] tracking-[0.1em] text-[var(--color-text-muted)] uppercase mb-0.5">{d.l}</label>
+                          <span className="text-[11.5px] font-semibold text-[var(--color-text-primary)]">{d.v}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </FadeUp>
+              )
+            })}
+          </div>
+
+        </div>
+      </div>
+    </section>
+  )
+}

package/data/templates/quantum-verification-story/src/components/sections/contact.tsx

@@ -0,0 +1,125 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Label } from "@/components/ui/label"
+import { ScrambleText } from "@/components/scramble-text"
+import { SectionBackdrop } from "@/components/section-backdrop"
+import { FadeUp } from "@/components/fade-up"
+
+export function ContactSection() {
+  const [status, setStatus] = useState<"idle" | "sending" | "ok" | "err">("idle")
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setStatus("sending")
+    const form = e.currentTarget
+    try {
+      const res = await fetch("https://formspree.io/f/xwvaqyvb", {
+        method: "POST",
+        body: new FormData(form),
+        headers: { Accept: "application/json" },
+      })
+      setStatus(res.ok ? "ok" : "err")
+      if (res.ok) form.reset()
+    } catch {
+      setStatus("err")
+    }
+    setTimeout(() => setStatus("idle"), 4000)
+  }
+
+  return (
+    <section id="contact" className="relative min-h-screen md:h-screen flex flex-col justify-center md:overflow-hidden border-b border-[var(--color-border)] bg-[var(--gray-50)]">
+      <SectionBackdrop />
+      <div className="container-main relative z-10 py-6">
+        <div className="grid md:grid-cols-2 gap-12 lg:gap-20">
+
+          {/* Left */}
+          <FadeUp>
+            <div>
+              <ScrambleText text="Get in Touch" className="eyebrow mb-2 block" />
+              <h2 className="font-bold leading-[1.1] tracking-tight text-[var(--color-text-primary)] mb-4"
+                style={{ fontSize: "clamp(1.5rem, 2vw + 0.5rem, 2.5rem)" }}>
+                Let&apos;s start<br />
+                the <span className="text-[var(--primary-500)]">conversation.</span>
+              </h2>
+              <p className="text-[14px] leading-[1.7] text-[var(--color-text-secondary)] mb-6">
+                CISO, CTO, or security leader wondering if you&apos;re exposed? You almost certainly are.
+                The fastest way to know is a scan — see your exposure in days, not months.
+              </p>
+            <div className="space-y-0 divide-y divide-[var(--color-border)] border-t border-[var(--color-border)]">
+              {[
+                { l: "Focus",       v: "Post-Quantum Cryptography, Behavioral Identity, PQC Talent" },
+                { l: "Markets",     v: "APAC · Middle East · United States · European Union" },
+                { l: "Plans",       v: "Self-serve scan or enterprise verification" },
+              ].map((d) => (
+                <div key={d.l} className="flex gap-5 items-start py-3">
+                  <span className="font-mono text-[10px] tracking-[0.12em] text-[var(--primary-500)] uppercase w-24 shrink-0 pt-0.5 font-semibold">
+                    {d.l}
+                  </span>
+                  <span className="text-[13px] text-[var(--color-text-primary)]">{d.v}</span>
+                </div>
+              ))}
+            </div>
+            </div>
+          </FadeUp>
+
+          {/* Right: form */}
+          <FadeUp delay={0.15}>
+          <form onSubmit={handleSubmit} className="bg-white rounded-xl border border-[var(--color-border)] p-6 space-y-4 shadow-sm">
+            <div>
+              <Label htmlFor="name">Your Name</Label>
+              <Input id="name" name="name" placeholder="Full name" required />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label htmlFor="org">Organisation</Label>
+                <Input id="org" name="organisation" placeholder="Company name" />
+              </div>
+              <div>
+                <Label htmlFor="role">Role</Label>
+                <Input id="role" name="role" placeholder="CISO, CTO, etc." />
+              </div>
+            </div>
+            <div>
+              <Label htmlFor="email">Work Email</Label>
+              <Input id="email" name="email" type="email" placeholder="you@organisation.com" required />
+            </div>
+            <div>
+              <Label>I am interested in</Label>
+              <select
+                name="interest"
+                className="flex h-10 w-full rounded-md border border-[var(--color-border)] bg-white px-3 py-2 text-[14px] text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:border-[var(--deep-900)] transition-colors"
+              >
+                <option>Run a scan of my stack</option>
+                <option>See a demo of the platform</option>
+                <option>Pricing & plans</option>
+                <option>Partnership / white-label</option>
+                <option>Just learning more</option>
+              </select>
+            </div>
+            <div>
+              <Label htmlFor="msg">Context (optional)</Label>
+              <Textarea id="msg" name="message"
+                placeholder="Any context about your current security posture, timeline, or specific concerns..." />
+            </div>
+            <input type="text" name="_gotcha" className="hidden" tabIndex={-1} autoComplete="off" />
+            <Button
+              type="submit"
+              className="w-full rounded-full bg-[var(--deep-900)] text-white hover:bg-[var(--deep-800)] h-10 font-semibold"
+              disabled={status === "sending"}
+            >
+              {status === "idle"    && "Request a Demo →"}
+              {status === "sending" && "Sending..."}
+              {status === "ok"      && "Message sent ✓"}
+              {status === "err"     && "Error — please retry"}
+            </Button>
+          </form>
+          </FadeUp>
+        </div>
+      </div>
+    </section>
+  )
+}

package/data/templates/quantum-verification-story/src/components/sections/hero.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import RotatingText from "@/components/RotatingText"
+import { LatticeField } from "@/components/lattice-field"
+import { ConsolePreview } from "@/components/console-preview"
+
+export function HeroSection() {
+  return (
+    <div className="min-h-screen md:h-screen flex flex-col md:overflow-hidden bg-[var(--gray-950)]">
+      {/* Framed hero fills full height */}
+      <div className="flex-1 px-2 sm:px-3 pb-2 sm:pb-3 min-h-0 pt-3">
+        <div className="relative h-full overflow-hidden rounded-[20px] sm:rounded-[28px] bg-[var(--deep-900)]">
+          {/* Theme-driven base wash */}
+          <div className="absolute inset-0 pointer-events-none"
+            style={{ background: "linear-gradient(180deg, var(--deep-800) 0%, var(--deep-900) 55%, var(--deep-950) 100%)" }} />
+          {/* Light gradient glow */}
+          <div className="absolute inset-x-0 bottom-0 h-[75%] pointer-events-none"
+            style={{ background: "radial-gradient(62% 80% at 50% 118%, color-mix(in srgb, var(--primary-foreground) 55%, transparent) 0%, color-mix(in srgb, var(--primary) 28%, transparent) 32%, color-mix(in srgb, var(--primary) 10%, transparent) 55%, transparent 72%)" }} />
+          <LatticeField />
+
+          <div className="container-main relative z-10 h-full flex flex-col pt-12 sm:pt-16 lg:pt-20">
+
+            {/* Top: headline + intro row (Linear-style, left-aligned) */}
+            <div className="shrink-0">
+              {/* Eyebrow */}
+              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/20 text-[11px] font-mono uppercase tracking-[0.12em] text-[var(--primary-300)] mb-5 backdrop-blur-sm">
+                <span className="w-1.5 h-1.5 rounded-full bg-[var(--primary-400)]" />
+                Post-Quantum Verification Platform
+              </div>
+
+              {/* Headline */}
+              <h1 className="text-white font-bold leading-[1.04] tracking-tight"
+                style={{ fontSize: "clamp(2.25rem, 4.5vw + 0.5rem, 5rem)", maxWidth: "18ch" }}>
+                <span className="block">Your encryption has a</span>
+                <span className="flex items-end" style={{ minHeight: "1.15em" }}>
+                  <RotatingText
+                    texts={["deadline.", "countdown.", "expiry date.", "shelf life."]}
+                    mainClassName="font-serif italic font-normal text-[var(--primary-300)] border-b-2 border-[var(--primary-400)]/70 pr-0.5"
+                    splitLevelClassName="overflow-hidden pb-1.5"
+                    staggerFrom="last"
+                    initial={{ y: "100%", opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    exit={{ y: "-120%", opacity: 0 }}
+                    staggerDuration={0.02}
+                    transition={{ type: "spring", damping: 30, stiffness: 360 }}
+                    rotationInterval={2400}
+                    splitBy="characters"
+                    auto
+                    loop
+                  />
+                </span>
+              </h1>
+
+              {/* Subtitle + CTAs row */}
+              <div className="mt-6 flex flex-col gap-5 md:flex-row md:items-center md:justify-between">
+                <p className="text-white/65 leading-[1.6]"
+                  style={{ fontSize: "clamp(0.95rem, 1vw + 0.3rem, 1.15rem)", maxWidth: "46ch" }}>
+                  Harvest-now, decrypt-later is already underway. Scan your stack,
+                  diagnose what&apos;s quantum-vulnerable, and verify your readiness — for certain.
+                </p>
+                <div className="flex flex-wrap items-center gap-3 shrink-0">
+                  <Button asChild
+                    className="rounded-full bg-[var(--primary-500)] text-[var(--primary-foreground)] hover:bg-[var(--primary-400)] font-semibold h-10 px-6 text-[14px]"
+                  >
+                    <Link href="#pilot">Run a Free Scan</Link>
+                  </Button>
+                  <Button asChild variant="outline"
+                    className="rounded-full border-white/25 text-white hover:bg-white/10 hover:border-white/40 h-10 px-6 text-[14px] bg-transparent"
+                  >
+                    <Link href="#offer">See How It Works</Link>
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            {/* Large live console preview — sits at the bottom, bleeds off the frame edge */}
+            <div className="mt-8 sm:mt-10">
+              <ConsolePreview
+                className="w-full max-w-none mb-0"
+                height={620}
+                scale={0.82}
+              />
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/data/templates/quantum-verification-story/src/components/sections/moat.tsx

@@ -0,0 +1,73 @@
+import { Check, X } from "lucide-react"
+import { ScrambleText } from "@/components/scramble-text"
+import { SectionBackdrop } from "@/components/section-backdrop"
+import { FadeUp } from "@/components/fade-up"
+
+const rows = [
+  { cap: "Point-in-time assessment",        bigCo: true,  ours: true },
+  { cap: "Automated, agentless scanning",   bigCo: false, ours: true },
+  { cap: "Continuous re-verification",      bigCo: false, ours: true },
+  { cap: "Verifiable readiness certificate", bigCo: false, ours: true },
+  { cap: "Self-serve — no engagement fee",  bigCo: false, ours: true },
+  { cap: "Maps to RBI, CERT-In & US mandates", bigCo: false, ours: true },
+]
+
+export function MoatSection() {
+  return (
+    <section id="moat" className="relative min-h-screen md:h-screen flex flex-col justify-center md:overflow-hidden bg-[var(--gray-50)] border-b border-[var(--color-border)]">
+      <SectionBackdrop />
+      <div className="container-main relative z-10 py-6">
+        <div className="grid md:grid-cols-2 gap-12 items-center">
+          <FadeUp>
+            <div>
+              <ScrambleText text="Why continuous verification" className="eyebrow mb-3 block" />
+              <h2 className="font-bold leading-[1.1] tracking-tight text-[var(--color-text-primary)] mb-4"
+                style={{ fontSize: "clamp(1.5rem, 2vw + 0.5rem, 2.5rem)" }}>
+                Reports go stale.<br />
+                <span className="text-[var(--primary-500)]">Verification</span> doesn&apos;t.
+              </h2>
+              <p className="text-[14px] leading-[1.7] text-[var(--color-text-secondary)]">
+                A consultant&apos;s report is outdated the day they leave. The platform re-verifies continuously — your posture is always provable, not just promised.
+              </p>
+            </div>
+          </FadeUp>
+
+          <FadeUp delay={0.15}>
+          <div className="rounded-xl border border-[var(--color-border)] overflow-hidden shadow-sm">
+            {/* Header */}
+            <div className="grid grid-cols-[2fr_1fr_1fr] bg-[var(--gray-950)]">
+              {["Capability", "Big Consulting", "Your Company"].map((h, i) => (
+                <div key={h} className={`px-4 py-3 text-[11px] font-mono tracking-[0.1em] uppercase border-r border-white/10 last:border-r-0 ${
+                  i === 2 ? "text-white bg-[var(--primary-500)]/20" : "text-white/60"
+                }`}>
+                  {h}
+                </div>
+              ))}
+            </div>
+            {/* Rows */}
+            {rows.map((r, idx) => (
+              <div key={r.cap} className={`grid grid-cols-[2fr_1fr_1fr] border-t border-[var(--color-border)] ${
+                idx % 2 === 0 ? "bg-white" : "bg-[var(--gray-50)]"
+              }`}>
+                <div className="px-4 py-3.5 text-[13px] text-[var(--color-text-primary)] border-r border-[var(--color-border)]">
+                  {r.cap}
+                </div>
+                <div className="px-4 py-3.5 flex items-center justify-center border-r border-[var(--color-border)]">
+                  {r.bigCo
+                    ? <Check size={16} className="text-[var(--deep-600)]" strokeWidth={3} />
+                    : <X size={16} className="text-[var(--gray-400)]" strokeWidth={3} />}
+                </div>
+                <div className="px-4 py-3.5 flex items-center justify-center bg-[var(--deep-50)]/40">
+                  <span className="flex items-center justify-center w-5 h-5 rounded-full bg-[var(--deep-600)]">
+                    <Check size={12} className="text-white" strokeWidth={3.5} />
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+          </FadeUp>
+        </div>
+      </div>
+    </section>
+  )
+}

package/data/templates/quantum-verification-story/src/components/sections/offer.tsx

@@ -0,0 +1,113 @@
+import Link from "next/link"
+import { cn } from "@/lib/utils"
+import { ScrambleText } from "@/components/scramble-text"
+import { SectionBackdrop } from "@/components/section-backdrop"
+import { CursorDrivenParticleTypography } from "@/components/ui/cursor-driven-particle-typography"
+import { FadeUp, FadeUpGroup, FadeUpItem } from "@/components/fade-up"
+
+const services = [
+  {
+    num: "01 — Scan",
+    particleText: "SCAN",
+    title: "Cryptographic Inventory",
+    desc: "Map every key, certificate, and cipher across your stack — agentless.",
+    cta: "See How Scanning Works",
+    href: "/assessment",
+    featured: false,
+  },
+  {
+    num: "02 — Diagnose",
+    particleText: "SCORE",
+    title: "Quantum Risk Scoring",
+    desc: "Every asset scored against NIST tiers and your data's shelf-life.",
+    cta: "Explore the Platform",
+    href: "/products",
+    featured: true,
+  },
+  {
+    num: "03 — Verify",
+    particleText: "VERIFY",
+    title: "Readiness Certification",
+    desc: "A verifiable, board-ready report — provable to regulators and auditors.",
+    cta: "View a Sample Report",
+    href: "/assessment",
+    featured: false,
+  },
+]
+
+export function OfferSection() {
+  return (
+    <section id="offer" className="relative min-h-screen md:h-screen flex flex-col justify-center md:overflow-hidden border-b border-[var(--color-border)] bg-white">
+      <SectionBackdrop />
+      <div className="container-main relative z-10 py-6">
+        <FadeUp className="mb-8">
+          <ScrambleText text="How It Works" className="eyebrow mb-2 block" />
+          <h2 className="font-bold leading-[1.1] tracking-tight text-[var(--color-text-primary)]"
+            style={{ fontSize: "clamp(1.5rem, 2vw + 0.5rem, 2.5rem)" }}>
+            Scan. <span className="text-[var(--primary-500)]">Diagnose.</span> Verify.
+          </h2>
+        </FadeUp>
+
+        <FadeUpGroup className="grid md:grid-cols-3 gap-4">
+          {services.map((s) => (
+            <FadeUpItem key={s.num}>
+              <Link
+                href={s.href}
+                className={cn(
+                  "group flex flex-col rounded-xl border no-underline transition-all duration-200 overflow-hidden",
+                  s.featured
+                    ? "bg-[var(--deep-900)] border-[var(--deep-900)] text-white hover:bg-[var(--deep-800)]"
+                    : "bg-white border-[var(--color-border)] hover:border-[var(--color-border-strong)] hover:shadow-md"
+                )}
+              >
+                {/* Visual header */}
+                <div className={cn(
+                  "w-full relative",
+                  s.featured ? "bg-[var(--deep-900)]" : "bg-white"
+                )}>
+                  <CursorDrivenParticleTypography
+                    text={s.particleText!}
+                    fontSize={55}
+                    particleSize={2}
+                    particleDensity={4}
+                    dispersionStrength={0}
+                    color={s.featured ? "rgb(196,146,58)" : "rgb(160,110,30)"}
+                    className="!min-h-[160px]"
+                  />
+                </div>
+
+                {/* Card content */}
+                <div className="p-6 flex flex-col flex-1">
+                  <div className={cn(
+                    "font-mono text-[10px] tracking-[0.14em] uppercase font-semibold mb-3",
+                    s.featured ? "text-[var(--primary-400)]" : "text-[var(--primary-500)]"
+                  )}>
+                    {s.num}
+                  </div>
+                  <h3 className={cn(
+                    "text-[17px] font-bold mb-2 leading-tight tracking-tight",
+                    s.featured ? "text-white" : "text-[var(--color-text-primary)]"
+                  )}>
+                    {s.title}
+                  </h3>
+                  <p className={cn(
+                    "text-[13px] leading-[1.6] mb-4 flex-1",
+                    s.featured ? "text-white/60" : "text-[var(--color-text-secondary)]"
+                  )}>
+                    {s.desc}
+                  </p>
+                  <div className={cn(
+                    "font-mono text-[11px] font-semibold tracking-[0.1em] uppercase mt-auto",
+                    s.featured ? "text-[var(--primary-400)]" : "text-[var(--primary-500)]"
+                  )}>
+                    {s.cta} →
+                  </div>
+                </div>
+              </Link>
+            </FadeUpItem>
+          ))}
+        </FadeUpGroup>
+      </div>
+    </section>
+  )
+}

package/data/templates/quantum-verification-story/src/components/sections/pilot.tsx

@@ -0,0 +1,63 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { LatticeField } from "@/components/lattice-field"
+import { ScrambleText } from "@/components/scramble-text"
+import { FadeUp, FadeUpGroup, FadeUpItem } from "@/components/fade-up"
+
+const phases = [
+  { n: "1", title: "Connect & Scan",          body: "Agentless inventory across your full stack.", time: "Week 1–2" },
+  { n: "2", title: "Diagnose & Score",        body: "Every asset rated against NIST tiers.", time: "Week 3–4" },
+  { n: "3", title: "Prioritized Roadmap",     body: "Highest-risk gaps, sequenced to fix first.", time: "Week 5–6" },
+  { n: "4", title: "Verified Report",         body: "Board-ready, re-verifiable readiness certificate.", time: "Week 7–8" },
+]
+
+export function PilotSection() {
+  return (
+    <section id="pilot" className="min-h-screen md:h-screen flex flex-col justify-center md:overflow-hidden bg-[var(--deep-900)] text-white relative border-b border-white/10">
+      <LatticeField className="opacity-35" />
+
+      <div className="container-main relative z-10 py-6">
+        <div className="grid md:grid-cols-2 gap-12 items-center">
+          <FadeUp>
+            <div>
+              <ScrambleText text="Low Risk Entry" className="eyebrow mb-3 text-[var(--primary-400)] block" />
+              <h2 className="font-bold leading-[1.1] tracking-tight text-white mb-4"
+                style={{ fontSize: "clamp(1.5rem, 2vw + 0.5rem, 2.5rem)" }}>
+                From scan to{" "}
+                <span className="text-[var(--primary-400)]">verified</span>
+                {" "}in 8 weeks.
+              </h2>
+              <p className="text-[14px] leading-[1.7] text-white/60 mb-7">
+                Fixed scope. No long-term commitment.
+              </p>
+              <Button asChild
+                className="rounded-full bg-[var(--primary-500)] text-[var(--gray-950)] hover:bg-[var(--primary-400)] font-semibold h-10 px-6"
+              >
+                <Link href="#contact">Start Your Pilot</Link>
+              </Button>
+            </div>
+          </FadeUp>
+
+          <FadeUpGroup className="rounded-xl border border-white/10 overflow-hidden divide-y divide-white/10">
+            {phases.map((p) => (
+              <FadeUpItem key={p.n}>
+                <div className="bg-white/5 hover:bg-white/10 transition-colors px-6 py-5 flex gap-4 items-start">
+                  <span className="text-[24px] font-bold text-[var(--primary-400)] leading-none w-7 shrink-0">
+                    {p.n}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <h4 className="text-[13px] font-semibold text-white mb-1">{p.title}</h4>
+                    <p className="text-[12px] text-white/55 leading-[1.6]">{p.body}</p>
+                  </div>
+                  <span className="font-mono text-[10px] tracking-[0.1em] text-[var(--primary-500)] shrink-0 pt-0.5">
+                    {p.time}
+                  </span>
+                </div>
+              </FadeUpItem>
+            ))}
+          </FadeUpGroup>
+        </div>
+      </div>
+    </section>
+  )
+}

package/data/templates/quantum-verification-story/src/components/sections/problem.tsx

@@ -0,0 +1,53 @@
+import { LatticeField } from "@/components/lattice-field"
+import { ScrambleText } from "@/components/scramble-text"
+import { FadeUp, FadeUpGroup, FadeUpItem } from "@/components/fade-up"
+
+const problems = [
+  {
+    title: "Your data is being stolen now.",
+    body: "Adversaries capture encrypted traffic today to crack the moment quantum hardware lands.",
+  },
+  {
+    title: "You don't know what's exposed.",
+    body: "Most organizations can't name every key, certificate, and cipher in their stack.",
+  },
+  {
+    title: "Regulators aren't waiting.",
+    body: "NIST standards are final. Compliance mandates are live. The clock is already running.",
+  },
+  {
+    title: "Saying it isn't proving it.",
+    body: "Boards and auditors need verifiable evidence — not a consultant's slide deck.",
+  },
+]
+
+export function ProblemSection() {
+  return (
+    <section id="problem" className="min-h-screen md:h-screen flex flex-col justify-center md:overflow-hidden relative bg-[var(--gray-950)] text-white">
+      <LatticeField className="opacity-40" />
+      <div className="container-main relative z-10 py-6">
+        <FadeUp className="mb-10">
+          <ScrambleText text="The Problem" className="eyebrow mb-3 text-[var(--primary-400)] block" />
+          <h2 className="text-white font-bold leading-[1.1] tracking-tight"
+            style={{ fontSize: "clamp(1.75rem, 2.5vw + 0.5rem, 3rem)" }}>
+            You&apos;re exposed.<br />
+            <span className="text-[var(--primary-400)]">You just don&apos;t know it.</span>
+          </h2>
+        </FadeUp>
+        <FadeUpGroup className="grid sm:grid-cols-2 md:grid-cols-4 gap-3">
+          {problems.map((p) => (
+            <FadeUpItem key={p.title}>
+              <div className="rounded-xl border border-white/10 bg-[var(--deep-950)] p-6 hover:border-white/20 hover:bg-white/[0.03] transition-colors h-full flex flex-col gap-3">
+                <h3 className="text-white font-bold leading-[1.25] tracking-tight"
+                  style={{ fontSize: "clamp(1rem, 1.1vw + 0.3rem, 1.2rem)" }}>
+                  {p.title}
+                </h3>
+                <p className="text-[13px] text-white/50 leading-[1.65]">{p.body}</p>
+              </div>
+            </FadeUpItem>
+          ))}
+        </FadeUpGroup>
+      </div>
+    </section>
+  )
+}