ПРОМПТ: -
Ты senior веб-дизайнер и маркетолог с опытом в продающих посадочных
страницах. Собери одностраничный сайт вебинара.
Не задавай мне уточняющих вопросов. Если каких-то данных не хватает, прими
решение сам исходя из здравого смысла и отметь это одной строкой в самом
конце ответа.
===== ЧТО СДЕЛАТЬ СНАЧАЛА =====
Разбери прикреплённые скриншоты-референсов и выпиши дизайн-систему,
которую из них забираешь. Строго не больше восьми строк:
- палитра в hex, основной фон, текст, акцент, вспомогательный
- шрифтовая пара из Google Fonts, заголовки и текст
- размеры: h1, h2, основной текст, в пикселях для десктопа
- ширина контейнера, радиусы, характер теней
- вертикальный отступ между блоками
Забирай уровень и логику подачи, а не копируй макет один в один.
Дальше сразу собирай сайт, без вопросов и без пауз.
===== ТЕХНИЧЕСКИЕ РАМКИ =====
Один файл index.html. Весь CSS и JS внутри файла. Никаких внешних библиотек,
фреймворков и CDN, кроме шрифтов Google Fonts.
Код чистый, с комментариями перед каждой секцией, чтобы я потом мог править
руками.
Все изображения — заглушки через CSS градиент или сплошной фон с
подписью, куда какое фото ставить. Не подключай внешние картинки по ссылкам,
они отвалятся.
===== СТРУКТУРА ЭКРАНОВ =====
1. ПЕРВЫЙ ЭКРАН
Задача: за три секунды объяснить кто, о чём и когда, и дать нажать кнопку.
Внутри: короткая строка-плашка сверху с датой и временем, крупный заголовок с
конкретным обещанием результата, подзаголовок на одну-две строки, кнопка
регистрации, под кнопкой мелкой строкой что участие бесплатное и сколько идёт
эфир, справа или ниже блок под фото спикера с именем и одной строкой регалий.
Заголовок пиши про результат зрителя, а не про формат мероприятия.
2. ТАЙМЕР
Обратный отсчёт до даты эфира на чистом JS: дни, часы, минуты, секунды. Дату
вынеси в отдельную переменную в начале скрипта, чтобы я поменял в одном
месте. После наступления даты таймер меняется на строку про то, что эфир
начался, и не ломает вёрстку.
3. КОМУ ЭТО
Три-четыре карточки с типами участников. В каждой одна строка кто это и одна
строка что он получит. Без воды и без общих слов.
4. ЧТО НЕ РАБОТАЕТ СЕЙЧАС
Три коротких тезиса про то, где зритель сейчас теряет время и деньги. Пишем без
запугивания и без давления, спокойной констатацией. Это яма перед взлётом.
5. ПРОГРАММА ЭФИРА
Блоки программы списком. У каждого пункта заголовок и одна строка с тем, что
зритель сможет делать после этого блока. Не описание темы, а результат.
6. СПИКЕР
Фото, имя, одна сильная строка позиционирования. Дальше доказательства
цифрами и фактами в виде отдельных плашек: цифра крупно, расшифровка
мелко. Только факты из блока об эксперте ниже, ничего не придумывай и не
приукрашивай. Никаких прилагательных вроде выдающийся, топовый,
легендарный.
7. ЧТО ЗАБЕРЁТЕ С СОБОЙ
Бонус или материал, который участник получает. Что это, из чего состоит, и
условие получения.
8. ДЕТАЛИ
Компактная плашка: дата, время с указанием часового пояса, длительность,
площадка трансляции, стоимость, будет ли запись.
9. ЧАСТЫЕ ВОПРОСЫ
Шесть вопросов аккордеоном на чистом JS. Обязательно закрой: будет ли запись,
нужна ли подготовка и опыт, будут ли продавать в эфире, что если не смогу быть
вживую, сколько это стоит, как подключиться.
10. ФИНАЛЬНЫЙ ЭКРАН
Повтор заголовка другими словами, дата и время, крупная кнопка, под ней
снимающая тревогу строка.
===== КНОПКИ =====
Все кнопки регистрации ведут на один и тот же адрес. Адрес вынеси в одну
переменную в начале скрипта и подставь во все кнопки оттуда, чтобы я поменял
его в одном месте.
Текст на кнопке — глагол и польза, а не слово Отправить. Например: Занять
место на эфире.
===== МОБИЛЬНАЯ ВЕРСИЯ =====
Всё в одну колонку, проверь на ширине 375 пикселей.
Кнопка регистрации липнет к низу экрана и появляется после того, как первый
экран уплыл вверх.
Размер шрифта в заголовке уменьшай, но не меньше 28 пикселей.
Ни один элемент не вылезает за край экрана по горизонтали, горизонтального
скролла быть не должно.
Все кликабельные элементы не меньше 44 пикселей по высоте.
===== ЧТО ЕЩЁ ОБЯЗАТЕЛЬНО =====
Плавное появление блоков при скролле через IntersectionObserver, без
библиотек, деликатно.
OG-теги в head: og:title, og:description, og:image, og:type, чтобы при отправке
ссылки в телеграм и мессенджеры разворачивалась нормальная карточка. Это
обязательно.
Микроразметка schema.org типа Event в формате JSON-LD: название, дата,
время, формат онлайн, организатор.
Title и description страницы под поисковую выдачу.
Favicon инлайном, простой, буквой или знаком в акцентном цвете.
===== ЧТО ЗАПРЕЩЕНО =====
Lorem ipsum и любые плейсхолдеры в тексте. Все тексты пиши сразу настоящими
и продающими.
Эмодзи в заголовках и в кнопках.
Стоковые фиолетово-синие градиенты и всё, что выглядит как шаблон из 2015
года.
Обещания лёгких денег, формулировки в духе кнопки бабло, миллиона за
неделю, успешного успеха.
Заходы вида ты упустил биткоин, не упусти это.
Гарантии результата без оговорок.
Гладкий безличный корпоративный тон и вода вместо конкретики.
Термины без расшифровки, если аудитория не техническая.
===== ФОРМАТ ОТВЕТА =====
Сначала дизайн-система, не больше восьми строк. Потом полный код index.html.
Потом одна строка про допущения, если ты что-то додумывал.
===== ДАННЫЕ =====
ЭКСПЕРТ:
[сюда блок об эксперте]
МЕРОПРИЯТИЕ:
[сюда блок о мероприятии: название, дата, время, часовой пояс, длительность,
площадка, для кого, программа, бонус, стоимость, будет ли запись]
ССЫЛКА РЕГИСТРАЦИИ:
[сюда адрес, куда ведут все кнопки]
