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

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

@@ -0,0 +1,39 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { LatticeField } from "@/components/lattice-field"
+
+export default function NotFound() {
+  return (
+    <section className="bg-[var(--gray-950)] px-2 sm:px-3 py-2 sm:py-3">
+      <div className="relative overflow-hidden rounded-[24px] sm:rounded-[32px] bg-[var(--deep-900)]">
+        <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%)" }} />
+        <LatticeField className="opacity-50" />
+        <div className="absolute inset-x-0 bottom-0 h-[70%] pointer-events-none"
+          style={{ background: "radial-gradient(60% 80% at 50% 120%, color-mix(in srgb, var(--primary-200) 40%, transparent) 0%, color-mix(in srgb, var(--primary-500) 20%, transparent) 35%, transparent 70%)" }} />
+
+        <div className="container-main relative z-10 py-28 lg:py-36 text-center">
+          <div className="font-mono text-[11px] tracking-[0.15em] uppercase text-[var(--primary-300)] mb-6">
+            Error 404 · Decryption failed
+          </div>
+          <h1 className="text-white font-bold leading-[1.05] tracking-tight mb-5 mx-auto"
+            style={{ fontSize: "clamp(3rem, 8vw + 1rem, 7rem)" }}>
+            404
+          </h1>
+          <p className="text-white/65 text-[17px] leading-[1.65] mx-auto mb-10" style={{ maxWidth: "44ch" }}>
+            This page couldn&apos;t be found — the only thing on this site that&apos;s harder to recover
+            than your pre-quantum keys.
+          </p>
+          <div className="flex flex-wrap items-center justify-center gap-3">
+            <Button asChild className="rounded-full bg-[var(--primary-500)] text-[var(--primary-foreground)] hover:bg-[var(--primary-400)] font-semibold h-11 px-7 text-[15px]">
+              <Link href="/">Back to safety</Link>
+            </Button>
+            <Button asChild variant="outline" className="rounded-full border-white/25 text-white hover:bg-white/10 hover:border-white/40 h-11 px-7 text-[15px] bg-transparent">
+              <Link href="/#contact">Contact us</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,24 @@
+import { HeroSection } from "@/components/sections/hero"
+import { ProblemSection } from "@/components/sections/problem"
+import { OfferSection } from "@/components/sections/offer"
+import { MoatSection } from "@/components/sections/moat"
+import { ClientsSection } from "@/components/sections/clients"
+import { PilotSection } from "@/components/sections/pilot"
+import { ContactSection } from "@/components/sections/contact"
+import { PresentationLayout } from "@/components/presentation-layout"
+
+export default function HomePage() {
+  return (
+    <PresentationLayout
+      sections={[
+        <HeroSection key="hero" />,
+        <ProblemSection key="problem" />,
+        <OfferSection key="offer" />,
+        <MoatSection key="moat" />,
+        <ClientsSection key="clients" />,
+        <PilotSection key="pilot" />,
+        <ContactSection key="contact" />,
+      ]}
+    />
+  )
+}

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

@@ -0,0 +1,132 @@
+import type { Metadata } from "next"
+import Link from "next/link"
+import { Search, GitBranch, Layers, GaugeCircle, ArrowRight } 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: "Enterprise Products — Your Company",
+  description:
+    "Quantum-safe architecture products: cryptographic inventory, PQC migration engine, crypto-agility layer, and a compliance console — covering every stage of your post-quantum readiness.",
+}
+
+const products = [
+  {
+    icon: Search,
+    name: "Cryptographic Inventory",
+    tag: "Discover",
+    desc: "An automated scan of every key, certificate, library, and protocol across your stack — so you know exactly what's exposed before you migrate.",
+    specs: ["Agentless network + code scanning", "RSA / ECC / DH exposure mapping", "Certificate & key-lifecycle inventory"],
+  },
+  {
+    icon: GitBranch,
+    name: "PQC Migration Engine",
+    tag: "Replace",
+    desc: "Automated rip-and-replace of legacy cryptography with NIST-standardized algorithms — validated against your real traffic, not a lab.",
+    specs: ["ML-KEM-768 / ML-DSA-65 integration", "Hybrid classical+PQC rollout", "Zero-downtime cutover playbooks"],
+  },
+  {
+    icon: Layers,
+    name: "Crypto-Agility Layer",
+    tag: "Adapt",
+    desc: "A negotiation layer that lets you swap algorithms at runtime — so you're ready for the next standard, not locked to this one.",
+    specs: ["Runtime algorithm negotiation", "Policy-driven cipher selection", "Drop-in for TLS & API layers"],
+  },
+  {
+    icon: GaugeCircle,
+    name: "Compliance Console",
+    tag: "Prove",
+    desc: "A single dashboard that tracks your post-quantum posture against every framework that matters — with board-ready evidence on demand.",
+    specs: ["NIST · RBI · CERT-In mapping", "Continuous posture scoring", "Exportable audit evidence"],
+  },
+]
+
+export default function ProductsPage() {
+  return (
+    <>
+      {/* Hero */}
+      <section className="section-y border-b border-[var(--color-border)] bg-white">
+        <div className="container-main">
+          <ScrambleText text="Enterprise Products" 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)" }}>
+            Quantum-Safe<br />
+            <span className="text-[var(--primary-500)]">Architecture Products</span>
+          </h1>
+          <p className="text-[17px] leading-[1.7] text-[var(--color-text-secondary)] max-w-2xl">
+            From cryptographic inventory to crypto-agility — four modules that cover every stage of your
+            post-quantum readiness. Automated, verifiable, board-ready.
+          </p>
+        </div>
+      </section>
+
+      {/* Live console */}
+      <ConsolePreviewSection
+        eyebrow="The Compliance Console"
+        heading="See your posture, live."
+        body="The same console your team runs — continuous posture scoring, exposure mapping, and board-ready evidence in one place."
+      />
+
+      {/* Products */}
+      <section className="section-y border-b border-[var(--color-border)] bg-white">
+        <div className="container-main">
+          <div className="mb-8">
+            <ScrambleText text="Enterprise Products" className="eyebrow mb-3 block" />
+          </div>
+          <div className="grid sm:grid-cols-2 gap-5">
+            {products.map((p) => {
+              const Icon = p.icon
+              return (
+                <div key={p.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 gap-4 mb-5">
+                    <div className="flex items-center justify-center w-12 h-12 rounded-xl bg-[var(--deep-900)] shrink-0">
+                      <Icon size={20} className="text-[var(--primary-400)]" strokeWidth={2} />
+                    </div>
+                    <div>
+                      <div className="font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--primary-500)] font-semibold">{p.tag}</div>
+                      <h3 className="text-[19px] font-bold tracking-tight text-[var(--color-text-primary)]">{p.name}</h3>
+                    </div>
+                  </div>
+                  <p className="text-[14px] leading-[1.7] text-[var(--color-text-secondary)] mb-6">{p.desc}</p>
+                  <ul className="space-y-2 list-none p-0 m-0 mt-auto border-t border-[var(--color-border)] pt-5">
+                    {p.specs.map((s) => (
+                      <li key={s} className="flex items-start gap-2 text-[13px] text-[var(--color-text-primary)] leading-snug">
+                        <span className="text-[var(--primary-500)] mt-px shrink-0">→</span>{s}
+                      </li>
+                    ))}
+                  </ul>
+                </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)" }}>
+              Not sure where you&apos;re exposed?
+            </h2>
+            <p className="text-white/60 text-[16px] leading-[1.7] mx-auto mb-8" style={{ maxWidth: "48ch" }}>
+              Run a scan and get a board-ready readiness report — see exactly where you&apos;re exposed,
+              in days.
+            </p>
+            <div className="flex flex-wrap items-center justify-center gap-3">
+              <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="/assessment">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-11 px-7 text-[15px] bg-transparent">
+                <Link href="/#contact">Talk to Sales <ArrowRight size={16} className="ml-1" /></Link>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}

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

@@ -0,0 +1,312 @@
+@font-face {
+  font-family: "TWK Lausanne";
+  src: url("./fonts/TWKLausanne-350.ttf") format("truetype");
+  font-weight: 350;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "TWK Lausanne";
+  src: url("./fonts/TWKLausanne-500.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "TWK Lausanne";
+  src: url("./fonts/TWKLausanne-700.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "IBM Plex Sans Arabic";
+  src: url("./fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  unicode-range:
+    U+0600-06FF,
+    U+0750-077F,
+    U+0870-089F,
+    U+08A0-08FF,
+    U+FB50-FDFF,
+    U+FE70-FEFF;
+}
+
+@font-face {
+  font-family: "IBM Plex Sans Arabic";
+  src: url("./fonts/IBMPlexSansArabic-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  unicode-range:
+    U+0600-06FF,
+    U+0750-077F,
+    U+0870-089F,
+    U+08A0-08FF,
+    U+FB50-FDFF,
+    U+FE70-FEFF;
+}
+
+@font-face {
+  font-family: "IBM Plex Sans Arabic";
+  src: url("./fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  unicode-range:
+    U+0600-06FF,
+    U+0750-077F,
+    U+0870-089F,
+    U+08A0-08FF,
+    U+FB50-FDFF,
+    U+FE70-FEFF;
+}
+
+@font-face {
+  font-family: "Readex Pro";
+  src: url("./fonts/ReadexPro-Variable.ttf") format("truetype-variations");
+  font-weight: 200 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root,
+:is([data-brand="utopia-default"], [data-theme="utopia-default"]) {
+  color-scheme: dark;
+
+  --utopia-brick-red: #cc5536;
+  --utopia-special-black: #3c3235;
+  --utopia-light-grey: #eeeeee;
+  --utopia-white: #ffffff;
+
+  --utopia-black-80: #635b5e;
+  --utopia-black-60: #8f898b;
+  --utopia-black-50: #a6a0a2;
+  --utopia-black-40: #bdb7b9;
+  --utopia-black-20: #e3e1e2;
+
+  --utopia-red-80: #d77a59;
+  --utopia-red-60: #e3a385;
+  --utopia-red-40: #f0c6af;
+  --utopia-red-20: #f6e2d7;
+
+  /* Brand-studio visual grammar */
+  --brand-panel-dark: var(--utopia-special-black);
+  --brand-panel-accent: var(--utopia-brick-red);
+  --brand-panel-light: var(--utopia-light-grey);
+  --brand-ink-dark: var(--utopia-special-black);
+  --brand-ink-deep: #100b0c;
+  --brand-ink-light: var(--utopia-white);
+  --brand-rule-dark: rgb(60 50 53 / 24%);
+  --brand-rule-light: rgb(255 255 255 / 18%);
+  --brand-display-size: clamp(3.25rem, 7vw, 6.75rem);
+  --brand-display-leading: 0.88;
+  --brand-display-tracking: -0.035em;
+  --brand-label-tracking: 0.1em;
+  --brand-panel-gutter: clamp(1.5rem, 5vw, 4.5rem);
+  --brand-section-space: clamp(4.5rem, 9vw, 8rem);
+
+  --background: var(--utopia-special-black);
+  --foreground: var(--utopia-white);
+  --foreground-muted: var(--utopia-black-40);
+  --foreground-subtle: var(--utopia-black-50);
+  --card: var(--surface);
+  --card-foreground: var(--foreground);
+  --primary: #b8472c;
+  --primary-foreground: var(--utopia-white);
+  --primary-hover: #a9442a;
+  --primary-active: #9e3d25;
+  --destructive: #6f403b;
+  --destructive-hover: #7d4842;
+  --destructive-active: #5d3430;
+  --destructive-foreground: var(--utopia-white);
+  --destructive-surface: rgb(111 64 59 / 14%);
+  --destructive-border: rgb(215 122 89 / 44%);
+  --destructive-text: var(--utopia-red-80);
+  --warning: var(--utopia-red-80);
+  --warning-foreground: var(--utopia-special-black);
+  --warning-surface: rgb(215 122 89 / 12%);
+  --warning-border: rgb(215 122 89 / 38%);
+  --warning-text: var(--utopia-red-60);
+  --success: var(--utopia-light-grey);
+  --success-foreground: var(--utopia-special-black);
+  --success-surface: rgb(247 244 237 / 8%);
+  --success-border: rgb(247 244 237 / 24%);
+  --success-text: var(--utopia-white);
+  --secondary: var(--utopia-light-grey);
+  --secondary-foreground: var(--utopia-special-black);
+  --secondary-hover: var(--utopia-black-20);
+  --secondary-active: var(--utopia-black-40);
+  --muted: var(--utopia-black-80);
+  --muted-foreground: var(--utopia-black-40);
+  --border: rgb(255 255 255 / 16%);
+  --input: rgb(255 255 255 / 24%);
+  --ring: var(--utopia-red-80);
+  --interaction-selection-surface: color-mix(in srgb, var(--primary) 20%, var(--background) 80%);
+  --interaction-selection-border: color-mix(in srgb, var(--primary) 68%, var(--foreground) 32%);
+
+  --surface: rgb(255 255 255 / 4.5%);
+  --surface-strong: rgb(255 255 255 / 8%);
+  --surface-elevated: rgb(255 255 255 / 7%);
+  --surface-hover: var(--surface-strong);
+  --surface-inverse: var(--utopia-white);
+  --inverse-foreground: var(--utopia-special-black);
+  --inverse-foreground-muted: var(--utopia-black-80);
+  --inverse-foreground-subtle: var(--utopia-black-60);
+  --inverse-hover: var(--utopia-black-20);
+  --inverse-focus-ring: var(--utopia-brick-red);
+  --overlay: rgb(60 50 53 / 86%);
+  --modal-surface: var(--utopia-special-black);
+  --popover-surface: var(--utopia-special-black);
+  --ghost-hover: rgb(255 255 255 / 8%);
+  --ghost-active: rgb(255 255 255 / 12%);
+  --outline-hover: rgb(255 255 255 / 8%);
+  --outline-active: rgb(255 255 255 / 12%);
+
+  --radius: 0;
+  --radius-control: 0;
+  --radius-surface: 0;
+  --radius-chat-bubble: var(--radius-surface);
+  --radius-chat-composer: var(--radius-surface);
+  --radius-chat-token: var(--radius-control);
+
+  --font-sans: "TWK Lausanne", "Helvetica Neue", Arial, sans-serif;
+  --font-arabic: "Readex Pro", "Noto Sans Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif;
+  --font-arabic-display: var(--font-arabic);
+  --font-arabic-body: var(--font-arabic);
+  --font-mono: "JetBrains Mono", Menlo, Consolas, monospace;
+  --font-weight-body: 350;
+  --font-weight-regular: 350;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 500;
+  --font-weight-strong: 700;
+  --font-weight-arabic-body: 300;
+  --font-weight-arabic-display: 500;
+  --font-size-small: 13px;
+  --font-size-2: 16px;
+  --font-size-eyebrow: 12px;
+  --font-size-supporting: 12px;
+  --font-size-body: 16px;
+  --font-size-body-lg: 18px;
+  --font-size-display: clamp(44px, 8vw, 96px);
+  --font-size-arabic-body: 16px;
+  --font-size-arabic-body-lg: 19px;
+  --font-size-arabic-display: clamp(40px, 7.3vw, 87px);
+  --line-height-tight: 1.14;
+  --line-height-supporting: 14px;
+  --line-height-arabic: 1.75;
+  --line-height-arabic-body: 1.85;
+  --line-height-arabic-display: 1.28;
+
+  --tracking-heading: 0.03em;
+  --tracking-eyebrow: 0.08em;
+  --tracking-arabic: 0;
+  --tracking-arabic-display: 0;
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-4: 16px;
+  --space-8: 32px;
+  --space-16: 64px;
+  --space-24: 96px;
+  --space-32: 128px;
+
+  --shadow-surface: none;
+  --shadow-popover: none;
+  --shadow-control: none;
+
+  --duration-fast: 120ms;
+  --duration-medium: 220ms;
+  --duration-slow: 420ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --motion-duration-press: 160ms;
+  --motion-duration-page: 420ms;
+  --motion-duration-expand: 360ms;
+  --motion-duration-reveal: 440ms;
+  --motion-duration-icon: 640ms;
+  --motion-duration-fast: var(--motion-duration-press);
+  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-icon: var(--motion-ease-emphasized);
+  --motion-press-scale: 0.97;
+  --motion-distance-page: var(--space-2);
+  --motion-distance-reveal: var(--space-2);
+  --border-width-hairline: 0.0625rem;
+  --control-height-sm: var(--button-height-sm);
+  --sidebar-width: 17rem;
+  --sidebar-width-collapsed: 4rem;
+  --sidebar-min-block-size: 30rem;
+  --sidebar-rail-size: var(--space-2);
+
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+  --focus-ring: var(--ring);
+  --icon-system: phosphor;
+
+  --button-height: 40px;
+  --button-height-sm: 32px;
+  --button-height-lg: 48px;
+  --button-padding-inline: 16px;
+  --button-padding-inline-sm: 12px;
+  --button-padding-inline-lg: 24px;
+  --button-font-size: 14px;
+  --button-font-size-sm: 13px;
+  --button-font-size-lg: 16px;
+  --button-group-gap: 8px;
+  --button-group-gap-compact: 4px;
+
+  --badge-padding-block: 4px;
+  --badge-padding-inline: 8px;
+  --badge-font-size: 12px;
+
+  --card-padding: 24px;
+  --card-title-size: 20px;
+  --z-overlay: 40;
+  --z-popover: 45;
+  --z-modal: 50;
+}
+
+:where(:lang(ar), [lang|="ar"]) {
+  font-family: var(--font-arabic-body);
+  font-weight: var(--font-weight-arabic-body);
+  line-height: var(--line-height-arabic-body);
+  letter-spacing: var(--tracking-arabic);
+  text-transform: none;
+}
+
+:is([data-brand="utopia-default"], [data-theme="utopia-default"])[data-color-mode="light"] {
+  color-scheme: light;
+  --background: var(--utopia-white);
+  --foreground: var(--utopia-special-black);
+  --foreground-muted: color-mix(in srgb, var(--foreground) 64%, var(--background) 36%);
+  --foreground-subtle: color-mix(in srgb, var(--foreground) 44%, var(--background) 56%);
+  --card: color-mix(in srgb, var(--foreground) 3%, var(--background) 97%);
+  --card-foreground: var(--foreground);
+  --secondary: var(--utopia-light-grey);
+  --secondary-foreground: var(--foreground);
+  --muted: color-mix(in srgb, var(--foreground) 12%, var(--background) 88%);
+  --muted-foreground: color-mix(in srgb, var(--foreground) 62%, var(--background) 38%);
+  --border: color-mix(in srgb, var(--foreground) 18%, var(--background) 82%);
+  --input: color-mix(in srgb, var(--foreground) 24%, var(--background) 76%);
+  --surface: color-mix(in srgb, var(--foreground) 4%, var(--background) 96%);
+  --surface-strong: color-mix(in srgb, var(--foreground) 8%, var(--background) 92%);
+  --surface-elevated: var(--utopia-white);
+  --surface-hover: var(--surface-strong);
+  --overlay: color-mix(in srgb, var(--background) 84%, transparent);
+  --modal-surface: var(--utopia-white);
+  --popover-surface: var(--utopia-white);
+  --success: var(--utopia-special-black);
+  --success-foreground: var(--utopia-white);
+  --success-surface: color-mix(in srgb, var(--success) 7%, var(--background) 93%);
+  --success-border: color-mix(in srgb, var(--success) 20%, var(--background) 80%);
+  --success-text: var(--success);
+  --ghost-hover: color-mix(in srgb, var(--foreground) 8%, transparent);
+  --ghost-active: color-mix(in srgb, var(--foreground) 12%, transparent);
+  --outline-hover: var(--surface-strong);
+  --outline-active: var(--muted);
+}

package/data/templates/quantum-verification-story/src/components/RotatingText.css

@@ -0,0 +1,36 @@
+.text-rotate {
+  display: flex;
+  flex-wrap: wrap;
+  white-space: pre-wrap;
+  position: relative;
+}
+
+.text-rotate-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.text-rotate-word {
+  display: inline-flex;
+}
+
+.text-rotate-lines {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.text-rotate-element {
+  display: inline-block;
+}
+
+.text-rotate-space {
+  white-space: pre;
+}