Next.js Developer — 30+ Page Marketing Site from Figma

Overview We're building a Web3 marketing website. The Figma design is complete and approved: aroud 30 pages, visually rich, with an animated hero and interactive image treatments (hover and click states) used throughout the site. To be clear on scope: this is a marketing site, not a dApp. No wallet connection, no on-chain data, no smart contract interaction. We need a strong Next.js developer with real motion and interaction skills — not a Web3 specialist. The design is final. We're not looking for redesign input or creative alternatives — we need faithful implementation, with your expertise applied to code architecture, animation quality, and performance. Figma Dev Mode access is provided to the selected freelancer. Approach We're Looking For This is not 30 bespoke pages. The design reuses sections heavily — hero variants, feature grids, CTA bands, card layouts, interactive image galleries. We want a reusable component library built first, then pages composed from it, then those components exposed to our CMS so our marketing team can assemble and edit pages without a developer. Please bid with that structure in mind and tell us how you'd break it down. Scope of Work - Build a Next.js (App Router) site from the approved Figma design - Establish design tokens and a reusable component library before page assembly - Implement all pages, matching spacing, typography, colors, radii, and shadows to the Figma spec - Implement the animated hero and all interactive image behaviors (hover and click states) across the site - Integrate Payload CMS so marketing can edit copy, images, and page composition - Responsive across desktop, tablet (max-width: 1024px), and mobile (max-width: 768px) - Responsive navigation: horizontal nav on desktop; accessible hamburger menu with smooth transition below 1024px - Export, optimize, and correctly serve all image and icon assets per our naming conventions (below) - GitHub repository connected to Vercel, with working preview and production deployments Technical Requirements - Framework: Next.js (App Router) with TypeScript - CMS: Payload — chosen specifically because content schemas live in the repo as TypeScript. Please do not propose a GUI-configured SaaS CMS; keeping the schema in version control is a hard requirement, as we intend to extend the CMS ourselves using AI coding tools. - Database: Postgres (Neon or Vercel Postgres). Please include provisioning in your plan. - Styling: CSS Modules with design tokens as :root CSS variables, BEM-style class naming. No Tailwind, no Bootstrap, no component UI kits. We want readable, hand-written CSS we can maintain long-term. This is deliberate — please confirm you're comfortable with it. - Animation: one library only — GSAP (with ScrollTrigger) or Motion. Tell us which you'd use and why. Simple hover transitions should be pure CSS, not JS. - Motion accessibility: full prefers-reduced-motion support is required. Animations must degrade gracefully, not break layout. - Rendering: all page copy must be server-rendered and present in the initial HTML. Content that only appears after client-side JS executes is not acceptable — this is an SEO requirement and we will verify it. - Performance: next/image for all raster assets, lazy loading below the fold, no layout shift caused by animation. We expect Lighthouse mobile performance ≥ 85 on a representative visual-heavy page and will test for it. - Semantic HTML5 (header, nav, main, section, footer) - Accessible interactions: real "button" elements, aria-expanded on the nav toggle, visible focus states, full keyboard navigability. Anything clickable must be reachable without a mouse. - No jQuery. No unnecessary dependencies. Text Baked Into Images — Important Some Figma sections render headline or body text as part of an exported image. All such text must be rebuilt as live HTML text in heading tags (h1 through h6) or paragraph tags so it is crawlable and selectable. Match the design as closely as possible with web fonts and CSS. Where an effect genuinely cannot be reproduced in CSS, flag it for us rather than falling back to an image. We've accepted that a small number of type treatments may differ slightly from Figma — crawlable text takes priority over pixel-exact type effects. SEO Requirements Our SEO team edits content directly, so SEO fields must live in the CMS alongside the copy: - Per-page editable fields: title tag, meta description, canonical URL, OG image, and social card metadata — wired to Next.js's metadata API - Editable alt text on every image field in the CMS - Auto-generated sitemap.xml and robots.txt - JSON-LD structured data where appropriate (Organization, Article, BreadcrumbList) - Redirect management in the CMS — our team can edit page slugs, so slug changes must not produce 404s - Clean, keyword-relevant URL paths — no query-string page IDs - Exactly one h1 per page, with sequential heading levels. Because pages are composed from reusable blocks, section components must expose a configurable heading level rather than hardcoding one — heading order must stay valid regardless of how blocks are arranged. Asset naming convention (applies to files as served, not just source files): - Lowercase only - Hyphens as word separators, never underscores or spaces - Short and descriptive: blue-widget-front-view.jpg, not IMG_2841.jpg or a long keyword string - Organized in a logical folder hierarchy - Alt text: descriptive natural language, no keyword stuffing Deliverables 1. GitHub repository with clean, readable commit history, transferred to our ownership on completion 2. Working Vercel deployment — production plus preview deployments on pull requests 3. Reusable component library, consistently structured and exposed to Payload as page-building blocks 4. Payload CMS configured with content models, SEO fields, and redirect management 5. All optimized assets, correctly named, in the repo 6. README covering local setup, project structure, how to add a page, and how to add a new CMS block 7. Lighthouse score of 85 or higher Structure & Milestones We want a paid pilot phase before committing to the full build: Phase 1 (pilot) - Design tokens and core component library foundation - Global layout with responsive navigation - Payload set up with content models for the pages in this phase - 3 pages, including the most interaction-heavy page in the design - Working Vercel deployment Phase 2+ — remaining pages in agreed batches. Phase 1 tells us whether our quality bar and working relationship line up. We'd much rather continue with one person through the whole project, and strong Phase 1 delivery leads straight into the rest. Requirements for Applicants - Demonstrated Next.js App Router experience on production marketing sites - Portfolio evidence of substantial animation and interaction work — this is central to the project - Payload experience strongly preferred; comparable schema-as-code CMS experience considered - Comfortable writing hand-authored CSS without utility frameworks - Experience building from Figma Dev Mode handoff at scale - Git, GitHub, and Vercel proficiency To Apply Please include: 1. Two or three live sites you've built with comparable visual and interaction complexity, with repos if public 2. Which animation library you'd choose here, and why 3. How you'd structure the component library so 30+ pages of reused sections stay maintainable and CMS-editable 4. How you keep an animation-heavy page performant on mid-range mobile 5. Your price and timeline for Phase 1 only, plus a rough range for the full build We read the technical answers first — please skip generic templated intros.