Лендинг личного бренда специалиста по рекламе
Next.js 16 + Framer Motion: 6 анимированных кадров, ROI-калькулятор, Telegram-уведомления — без шаблонов и SaaS
Специалист по рекламе, который продаёт технический бэкграунд, не может продавать его через шаблонный сайт на Tilda. Технически грамотный клиент видит конструктор сразу — и это сигнал об уровне. Три конкретных требования: лаконичный и быстрый на мобайле; каждая заявка — мгновенное уведомление в Telegram; стек демонстрирует реальные возможности автора.
Спроектировать и собрать с нуля лендинг на современном стеке. Реализовать анимированный hero, кастомные UI-компоненты, ROI-калькулятор. Подключить лидогенерацию через Telegram Bot API без сторонних SaaS. Подготовить сайт к старту платного трафика: Метрика, Schema.org, политика 152-ФЗ.
Как это сделано
Позиционирование и архитектура секций
Выбор стека зафиксирован сразу: Next.js 16 App Router, Tailwind v4, Framer Motion v12 — весь код авторский, без конструкторов. Структура из 9 секций: Hero → Преимущества → Кейсы → ROI-калькулятор → Процесс → AI-стек → Инструменты → Контакты. Tone of voice: уверенный, конкретный, от первого лица. H1 "Больше лидов с того же бюджета" ставит задачу клиента в центр, а не список услуг.
Дизайн-система и тёмная тема без мигания
Все цвета вынесены в CSS-переменные: --page-bg, --page-fg, --card-bg, --modal-bg и ещё 8. При переключении темы меняется один класс на html, весь сайт реагирует без хардкода в компонентах. Проблема FOUC (мигание при SSR): стандартный next-themes на долю секунды показывает неверную тему. Решение — скрипт устанавливается в JS до первого рендера. Нативные OS-контролы (select, scrollbar) получают правильную тему без дополнительных CSS-правил.
Анимированный hero — 6 кадров, split layout, портретные кропы
Hero разбит на две панели: левая — полноэкранная bg-image, правая — контент. На мобайле правая панель скрыта, левая растягивается на весь экран. 6 кадров меняются через Framer Motion AnimatePresence: 3 тёмных + 3 светлых, crossfade 1.4s каждые 2.8s. Проблема мобайла: landscape-кадры при crop:center теряли главное — лицо уходило за край. Решение: отдельные портретные кропы 824×1527 с намеренной композицией. Оптимизация PNG → JPEG q=82: каждый кадр с 1.8 МБ до 120 КБ.
Кастомные UI-компоненты
LetterReveal: заголовок появляется снизу при попадании в viewport, каждая буква реагирует на hover. Одometer: слот-машина для счётчиков в hero, анимирует цифры как колонки прокручивающихся чисел, 4.5s ease-out. ROI-калькулятор: 4 ползунка (бюджет, CPL, средний чек, цикл сделки) → AreaChart обновляется в реальном времени.
Форма и инфраструктура лидогенерации
Выбор бюджета: нативный select на мобайле открывает OS-диалог — выбивается из визуального контекста формы. Заменён на grid из 5 кнопок: единый стиль на любом устройстве, валидация работает как у обычного поля. Telegram Bot API: POST /api/contact → fetch к api.telegram.org, форматированное Markdown-сообщение. Яндекс.Метрика: событие form_submit через window.ym() на успешной отправке.
Деплой и автоматизация
GitHub → Netlify: каждый git push в main запускает сборку и деплой (~1 мин). Конфигурация через netlify.toml + @netlify/plugin-nextjs. Переменные окружения TELEGRAM_BOT_TOKEN и TELEGRAM_CHAT_ID хранятся в Netlify. DNS: A-запись @ → 75.2.60.5 в Beget, CNAME www → адрес Netlify. SSL от Let's Encrypt автоматически.
Ключевые решения
Авторский стек vs конструктор
Tilda / Webflow — быстро, но шаблонно. Технически грамотный клиент видит конструктор сразу — это сигнал об уровне специалиста
Next.js 16 + авторский код — сайт является демонстрацией того уровня исполнения, который специалист продаёт клиентам
Для специалиста с техническим бэкграундом инструмент создания сайта — часть позиционирования
Кастомный выбор бюджета vs нативный select
Нативный select: на мобайле открывает OS-диалог в стиле системы — выбивается из визуального контекста формы
Grid из 5 кнопок: единый стиль на любом устройстве, валидация как у обычного поля
Форма — последний барьер перед заявкой. Нативный picker ломает ощущение целостности интерфейса в самый ответственный момент
Портретные кропы vs масштабирование landscape
Одно landscape-изображение масштабируется на мобайле: crop:center часто теряет главное — лицо или ключевой объект уходят за край
Отдельные портретные кропы 824×1527 с намеренной мобильной композицией, оптимизированные JPEG: с 1.8 МБ до 120 КБ каждый
Первый экран на мобайле — отдельная задача. Хорошая мобильная версия не адаптирует десктоп, а решает задачу заново
Сайт развёрнут на pr4web.ru. Каждый элемент сделан с намерением: от портретных кропов на мобайле до обработки FOUC при переключении темы. Инфраструктура лидогенерации работает — заявка из формы приходит в Telegram с именем, контактом и бюджетом. Сайт используется как якорный материал в переговорах с новыми клиентами.
Частые вопросы
Видео на фоне весит от 5 до 30 МБ, грузится долго и блокируется мобильными браузерами в режиме экономии трафика. Анимация из серии JPEG-кадров весит в 20-50 раз меньше, не требует автовоспроизведения и работает на любом устройстве. Визуальный эффект смены кадров не уступает видео, а производительность значительно лучше.
Калькулятор переводит абстрактное "увеличим конверсию" в конкретные числа для бизнеса посетителя. Человек сам вводит свой бюджет и CPL — и видит, сколько дополнительных лидов получит при оптимизации. Это снижает барьер до обращения: посетитель уже провёл расчёт и понимает потенциальный результат.
При отправке формы сервер делает POST-запрос к api.telegram.org с данными заявки. Бот мгновенно пересылает сообщение в нужный чат. Это работает без сторонних CRM и email-сервисов: уведомление приходит в течение секунды после отправки формы.