A copy of the landing page with interactive blocks and analytics - pixel perfect on Next.js with CMS and A/B preparation

Initial situation: there is a competitor’s public reference landing page (1 page + popups + policy page) that converts well. We need to make a functionally and visually as close copy as possible for our product, but with replacement of content, branding, application forms and integrations. There is no access to the sources, only the reference URL and materials on our brand (logo, texts, colors).

Technical environment and subject area: B2B SaaS, main traffic is mobile. Our current stack is Next.js 14 (App Router), TypeScript, Tailwind, Vercel. Content must be edited by marketing without a developer.

What to do:
1) Parse the reference and reproduce the structure and behavior of the page - grids, typography, indents, animations, sticky elements, popups, accordions, sliders, forms, loading states and errors.
2) Implement the page in Next.js 14 with SSR/SSG where appropriate, optimize Core Web Vitals, ensure correct operation on iOS Safari and Android Chrome.
3) Connect a headless CMS (Sanity or Contentful - suggest the best option for the requirements below) and add manageable blocks to it: hero, benefits, cases/reviews, FAQ, tariffs, integration block, footer, popup texts, UTM header dynamics. There must be preconditions so that marketing can change the order of some sections and turn off sections without deployment.
4) Lead generation forms: 2 forms (in hero and in popup) with validation, anti-spam protection (hCaptcha or Cloudflare Turnstile), sending to Slack (webhook) and Google Sheets (via API/Apps Script - suggest an option), plus an event in GA4.
5) Analytics and preparation for A/B: set up dataLayer/events (viewing sections, clicks on CTAs, submitting forms, opening pop-ups), insert UTM/gbraid/wbraid, provide the ability to connect a Google Optimize analogue (for example, GrowthBook or VWO - only preparing layers and stable selectors, without a full experiment).
6) SEO minimum: meta tags, OG, schema.org (Organization + FAQPage where applicable), sitemap/robots, correct canonical, /privacy and /terms pages.

Restrictions:
- You cannot use visual builders like Tilda/Webflow and you cannot copy someone else’s code directly. The copy is made through analysis of the behavior, styles and markup in the browser.
- You need a clean repository with a clear structure, without unnecessary dependencies and without heavy UI libraries, if you can get by with Tailwind and small utilities.
- The layout must be pixel perfect relative to the reference within the acceptable discrepancy and taking into account the replacement of fonts/brand.

Specific result:
- Git repository with the Next.js project, instructions for launching and deploying to Vercel, environment file .env.example.
- Deployed staging on Vercel + access to the CMS with established content types and filled in demo data.
- Ready page / and service pages /privacy, /terms.

Measurable acceptance criteria:
- Lighthouse (mobile) on staging: Performance >= 85, Accessibility >= 95, Best Practices >= 95, SEO >= 95 (for a typical run, without external scripts except analytics and antispam).
- Pixel-perf: comparison of 6 key screens (360x800 and 1440x900) - differences in grid/indents no more than 4px for the main blocks.
- All interactive references are reproduced: pop-ups, accordions, sticky, anchors, form states, smooth animations without twitching.
- Forms: correct validation, protection from bots, leads are dropped in Slack and Google Sheets, events form_view, form_start, form_submit, form_error go to GA4.
- CMS: marketing changes the texts and order of sections, changes are visible on staging after publishing the content without code edits.

Stages:
- Reference analysis and block/state specification.
- Implementation of UI and adaptive.
- CMS integration and content.
- Integration of forms and analytics.
- Polishing, cross-browser testing, final acceptance according to the checklist.