[blove]

Summary

Phase 2.A of the website pivot. Inserts seven static AI-startup-landing body sections between the existing <PlaygroundSection /> and <Footer />, plus a vertical page-level gradient implementing the cool → warm → cool emotional arc.

What ships

• Seven new server components under apps/website/app/components/:

  • <Problem /> — "Other grids stall on the read-heavy wedge." (cold-indigo beat — only place using indigo accent)
  • <Solution /> — "Pretable renders the wedge at 60fps." (cyan answer + 3-bullet row)
  • <ReceiptsBand /> — "Receipts, not claims." (port from playground; transparent bg for page gradient)
  • <ComparisonTable /> — semantic <table> 4-adapter scorecard, pretable as FASTEST italic-cyan column
  • <FeatureGrid /> — six receipts: 60fps perf, stream-aware, selection survival, wrapped text, deterministic engine, no-flash hydration
  • <CodeExample /> — shiki@4.0.2 server-rendered LLM-streaming snippet (no client JS for highlighting)
  • <CtaSection /> — "Check the receipts." final ask with anchor up to live grid + GitHub link

• Page-level vertical gradient in globals.css: 4-stop linear-gradient(180deg, var(--pt-bg-page) 0%, #0d1426 35%, #0f1518 60%, var(--pt-bg-page) 100%) with background-attachment: fixed. Cool navy → cooler navy → subtle warm undertone → cool navy. Body sections render against bg-transparent so the gradient bleeds through.

• shiki@4.0.2 added as runtime dep for compile-time syntax highlighting in CodeExample. Top-level await codeToHtml(...) runs once at build time; result is baked into the static prerender.

• --color-text-dim token added to globals.css @theme inline to enable italic dim styling for n/a cells in ComparisonTable.

All seven sections are stateless server components. No new "use client", no new hooks, no client-bundle impact beyond what shiki ships (server-only).

Editorial notes

• "Receipts, not claims." preserved as the through-line. Threaded into ReceiptsBand (literal), ComparisonTable ("cell-by-cell receipts"), FeatureGrid ("six receipts"), and CtaSection ("check the receipts").
• Voice is editorial-confident: every section has eyebrow + Fraunces headline + Inter dek pattern, with one rhetorical pivot per headline and italic-accent emphasis on the pivot word.
• ComparisonTable + ReceiptsBand numbers are placeholder snapshots with provenance comments. TODO(bench-numbers): refresh from latest bench:matrix run markers in code; Phase 2.C / D wires dynamic.

Out of scope (Phase 2.B / 2.C)

• Multi-blob ambient narrative (5+ positioned absolute blobs at scroll-height milestones) — Phase 2.B
• ScrollReveal entrance animations / IntersectionObserver — Phase 2.B
• Visual elements inside FeatureGrid cards (icons, mini-screenshots) — Phase 2.B
• MDX content support — Phase 2.C
• Updating docs/superpowers/specs/2026-04-21-pretable-visual-system-design.md — Phase 2.C
• Real bench-data feeds for ComparisonTable / ReceiptsBand — Phase 2.C / D
• New unit tests — Phase 2.C (when Next.js + RSC test setup lands)

Test plan

• pnpm install --frozen-lockfile — only shiki@4.0.2 added
• pnpm test — green (no test changes; no behavior changes outside website)
• pnpm typecheck — clean across 16 workspaces
• pnpm lint — clean (the two pre-existing layout.tsx warnings persist; not new)
• pnpm format — clean
• pnpm build — website builds; / prerenders; shiki runs at module load with no client cost
• Manual: pnpm --filter @pretable/app-website dev — full landing renders, gradient subtly visible (warm undertone around mid-page), all 9 sections in spec order, code highlighted, CTA scrolls to grid

Known follow-ups (not blocking)

• ComparisonTable has a dead pretableWins: true field on every row, never read by JSX. YAGNI cleanup or wire to a visual signal.
• Eyebrow numbering skips ReceiptsBand intentionally (the band breaks the section spine). Worth a comment in the file if/when ReceiptsBand gets renumbered later.
• border-text-primary used as a top-rule color on ReceiptsBand stats and CtaSection's secondary button — works visually, semantically odd. Cosmetic.