Meetmind — landing page

Next.js 16 (App Router, static export-ready) build of the Meetmind landing page from Figma (Frame 2147241524 in the Meetmind file).

Run it

npm install
FIGMA_TOKEN=figd_xxx npm run fetch-assets   # one-time: pulls the photos from Figma into public/images
npm run dev                                  # http://localhost:3000
npm run build && npm start                   # production

fetch-assets needs a Figma personal access token (Figma → Settings → Security → Personal access tokens, scope "File content: read-only"). It downloads every raster image used on the page and converts it to WebP. Icons and logos are already in public/icons and public/logos (exported from the same file as SVG). Until the photos are fetched, image slots show a soft tint.

Structure

src/app/            layout (fonts, metadata), page, globals.css (tokens + all motion)
src/components/     one file per section, plus Pic (next/image wrapper) and Reveal (scroll observer)
src/lib/images.ts   image manifest (paths + intrinsic sizes)
scripts/            fetch-figma-assets.mjs

Motion

• Appear effects: add data-reveal ("", "scale", "blur", "fade", "group") and an optional --d delay. A single IntersectionObserver in Reveal.tsx toggles .is-in.
• Illustration loops live inside .anim-scope and only play while on screen.
• Count-ups: data-count="92" inside a revealed element.
• Everything respects prefers-reduced-motion, and content is fully visible without JavaScript.

Performance

Server components everywhere except the nav, FAQ accordion and the reveal observer. Local fonts (Geist, Inria Serif italic, Caveat) with display: swap, AVIF/WebP via next/image, and only compositor-friendly animations (transform/opacity). Lighthouse on the production build: desktop performance 100; mobile (simulated slow 4G) 90+, CLS 0, accessibility 100, SEO 100.