feat(landing): add interactive app preview to hero

[tyulyukov]

Summary

Inspired by t3code#2349 by @maria-rcks. Per the request, the upstream PR's code was used as the idea — not a 1:1 port — because MarCode's landing is Next.js + React + Tailwind v4 while upstream is Astro + vanilla JS + CSS.

Adds an interactive app preview directly underneath the existing hero CTA: a faithful, MarCode-branded recreation of the actual app shell — sidebar with projects/threads, chat timeline with user/assistant/tool turns, composer with model/access/branch controls, and a checkout bar at the bottom.

What's interactive

• Thread switching: click any thread in the sidebar → header title, timeline, composer placeholder, branch, worktree, and access mode all swap together. Pure `useState`, no animations layered on top.
• Project collapse: click any project header → its thread group expands/collapses with a rotating chevron.
• Status pills: Working / Completed states track the active thread, with brand-colored borders and a pulsing dot for Working.

Why not a 1:1 port?

The upstream PR is 3,977 lines of Astro template + 920 lines of vanilla client-side JavaScript + 2,300 lines of hand-written CSS, all targeting T3 Code's Astro marketing app. MarCode's landing is a Next.js 15 + React 19 + Tailwind v4 stack, so the upstream Astro/JS/CSS payload doesn't translate. Per the user's instruction ("take the code as inspiration") this PR captures the design intent — interactive shell preview replacing a screenshot — but rebuilds it against the existing MarCode brand tokens and component patterns:

• Brand colors from `globals.css` (`@theme inline`): `fresh-syntax`, `curious-sky`, `dream-shift`, `sunbyte`, `rebel-mint`, `neo-pine`, `noir`, `mindspace`.
• Typography: Klaster Sans for the heading, Inter for the body.
• Stack: `useMemo` + `useState`, no client-side imperative DOM, no external libs beyond `lucide-react` (already a dep).

Files

File	Purpose
`apps/landing/src/components/AppPreview/data.ts` (new, ~270 lines)	`PreviewThread` / `PreviewProject` / `PreviewTurn` shapes + fixture set covering 4 projects, 8 threads, and turn scripts that reflect recent MarCode work (this app preview, the chat minimap, the rate limit meter, etc.).
`apps/landing/src/components/AppPreview/AppPreview.tsx` (new, ~470 lines)	The interactive component itself.
`apps/landing/src/components/Hero.tsx`	Drops `min-h-[85vh]`, mounts the preview in a `max-w-5xl` container below the existing CTA stack.

Verified with Playwright (1280×1100)

• Initial render: `marcode-landing` thread active, full user / assistant / tool turn timeline visible, "Working" pill on top-right.
• Click "Wire the chat minimap rail into the timeline" → header, timeline, composer placeholder ("Keep the rail collapsed by default and animate the active dash."), branch (`feat/chat-minimap`), Access mode (`Auto-accept edits`) all swap instantly.
• Click the `lawn` project header → its threads collapse, chevron rotates.
• `bun --cwd apps/landing run typecheck` — clean.
• `bun --cwd apps/landing run build` — clean (`/` route gains 23.2 kB additional first-load JS).

Test plan

• Typecheck
• Production build
• Manual verification (Playwright)
• Reviewer: `bun run dev:landing` → http://localhost:3100 → click around the preview, scroll, resize down to mobile.

Upstream

Original PR: pingdotgg#2349