# VSE AI Banners — drop-in пакет для фронта

6 баннеров (3 PLUS + 3 Release Notes), 3 размера strip под breakpoints апп. Liquid-glass материал, ambient-анимация, brand-cyan accent. Готовы к интеграции.

## Содержимое

```
vse-ai-banners/
├── README.md                ← вы здесь
├── index.html               ← demo, открыть локально в браузере
├── assets/banners/
│   ├── banner-mobile-393x180.mp4         (89 KB, PLUS · mobile)
│   ├── banner-tablet-768x261.mp4         (495 KB, PLUS · tablet)
│   ├── banner-desktop-1200x260.mp4       (1.3 MB, PLUS · desktop)
│   ├── release-notes-mobile.html         (RU · mobile)
│   ├── release-notes-tablet.html         (RU · tablet)
│   ├── release-notes-desktop.html        (RU · desktop)
│   ├── release-notes-mobile-en.html      (EN · mobile)
│   ├── release-notes-tablet-en.html      (EN · tablet)
│   └── release-notes-desktop-en.html     (EN · desktop)
├── styles/
│   ├── tokens.css           ← CSS-переменные (положить в :root)
│   └── banners.css          ← классы .plus-banner / .release-banner
└── react/
    ├── useBreakpoint.ts     ← хук определения mobile/tablet/desktop
    ├── PlusBanner.tsx       ← responsive video компонент
    └── ReleaseNotesBanner.tsx ← responsive iframe компонент с RU/EN
```

## Quick start (5 шагов)

### 1. Открой `index.html` локально

Просто двойной клик по `index.html` в распакованной папке — увидишь все 6 баннеров живьём, как они должны выглядеть. Поиграйся с шириной окна — баннеры сжимаются responsive через `aspect-ratio + max-width`.

### 2. Скопируй ассеты в свой проект

```
assets/banners/*  →  /public/assets/banners/
```

(или `/static/banners/` — куда ходит у тебя static-server, важно чтобы относительный URL `/assets/banners/...` работал из браузера)

### 3. Подключи стили

```html
<!-- В <head> или импорт через bundler -->
<link rel="stylesheet" href="/styles/tokens.css">
<link rel="stylesheet" href="/styles/banners.css">
```

Или, если у тебя CSS-in-JS / Tailwind / Modules — открой `styles/tokens.css` и `styles/banners.css`, скопируй содержимое в свой глобальный CSS / theme.

### 4. Импортируй React-компоненты

```tsx
import { PlusBanner } from './path/to/react/PlusBanner';
import { ReleaseNotesBanner } from './path/to/react/ReleaseNotesBanner';
```

### 5. Используй

```tsx
// PLUS-апсейл (анимированный mp4 strip):
<PlusBanner />

// Release notes — RU:
<ReleaseNotesBanner locale="ru" />

// Release notes — EN:
<ReleaseNotesBanner locale="en" />

// Кастомный путь к ассетам:
<PlusBanner basePath="/static/media/banners" />
```

Оба компонента сами выбирают mobile/tablet/desktop вариант на основе viewport через `useBreakpoint()` хук (matchMedia, реактивный на resize).

## Vanilla HTML (без React)

Если без React — используй HTML-сниппеты напрямую:

```html
<!-- PLUS · подберёт нужный mp4 вручную или через JS -->
<video class="plus-banner plus-banner--mobile"
       src="/assets/banners/banner-mobile-393x180.mp4"
       muted loop autoplay playsinline></video>

<!-- Release Notes -->
<iframe class="release-banner release-banner--mobile"
        src="/assets/banners/release-notes-mobile.html"></iframe>
```

Меняй модификатор `--mobile` / `--tablet` / `--desktop` и соответствующий файл по breakpoint самостоятельно (через CSS `@media` show/hide или JS).

## Breakpoints

Соответствуют стандартной trip-grid (Tailwind / MUI / Bootstrap):

- **mobile**: `width <= 639px` → 393×180
- **tablet**: `640px <= width < 1024px` → 768×261
- **desktop**: `width >= 1024px` → 1200×260

Если у вас другая нарезка — поправь `useBreakpoint.ts` (constants matchMedia).

## Дизайн-контекст

- **PLUS-баннеры** (mp4) — для апсейла на /settings, hero на /subscriptions, лендинг-маркетинг. Premium liquid-glass + dynamic glow. Без overlay-текста: текст рисуется поверх средствами апп.
- **Release Notes** (HTML) — для анонса релиза («Что нового / What's new»). Self-contained HTML с зашитым контентом (Версия 1.4 + 4 фичи). Liquid-glass + ambient blob-анимация + дышащая cyan accent-line.

## FAQ

**Q: Текст в Release Notes зашит. Как менять?**
A: Сейчас — отредактировать сам HTML. Если нужна параметризация (props `version` / `title` / `features[]`) — попроси template-version у дизайн-команды. ~30 мин на refactor.

**Q: Можно ли заменить mp4 на разные креативы?**
A: Да. Сохраняй размеры строго (393×180 / 768×261 / 1200×260), кодек H.264, контейнер mp4, без аудио (`-an`), `+faststart` для прогрессивной загрузки. Файлы кладутся под теми же именами.

**Q: Lazy-load?**
A: `iframe` уже с `loading="lazy"`. Для `video` — добавь `preload="metadata"` или intersection observer.

**Q: SSR?**
A: `useBreakpoint` использует `window.matchMedia` — внутри `useEffect`, безопасно для SSR (на сервере отрендерится `desktop` по дефолту, после hydration — реальный bp).

## Brand resources

- Brandbook (live): `vse-ai-brandbook.pages.dev`
- Frontend handoff page: `vse-ai-brandbook.pages.dev/frontend-handoff.html`
- Источник pkg: `vse-ai-brandbook.pages.dev/handoff/vse-ai-banners/`

---

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