Лендинг AI-сервиса и SaaS
Сайт AI-сервиса для встреч в тёмной «авроре» со стеклом — сайт сам является демо: шапка с искрой и аврора-линией, первый экран, где ассистент печатает сводку по расшифровке созвона, «как работает» конвейером из трёх анимированных узлов, песочница с кнопкой и ответом по секциям, интеграции на двух орбитах, бегущая строка клиентов, тарифы с ползунком мест и годовой скидкой, вопросы о данных аккордеоном, стеклянный призыв с полем почты и подвал со статусом систем. Ни одной фотографии. Wix Madefor Display, Golos Text и IBM Plex Mono.
Сценарий показывает, из каких блоков собрать лендинг онлайн-сервиса: от первого экрана с демо продукта до тарифов, вопросов и формы подписки. Откройте демо, чтобы увидеть страницу целиком, а ниже возьмите нужные секции из каталога по одной.
Из чего собрано
10 блоков из каталога, в порядке появления на странице. Каждый ставится своей командой; ничего не пересоздаётся.
1. Шапка
Шапка AI-сервиса: плавающая стеклянная капсула с эквалайзером и живым индикатором созвонаnavbar-033
Плавающая стеклянная капсула: эквалайзер в лого, подсветка меню, живой индикатор созвона.
2. Первый экран
Хиро AI для созвонов: монитор с приложением встречи, после «Завершить» приходят уведомления с результатамиhero-033
Созвон на троих с субтитрами заканчивается — задача, сводка и решения сами разлетаются по сервисам.
3. Как работает
Как работает AI: конвейер из трёх узлов с бегущими точкамиai-001
Три узла — звук, текст, задачи — с микроанимациями и бегущими точками между ними.
4. Песочница
Песочница AI: вставьте текст — сводка печатается секциямиai-002
Поле с расшифровкой, кнопка «Сделать сводку», ответ печатается секциями, «Скопировать».
5. Интеграции
Интеграции маршрутизатором: входы → ядро продукта → выходы, по линиям бегут пакетыbento-002
Маршрутизатор: входы, ядро продукта и выходы, по линиям бегут пакеты.
6. Доверяют
«Работал с» текстом бегущей строкойlogocloud-007
Бегущая строка названий клиентов.
7. Тарифы
Тарифы с ползунком мест и годовым переключателемpricing-025
Ползунок «человек в команде», переключатель года, три карточки с пересчётом.
8. Данные
Вопросы аккордеоном с плюсом-крестикомfaq-023
Аккордеон о хранении, обучении модели и своём контуре.
9. Начать
Стеклянный призыв с полем почты на плавающей аврореcta-026
Стеклянная карточка на плавающих аврорах, поле почты, «без карты».
10. Подвал
Подвал SaaS со статусом систем и колонкамиfooter-032
Карточка «сводка этой страницы», статус систем с пульсом, колонки ссылок.
Pro
Точный состав, код страницы и ссылка для агента — в PRO
Демо и список блоков открыты всем. Подписчику показываются пропсы каждого блока как в демо, общие правила темы, промпты картинок и одна ссылка, по которой ИИ-агент собирает такую же страницу.
Открыть PROЧастые вопросы
- Из чего собрана страница «Лендинг AI-сервиса и SaaS»?
- Из 10 секций каталога по порядку: Шапка AI-сервиса, Хиро AI для созвонов, Как работает AI, Песочница AI, Интеграции маршрутизатором, «Работал с» текстом бегущей строкой, Тарифы с ползунком мест и годовым переключателем, Вопросы аккордеоном с плюсом-крестиком, Стеклянный призыв с полем почты на плавающей авроре, Подвал SaaS со статусом систем и колонками. Каждая — отдельный item VibeUI.
- Как собрать такую страницу через ИИ-агента?
- Нажмите «Копировать сценарий для ИИ» и вставьте в Cursor или Claude Code: агент получит исходник страницы, общие правила темы и промпты картинок и поставит каждую секцию из реестра через shadcn CLI.
- Сценарий бесплатный?
- Живое демо и список секций открыты всем. Исходник страницы и инструкция для агента — в подписке PRO.