feat(landing): add scroll-spy nav, motion, and a11y polish

[aruneem-bhowmick]

Summary

The landing page had every section in place, but nothing about scrolling through it responded: the nav didn't track where you were, nothing animated, and no one had run an accessibility or mobile pass since the sections landed. This PR closes that out. It also fixes a production build that had never actually succeeded.

Navigation

The nav bar now tracks which section is in view and highlights it live, using an IntersectionObserver-backed hook (useScrollSpy) instead of scroll-position math. It watches the eight landing sections in document order and reports whichever one is most visible. On routes that don't have those sections (the docs pages), it does nothing. An explicit activeId prop still overrides the live reading, so anything that pins a specific active link for testing keeps working.

Clicking an in-page nav link now scrolls smoothly to its target and updates the URL hash via history.pushState, rather than leaving it entirely to the browser's default jump. Links to other routes, external links, and anchors whose target isn't on the current page are left alone.

The active link's accent color was also broken: it referenced a CSS variable, --color-primary, that was never defined, so the "active" state rendered with no visible change at all. It now uses the pink accent with an underline.

Motion

A ScrollReveal component wraps every section after the hero and fades it up the first time it scrolls into view, built on shared keyframes in a new animations.css. Sections are fully visible before JavaScript runs, and stay that way if IntersectionObserver isn't available. The animation is additive; it's never a requirement for content to be readable.

The pipeline diagram's seven stages now reveal one after another as the diagram scrolls into view, staggered 80ms apart by stage index. The ripeness badges in the hero get a one-shot pulse on load (animation-iteration-count: 1, no loop). All three of these, along with the section fade-up, are disabled under prefers-reduced-motion: reduce. There's an explicit override for them in animations.css, on top of the site's existing global guard.

Accessibility and mobile

Added a dedicated axe pass over the assembled landing page and the docs index, plus a check that the landing page still passes axe with prefers-reduced-motion mocked true, and that ScrollReveal's sections render fully visible regardless of motion preference.

Playwright is now set up for end-to-end coverage, which didn't exist before. Seven specs check: the page loads with no console errors and the correct title; clicking the Setup link updates the hash and scrolls the section into view; the active nav link changes as different sections scroll through; the badges carry the pulse class on load; and, at a 375px viewport, the body has no horizontal overflow, the hamburger toggles the mobile menu, and the deployment table sits in a horizontally scrollable wrapper instead of overflowing the page.

Along the way

None of this was the point of the PR, but each item blocked either a green test suite or an actual working build, so it's fixed here instead of left for someone to trip over later.

• SetupTabs.module.css existed on disk and was already imported by its component, but had never been committed. A fresh clone was missing a file the setup section needs to render at all. It's committed now, with its custom properties rewritten to reference real design tokens instead of undefined variables that were silently falling back to light-theme hex values.
• Three tests were already failing before this branch touched anything. Two, in the CodeBlock and highlight suites, asserted against text that shiki splits across multiple <span> elements, which Testing Library's default matcher can't see across. The third, scaffold.test.tsx, was missing mocks for next/font/google, CodeBlock, and next/navigation, and separately asserted on text ("Lychee") the Home page has never actually rendered.
• npm run build had never completed successfully with real network access. Chasing it down turned up three unrelated problems: about a dozen <a> tags with a static internal href, which the Next.js ESLint plugin requires to be <Link>, plus two unescaped apostrophes; the dynamic docs route still typed params as a plain object instead of the Promise Next.js 15 requires; and the docs index route exported DOCS_INDEX_GROUPS directly, which Next's route-export validation rejects. It now lives in its own module.

Known issue

next build still fails prerendering /docs/[slug], with "A React Element from an older version of React was rendered" thrown from inside next-mdx-remote's MDX compilation. React itself is deduped to one version across the whole tree, so this looks like a next-mdx-remote / Next 15 / React 18 compatibility issue in the MDX pipeline, not anything this PR touches. next dev, next lint, tsc --noEmit, and the full test suite are all unaffected, and were used for every functional check in this PR, including the Playwright specs and manual screenshots at 375px and 1280px. Leaving this for a follow-up rather than widening the diff further.

Testing

• 306 Vitest tests passing across 29 files (7 intentionally skipped), with coverage enforced at an 80% floor across statements, branches, functions, and lines (currently 95.8% / 90.6% / 94.5% / 97.1%)
• 7/7 Playwright specs passing against next dev
• tsc --noEmit and next lint clean, aside from one pre-existing, non-blocking warning about using <img> instead of next/image
• No horizontal overflow at 375px or 1280px, checked with full-page screenshots