From 84acce843d7e7095ac68f23f723a6219d7a49842 Mon Sep 17 00:00:00 2001 From: Aleksandar Grbic Date: Wed, 9 Sep 2026 17:37:46 +0200 Subject: [PATCH] feat(docs): redesign landing page with interactive stack and guardrails --- apps/docs/scripts/check-agent-surface.mjs | 2 +- .../src/components/landing/CodePreview.tsx | 143 ----- .../docs/src/components/landing/DocsGuide.tsx | 122 ++-- .../src/components/landing/GuardrailDemo.tsx | 131 ++++ .../components/landing/GuardrailsSection.tsx | 83 +-- .../src/components/landing/HeroSection.tsx | 60 +- .../src/components/landing/LandingPage.tsx | 8 +- .../components/landing/LandingPrimitives.tsx | 39 +- .../components/landing/OpenSourceSection.tsx | 39 +- .../src/components/landing/ProofSection.tsx | 44 -- .../components/landing/StackFlowSection.tsx | 114 +++- .../src/components/landing/StackMachine.tsx | 440 +++++++++++++ .../src/components/landing/StackRibbon.tsx | 45 +- .../src/components/landing/landing-page.css | 595 ++++++++++++++++++ .../src/components/landing/landingContent.ts | 350 +++-------- .../src/components/landing/stack-machine.css | 515 +++++++++++++++ apps/docs/src/content/docs/index.mdx | 6 +- apps/docs/src/styles/custom.css | 2 +- output/playwright/landing-desktop.webp | Bin 0 -> 799644 bytes output/playwright/landing-mobile.webp | Bin 0 -> 335112 bytes 20 files changed, 2018 insertions(+), 720 deletions(-) delete mode 100644 apps/docs/src/components/landing/CodePreview.tsx create mode 100644 apps/docs/src/components/landing/GuardrailDemo.tsx delete mode 100644 apps/docs/src/components/landing/ProofSection.tsx create mode 100644 apps/docs/src/components/landing/StackMachine.tsx create mode 100644 apps/docs/src/components/landing/landing-page.css create mode 100644 apps/docs/src/components/landing/stack-machine.css create mode 100644 output/playwright/landing-desktop.webp create mode 100644 output/playwright/landing-mobile.webp diff --git a/apps/docs/scripts/check-agent-surface.mjs b/apps/docs/scripts/check-agent-surface.mjs index 21452d3b..abc668ee 100755 --- a/apps/docs/scripts/check-agent-surface.mjs +++ b/apps/docs/scripts/check-agent-surface.mjs @@ -289,7 +289,7 @@ if (landing.includes("gh repo create") && !/git clone/.test(landing)) { if (!/auth(entication)? is optional/i.test(landing)) { fail( "the homepage does not say GitHub auth is optional", - "add it to the agent tab caption in landingContent.ts", + "add it to the setup note in landingContent.ts", ); } diff --git a/apps/docs/src/components/landing/CodePreview.tsx b/apps/docs/src/components/landing/CodePreview.tsx deleted file mode 100644 index 68d982e0..00000000 --- a/apps/docs/src/components/landing/CodePreview.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import clsx from "clsx"; -import type React from "react"; -import { useId, useState } from "react"; - -import { codeTabs, type CodeLine } from "./landingContent"; - -const tabBaseClass = - "relative m-0 flex min-h-[3.35rem] cursor-pointer items-center justify-center whitespace-nowrap border-0 border-b-2 border-[var(--bs-line-strong)] bg-transparent px-4 py-0 text-center font-mono text-[0.76rem] font-medium leading-tight text-[var(--bs-muted)] outline-none transition-colors data-[active=true]:border-[var(--bs-accent)] data-[active=true]:text-[var(--bs-accent-strong)] focus-visible:outline-2 focus-visible:outline-offset-[-4px] focus-visible:outline-[var(--bs-accent)] min-[641px]:px-[1.1rem] min-[641px]:text-[0.8rem]"; - -const panelClass = - "!mt-0 grid min-h-0 gap-[0.24rem] overflow-x-auto bg-[color-mix(in_oklch,var(--bs-bg)_60%,transparent)] p-4 font-mono text-[0.8rem] leading-[1.6] text-[var(--bs-code)] min-[641px]:h-[19rem] min-[641px]:p-[1.25rem_1.35rem] min-[641px]:text-[0.8rem]"; - -/* - * Every line is a real block element, and every gutter glyph carries a - * trailing space in the text stream. - * - * These were `` with the glyph flush against the - * text. `block` is a Tailwind class, so an agent converting the page to - * text has no CSS and reads a `` as inline: the whole transcript - * collapsed into one run and the `ok` gutter of the next line fused onto - * the end of the previous one. The command came out as - * `--project acmeok`, on the one element of the page an agent is most - * likely to copy. `
` is a line break by tag name, with no CSS - * needed; the panel is a grid, so the layout is unchanged. - */ -function CodeLineView({ line }: { line: CodeLine }) { - if (line.kind === "spacer") { - return