prism0x2a 0.7.2 → 0.8.0

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

@@ -0,0 +1,719 @@
+"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-5 py-4 text-sm font-mono leading-loose overflow-x-auto">
+        {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})` }}
+      >
+        Try {label} →
+      </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.",
+  },
+];
+
+// ─── 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.8.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 answer to your codebase.
+              </p>
+              <p className="mt-2 text-base text-slate-500 leading-relaxed">
+                Local-first code intelligence. Understand what AI just wrote.
+              </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.8.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>
+
+      {/* ══ 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 three frequencies.
+        </h2>
+
+        <div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <BotCard
+            color="59,130,246"
+            label="BLUE"
+            title="Sessions + Recommendations"
+            description="LLM-driven code investigations. Ask questions about your architecture, get answers, track decisions over time. Like a senior engineer in your terminal."
+            href="/blue"
+          />
+          <BotCard
+            color="245,158,11"
+            label="AMBER"
+            title="Coverage + Registry + Files"
+            description="See what's tested, what's not, and where your business logic lives. File metadata, coverage hot-spots, capability registry — know your blind spots."
+            href="/amber"
+          />
+          <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 that span sessions, coverage, and structure simultaneously."
+            href="/green"
+          />
+        </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>
+
+        <div className="mt-12 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", "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"
+            features={["Everything in Pro", "forge0x2B when GA", "Best value bundle", "Early access pricing"]}
+            cta="Get Spectrum"
+            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>
+  );
+}