Главная / Каталог / Бизнес и услуги
«Темп» — Лендинг мобильного приложения
Цена: 4 990 ₽
Тёмный лендинг приложения с живой демо-пробежкой прямо в макете телефона: маршрут рисуется, километры и темп идут, а экраны меняются при прокрутке.
«Темп» — лендинг мобильного приложения, построенный вокруг одной мысли: показать продукт в работе, а не выложить четыре скриншота из стора. Чёрный фон, огромные заголовки Unbounded вперемешку с контурными, градиент от алого к оранжевому — страница выглядит как презентация продукта, а не как сайт услуг.
Главная механика — демо-пробежка в макете телефона. Посетитель нажимает кнопку и видит, как приложение работает: маршрут прорисовывается по SVG-пути, километры и время идут, темп меняется от километра к километру, в конце — итог с личным рекордом. Вся пробежка описывается одним массивом секунд на километр; дистанция, время, средний темп, калории и график темпа считаются из него сами. Длину линии скрипт берёт через getTotalLength, а точку ведёт через getPointAtLength — свой маршрут вставляется одной строкой из Figma, подгонять числа не нужно.
Второй разворот — липкий телефон: текст прокручивается, экран под ним меняется, и каждый пункт показывает свой интерфейс (кольца недели, график темпа по километрам, лента клуба). Все экраны нарисованы в SVG и CSS, фотографий в шаблоне нет вовсе — лендинг ничего не грузит с чужих серверов и одинаково выглядит без сети. Годовая цена в тарифах не вписана руками, а считается из месячной и числа бесплатных месяцев, так что забытой старой цифры на сайте не останется.
Что умеет
- Демо-пробежка: маршрут рисуется, цифры идут, есть пауза
- Вся пробежка — из одного массива, остальное считается
- Липкий телефон: экран меняется при прокрутке текста
- Четыре готовых экрана интерфейса на SVG и CSS
- График темпа по километрам с подсветкой лучшего
- Тарифы: годовая цена и скидка считаются из месячной
- Бегущая строка, счётчики, гармошка вопросов, QR
- Ни одной фотографии — ничего не грузится извне
- Адаптив от 320px и уважение prefers-reduced-motion
Разделы
- Шапка
- Первый экран с телефоном
- Бегущая строка
- Цифры
- Возможности с липким телефоном
- Тарифы
- Отзывы из сторов
- Вопросы
- Финальный блок с QR
- Подвал