Структура лендинга

У нас есть рабочий проект с пустой приветственной страницей и сервер, на который мы умеем деплоить. Теперь превратим заготовку в настоящий лендинг.

Что такое лендинг

Лендинг (landing page) — это одностраничный сайт с одной целью: привести посетителя к конкретному действию. Купить, оставить заявку, записаться на демо. Всё на странице работает на эту цель — от заголовка до последней кнопки.

В отличие от обычного сайта, у лендинга нет разветвлённой навигации. Посетитель скроллит сверху вниз и постепенно получает ответы на свои вопросы: что это, зачем мне, кто уже пользуется, сколько стоит, как начать.

Из чего состоит лендинг

У лендингов есть устоявшаяся структура. Не обязательно использовать все секции — но полезно знать, какие бывают, чтобы выбрать нужные.

Вот 10 типичных секций:

1. Header — навигация, логотип, кнопка действия

2. Hero — первый экран: заголовок, описание, главная кнопка. То, что видит посетитель, не прокрутив страницу

3. Benefits — преимущества продукта, обычно в виде карточек с иконками

4. Portfolio — примеры работ или кейсы клиентов

5. Services — описание услуг или тарифов

6. Proof — отзывы, логотипы клиентов, цифры — всё, что подтверждает доверие

7. Pricing — тарифы и цены

8. FAQ — ответы на частые вопросы

9. CTA — финальный призыв к действию с формой или кнопкой

10. Footer — контакты, ссылки, юридическая информация

Необязательно использовать все десять. Для нашего проекта мы возьмём пять обязательных:

• Hero — первое впечатление, главный оффер
• Proof — почему стоит доверять
• Benefits — что получит клиент
• FAQ — снимаем возражения
• CTA — форма заявки

Этого достаточно для полноценного лендинга. Остальные секции можно добавить позже — просто попросите агента.

Как это работает в вайб-кодинге

В традиционной разработке дизайнер рисует макет, потом разработчик верстает каждую секцию вручную. В вайб-кодинге вы описываете агенту, что хотите видеть, — он генерирует код, и вы проверяете результат.

Качество результата зависит от промпта. Чем точнее вы опишете каждую секцию, тем ближе результат к тому, что вы задумали.

Вот что полезно указать агенту:

• Какие секции нужны и в каком порядке
• Что внутри каждой секции — заголовки, тексты, количество карточек
• Тон и стиль — минималистичный, яркий, корпоративный
• Какую задачу решает лендинг — агент лучше подберёт тексты, если знает контекст

Несмотря на это, очень часто агенты рисуют шаблонно. Попросите сделать сразу 5 готовых вариантов — возможно, вас это вдохновит, или вы сможете удачно скомпоновать идеи. Этот же подход работает, если идей вообще нет.

Составляем промпт

Допустим, мы делаем лендинг для вымышленного сервиса доставки еды. Вот как может выглядеть промпт:

Создай лендинг для сервиса доставки здоровой еды
"FreshBox". Страница должна содержать 5 секций:

1. Hero — заголовок "Здоровая еда с доставкой
   за 30 минут", подзаголовок с описанием сервиса,
   кнопка "Попробовать бесплатно"

2. Proof — логотипы 4 компаний-партнёров
   (можно заглушки) и цифра "10 000+ доставок"

3. Benefits — 4 карточки с иконками:
   быстрая доставка, свежие продукты,
   персональное меню, без подписки

4. FAQ — 4 вопроса-ответа: как заказать,
   зоны доставки, аллергии, отмена заказа

5. CTA — форма заявки: имя, телефон,
   чекбокс согласия, кнопка "Оставить заявку"

Стиль: современный, светлый, минималистичный.
Используй существующий стек проекта
(React, TanStack). Пиши на TypeScript.

Настоятельно не рекомендуем копировать этот промпт один в один — придумайте свой продукт. Главное — соблюдите очерёдность и порядок компонентов. Рекомендуется указывать именно React, TanStack и TypeScript в качестве стека, чтобы в дальнейшем у нас не было расхождений. Каждый раз, даже при одинаковом запросе, агент будет генерировать что-то разное. Но добавьте именно эти слова в промпт — так у нас будет похожий опыт запуска и управления проектом.

Запускаем

После того как агент сгенерирует код, проверяем локально:

user@computer:~/landing$ docker compose up --build

Откройте http://localhost в браузере. Вы должны увидеть страницу с пятью секциями вместо приветственного текста. Вот пример того, что может получиться:

Что проверить

Прокрутите страницу и убедитесь, что все секции на месте. Если возникла ошибка или страница не открывается — напишите об этом агенту и общайтесь с ним, пока всё не заработает. Он сам предложит несколько решений — следуйте его советам.

Если страница открылась, но что-то не нравится — опишите агенту конкретно: «Секция Benefits выглядит скучно, добавь иконки побольше и сделай карточки с тенью». Итеративные правки — нормальный процесс.

Деплоим

Всё работает локально? Попросите агента сделать коммит, чтобы сохранить изменения. Затем выкладываем на сервер:

user@computer:~/landing$ ./scripts/deploy.sh <ваш-IP> ~/.ssh/my-project deploy

Откройте IP-адрес сервера в браузере — вы увидите свой лендинг в интернете.

Перед коммитом попросите агента обновить README:

Обнови README.md — добавь информацию о том,
что сейчас есть в проекте: 5 секций лендинга,
как запустить локально, как задеплоить.
После этого сделай коммит.

Подсказки

Если результат далёк от ожиданий — не пытайтесь починить всё одним промптом. Говорите агенту, что не так, делайте итерации: «Заголовок слишком мелкий», «Карточки Benefits не помещаются в одну строку», «FAQ не раскрывается при клике».

Если хотите добавить ещё секции — просто попросите: «Добавь секцию Pricing с тремя тарифами» или «Добавь секцию с отзывами клиентов».

Если хотите сменить дизайн — опишите, что хотите: «Сделай тёмную тему», «Добавь градиентный фон в Hero», «Сделай всё в стиле Apple.com».

Проверьте себя

Что дальше

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