Копія лендингу з інтерактивними блоками та аналітикою - піксель-перфект на Next.js з CMS та A/B підготовкою

Вихідна ситуація: є публічний референсний лендинг конкурента (1 сторінка + попапа + сторінка політики), який добре конвертує. Потрібно зробити функціонально та візуально максимально близьку копію для нашого продукту, але із заміною контенту, брендингу, форм заявок та інтеграцій. Доступу до вихідних джерел немає, тільки URL референсу та матеріали за нашим брендом (логотип, тексти, кольори).

Технічне середовище та предметна область: B2B SaaS, основний трафік – мобільний. Наш поточний стек - Next.js 14 (App Router), TypeScript, Tailwind, Vercel. Контент має редагуватись маркетингом без розробника.

Що потрібно зробити:
1) Розібрати референс і відтворити структуру та поведінку сторінки - сітки, друкарня, відступи, анімації, sticky-елементи, попапи, акордеони, слайдери, форми, стани завантаження та помилок.
2) Реалізувати сторінку в Next.js 14 з SSR/SSG де доречно, оптимізувати Core Web Vitals, забезпечити коректну роботу на iOS Safari та Android Chrome.
3) Підключити headless CMS (Sanity або Contentful - запропонувати оптимальний варіант під вимоги нижче) та винести до неї керовані блоки: hero, переваги, кейси/відгуки, FAQ, тарифи, блок інтеграцій, футер, тексти попапів, UTM-динаміка заголовків. Повинні бути передумови, щоб маркетинг міг змінювати порядок деяких секцій та вимикати секції без деплою.
4) Форми лідогенерації: 2 форми (в hero і в попапі) з валідацією, захистом від спаму (hCaptcha або Cloudflare Turnstile), відправкою до Slack (webhook) та Google Sheets (через API/Apps Script - запропонувати варіант), плюс подія в GA4.
5) Аналітика та підготовка до A/B: налаштувати dataLayer/події (перегляд секцій, кліки по CTA, відправлення форм, відкриття попапів), прокинути UTM/gbraid/wbraid, забезпечити можливість підключення Google Optimize-аналогу (наприклад, GrowthBook або VWO - лише підготовка шарів та експериментів).
6) SEO-мінімум: мета-теги, OG, schema.org (Organization + FAQPage де застосовно), sitemap/robots, коректні canonical, сторінки /privacy та /terms.

Обмеження:
- Не можна використовувати візуальні білдери типу Tilda/Webflow і не можна копіювати чужий код безпосередньо. Копія робиться через аналіз поведінки, стилів та розмітки у браузері.
- Потрібен чистий репозиторій зі зрозумілою структурою, без зайвих залежностей та без важких UI-бібліотек, якщо можна обійтися Tailwind та невеликими утилітами.
- Верстка має бути піксель-перфект щодо референсу в межах допустимої розбіжності та з урахуванням заміни шрифтів/бренду.

Конкретний результат:
- Репозиторій Git з проектом Next.js, інструкція із запуску та деплою на Vercel, файл оточення .env.example.
- Розгорнутий staging на Vercel + доступ до CMS із заведеними типами контенту та заповненими демо-даними.
- Готова сторінка / та службові сторінки /privacy, /terms.

Вимірні критерії приймання:
- Lighthouse (мобайл) на staging: Performance > = 85, Accessibility > = 95, Best Practices > = 95, SEO > = 95 (на типовий прогон, на типовий прогін, на типовий прогін, на типовий прогін, на типовий прогін.
- Pixel-perf: порівняння 6 ключових екранів (360x800 та 1440x900) - розбіжності по сітці/відступах не більше 4px для основних блоків.
- Всі інтерактиви референсу відтворені: попи, акордеони, sticky, якорі, стани форм, плавні анімації без смикань.
- Форми: коректна валідація, захист від ботів, лід падає в Slack та Google Sheets, у GA4 йдуть події form_view, form_start, form_submit, form_error.
- CMS: маркетинг змінює тексти та порядок секцій, зміни видно на staging після публікації контенту без правок коду.

Етапи:
- Аналіз референсу та специфікація блоків/станів.
- Реалізація UI та адаптива.
- Інтеграція CMS та наповнення.
- Інтеграції форм та аналітики.
- полірування, тестування кросбраузерності, фінальне приймання за чек-листом.