Страница событий экосистемы: табло с ближайшими эфирами и отсчётом, расписание по тарифам, калькулятор маржи прямо на странице, ФинФорум и навигатор «подберём событие». Заняла 3-е место в конкурсе ИИ-лендингов GetCourse.
1список событий: из него строятся табло, расписание и отсчёт
buhrost.ru/events
Задача
Переделать страницу событий экосистемы для конкурса ИИ-лендингов GetCourse: чтобы бухгалтер сразу видел ближайший эфир, понимал, что получит, и записывался.
Решение
Афиша в стиле финансового табло: ближайшее событие и отсчёт на первом экране, расписание с фильтрами по тарифам, живой расчёт маржи вместо обещаний «на вебинаре всё расскажем».
Результат
3-е место в конкурсе ИИ-лендингов GetCourse по голосованию подписчиков. Страница работает: школа сама обновляет список событий, табло и расписание перестраиваются.
01 · Первый экран
Табло, как на вокзале — только для эфиров
Буквы ближайших событий перелистываются, как на табло отправлений, рядом идёт отсчёт до начала. Человек за секунду видит, что будет и когда, а не ищет дату в тексте.
Пока страница грузится, прелоадер «сводит баланс»: дебет, кредит, сальдо. Мелочь, которую бухгалтер узнаёт с первого взгляда.
buhrost.ru/events
Расписание
02 · Расписание
Свои эфиры — в один клик
Фильтры по доступу: открытые, тариф «Аутсорсер», тариф «Бизнес». У каждого эфира — кнопка записи и «В календарь». Прошедшие события не мешают, но их можно раскрыть.
Все события — одним списком в коде блока. Добавили строку — обновились табло, расписание и отсчёт.
03 · Вебинары
Не «вода», а расчёт прямо на странице
Вместо обещания «на вебинаре покажем» — калькулятор маржи клиента: подвинул ползунки абонплаты, часов и стоимости часа — увидел себестоимость и маржу. Так же считают на эфирах, и кнопка ведёт разобрать свои цифры.
Как проходят вебинары
04 · Дальше по странице
Форум, кейсы и навигатор
ФинФорум
ФинФорумКамерная офлайн-конференция: зал из 15 столов загорается местами, счётчик показывает, сколько осталось.
Кейсы участников
Было → сталоНастоящие результаты участников: выручка до и после, цифры анимируются при прокрутке.
Навигатор
НавигаторДва вопроса — и страница подсказывает событие или программу. Не определился — оставляет контакты для менеджера.
Для дотошных
Как устроено
Один блоквся страница — один блок «HTML-код» GetCourse: вставил и работает
Свои стилиоформление изолировано и не задевает меню и формы GetCourse вокруг
Данныесобытия — одним списком: табло, расписание, фильтры и отсчёт строятся из него
Телефонкаждый раздел перестроен под узкий экран, табло и калькулятор работают пальцем
GetCourse
HTML и CSS
JavaScript
генерация изображений
Обсудить проект
Сделаю такое и для вас
Три коротких вопроса прямо здесь — и заявка у меня. Удобнее голосом или сразу в мессенджере — пишите в Telegram.
1Отвечу в течение днясам, а не бот и не менеджер
2Созвон на 20–30 минутразберём задачу и что уже пробовали
3Прототип или сметачерез несколько дней — видно, за что вы платите
