Программа из 6 модулей, тарифы, гарантия «доводим до монетизации» и 17 ответов на вопросы — страница проводит ученика по шагам и закрывает сомнения до оплаты. Собрана на чистом коде, без конструкторов, с проверкой рендером. Деплой на ваш хостинг, адаптив от 390 до 1440.
Структура от первого экрана до блока автора: ученик видит, для кого курс, что внутри и почему стоит доверять.
Программа из 6 модулей, тарифы, гарантия до монетизации, живые отзывы и 17 ответов в FAQ — сомневающемуся не нужно писать в поддержку.
Адаптив от 390 до 1440 без битых картинок и горизонтальной прокрутки; сайт выгружается на ваш хостинг.
У автора YouTube-канала имелись фото, скрины отзывов и программа курса, но не было сайта. Нужен был лендинг, который быстро захватывает внимание и продаёт курс: тёмный premium-стиль, понятный мобильный сценарий и «живые» отзывы реальных учеников.
На странице есть раздел тарифов с ценами — в кейсе цены не публикуем. Отзывы и результаты учеников на сайте показаны целиком, здесь же они обезличены: ники и фото третьих лиц скрыты или обрезаны.
Страница прошла шесть работ: дизайн, вёрстку, код, бренд-детали, адаптив и деплой.
Курс про YouTube и нейросети — аудитория ждёт «цифрового» вкуса: чёрный фон, неоново-розовые и фиолетовые свечения, рукописные подписи Caveat, наложенные поверх жёсткого гротеска Outfit.
Герой: бейдж «Обновленный курс 2026», огромный заголовок «Запусти прибыльный YouTube-канал» (YOUTUBE-КАНАЛ — неоновым акцентом), полоса статистики автора (100K+ подписчиков, 300M просмотров, доход в месяц) и фото автора в раме с парящими бейджами «Silver Play Button» и «GROWTH +240%». Дальше — секции с карточками на полупрозрачных подложках и одинаковой шкалой заголовков.
На одной странице надо было уместить весь путь читателя — и ничего не «развалить» на мобильных: таймлайн программы с чередованием сторон — классическая ловушка для горизонтальной прокрутки.
9 секций (688 узлов DOM, 16 изображений): hero, «Для кого» (5 карточек, фото слева остаётся на месте при прокрутке), программа из 6 модулей на вертикальном таймлайне, слайдер результатов учеников, тарифы, гарантия «Доводим до монетизации» (30 дней интенсива + 11 месяцев сопровождения), отзывы, FAQ, автор. Программа закрывается карточкой «Результат через 30 дней».
Без jQuery-плагинов и тяжёлых библиотек: только то, что нужно этой странице. Плюс — консоль без ошибок: иконки Lucide (набор векторных иконок) в ранних версиях частично не находились.
Один main.js на 4 КБ: универсальная функция слайдера (результаты и отзывы — два набора), FAQ-аккордеон, якорный скролл из меню с ручным расчётом offset (чтобы заголовок секции не «проваливался» под шапку). Ошибки Lucide устранены (недоступные иконки заменены на поддерживаемые), слайдеры принудительно инициализируются с первого слайда — страница открывается всегда с первой карточки. При финальной проверке рендером — 0 ошибок консоли.
Три разных шрифта легко «съедают» смысл, если у каждого нет чёткой роли; плюс исходные фото автора весили мегабайты — такой PNG (1,24 МБ) тянет за собой всю загрузку на мобильных.
Шрифты закреплены за ролями: Outfit (700–900) — заголовки, Inter (400–600) — текст, Caveat — рукописные акценты («этот курс», «курса», «отвечаю честно»). Логотип доработан по правкам: изменён концепт знака, выровнен play-символ, EFORA и .CLUB синхронизированы по высоте; подключены в шапке и футере, плюс favicon.svg. Фото переведено в WebP: 1,24 МБ → 50 КБ (в 25 раз легче); скрины отзывов нормализованы в web-варианты по 33–105 КБ.
На мобильных карточки таймлайна «Программы» выезжали за край, шапка «гуляла», а якорный скролл попадал мимо секций.
Проведена широкая мобильная оптимизация на контрольных точках 1024 / 768 / 480: мобильная шапка и навигация отцентрированы, позиционирование чётных и нечётных карточек таймлайна унифицировано — выезды и горизонтальная прокрутка устранены. Финальный замер (Playwright, ширина 390): горизонтальной прокрутки — 0 px.
Собранная страница должна была работать на собственном домене efora.club — без конструкторов и привязки к платформе.
Сайт выгружен на Beget автоматическим скриптом и открывается по своему домену.
Сроки беру из реального проекта; по вашему сайту назову после бесплатного разбора.
Сайт собирается с нуля, отдельной «старой версии» для сравнения нет. Ниже — контрольный замер от 08.10.2026: рендер локальной копии кода сайта (Playwright, Chromium, desktop 1440 и mobile 390) плюс факты о коде проекта.
| Показатель | Замер (08.10.2026) |
|---|---|
| Секций на главной | 9 |
| Узлов DOM | 688 (desktop и mobile одинаково) |
| Ошибок консоли при рендере | 0 (desktop и mobile) |
| Битых изображений | 0 (из 16) |
| Горизонтальный overflow | 0 px (desktop 1440 и mobile 390) |
| Полная высота страницы | 15 207 px (desktop), 14 447 px (mobile) |
| Запросов при загрузке | 19 (HTML, CSS, JS, шрифты Google Fonts, иконки Lucide, графика) |
| Модулей в программе | 6 (таймлайн) + карточка «Результат через 30 дней» |
| Вопросов в FAQ | 17 |
| Отзывов в слайдере | 8 скринов + карточка «Смотреть все отзывы» |
| Шрифтовые роли | Outfit (заголовки) · Inter (текст) · Caveat (рукописные акценты) |
| Размер кода | HTML 58 КБ · CSS 39,8 КБ · JS 4 КБ |
| Графика | WebP: фото в герое 1,24 МБ → 50 КБ; отзывы 33–105 КБ за скрин |
| Тарифы | 3 формата обучения; цены на странице есть, в кейсе не публикуем |
Честные пометки. (1) Цифры про консоль, картинки и горизонтальную прокрутку — из рендера локальной копии кода. (2) Полный скролл страницы в кейсе не публикуем: в кадр попадают тарифы с ценами и имена учеников из слайдера результатов — вместо этого посекционные скрины и обезличенные отзывы ниже.
Посекционные рендеры локальной копии кода сайта (desktop 1440, mobile 390, снято 08.10.2026) и обезличенные кадры отзывов из архива проекта. Кликните, чтобы открыть в полном размере.
Кадры отзывов — сами web-скрины отзывов из проекта (архив Telegram-переписки, подключённый к блоку «Отзывы»). Персональные данные учеников (ники, аватары, имена) обрезаны или выбраны кадры без них — в кейс публикуем только обезличенные фрагменты. Полный архив отзывов на сайте ведёт в Telegram-канал курса.
Бесплатно: смотрю программу курса и аудиторию, показываю структуру лендинга и что усилить.
Стоимость после разбора — зависит от числа секций и наполнения. Могу собрать лендинг, лендинг с продающим текстом или под ключ с деплоем.
Цены не публикую: они зависят от задачи. Оставьте заявку — пришлю вилку под ваш случай в тот же день.
Сколько стоит лендинг?
Цену называю после разбора: зависит от числа секций и наполнения.
Сколько занимает?
Ориентир — срок этого проекта; точный назову после разбора вашей программы.
Кто пишет текст?
Структуру и блоки собираю под вашу аудиторию. Продающий текст пишу сам или верстаю ваш.
Что с хостингом и доменом?
Деплою на ваш хостинг, как здесь (Beget). Домен и доступы остаются у вас.
Я не разбираюсь в терминах
Не придётся: пишу по-человечески и всё показываю.
Соберу тёмный premium-лендинг с программой курса, отзывами, FAQ и блоком автора — со слайдерами и аккордеоном на ванильном JS, с проверкой рендером и деплоем на ваш хостинг, как в этом кейсе.
Сайт: https://efora.club