Лендинг онлайн-курса
Лендинг онлайн-курса: первый экран с маркером и превью урока, «для кого», программа по неделям, результаты выпускников, автор, неделя по дням, тарифы с рассрочкой, отзывы, вопросы и обратный отсчёт до старта. Светлая тема: индиго и лаймовый маркер.
Лендинг ведёт от обещания к записи: кому подойдёт курс, что будет по неделям, что получили выпускники, кто автор, сколько стоит с рассрочкой и сколько осталось до старта. Курс в демо придуман для примера, структура подойдёт и вебинару, и интенсиву.
Из чего собрано
13 блоков из каталога, в порядке появления на странице. Каждый ставится своей командой; ничего не пересоздаётся.
1. Шапка
Шапка курса с ценой и прогрессомnavbar-022
Кнопка с ценой и полоска прогресса чтения.
2. Первый экран
Бенто-хиро курса с плитками и наклономhero-022
Маркерное подчёркивание, стикер мест, превью урока, факты и логотипы.
3. Для кого
Для кого: раздвигающиеся плиткиcourse-001
Три персоны переключателем и карточка результатов.
4. Программа
Программа закреплённой сценой по неделямcourse-002
Недели аккордеоном, уроки, домашки, липкая сводка.
5. Результаты
Результаты выпускников горизонтальной лентойcourse-003
Выпускники «было → стало» со скринами работ.
6. Автор
Автор курса с цитатой во весь ряд и бегущей строкойabout-008
Портрет, цитата с маркером, регалии и факты.
7. Как проходит
Неделя курса календарной лентойcourse-004
Неделя по дням лентой, фото и форматы.
8. Тарифы
Тарифы курса с рассрочкой, рамкой и полоской местpricing-020
Три плана, переключатель рассрочки, места и скидка.
9. Отзывы
Отзывы двумя встречными бегущими рядами с видеоtestimonials-018
Видео-отзыв, фото, ссылки на профили, потоки.
10. Вопросы
Вопросы перед оплатой с карточкой «спросить»faq-017
Аккордеон и карточка «спросить в Telegram».
11. Запись
Финальный призыв с flip-часами и свечениемcta-017
Обратный отсчёт до старта, места и форма с email.
12. Липкая CTA
Плавающая кнопка записи с ценойcta-018
Плавающая полоса с ценой и кнопкой: появляется после первого экрана, прячется у тарифов и формы.
13. Подвал
Подвал курса с гигантским контуром брендаfooter-021
Автор, ссылки, соцсети и реквизиты с лицензией.
Pro
Точный состав, код страницы и ссылка для агента — в PRO
Демо и список блоков открыты всем. Подписчику показываются пропсы каждого блока как в демо, общие правила темы, промпты картинок и одна ссылка, по которой ИИ-агент собирает такую же страницу.
Открыть PROЧастые вопросы
- Из чего собрана страница «Лендинг онлайн-курса»?
- Из 13 секций каталога по порядку: Шапка курса с ценой и прогрессом, Бенто-хиро курса с плитками и наклоном, Для кого, Программа закреплённой сценой по неделям, Результаты выпускников горизонтальной лентой, Автор курса с цитатой во весь ряд и бегущей строкой, Неделя курса календарной лентой, Тарифы курса с рассрочкой, рамкой и полоской мест, Отзывы двумя встречными бегущими рядами с видео, Вопросы перед оплатой с карточкой «спросить», Финальный призыв с flip-часами и свечением, Плавающая кнопка записи с ценой, Подвал курса с гигантским контуром бренда. Каждая — отдельный item VibeUI.
- Как собрать такую страницу через ИИ-агента?
- Нажмите «Копировать сценарий для ИИ» и вставьте в Cursor или Claude Code: агент получит исходник страницы, общие правила темы и промпты картинок и поставит каждую секцию из реестра через shadcn CLI.
- Сценарий бесплатный?
- Живое демо и список секций открыты всем. Исходник страницы и инструкция для агента — в подписке PRO.