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

package/data/templates/quantum-verification-story/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "quantum-verification-story",
+  "version": "2.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "start": "next start",
+    "build": "next build",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.13",
+    "@radix-ui/react-dialog": "^1.1.16",
+    "@radix-ui/react-label": "^2.1.9",
+    "@radix-ui/react-navigation-menu": "^1.2.15",
+    "@radix-ui/react-select": "^2.3.0",
+    "@radix-ui/react-separator": "^1.1.9",
+    "@radix-ui/react-slot": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.14",
+    "autoprefixer": "^10.5.0",
+    "framer-motion": "^12.40.0",
+    "motion": "^12.40.0",
+    "next": "16.3.2",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "eslint": "^9",
+    "eslint-config-next": "16.3.2",
+    "lucide-react": "^1.18.0",
+    "postcss": "^8",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^3.4.19",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5"
+  },
+  "allowScripts": {
+    "unrs-resolver@1.12.2": true,
+    "fsevents@2.3.3": true
+  }
+}

package/data/templates/quantum-verification-story/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/data/templates/quantum-verification-story/src/app/assessment/page.tsx

@@ -0,0 +1,138 @@
+import type { Metadata } from "next"
+import Link from "next/link"
+import { Boxes, ListChecks, FileText, ShieldCheck } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { ScrambleText } from "@/components/scramble-text"
+import { ReadinessEstimator } from "@/components/readiness-estimator"
+import { ConsolePreviewSection } from "@/components/console-preview-section"
+
+export const metadata: Metadata = {
+  title: "PQC Readiness Assessment — Your Company",
+  description:
+    "A fixed-scope, 30-day audit of your cryptographic posture. Estimate your harvest-now-decrypt-later exposure with the Mosca model, then get a board-ready migration roadmap.",
+}
+
+const audits = [
+  { icon: Boxes,      title: "Cryptographic inventory", body: "Every key, certificate, cipher suite, and library — across applications, networks, and third-party dependencies." },
+  { icon: ListChecks, title: "Risk scoring",            body: "Each asset scored against NIST migration tiers and your data's confidentiality shelf-life." },
+  { icon: FileText,   title: "Migration roadmap",       body: "A sequenced, costed plan — what to migrate first, what it takes, and what it protects." },
+  { icon: ShieldCheck,title: "Board-ready evidence",    body: "An executive briefing and report mapped to RBI, CERT-In, and US federal mandates." },
+]
+
+const phases = [
+  { n: "Days 1–10",  t: "Discover", b: "Agentless scan plus interviews to inventory your full cryptographic footprint." },
+  { n: "Days 11–20", t: "Analyze",  b: "Score every asset, model your exposure window, and prioritize against your threat model." },
+  { n: "Days 21–30", t: "Deliver",  b: "Board-ready roadmap, executive briefing, and a migration kickoff plan if you proceed." },
+]
+
+export default function AssessmentPage() {
+  return (
+    <>
+      {/* Hero */}
+      <section className="section-y border-b border-[var(--color-border)] bg-white">
+        <div className="container-main">
+          <ScrambleText text="NIST Estimator" className="eyebrow mb-4 block" />
+          <h1 className="font-bold leading-[1.08] tracking-tight text-[var(--color-text-primary)] mb-6"
+            style={{ fontSize: "clamp(36px, 4vw, 60px)" }}>
+            PQC Readiness<br />
+            <span className="text-[var(--primary-500)]">Assessment</span>
+          </h1>
+          <p className="text-[17px] leading-[1.7] text-[var(--color-text-secondary)] max-w-2xl">
+            A rigorous audit of your cryptographic posture. We map every vulnerable protocol, quantify your
+            technical debt, and deliver a board-ready roadmap — in 30 days, fixed scope and fixed price.
+          </p>
+        </div>
+      </section>
+
+      {/* Live console */}
+      <ConsolePreviewSection
+        dark
+        eyebrow="What you'll get"
+        heading="Your findings, in one console."
+        body="Assessment results land in the live QSP console — every exposed asset scored, mapped, and ready to export."
+      />
+
+      {/* Estimator */}
+      <section className="section-y border-b border-[var(--color-border)] bg-[var(--gray-50)]">
+        <div className="container-main">
+          <div className="max-w-xl mb-8">
+            <ScrambleText text="Estimate your exposure" className="eyebrow mb-3 block" />
+            <h2 className="font-bold leading-[1.12] tracking-tight text-[var(--color-text-primary)]"
+              style={{ fontSize: "var(--type-h1)" }}>
+              Are you already in the window?
+            </h2>
+          </div>
+          <ReadinessEstimator />
+        </div>
+      </section>
+
+      {/* What we audit */}
+      <section className="section-y border-b border-[var(--color-border)] bg-white">
+        <div className="container-main">
+          <div className="max-w-xl mb-12">
+            <ScrambleText text="What's included" className="eyebrow mb-3 block" />
+            <h2 className="font-bold leading-[1.12] tracking-tight text-[var(--color-text-primary)]"
+              style={{ fontSize: "var(--type-h1)" }}>
+              Four deliverables, one engagement.
+            </h2>
+          </div>
+          <div className="grid sm:grid-cols-2 gap-5">
+            {audits.map((a) => {
+              const Icon = a.icon
+              return (
+                <div key={a.title} className="rounded-2xl border border-[var(--color-border)] bg-white p-8 hover:shadow-md transition-all">
+                  <div className="flex items-center justify-center w-11 h-11 rounded-xl bg-[var(--deep-900)] mb-5">
+                    <Icon size={19} className="text-[var(--primary-400)]" strokeWidth={2} />
+                  </div>
+                  <h3 className="text-[18px] font-bold tracking-tight text-[var(--color-text-primary)] mb-2">{a.title}</h3>
+                  <p className="text-[14px] leading-[1.7] text-[var(--color-text-secondary)]">{a.body}</p>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* 30-day process */}
+      <section className="section-y border-b border-[var(--color-border)] bg-[var(--gray-50)]">
+        <div className="container-main">
+          <div className="max-w-xl mb-12">
+            <ScrambleText text="The 30-day process" className="eyebrow mb-3 block" />
+            <h2 className="font-bold leading-[1.12] tracking-tight text-[var(--color-text-primary)]"
+              style={{ fontSize: "var(--type-h1)" }}>
+              From blind spot to board pack.
+            </h2>
+          </div>
+          <div className="grid md:grid-cols-3 gap-5">
+            {phases.map((p, i) => (
+              <div key={p.t} className="rounded-2xl border border-[var(--color-border)] bg-white p-8 relative">
+                <div className="text-[44px] font-bold leading-none text-[var(--primary-200)] mb-4">0{i + 1}</div>
+                <div className="font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--primary-500)] font-semibold mb-1">{p.n}</div>
+                <h3 className="text-[18px] font-bold tracking-tight text-[var(--color-text-primary)] mb-2">{p.t}</h3>
+                <p className="text-[14px] leading-[1.7] text-[var(--color-text-secondary)]">{p.b}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="section-y bg-white">
+        <div className="container-main">
+          <div className="rounded-2xl bg-[var(--deep-900)] px-8 py-12 sm:px-12 sm:py-14 text-center">
+            <h2 className="text-white font-bold leading-[1.15] tracking-tight mb-4"
+              style={{ fontSize: "clamp(24px, 3vw, 36px)" }}>
+              Get your readiness score.
+            </h2>
+            <p className="text-white/60 text-[16px] leading-[1.7] mx-auto mb-8" style={{ maxWidth: "46ch" }}>
+              Run a scan and see your exposure in days — no install, no obligation.
+            </p>
+            <Button asChild className="rounded-full bg-[var(--primary-500)] text-[var(--gray-950)] hover:bg-[var(--primary-400)] font-semibold h-11 px-7 text-[15px]">
+              <Link href="/#contact">Run a Free Scan</Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}

package/data/templates/quantum-verification-story/src/app/ceramic-theme.css

@@ -0,0 +1,48 @@
+@import '@utopia-studio-design/design-system/themes/utopia-default.css';
+@import '@utopia-studio-design/design-system/themes/dextrum.css';
+@import '@utopia-studio-design/design-system/themes/barrier-intelligence.css';
+@import '@utopia-studio-design/design-system/themes/renacore.css';
+@import '@utopia-studio-design/design-system/themes/vyapti.css';
+@import '@utopia-studio-design/design-system/themes/utopia-cloudblur.css';
+
+:root {
+  --primary-50: color-mix(in srgb, var(--primary) 8%, var(--background));
+  --primary-100: color-mix(in srgb, var(--primary) 14%, var(--background));
+  --primary-200: color-mix(in srgb, var(--primary) 24%, var(--background));
+  --primary-300: color-mix(in srgb, var(--primary) 42%, var(--background));
+  --primary-400: color-mix(in srgb, var(--primary) 72%, var(--background));
+  --primary-500: var(--primary);
+  --primary-600: color-mix(in srgb, var(--primary) 82%, var(--foreground));
+  --primary-700: color-mix(in srgb, var(--primary) 68%, var(--foreground));
+  --deep-50: color-mix(in srgb, var(--primary) 5%, var(--background));
+  --deep-700: color-mix(in srgb, var(--primary) 30%, var(--foreground));
+  --deep-800: color-mix(in srgb, var(--primary) 20%, var(--foreground));
+  --deep-900: color-mix(in srgb, var(--primary) 12%, var(--foreground));
+  --deep-950: color-mix(in srgb, var(--primary) 6%, var(--foreground));
+  --gray-0: var(--background);
+  --gray-50: var(--surface);
+  --gray-100: var(--muted);
+  --gray-200: var(--border);
+  --gray-400: var(--muted-foreground);
+  --gray-600: var(--muted-foreground);
+  --gray-900: var(--foreground);
+  --gray-950: color-mix(in srgb, var(--foreground) 94%, black);
+  --color-bg: var(--background);
+  --color-bg-subtle: var(--surface);
+  --color-bg-muted: var(--muted);
+  --color-surface: var(--background);
+  --color-surface-raised: var(--surface);
+  --color-border: var(--border);
+  --color-border-strong: color-mix(in srgb, var(--border) 62%, var(--foreground));
+  --color-text-primary: var(--foreground);
+  --color-text-secondary: var(--muted-foreground);
+  --color-text-muted: color-mix(in srgb, var(--muted-foreground) 72%, var(--background));
+  --color-text-inverse: var(--primary-foreground);
+  --color-brand: var(--primary);
+  --color-brand-hover: color-mix(in srgb, var(--primary) 82%, var(--foreground));
+  --color-brand-subtle: color-mix(in srgb, var(--primary) 8%, var(--background));
+  --color-brand-text: color-mix(in srgb, var(--primary) 64%, var(--foreground));
+  --color-deep: var(--deep-900);
+  --color-deep-hover: var(--deep-800);
+  --color-deep-subtle: var(--deep-50);
+}

package/data/templates/quantum-verification-story/src/app/deployment/page.tsx

@@ -0,0 +1,178 @@
+import type { Metadata } from "next"
+import Link from "next/link"
+import { Search, RefreshCw, BadgeCheck, Boxes, KeyRound, ShieldCheck, Layers } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { ScrambleText } from "@/components/scramble-text"
+import { ConsolePreviewSection } from "@/components/console-preview-section"
+
+export const metadata: Metadata = {
+  title: "Continuous Verification — Your Company",
+  description:
+    "Quantum readiness isn't a one-time scan. The platform continuously re-scans and re-verifies your cryptographic posture, so it's provable any day — not just audit day.",
+}
+
+const modes = [
+  { icon: Search,     name: "One-Time Scan",         best: "Best for a first look", body: "A full point-in-time inventory and readiness score across your entire stack." },
+  { icon: RefreshCw,  name: "Continuous Monitoring", best: "Best for staying ready", body: "Automated re-scans flag new quantum-vulnerable assets the moment they ship." },
+  { icon: BadgeCheck, name: "Audit Certification",   best: "Best for proof on demand", body: "Board- and regulator-ready evidence of your posture, exportable whenever you need it." },
+]
+
+const detects = [
+  { icon: Boxes,       t: "Quantum-vulnerable algorithms", b: "RSA, ECC, and Diffie-Hellman exposure across every service and dependency." },
+  { icon: KeyRound,    t: "Key & certificate risk",        b: "Expiring, weak, or non-agile keys and certificates — inventoried at scale." },
+  { icon: ShieldCheck, t: "Protocol & config gaps",        b: "TLS, SSH, and API layers still negotiating quantum-broken cipher suites." },
+  { icon: Layers,      t: "Standards drift",               b: "Assets falling behind NIST FIPS-203/204 as the standards keep evolving." },
+]
+
+const steps = [
+  { t: "Connect",   b: "Point The platform at your stack — agentless and read-only." },
+  { t: "Scan",      b: "Every key, certificate, cipher, and dependency inventoried." },
+  { t: "Score",     b: "Each asset rated against NIST tiers and your data's shelf-life." },
+  { t: "Re-verify", b: "Automated re-scans keep your posture provably current." },
+]
+
+const stats = [
+  { n: "Agentless", l: "no install on\nyour servers" },
+  { n: "24/7",      l: "continuous\nre-verification" },
+  { n: "NIST",      l: "FIPS-203/204\naligned" },
+  { n: "3",         l: "frameworks mapped\nRBI · CERT-In · US" },
+]
+
+export default function VerificationPage() {
+  return (
+    <>
+      {/* Hero */}
+      <section className="section-y border-b border-[var(--color-border)] bg-white">
+        <div className="container-main">
+          <ScrambleText text="Continuous Verification" className="eyebrow mb-4 block" />
+          <h1 className="font-bold leading-[1.08] tracking-tight text-[var(--color-text-primary)] mb-6"
+            style={{ fontSize: "clamp(36px, 4vw, 60px)" }}>
+            Verified once isn&apos;t<br />
+            <span className="text-[var(--primary-500)]">verified.</span>
+          </h1>
+          <p className="text-[17px] leading-[1.7] text-[var(--color-text-secondary)] max-w-2xl">
+            Cryptography drifts — new keys, new services, new standards. The platform re-scans and re-verifies
+            continuously, so your readiness is provable on any given day, not just audit day.
+          </p>
+        </div>
+      </section>
+
+      {/* Live console */}
+      <ConsolePreviewSection
+        dark
+        eyebrow="Continuous monitoring"
+        heading="Provable on any given day."
+        body="The console re-verifies your posture around the clock — drift, downgrades, and false-stability surfaced the moment they appear."
+      />
+
+      {/* Stats */}
+      <section className="section-y border-b border-[var(--color-border)] bg-[var(--gray-50)]">
+        <div className="container-main">
+          <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-[var(--color-border)]">
+            {stats.map(({ n, l }) => (
+              <div key={n} className="px-6 py-10 text-center">
+                <div className="text-[2.2rem] font-bold leading-none text-[var(--deep-900)] mb-2 tracking-tight">{n}</div>
+                <div className="text-[11px] font-mono uppercase tracking-[0.07em] text-[var(--color-text-muted)] leading-relaxed whitespace-pre-line">{l}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Modes */}
+      <section className="section-y border-b border-[var(--color-border)] bg-white">
+        <div className="container-main">
+          <div className="max-w-xl mb-12">
+            <ScrambleText text="How you run it" className="eyebrow mb-3 block" />
+            <h2 className="font-bold leading-[1.12] tracking-tight text-[var(--color-text-primary)]"
+              style={{ fontSize: "var(--type-h1)" }}>
+              Scan once, or stay verified.
+            </h2>
+          </div>
+          <div className="grid md:grid-cols-3 gap-5">
+            {modes.map((m) => {
+              const Icon = m.icon
+              return (
+                <div key={m.name} className="rounded-2xl border border-[var(--color-border)] bg-white p-8 hover:shadow-md hover:border-[var(--color-border-strong)] transition-all flex flex-col">
+                  <div className="flex items-center justify-center w-12 h-12 rounded-xl bg-[var(--deep-900)] mb-5">
+                    <Icon size={20} className="text-[var(--primary-400)]" strokeWidth={2} />
+                  </div>
+                  <h3 className="text-[19px] font-bold tracking-tight text-[var(--color-text-primary)] mb-1.5">{m.name}</h3>
+                  <div className="font-mono text-[10px] tracking-[0.1em] uppercase text-[var(--primary-500)] font-semibold mb-4">{m.best}</div>
+                  <p className="text-[14px] leading-[1.7] text-[var(--color-text-secondary)]">{m.body}</p>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* What we detect */}
+      <section className="section-y border-b border-[var(--color-border)] bg-[var(--gray-50)]">
+        <div className="container-main">
+          <div className="max-w-xl mb-12">
+            <ScrambleText text="What we detect" className="eyebrow mb-3 block" />
+            <h2 className="font-bold leading-[1.12] tracking-tight text-[var(--color-text-primary)]"
+              style={{ fontSize: "var(--type-h1)" }}>
+              Every place quantum risk hides.
+            </h2>
+          </div>
+          <div className="grid sm:grid-cols-2 gap-5">
+            {detects.map((c) => {
+              const Icon = c.icon
+              return (
+                <div key={c.t} className="rounded-2xl border border-[var(--color-border)] bg-white p-8 hover:shadow-md transition-all">
+                  <div className="flex items-center justify-center w-11 h-11 rounded-xl bg-[var(--primary-500)]/12 border border-[var(--primary-500)]/25 mb-5">
+                    <Icon size={19} className="text-[var(--primary-600)]" strokeWidth={2} />
+                  </div>
+                  <h3 className="text-[18px] font-bold tracking-tight text-[var(--color-text-primary)] mb-2">{c.t}</h3>
+                  <p className="text-[14px] leading-[1.7] text-[var(--color-text-secondary)]">{c.b}</p>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* Process */}
+      <section className="section-y border-b border-[var(--color-border)] bg-white">
+        <div className="container-main">
+          <div className="max-w-xl mb-12">
+            <ScrambleText text="How it works" className="eyebrow mb-3 block" />
+            <h2 className="font-bold leading-[1.12] tracking-tight text-[var(--color-text-primary)]"
+              style={{ fontSize: "var(--type-h1)" }}>
+              Connect, scan, score, re-verify.
+            </h2>
+          </div>
+          <div className="grid md:grid-cols-4 gap-5">
+            {steps.map((s, i) => (
+              <div key={s.t} className="rounded-2xl border border-[var(--color-border)] bg-white p-7">
+                <div className="text-[40px] font-bold leading-none text-[var(--primary-200)] mb-4">0{i + 1}</div>
+                <h3 className="text-[17px] font-bold tracking-tight text-[var(--color-text-primary)] mb-2">{s.t}</h3>
+                <p className="text-[13px] leading-[1.7] text-[var(--color-text-secondary)]">{s.b}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="section-y bg-white">
+        <div className="container-main">
+          <div className="rounded-2xl bg-[var(--deep-900)] px-8 py-12 sm:px-12 sm:py-14 text-center">
+            <h2 className="text-white font-bold leading-[1.15] tracking-tight mb-4"
+              style={{ fontSize: "clamp(24px, 3vw, 36px)" }}>
+              See where you stand today.
+            </h2>
+            <p className="text-white/60 text-[16px] leading-[1.7] mx-auto mb-8" style={{ maxWidth: "46ch" }}>
+              Connect your stack and get a first exposure report — no install, no commitment.
+            </p>
+            <Button asChild className="rounded-full bg-[var(--primary-500)] text-[var(--gray-950)] hover:bg-[var(--primary-400)] font-semibold h-11 px-7 text-[15px]">
+              <Link href="/#contact">Run a Free Scan</Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}

package/data/templates/quantum-verification-story/src/app/globals.css

@@ -0,0 +1,175 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+/* Template-level layout and type scale. Brand roles come from Ceramic. */
+:root {
+  /* Color roles are supplied by the Ceramic theme bridge. */
+
+  /* ── Type scale (generous) ── */
+  --type-display-xl: clamp(2.5rem, 3.5rem + 2.5vw, 5.5rem);
+  --type-display:    clamp(1.875rem, 1.5rem + 2.4vw, 3rem);
+  --type-h1:         clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
+  --type-h2:         clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
+  --type-h3:         clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
+  --type-h4:         1rem;
+  --type-body:       0.9375rem;
+  --type-caption:    0.8125rem;
+
+  /* ── Radius ── */
+  --radius-sm: 0.375rem;
+  --radius:    0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+
+  /* ── Shadow ── */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+}
+
+@layer base {
+  *, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border-color: var(--color-border);
+  }
+  html { scroll-behavior: smooth; }
+  body {
+    background: var(--color-bg);
+    color: var(--color-text-primary);
+    font-family: var(--font-sans);
+    font-size: var(--type-body);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    overflow-x: hidden;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 700;
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+    color: var(--color-text-primary);
+  }
+}
+
+@layer utilities {
+  .container-main {
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+  @media (min-width: 768px) {
+    .container-main { padding-left: 2rem; padding-right: 2rem; }
+  }
+  @media (min-width: 1024px) {
+    .container-main { padding-left: 3rem; padding-right: 3rem; }
+  }
+
+  .section-y    { padding-top: 5rem; padding-bottom: 5rem; }
+  .section-y-lg { padding-top: 7rem; padding-bottom: 7rem; }
+
+  /* eyebrow label */
+  .eyebrow {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--color-brand);
+    font-family: var(--font-mono);
+  }
+
+  /* brand surface helpers */
+  .bg-deep     { background-color: var(--deep-900); }
+  .bg-deep-mid { background-color: var(--deep-800); }
+  .bg-brand    { background-color: var(--primary-500); }
+  .text-brand  { color: var(--primary-500); }
+  .text-brand-light { color: var(--primary-300); }
+  .text-deep   { color: var(--deep-900); }
+  .border-brand { border-color: var(--primary-500); }
+  .font-mono-brand { font-family: var(--font-mono); }
+}
+
+/* ── Accessibility: visible keyboard focus ── */
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--primary-500);
+  outline-offset: 2px;
+  border-radius: 3px;
+}
+
+/* Skip-to-content link — visible only when focused */
+.skip-link {
+  position: fixed;
+  top: 0.5rem;
+  left: 0.5rem;
+  z-index: 100;
+  padding: 0.6rem 1rem;
+  border-radius: 9999px;
+  background: var(--primary-500);
+  color: var(--gray-950);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  transform: translateY(-150%);
+  transition: transform 0.18s ease;
+}
+.skip-link:focus {
+  transform: translateY(0);
+}
+
+/* ── Animated glow border (light travels along the edge) ── */
+@property --glow-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+@keyframes glow-spin { to { --glow-angle: 360deg; } }
+@keyframes glow-breathe {
+  0%, 100% { box-shadow: 0 0 22px -4px color-mix(in srgb, var(--primary-500) 30%, transparent); }
+  50%      { box-shadow: 0 0 34px -2px color-mix(in srgb, var(--primary-500) 55%, transparent); }
+}
+
+.glow-border {
+  position: relative;
+  isolation: isolate;
+  animation: glow-breathe 3.6s ease-in-out infinite;
+}
+/* rotating gradient ring drawn only on the border via mask */
+.glow-border::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1.5px;
+  background: conic-gradient(
+    from var(--glow-angle),
+    transparent 0deg,
+    color-mix(in srgb, var(--primary-500) 15%, transparent) 40deg,
+    var(--primary-300) 90deg,
+    var(--primary-400) 120deg,
+    color-mix(in srgb, var(--primary-500) 15%, transparent) 170deg,
+    transparent 210deg,
+    transparent 360deg
+  );
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  animation: glow-spin 4s linear infinite;
+  pointer-events: none;
+  z-index: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+  .glow-border { animation: none; box-shadow: 0 0 22px -6px color-mix(in srgb, var(--primary-500) 40%, transparent); }
+  .glow-border::before { animation: none; }
+}

package/data/templates/quantum-verification-story/src/app/layout.tsx

@@ -0,0 +1,45 @@
+import type { Metadata } from "next"
+import "./globals.css"
+import "./ceramic-theme.css"
+import { Nav } from "@/components/nav"
+import { Footer } from "@/components/footer"
+
+export const metadata: Metadata = {
+  metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"),
+  title: "Your Company — Verify Your Quantum Readiness",
+  description:
+    "Is your encryption quantum-safe? The platform scans your stack, diagnoses every quantum-vulnerable algorithm, and verifies your post-quantum readiness — board-ready and provable.",
+  openGraph: {
+    title: "Your Company — Verify Your Quantum Readiness",
+    description:
+      "Scan, diagnose, and verify whether your encryption survives the quantum era — the PQC verification platform.",
+    type: "website",
+  },
+  twitter: {
+    card: "summary",
+    title: "Your Company — Verify Your Quantum Readiness",
+    description: "Scan, diagnose, and verify whether your encryption survives the quantum era.",
+  },
+}
+
+const themeBootstrap = `(() => {
+  const supportedThemes = new Set(['utopia-default', 'dextrum', 'barrier-intelligence', 'renacore', 'vyapti', 'utopia-cloudblur']);
+  const requestedTheme = new URLSearchParams(window.location.search).get('theme');
+  if (!requestedTheme || !supportedThemes.has(requestedTheme)) return;
+  document.documentElement.dataset.theme = requestedTheme;
+  document.documentElement.dataset.brand = requestedTheme;
+})();`
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" data-theme="utopia-default" data-brand="utopia-default" data-color-mode="light" suppressHydrationWarning>
+      <head><script dangerouslySetInnerHTML={{ __html: themeBootstrap }} /></head>
+      <body>
+        <a href="#main-content" className="skip-link">Skip to content</a>
+        <Nav />
+        <main id="main-content">{children}</main>
+        <Footer />
+      </body>
+    </html>
+  )
+}