# VSE AI — Полный дизайн-пакет

Локальная offline-копия брендбука `vse-ai-brandbook.pages.dev`. Всё что нужно фронту в одном архиве — ничего не надо скачивать дополнительно.

## Старт

**Открой `index.html`** двойным кликом — это landing с навигацией ко всем страницам пакета. Auth-guard убран, всё работает локально.

Google Fonts (Manrope, JetBrains Mono) подгружаются с CDN — для полного offline-режима нужен интернет на первой загрузке (потом браузер закеширует).

## Что внутри

### Источники правды для фронта

- **app-screens.html / app-screens-light.html / app-screens-dark-en.html / app-screens-light-en.html** — все 24 экрана Mini App в едином liquid-glass стиле. 4 страницы = 2 темы × 2 локали. Каждая реконструирована из реального кода фронта (не скриншотов) и приведена к canon glass-языку. Это первая точка для фронта при сверке.

- **frontend-handoff.html** — отдельная страница для копирования готового кода: design tokens, классы баннеров, React-обёртки, manifest файлов, copy-кнопки на каждом snippet'е.

### Brand identity

- **brandbook.html** — общий brandbook с brand essentials.

> ⚠️ Прежняя `loaders.html` + `loaders-assets/` (12 Cassini-вариантов лого ∞ + Liquid Loader) удалены 2026-05-29 — bantik logo banned per `feedback_logo_official_vs_decorative.md`. Официальное лого ∞ — `assets/icon-infinity.svg` (минималистичный векторный знак).

### Design system

- **params.html / params-light.html / params-en.html / params-light-en.html** — design tokens: цвета, шкала радиусов, типографика, glass-материал, accent. Все compoненты с примерами.

### Mockups

- **mockups-providers.html** — canon v2 страница провайдеров: список провайдеров (model-picker), детальная страница провайдера (InfoModel), Plus-баннер на весь экран (3 варианта фона из `assets/plus-bg/`), Promo-баннер на главной. Все компоненты — copy-paste из `app-screens.html` (single source of truth). Внизу секция «Скачать» с `providers.json` (тексты + список провайдеров, semver, фронт читает JSON, не хардкодит). **Новое в этом пакете.**

- **affiliate.html** — visual roadmap affiliate-программы.

- **mockup.html / mockup-light.html / mockup-en.html / mockup-light-en.html** — продающий редизайн PLUS-страницы (каталог моделей, tier-gradients, currency toggle Rub/Stars). 4 локализованных варианта.

- **mockups.html** — индексная страница галерея (PLUS-подписка).

### Banners (PLUS + Release Notes)

#### PLUS — анимированные mp4 strip-баннеры

Premium liquid-glass с динамическим свечением. 3 размера под breakpoints апп. Используются как PLUS-апсейл на /settings, hero на /subscriptions, лендинг-маркетинг.

- `banner-mobile-393x180.mp4` (89 KB)
- `banner-tablet-768x261.mp4` (495 KB)
- `banner-desktop-1200x260.mp4` (1.3 MB)

Архивы исходных hero-mp4 (1080×1920 / 1920×1080):
- `banner-mobile-9x16.mp4` · `banner-tablet-16x9.mp4` · `banner-desktop-16x9.mp4`

#### Release Notes — info-баннеры «Что нового»

Self-contained HTML с зашитым контентом (Версия 1.4 + 4 фичи). Liquid-glass + ambient blob-анимация + дышащая cyan accent-line. 3 размера × 2 локали.

```
banners/
├── release-notes-mobile.html      (RU · 393×180)
├── release-notes-tablet.html      (RU · 768×261)
├── release-notes-desktop.html     (RU · 1200×260)
├── release-notes-mobile-en.html   (EN · 393×180)
├── release-notes-tablet-en.html   (EN · 768×261)
└── release-notes-desktop-en.html  (EN · 1200×260)
```

Drop-in mini-пакет с готовыми CSS-токенами, React-компонентами и demo для **только баннеров** — рядом в `../vse-ai-banners.zip` (1.9 MB).

### Документация

- **system.html** — system map: карта зависимостей, breakpoints.
- **tz.html** — техническое задание дизайна (исходное ТЗ).


### Providers banners (drop-in для фронта)

Standalone-пакет двух баннеров со страницы Провайдеры (`mockups-providers.html`) — для удобной интеграции в Mini App **без выковыривания из общей страницы мокапа**:

- `providers-banners/plus-fullscreen.html` — Plus full-screen модалка, 3 варианта (A основной / B агрессивный / C с буллитами)
- `providers-banners/promo-banner.html` — Promo home strip-полоска, 4 варианта (A конкретика / B процент / C без цифр / D gold-триггер)
- `providers-banners/banners.css` — изолированные стили (6 KB, drop-in, копи-паст)
- `providers-banners/PlusBanner.tsx` + `PromoBanner.tsx` — React-обёртки, props читают `assets/providers.json`
- `providers-banners/plus-bg/` — 3 PNG-фона (v1-cyan-waves / v2-cyan-aurora / v3-cyan-flow)
- `providers-banners/README.md` — HTML и React примеры, JSON-схема, A/B-логика

**Фронт не хардкодит тексты** — fetch'ит `assets/providers.json` на старте app. Banner `primary_variant` в JSON = текущий «победитель» A/B-теста, меняется без кода.
### Иконки и данные

- `assets/` — 21 SVG-иконка (icon-arrow, icon-mic, icon-check, icon-toggle, icon-aspect-*, etc.).
- `assets/providers.json` — список провайдеров + тексты Plus/Promo баннеров (canon source для фронта, semver v1.0.0). Фронт читает JSON, не хардкодит.
- `assets/plus-bg/` — 3 PNG-фона для Plus-баннера: `v1-cyan-waves.png` / `v2-cyan-aurora.png` / `v3-cyan-flow.png`. Выбор активного варианта — через `banners.plus_full_screen.primary_variant` в `providers.json`.

## Breakpoints (везде одинаковые)

- **mobile**: `width <= 639px` → 393×180 для баннеров
- **tablet**: `640px <= width < 1024px` → 768×261
- **desktop**: `width >= 1024px` → 1200×260

Если у вас другая нарезка — поправьте matchMedia в `react/useBreakpoint.ts` (внутри mini-пакета `vse-ai-banners.zip`).

## Шрифты

- **Sans**: Manrope (400, 500, 600, 700, 800)
- **Mono**: JetBrains Mono (400, 500, 600)

Подключаются с Google Fonts. Fallback: `system-ui, sans-serif` / `Consolas, monospace`.

## Brand colors (single source of truth)

```css
:root {
  --bg-primary: #181819;            /* dark surface */
  --glass-bg: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.12);
  --accent-cyan: #54C4CE;            /* основной brand accent */
  --accent-cyan-text-on: #0E2A2C;    /* текст на cyan-кнопках */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255,255,255,0.72);
}
```

Полный набор tokens — открой `params.html` или скопируй из `frontend-handoff.html`.

## Когда обращаться за обновлениями

- Изменился контент Release Notes (новая версия, другие фичи) → попроси template-version с props или новые HTML-файлы.
- Нужны баннеры в других размерах → согласуй с дизайн-командой, потом ffmpeg-crop.
- Нужны новые экраны / редизайн существующих → дизайнер обновит `app-screens.html`, можно повторно скачать архив.

## Источник

Live-зеркало: **https://vse-ai-brandbook.pages.dev/** (под паролем).
Этот архив — снапшот на момент скачивания.

---

Вопросы / правки → дизайн-команде.