feat(website): homepage sequencing, plate trim, and diagram scaling (#1089)

* feat(website): replace the whitepaper disclosure and drop the direct links

Requested change. The form now reads 'We will never spam you or share your
email address.' in place of the three-email outreach disclosure, and the
two 'Download the PDF directly' escapes are gone: the 'Already on the list?'
line and the one in the failure block.

Recorded because it is not a copy edit: whitepaper signups are still
enrolled into the founder campaign (campaign/send.ts treats formKind
'whitepaper' as a campaign context), so the follow-up sequence still sends
and is no longer disclosed at the point of capture. Raised before making
the change and confirmed. GROWTH_FORM_POLICY_VERSION is bumped to
growth_v1.2026-09-09 so consent captured under the old wording stays
distinguishable from consent captured under this one, and the constant is
renamed WHITEPAPER_PRIVACY_ASSURANCE because it no longer discloses outreach.

The SUCCESS block keeps its direct link -- that reader has already given
their address and the copy promises it ('the PDF is here too'). The failure
block now says 'Try again in a moment.' rather than handing over the file.

Also removes the .wp-already rules and the home_whitepaper_direct_inline
analytics id, both of which nothing can reach any more.

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

* feat(website): reorder the fork band, trim the plate, swap the briefing titles

- OpenSourceStrip moves above Stage, so the fork band follows the
  architecture diagram. The e2e spine order moves with it.
- The airport plate loses its N/S/E taxiways -- lines, letters, the
  TaxiwayLetter component, the TWY_* constants and the .ap-taxiway /
  .ap-twy-* rules -- and gains 44 viewBox units of margin below the
  southern runway (NEAT 444->488, VIEW 536->580, furniture shifted with it).
- The off-airport strip now reads 'All AI Models supported'.
- 'Compatibility, not endorsement' and 'Everything on the right is yours'
  are removed.
- The briefing titles swap: the eyebrow carries the problem, the h2 carries
  the offer. '· free' leaves the eyebrow meta because the headline now
  opens with 'Free'.

Two guards changed rather than deleted. Compatibility.spec kept its
negative half -- nothing may read as an endorsement, and 'never sees' must
still appear nowhere, that being the overclaim #1067 corrected -- while
losing the positive never-TALKS-TO assertion, since that claim leaves the
homepage with the old strip copy.

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

* fix(website): the architecture diagram scales instead of scrolling

It was never scaling at all. The docs kit floors every figure at a render
width so shrinking the SVG cannot shrink its text into illegibility, and the
marketing scale caps it at 860 -- but min-width beats max-width, so the two
together pinned this diagram at exactly 1024px: ~96px of the container went
unused on desktop, and between 768 and 1024 the figure scrolled sideways
until the phone stack snapped in.

Both constraints are dropped so width:100% governs. The max-width override
needs .arch-figure .tp-diagram-figure[data-scale] .tp-diagram-svg -- the
marketing cap is (0,3,0) and a plain .arch-figure descendant selector loses
to it, which is how the first attempt at this silently stayed at 860px.

Legibility now comes from the breakpoint rather than a floor: the phone
stack takes over below 1024px, so the SVG never renders under ~944px and
its 13.5px type never drops under ~10px. Measured at 1440px: 1120px wide,
11.8px type, no scroll. At 900px: stack, no page overflow.

Also removes the toast's standalone 'or download directly' link and its
now-dead .toast-download-link rule, and updates the airport e2e, which
pinned the three taxiways this branch removed.

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

* fix(website): the toast's failure block no longer hands over the PDF

Aligns it with WhitePaperForm, whose failure block was changed the same way
earlier on this branch: the guide is reachable only through a successful
submission, so a failed send says to retry rather than releasing the file.

trackWhitepaperDownloadClick and the toast_direct_download cta id go with
it -- nothing in the toast can emit either any more.

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

* fix(website): the e2e follows the policy bump and the PDF gate

Both surfaced in CI, both real consequences of this branch.

website.spec.ts hardcoded growth_v1.2026-09-01 rather than importing it
(form-policy.ts is server-only and cannot load in a Playwright process), so
bumping the policy version made the running app post a value the suite did
not expect. Updated, with a comment saying it has to move with the constant.

'marketing pages link to downloadable whitepaper PDFs' failed because there
are no such links any more: removing every direct-download escape from
WhitePaperForm took the library pages' links with it. The test now asserts
the gate instead -- the PDFs stay served, they are just not linked -- so
re-adding a link is a deliberate act rather than a silent regression.

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

---------

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

Author: blove

apps/website/e2e/home-airport.spec.ts

@@ -289,7 +289,9 @@ test.describe('homepage airport diagram', () => {
       CONCOURSES.length
     );
     await expect(page.locator(`${PLATE} [data-main-terminal]`)).toHaveCount(1);
-    await expect(page.locator(`${PLATE} .ap-taxiway`)).toHaveCount(3);
+    // The N/S/E taxiways were removed on request. Asserted as absent rather
+    // than dropped, so re-adding them is a deliberate act and not a drift.
+    await expect(page.locator(`${PLATE} .ap-taxiway`)).toHaveCount(0);
     await expect(page.locator(`${PLATE} .ap-furniture`)).toHaveCount(1);
     // The off-airport row is the section's central argument rendered as
     // geometry — the five providers sit OUTSIDE the neat line because

apps/website/e2e/website.spec.ts

@@ -2,7 +2,12 @@ import { test, expect } from '@playwright/test';
 
 // Mirrored from apps/website/src/lib/growth/form-policy.ts, which is server-only
 // and therefore cannot be imported into a Playwright spec.
-const GROWTH_FORM_POLICY_VERSION = 'growth_v1.2026-09-01';
+// Hardcoded rather than imported: lib/growth/form-policy.ts is `server-only`
+// and cannot be pulled into a Playwright process. It must be updated whenever
+// GROWTH_FORM_POLICY_VERSION is bumped -- this literal is compared against what
+// the running app actually posts, so a stale copy fails the suite rather than
+// passing silently.
+const GROWTH_FORM_POLICY_VERSION = 'growth_v1.2026-09-09';
 const UUID_V4 =
   /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/iu;
 
@@ -52,8 +57,8 @@ test('landing page renders the spine in order (live-stage spec §3)', async ({ p
     'proof-heading',
     'compatibility-heading',
     'architecture-heading',
-    'stage-heading',
     'open-source-heading',
+    'stage-heading',
     'field-report-heading',
     'faq-heading',
   ];
@@ -548,17 +553,21 @@ test('representative docs pages do not create page-level horizontal overflow', a
   }
 });
 
-test('marketing pages link to downloadable whitepaper PDFs', async ({ page }) => {
-  const expectedDownloads: Record<string, string> = {
+test('marketing pages gate the whitepaper PDFs behind the form', async ({ page }) => {
+  // These pages used to link their PDF directly. Every direct-download escape
+  // was removed on request, so the guide is now reachable only by submitting
+  // the form -- the files stay served (see the next test), they are just not
+  // linked. Asserted as absent so re-adding a link is a deliberate act.
+  const gated: Record<string, string> = {
     '/ag-ui': '/whitepaper.pdf',
     '/langgraph': '/whitepapers/angular.pdf',
     '/render': '/whitepapers/render.pdf',
     '/chat': '/whitepapers/chat.pdf',
   };
 
-  for (const [route, href] of Object.entries(expectedDownloads)) {
+  for (const [route, href] of Object.entries(gated)) {
     await page.goto(route);
-    await expect(page.locator(`a[href="${href}"]`).first(), `${route} links ${href}`).toBeVisible();
+    await expect(page.locator(`a[href="${href}"]`), `${route} still links ${href}`).toHaveCount(0);
   }
 });
 

apps/website/src/app/page.tsx

@@ -35,14 +35,15 @@ export default function HomePage() {
       <Compatibility />
       <EnterpriseArchitecture />
 
+      {/* The open-source full stop: a loud dark band with one fork CTA. Copy
+          lives in OPEN_SOURCE_STRIP (positioning.ts). */}
+      <OpenSourceStrip />
+
       {/* The four capability beats (stream, persist, approve, render): stills
           by default, the pinned live act on wide, motion-tolerant viewports
           (live-stage spec §3, §8). Copy lives in STAGE_RAIL (positioning.ts). */}
       <Stage proof={STAGE_PROOF} />
 
-      {/* The open-source full stop: a loud dark band with one fork CTA. Copy
-          lives in OPEN_SOURCE_STRIP (positioning.ts). */}
-      <OpenSourceStrip />
       <TeamsBlock formPolicy={formPolicy} />
       <HomeFAQ />
       <RecentArticles />

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

@@ -103,26 +103,26 @@ describe('Compatibility', () => {
     }
   });
 
-  it('states compatibility in words and never implies a customer', () => {
+  it('never implies a customer, and no longer needs a disclaimer to say so', () => {
+    // The "Compatibility, not endorsement" line was removed on request. The
+    // claim it guarded against still matters, so the negative assertion stays:
+    // nothing in the band may read as an endorsement in the first place.
     const { container } = render(<Compatibility />);
-    expect(screen.getByText(/Compatibility, not endorsement/)).toBeTruthy();
+    expect(screen.queryByText(/Compatibility, not endorsement/)).toBeNull();
     expect(container.textContent).not.toMatch(/trusted by|customers|our clients|powered by/i);
   });
 
-  it('says Threadplane never talks to model providers, not that it never sees them', () => {
-    // never-SEES is a data claim the docs do not support; never-TALKS-TO is
-    // structural. This is the same failure mode #1067 had to correct.
+  it('never claims Threadplane cannot see model providers', () => {
+    // The strip used to read "OFF AIRPORT - BEHIND YOUR BACKEND. THREADPLANE
+    // NEVER TALKS TO THEM." and this guard held the positive half of that
+    // claim in place. The label is now "All AI Models supported" on request,
+    // so the structural never-TALKS-TO claim is off the homepage entirely.
     //
-    // The positive half is scoped to .airport-stack, for the same reason as
-    // the gate-name test above: the plate carries this sentence too, as an
-    // aria-hidden <text>, so an unscoped read of container.textContent stays
-    // green while the claim disappears from the phone form and from every
-    // accessible surface the band has. The negative half stays unscoped —
-    // "never sees" must not appear anywhere in the section, drawn or spoken.
+    // The negative half stays, and matters more: never-SEES is a data claim
+    // the docs do not support, and it is the overclaim #1067 had to correct.
+    // It must not appear anywhere in the band, drawn or spoken.
     const { container } = render(<Compatibility />);
-    const stack = container.querySelector('.airport-stack');
-    expect(stack, 'the accessible stack is gone').toBeTruthy();
-    expect(within(stack as HTMLElement).getByText(/never talks to them/i)).toBeTruthy();
+    expect(container.querySelector('.airport-stack'), 'the accessible stack is gone').toBeTruthy();
     expect(container.textContent).not.toMatch(/never sees/i);
   });
 

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

@@ -4,7 +4,6 @@ import { AdapterGuideLink } from './AdapterGuideLink';
 import {
   CHART_ID,
   CONCOURSES,
-  DISCLAIMER,
   EYEBROW,
   FIELD,
   HEADLINE,
@@ -23,9 +22,6 @@ import {
   STAND,
   TICK_X,
   TICK_Y,
-  TWY_E,
-  TWY_N,
-  TWY_S,
   VIEW,
   type Gate,
   type Row,
@@ -48,17 +44,6 @@ function Runway({ y, h, left, right }: RunwayGeometry) {
   );
 }
 
-function TaxiwayLetter({ x, y, ch }: { x: number; y: number; ch: string }) {
-  return (
-    <g>
-      <circle className="ap-twy-disc" cx={x} cy={y} r={7.5} />
-      <text className="ap-twy-letter" x={x} y={y + 3.4} textAnchor="middle">
-        {ch}
-      </text>
-    </g>
-  );
-}
-
 /** A stand: the stub off the concourse, the white box, the mark, the callsign. */
 function Stand({ gate, row, above }: { gate: Gate; row: Row; above: boolean }) {
   const cy = row.standCy;
@@ -168,12 +153,6 @@ function Plate() {
         <Runway {...RWY_N} />
         <Runway {...RWY_S} />
 
-        <path className="ap-taxiway" d={`M${FIELD.x0} ${TWY_N} H${FIELD.x1}`} />
-        <path className="ap-taxiway" d={`M${FIELD.x0} ${TWY_S} H${FIELD.x1}`} />
-        <path className="ap-taxiway" d={`M${TWY_E} ${TWY_N} V${TWY_S}`} />
-        <TaxiwayLetter x={PIVOT.x} y={TWY_N} ch="N" />
-        <TaxiwayLetter x={PIVOT.x} y={TWY_S} ch="S" />
-        <TaxiwayLetter x={TWY_E} y={PIVOT.y} ch="E" />
 
         {/* The one structure that IS Threadplane: solid ink. Partner stands are
             white, so the two values carry the meaning with no legend. */}
@@ -359,7 +338,6 @@ export function Compatibility() {
 
         <div className="airport-footer">
           <AdapterGuideLink className="compatibility-link" />
-          <p className="compatibility-disclaimer">{DISCLAIMER}</p>
         </div>
       </Container>
     </Section>

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

@@ -26,7 +26,7 @@ export const ARCHITECTURE_EYEBROW = 'Architecture';
 export const ARCHITECTURE_HEADLINE =
   'The UI layer between your users and your agents.';
 export const ARCHITECTURE_BODY =
-  'Threadplane lives inside your Angular application and talks to your agents through the LangGraph SDK or AG-UI. Everything on the right is yours.';
+  'Threadplane lives inside your Angular application and talks to your agents through the LangGraph SDK or AG-UI.';
 export const ARCHITECTURE_LABEL =
   'Threadplane is the UI layer between your users and your agents: it lives inside your Angular application, reaches LangGraph agents first-class through the LangGraph SDK and any AG-UI server through the AG-UI protocol, and leaves the model choice to your runtime.';
 

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

@@ -20,7 +20,7 @@ describe('TeamsBlock', () => {
   it('leads with the ask: eyebrow, heading, then the form', () => {
     const { container } = render(<TeamsBlock formPolicy={formPolicy} />);
     const heading = screen.getByRole('heading', { level: 2 });
-    expect(heading.textContent).toBe('What breaks between a demo and production.');
+    expect(heading.textContent).toBe('Free preflight briefing for agentic UI');
     expect(heading.id).toBe('field-report-heading');
     expect(container.querySelectorAll('form')).toHaveLength(1);
     expect(screen.getByLabelText('Work email')).toBeTruthy();
@@ -33,7 +33,7 @@ describe('TeamsBlock', () => {
     const { container } = render(<TeamsBlock formPolicy={formPolicy} />);
     const eyebrow = container.querySelector('[data-ui="eyebrow"]');
     expect(eyebrow?.textContent).toContain(`${FIELD_REPORT.pages} pages`);
-    expect(eyebrow?.textContent).toContain('Preflight briefing');
+    expect(eyebrow?.textContent).toContain('What breaks between a demo and production');
   });
 
   it('shows the briefing beside the ask', () => {

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

@@ -29,13 +29,13 @@ export function TeamsBlock({ formPolicy }: { formPolicy: PublicFormPolicy }) {
         <div className="teams-grid">
           <div>
             <Eyebrow tone="accent" className="teams-eyebrow">
-              Preflight briefing
+              What breaks between a demo and production
               <span className="teams-eyebrow-meta">
-                {' '}· {FIELD_REPORT.pages} pages · free
+                {' '}· {FIELD_REPORT.pages} pages
               </span>
             </Eyebrow>
             <h2 id="field-report-heading" className="teams-heading">
-              What breaks between a demo and production.
+              Free preflight briefing for agentic UI
             </h2>
             <WhitePaperForm
               paper="overview"

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

@@ -20,7 +20,7 @@ const formPolicy: PublicFormPolicy = {
     contact: 'Contact disclosure',
     newsletter: 'Newsletter disclosure',
     whitepaper:
-      'Send me the guide and a short, three-email follow-up from Brian about building with Threadplane. Unsubscribe anytime.',
+      'We will never spam you or share your email address.',
   },
 };
 
@@ -64,13 +64,18 @@ describe('WhitePaperBlock', () => {
     expect(events).toContain('marketing:whitepaper_signup_success');
   });
 
-  it('shows the direct PDF link in the failure block', async () => {
+  it('offers no direct download from the failure block', async () => {
+    // Removed on request: the PDF is reachable only through a successful
+    // submission now, so a failed send tells the reader to retry rather than
+    // handing over the file. The success block still links it, because that
+    // reader has already given their address and the copy promises it.
     vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: false, status: 500 }));
     render(<WhitePaperBlock formPolicy={formPolicy} paper="chat" />);
     fireEvent.change(screen.getByLabelText('Work email'), { target: { value: 'reader@acme.com' } });
     fireEvent.click(screen.getByRole('button', { name: 'Get the field report' }));
     await waitFor(() => expect(screen.getByRole('alert')).toBeTruthy());
-    expect(screen.getByRole('link', { name: 'Download the PDF directly' }).getAttribute('href')).toBe('/whitepapers/chat.pdf');
+    expect(screen.getByText('Try again in a moment.')).toBeTruthy();
+    expect(screen.queryByRole('link', { name: /Download the PDF/ })).toBeNull();
   });
 
   it('validates on blur, focuses the field on an invalid submit, and clears once valid', () => {

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

@@ -55,11 +55,17 @@ export function WhitePaperForm({
   const inputId = `${idPrefix}-email`;
   const disclosureId = `${idPrefix}-growth-disclosure`;
 
-  const directLink = (ctaId: 'home_whitepaper_direct' | 'home_whitepaper_direct_inline', label: string) => (
+  const directLink = (label: string) => (
     <a
       href={pdf.href}
       download={pdf.download}
-      onClick={() => trackWhitepaperDownloadClick(paper, { surface, source_section: sourceSection, cta_id: ctaId })}
+      onClick={() =>
+        trackWhitepaperDownloadClick(paper, {
+          surface,
+          source_section: sourceSection,
+          cta_id: 'home_whitepaper_direct',
+        })
+      }
     >
       {label}
     </a>
@@ -79,7 +85,7 @@ export function WhitePaperForm({
   if (form.status === 'sent') {
     return (
       <FormStatus tone="success" title="Check your inbox." detail="The guide is on its way, and the PDF is here too.">
-        {directLink('home_whitepaper_direct', 'Download the PDF directly')}
+        {directLink('Download the PDF directly')}
       </FormStatus>
     );
   }
@@ -118,11 +124,8 @@ export function WhitePaperForm({
         {formPolicy.disclosures.whitepaper}
       </p>
       {form.status === 'failed' ? (
-        <FormStatus tone="failure" title="That did not send." detail="You can still get the guide.">
-          {directLink('home_whitepaper_direct', 'Download the PDF directly')}
-        </FormStatus>
+        <FormStatus tone="failure" title="That did not send." detail="Try again in a moment." />
       ) : null}
-      <p className="wp-already">Already on the list? {directLink('home_whitepaper_direct_inline', 'Download the PDF directly.')}</p>
     </form>
   );
 }