docs(website): redesign homepage as the Verse direction

[jtenniswood]

Summary

Redesigns the mecatl.dev homepage. The page keeps the approved copy from #1272 verbatim and rebuilds the presentation as a type-led, parallax page in the brand palette from the colophon: charcoal ground, teal-bright for interaction and accent words, copper for eyebrows and numerals, rope for the install command.

• Hero: eyebrow, four-line headline with the accent phrase in teal, subtitle, and the install command as the primary call to action with a working Copy button; Mecatito stands beside the headline. The command and Copy are repeated in the closing section.
• Statement, outcomes, capabilities, deployment, Stacklok/ToolHive: the same content as today, set as editorial indexes with small mono eyebrows and hairline rules. Three display-size moments only (hero, statement, closing); everything else steps down to a calm scale.
• Motion: parallax ghost words and staggered reveals via a single useParallax hook (one passive scroll listener, one rAF, transform-only, paused when hidden, disabled under prefers-reduced-motion and below 768px). Content is never hidden without JavaScript.
• Mobile: a phone-specific layout (six-line headline, stacked install block, compact rows, sticky install bar that appears after the hero and hides at the closing block), tap targets ≥ 44px.
• Chrome: the page renders its own nav and footer rather than the Docusaurus Layout so the composition is unbroken; docs pages keep the standard navbar.

Large areas use only --mec-bg; surface-1/surface-2 are not used as section fills, per the style guide.

Files

• website/src/pages/index.tsx, website/src/pages/index.module.css — the new homepage
• website/src/components/home/hooks.ts — parallax, reveal, centred-index, copy and sticky-bar hooks
• website/static/img/mecatito-cutout.png — transparent cutout of the mascot (the original has a cream background). 1.2 MB; worth optimising before merge.
• website/static/img/logo-line.svg — monochrome line-art version of the mark used in the nav and footer

Validation

• npm run typecheck — clean
• npm run build — clean: no broken links or anchors, page rendered server-side
• Checked at 360, 390, 768, 1024 and 1440 with no horizontal overflow, exactly one h1, Copy buttons writing the command to the clipboard, and reduced motion rendering the page complete and static

Notes for review

• Run task site:dev and open http://localhost:3001/ — the parallax and the sticky mobile bar only show in a real browser.
• The colophon page and custom.css tokens are unchanged; the homepage reads the same palette values.

🤖 Generated with Claude Code

[danbarr]

A note here as we continue to iterate: currently, this branch restyles the header and footer only for the index page; moving into the docs reverts to the default Docusaurus stylings, which is jarring.

My preference would be to continue to leverage the Docusaurus navbar/footer constructs (with the items as defined in docusaurus.config.ts) and properly override the stable nav/footer classes via the global custom.css. That way, the header/footer style is carried throughout the site including the docs plugin.