Лендинг личного бренда специалиста по рекламе

Контекст и проблема

Специалист по рекламе, который продаёт технический бэкграунд, не может продавать его через шаблонный сайт на Tilda. Технически грамотный клиент видит конструктор сразу - и это сигнал об уровне. Три конкретных требования: лаконичный и быстрый на мобайле; каждая заявка - мгновенное уведомление в Telegram; стек демонстрирует реальные возможности автора.

Что нужно было сделать

Спроектировать и собрать с нуля лендинг на современном стеке. Реализовать анимированный hero, кастомные UI-компоненты, ROI-калькулятор. Подключить лидогенерацию через Telegram Bot API без сторонних SaaS. Подготовить сайт к старту платного трафика: Метрика, Schema.org, политика 152-ФЗ.

Как решал

01

Позиционирование и архитектура секций

Позиционирование и архитектура секций

Выбор стека зафиксирован сразу: Next.js 16 App Router, Tailwind v4, Framer Motion v12 - весь код авторский, без конструкторов. Структура из 9 секций: Hero → Преимущества → Кейсы → ROI-калькулятор → Процесс → AI-стек → Инструменты → Контакты. Tone of voice: уверенный, конкретный, от первого лица. H1 "Больше лидов с того же бюджета" ставит задачу клиента в центр, а не список услуг.

02

Дизайн-система и тёмная тема без мигания

Дизайн-система и тёмная тема без мигания

Все цвета вынесены в CSS-переменные: --page-bg, --page-fg, --card-bg, --modal-bg и ещё 8. При переключении темы меняется один класс на html, весь сайт реагирует без хардкода в компонентах. Проблема FOUC (мигание при SSR): стандартный next-themes на долю секунды показывает неверную тему. Решение - document.documentElement.style.colorScheme устанавливается в JS до первого рендера. Нативные OS-контролы (select, scrollbar) получают правильную тему без дополнительных CSS-правил.

03

Анимированный hero - 6 кадров, split layout, портретные кропы

Анимированный 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 КБ.

04

Кастомные UI-компоненты

Кастомные UI-компоненты

LetterReveal: заголовок появляется снизу при попадании в viewport, каждая буква реагирует на hover. Скрытая проблема: обёртка каждого символа в display:inline-block ломала перенос слов - браузер переносил по буквам посреди слова. Решение: каждое слово обёртывается в whiteSpace:nowrap, внутри - буквы. Odometer: слот-машина для счётчиков в hero, анимирует цифры как колонки прокручивающихся чисел, 4.5s ease-out. ROI-калькулятор: 4 ползунка (бюджет, CPL, средний чек, цикл сделки) → Recharts AreaChart обновляется в реальном времени.

05

Форма и инфраструктура лидогенерации

Форма и инфраструктура лидогенерации

Выбор бюджета: нативный select на мобайле открывает OS-диалог в стиле системы - выбивается из визуального контекста формы в самый ответственный момент. Заменён на grid из 5 кнопок с react-hook-form setValue/watch: единый стиль на любом устройстве, валидация работает как у обычного поля. Telegram Bot API: POST /api/contact → fetch к api.telegram.org, форматированное Markdown-сообщение (имя, контакт, бюджет, задача). Яндекс.Метрика: событие form_submit через window.ym() на успешной отправке.

06

Деплой и автоматизация

Деплой и автоматизация

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 автоматически.

Ключевые решения

Результат

Сайт развёрнут на pr4web.ru. Каждый элемент сделан с намерением: от портретных кропов на мобайле до обработки FOUC при переключении темы. Инфраструктура лидогенерации работает - заявка из формы приходит в Telegram с именем, контактом и бюджетом. Сайт используется как якорный материал в переговорах с новыми клиентами.