prism0x2a 0.7.2 → 0.11.0

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

@@ -0,0 +1,1003 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { NavBar } from "./NavBar";
+import { Footer } from "./Footer";
+import { HeroVisual } from "./HeroVisual";
+
+// ─── Copy button ────────────────────────────────────────────────────────────
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <button
+      onClick={() => {
+        navigator.clipboard.writeText(text).catch(() => {});
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      }}
+      className="flex-shrink-0 text-xs px-2.5 py-1 rounded transition-all font-mono"
+      style={{
+        background: copied ? "rgba(52,211,153,0.15)" : "rgba(51,65,85,0.4)",
+        color: copied ? "rgb(52,211,153)" : "rgba(148,163,184,0.7)",
+        border: `1px solid ${copied ? "rgba(52,211,153,0.3)" : "rgba(51,65,85,0.4)"}`,
+      }}
+    >
+      {copied ? "✓ copied" : "copy"}
+    </button>
+  );
+}
+
+// ─── Code block ─────────────────────────────────────────────────────────────
+
+function CodeBlock({ lines, copyText }: { lines: string[]; copyText?: string }) {
+  return (
+    <div
+      className="rounded-xl overflow-hidden"
+      style={{
+        background: "rgba(2,6,23,0.8)",
+        border: "1px solid rgba(51,65,85,0.5)",
+        boxShadow: "0 4px 24px rgba(2,6,23,0.3), inset 0 1px 0 rgba(255,255,255,0.04)",
+      }}
+    >
+      <div
+        className="flex items-center justify-between px-4 py-2.5"
+        style={{ borderBottom: "1px solid rgba(51,65,85,0.3)" }}
+      >
+        <div className="flex gap-1.5">
+          <div className="w-2.5 h-2.5 rounded-full" style={{ background: "rgba(239,68,68,0.4)" }} />
+          <div className="w-2.5 h-2.5 rounded-full" style={{ background: "rgba(245,158,11,0.4)" }} />
+          <div className="w-2.5 h-2.5 rounded-full" style={{ background: "rgba(52,211,153,0.4)" }} />
+        </div>
+        {copyText && <CopyButton text={copyText} />}
+      </div>
+      <pre className="px-4 py-3 text-xs font-mono leading-relaxed overflow-x-auto whitespace-pre-wrap break-all">
+        {lines.map((line, i) => (
+          <div key={i}>
+            {line.startsWith("#") ? (
+              <span style={{ color: "rgba(71,85,105,0.7)" }}>{line}</span>
+            ) : (
+              <>
+                <span style={{ color: "rgba(52,211,153,0.6)" }}>$ </span>
+                <span style={{ color: "rgb(203,213,225)" }}>{line}</span>
+              </>
+            )}
+          </div>
+        ))}
+      </pre>
+    </div>
+  );
+}
+
+// ─── Section wrapper ─────────────────────────────────────────────────────────
+
+function Section({
+  id,
+  children,
+  className = "",
+}: {
+  id?: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section id={id} className={`w-full max-w-5xl mx-auto px-6 ${className}`}>
+      {children}
+    </section>
+  );
+}
+
+// ─── Section heading ─────────────────────────────────────────────────────────
+
+function SectionLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-4">
+      {children}
+    </p>
+  );
+}
+
+// ─── Bot card ────────────────────────────────────────────────────────────────
+
+function BotCard({
+  color,
+  label,
+  title,
+  description,
+  href,
+}: {
+  color: string;
+  label: string;
+  title: string;
+  description: string;
+  href: string;
+}) {
+  return (
+    <div
+      className="relative flex flex-col gap-4 p-6 rounded-2xl"
+      style={{
+        background: "#0f172a",
+        border: `1px solid rgba(${color},0.25)`,
+        boxShadow: `0 0 40px rgba(${color},0.04), 0 4px 16px rgba(15,23,42,.1)`,
+      }}
+    >
+      <div
+        className="absolute top-0 left-8 right-8 h-px"
+        style={{ background: `linear-gradient(90deg, transparent, rgba(${color},0.5), transparent)` }}
+      />
+      <div
+        className="text-xs font-bold tracking-widest font-mono"
+        style={{ color: `rgb(${color})` }}
+      >
+        {label}
+      </div>
+      <h3 className="text-base font-semibold text-slate-200">{title}</h3>
+      <p className="text-sm text-slate-500 leading-relaxed">{description}</p>
+      <Link
+        href={href}
+        className="text-xs font-semibold transition-colors mt-auto"
+        style={{ color: `rgb(${color})` }}
+      >
+        See {label} in your code →
+      </Link>
+    </div>
+  );
+}
+
+// ─── Step card ───────────────────────────────────────────────────────────────
+
+function StepCard({
+  n,
+  title,
+  children,
+}: {
+  n: string;
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className="flex flex-col gap-4 p-6 rounded-2xl"
+      style={{
+        background: "#0f172a",
+        border: "1px solid rgba(51,65,85,0.4)",
+      }}
+    >
+      <div
+        className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
+        style={{ background: "rgba(14,165,233,0.15)", color: "rgb(56,189,248)", border: "1px solid rgba(14,165,233,0.3)" }}
+      >
+        {n}
+      </div>
+      <h3 className="text-base font-semibold text-slate-200">{title}</h3>
+      {children}
+    </div>
+  );
+}
+
+// ─── Pricing mini card ────────────────────────────────────────────────────────
+
+function MiniPriceCard({
+  name,
+  price,
+  desc,
+  features,
+  cta,
+  ctaHref,
+  accent,
+  dimCta,
+}: {
+  name: string;
+  price: string;
+  desc: string;
+  features: string[];
+  cta: string;
+  ctaHref: string;
+  accent: string;
+  dimCta?: boolean;
+}) {
+  return (
+    <div
+      className="flex flex-col gap-4 p-6 rounded-2xl"
+      style={{
+        background: "#0f172a",
+        border: `1px solid rgba(${accent},0.2)`,
+      }}
+    >
+      <div>
+        <p className="text-xs font-semibold text-slate-500 uppercase tracking-widest">{name}</p>
+        <p className="text-3xl font-bold text-slate-100 mt-1">{price}</p>
+        <p className="text-xs text-slate-600 mt-0.5">{desc}</p>
+      </div>
+      <ul className="flex flex-col gap-1.5">
+        {features.map((f) => (
+          <li key={f} className="text-xs text-slate-500 flex gap-1.5">
+            <span style={{ color: `rgb(${accent})` }}>✦</span>{f}
+          </li>
+        ))}
+      </ul>
+      {dimCta ? (
+        <div className="text-xs text-center py-2 rounded-lg text-slate-600"
+          style={{ background: "rgba(51,65,85,0.2)", border: "1px solid rgba(51,65,85,0.3)" }}>
+          {cta}
+        </div>
+      ) : (
+        <Link
+          href={ctaHref}
+          target={ctaHref.startsWith("http") ? "_blank" : undefined}
+          rel={ctaHref.startsWith("http") ? "noopener noreferrer" : undefined}
+          className="text-xs text-center py-2.5 rounded-lg font-semibold transition-all"
+          style={{
+            background: `rgba(${accent},0.12)`,
+            color: `rgb(${accent})`,
+            border: `1px solid rgba(${accent},0.3)`,
+          }}
+        >
+          {cta}
+        </Link>
+      )}
+    </div>
+  );
+}
+
+// ─── FAQ item ─────────────────────────────────────────────────────────────────
+
+const FAQ_ITEMS = [
+  {
+    q: "Is prism0x2A really local-first?",
+    a: "Yes. All code analysis happens on your machine. We never see your codebase, your prompts, or your API key. The only network calls are: (a) license validation to Lemonsqueezy (every 30 days), and (b) your own LLM calls using YOUR API key.",
+  },
+  {
+    q: "What's the LOC limit on Free?",
+    a: "50,000 lines of source code per project. Excludes node_modules, generated code, and build artifacts. Above 50k, Free shows partial analysis — Pro removes the limit entirely.",
+  },
+  {
+    q: "Do I need to bring my own LLM API key?",
+    a: "Yes. prism0x2A uses YOUR Anthropic API key (or any compatible provider). This means you control your costs and your data. Free tier doesn't use LLMs at all — static analysis only.",
+  },
+  {
+    q: "What's the difference between prism0x2A and Cursor/Copilot?",
+    a: "Cursor/Copilot generate code. prism0x2A makes you understand code (yours or AI-generated). Complementary, not competing. Use them together — let Cursor write it, let prism0x2A make you own it.",
+  },
+  {
+    q: "Why hex names?",
+    a: "0x2A is hex for 42. 0x2B is hex for 43 — and yes, '2B or not 2B' is intentional. Some easter eggs write themselves.",
+  },
+  {
+    q: "Monorepo support?",
+    a: "Yes, Pro tier. pnpm/npm/yarn workspaces, Lerna, Nx, and Turborepo are auto-detected. Each workspace gets its own scan context; aggregate insights span the full monorepo.",
+  },
+  {
+    q: "Can I cancel anytime?",
+    a: "Yes. Subscriptions are monthly or yearly. Cancel via your Lemonsqueezy customer portal. Your dashboard works for the rest of your billing period, then reverts to Free tier.",
+  },
+  {
+    q: "Is there an enterprise plan?",
+    a: "Yes. Custom pricing, self-hosted option, SLA. Contact us via GitHub or the Lemonsqueezy portal.",
+  },
+  {
+    q: "What's the Blueprint Explorer?",
+    a: "Five interactive views of your codebase: List (files ranked by heat/coverage), Graph (import graph with dagre layout), Zones (grouped by directory), Wire (Next.js layout hierarchy), and Flow (page-navigation graph). All auto-generated from your code. Live-updated on every rescan. Pro tier.",
+  },
+  {
+    q: "Can I use this on a 1M-LOC codebase?",
+    a: "Yes, Pro tier removes the LOC limit entirely. Pre-launch benchmark: ~5s initial scan for 1,000 files, <500ms incremental updates using hasSourceChanged() detection. Monorepo workspaces are scanned in parallel.",
+  },
+  {
+    q: "What's Architect Mode?",
+    a: "Ask your codebase questions using your own LLM API key. Architect Mode uses your blueprint data to answer questions, explain modules, and suggest refactors — grounded in your actual architecture, not generic AI guesses. Like having a senior engineer who has read every file. Rolling out in Pro tier (v0.11+).",
+  },
+];
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+export function LandingPage() {
+  return (
+    <div className="flex flex-col min-h-screen" style={{ background: "#020617" }}>
+      <NavBar />
+
+      {/* ══ HERO ═══════════════════════════════════════════════════════════ */}
+      <section className="w-full min-h-screen flex items-center pt-14">
+        <div className="w-full max-w-5xl mx-auto px-6 py-20 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+
+          {/* Left column */}
+          <div className="flex flex-col gap-7">
+            {/* Badge */}
+            <div className="inline-flex self-start items-center gap-2 text-xs px-3 py-1 rounded-full"
+              style={{ background: "rgba(14,165,233,0.1)", color: "rgb(56,189,248)", border: "1px solid rgba(14,165,233,0.25)" }}>
+              <span className="w-1.5 h-1.5 rounded-full bg-sky-400 inline-block animate-pulse" />
+              v{process.env.NEXT_PUBLIC_PRISM_VERSION ?? "0.11.0"} · now available
+            </div>
+
+            {/* Headline */}
+            <div>
+              <h1 className="text-5xl sm:text-6xl font-bold tracking-tight text-slate-100 leading-none">
+                prism<span className="font-mono text-sky-500">0x2A</span>
+              </h1>
+              <p className="mt-4 text-2xl font-medium text-slate-300 leading-snug">
+                The architecture map your codebase actually has.
+              </p>
+              <p className="mt-2 text-base text-slate-500 leading-relaxed">
+                Auto-generated. Live-updated. Local-first.
+              </p>
+              <p className="mt-1 text-sm font-mono leading-relaxed" style={{ color: "rgba(167,139,250,0.7)" }}>
+                Like LeanIX, but generated from your code.
+              </p>
+            </div>
+
+            {/* Quickstart (primary CTA) */}
+            <div id="quickstart" className="flex flex-col gap-2">
+              <p className="text-xs text-slate-600 font-mono uppercase tracking-widest">
+                Install in 10 seconds
+              </p>
+              <CodeBlock
+                lines={["npm install --save-dev prism0x2a", "npx prism dev"]}
+                copyText={"npm install --save-dev prism0x2a"}
+              />
+            </div>
+
+            {/* CTAs */}
+            <div className="flex flex-wrap items-center gap-3">
+              <Link
+                href="#quickstart"
+                className="px-5 py-2.5 rounded-xl text-sm font-semibold transition-all"
+                style={{ background: "rgb(14,165,233)", color: "#020617" }}
+              >
+                Get Started Free →
+              </Link>
+              <Link
+                href="/pricing"
+                className="px-5 py-2.5 rounded-xl text-sm font-semibold transition-all"
+                style={{
+                  background: "transparent",
+                  color: "rgb(148,163,184)",
+                  border: "1px solid rgba(51,65,85,0.5)",
+                }}
+              >
+                View Pricing →
+              </Link>
+            </div>
+
+            {/* Trust signals */}
+            <p className="text-xs text-slate-700 font-mono">
+              v{process.env.NEXT_PUBLIC_PRISM_VERSION ?? "0.11.0"} · MIT Engine + Source-Available Dashboard · €0 to start
+            </p>
+          </div>
+
+          {/* Right column: hero visual */}
+          <div className="flex items-center justify-center">
+            <HeroVisual />
+          </div>
+        </div>
+      </section>
+
+      {/* ══ BLUEPRINT EXPLORER SHOWCASE ════════════════════════════════════ */}
+      <Section id="explorer" className="py-24">
+        <SectionLabel>Blueprint Explorer</SectionLabel>
+        <h2 className="text-3xl font-bold text-slate-100 tracking-tight">
+          Your codebase, mapped. Five ways.
+        </h2>
+        <p className="mt-3 text-slate-500 max-w-xl leading-relaxed">
+          Pro tier unlocks 5 interactive views into your architecture — generated fresh from your code on every scan.
+        </p>
+
+        <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {[
+            {
+              icon: "≡",
+              view: "List View",
+              color: "59,130,246",
+              desc: "Every file ranked by heat score, coverage, and import density. Sort, filter, inspect.",
+            },
+            {
+              icon: "⬡",
+              view: "Graph View",
+              color: "99,102,241",
+              desc: "Interactive import graph with dagre layout. Cycles glow red. Click any node to inspect.",
+            },
+            {
+              icon: "⊞",
+              view: "Zones View",
+              color: "245,158,11",
+              desc: "Files grouped by directory zone. Heat-sorted cards — spot your riskiest areas at a glance.",
+            },
+            {
+              icon: "◫",
+              view: "Wire View",
+              color: "16,185,129",
+              desc: "Next.js layout hierarchy as nested blocks. See how your route tree nests at a glance.",
+            },
+            {
+              icon: "→",
+              view: "Flow View",
+              color: "167,139,250",
+              desc: "Page-navigation graph. Routes as nodes, links as edges. Understand user journeys in code.",
+            },
+            {
+              icon: "✦",
+              view: "Pro · €39/mo",
+              color: "148,163,184",
+              desc: "All 5 views + unlimited LOC + monorepo + LLM insights. Upgrade once, keep clarity forever.",
+              isCta: true,
+            },
+          ].map(({ icon, view, color, desc, isCta }) => (
+            <div
+              key={view}
+              className="flex flex-col gap-3 p-5 rounded-2xl"
+              style={{
+                background: isCta ? "rgba(14,165,233,0.05)" : "#0f172a",
+                border: isCta ? "1px solid rgba(14,165,233,0.25)" : `1px solid rgba(${color},0.2)`,
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <span
+                  className="w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold font-mono flex-shrink-0"
+                  style={{ background: `rgba(${color},0.12)`, color: `rgb(${color})` }}
+                >
+                  {icon}
+                </span>
+                <span className="text-sm font-semibold text-slate-200">{view}</span>
+              </div>
+              <p className="text-xs text-slate-500 leading-relaxed">{desc}</p>
+              {isCta && (
+                <Link
+                  href="/pricing"
+                  className="text-xs font-semibold mt-auto"
+                  style={{ color: "rgb(56,189,248)" }}
+                >
+                  Upgrade to Pro →
+                </Link>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-8 flex flex-wrap gap-3">
+          <Link
+            href="/pricing"
+            className="px-5 py-2.5 rounded-xl text-sm font-semibold"
+            style={{ background: "rgba(59,130,246,0.15)", color: "rgb(96,165,250)", border: "1px solid rgba(59,130,246,0.3)" }}
+          >
+            Upgrade to Pro — €39/mo →
+          </Link>
+          <Link
+            href="#quickstart"
+            className="px-5 py-2.5 rounded-xl text-sm font-semibold"
+            style={{ background: "transparent", color: "rgb(148,163,184)", border: "1px solid rgba(51,65,85,0.4)" }}
+          >
+            Try Free — limited features
+          </Link>
+        </div>
+      </Section>
+
+      {/* ══ ARCHITECT MODE SHOWCASE ════════════════════════════════════════ */}
+      <Section id="architect" className="py-24">
+        <SectionLabel>Architect Mode</SectionLabel>
+        <h2 className="text-3xl font-bold text-slate-100 tracking-tight">
+          Ask your codebase anything.
+        </h2>
+        <p className="mt-3 text-slate-500 max-w-xl leading-relaxed">
+          Architect Mode uses your blueprint data + your LLM key to answer questions, explain modules, and suggest refactors — grounded in your actual code structure.
+        </p>
+
+        <div className="mt-10 grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
+          {/* Chat mockup */}
+          <div
+            className="rounded-2xl overflow-hidden"
+            style={{ background: "#0f172a", border: "1px solid rgba(167,139,250,0.2)" }}
+          >
+            <div
+              className="flex items-center gap-2 px-4 py-3 border-b"
+              style={{ borderColor: "rgba(51,65,85,0.4)", background: "rgba(8,12,24,0.6)" }}
+            >
+              <span className="text-[10px] font-mono font-bold tracking-widest" style={{ color: "rgb(167,139,250)" }}>ARCHITECT</span>
+              <span className="text-[10px] text-slate-600 font-mono">· Pro tier</span>
+            </div>
+            <div className="flex flex-col gap-3 p-4">
+              {/* User message */}
+              <div className="flex justify-end">
+                <div
+                  className="max-w-xs rounded-xl rounded-tr-sm px-4 py-2.5 text-xs text-slate-200"
+                  style={{ background: "rgba(59,130,246,0.15)", border: "1px solid rgba(59,130,246,0.25)" }}
+                >
+                  Where should I add the new user-permission system?
+                </div>
+              </div>
+              {/* AI response */}
+              <div className="flex gap-2 items-start">
+                <span
+                  className="w-5 h-5 rounded flex items-center justify-center text-[9px] font-bold flex-shrink-0 mt-0.5"
+                  style={{ background: "rgba(167,139,250,0.15)", color: "rgb(167,139,250)" }}
+                >✦</span>
+                <div
+                  className="rounded-xl rounded-tl-sm px-4 py-2.5 text-xs text-slate-300 leading-relaxed"
+                  style={{ background: "rgba(15,23,42,0.8)", border: "1px solid rgba(51,65,85,0.4)" }}
+                >
+                  <p>Based on your blueprint, I&rsquo;d recommend extending <span className="font-mono text-violet-300">lib/auth/middleware.ts</span> alongside the existing <span className="font-mono text-violet-300">ROLE_PERMISSIONS</span> map in <span className="font-mono text-violet-300">lib/auth/roles.ts</span>.</p>
+                  <p className="mt-2">Your <span className="font-mono text-sky-300">auth/</span> zone has 3 files, 0 import cycles, and 82% coverage — a safe extension point. Avoid touching <span className="font-mono text-orange-300">api/users/route.ts</span> directly (heat: 87.4, cyclic).</p>
+                </div>
+              </div>
+              {/* Input */}
+              <div
+                className="flex items-center gap-2 mt-2 rounded-xl px-3 py-2"
+                style={{ background: "rgba(2,6,23,0.6)", border: "1px solid rgba(51,65,85,0.4)" }}
+              >
+                <span className="text-xs text-slate-600 flex-1 font-mono">Ask anything about your codebase…</span>
+                <span
+                  className="text-[10px] px-2 py-0.5 rounded font-semibold"
+                  style={{ background: "rgba(167,139,250,0.15)", color: "rgb(167,139,250)" }}
+                >Send</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Feature list */}
+          <div className="flex flex-col gap-4">
+            {[
+              {
+                icon: "💬",
+                title: "Ask Architect",
+                desc: "Natural-language questions grounded in your blueprint. References real files and hot-zones.",
+              },
+              {
+                icon: "🔍",
+                title: "Explain Module",
+                desc: "Deep-dive on any file — doc summary, symbol list, incoming/outgoing deps, refactor risk.",
+              },
+              {
+                icon: "⚡",
+                title: "Suggest Refactors",
+                desc: "Auto-scan for cycles, coverage gaps, and hot-spots. Prioritised by severity.",
+              },
+              {
+                icon: "🔑",
+                title: "Your key, your data",
+                desc: "Bring your own Anthropic key. No data leaves your machine. You control the cost.",
+              },
+            ].map(({ icon, title, desc }) => (
+              <div
+                key={title}
+                className="flex gap-4 items-start p-4 rounded-xl"
+                style={{ background: "#0f172a", border: "1px solid rgba(51,65,85,0.35)" }}
+              >
+                <span className="text-xl flex-shrink-0">{icon}</span>
+                <div>
+                  <h3 className="text-sm font-semibold text-slate-200">{title}</h3>
+                  <p className="text-xs text-slate-500 mt-0.5 leading-relaxed">{desc}</p>
+                </div>
+              </div>
+            ))}
+
+            <div
+              className="flex items-center gap-3 px-4 py-3 rounded-xl mt-2"
+              style={{ background: "rgba(167,139,250,0.06)", border: "1px solid rgba(167,139,250,0.2)" }}
+            >
+              <span className="text-xs font-mono" style={{ color: "rgb(167,139,250)" }}>✦</span>
+              <p className="text-xs text-slate-400">
+                <span className="font-semibold text-violet-300">Coming in Pro tier (v0.11+)</span> — Architect Mode is rolling out now. Blueprint must be generated first.
+              </p>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      {/* ══ PROBLEM ════════════════════════════════════════════════════════ */}
+      <Section className="py-24">
+        <SectionLabel>The problem</SectionLabel>
+        <h2 className="text-3xl font-bold text-slate-100 tracking-tight max-w-xl">
+          Your codebase is bigger than it was.
+        </h2>
+        <p className="mt-4 text-slate-500 max-w-lg leading-relaxed">
+          AI-generated code is great. Understanding it is harder.
+          prism0x2A makes your codebase legible to you again.
+        </p>
+
+        <div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-4">
+          {[
+            {
+              icon: "⌨️",
+              headline: "Cursor writes it.",
+              body: "You ship fast. Features land. The AI keeps up with your ideas.",
+            },
+            {
+              icon: "🤖",
+              headline: "Claude reviews it.",
+              body: "You get the diff, the explanation, the confidence to merge.",
+            },
+            {
+              icon: "✦",
+              headline: "prism0x2A makes you own it.",
+              body: "Coverage gaps, import cycles, cross-layer context — you actually understand what's in production.",
+              accent: true,
+            },
+          ].map(({ icon, headline, body, accent }) => (
+            <div
+              key={headline}
+              className="flex flex-col gap-4 p-6 rounded-2xl"
+              style={{
+                background: accent ? "rgba(14,165,233,0.06)" : "#0f172a",
+                border: accent ? "1px solid rgba(14,165,233,0.2)" : "1px solid rgba(51,65,85,0.4)",
+              }}
+            >
+              <span className="text-2xl">{icon}</span>
+              <h3 className="text-base font-semibold text-slate-200">{headline}</h3>
+              <p className="text-sm text-slate-500 leading-relaxed">{body}</p>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      {/* ══ HOW IT WORKS ═══════════════════════════════════════════════════ */}
+      <Section id="features" className="py-24">
+        <SectionLabel>How it works</SectionLabel>
+        <h2 className="text-3xl font-bold text-slate-100 tracking-tight">
+          Three steps to clarity.
+        </h2>
+
+        <div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <StepCard n="1" title="Install in seconds">
+            <CodeBlock
+              lines={["npm install --save-dev prism0x2a"]}
+              copyText="npm install --save-dev prism0x2a"
+            />
+            <p className="text-sm text-slate-500">No cloud. No account. One package.</p>
+          </StepCard>
+
+          <StepCard n="2" title="Scan your codebase">
+            <CodeBlock lines={["npx prism dev"]} copyText="npx prism dev" />
+            <p className="text-sm text-slate-500">
+              Dashboard opens at localhost:3001. Cycles, coverage, imports — instantly.
+            </p>
+          </StepCard>
+
+          <StepCard n="3" title="Get answers">
+            <div
+              className="rounded-lg px-4 py-3 text-xs font-mono text-slate-400"
+              style={{ background: "rgba(2,6,23,0.6)", border: "1px solid rgba(51,65,85,0.4)" }}
+            >
+              <div style={{ color: "rgb(52,211,153)" }}>✓ 0 import cycles</div>
+              <div style={{ color: "rgb(251,191,36)" }}>⚠ 14 uncovered branches</div>
+              <div style={{ color: "rgb(96,165,250)" }}>✦ 3 AI insights ready</div>
+            </div>
+            <p className="text-sm text-slate-500">
+              Activate Pro for LLM-powered insights, monorepo support, and custom queries.
+            </p>
+          </StepCard>
+        </div>
+
+        <p className="mt-8 text-sm text-slate-600 text-center font-mono">
+          All local. All offline-capable. No data leaves your machine.
+        </p>
+      </Section>
+
+      {/* ══ FEATURES (Bot Family) ══════════════════════════════════════════ */}
+      <Section className="py-24">
+        <SectionLabel>The full spectrum</SectionLabel>
+        <h2 className="text-3xl font-bold text-slate-100 tracking-tight">
+          Code intelligence, all frequencies.
+        </h2>
+        <p className="mt-3 text-slate-500 max-w-lg leading-relaxed">
+          BLUE leads with Blueprint Explorer — architecture mapping that replaces tools like LeanIX for codebases.
+        </p>
+
+        <div className="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <BotCard
+            color="59,130,246"
+            label="BLUE"
+            title="Sessions + Blueprint Explorer"
+            description="LLM-driven code investigations + 5-view architecture mapping (List, Graph, Zones, Wire, Flow). Blueprint Explorer is Pro-tier."
+            href="#explorer"
+          />
+          <BotCard
+            color="245,158,11"
+            label="AMBER"
+            title="Coverage + Files + Registry"
+            description="See what's tested, what's not, and where your business logic lives. Coverage hot-spots, capability registry, file metadata."
+            href="#quickstart"
+          />
+          <BotCard
+            color="16,185,129"
+            label="GREEN"
+            title="Insights + Cross-Layer + Queries"
+            description="Auto-discover patterns across your codebase. Write custom queries. Get cross-layer insights spanning sessions, coverage, and structure."
+            href="#quickstart"
+          />
+          <div
+            className="relative flex flex-col gap-4 p-6 rounded-2xl"
+            style={{
+              background: "rgba(167,139,250,0.04)",
+              border: "1px solid rgba(167,139,250,0.25)",
+              boxShadow: "0 0 40px rgba(167,139,250,0.04)",
+            }}
+          >
+            <div
+              className="absolute top-0 left-8 right-8 h-px"
+              style={{ background: "linear-gradient(90deg, transparent, rgba(167,139,250,0.5), transparent)" }}
+            />
+            <div className="text-xs font-bold tracking-widest font-mono" style={{ color: "rgb(167,139,250)" }}>
+              BLUEPRINT EXPLORER
+            </div>
+            <h3 className="text-base font-semibold text-slate-200">5 Architecture Views</h3>
+            <p className="text-sm text-slate-500 leading-relaxed">
+              List · Graph · Zones · Wire · Flow. Generated from your code. Live-updated on every rescan.
+            </p>
+            <p className="text-xs font-mono mt-auto" style={{ color: "rgba(167,139,250,0.6)" }}>Pro tier — €39/mo</p>
+            <Link href="/pricing" className="text-xs font-semibold mt-1" style={{ color: "rgb(167,139,250)" }}>
+              Upgrade to Pro →
+            </Link>
+          </div>
+        </div>
+      </Section>
+
+      {/* ══ forge0x2B COMING SOON ══════════════════════════════════════════ */}
+      <Section className="py-24">
+        <div
+          className="relative rounded-2xl p-8 sm:p-12 overflow-hidden"
+          style={{
+            background: "linear-gradient(135deg, rgba(204,102,51,0.06), rgba(232,72,153,0.04))",
+            border: "1px solid rgba(204,102,51,0.2)",
+          }}
+        >
+          <div
+            className="absolute top-0 left-1/4 right-1/4 h-px"
+            style={{ background: "linear-gradient(90deg, transparent, rgba(204,102,51,0.5), transparent)" }}
+          />
+
+          <div className="flex flex-col sm:flex-row gap-8 items-start">
+            <div className="flex flex-col gap-5 flex-1">
+              <div>
+                <span
+                  className="text-xs font-semibold px-2.5 py-1 rounded-full"
+                  style={{ background: "rgba(204,102,51,0.15)", color: "rgb(251,146,60)", border: "1px solid rgba(204,102,51,0.3)" }}
+                >
+                  Early Access — Coming Soon
+                </span>
+              </div>
+              <h2 className="text-3xl font-bold text-slate-100 tracking-tight">
+                Coming Soon: forge<span className="font-mono">0x2B</span>
+              </h2>
+              <p className="text-lg text-slate-400 leading-relaxed">
+                An architect AND a marketing department, in a box.
+              </p>
+              <p className="text-sm text-slate-500 leading-relaxed italic font-mono">
+                2B or not 2B.
+              </p>
+
+              <ul className="flex flex-col gap-2.5">
+                {[
+                  "Auto-generated release notes from your prism0x2A sessions",
+                  "Blog posts from technical changes",
+                  "Social copy from feature ships",
+                  "Internal updates from code-health trends",
+                ].map((item) => (
+                  <li key={item} className="flex items-start gap-2 text-sm text-slate-400">
+                    <span style={{ color: "rgb(251,146,60)" }}>→</span>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+
+              <p className="text-sm text-slate-500 leading-relaxed">
+                Use prism0x2A to understand your code. Use forge0x2B to tell the story.
+              </p>
+
+              <Link
+                href="https://github.com/dadenjo/forge0x2B"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="self-start text-sm font-semibold px-4 py-2.5 rounded-xl transition-all"
+                style={{
+                  background: "rgba(204,102,51,0.12)",
+                  color: "rgb(251,146,60)",
+                  border: "1px solid rgba(204,102,51,0.3)",
+                }}
+              >
+                Watch on GitHub →
+              </Link>
+            </div>
+
+            {/* Bundle teaser */}
+            <div
+              className="flex-shrink-0 w-full sm:w-64 rounded-xl p-5 flex flex-col gap-4"
+              style={{
+                background: "rgba(8,16,36,0.6)",
+                border: "1px solid rgba(167,139,250,0.25)",
+              }}
+            >
+              <div>
+                <p className="text-xs font-semibold text-violet-400 uppercase tracking-widest">Spectrum 0x55 Bundle</p>
+                <p className="text-2xl font-bold text-slate-100 mt-1">€49<span className="text-sm font-normal text-slate-500">/mo</span></p>
+                <p className="text-xs text-slate-600 mt-0.5">save €19/mo vs separate</p>
+              </div>
+              <ul className="flex flex-col gap-1.5 text-xs text-slate-500">
+                <li className="flex gap-1.5"><span className="text-violet-400">✦</span>prism0x2A Pro — now</li>
+                <li className="flex gap-1.5"><span className="text-orange-400">✦</span>forge0x2B — unlocks at GA</li>
+                <li className="flex gap-1.5"><span className="text-emerald-400">✦</span>Early access pricing locked</li>
+              </ul>
+              <Link
+                href="https://prism0x2a.lemonsqueezy.com/checkout/buy/64d25b45-7c4a-410d-b4aa-7504f98ab5f7"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-xs text-center py-2 rounded-lg font-semibold"
+                style={{
+                  background: "rgba(99,102,241,0.15)",
+                  color: "rgb(167,139,250)",
+                  border: "1px solid rgba(167,139,250,0.3)",
+                }}
+              >
+                Get Spectrum 0x55 →
+              </Link>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      {/* ══ PRICING SNIPPET ════════════════════════════════════════════════ */}
+      <Section className="py-24">
+        <SectionLabel>Pricing</SectionLabel>
+        <h2 className="text-3xl font-bold text-slate-100 tracking-tight">
+          Pricing that respects your wallet.
+        </h2>
+        <p className="mt-2 text-slate-500">
+          If you can afford Cursor or Claude Max, you can afford to know what your code does.
+        </p>
+
+        {/* Spectrum 0x55 featured banner */}
+        <div
+          className="mt-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 px-5 py-4 rounded-xl"
+          style={{
+            background: "linear-gradient(90deg, rgba(99,102,241,0.08), rgba(167,139,250,0.05))",
+            border: "1px solid rgba(167,139,250,0.3)",
+          }}
+        >
+          <div className="flex items-center gap-3">
+            <span className="text-xl">✦</span>
+            <div>
+              <p className="text-sm font-semibold text-violet-300">Spectrum 0x55 Bundle — Best Value</p>
+              <p className="text-xs text-slate-500 mt-0.5">prism0x2A Pro + forge0x2B Pro · save €19/mo vs separate</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="text-right">
+              <p className="text-2xl font-bold text-slate-100">€49<span className="text-sm font-normal text-slate-500">/mo</span></p>
+              <p className="text-[10px] text-slate-600 line-through">€68/mo separate</p>
+            </div>
+            <Link
+              href="https://prism0x2a.lemonsqueezy.com/checkout/buy/64d25b45-7c4a-410d-b4aa-7504f98ab5f7"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs font-semibold px-4 py-2 rounded-lg whitespace-nowrap"
+              style={{ background: "rgba(167,139,250,0.15)", color: "rgb(167,139,250)", border: "1px solid rgba(167,139,250,0.3)" }}
+            >
+              Get Spectrum →
+            </Link>
+          </div>
+        </div>
+
+        <div className="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <MiniPriceCard
+            name="Free"
+            price="€0"
+            desc="forever"
+            features={["Up to 50k LOC", "Static analysis", "Import cycles", "1 project"]}
+            cta="Start Free"
+            ctaHref="#quickstart"
+            accent="148,163,184"
+          />
+          <MiniPriceCard
+            name="Pro"
+            price="€39"
+            desc="/mo · save 17% yearly"
+            features={["Unlimited LOC", "Blueprint Explorer (5 views)", "LLM insights", "Monorepo support", "Custom queries"]}
+            cta="Get Pro"
+            ctaHref="https://prism0x2a.lemonsqueezy.com/checkout/buy/a9097951-5d54-438c-89ef-3e093d88f6c6"
+            accent="59,130,246"
+          />
+          <MiniPriceCard
+            name="Spectrum 0x55"
+            price="€49"
+            desc="/mo · Pro + forge0x2B · save €19"
+            features={["Everything in Pro", "forge0x2B Pro when GA", "Best value bundle", "Early access price locked"]}
+            cta="Get Spectrum 0x55"
+            ctaHref="https://prism0x2a.lemonsqueezy.com/checkout/buy/64d25b45-7c4a-410d-b4aa-7504f98ab5f7"
+            accent="167,139,250"
+          />
+        </div>
+
+        <div className="mt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
+          <Link href="/pricing" className="text-sm text-indigo-400 hover:text-indigo-300 transition-colors">
+            View full pricing + Team plan →
+          </Link>
+          <div className="flex items-center gap-4 text-xs text-slate-700">
+            <span>Powered by Lemon Squeezy</span>
+            <span>EU VAT compliant</span>
+            <span>Cancel anytime</span>
+          </div>
+        </div>
+      </Section>
+
+      {/* ══ FAQ ════════════════════════════════════════════════════════════ */}
+      <Section className="py-24">
+        <SectionLabel>FAQ</SectionLabel>
+        <h2 className="text-3xl font-bold text-slate-100 tracking-tight mb-8">
+          Frequently asked questions.
+        </h2>
+        <div className="flex flex-col gap-3 max-w-2xl">
+          {FAQ_ITEMS.map(({ q, a }) => (
+            <details
+              key={q}
+              className="group rounded-xl px-6 py-4"
+              style={{
+                background: "#0f172a",
+                border: "1px solid rgba(51,65,85,0.4)",
+              }}
+            >
+              <summary className="text-sm font-medium text-slate-300 cursor-pointer list-none flex items-center justify-between gap-3">
+                {q}
+                <span className="text-slate-600 group-open:rotate-180 transition-transform flex-shrink-0 text-xs">
+                  ▼
+                </span>
+              </summary>
+              <p className="mt-3 text-sm text-slate-500 leading-relaxed">{a}</p>
+            </details>
+          ))}
+        </div>
+      </Section>
+
+      {/* ══ FINAL CTA ══════════════════════════════════════════════════════ */}
+      <Section className="py-24">
+        <div
+          className="rounded-2xl p-10 sm:p-16 text-center flex flex-col items-center gap-8"
+          style={{
+            background: "linear-gradient(135deg, rgba(14,165,233,0.06), rgba(99,102,241,0.04))",
+            border: "1px solid rgba(14,165,233,0.15)",
+          }}
+        >
+          <h2 className="text-3xl sm:text-4xl font-bold text-slate-100 tracking-tight">
+            Get started in 60 seconds.
+          </h2>
+          <div className="w-full max-w-lg">
+            <CodeBlock
+              lines={[
+                "# In your TypeScript / React project root:",
+                "npm install --save-dev prism0x2a",
+                "npx prism init",
+                "npm run prism",
+              ]}
+              copyText={"npm install --save-dev prism0x2a"}
+            />
+            <p className="mt-3 text-xs text-slate-600 font-mono">
+              Dashboard opens at http://localhost:3001 scanning your project.
+            </p>
+          </div>
+
+          <div className="flex flex-wrap justify-center gap-4">
+            <Link
+              href="https://github.com/dadenjo/prism0x2A"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm font-medium text-slate-400 hover:text-slate-200 transition-colors"
+            >
+              Read the docs →
+            </Link>
+            <Link
+              href="https://github.com/dadenjo/prism0x2A"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm font-medium text-slate-400 hover:text-slate-200 transition-colors"
+            >
+              View on GitHub →
+            </Link>
+          </div>
+
+          <p className="text-xs text-slate-700 font-mono">
+            Built on a 42nd birthday. 0x2A = 42. The answer to all questions.
+          </p>
+        </div>
+      </Section>
+
+      <Footer />
+    </div>
+  );
+}