Лендинг по макету: пять ширин, три формы, заявки в Telegram

Компания продаёт индивидуальные цифровые системы для управления бизнесом — финансы, CRM, операции, аналитика, склад. Нужен был лендинг с заявкой на консультацию. Дизайнер заказчика подготовил Figma-макет с дизайн-системой — токены, типографика, компоненты, пять ширин, прототипы меню и модалок — и спецификацию к нему.

Задача формулировалась жёстко: воспроизвести макет, а не «сделать по мотивам». Никаких своих отступов, кеглей и эффектов.

Как сверяли с макетом

Каждая секция сравнивалась с фреймами Figma на 1440, 1024, 768, 390 и 360 — скриншот к скриншоту, с таблицей высот «макет / наше». Все секции в допуске ±4 px, горизонтального переполнения нет ни на одной ширине. Единственное осознанное отклонение — чекбокс согласия на обработку персональных данных во всех трёх формах: в макете он был только в модалке, заказчик решил иначе.

Что внутри

• Статика на Astro и Tailwind без JS-⁠фреймворка: меню-шторка, модалки, маска телефона, карусель и параллакс — на ванильном TypeScript, с отключением анимаций при prefers-reduced-motion.
• Три формы заявок — в первом экране, в финальном блоке и в модалке — уходят на небольшой сервис на NestJS и дальше в Telegram. Валидация, honeypot, ограничение частоты, источник формы и UTM-⁠метки в каждой заявке.
• Согласие на обработку персональных данных фиксируется по 152-⁠ФЗ: версия политики, время и источник — в журнале без самих данных и строкой в сообщении.
• Яндекс Метрика с целями: отправка, первый ввод и ошибка по каждой форме, клики по телефону и мессенджерам.
• Три Docker-контура за Traefik с HTTPS, защита от запуска dev-⁠команд на проде, security-заголовки nginx.
• Тесты: 21 модульный и 14 сквозных на сервисе заявок, отдельные — на маску телефона, карусель, параллакс и цели Метрики. Финальное ревью всей ветки: критичных замечаний ноль, важные закрыты до сдачи.

Результат

Лендинг работает на продакшене заказчика и принимает заявки. Базовая версия — семь секций, сервис заявок, инфраструктура — была собрана за три рабочих дня.