МАРКЕТОЛОГАМ. №25-2
ПРОМПТ ЧАСТЬ 2 : -
Базовая структура лендинга, которую нужно адаптировать под нишу, но сохранить
логику внимание-интерес-доверие-желание-действие. Первый экран Hero с
сильным заголовком-оффером, подзаголовком-усилителем, тремя-четырьмя
буллетами-триггерами, главным и вторичным CTA, фоном из видео, рендера или
иллюстрации. Блок ценности и цифр, где выгода показана измеримо:
калькулятор, метрики, ROI, кейсы в цифрах, сравнение до и после. Блок продукта
и фич с анимированным появлением элементов и акцентом на премиальных
деталях. Блок демонстрации с слайдером интерьеров, скриншотов или работ,
видео-демо и отзывами с лицами. Блок контекста, локации или схемы процесса с
картой, таймлайном или инфографикой. Блок доверия с информацией о
компании, регалиями, сертификатами, годами на рынке, командой и
юридическими гарантиями. Блок условий, тарифов и способов покупки с
рассрочкой, гарантиями возврата и возможностью дистанционной сделки. Блок
FAQ с шестью-десятью вопросами по реальным возражениям. Финальный CTA и
футер с открытой формой, выбором канала связи (WhatsApp, Telegram, email),
контактами и юридической информацией.
Обязательные конверсионные элементы на странице. Поп-ап форма по клику на
главный CTA с минимумом полей, обычно только телефон или email. Мини-квиз
из двух-четырёх шагов перед формой захвата на одном из ключевых блоков —
это повышает вовлечённость и качество лида. Социальные доказательства:
отзывы, логотипы клиентов, счётчики. Минимум четыре точки входа в воронку,
распределённые по странице.
UX и технические требования. Mobile-first подход: сначала макет под 375
пикселей, затем расширение. На мобильной версии обязательна липкая
sticky-кнопка или плашка внизу экрана поверх всего контента — обычно
«Написать в WhatsApp» или эквивалент под нишу, не перекрывающий последний
блок. Производительность: LCP меньше 2.5 секунд, изображения в WebP или
AVIF с lazy loading, видео с preload metadata, шрифты с font-display swap.
Доступность: контраст уровня AA, фокус-стейты, alt-тексты, семантический HTML,
навигация с клавиатуры. SEO-минимум: уникальные title и meta description, Open
Graph, schema.org для организации, sitemap.xml. Аналитика: подготовь места под
Google Analytics 4, Яндекс.Метрику или Pixel — события на каждое отправление
формы и клик по CTA.
Требования к формам. Маска для телефона с учётом международного формата
при необходимости. Валидация в реальном времени с понятными сообщениями
об ошибках. Состояния полей: default, focus, error, loading, success. Защита от
спама: honeypot и rate-limit на бэкенде, либо reCAPTCHA v3 при согласовании.
Чекбокс согласия на обработку персональных данных со ссылкой на политику.
После отправки — экран благодарности или модалка с понятным следующим
шагом.
Стек по умолчанию, который можно заменить под задачу. React 18+ с Vite для
простого одностраничника или Next.js 14+ с App Router, если нужен SEO и
серверный рендеринг — выбери под задачу и обоснуй. Tailwind CSS с
CSS-переменными для токенов из брендбука. Framer Motion для анимаций или
GSAP для сложных скролл-сценариев. Lucide React для иконок. React Hook Form
и Zod для форм и валидации. Библиотека react-imask или libphonenumber-js для
маски телефона. Embla Carousel или Swiper для слайдеров. Lottie-react для
анимаций Lottie. ESLint и Prettier с конфигом по умолчанию. Если у заказчика
другой стек — спроси и адаптируйся.
Работай по итерациям, не пытайся сделать всё за один проход. Итерация ноль —
фундамент: структура проекта, токены дизайна из брендбука, базовый layout,
шрифты, конфиг Tailwind, после чего стоп и фидбек. Итерация один — Hero и
первый ключевой блок, обычно ценность и цифры, после чего стоп. Итерация два
— блоки продукта и демонстрации с анимациями. Итерация три — доверие,
условия, FAQ. Итерация четыре — формы, поп-апы, квиз, sticky-CTA. Итерация
пять — полировка, производительность, доступность, кросс-браузерность,
метатеги, аналитика. После каждой итерации покажи скриншот или короткое
описание готового, перечисли оставшееся и задай конкретные вопросы при
необходимости.
Лендинг считается готовым, когда все блоки по структуре собраны и наполнены
контентом, мобильная, планшетная и десктопная версии проверены на реальных
брейкпоинтах, sticky-CTA на мобайле работает, все формы валидируются и
отправляются или замоканы с понятным TODO, Lighthouse показывает
Performance не ниже 85, Accessibility не ниже 95, Best Practices не ниже 95 и SEO
не ниже 95, метатеги, Open Graph, favicon и robots.txt на месте, есть README с
инструкцией запуска и указанием, куда подставить ключи аналитики и положить
ассеты.
Финальные правила. Не выдумывай факты, цифры и отзывы — если данных нет,
ставь плейсхолдер «уточнить» и выноси в список вопросов. Не копируй код
референса, бери только идеи и принципы и реализуй заново чисто. Если видишь,
что задача расходится с конверсионной логикой — возрази аргументированно и
предложи альтернативу. Лучше задать пять вопросов до старта, чем
переделывать весь блок после.
Начни с пункта «прежде чем писать код». Жду от тебя план и вопросы.
