# Marketing Landing Page (root `/`)

The public marketing page is the root route (`/`): a signed-out visitor sees it,
while a signed-in user is redirected to their console destination before it
renders. `/landing` is kept as a redirect to `/` for old links. It was
implemented from a claude.ai/design handoff bundle (Spotlight direction: big
display type, console indigo, pixel flow-field) and follows `DESIGN.md`
(dark-first, single indigo accent, Inter + JetBrains Mono, sentence case).

## Where things live

| Path | What it is |
|---|---|
| `src/app/page.tsx` | Root route — auth check, then renders `LandingPage` for signed-out visitors |
| `src/features/landing/landing-page.tsx` | The composed page (sections + CSS imports), shared by the root route |
| `src/app/landing/page.tsx` | Back-compat redirect from `/landing` to `/` |
| `src/app/landing/*.css` | Landing styles, all scoped under `.lp` so console styles never clash |
| `src/features/landing/` | Section components, canvas engine, logos |
| `src/features/landing/pixel-field.ts` | Shared canvas engine: Bayer-dithered flow field (hero, CTA, problem stage, how-it-works stages, console overview backdrop) |
| `src/features/landing/demo/` | The overlap-detection animation inside the hero console window |
| `src/features/landing/worktree-shot.tsx` | "The full console" section — one static overview window (sidebar + local graph with pulsing local heads + overlap warning card + tasks-shipped chart) |

## Animated pieces

- **Hero / CTA fields** — `PixelField` with mouse warp, scan sweep, and a
  ripple emitted from the primary CTA button. Pauses off-screen; honors
  `prefers-reduced-motion` (static frame).
- **Console demo** (`demo/`) — a React timeline (no CSS keyframes): agents →
  MCP gateway → Co-Vibe console, overlap detected at 92%, `covibe_warning`
  returned to the agent, metrics logged inline with tasks. Scales the
  1920x1080 stage to the window width; plays only while visible; reduced
  motion freezes on the resolved-console frame.
- **Tracking gap** (`problem.tsx`) — the canvas wells and the DOM chips are
  driven by the same 14s timeline, so foreground and background move as one
  system; collision blooms amber + "Duplicate work" badge.
- **How it works** (`how-controller.ts`) — three step cards, each playing its
  own independently looping scene over a dim pixel-field stage canvas (no rail,
  no sequential handoff): the typed `covibe_task · check` call (7.5s loop), the
  overlap scan + confidence meter + warning pill (9.5s), and the metrics rollup
  (8.5s). Plays only while visible; reduced motion shows the final frames.
- **The full console** (`worktree-shot.tsx`) — static markup over a dim
  pixel-field backdrop; the only motion is the CSS pulse on local graph heads,
  the live dots, and the latest chart point.

Copy uses the real MCP tool names (`covibe_task`, `covibe_team`,
`covibe_warning`) — not the old `devsync_*` placeholders from earlier design
drafts.

## Known follow-ups

- Footer social links point at the platform roots (no real org profiles yet).