feat(website): Basecamp-informed homepage — Yes wall, proof strip, problem-first hero (#885)

* docs(website): design spec for Basecamp-informed homepage changes

Three changes drawn from basecamp.com: a "Yes wall" replacing the
Differentiator grid, a specific-proof strip, and a problem-first hero
subheadline. Visual direction is Inverted x Specimen — one dark section
using the dark tokens the site already ships but never consumes.

All four proof-strip figures were verified against live sources and all
four were wrong or misleading, so change D is marked blocked pending a
rebuild. Verification results and the reasoning are recorded in the spec.

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

* docs(website): update homepage spec for all-MIT (#881) and Angular 22 plans

Licensing becomes an unqualified Yes-wall row, the CopilotKit FAQ item is
gone from main and stays gone, telemetry row adopts the stronger 'installation
is inert' phrasing, and the cut Angular LTS proof cell is conditionally
revivable once ^22 peer support lands.

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

* docs(website): approve four surface treatments for homepage spec

Marker highlight, dark-band glow/gradient atmosphere, editorial left-rail
asymmetry, and paper elevation — all four approved, with exact CSS values
from the rendered mockups. Treatment C moves the SectionHeader extraction
from out-of-scope to in-scope.

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

* docs(website): implementation plan for Basecamp-informed homepage

Nine tasks: dark section substrate via CSS-variable re-scoping,
SectionHeader primitive, hero rewrite, YesWall replacing Differentiator,
ProofStrip with live HVTrust badge, opt-in dark FinalCTA, FAQ shrink,
and a verification gate.

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

* feat(website): dark section surface with scoped token re-map

* fix(website): re-scope accent-border-hover in dark section

* feat(website): SectionHeader primitive with centered and rail variants

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

* feat(website): problem-first hero subhead with capability chips and marker highlight

* test(website): pin hero copy to HERO_SUBHEAD and scope chip assertions

* feat(website): YesWall component — 16 questions, 4 groups, dark specimen

* feat(website): replace Differentiator with the Yes wall

* test(website): point e2e landing assertion at the Yes wall

* feat(website): proof strip — three verified cells with live HVTrust badge

* fix(website): reserve badge aspect ratio and trim referrer

* feat(website): dark FinalCTA variant, homepage-only

* fix(website): clip dark FinalCTA bleed, correct spec mock, size mark for mobile

* refactor(website): shrink HomeFAQ to non-binary questions

* fix(website): true up Yes wall aside, analytics track, and glow containment

---------

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

Author: blove

apps/website/e2e/website.spec.ts

@@ -7,11 +7,9 @@ test('landing page renders hero headline', async ({ page }) => {
   expect(headline?.toLowerCase()).toContain('angular');
 });
 
-test('landing page renders differentiator section', async ({ page }) => {
+test('landing page renders the Yes wall', async ({ page }) => {
   await page.goto('/');
-  // Assert on the stable id, not the heading copy — landing-page text rewrites
-  // happen far more often than the section structure changes.
-  await expect(page.locator('#differentiator-heading')).toBeVisible();
+  await expect(page.locator('#yes-wall-heading')).toBeVisible();
 });
 
 test('landing page renders feature blocks (Stream/Render/Ship)', async ({ page }) => {

apps/website/src/app/page.tsx

@@ -1,6 +1,6 @@
 import { Hero } from '../components/landing/Hero';
 import { EcosystemStrip } from '../components/landing/EcosystemStrip';
-import { Differentiator } from '../components/landing/Differentiator';
+import { YesWall } from '../components/landing/YesWall';
 import { FeatureBlock } from '../components/landing/FeatureBlock';
 import { BrowserFrame } from '../components/ui/BrowserFrame';
 import { ClipPlayer } from '../components/ui/ClipPlayer';
@@ -11,6 +11,7 @@ import { HighlightedCode } from '../components/landing/HighlightedCode';
 import { SECTION_MEDIA } from '../lib/section-media';
 import type { SectionMedia } from '../lib/section-media';
 import { PilotBlock } from '../components/landing/PilotBlock';
+import { ProofStrip } from '../components/landing/ProofStrip';
 import { WhitePaperBlock } from '../components/landing/WhitePaperBlock';
 import { Promises } from '../components/landing/Promises';
 import { HomeFAQ } from '../components/landing/HomeFAQ';
@@ -105,7 +106,7 @@ export default async function HomePage() {
     <>
       <Hero />
       <EcosystemStrip />
-      <Differentiator />
+      <YesWall />
 
       {/* Interactive demo showcase */}
       <Section surface="canvas">
@@ -183,7 +184,7 @@ export default async function HomePage() {
       />
 
       {/*
-        The homepage claims human-in-the-loop in the Differentiator table and
+        The homepage claims human-in-the-loop in the Yes wall and
         mentions interrupts in the Stream block, but nothing here showed it.
         This is the only section whose heading the approval clip actually
         illustrates — the same rule the solutions pages follow.
@@ -220,8 +221,9 @@ export default async function HomePage() {
       <PilotBlock />
       <WhitePaperBlock />
       <Promises />
+      <ProofStrip />
       <HomeFAQ />
-      <FinalCTA />
+      <FinalCTA variant="dark" />
       <RecentArticles />
     </>
   );

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

@@ -0,0 +1,28 @@
+// SPDX-License-Identifier: MIT
+// @vitest-environment jsdom
+import { render } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { FinalCTA } from './FinalCTA';
+
+vi.mock('../../lib/analytics/client', () => ({
+  track: vi.fn(),
+  trackCtaClick: vi.fn(),
+  trackExternalLinkClick: vi.fn(),
+}));
+
+describe('FinalCTA', () => {
+  it('defaults to the tinted surface (used by 8 non-home pages)', () => {
+    const { container } = render(<FinalCTA />);
+    expect(
+      container.querySelector('[data-ui="section"]')?.getAttribute('data-surface'),
+    ).toBe('tinted');
+  });
+
+  it('renders the dark surface when variant="dark"', () => {
+    const { container } = render(<FinalCTA variant="dark" />);
+    const section = container.querySelector('[data-ui="section"]');
+    expect(section?.getAttribute('data-surface')).toBe('dark');
+    expect(container.querySelector('.final-cta-mark')).toBeTruthy();
+    expect(container.querySelector('.final-cta-mark')?.getAttribute('aria-hidden')).toBe('true');
+  });
+});

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

@@ -14,6 +14,12 @@ interface FinalCTAProps {
   secondary?: { label: string; href: string; external?: boolean } | null;
   /** Optional trailing caption. Defaults to licensing and telemetry line. Pass null to hide. */
   caption?: string | null;
+  /**
+   * 'dark' renders on the dark band — homepage only, pairing with the Yes
+   * wall so the inverted treatment appears twice (spec: a lone dark band
+   * reads as arbitrary). All other pages keep the default tinted surface.
+   */
+  variant?: 'default' | 'dark';
 }
 
 const DEFAULT_SECONDARY = { label: 'See each feature in action →', href: 'https://cockpit.threadplane.ai', external: true };
@@ -24,11 +30,21 @@ export function FinalCTA({
   primary = null,
   secondary = DEFAULT_SECONDARY,
   caption = 'All packages are MIT · Production support available · App telemetry off by default',
+  variant = 'default',
 }: FinalCTAProps = {}) {
   return (
-    <Section surface="tinted" ariaLabelledBy="final-cta-heading">
+    <Section
+      surface={variant === 'dark' ? 'dark' : 'tinted'}
+      className={variant === 'dark' ? 'final-cta-dark' : undefined}
+      ariaLabelledBy="final-cta-heading"
+    >
       <Container>
         <div className="final-cta-inner">
+          {variant === 'dark' ? (
+            <div className="final-cta-mark" aria-hidden="true">
+              →
+            </div>
+          ) : null}
           <h2 id="final-cta-heading" className="final-cta-heading">
             {headline}
           </h2>

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

@@ -2,8 +2,8 @@
 // @vitest-environment jsdom
 import React from 'react';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { HERO_SUBHEAD, POSITIONING_PROOF_POINTS } from '../../lib/positioning';
+import { render, screen, fireEvent, within } from '@testing-library/react';
+import { HERO_CHIPS, HERO_SUBHEAD, POSITIONING_PROOF_POINTS } from '../../lib/positioning';
 
 const trackMock = vi.hoisted(() => vi.fn());
 const writeTextMock = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
@@ -46,14 +46,21 @@ beforeEach(() => {
 });
 
 describe('Hero', () => {
-  it('renders the locked H1 and subhead', async () => {
+  it('renders the locked H1, problem-first subhead, and capability chips', async () => {
     const { Hero } = await import('./Hero');
     render(<Hero />);
     expect(screen.getByRole('heading', { level: 1 }).textContent)
-      .toMatch(/Ship production agent UIs in Angular\./);
-    expect(screen.getByText(HERO_SUBHEAD)).toBeTruthy();
+      .toBe('Ship production agent UIs in Angular.');
+    const subhead = document.querySelector('.hero-subhead');
+    expect(subhead?.textContent).toBe(HERO_SUBHEAD);
+    const chipRow = screen.getByRole('list', { name: 'Capabilities' });
+    for (const chip of HERO_CHIPS) {
+      expect(within(chipRow).getByText(chip)).toBeTruthy();
+    }
     for (const proofPoint of POSITIONING_PROOF_POINTS) {
-      expect(screen.getByText(proofPoint.label)).toBeTruthy();
+      // 'LangGraph + AG-UI' appears both as a chip and as a proof pill label,
+      // so use getAllByText rather than getByText (which throws on multiple matches).
+      expect(screen.getAllByText(proofPoint.label).length).toBeGreaterThanOrEqual(1);
     }
   });