// 01 ONBOARDING · 4 экрана

## Онбординг

Первый знакомство пользователя с апп. Hero с галереей превью, выбор первой нейросети, пример использования, бонус-попап.

Welcome /welcome
Приветствие после первого входа. Коллаж 8 изображений (preview генераций) + Indicator (1/3) + CTA «Пройти обучение».
9:41

# Добро пожаловать!

Все ИИ — лучший агрегатор
нейросетей в Telegram

Пропустить
Источник: `pages/welcomePage/welcomePage.tsx`
8 превью загружаются через `useAiImageModels()`. В макете заглушки градиентами — фронт подставит real images.
SelectAI /select-ai
Выбор первой нейросети — 4 круглых превью (3 dimmed + 1 активный по центру), большой заголовок, Indicator (2/3), CTA «Дальше».
9:41
Chat GPT
MidJourney
DALL·E 3
DeepSeek

Начать просто

# Выбираешь AI

Теперь все твои AI агенты находятся
в одном приложении — Все ИИ

Пропустить
Источник: `pages/selectAiPage/selectAiPage.tsx`
Drift fix: в апп heading «Eva-AI» ← это off-brand, должно быть «Все ИИ». Исправлено в макете.
ExampleChat /example-chat
Демо чата с моделью — показ как выглядит общение. Пузырьки сообщений, copy/refresh иконки. Indicator (3/3) → переход на Gift.
9:41
А что ты умеешь?
Chat GPT
Вот некоторые из вещей, с которыми я могу помочь:
1. Ответы на вопросы: Даю информацию по широкому кругу тем.
2. Переводы: Перевожу текст между разными языками.
3. Напоминания и списки задач: Помогу организовать дела…
Круто!

# Пользуешься

Теперь все твои AI агенты находятся
в одном приложении — Все ИИ

Пропустить
Источник: `pages/exampleChatPage/exampleChatPage.tsx`
Drift fix: в апп heading «Eva-AI» — заменён на «Все ИИ» в макете.
Gift (Welcome bonus) /gift
Финальный шаг онбординга — бонус 50 токенов с обязательным согласием на Privacy + Terms. CTA активна только когда оба чекбокса включены.
9:41

# Добро пожаловать!

Все ИИ — лучший агрегатор
нейросетей в Telegram

# Дарим 50 токенов

Чтобы начать использование приложения,
пожалуйста, подтвердите своё согласие

Я согласен с Политикой конфиденциальности

Я согласен с Пользовательским соглашением

Источник: `pages/giftPage/giftPage.tsx`
Drift fix: в апп подарок-картинка — статичный PNG. В макете заменил на cyan-glow SVG в brand-стиле (cyan accent + sparkles). Финальная иконка — на согласовании с тобой.
Состояния: 2 чекбокса OFF / 1 ON / оба ON (активная CTA).
// 02 CORE · 4 экрана

## Основной flow

Главный экран с composer + ассистентами + tab-bar, активный чат с моделью, список чатов, история. Это то что юзер видит 80% времени.

Home /
Главный экран. Header с моделью, h1 «Привет, %username%», composer, scroll-карусель ассистентов, glass tab-bar снизу.
9:41
// promo-banner area

# Привет, MULan!

## Чем я могу тебе помочь?

Выбери ИИ и задай свой вопрос

Gemini 2.0 Flash
Готов к вашим вопросам

### Ассистенты

Все

#### Дрессировщик
животных

Воспитание питомцев,
обучение командам

#### Бизнесмен

Подскажет стратегии,
проверит идею, поможет
с планом
И…
Профиль
ВСЕ ИИ
Чаты
Источник: `pages/mainPage/mainPage.tsx` + `features/home/ui/introductionHome.tsx` + `features/chat/chatModel/ui/MainInput.tsx`
Drift fix: tab-bar теперь точно по canon (308×67, blur 36, squircle pill 61×61). В апп раньше был blur-xl + white@20% border + drop-shadow white glow → off-canon.
ChatModel (active) /chat-model
Активный чат с моделью — header с моделью, переписка (user/assistant bubbles), composer внизу. Сами сообщения скроллятся.
9:41
Gemini 2.5 Pro
Объясни квантовую запутанность простыми словами
Gemini 2.5 Pro
Представь две монеты в коробках — одна у тебя, другая у друга на другой планете. Коробки запечатаны, ты не знаешь, какая в твоей.
Когда ты открываешь свою и видишь «орёл» — мгновенно понимаешь, что у друга «решка». Не потому что сигнал прошёл быстрее света, а потому что состояние было связано с момента создания.
Это и есть запутанность — две частицы ведут себя как единая система, даже если разнесены на любое расстояние.
А как это используют в технике?
Gemini 2.5 Pro
Источник: `pages/chatModelPage/chatModelPage.tsx` + `features/chat/chatModel/ui/AIMessage,UserMessage,ChatInput`
Drift fix: User-сообщения в апп используют разные стили (bg-blue/30 в exampleChat, bg-darkGray в chatModel). Унифицировал на cyan-tinted glass bubble (right-aligned, asymmetric радиус).
Состояния: empty (показывает `IntroductionModel`) / typing (3 cyan dots) / refresh / image attached.
ChatModel — Attach menu state · plus tapped
Когда юзер тапает «+» в composer'е — раскрывается glass bottom-sheet с опциями. Заменяет одну скрепку на полноценное меню в нашем canon стиле (вдохновлено iOS, не ChatGPT). Camera / Photos / Files как icon-grid сверху, ниже — toggles и переходы.
9:41
Gemini 2.5 Pro
Краткий preview переписки приглушённый — фокус на attach menu снизу...
Камера
Фото
Файл
Голос
Параметры генерации
Авто
Стиль ассистента
Обычный
Веб-поиск
Состояние: attach menu открыт. Закрытие — tap на «Отмена» или на затемнённую область сверху.
Структура: 4 icon-grid actions сверху (Камера / Фото / Файл / Голос) → list rows с переходами и тогглами (Параметры / Стиль / Веб-поиск).
Заменяет нынешнюю одиночную «скрепку» в композере. Веб-поиск toggle — toggle ON = модель цитирует web-источники.
AllChatList /all-chats-list
Список всех чатов: search input сверху, чаты по дате с превью последнего сообщения, fixed CTA «Новый чат» снизу.
9:41
Чаты
Поиск по чатам
Все 12
Текст 7
Картинки 3
Видео 2
Аудио 0
Закреп.
Сегодня
Квантовая запутанность
А как это используют в технике?
12:34
Идея для стартапа
Разбери эту идею по фреймворку Lean Canvas
10:21
Вчера
Логотип для лейбла
Сгенерируй 4 варианта в стиле minimal
19:08
Перевод документа
Переведи приложенный PDF на английский
14:55
Профиль
ВСЕ ИИ
Чаты
Источник: `pages/allChatListPage/allChatListPage.tsx` + `features/chat/allChatList/ui/`
Drift fix: CTA «Новый чат» в апп — `bg-gradient-to-t from-gray-900 via-gray-900/80` (off-canon). Заменил на cyan brand button с smooth gradient fade-out.
ChatHistory /chat-history
Архив прошлых сессий — свайп по дням. Каждый день = группа чатов с превью.
9:41
История чатов
29 апр
28 апр
27 апр
26 апр
25 апр
29 апреля · 6 чатов
12:34 Квантовая запутанность
10:21 Идея для стартапа
09:15 Анализ продаж за квартал
Источник: `pages/chatHistoryPage/chatHistoryPage.tsx`
Date pagination — горизонтальный scroll, активный день = cyan pill, остальные = glass pill.
// 03 ACCOUNT · 3 экрана

## Аккаунт и подписка

Профиль пользователя, общие настройки, страница подписки PLUS. Ключевая monetization-зона.

Profile /profile
Учётка пользователя: имя, email, статус подписки (PLUS/FREE), история платежей, способы оплаты.
9:41
Профиль
Отображаемое имя:
Михаил Петров
Электронная почта:
mikhail@example.com
Подписка PLUS
Подписка активна до 28 мая 2026
История платежей
Способы оплаты
Профиль
ВСЕ ИИ
Чаты
Источник: `pages/profilePage/profilePage.tsx`
Условные ветки: PLUS / FREE / нет подписки. В макете показан PLUS — для FREE будет «Перейти на PLUS» вместо «Подписка PLUS».
Settings /settings
Главное меню настроек: PLUS-баннер сверху, учётка, история чатов, баланс токенов, FAQ, юридическая ссылочка.
9:41
PLUS
Максимум возможностей
для продвинутых пользователей
Подключить
Учётная запись
FREE
История чатов
Баланс
277
Купить токены
Пригласить друга
Тёмная
Светлая
RU Русский
ENG English
FAQ
Политика конфиденциальности Пользовательское соглашение
@ Все ИИ | Нейросети, 2026
Профиль
ВСЕ ИИ
Чаты
Источник: `pages/settingsPage/settingsPage.tsx`
PLUS-баннер изменяется по статусу: `plus` → PlusBanner (отмена/up-status), `free` → FreeBanner (upsell), нет user → EmptyBanner. В макете показан FREE upsell.
Drift fix: в апп Settings имеет специальный bg gradient (purple/blue/teal в Layout.tsx) — не canon. В макете убрал, фон унифицирован.
Subscriptions PLUS /subscriptions
Страница подписки PLUS — продающий редизайн (Задача 4 ТЗ): toggle Year/Month, Free vs PLUS, каталог моделей по tier'ам, sticky CTA.
Источник: `pages/subscriptionsPage/subscriptionsPage.tsx` + `features/settings/subscriptions/`
Реализация: уже готова в mockup.html (1393 строки, продающий редизайн с каталогом моделей, tier-gradients, currency toggle Rub/Stars).
Открыть в полный экран: mockup.html ↗
// 04 AI MODELS · 3 экрана

## Модели и ассистенты

Каталог ИИ-моделей с детальной инфой, выбор новой модели для чата, grid ассистентов (Бизнесмен / Инвестор / Маркетолог и т.д.).

InfoModel /info-model
Детальная страница модели — заголовок с лого/именем, slider возможностей, описание + tagline.
9:41
Модель
Gemini 2.5 Pro
Google · Топ модель
Текст
Код
Изображения
PDF

### О модели

Gemini 2.5 Pro — флагманская мультимодальная модель Google. Поддерживает контекст до 2M токенов, нативно понимает текст, изображения, аудио и видео. Лидер в задачах рассуждения и анализа кода.

Контекст
2M токенов
Стоимость
15 токенов / запрос
Доступ
PLUS
Профиль
ВСЕ ИИ
Чаты
Источник: `pages/infoModelPage/infoModelPage.tsx` + `features/infoModel/`
PLUS-only models должны иметь cyan PLUS-badge. FREE-доступные показывают cost в токенах.
NewChatModel — выбор модели /new-chat-model
Provider-grouped accordion. Один row на провайдера (GPT / Claude / Gemini / Grok / DeepSeek / Kimi), expand → список версий с radio. Цветные letter-avatars для каждого provider'а. Бэдж «Новое» на свежих топ-моделях.
9:41

## ИИ модели

Текст
Картинки
Видео
Аудио
G
GPT i
OpenAI · GPT-5
GPT-5
Флагман OpenAI · сложный анализ
GPT-5.4 Pro Новое
Топовый reasoning · кодинг
GPT-4o
Отличное качество для большинства задач
GPT-4o Mini
Быстрый и умный · бесплатно
C
Claude i
Anthropic · Sonnet 4.5
G
Gemini i
Google · 2.5 Pro
X
Grok i
xAI · Grok 4
D
DeepSeek i
V3.1 · Универсал
K
Kimi i
Moonshot · K2
Источник: CANON из `brandbook-public/mockup.html` (T2 v7) — provider-grouped accordion.
Drift fix: предыдущая моя версия (tier-organized с NEW/PLUS/FREE бэджами) ОТМЕНЕНА. Возвращён каноничный provider-accordion.
Цветные avatars: `openai` (#1A6E48), `anthr` (#B25A2B), `google` (#2C5DB5), `xai` (#2A2A2A), `deepseek` (#5B43C8), `kimi` (#4A7B5C).
Assistant /assistant
Grid ассистентов 2 cols (mobile). Каждый — image card 190px с title и star (favorite). FREE-locked = opacity 0.4.
9:41
Ассистенты
Поиск ассистента
Бизнесмен
Стратегия, переговоры, презентации
Инвестор
Анализ рынков, оценка стартапов
Маркетолог
Контент, реклама, аналитика
Психолог
Эмоции, поддержка, мотивация
Юрист
Договоры, споры, претензии
Шеф-повар
Рецепты, меню, диета
Профиль
ВСЕ ИИ
Чаты
Источник: `pages/assisitantPage/assistantPage.tsx`
Active favorite = cyan filled star. FREE-locked ассистенты (если user.subscription === 'free' и не в FREE_ALLOWED) = opacity 0.4 + lock icon, клик переводит на /subscriptions.
// 05 MONETIZATION · 4 экрана

## Монетизация

Покупка токенов (RUB / Telegram Stars), реферальная программа, история платежей, привязанные карты.

Token /token
5 пакетов токенов (RUB или Stars). Tab toggle валют. Динамический CPU. Sticky CTA «Оплатить» снизу.
9:41
Покупка токенов

# Покупка токенов

После пополнения баланса токены доступны сразу. Не сгорают и не блокируются при прекращении подписки.

Рубли
Telegram Stars
2 500 токенов
≈ 0.20 ₽ / токен
499 ₽
5 800 токенов
≈ 0.17 ₽ / токен
−14%
999 ₽
10 000 токенов
≈ 0.15 ₽ / токен
1 499 ₽
20 000 токенов
≈ 0.12 ₽ / токен
2 499 ₽
50 000 токенов
≈ 0.10 ₽ / токен · −50%
4 999 ₽
Источник: `pages/tokenPage/tokenPage.tsx` + `entities/tokens/TopUpList`
Selected bundle = cyan border + cyan glow + cyan price hint. Sticky white CTA снизу с динамической суммой.
Referral /referral
Реферальная программа: 100 токенов за каждого друга. 3 шага с cyan timeline, статистика, ссылка с copy/share, share button.
9:41
Пригласить друзей

# Пригласите друзей

## Получите 100 токенов
за каждого

Приглашаете друзей по ссылке
Друзья регистрируются в приложении
Получаете 100 токенов за каждого
Друзей приглашено: 12
Начислено токенов: 1 200
Пригласительная ссылка
t.me/VSEIIBOT?start=ref_a4f9
Источник: `pages/referralPage/referralPage.tsx`
Drift fix: в апп используются `bg-darkGray` cards и `text-cyan-400` (Tailwind preset). Унифицировал на canon glass-cards и `--accent-cyan`.
Payments (history) /payments
История платежей: sticky header «Сортировка» с dropdown, expandable transaction cards со статусом, описанием, методом, датой.
9:41
История платежей
Сортировка
Сначала новые
PLUS · Год
29 апр 2026 · 12:34
2 299 ₽
УСПЕШНО
Visa **4242
5 800 токенов
22 апр 2026 · 15:47
999 ₽
УСПЕШНО
10 000 токенов
15 апр 2026 · 09:21
1 499 ₽
ОТКЛОНЕНО
Источник: `pages/paymentsPage/paymentsPage.tsx` + `features/payments/cardList/ui/transactionCard.tsx`
Empty state: glass card 8 × 12 px padding с CreditCard icon и текстом «Нет платежей». Status colors: completed=green, failed=red, pending=warn.
Cards /cards
Привязанные карты — список с brand-логотипом, last4, кнопкой удаления. Empty state по центру.
9:41
Способы оплаты

## Привязанные карты

VISA
Visa
**4242
Mastercard
**5588
Добавить карту
Источник: `pages/cardPage/cardPage.tsx` + `features/carrd/cardList/`
В live апп — empty state: «Нет карт» / «Добавьте карту для совершения покупок» по центру.
// 06 GROWTH · 4 экрана

## Партнёрка и рост

Партнёрская программа для блогеров (с галереей приглашённых), форма заявки, рекламные оверлеи (награда за просмотр), entry point партнёрки.

Partner (entry) /partner
Точка входа в партнёрку — простой переход к /partner-blog (для блогеров).
9:41
Партнёрская программа

## Партнёрская программа

Подключи апп к своей аудитории и зарабатывай с каждой подписки.

Ваш статус
Не подключено
Подайте заявку и получите 30% revenue share с каждого приглашённого PLUS-юзера.
Для блогеров
YouTube · TikTok · Telegram
Подать заявку
Анкета · 5 минут
Условия программы
30% revenue · pay-out monthly
Источник: `pages/partnerPage/partnerPage.tsx`
Drift fix v2: предыдущий вариант имел гигантский chevron (class без размеров) и большие 44×44 цветные icon-боксы. Заменил на canonical list-card pattern (как Settings/Profile) — единый visual language во всём приложении.
Hero-stats card сверху — cyan glow в нашем canon стиле, позиционирует цель «подключиться».
PartnerBlog /partner-blog
Партнёрская реферальная — 3 шага cyan timeline, галерея приглашённых друзей с фото, реферальная ссылка.
9:41
Партнёрская программа

# Партнёрская программа

Приглашаете друга по ссылке
Ваш друг регистрируется
Вы получаете токены
Вы уже пригласили 4 друга
Мария
Подобр…
Алексей
Зайцев
Антон
Иванов
Иван
Щур
Ваша ссылка
t.me/VSEIIBOT?start=blog_a4f9
Источник: `pages/partnerBlogerPage/referralBlogerPage.tsx`
Avatars из Unsplash в апп — здесь заменены на gradient-circles с cyan border. Реальные фото подгрузятся фронтом.
Apply (form) /apply
Анкета для партнёрской программы — поля Имя, Telegram, YouTube, Instagram, TikTok, ВК, другое. Submit с success state.
9:41
Заполните анкету

## Заполните анкету

Имя
Telegram
YouTube
Instagram
TikTok
Источник: `pages/applyPage/applyPage.tsx`
Drift fix: в апп input'ы используют `text-black bg-white` (на тёмном фоне!) и `focus:ring-blue-500` — слепое наследие. Заменил на canon glass inputs с cyan focus.
Ads (reward overlay) /ads
Reward overlay после просмотра рекламы — Diamond icon, «+15 токенов», CTA «Смотреть ещё». Внизу — карточка рекламируемого приложения.
9:41
Ура! Вы получили
+15 токенов!
Total Battle: Strategy Games
Kingdom Wars: Kings & Castles
Источник: `pages/adsPage/adsPage.tsx`
Overlay появляется через 2s после загрузки. До overlay — на месте reward content live ad-видео (LazyImage `Ads`).
// 07 STATIC · 4 экрана

## Статика и информация

FAQ с accordion, юридические тексты (Privacy / Terms), новости. Самые тривиальные экраны — но в едином canon.

Questions (FAQ) /questions
Часто задаваемые вопросы — Radix Accordion с раскрытием. ChevronRight rotates 90° на open.
9:41
FAQ

## Часто задаваемые вопросы

Что такое токены и сколько их нужно?
Токены — это внутренняя валюта апп. 1 запрос к модели тратит от 1 до 25 токенов в зависимости от модели и сложности. Купить пакет можно во вкладке «Баланс».
Чем PLUS отличается от FREE?
Как отменить подписку?
Какие модели доступны?
Где найти историю чатов?
Источник: `pages/questionsPage/questionsPage.tsx` (Radix Accordion + `shared/data/questionsData`)
Open state: chevron поворачивается на 90°, заголовок становится белым (vs grey закрытых).
Privacy /privacy
Политика конфиденциальности — длинный текстовый документ со скроллом. Заголовки h2/h3, параграфы.
9:41
Конфиденциальность

# Политика конфиденциальности

Обновлено 22.04.2026

## 1. Общие положения

Настоящая Политика конфиденциальности регулирует обработку персональных данных пользователей Telegram Mini App «Все ИИ» (далее — «Сервис»). Используя Сервис, Вы соглашаетесь с условиями данной Политики.

## 2. Какие данные мы собираем

Мы обрабатываем следующие категории данных:

- Идентификатор Telegram (telegram_user_id)
- Имя пользователя и аватар (передаются Telegram)
- История запросов к ИИ-моделям
- Платёжные операции (через защищённого провайдера)

## 3. Цели обработки

Данные обрабатываются для предоставления услуг ИИ-генерации, ведения учёта подписок и баланса токенов, защиты от мошенничества.

## 4. Хранение и удаление

История чатов хранится 90 дней. Данные платежей — в течение срока, установленного законодательством. По запросу пользователь может удалить свой аккаунт через поддержку.

Источник: `pages/privacyPage/privacyPage.tsx`
Контент текстовой — H2 заголовки cyan, тело white@60%. Реальный текст подгружается из `shared/data/`.
Conditions (Terms) /conditions
Пользовательское соглашение — ту же структуру что Privacy, но другой контент.
9:41
Соглашение

# Пользовательское соглашение

Обновлено 22.04.2026

## 1. Предмет соглашения

Настоящее Соглашение определяет порядок использования Telegram Mini App «Все ИИ». Регистрируясь и используя Сервис, Вы принимаете условия Соглашения в полном объёме.

## 2. Подписка PLUS

PLUS подписка оформляется на 1 месяц или 1 год с автоматическим продлением. Отмена доступна в любой момент через раздел «Профиль» — после отмены доступ сохранится до конца оплаченного периода.

## 3. Возврат средств

Возврат средств возможен в течение 14 дней с момента оплаты при условии, что услуга не была фактически использована (не было совершено запросов к платным моделям).

## 4. Ограничения

Сервис нельзя использовать для генерации запрещённого контента (CSAM, терроризм, дискриминация, нарушение авторских прав).

Источник: `pages/userConditionsPage/userConditionPage.tsx`
Структура повторяет Privacy — единый layout для legal documents.
News /news
Новости и обновления — feed с карточками. Сейчас в апп страница пустая — добавил мокап с дизайном «как должно быть».
9:41
Новости

## Что нового

NEW
GPT-5.4 Pro теперь доступен в PLUS
Флагманская модель OpenAI с контекстом 1M токенов и улучшенным reasoning'ом.
29 апр
Veo 3.1 — генерация видео до 30 секунд
Новый режим длинных клипов с native-аудио.
25 апр
Реферальная программа: 100 токенов за друга
Приглашайте друзей и получайте токены за регистрацию.
20 апр
Источник: `pages/newslPage/newsPage.tsx`
В live апп страница ПУСТАЯ — только ``p-4 h-screen`` div без контента. Дополнил структурой по аналогии с другими feed-экранами.
// Для фронта · drop-in архивы
Скачать дизайн пакетом
Два архива на выбор: полный дизайн (всё что есть в брендбуке — 4 версии экранов, mockups, params, loaders, баннеры, иконки, ТЗ) или только баннеры (mini-пакет с CSS-токенами и React-компонентами для быстрого drop-in).
↓ Полный дизайн (5.5 MB) ↓ Только баннеры (1.9 MB) Handoff page →
82 файла · все темы · оба языка · auth-free
// 08 BANNERS · 3 формата

## Банеры PLUS

Анимированные strip-баннеры для всех breakpoints — premium liquid-glass с динамическим свечением. Размеры строго совпадают с release-notes-серией (393×180 / 768×261 / 1200×260) — единая raster-сетка под все банеры в апп. PLUS-баннер на /settings, hero на /subscriptions, лендинг-маркетинг.

Mobile 393 × 180 · ~2.18:1
Mini App в Telegram (mobile viewport). PLUS-баннер на /settings, /profile (apply через `<PlusBanner />`).
Скачать: ↓ MP4 393×180 · ↓ Hero 9:16 (archive 1080×1920)
Tablet 768 × 261 · ~2.94:1
Tablet breakpoint (640px ≤ width < 1024px). Auto-play, gradient liquid + cyan glow.
Скачать: ↓ MP4 768×261 · ↓ Hero 16:9 (archive 1920×1080)
Desktop 1200 × 260 · ~4.6:1
Desktop breakpoint (width ≥ 1024px). Full desktop strip, max-width контента 1120px (Задача 3 ТЗ).
Скачать: ↓ MP4 1200×260 · ↓ Hero 16:9 (archive 1920×1080)
// 08b RELEASE NOTES · 3 формата

## Банеры релизных нот

Вторая серия баннеров — под анонс новой версии («Что нового»). Узкие горизонтальные strip'ы под breakpoint'ы апп. Тот же liquid-glass язык, что у PLUS-серии, но без particle-glow и без лого ∞ — характер «info / обновление», не «promo». Анимация — медленный дрейф цветных blob'ов под стеклом + дышащая cyan accent-line.

Mobile 393 × 180 · ~2.18:1
Mini App в Telegram, mobile viewport. Vertical stack: chip → заголовок → 4 буллета 2×2.
Скачать / открыть: ↓ HTML 393×180 · открыть в новой вкладке ↗
Tablet 768 × 261 · ~2.94:1
Tablet breakpoint. Горизонтальная компоновка: chip + заголовок 42px слева, фичи 2×2 справа.
Скачать / открыть: ↓ HTML 768×261 · открыть в новой вкладке ↗
Desktop 1200 × 260 · ~4.6:1
Desktop breakpoint. Та же компоновка что у tablet, но шире и заголовок 56px. На /home или /news как hero-анонс релиза.
Скачать / открыть: ↓ HTML 1200×260 · открыть в новой вкладке ↗
// 09 BRAND SYMBOL & LOADERS · 12 логотипов + Liquid Loader

## Бренд-знак ∞ и лоадеры

Master path: единая Cassini-форма ∞ (c/a=0.99, target_height=50). 12 logo-вариантов через одну SVG `<symbol>` + ::use. Liquid Loader (3 размера × 3 темпа) для loading states. Полная коллекция и анимации — на /loaders.

01 · White solid
primary
02 · Outline
secondary
03 · Cyan accent
brand
04 · Liquid glass
premium
05 · Silver gradient
accent
06 · Glow
hero/splash
07 · Cyan gradient
marketing
08 · Inverted
light bg
09 · Bichromatic
duotone
10 · Neon
night
11 · Wireframe
technical
12 · Dotted
decorative
LIQUID LOADER · 6 STATES

### Анимации брендового знака

Idle (breathing) · Listening (liquid waves) · Speaking (voice bars) · Thinking (cyan halo pulse) · Alert (быстрый bright pulse) · Sleeping (scaleY collapse). Используются для loading-states и future voice-assistant face-system.

Открыть loaders.html ↗
// 10 GENERATION PARAMS · 2 modal'а

## Параметры генерации

Liquid glass модалы параметров для image / video нейросетей. Включают reference-image, пропорции (5 вариантов), качество/разрешение, длительность (4–30 сек видео), кадры начала/конца, аудио-toggle, динамический расчёт стоимости в токенах. Открываются из chat composer'а через icon-toggle.

### Изображения · Параметры

- · Загрузка референс-изображения (text-to-img / img-to-img)
- · 5 пропорций: 1:1 / 4:3 / 16:9 / 2:3 / 9:16
- · Качество: Низкое (30) / Стандартное (90) / Высокое (185 токенов)
- · Stepper количество: до 4 изображений
- · Динамический расчёт стоимости
- · White CTA «Применить» pill

### Видео · Параметры

- · 2 кадра-слота: начальный + конечный
- · Длительность 4–30 сек через slider
- · Разрешение: 480p / 720p / 1080p / 4K
- · 5 пропорций (включая 21:9 cinematic)
- · Аудио-тогл (+30% к стоимости)
- · Стоимость: base 110 × dur/5 × resolution × audio-mult

Открыть в полный экран ↗ Скачать params.html
Источник: `features/audio/ui/videoPopup.tsx` (видео-параметры) + `features/chat/chatModel/ui/MainInput.tsx` (вызов).
В live апп открывается как bottom-sheet или modal по клику на icon-toggle в composer'е.