feat: redesign landing sections and add product demos

[codebanditssss]

Reworks the marketing landing sections for trust and craft — real product surfaces where they exist, honest illustrations where they don't, and removal of fabricated social proof.

Sections

• Features — rebuilt as alternating product-framed cards. 01 Multi-agent / 02 Autonomous CI / 03 Swappable slots are clean in-frame illustrations; 04 Real-time Kanban plays a real live.webm screencast of the app. Adds a copy-install command on card 01; preserves the scroll-stack.
• Problem — chaos→calm visual: a drifting pile of session cards (the "10 browser tabs" pain) beside a calm, line-revealing agent-orchestrator.yaml.
• Lifecycle — each milestone now shows a per-stage proof card (spawn → work → PR → CI → mergeable → merged), with a one-time green "merged" payoff. Container de-emphasised to a hairline so the inner card is the focal surface.
• Use cases — added Steer / Orchestrate / Attach / Notify / Resume (all grounded in real ao commands); ring radius now scales with card count and the centered card gets focus emphasis.
• Nav — single sliding highlight driven by scroll-spy + hover.
• Agents bar — larger tiled logos.

Polish

• De-yellowed card glow + placeholder shimmer to neutral tones; device-style shading on product frames.

Removed

• Fabricated GitHub stats grid + "stars on GitHub" badge (fake fallback numbers).
• Bottom CTA section.

Scope: 1 commit, all under frontend/src/landing/.

[github-actions]

React Doctor found no issues. 🎉

_{Reviewed by React Doctor for commit db27f1c.}

[greptile-apps]

Greptile Summary

This PR rebuilds five landing sections (About, Features, Workflow, UseCases, Nav) with real product surfaces — a live.webm screencast for the Kanban card, per-stage proof cards in the lifecycle, and ao command illustrations for the use-case ring — and removes the fabricated GitHub stats grid and bottom CTA.

• LandingFeatures replaces the dual back/front panel layout with a typed Surface union (capture | render) so real assets drop in via /public/features with a shimmer fallback; adds an alternating product/text grid and a CopyCommand clipboard button.
• LandingNav gains scroll-spy active tracking, a sliding pill highlight driven by hovered ?? active, and collapse-on-scroll for the logo/icon clusters.
• LandingAbout, LandingWorkflow, and LandingUseCases each add motion-rich illustrations (drifting chaos cards, per-stage proof cards, scaled 3-D ring) with prefers-reduced-motion guards throughout globals.css.

Confidence Score: 4/5

Safe to merge; all changes are UI-only with no data flow, authentication, or API contract changes.

The redesign is well-structured and the prefers-reduced-motion guards are a nice touch. The two minor defects — an unhandled clipboard rejection in CopyCommand and the nav not initialising to collapsed when the page loads already-scrolled — are cosmetic edge cases that won't break the page for the vast majority of visitors.

LandingFeatures.tsx (CopyCommand error handling) and LandingNav.tsx (initial collapsed state and offsetTop fragility).

Important Files Changed

Filename	Overview
frontend/src/landing/app/landing/page.tsx	Removes LandingStats and LandingCTA imports/usages; retains getGitHubRepoStats call (still needed for LandingHero starsLabel). Clean removal.
frontend/src/landing/components/LandingFeatures.tsx	Major redesign: adds ProductFrame with capture/render surface types, removes dual back/front panel layout, adds CopyCommand. The clipboard write in CopyCommand has no .catch() handler, causing a silent unhandled rejection on permission denial.
frontend/src/landing/components/LandingNav.tsx	Full rewrite: adds scroll-spy active state, sliding pill highlight, and collapse-on-scroll behaviour. Uses el.offsetTop for section detection which depends on the relative wrapper starting at y=0.
frontend/src/landing/components/LandingAbout.tsx	Adds chaos vs calm visual: drifting session cards (IntersectionObserver-gated) alongside a line-revealing YAML config. Client directive and intersection cleanup are both correct.
frontend/src/landing/components/LandingWorkflow.tsx	Adds per-stage proof card (StageArtifact) with key-based remount for animation replay; container de-emphasised from landing-card to plain hairline border. stageDot record and LifecycleIcon size prop are clean additions.
frontend/src/landing/components/LandingUseCases.tsx	Adds 5 new use-case entries (Steer/Orchestrate/Attach/Notify/Resume) and changes RADIUS to scale dynamically with card count using Math.round(N * 60). Also adds focus emphasis with vis^1.6 easing.
frontend/src/landing/styles/globals.css	Adds landing-merge-pulse, landing-commit-dot, landing-tab-float, and landing-shimmer keyframes with prefers-reduced-motion guards. landing-card gains layered gradient background and box-shadow. All well-formed.

Comments Outside Diff (3)

1. frontend/src/landing/components/LandingFeatures.tsx

   The clipboard write has no .catch() handler. If the user's browser denies permission (e.g., non-HTTPS origin, blocked permissions policy, or the API simply isn't available), the returned promise rejects silently and an unhandled rejection lands in the console — the button shows no feedback whatsoever.

2. frontend/src/landing/components/LandingNav.tsx, line 1068-1069 (link)

   Scroll-spy uses offsetTop rather than document-relative position

   el.offsetTop is relative to the element's offsetParent — in this layout that's the <div className="relative z-10"> wrapper in page.tsx. It works today because that wrapper starts at y=0, but any future top-level padding, margin, or structural change to the wrapper would silently shift when scroll-spy activates. Using el.getBoundingClientRect().top + window.scrollY would be robust regardless of wrapper positioning.

3. frontend/src/landing/components/LandingNav.tsx, line 1051-1060 (link)

   Nav collapses on first scroll if the page is loaded already scrolled down

   lastY is initialised to window.scrollY inside the effect, and the first synchronous call to evaluate() sees y === lastY so neither setCollapsed(true) nor the scroll-direction branches fire. If a user arrives via a fragment link and the page is already scrolled past 80 px at hydration time, the nav starts in the collapsed=false state and the side clusters remain visible/interactive until the next scroll event. A one-time check at mount (if (y >= 80) setCollapsed(true)) before entering the delta-based logic would close this gap.

_{Reviews (1): Last reviewed commit: "feat: redesign landing sections and add ..." | Re-trigger Greptile}