feat(website): design-program follow-ups — showcase rails, Angular proof cell, closer order (#919)

* docs(website): follow-ups spec

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* feat(website): design-program follow-ups

Showcase intros join the rail grammar (the last centered kickers);
the ProofStrip regains its Angular cell — revival condition met, npm
@latest publishes ^20||^21||^22, value derived from angular-support.mjs;
RecentArticles moves above the dark FinalCTA so the closer closes; the
gitignored-but-tracked tsbuildinfo is untracked.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: blove

apps/website/src/app/page.tsx

@@ -126,8 +126,8 @@ export default async function HomePage() {
       <Promises />
       <ProofStrip />
       <HomeFAQ />
-      <FinalCTA variant="dark" />
       <RecentArticles />
+      <FinalCTA variant="dark" />
     </>
   );
 }

apps/website/src/components/landing/ProofStrip.spec.tsx

@@ -3,9 +3,9 @@ import { describe, it, expect } from 'vitest';
 import { ProofStrip, PROOF_CELLS } from './ProofStrip';
 
 describe('ProofStrip', () => {
-  it('renders three cells, each with a source link', () => {
+  it('renders four cells, each with a source link', () => {
     render(<ProofStrip />);
-    expect(PROOF_CELLS).toHaveLength(3);
+    expect(PROOF_CELLS).toHaveLength(4);
     for (const cell of PROOF_CELLS) {
       expect(screen.getByText(cell.caption)).toBeTruthy();
       const link = screen.getByRole('link', { name: cell.sourceLabel });

apps/website/src/components/landing/ProofStrip.tsx

@@ -1,6 +1,7 @@
 import { Container } from '../ui/Container';
 import { Section } from '../ui/Section';
 import { SectionHeader } from '../ui/SectionHeader';
+import { WEBSITE_SUPPORTED_ANGULAR_MAJORS } from '../pricing/angular-support.mjs';
 
 interface ProofCell {
   /** Big Garamond numeral, or null when the cell renders a live badge. */
@@ -41,6 +42,14 @@ export const PROOF_CELLS: readonly ProofCell[] = [
     sourceLabel: 'hvtracker.net/agents/threadplane',
     sourceHref: 'https://hvtracker.net/agents/threadplane/',
   },
+  {
+    // Revived per the homepage design spec's condition: npm @latest publishes
+    // ^20 || ^21 || ^22 (verified 2026-08-31). Derived, never hardcoded.
+    value: `${WEBSITE_SUPPORTED_ANGULAR_MAJORS[0]}–${WEBSITE_SUPPORTED_ANGULAR_MAJORS.at(-1)}`,
+    caption: 'Angular majors supported, CI-tested',
+    sourceLabel: 'npmjs.com/@threadplane/langgraph',
+    sourceHref: 'https://www.npmjs.com/package/@threadplane/langgraph',
+  },
 ];
 
 export function ProofStrip() {

apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx

@@ -39,9 +39,12 @@ export async function ChatLandingCodeShowcase() {
   return (
     <section className="chat-code">
       <div className="chat-show-intro">
-        <p className="chat-show-eyebrow">
+        <div className="show-intro-rail">
+          <p className="chat-show-eyebrow">
           Developer Experience
-        </p>
+          </p>
+          <span className="show-intro-rail-line" aria-hidden="true" />
+        </div>
         <h2 className="chat-show-heading">
           Full-featured chat in a few lines
         </h2>

apps/website/src/components/landing/langgraph/LangGraphCodeShowcase.tsx

@@ -47,9 +47,12 @@ export async function LangGraphCodeShowcase() {
   return (
     <section className="angular-code">
       <div className="lg-show-intro">
-        <p className="lg-show-eyebrow">
+        <div className="show-intro-rail">
+          <p className="lg-show-eyebrow">
           Developer Experience
-        </p>
+          </p>
+          <span className="show-intro-rail-line" aria-hidden="true" />
+        </div>
         <h2 className="lg-show-heading">
           Production streaming in a few lines
         </h2>

apps/website/src/components/landing/render/RenderCodeShowcase.tsx

@@ -25,9 +25,12 @@ export async function RenderCodeShowcase() {
   return (
     <section className="render-code">
       <div className="render-show-intro">
-        <p className="render-show-eyebrow">
+        <div className="show-intro-rail">
+          <p className="render-show-eyebrow">
           Developer Experience
-        </p>
+          </p>
+          <span className="show-intro-rail-line" aria-hidden="true" />
+        </div>
         <h2 className="render-show-heading">
           Generative UI in a few lines
         </h2>

apps/website/src/styles/landing.css

@@ -1005,7 +1005,6 @@
 }
 @media (max-width: 767px) { .render-code { padding: 60px 20px !important; } }
 .render-show-intro {
-  text-align: center;
   margin-bottom: 48px;
 }
 .render-show-eyebrow {
@@ -1054,7 +1053,6 @@
 }
 @media (max-width: 767px) { .angular-code { padding: 60px 20px !important; } }
 .lg-show-intro {
-  text-align: center;
   margin-bottom: 48px;
 }
 .lg-show-eyebrow {
@@ -1103,7 +1101,6 @@
 }
 @media (max-width: 767px) { .chat-code { padding: 60px 20px !important; } }
 .chat-show-intro {
-  text-align: center;
   margin-bottom: 48px;
 }
 .chat-show-eyebrow {
@@ -1337,7 +1334,7 @@
 }
 .proof-strip-cells {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 18px;
   list-style: none;
   margin: 0;
@@ -1464,3 +1461,16 @@
   text-transform: uppercase;
   color: var(--color-text-muted);
 }
+
+/* Shared rail for the three CodeShowcase intros — the last centered kicker
+ * grammar, unified with the sitewide rail anatomy. */
+.show-intro-rail {
+  display: flex;
+  align-items: baseline;
+  gap: 14px;
+}
+.show-intro-rail-line {
+  flex: 1;
+  height: 1px;
+  background: var(--color-border);
+}

apps/website/tsconfig.tsbuildinfo

@@ -0,0 +1,18 @@
+# Design-program follow-ups
+
+**Date:** 2026-08-31 · **Status:** Approved. · **Branch:** `blove/followups`
+
+1. **Showcase intros → rail.** The three CodeShowcase intros (lg/chat/render
+   `*-show-intro`) are the last centered kicker grammar. Each eyebrow wraps
+   in a shared `show-intro-rail` div + aria-hidden hairline; intros
+   left-align. Headings/snippets untouched.
+2. **ProofStrip fourth cell (condition met).** npm @threadplane/langgraph
+   @latest publishes `^20 || ^21 || ^22` (verified 2026-08-31 against the
+   registry) — the shipped homepage spec's revival condition for the cut
+   Angular cell. New cell: value derived from
+   `WEBSITE_SUPPORTED_ANGULAR_MAJORS` (`20–22`, first–last, NOT hardcoded),
+   caption "Angular majors supported, CI-tested", source
+   npmjs.com/package/@threadplane/langgraph. Grid → repeat(4, 1fr); spec
+   3→4 first.
+3. **RecentArticles moves above the dark FinalCTA** so the closer closes.
+4. **Untrack `apps/website/tsconfig.tsbuildinfo`** (gitignored but tracked).