Front End Developer [React or Next.js]

Front End Developer - SOW Project Summary The Company needs a frontend-only marketing site built against an existing backend, exposed as 6 documented, anonymous JSON endpoints (OpenAPI 3.1 spec + local mock provided). The site presents Product A and Product B and Product C (an enterprise/team offering) for corporate buyers, with self-serve checkout and code redemption. No accounts, sessions, or passwords are handled on this site — login lives in a separate dashboard application, linked to from the site pages. Scope • Frontend only. Backend is complete; consumed via the 6 endpoints below. • Copy (drafted), brand assets, and the API contract (OpenAPI 3.1 + mock) are supplied by the client. • Responsive, mobile-first build matching supplied brand guidelines. • Wireframes and visual design for all pages, directionally informed by reference sites the client will supply as stylistic benchmarks — unlimited revision rounds during the design phase, through to sign-off. • Header/footer on every page: Dashboard link (→ webapp) and legal links. This is the required minimum placement, not the only one — Dashboard links, CTAs, and other in-copy links follow whatever the supplied page copy specifies. Email addresses are live mailto: links wherever they appear (e.g. Contact, Corporate). Design Process • Developer produces wireframes, then high-fidelity visual designs, using reference sites supplied by the client as stylistic inspiration (not templates to copy). • Unlimited revision rounds on wireframes and design during this phase — no cap on rounds prior to design sign-off. • Design sign-off locks the visual direction; development begins once approved. Post-sign-off changes are handled as change requests, not open-ended edits. Pages # Page Notes 1 Landing Overview of the Company, Products A/B for individuals, Product C for companies 2 Product — A What it is, report contents, price (from /catalog), Buy button 3 Product — B Same structure as Product A 4 Corporate / Product C Product C pitch, team-pack buy buttons, contact form 5 Sample Report Redacted example report — image/PDF embed 6 Methodology Canonical “how the benchmark works” page, linked from product pages 7 FAQ Pre-empts Product C (privacy, min. volume, timing) and Product A/B (scoring, retakes) questions 8 Legal Privacy Policy, Terms, Refund Policy — static text, one template 9 Checkout Payment overlay + “Have a code?” field; handles single products and team packs 10 Redeem Code + email input 11 Thank-you / Confirmation Polls GET /orders/id until provisioned 12 404 Branded, not default 13 Blog / Insights hub Template + taxonomy for SEO-distributed content. Build now — publish/activate later 14 General Contact Catch-all contact/demo-request page beyond the Product C corporate form. Build now — activate later 15 Product Page — Template Generic, reusable product-page template (structure only) for adding future products beyond A and B without a rebuild Pages 13–14 are built as part of this scope but held back at launch — flagged in the build for later activation, not a future re-engagement. Page 15 is a new addition: a generic, reusable product-page template so future products can be added by populating the template rather than rebuilding page structure from scratch. API Integration Fully documented and mockable ahead of the live contract. Endpoint Purpose GET /catalog Live pricing — never hardcode POST /codes/validate Discount / gift code check POST /checkout Returns transaction id → site opens payment provider overlay GET /orders/id Thank-you page polls until provisioned POST /redeem Gift / company code redemption POST /leads Corporate contact form submission Errors Single JSON shape, enumerated codes (spec provided) Technical Requirements • Build starts immediately against the provided OpenAPI 3.1 spec / local mock — wireframes, pages, and static structure don't need to wait. The live contract, including pricing detail, follows once the developer contract is signed. • Mobile-first responsive; latest 2 versions of major browsers. • SEO basics: meta tags, sitemap.xml, robots.txt, structured data. • Analytics event tracking (GA4 or equivalent) wired in from the start. • Cookie / privacy consent banner (applicable regional data privacy regulations). • Componentized, modular page sections — a floating AI avatar widget is planned for a later phase and should be easy to add without a rebuild. • Currency display per payment provider’s locale handling — confirm approach with client. Client Provides • Site copy • Brand assets (logo, colors, fonts) and reference sites for design direction. • OpenAPI 3.1 contract + local mock; live contract on signing. Ideal Skills • Modern frontend framework (React/Next.js or similar). • Comfortable wireframing and translating reference inspiration into an original design, not just implementing a supplied mockup. • REST API integration against OpenAPI specs, including mocked endpoints. • Experience integrating a checkout-overlay payment provider (e.g. Paddle, Stripe Checkout, or similar). • SEO-conscious, accessible, responsive build practice.