Лендинг Медиахаба
Автор канала за один экран понимает, что делает платформа, и оставляет заявку
- шага конвейера: стратегия, посты, карточки, рилсы
- 4
- аудитории: эксперт, малый бизнес, медиа-команда
- 3
- e2e-тестов Playwright на страницу и форму
- 13
- адреса: свой поддомен и страница личного сайта
- 2
Задача
Платформа сложная: стратегия, посты, карточки, рилсы. Автору канала надо за один экран понять, что он получит, и не утонуть в описании.
Решение
Конвейер по шагам с живыми макетами форматов и автопоказом, три сегмента аудитории, короткая форма со ссылкой на канал. Лендинг живёт на своём поддомене в том же деплое, что и личный сайт.
По страницам
-
Конвейер по шагам
Четыре шага, у каждого макет формата с настоящим контентом, а не заглушкой. Когда секция впервые попадает на экран, конвейер сам подсвечивает пост, карточку и рилс по очереди.
-
Кому подходит
Эксперт с каналом, малый бизнес, медиа-команда: у каждого две выгоды своими словами. Читатель находит себя и не читает про чужие задачи.
-
Вопросы и запуск
Пять вопросов про голос, съёмки, площадки, правки и цену. Форма из трёх полей: имя, контакт и ссылка на канал, которую сразу видно в заявке.
Что проработано
-
Конвейер показывает себя сам
При первом показе секции точка бежит по треку и по очереди подсвечивает пост, карточку и рилс. Наведение на шаг останавливает автопоказ и подсвечивает свой макет.
-
Два сайта на одном деплое
Middleware смотрит заголовок Host: на mediahub.mskorzhov.ru корень отдаёт лендинг без редиректа. Новый поддомен — одна строка в карте и DNS-запись.
-
Заявка со ссылкой на канал
Форма кладёт ссылку на канал в текст заявки, ошибки сервера показываются у своих полей. Оба сценария закрыты e2e-тестами.
-
Своя палитра без утечек
Стили изолированы под обёрткой страницы: тёмная палитра лендинга не задевает светлый личный сайт, это проверяет отдельный тест.
-
Курсоры и след под движение
Свои SVG-курсоры по типу элемента и световой след за мышью. При «уменьшить движение» след и курсоры выключаются.
Как шла работа и что проверял
Этапы
-
Бриф, сегменты, структура: одна боль — один раздел
часы 0–3
-
Первый экран, тёмная палитра, изолированная от личного сайта
часы 3–12
-
Конвейер с автопоказом, сегменты, вопросы, форма
часы 12–36
-
Мобильная версия, 13 e2e-тестов, поддомен по Host
часы 36–48
Проверки
-
13 e2e-тестов Playwright
Разделы и заголовок, шаги конвейера и макеты, подсветка по наведению, FAQ, счётчики, курсоры, «уменьшить движение», палитра основного сайта.
-
Форма под тестом
Ссылка на канал доходит до заявки, ошибки сервера показываются у полей.
-
5 unit-тестов поддомена
Разбор заголовка Host: известный и незнакомый поддомен, основной домен, порт и регистр, пустой заголовок.
Обсудим вашу задачу?
30 минут созвона. Срок и цену называю в тот же день.
Другие кейсы
все кейсы
продукт этого сайта
Медиахаб
Автор канала утверждает готовые посты, карточки и рилсы, а не делает их сам
80 идей для рилсов, к каждой хук и сценарий
Статистика для трейдеров
Трейдеры видят, какой сетап приносит деньги, а какой сливает счёт
34 метрики по каждой сделке
Сайт завода «Стапель»
Снабженец за минуту находит цену тонны и отправляет КМ на расчёт
4 калькулятора: цена, отгрузка, вес балки, доставка