Redesign landing page with interactive stack and guardrails

[agjs]

Summary

Replace the homepage's tabbed terminal and repetitive comparison sections with an interactive stack diagram, guardrail examples, and a repository explorer. The diagram uses a shared 2:1 projection, equal board spacing, aligned labels, selectable stages, and pause/replay controls; animation respects reduced motion and pauses offscreen.

Consolidate onboarding into a three-step guide and finish with compact project links. Keep the installer command in server-rendered HTML inside an expandable setup section, preserve the agent entrypoints, and remove obsolete components and homepage pagination.

Test plan

• cd apps/docs && bun run build:ci — passed, including generated-data, fragment, rendered-markdown, and agent-surface checks.
• bun run check — passed; OpenAPI drift skipped because api-dev was not reachable on port 7330.
• Pre-push security and docs gates, including lychee internal link check — passed.
• Local axe scan — zero WCAG A/AA violations in the scan.
• Browser review at desktop and 390px mobile widths, in dark and light themes.
• Exercised guardrail break/restore, repository layer selection, animation stage selection, pause/replay, and installer expansion; measured equal diagram sizes and gaps.
• Stack smoke / API / UI validation: not applicable to this docs-only change.

Conventions

• No new any, blind assertions, or non-null assertions.
• No environment variables or dependency changes.
• Existing docs checks and browser verification cover the changed behavior; examples are explicitly illustrative, not a browser-side ESLint runner.

Screenshots

Desktop and mobile captures of the final page are included in output/playwright/.

Desktop

Mobile