Лендинг мобильного приложения
Лендинг приложения для сна и дыхания в светлой лавандовой теме — без скриншотов: шапка с «дышащим» лого и рейтингом, первый экран с телефоном из CSS, на котором круг дышит в такт 4-7-8, возможности с липким телефоном, экраны которого меняются по прокрутке, «до / после» с ползунком сравнения графиков сна, отзывы из магазинов лентой, тарифы бесплатно / премиум с таблицей, вопросы аккордеоном, «скачать» с QR из CSS и подвал с бейджами. Manrope и IBM Plex Mono.
Лендинг приложения, которому не нужны готовые скриншоты: телефон нарисован кодом, а его экраны меняются по прокрутке вместе с описанием возможностей. Дальше — тарифы, отзывы и кнопки магазинов. Приложение в демо вымышленное.
Из чего собрано
9 блоков из каталога, в порядке появления на странице. Каждый ставится своей командой; ничего не пересоздаётся.
1. Шапка
Шапка сайта приложения с «дышащим» логоnavbar-032
Лого с пульсирующей точкой, разделы, чип рейтинга, кнопка «Скачать».
2. Первый экран
Первый экран приложения с CSS-телефоном и дышащим кругомhero-032
CSS-телефон с дышащим кругом 4-7-8, рейтинг звёздами, бейджи магазинов.
3. Что внутри
Возможности с липким телефоном, экран меняется по прокруткеapp-001
Список фич и липкий телефон, экран меняется по прокрутке.
4. Результат
«До / после» с ползунком сравнения графиковapp-002
Графики сна до и после, ползунок сравнения.
5. Отзывы
Отзывы из магазинов лентой со scroll-snaptestimonials-025
Карточки из App Store и Google Play лентой со snap, общий рейтинг.
6. Тарифы
Тарифы приложения: бесплатно и премиум с таблицейpricing-024
Бесплатно и премиум, месяц/год, «7 дней бесплатно», таблица функций.
7. Вопросы
Вопросы аккордеоном с плюсом-крестикомfaq-023
Аккордеон с плюсом-крестиком, один открыт.
8. Скачать
Скачать: бейджи магазинов и QR-код из CSScta-025
Тёмная карточка на фото, бейджи и QR-код из CSS.
9. Подвал
Подвал сайта приложения с бейджами магазиновfooter-031
Лого, ссылки, магазины, правовые пункты.
Pro
Точный состав, код страницы и ссылка для агента — в PRO
Демо и список блоков открыты всем. Подписчику показываются пропсы каждого блока как в демо, общие правила темы, промпты картинок и одна ссылка, по которой ИИ-агент собирает такую же страницу.
Открыть PROЧастые вопросы
- Из чего собрана страница «Лендинг мобильного приложения»?
- Из 9 секций каталога по порядку: Шапка сайта приложения с «дышащим» лого, Первый экран приложения с CSS-телефоном и дышащим кругом, Возможности с липким телефоном, экран меняется по прокрутке, «До / после» с ползунком сравнения графиков, Отзывы из магазинов лентой со scroll-snap, Тарифы приложения, Вопросы аккордеоном с плюсом-крестиком, Скачать, Подвал сайта приложения с бейджами магазинов. Каждая — отдельный item VibeUI.
- Как собрать такую страницу через ИИ-агента?
- Нажмите «Копировать сценарий для ИИ» и вставьте в Cursor или Claude Code: агент получит исходник страницы, общие правила темы и промпты картинок и поставит каждую секцию из реестра через shadcn CLI.
- Сценарий бесплатный?
- Живое демо и список секций открыты всем. Исходник страницы и инструкция для агента — в подписке PRO.