prism0x2a 0.7.2 → 0.11.0

package/.next/standalone/components/landing/HeroVisual.tsx

@@ -0,0 +1,171 @@
+export function HeroVisual() {
+  return (
+    <svg
+      viewBox="0 0 620 400"
+      className="w-full max-w-xl"
+      aria-hidden="true"
+      role="img"
+    >
+      <defs>
+        <linearGradient id="prism-fill" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="rgba(148,163,184,0.18)" />
+          <stop offset="40%" stopColor="rgba(226,232,240,0.07)" />
+          <stop offset="100%" stopColor="rgba(99,102,241,0.12)" />
+        </linearGradient>
+
+        <linearGradient id="chaos-fade" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stopColor="rgba(2,6,23,0)" />
+          <stop offset="70%" stopColor="rgba(2,6,23,0.55)" />
+          <stop offset="100%" stopColor="rgba(2,6,23,0.8)" />
+        </linearGradient>
+
+        {/* 5 spectrum rays — one per Blueprint Explorer view */}
+        <linearGradient id="blue-ray" x1="292" y1="118" x2="440" y2="42" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="rgb(59,130,246)" stopOpacity="0.9" />
+          <stop offset="100%" stopColor="rgb(59,130,246)" stopOpacity="0.35" />
+        </linearGradient>
+        <linearGradient id="indigo-ray" x1="292" y1="148" x2="440" y2="120" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="rgb(99,102,241)" stopOpacity="0.85" />
+          <stop offset="100%" stopColor="rgb(99,102,241)" stopOpacity="0.3" />
+        </linearGradient>
+        <linearGradient id="amber-ray" x1="292" y1="200" x2="440" y2="200" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="rgb(245,158,11)" stopOpacity="0.9" />
+          <stop offset="100%" stopColor="rgb(245,158,11)" stopOpacity="0.35" />
+        </linearGradient>
+        <linearGradient id="green-ray" x1="292" y1="248" x2="440" y2="278" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="rgb(16,185,129)" stopOpacity="0.9" />
+          <stop offset="100%" stopColor="rgb(16,185,129)" stopOpacity="0.35" />
+        </linearGradient>
+        <linearGradient id="violet-ray" x1="292" y1="278" x2="440" y2="356" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="rgb(167,139,250)" stopOpacity="0.85" />
+          <stop offset="100%" stopColor="rgb(167,139,250)" stopOpacity="0.3" />
+        </linearGradient>
+
+        <filter id="soft-glow" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="4" result="blur" />
+          <feMerge>
+            <feMergeNode in="blur" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      {/* ── Code chaos (left) ── */}
+      {[
+        { t: "import { analyze } from './engine'",      y: 32  },
+        { t: "TypeError: Cannot read property 'map'",   y: 60  },
+        { t: "  at Object.<anonymous> src/lib:42",      y: 88  },
+        { t: "const deps = await scan(targetPath)",     y: 116 },
+        { t: "// TODO: fix circular ref → api/index",  y: 144 },
+        { t: "export default function Dashboard() {",   y: 172 },
+        { t: "Error: ENOENT no such file or dir",       y: 200 },
+        { t: "  at /src/api/route.ts:17:9",             y: 228 },
+        { t: "import type { Config } from '@/lib'",     y: 256 },
+        { t: "✗ 3 import cycles detected",              y: 284 },
+        { t: "  src/api → lib/db → src/api",            y: 312 },
+        { t: "✗ 14 uncovered branches",                 y: 340 },
+        { t: "  heat: 87.4 · complexity: 12",           y: 368 },
+      ].map(({ t, y }, i) => (
+        <text key={i} x="8" y={y} fontSize="9" fontFamily="monospace"
+          fill={`rgba(148,163,184,${0.42 + (i % 4) * 0.10})`}>
+          {t}
+        </text>
+      ))}
+
+      {/* Fade overlay */}
+      <rect x="0" y="0" width="195" height="400" fill="url(#chaos-fade)" />
+
+      {/* ── Input beam ── */}
+      <line x1="0" y1="200" x2="192" y2="200"
+        stroke="rgba(255,255,255,0.12)" strokeWidth="1.5" strokeDasharray="5 3" />
+
+      {/* ── Prism triangle ──
+            apex: (192, 200)   top-right: (292, 98)   bottom-right: (292, 302) */}
+
+      {/* Glass fill */}
+      <polygon points="192,200 292,98 292,302"
+        fill="url(#prism-fill)"
+        stroke="none" />
+
+      {/* Left face highlight */}
+      <line x1="192" y1="200" x2="292" y2="98"
+        stroke="rgba(226,232,240,0.45)" strokeWidth="1.2" />
+      <line x1="192" y1="200" x2="292" y2="302"
+        stroke="rgba(148,163,184,0.3)" strokeWidth="1.2" />
+
+      {/* Right face */}
+      <line x1="292" y1="98" x2="292" y2="302"
+        stroke="rgba(226,232,240,0.5)" strokeWidth="1.5" />
+
+      {/* Internal refraction hints */}
+      <line x1="226" y1="190" x2="292" y2="148" stroke="rgba(255,255,255,0.05)" strokeWidth="0.7" />
+      <line x1="226" y1="200" x2="292" y2="200" stroke="rgba(255,255,255,0.05)" strokeWidth="0.7" />
+      <line x1="226" y1="210" x2="292" y2="252" stroke="rgba(255,255,255,0.05)" strokeWidth="0.7" />
+
+      {/* 0x2A engraving */}
+      <text x="242" y="203" fontSize="10" fontFamily="monospace"
+        fill="rgba(148,163,184,0.38)" textAnchor="middle" letterSpacing="0.5">
+        0x2A
+      </text>
+
+      {/* ── Output rays (5 — one per Blueprint Explorer view) ── */}
+      <line x1="292" y1="118" x2="440" y2="42"
+        stroke="url(#blue-ray)" strokeWidth="2" filter="url(#soft-glow)" />
+      <line x1="292" y1="148" x2="440" y2="120"
+        stroke="url(#indigo-ray)" strokeWidth="1.8" filter="url(#soft-glow)" />
+      <line x1="292" y1="200" x2="440" y2="200"
+        stroke="url(#amber-ray)" strokeWidth="2.5" filter="url(#soft-glow)" />
+      <line x1="292" y1="248" x2="440" y2="278"
+        stroke="url(#green-ray)" strokeWidth="1.8" filter="url(#soft-glow)" />
+      <line x1="292" y1="278" x2="440" y2="356"
+        stroke="url(#violet-ray)" strokeWidth="2" filter="url(#soft-glow)" />
+
+      {/* ── Output cards (5) ── */}
+
+      {/* BLUE — List View */}
+      <rect x="440" y="10" width="166" height="58" rx="6"
+        fill="rgba(8,16,36,0.92)" stroke="rgba(59,130,246,0.4)" strokeWidth="1" />
+      <rect x="440" y="10" width="166" height="2.5" rx="1.5" fill="rgba(59,130,246,0.65)" />
+      <text x="454" y="32" fontSize="9" fontFamily="monospace"
+        fill="rgb(96,165,250)" fontWeight="bold" letterSpacing="1">BLUE · List View</text>
+      <text x="454" y="48" fontSize="7.5" fontFamily="monospace" fill="rgba(100,116,139,0.8)">Sessions + Blueprint Explorer</text>
+      <text x="454" y="62" fontSize="7" fontFamily="sans-serif" fill="rgba(71,85,105,0.7)">heat · coverage · imports</text>
+
+      {/* INDIGO — Graph View */}
+      <rect x="440" y="96" width="166" height="54" rx="6"
+        fill="rgba(8,16,36,0.92)" stroke="rgba(99,102,241,0.4)" strokeWidth="1" />
+      <rect x="440" y="96" width="166" height="2.5" rx="1.5" fill="rgba(99,102,241,0.6)" />
+      <text x="454" y="116" fontSize="9" fontFamily="monospace"
+        fill="rgb(129,140,248)" fontWeight="bold" letterSpacing="1">Graph View</text>
+      <text x="454" y="131" fontSize="7.5" fontFamily="monospace" fill="rgba(100,116,139,0.8)">import graph · dagre layout</text>
+      <text x="454" y="144" fontSize="7" fontFamily="sans-serif" fill="rgba(71,85,105,0.7)">click node → inspector</text>
+
+      {/* AMBER — Zones View */}
+      <rect x="440" y="174" width="166" height="54" rx="6"
+        fill="rgba(8,16,36,0.92)" stroke="rgba(245,158,11,0.4)" strokeWidth="1" />
+      <rect x="440" y="174" width="166" height="2.5" rx="1.5" fill="rgba(245,158,11,0.65)" />
+      <text x="454" y="194" fontSize="9" fontFamily="monospace"
+        fill="rgb(251,191,36)" fontWeight="bold" letterSpacing="1">AMBER · Zones View</text>
+      <text x="454" y="209" fontSize="7.5" fontFamily="monospace" fill="rgba(100,116,139,0.8)">Coverage · Registry · Files</text>
+      <text x="454" y="222" fontSize="7" fontFamily="sans-serif" fill="rgba(71,85,105,0.7)">grouped by directory zone</text>
+
+      {/* GREEN — Wire View */}
+      <rect x="440" y="252" width="166" height="54" rx="6"
+        fill="rgba(8,16,36,0.92)" stroke="rgba(16,185,129,0.4)" strokeWidth="1" />
+      <rect x="440" y="252" width="166" height="2.5" rx="1.5" fill="rgba(16,185,129,0.65)" />
+      <text x="454" y="272" fontSize="9" fontFamily="monospace"
+        fill="rgb(52,211,153)" fontWeight="bold" letterSpacing="1">GREEN · Wire View</text>
+      <text x="454" y="287" fontSize="7.5" fontFamily="monospace" fill="rgba(100,116,139,0.8)">Insights · Cross-layer</text>
+      <text x="454" y="300" fontSize="7" fontFamily="sans-serif" fill="rgba(71,85,105,0.7)">Next.js layout hierarchy</text>
+
+      {/* VIOLET — Flow View */}
+      <rect x="440" y="330" width="166" height="54" rx="6"
+        fill="rgba(8,16,36,0.92)" stroke="rgba(167,139,250,0.4)" strokeWidth="1" />
+      <rect x="440" y="330" width="166" height="2.5" rx="1.5" fill="rgba(167,139,250,0.6)" />
+      <text x="454" y="350" fontSize="9" fontFamily="monospace"
+        fill="rgb(196,181,253)" fontWeight="bold" letterSpacing="1">Flow View</text>
+      <text x="454" y="365" fontSize="7.5" fontFamily="monospace" fill="rgba(100,116,139,0.8)">page-navigation graph</text>
+      <text x="454" y="378" fontSize="7" fontFamily="sans-serif" fill="rgba(71,85,105,0.7)">routes as nodes · Pro tier</text>
+    </svg>
+  );
+}