feat: docs-style features page with outline + content

[h4yfans]

Summary

Replaces the card-grid /features page with a docs-style two-column layout — sticky outline on the left, numbered+ruled feature list on the right. Content is driven by a typed data file ported from the sibling memry repo's FEATURES.md, so adding a feature in the app updates every count and section on the marketing page automatically.

Framed as "Every feature, so far." with a pre-release pill and a "growing every week" cadence message — explicit that Memry is in active development.

What's in the box

• Data layer: src/lib/features-data.ts — typed port of 94 features across 9 sections (Tasks, Projects, Inbox, Notes, Journal, Reminders, Search, Navigation & UI, AI). Counts are computed from the data, never hardcoded.
• Scrollspy hook: src/hooks/useScrollspy.ts — reusable IntersectionObserver hook with a suppressFor escape hatch so click handlers can silence scrollspy during smooth-scroll.
• Desktop outline: sticky two-level nav on the left. Active section auto-expands to show its features inline; inactive sections collapse to just their title + count. aria-current="location" on the active item.
• Mobile outline: sticky pill below the header showing "Tasks · 1 of 9". Tap to open a backdrop dropdown with the same two-level outline. Focus trap + aria-modal + Escape-to-close + return focus to pill.
• Hero: eyebrow date, pre-release pill, serif title, computed count subtitle, stats row.
• Bottom CTA: "And there's more." with the existing centered WaitlistForm.
• Header nav: added Features as the first nav link so visitors can find it.
• Footer: fixed Features link (was pointing at #features homepage anchor — now points to /features).
• SEO: updated PAGE_META.features title/description for the new framing, trimmed to 159 chars.

A11y

• Single h1 in the hero, h2 per section, h3 per feature
• aria-label="Features outline" on the desktop nav and mobile dialog
• role="dialog" + aria-modal="true" + focus trap on the mobile dropdown
• Escape returns focus to the pill; body scroll locked while dropdown is open
• prefers-reduced-motion honored in both the imperative scroll handlers AND the declarative Framer Motion animations (via <MotionConfig reducedMotion="user">)

What this replaces

• Old src/pages/Features.tsx was 369 lines of card-grid layout with PILLARS and SUPPORTING constants.
• New page shell is 42 lines that composes 6 small components + the data file.

Spec + plan

• Spec: docs/superpowers/specs/2026-04-07-features-page-design.md
• Plan: docs/superpowers/plans/2026-04-07-features-page.md

Test plan

• Load /features on desktop — hero, sticky outline, two-column layout all render
• Scroll through sections — active section in outline auto-expands, sub-feature highlight follows the scroll
• Click an outline item — smooth scroll to the target; outline stays highlighted during the scroll (scrollspy briefly suppressed)
• Deep link /features#projects — jumps directly to the Projects section
• Resize to mobile (< 768px) — desktop outline hides, sticky pill appears
• Tap the pill — dropdown opens with backdrop scrim, body scroll locks
• Tap a section in the dropdown — closes the sheet and scrolls to the target
• Press Escape — dropdown closes, focus returns to the pill
• Tab through the open dropdown — focus cycles within it, does not leak to the page behind
• Enable prefers-reduced-motion in the OS — section reveal animations skip, outline clicks become instant jumps
• Verify header nav now includes "Features" link, clicking it loads the page
• Verify footer "Features" link routes to /features (not #features)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
memrynote-landing	Ready	Preview, Comment	Apr 7, 2026 0:41am