Next.js Landing Page with Interactive 3D Animation

PROJECT DESCRIPTION About the project We are YWYW (Your Will, Your Way), a new education-first estate-planning portal. We need one person to design and build a single, premium landing page. The page has one job: get visitors to register for a free educational webinar. The visual direction and the full page specification already exist — we will give both to you. Your job is to elevate them into a high-end, animated, production-ready page and build it. Please do not bid if you only design (Figma) or only develop. We need both skills, from the same person. What makes this project different The look and feel is already chosen — a modern, product-style direction (think Apple / Linear / Ramp). You have freedom to make it feel even more premium, but not to invent a different style. The content, section order, copy, and technical rules are already written in a detailed specification document (provided). It is the source of truth. The hero section needs a real, interactive 3D animation that visually explains estate planning — running live in the browser ([login to view URL] / React Three Fiber / Spline). Not a video. Not a flat illustration. Who we're looking for A creative developer / design engineer — someone who both designs beautiful interfaces and writes the front-end code, and who specifically works with 3D / WebGL on the web. A general Figma designer, or a developer who cannot design, is not a fit for this project. Deliverables Stage 1 — Direction proof (for our sign-off before the full build): the hero with its 3D concept shown as a working/interactive prototype, plus 1–2 key sections, so we can approve the look, the 3D direction, and the layout before you build everything. You choose the medium (live prototype or Figma) — whatever shows the 3D best. Stage 2 — Full build: the complete landing page (all sections per the provided spec), built in Next.js. The 3D animated hero, running live and performant. Light and dark theme. Handoff: the full source-code repository and any design files. We own all deliverables. Non-negotiable technical requirements (from the spec) [login to view URL] (App Router), server-rendered. The upcoming-webinars section's content and its real links must be present in the initial HTML before JavaScript runs — this is critical for SEO and will be checked in the page source. Mobile-first and responsive — tested at 320 / 375 / 768 / 1024 / 1440 px. Accessible (WCAG 2.1 AA): keyboard navigation, visible focus states, alt text. Motion plays once, never loops distractingly, and is fully disabled under prefers-reduced-motion. The 3D hero must not hurt mobile performance or become the largest-contentful-paint element, and must have a graceful fallback if it fails to load. The page sells nothing — no pricing, no checkout. Its single goal is free-webinar registration. Approved copy from the spec must be used verbatim. Design direction (provided) Visual concept: "Digital First Confidence" — clean, modern, mobile-first, product-style. Reference feel: Apple, Linear, Ramp. Type: Sora (headings) + DM Sans (body). Colour: primary blue #1366E8, teal accent #06C6C9, on white / light-blue surfaces (dark mode included). Our logo is provided and must never be redrawn or restyled. Pushing the polish higher than the reference is welcome. What we'll provide The full landing-page specification (sections, copy, behaviour). The chosen visual direction as reference. Logo files (light + dark). Brand voice / tone guide. The goal for the 3D hero (what it must communicate) and reference sites — the creative concept is yours to propose. (Full documents are shared with shortlisted candidates.) Working terms Two stages with our written sign-off between them (see Deliverables). Multiple rounds of revisions included at each stage — we want someone comfortable iterating with us until we're happy, not capped at two. We own the code repository and all design files on completion. How to apply — include ALL of the below (bids missing these are ignored) Start your proposal with the word LEGACY so we know you actually read this brief. LIVE URLs (links, not screenshots): (a) a site with a real, interactive 3D/WebGL element we can move/spin in the browser; (b) a [login to view URL] site you built where the content is visible in the page source (server-rendered); (c) your most premium-looking work. In 3–4 sentences, your own idea for a 3D hero that explains estate planning, and how you'd approach it. Your timeline and your quote, split into Stage 1 and Stage 2. Budget & timeline [SET YOUR BUDGET BAND] · [SET YOUR TIMELINE] Skills / tags [login to view URL] · React · [login to view URL] / WebGL · UI/UX Design · Figma · Framer Motion · Responsive Web Design · Front-End Development

Project ID: 40616753