Копия лендинга с интерактивными блоками и аналитикой - пиксель-перфект на 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 и наполнение.
- Интеграции форм и аналитики.
- Полировка, тестирование кроссбраузерности, финальная приёмка по чек-листу.