Все ИИ — Frontend Handoff

// 01 DESIGN TOKENS · CSS variables

Design tokens

Базовый набор CSS-переменных для всех баннеров. Положи в свой :root или используй namespace через класс. Совпадает с tokens из app-screens.html — единая система.

Tokens · :root CSS · 28 переменных

Цвета, glass-материал, accent, radius scale. Light-тема — override этих vars в [data-theme="light"] или @media (prefers-color-scheme: light).

:root {
  /* Background */
  --bg-primary: #181819;
  --bg-secondary: #0F0F10;

  /* Glass surface */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-strong: rgba(255, 255, 255, 0.22);
  --glass-highlight: rgba(255, 255, 255, 0.35);

  /* Brand accent */
  --accent-cyan: #54C4CE;
  --accent-cyan-soft: rgba(84, 196, 206, 0.25);
  --accent-cyan-text-on: #0E2A2C;

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-tertiary: #9CA3AF;
  --text-muted: rgba(255, 255, 255, 0.45);

  /* Radius scale */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Typography */
  --font-sans: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

// 02 PLUS BANNERS · 3 формата (mp4)

PLUS Banners — анимированные mp4

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

Базовый CSS-класс .plus-banner + модификаторы

Один общий класс с aspect-ratio модификаторами под каждый breakpoint. object-fit:cover + aspect-ratio убирают letterbox при сжатии viewport.

.plus-banner {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--bg-primary);
}
.plus-banner--mobile  { aspect-ratio: 393 / 180;  max-width: 393px; border-radius: var(--r-lg); }
.plus-banner--tablet  { aspect-ratio: 768 / 261;  max-width: 768px; border-radius: var(--r-xl); }
.plus-banner--desktop { aspect-ratio: 1200 / 260; max-width: 1200px; border-radius: 28px; }

PLUS · Mobile 393 × 180 · ~2.18:1 · mp4 (89 KB)

Mini App в Telegram (mobile viewport). PLUS-баннер на /settings, /profile.

<video class="plus-banner plus-banner--mobile"
       src="/assets/banners/banner-mobile-393x180.mp4"
       muted loop autoplay playsinline></video>

Скачать: ↓ banner-mobile-393x180.mp4 источник: banner-mobile-9x16.mp4 (1080×1920 archive)

PLUS · Tablet 768 × 261 · ~2.94:1 · mp4 (495 KB)

Tablet breakpoint (640px ≤ width < 1024px). Auto-play, gradient liquid + cyan glow.

<video class="plus-banner plus-banner--tablet"
       src="/assets/banners/banner-tablet-768x261.mp4"
       muted loop autoplay playsinline></video>

Скачать: ↓ banner-tablet-768x261.mp4 источник: banner-tablet-16x9.mp4 (1920×1080 archive)

PLUS · Desktop 1200 × 260 · ~4.6:1 · mp4 (1.3 MB)

Desktop breakpoint (width ≥ 1024px). Full desktop strip, content max-width 1120px.

<video class="plus-banner plus-banner--desktop"
       src="/assets/banners/banner-desktop-1200x260.mp4"
       muted loop autoplay playsinline></video>

Скачать: ↓ banner-desktop-1200x260.mp4 источник: banner-desktop-16x9.mp4 (1920×1080 archive)

// 03 RELEASE NOTES · 3 формата (HTML/CSS)

Release Notes Banners — HTML/CSS

«Что нового» — info-баннер для анонса релиза. Чистый HTML+CSS (без JS), liquid-glass + ambient blob-анимация + дышащая cyan accent-line. Два варианта интеграции: iframe-embed (быстро, как готовый компонент) или inline markup (вставить разметку напрямую и параметризовать).

Release Notes · Mobile 393 × 180 · ~2.18:1 · HTML

Mini App, mobile viewport. Vertical stack: chip → title → 4 фичи в 2×2.

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

export function ReleaseNotesBanner({ size = "mobile" }) {
  return (
    <iframe
      className={`release-banner release-banner--${size}`}
      src={`/assets/banners/release-notes-${size}.html`}
    />
  );
}

Скачать / открыть: ↓ release-notes-mobile.html открыть ↗ EN: release-notes-mobile-en.html

Release Notes · Tablet 768 × 261 · ~2.94:1 · HTML

Tablet breakpoint. Горизонтальная компоновка: chip + заголовок 42px слева, фичи 2×2 справа.

<iframe class="release-banner release-banner--tablet"
        src="/assets/banners/release-notes-tablet.html"></iframe>

Скачать / открыть: ↓ release-notes-tablet.html открыть ↗ EN: release-notes-tablet-en.html

Release Notes · Desktop 1200 × 260 · ~4.6:1 · HTML

Desktop breakpoint. То же что у tablet, но шире и заголовок 56px. Hero release-анонс на /home или /news.

<iframe class="release-banner release-banner--desktop"
        src="/assets/banners/release-notes-desktop.html"></iframe>

Скачать / открыть: ↓ release-notes-desktop.html открыть ↗ EN: release-notes-desktop-en.html

Базовый CSS-класс для iframe-embed .release-banner + модификаторы

Тот же подход что у PLUS: один класс с aspect-ratio. Iframe не имеет letterbox при сжатии за счёт aspect-ratio + height:auto.

.release-banner {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0;
  background: var(--bg-primary);
}
.release-banner--mobile  { aspect-ratio: 393 / 180;  max-width: 393px; border-radius: var(--r-lg); }
.release-banner--tablet  { aspect-ratio: 768 / 261;  max-width: 768px; border-radius: var(--r-xl); }
.release-banner--desktop { aspect-ratio: 1200 / 260; max-width: 1200px; border-radius: 28px; }

// 04 REACT/VUE · готовые обёртки

React / Vue обёртки

Готовые компоненты с responsive-логикой через matchMedia: автоматически выбирают нужный формат под текущий viewport. Работают и для PLUS-видео, и для Release Notes-iframe.

PlusBanner.tsx (React) responsive · 1 компонент, 3 размера

Хук useBreakpoint() определяет mobile/tablet/desktop, рендерит соответствующий mp4. Mp4 файлы должны лежать в /public/assets/banners/.

import { useEffect, useState } from 'react';

type Breakpoint = 'mobile' | 'tablet' | 'desktop';

function useBreakpoint(): Breakpoint {
  const [bp, setBp] = useState<Breakpoint>('desktop');
  useEffect(() => {
    const m = window.matchMedia('(max-width: 639px)');
    const t = window.matchMedia('(max-width: 1023px)');
    const apply = () => setBp(m.matches ? 'mobile' : t.matches ? 'tablet' : 'desktop');
    apply();
    m.addEventListener('change', apply);
    t.addEventListener('change', apply);
    return () => {
      m.removeEventListener('change', apply);
      t.removeEventListener('change', apply);
    };
  }, []);
  return bp;
}

const SIZES = {
  mobile:  { file: 'banner-mobile-393x180.mp4',  w: 393,  h: 180 },
  tablet:  { file: 'banner-tablet-768x261.mp4',  w: 768,  h: 261 },
  desktop: { file: 'banner-desktop-1200x260.mp4', w: 1200, h: 260 },
} as const;

export function PlusBanner() {
  const bp = useBreakpoint();
  const cfg = SIZES[bp];
  return (
    <video
      key={bp}
      className={`plus-banner plus-banner--${bp}`}
      src={`/assets/banners/${cfg.file}`}
      muted loop autoPlay playsInline
    />
  );
}

ReleaseNotesBanner.tsx (React) responsive iframe embed · locale-aware

Берёт RU или EN HTML-вариант на основе locale пропа. Размер тот же breakpoint-driven подход.

type Locale = 'ru' | 'en';

export function ReleaseNotesBanner({ locale = 'ru' }: { locale?: Locale }) {
  const bp = useBreakpoint();
  const suffix = locale === 'en' ? '-en' : '';
  return (
    <iframe
      key={`${bp}-${locale}`}
      className={`release-banner release-banner--${bp}`}
      src={`/assets/banners/release-notes-${bp}${suffix}.html`}
      title="Release notes"
    />
  );
}

// 05 FILES MANIFEST · что и куда

Files manifest

Список всех ассетов баннеров с относительными путями от корня brandbook-public/. Скачай нужное и положи в /public/assets/banners/ своего проекта.

Файл	Тип	Размер	Назначение
banner-mobile-393x180.mp4	mp4 · h264	393×180 · 89 KB	PLUS · mobile	↓
banner-tablet-768x261.mp4	mp4 · h264	768×260 · 495 KB	PLUS · tablet	↓
banner-desktop-1200x260.mp4	mp4 · h264	1200×260 · 1.3 MB	PLUS · desktop	↓
banner-mobile-9x16.mp4	mp4 · archive	1080×1920	archive (исходный hero)	↓
banner-tablet-16x9.mp4	mp4 · archive	1920×1080	archive (исходный hero)	↓
banner-desktop-16x9.mp4	mp4 · archive	1920×1080	archive (исходный hero)	↓
banners/release-notes-mobile.html	html · self-contained	393×180	Release notes · mobile · RU	↓
banners/release-notes-tablet.html	html · self-contained	768×261	Release notes · tablet · RU	↓
banners/release-notes-desktop.html	html · self-contained	1200×260	Release notes · desktop · RU	↓
banners/release-notes-mobile-en.html	html · self-contained	393×180	Release notes · mobile · EN	↓
banners/release-notes-tablet-en.html	html · self-contained	768×261	Release notes · tablet · EN	↓
banners/release-notes-desktop-en.html	html · self-contained	1200×260	Release notes · desktop · EN	↓

↳ Quick start:

Скачай 9 основных файлов (3 mp4 strip + 6 HTML) → положи в /public/assets/banners/
Скопируй CSS-блок с tokens и базовыми классами .plus-banner / .release-banner
Импортируй PlusBanner / ReleaseNotesBanner компоненты или используй HTML-сниппеты напрямую
Если нужен другой текст в Release Notes — отредактируй HTML-файлы или попроси нас параметризовать (template-version)