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

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

@@ -0,0 +1,189 @@
+'use client';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+
+import './RotatingText.css';
+
+function cn(...classes: any[]) {
+  return classes.filter(Boolean).join(' ');
+}
+
+const RotatingText = forwardRef<any, any>((props, ref) => {
+  const {
+    texts,
+    transition = { type: 'spring', damping: 25, stiffness: 300 },
+    initial = { y: '100%', opacity: 0 },
+    animate = { y: 0, opacity: 1 },
+    exit = { y: '-120%', opacity: 0 },
+    animatePresenceMode = 'wait',
+    animatePresenceInitial = false,
+    rotationInterval = 2000,
+    staggerDuration = 0,
+    staggerFrom = 'first',
+    loop = true,
+    auto = true,
+    splitBy = 'characters',
+    onNext,
+    mainClassName,
+    splitLevelClassName,
+    elementLevelClassName,
+    ...rest
+  } = props;
+
+  const [currentTextIndex, setCurrentTextIndex] = useState(0);
+
+  const splitIntoCharacters = (text: string) => {
+    if (typeof Intl !== 'undefined' && (Intl as any).Segmenter) {
+      const segmenter = new (Intl as any).Segmenter('en', { granularity: 'grapheme' });
+      return Array.from(segmenter.segment(text), (segment: any) => segment.segment);
+    }
+    return Array.from(text);
+  };
+
+  const elements = useMemo(() => {
+    const currentText = texts[currentTextIndex];
+    if (splitBy === 'characters') {
+      const words = currentText.split(' ');
+      return words.map((word: string, i: number) => ({
+        characters: splitIntoCharacters(word),
+        needsSpace: i !== words.length - 1
+      }));
+    }
+    if (splitBy === 'words') {
+      return currentText.split(' ').map((word: string, i: number, arr: string[]) => ({
+        characters: [word],
+        needsSpace: i !== arr.length - 1
+      }));
+    }
+    if (splitBy === 'lines') {
+      return currentText.split('\n').map((line: string, i: number, arr: string[]) => ({
+        characters: [line],
+        needsSpace: i !== arr.length - 1
+      }));
+    }
+
+    return currentText.split(splitBy).map((part: string, i: number, arr: string[]) => ({
+      characters: [part],
+      needsSpace: i !== arr.length - 1
+    }));
+  }, [texts, currentTextIndex, splitBy]);
+
+  const getStaggerDelay = useCallback(
+    (index: number, totalChars: number) => {
+      const total = totalChars;
+      if (staggerFrom === 'first') return index * staggerDuration;
+      if (staggerFrom === 'last') return (total - 1 - index) * staggerDuration;
+      if (staggerFrom === 'center') {
+        const center = Math.floor(total / 2);
+        return Math.abs(center - index) * staggerDuration;
+      }
+      if (staggerFrom === 'random') {
+        const randomIndex = Math.floor(Math.random() * total);
+        return Math.abs(randomIndex - index) * staggerDuration;
+      }
+      return Math.abs((staggerFrom as number) - index) * staggerDuration;
+    },
+    [staggerFrom, staggerDuration]
+  );
+
+  const handleIndexChange = useCallback(
+    (newIndex: number) => {
+      setCurrentTextIndex(newIndex);
+      if (onNext) onNext(newIndex);
+    },
+    [onNext]
+  );
+
+  const next = useCallback(() => {
+    const nextIndex = currentTextIndex === texts.length - 1 ? (loop ? 0 : currentTextIndex) : currentTextIndex + 1;
+    if (nextIndex !== currentTextIndex) {
+      handleIndexChange(nextIndex);
+    }
+  }, [currentTextIndex, texts.length, loop, handleIndexChange]);
+
+  const previous = useCallback(() => {
+    const prevIndex = currentTextIndex === 0 ? (loop ? texts.length - 1 : currentTextIndex) : currentTextIndex - 1;
+    if (prevIndex !== currentTextIndex) {
+      handleIndexChange(prevIndex);
+    }
+  }, [currentTextIndex, texts.length, loop, handleIndexChange]);
+
+  const jumpTo = useCallback(
+    (index: number) => {
+      const validIndex = Math.max(0, Math.min(index, texts.length - 1));
+      if (validIndex !== currentTextIndex) {
+        handleIndexChange(validIndex);
+      }
+    },
+    [texts.length, currentTextIndex, handleIndexChange]
+  );
+
+  const reset = useCallback(() => {
+    if (currentTextIndex !== 0) {
+      handleIndexChange(0);
+    }
+  }, [currentTextIndex, handleIndexChange]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      next,
+      previous,
+      jumpTo,
+      reset
+    }),
+    [next, previous, jumpTo, reset]
+  );
+
+  useEffect(() => {
+    if (!auto) return;
+    const intervalId = setInterval(next, rotationInterval);
+    return () => clearInterval(intervalId);
+  }, [next, rotationInterval, auto]);
+
+  return (
+    <motion.span className={cn('text-rotate', mainClassName)} {...rest} layout transition={transition}>
+      <span className="text-rotate-sr-only">{texts[currentTextIndex]}</span>
+      <AnimatePresence mode={animatePresenceMode} initial={animatePresenceInitial}>
+        <motion.span
+          key={currentTextIndex}
+          className={cn(splitBy === 'lines' ? 'text-rotate-lines' : 'text-rotate')}
+          layout
+          aria-hidden="true"
+        >
+          {elements.map((wordObj: any, wordIndex: number, array: any[]) => {
+            const previousCharsCount = array.slice(0, wordIndex).reduce((sum, word) => sum + word.characters.length, 0);
+            return (
+              <span key={wordIndex} className={cn('text-rotate-word', splitLevelClassName)}>
+                {wordObj.characters.map((char: string, charIndex: number) => (
+                  <motion.span
+                    key={charIndex}
+                    initial={initial}
+                    animate={animate}
+                    exit={exit}
+                    transition={{
+                      ...transition,
+                      delay: getStaggerDelay(
+                        previousCharsCount + charIndex,
+                        array.reduce((sum, word) => sum + word.characters.length, 0)
+                      )
+                    }}
+                    className={cn('text-rotate-element', elementLevelClassName)}
+                  >
+                    {char}
+                  </motion.span>
+                ))}
+                {wordObj.needsSpace && <span className="text-rotate-space"> </span>}
+              </span>
+            );
+          })}
+        </motion.span>
+      </AnimatePresence>
+    </motion.span>
+  );
+});
+
+RotatingText.displayName = 'RotatingText';
+export default RotatingText;

package/data/templates/quantum-verification-story/src/components/brand-mark.tsx

@@ -0,0 +1,14 @@
+export function BrandMark({ size = 28 }: { size?: number }) {
+  return (
+    <span
+      aria-hidden="true"
+      className="inline-block shrink-0 border border-[var(--color-border-strong)]"
+      style={{
+        width: size,
+        height: size,
+        borderRadius: "var(--radius-sm)",
+        background: "linear-gradient(135deg, var(--primary) 0 42%, transparent 42% 58%, var(--foreground) 58% 100%)",
+      }}
+    />
+  )
+}

package/data/templates/quantum-verification-story/src/components/console-preview-section.tsx

@@ -0,0 +1,57 @@
+import { ScrambleText } from "@/components/scramble-text"
+import { ConsolePreview } from "@/components/console-preview"
+
+interface ConsolePreviewSectionProps {
+  eyebrow?: string
+  heading: string
+  body?: string
+  /** Background flavor to alternate with neighbouring sections. */
+  dark?: boolean
+}
+
+export function ConsolePreviewSection({
+  eyebrow = "Live console",
+  heading,
+  body,
+  dark = false,
+}: ConsolePreviewSectionProps) {
+  return (
+    <section
+      className={
+        dark
+          ? "section-y border-b border-white/10 bg-[var(--deep-900)]"
+          : "section-y border-b border-[var(--color-border)] bg-[var(--gray-50)]"
+      }
+    >
+      <div className="container-main">
+        <div className="max-w-xl mb-10">
+          <ScrambleText
+            text={eyebrow}
+            className={dark ? "eyebrow mb-3 block text-[var(--primary-400)]" : "eyebrow mb-3 block"}
+          />
+          <h2
+            className={
+              "font-bold leading-[1.12] tracking-tight " +
+              (dark ? "text-white" : "text-[var(--color-text-primary)]")
+            }
+            style={{ fontSize: "var(--type-h1)" }}
+          >
+            {heading}
+          </h2>
+          {body && (
+            <p
+              className={
+                "mt-4 text-[15px] leading-[1.7] " +
+                (dark ? "text-white/60" : "text-[var(--color-text-secondary)]")
+              }
+            >
+              {body}
+            </p>
+          )}
+        </div>
+
+        <ConsolePreview className="w-full max-w-4xl" height={420} scale={0.62} />
+      </div>
+    </section>
+  )
+}

package/data/templates/quantum-verification-story/src/components/console-preview.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import { ArrowUpRight } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const CONSOLE_URL = process.env.NEXT_PUBLIC_CONSOLE_URL || ""
+const CONSOLE_HOST = CONSOLE_URL ? CONSOLE_URL.replace(/^https?:\/\//, "").replace(/\/$/, "") : "console.your-company.example"
+
+interface ConsolePreviewProps {
+  /** Outer wrapper classes (controls max-width, margin). */
+  className?: string
+  /** Height of the visible preview viewport in px. */
+  height?: number
+  /** Scale applied to the embedded 1280px-wide console. */
+  scale?: number
+}
+
+export function ConsolePreview({
+  className = "mx-auto mb-9 w-full max-w-2xl",
+  height = 240,
+  scale = 0.55,
+}: ConsolePreviewProps) {
+  return (
+    <a
+      href={CONSOLE_URL || "#"}
+      target={CONSOLE_URL ? "_blank" : undefined}
+      rel="noopener noreferrer"
+      aria-disabled={!CONSOLE_URL}
+      onClick={(event) => { if (!CONSOLE_URL) event.preventDefault() }}
+      className={cn("group block glow-border rounded-xl no-underline", className)}
+    >
+      <div className="overflow-hidden rounded-xl border border-white/10 bg-[var(--gray-950)]/85 backdrop-blur-sm">
+        {/* Browser chrome */}
+        <div className="flex items-center gap-3 px-4 py-2.5 border-b border-white/10">
+          <div className="flex items-center gap-1.5 shrink-0">
+            <span className="w-2.5 h-2.5 rounded-full bg-white/20" />
+            <span className="w-2.5 h-2.5 rounded-full bg-white/20" />
+            <span className="w-2.5 h-2.5 rounded-full bg-white/20" />
+          </div>
+          <div className="flex-1 flex items-center justify-center">
+            <span className="font-mono text-[11px] text-white/45 truncate">{CONSOLE_HOST}</span>
+          </div>
+          <span className="flex items-center gap-1 font-mono text-[10px] uppercase tracking-[0.1em] text-[var(--primary-400)] shrink-0 group-hover:text-[var(--primary-300)] transition-colors">
+            Open live console
+            <ArrowUpRight size={12} />
+          </span>
+        </div>
+
+        {/* Live preview */}
+        <div className="relative overflow-hidden bg-white" style={{ height }}>
+          {CONSOLE_URL ? (
+            <iframe
+              src={CONSOLE_URL}
+              title="Security console preview"
+              loading="lazy"
+              tabIndex={-1}
+              aria-hidden="true"
+              className="absolute left-0 top-0 origin-top-left pointer-events-none"
+              style={{ width: `${100 / scale}%`, height: `${height / scale}px`, transform: `scale(${scale})` }}
+            />
+          ) : (
+            <div className="grid h-full place-items-center bg-[var(--surface)] font-mono text-[12px] text-[var(--muted-foreground)]">
+              Configure NEXT_PUBLIC_CONSOLE_URL
+            </div>
+          )}
+          {/* Click-capture overlay (so the iframe stays a preview) */}
+          <div className="absolute inset-0 bg-transparent group-hover:bg-black/[0.04] transition-colors" />
+        </div>
+      </div>
+    </a>
+  )
+}

package/data/templates/quantum-verification-story/src/components/fade-up.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { ReactNode } from "react"
+
+interface FadeUpProps {
+  children: ReactNode
+  delay?: number
+  className?: string
+  as?: keyof typeof motion
+}
+
+export function FadeUp({ children, delay = 0, className, as = "div" }: FadeUpProps) {
+  const Tag = motion[as] as typeof motion.div
+  return (
+    <Tag
+      className={className}
+      initial={{ opacity: 0, y: 28 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "-60px" }}
+      transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1], delay }}
+    >
+      {children}
+    </Tag>
+  )
+}
+
+export function FadeUpGroup({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <motion.div
+      className={className}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, margin: "-60px" }}
+      variants={{ hidden: {}, visible: { transition: { staggerChildren: 0.08 } } }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+export function FadeUpItem({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <motion.div
+      className={className}
+      variants={{
+        hidden: { opacity: 0, y: 24 },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] } },
+      }}
+    >
+      {children}
+    </motion.div>
+  )
+}

package/data/templates/quantum-verification-story/src/components/floating-network.tsx

@@ -0,0 +1,125 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+/**
+ * Floating node network — dots drift continuously and connect with lines
+ * whenever they pass close to one another, the links fading in and out as
+ * the distance changes. A live "constellation" / neural-network motif.
+ * Canvas-based for smooth per-frame edge recalculation; respects
+ * reduced-motion and pauses while scrolled off-screen.
+ */
+export function FloatingNetwork({
+  count = 18,
+  variant = "light",
+  className = "",
+}: {
+  count?: number
+  variant?: "light" | "dark"
+  className?: string
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    const GOLD = variant === "dark" ? "208,160,85" : "184,147,58"
+    const LINK = 150 // px: max distance to draw a connection
+
+    let w = 0, h = 0, dpr = 1
+    let nodes: { x: number; y: number; vx: number; vy: number }[] = []
+    let raf = 0
+
+    const build = () => {
+      const rect = canvas.getBoundingClientRect()
+      w = rect.width; h = rect.height
+      dpr = Math.min(window.devicePixelRatio || 1, 2)
+      canvas.width = w * dpr; canvas.height = h * dpr
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      if (nodes.length) return // keep positions across resizes
+      nodes = Array.from({ length: count }, (_, i) => {
+        // deterministic-ish spread so it looks balanced on first paint
+        const gx = (i + 0.5) / count
+        return {
+          x: gx * (w || 800),
+          y: (((i * 37) % 100) / 100) * (h || 80),
+          vx: (((i * 13) % 7) / 7 - 0.5) * 0.34,
+          vy: (((i * 29) % 5) / 5 - 0.5) * 0.28,
+        }
+      })
+    }
+
+    const draw = () => {
+      ctx.clearRect(0, 0, w, h)
+
+      // move + bounce off bounds
+      for (const n of nodes) {
+        n.x += n.vx; n.y += n.vy
+        if (n.x < 0 || n.x > w) n.vx *= -1
+        if (n.y < 0 || n.y > h) n.vy *= -1
+        n.x = Math.max(0, Math.min(w, n.x))
+        n.y = Math.max(0, Math.min(h, n.y))
+      }
+
+      // edges — fade by proximity
+      for (let i = 0; i < nodes.length; i++) {
+        const a = nodes[i]
+        for (let j = i + 1; j < nodes.length; j++) {
+          const b = nodes[j]
+          const dx = a.x - b.x, dy = a.y - b.y
+          const d = Math.hypot(dx, dy)
+          if (d < LINK) {
+            ctx.strokeStyle = `rgba(${GOLD},${(1 - d / LINK) * 0.45})`
+            ctx.lineWidth = 0.8
+            ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke()
+          }
+        }
+      }
+
+      // nodes
+      for (const n of nodes) {
+        ctx.fillStyle = `rgba(${GOLD},0.9)`
+        ctx.beginPath(); ctx.arc(n.x, n.y, 2.2, 0, Math.PI * 2); ctx.fill()
+        // soft halo
+        ctx.fillStyle = `rgba(${GOLD},0.12)`
+        ctx.beginPath(); ctx.arc(n.x, n.y, 5, 0, Math.PI * 2); ctx.fill()
+      }
+    }
+
+    const loop = () => { draw(); raf = requestAnimationFrame(loop) }
+
+    let visible = true
+    const start = () => { if (!reduce && visible && !raf) raf = requestAnimationFrame(loop) }
+    const stop = () => { if (raf) { cancelAnimationFrame(raf); raf = 0 } }
+
+    build()
+    draw()
+
+    const io = new IntersectionObserver(
+      ([e]) => {
+        visible = e.isIntersecting
+        if (visible) start()
+        else stop()
+      },
+      { threshold: 0 }
+    )
+    io.observe(canvas)
+    start()
+
+    const onResize = () => { build(); draw() }
+    window.addEventListener("resize", onResize)
+    return () => { stop(); io.disconnect(); window.removeEventListener("resize", onResize) }
+  }, [count, variant])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      aria-hidden
+      className={`w-full h-full pointer-events-none ${className}`}
+    />
+  )
+}

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

@@ -0,0 +1,83 @@
+import Link from "next/link"
+import { BrandMark } from "@/components/brand-mark"
+import { LatticeField } from "@/components/lattice-field"
+
+const cols = [
+  {
+    heading: "Services",
+    links: [
+      { href: "/assessment",  label: "PQC Assessment" },
+      { href: "/products",    label: "Migration Products" },
+      { href: "/deployment",  label: "Engineer Deployment" },
+      { href: "/#pilot",      label: "90-Day Pilot" },
+    ],
+  },
+  {
+    heading: "Company",
+    links: [
+      { href: "/#clients",    label: "Who We Serve" },
+      { href: "/#offer",      label: "How It Works" },
+      { href: "/#moat",       label: "Why continuous verification" },
+      { href: "/#contact",    label: "Contact" },
+    ],
+  },
+  {
+    heading: "Compliance",
+    links: [
+      { href: "#", label: "NIST PQC Standards" },
+      { href: "#", label: "RBI Framework" },
+      { href: "#", label: "CERT-In Guidelines" },
+      { href: "#", label: "US Federal Mandates" },
+    ],
+  },
+]
+
+export function Footer() {
+  return (
+    <footer className="relative overflow-hidden bg-[var(--gray-950)] text-white">
+      <LatticeField className="opacity-25" />
+      <div className="container-main relative z-10 py-16">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-10">
+
+          {/* Brand */}
+          <div className="sm:col-span-2 md:col-span-1">
+            <Link href="/" className="inline-flex items-center gap-2.5 mb-5">
+              <BrandMark />
+              <span className="text-[15px] font-semibold">Your Company</span>
+            </Link>
+            <p className="font-mono text-[11px] tracking-[0.08em] text-white/50 leading-relaxed">
+              PQC Compliance,<br />Delivered End-to-End
+            </p>
+          </div>
+
+          {cols.map((col) => (
+            <div key={col.heading}>
+              <h4 className="text-[11px] font-semibold tracking-[0.14em] uppercase text-[var(--primary-400)] mb-5">
+                {col.heading}
+              </h4>
+              <ul className="space-y-3 list-none p-0 m-0">
+                {col.links.map((l) => (
+                  <li key={l.label}>
+                    <Link
+                      href={l.href}
+                      className="text-[13px] text-white/45 hover:text-white transition-colors"
+                    >
+                      {l.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        <div className="h-px bg-white/10 my-10" />
+
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 text-[12px] text-white/50">
+          <span>© 2025 Your Company Private Limited. All rights reserved.</span>
+          <span>APAC · Middle East · United States · EU</span>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/data/templates/quantum-verification-story/src/components/harvest-timeline.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Lock, Unlock } from "lucide-react"
+
+/**
+ * "Harvest now, decrypt later" threat visual.
+ * Encrypted data captured today flows into adversary storage, then is
+ * retroactively broken once a cryptographically-relevant quantum computer
+ * arrives ("Q-Day"). Compact, looping, and driven by Ceramic brand tokens.
+ */
+export function HarvestTimeline() {
+  return (
+    <div className="relative rounded-2xl border border-white/10 bg-[var(--deep-950)]/60 p-5 overflow-hidden">
+      {/* axis labels */}
+      <div className="flex items-center justify-between mb-2 font-mono text-[10px] tracking-[0.14em] uppercase whitespace-nowrap">
+        <span className="text-[var(--deep-300)]">Today</span>
+        <span className="text-[var(--primary-400)]">Q-Day</span>
+      </div>
+      <div className="text-center mb-3 font-mono text-[9px] tracking-[0.16em] uppercase text-white/30">
+        intercept &amp; store
+      </div>
+
+      {/* track */}
+      <div className="relative h-12">
+        {/* baseline */}
+        <div className="absolute top-1/2 left-0 right-0 h-px -translate-y-1/2 bg-gradient-to-r from-[var(--deep-400)]/60 via-white/15 to-[var(--primary-400)]/60" />
+
+        {/* left node — locked today */}
+        <div className="absolute top-1/2 left-0 -translate-y-1/2 flex items-center justify-center w-9 h-9 rounded-full bg-[var(--deep-800)] border border-[var(--deep-400)]/50 z-10">
+          <Lock size={14} className="text-[var(--deep-300)]" strokeWidth={2.2} />
+        </div>
+
+        {/* right node — broken at Q-Day */}
+        <div className="absolute top-1/2 right-0 -translate-y-1/2 flex items-center justify-center w-9 h-9 rounded-full bg-[var(--primary-500)]/15 border border-[var(--primary-400)]/60 z-10">
+          <motion.div
+            animate={{ rotate: [0, 0, -12, 0], scale: [1, 1, 1.15, 1] }}
+            transition={{ duration: 3.2, repeat: Infinity, times: [0, 0.55, 0.7, 1], ease: "easeInOut" }}
+          >
+            <Unlock size={14} className="text-[var(--primary-400)]" strokeWidth={2.2} />
+          </motion.div>
+        </div>
+
+        {/* travelling encrypted packets */}
+        {[0, 1, 2].map((i) => (
+          <motion.div
+            key={i}
+            className="absolute top-1/2 w-2 h-2 rounded-[3px] bg-[var(--primary-400)] shadow-[0_0_8px_var(--primary-500)]"
+            style={{ marginTop: -4 }}
+            initial={{ left: "10%", opacity: 0 }}
+            animate={{ left: ["10%", "88%"], opacity: [0, 1, 1, 0] }}
+            transition={{
+              duration: 3.2,
+              repeat: Infinity,
+              delay: i * 1.05,
+              ease: "linear",
+              times: [0, 0.08, 0.92, 1],
+            }}
+          />
+        ))}
+      </div>
+
+      <p className="mt-4 text-[12px] leading-[1.6] text-white/55">
+        Encrypted traffic captured <span className="text-[var(--deep-300)] font-medium">now</span> is
+        stored and broken <span className="text-[var(--primary-400)] font-medium">later</span> — your
+        long-lived secrets are already exposed.
+      </p>
+    </div>
+  )
+}