Performante Funnel · v19 → v21

Phase A

Mobile responsive sweep · v19 → v20

+Hero section: исправлен layout на 375px — preview-card перестал выезжать за viewport
+Floating chips в Hero: `hidden lg:flex` — не перекрывают карточку на mobile/tablet
+Quiz sections: flex-wrap и gap-правки для sm breakpoint
+v20 зафиксирован как snapshot на funnel-v20.obahoba.com

Snapshot: funnel-v20.obahoba.com

Phase B

Design System v2 · Brand visual language

+design-system.md v2: секция «Brand visual language Soft 3D Editorial» — 7 характеристик, palette, mood, anti-patterns
+Component: Glow Pill — recurring motif, mint-500 fill, soft glow-aura, аналог Stripe parallelogram
+Color pairings: 6 ниш × семантические цвета (clinical/premium/warm/feminine/appetizing/industrial)
+Button effects: shadow-xl shadow-mint-500/30 для accent, active:scale-[0.98], hover:translate-x-0.5 для arrow-icons
+4 graphic patterns зафиксированы: Floating Mosaic BG, Carousel Showcase, Glow Pill floating, Brand Illustration Banner

Файл: design-system.md v2

Phase C

18 реальных креативов · 6 ниш × 3 archetype

Ниши (6)

BrightSmile — стоматология Алматы (medical clinical)
Zoomdent — виниры премиум (medical aesthetic)
Smile-lab — детская стоматология (medical warm)
Blossom Beauty — салон красоты МСК (beauty feminine)
Local Kitchen — кафе-доставка Алматы (F&B appetizing)
Borodach — барбершоп МСК (services masculine)

Archetype (3 на нишу)

PORTRAIT_AUTHORITY — доверие через лицо
TYPO_HERO — типографика + hook
PRODUCT_PACKSHOT — продукт на чистом фоне

Модель: gemini-3-pro-image (Vertex AI) · Стоимость: ~$2.43 · Формат: WebP 9:16

Phase D

8 brand illustrations · Soft 3D Editorial

1banner-what-is-performante.webp — flow diagram Instagram→AI→клиенты

2banner-three-steps.webp — три шага за 15 минут

3banner-chat-feature.webp — chat-управление рекламой

4banner-results.webp — результаты кампаний

5hero-bg-soft.webp — soft background для hero

6glow-pill-variants.webp — recurring motif вариации

7decorative-ellipses.webp — декоративные эллипсы (Uprock ref)

8empty-state-no-campaigns.webp — empty state дашборда

Модель: gemini-3-pro-image · Стоимость: ~$1.08

Phase E

Финальная интеграция → v21

E1 — CSS Keyframes

float-slow — 4s, glow-pill в hero
slow-pan — 60s linear, mosaic фон
prefers-reduced-motion — анимации выкл.

E2 — CreativeGrid реальные

3 gradient-placeholder → 3 blossom-beauty webp
Object-cover + абсолютное позиционирование
AI·Variant badges сохранены

E3 — Mosaic фон «Что меняется»

CSS `::before` с creatives-mosaic.webp
opacity 0.10 + blur(8px) + mask-gradient
slow-pan 60s animation

E4 — Hero hybrid

Blurred mosaic за preview-card (sm+ only)
Glow-aura mint-500/15 за card
Floating glow-pill «AI смотрит» с animate-float-slow

E5 — Brand illustrations (4 из 4)

«Что такое Performante» → banner-what-is-performante.webp
«Три шага» → banner-three-steps.webp (над bento)
«Управляй через чат» → banner-chat-feature.webp (bg за phone)
«Что меняется» → banner-results.webp (под heading)

E6 — Carousel в Cases

6 креативов: 5 non-dental + 1 dental
snap-x snap-mandatory, lazy loading
Metadata: ниша + CPL под каждым

Playwright smoke-test — PASSED

375px (mobile), 768px (tablet), 1280px (desktop) — layout clean, нет overflow, illustrations рендерятся, анимации включены

Бюджет sprint

18 креативов (Phase C)

~$2.43

gemini-3-pro-image · 18 × $0.135

8 иллюстраций (Phase D)

~$1.08

gemini-3-pro-image · 8 × $0.135

Итого

~$3.51

26 assets · v21 production-ready