type: subproject parent: interactive-banners name: Interactive Banners — Menopace slug: banner-menopace status: in-design readiness_pct: 60 brand: Menopace (Vitabiotics) formats: [300x600] legal_code: DM.UA.MEN.26.05.01 campaign_status: pre-launch (чекаємо вибір продакт-менеджерки) created: 2026-04 last_updated: 2026-05-05

Interactive Banners — Menopace 300×600

Інтерактивний банер «Тест Купермана» (6 питань Так/Ні) з ТЗ продакт-менеджерки Deltamedical. CTA → https://menopace.ua/test-indeks-za-kupermanom/. Зараз у фінальному виборі дизайну (3 фіналісти + ТОП-2 v7 + open-design ТОП-3).

Концепт

Формат: 300×600 (DV360) Гра: 6 питань Так/Ні дослівно з ТЗ (Тест Купермана) → 2 CTA → https://menopace.ua/test-indeks-za-kupermanom/ Legal-код: DM.UA.MEN.26.05.01 ТЗ: /srv/projects/menopace-banner-fix/Baner_Test_Menopause_TZ.pptx Pack-shots: з menopace.ua (Original/Plus/Night, 749-1024px webp), методологія: feedback_banner_packshots_method.md

Хронологія ітерацій (квітень-травень 2026)

Версія	Дата	Підхід	Файли	Статус
v2	2026-04	Перший прототип з SVG-плашками	`menopace_300x600_preview_v2.html`	❌ deprecated
v3 / v3.1	2026-04-30..05-01	Спроба додати real pack-shots, зламана ітерація	`menopace_300x600_preview_v3*.html`	❌
v4 baseline	2026-05-01	За ТЗ продакта 1:1, real packs	`menopace_v4_real_packs.html`	✅ контрольна точка
v4-A	2026-05-01	PAS + StoryBrand SB7	`menopace_v4_pas_sb7.html`	кандидат v4
v4-B	2026-05-01	AIDA + Cialdini Authority	`menopace_v4_aida_cialdini.html`	кандидат v4
v5 (2 раунд)	2026-05-01	3 стилі: Editorial / Bauhaus / Pharmacy-Trust	`menopace_v5_{editorial,bauhaus,pharmacy}.html`	Bauhaus → ФІНАЛІСТИ
v6 (3 раунд)	2026-05-01	4 UI-бібліотеки (shadcn / Ant / daisyUI / Mantine)	`menopace_v6_*.html`	shadcn + Mantine → ФІНАЛІСТИ
open-design (4 раунд)	2026-05-02	10 design-систем (warm-editorial, kami, notion, apple, stripe, mintlify, starbucks, pinterest, intercom, airbnb)	`menopace_od{01..10}_*.html`	ТОП-3: warm-editorial, stripe, pinterest
v7 (5 раунд)	2026-05-02	5 типографічних стилів (focused-accent / hero-packshot / dense-editorial / typo-hierarchy / card-grid)	`menopace_v7_*.html`	ТОП-2: focused-accent + hero-packshot

Що пішло продакт-менеджерці на вибір (зведене для рев'ю)

v5 Bold-Bauhaus
v6 shadcn/ui
v6 Mantine
(опційно) v7 focused-accent + v7 hero-packshot
(опційно) open-design warm-editorial / stripe / pinterest

Звіти: /srv/reports/banner-open-design-2026-05-02.md, /srv/reports/banner-v7-fixes-2026-05-02.md

Інфраструктура (чекає рішення)

TODO: окремий GCP-проект banner-analytics-menopace чи спільний banner-analytics-fluvir з product=menopace параметром? Поточна BQ-схема підтримує product поле — DRY можна.
TODO: CF endpoint — окремий track-menopace чи розширити fluvir-CF на multi-product (preferable: DRY).
TODO: фінальний вибір від продакта → бандл під DV360 Studio з clickTag + tracking pixel-GET.

Backlog

[ ] 🚨 Продакт-менеджерка фінальний вибір (з фіналістів)
[ ] Інфраструктурне go-decision (окремий GCP чи multi-product fluvir-CF)
[ ] DV360 bundle + tracking endpoint
[ ] Live deploy в DV360
[ ] Smoke test через VNC-Chromium DV360 preview

Open questions

Інфраструктура: окремий GCP-проект banner-analytics-menopace чи спільний?
CF: окремий чи розширюємо track з product-параметром?
Cross-banner дашборд: BQ table + Looker Studio чи Telegram-recap?

Cross-references

Каталог бренду
Umbrella: ../index.md
Med Detective Menopace edition (для тієї ж аудиторії): ../../med-detective/menopace/
ТЗ продакта: /srv/projects/menopace-banner-fix/Baner_Test_Menopause_TZ.pptx
Pack-shot методологія: feedback_banner_packshots_method.md
Sessions: 2026-05-01-marathon, 2026-05-02 (банери)

PM Changelog

2026-05-14: menopace_300x600_preview_v3.11.html + v3.12.html — іконки PNG перезаписані з прозорим фоном (bg-remover); CSS .q-icon оновлено: зона збільшена до height:150px (з 120px), width:100%, background/border/box-shadow прибрані; img змінено на max-width/max-height:150px + width/height:auto + object-fit:contain для рівного центрування іконок різних пропорцій (вузький термометр vs широке серце). Playwright: 9 станів × 2 файли, 0 overflow (sh=ch=414px всі 6 карток), 0 errors.
2026-05-14: menopace_300x600_preview_v3.12.html — AI-згенеровані PNG-іконки аркуш s55 (довга тінь, плоский стиль) замінили 6 inline-SVG у .q-icon; зона 120×120px без CSS-плитки (іконка несе власний фон); Q6 = нога (q6-leg.png). База v3.10. Playwright: 9 станів, 0 overflow (sh=ch=414px), 0 errors.
2026-05-14: menopace_300x600_preview_v3.11.html — AI-згенеровані PNG-іконки аркуш s7 (білий sticker-обрис) замінили 6 inline-SVG у .q-icon; зона 120×120px без CSS-плитки; Q6 = коліно (q6-knee.png). База v3.10. Playwright: 9 станів, 0 overflow (sh=ch=414px), 0 errors.
2026-05-14: menopace_300x600_preview_v3.10.html — 6 інфографік симптомів збільшено з кружечка 66px (v3.9) до прямокутної плитки 200×108px у стилі .intro-illust (персиковий градієнт, border-radius 14px, рамка rgba(232,112,76,0.22), тінь); переорієнтовано на viewBox 180×96 — повноцінні SVG-сцени: Q1 calendar+cycle-arrow+3-phase-drops, Q2 big-thermometer+heat-waves+sweat-drops, Q3 crescent-moon-face+stars+ZZZ, Q4 heart+ECG+BP-gauge, Q5 wilted-flower+cracked-empty-drop+dry-soil, Q6 knee-anatomy+large-bolt+sparkle-burst. Playwright: 9 станів, 0 overflow (sh=ch=414px кожна), 0 JS-errors.
2026-05-14: menopace_300x600_preview_v3.9.html — замінено 6 line-art SVG іконок у картках питань на flat-vector інфографіки симптомів (calendar/broken-cycle Q1, thermometer/heat-waves Q2, crescent-moon/ZZZ Q3, heart/ECG Q4, dry-flower/empty-drop Q5, knee-joint/lightning Q6); базу взято з v3.8 (intro woman-tile.png без змін). Playwright: 9 станів, 0 overflow, 0 JS-errors.