Organisms — 15 уникальных компонентов

Примечание: CATALOG.md содержит 16 позиций в секции organisms, но FlowDiagram дублирован в итоговом Summary (строки 618 и 471). Уникальных organisms — 15.

Navbar 2 варианта · funnel + dashboard
Funnel variant (sticky, blur)
P
Performante
Dashboard variant (compact h-12, with avatar)
P
Performante Pro
А
Назначение
Sticky top navbar с логотипом. Funnel — с nav-links и login. Dashboard — compact, с уведомлениями и аватаром.
Использований
2 места: index.html:71–87 (funnel), dashboard.html:116–143 (dashboard)
Ключевые токены
sticky top-0 z-40 bg-white/80 backdrop-blur-md (funnel) · sticky top-0 z-40 bg-white (dashboard)
Зависимости
LogoMark · AvatarInitial (dashboard)
CreativeGrid 2 варианта · funnel + dashboard
Funnel variant — 3 creatives, лидер выделен ring
AI · Вариант 1
Имплант за 1 визит
Static · 1080×1350
AI · Вариант 2
БРЕКЕТЫ от 30 000 ₸
Static · 1080×1350
AI · Вариант 3
УЛЫБКА
Static · 1080×1350
Назначение
3-column grid рекламных баннеров aspect-[4/5]. Лидер выделен ring-2 ring-mint-500. Внизу — link на перегенерацию.
Использований
2 места: index.html:964–1043 (funnel section 3), dashboard.html:508–529 (campaign tab)
Ключевые токены
grid sm:grid-cols-3 gap-4 sm:gap-6 · каждая карточка aspect-[4/5] rounded-xl overflow-hidden · лидер ring-2 ring-mint-500
Варианты
funnel (large, с кнопкой перегенерации) · dashboard (compact, со badge статистики)
PricingSection 1 место · composed
Упрощённый preview: SectionHeader + SegmentedControl + 3 TariffCard

Шаг 4 из 5 · Тариф

Стоит как один заказ из Instagram

Старт

9 990 ₸/мес

≈ один заказ

  • 1 кампания
  • 3 креатива/мес
  • Без модулей
популярный

Pro

39 200 ₸/мес

≈ один отказ

  • 3 кампании
  • Безлимит
  • 2 модуля

Agency

47 400 ₸/мес

≈ дешевле джуна

  • Безлимит кампаний
  • 10 аккаунтов
  • Все модули
Назначение
Полный блок тарифов: SectionHeader + gift-promo + SegmentedControl + campaign summary + value list + TwoWallets disclaimer + 3 TariffCard + trust line + ButtonPrimary.
Использований
1 место: index.html:1225–1511
Зависимости
SectionHeader · SegmentedControl · TariffCard · Card · ButtonPrimary · Alpine.js (частотный toggle, computed prices)
Composition note
Preview показывает форму. Полный экран с двумя-кошельками и Alpine → index.html:1225
OnboardingSteps 1 место · 3-step sequence
Step 1 preview — dark bg, оплата

Шаг 1 из 3 · Оплата

Подтверди и оплати

БизнесBlossom Beauty
НишаBeauty · Anti-Age
Креативов3 баннера
АудиторияЖ 28-45 · МСК
ТарифPro · 9 990 ₸/мес
Назначение
3-step onboarding в dashboard до старта кампании: оплата → FB connect → launch с анимацией.
Использований
1 место: dashboard.html:154–301
Шаги
Step 1: bg-ink-900 text-white, PayButton mint. Step 2: bg-white, FB-button blue. Step 3: bg-gradient-to-br from-mint-500 to-mint-700, launch animations (confetti/rocket/sparkle).
Зависимости
ProgressDots · ButtonMint · ButtonPrimary · Card · Alpine.js (paid, fbConnected, launchDismissed)
AIFeedBlock 1 место · dashboard home
Полный preview

AI за сутки

+200 ₸/день — заявки дешевеют

07:14

Стоп креатива «Гайд» — слабая отдача

вчера

12 заявок — средняя 280 ₸

сегодня

Назначение
Тёмная карточка «AI за сутки» с хроникой действий AI и ссылкой на историю.
Использований
1 место: dashboard.html:315–340
Ключевые токены
bg-gradient-to-br from-ink-900 to-ink-800 text-white rounded-2xl p-4 sm:p-5
Зависимости
AIFeedItem (3 строки: trending-up mint / pause amber / users mint)
AIRecommendationCard 3 варианта
White-card variant (dashboard home)

Рекомендация AI

Увеличить дневной бюджет на 200 ₸

Окупаемость 1.8× на текущих креативах

Назначение
Action-driven карточка с рекомендацией AI и двумя кнопками. Основной actionable элемент dashboard home.
Использований
3 места: index.html:1204 (mint-50, ecosystem hint), dashboard.html:375–391 (white-card home), dashboard.html:952–966 (mobile sticky dark)
Варианты
white-card (home, bg-white) · mint-50 (quiz hint) · sticky-dark (mobile bottom, bg-ink-900)
Зависимости
IconBox (lg, mint shadow) · ButtonPrimary · ButtonSecondary
MobileBottomNav 1 место · dashboard
Viewport preview — max-w-sm, белый sticky bar
контент dashboard
Назначение
Sticky bottom navigation для mobile (Telegram Mini App style). 5 вкладок: Главная / Кампания / Заявки / Бот / Меню.
Использований
1 место: dashboard.html:969–979
Ключевые токены
fixed bottom-0 inset-x-0 sm:hidden bg-white z-40 · grid h-16 (dynamic cols via Alpine) · active tab text-ink-900, inactive text-ink-400
Заметки
grid-template-columns вычисляется динамически через Alpine (visibleTabs().length — зависит от подключённых модулей). Заявки имеют amber dot badge.
Hero 1 место · composed organism
Упрощённый preview — структура и состав
В РФ это есть только у нас
5 421 кампания запущена

AI-таргетолог
для Instagram

Запуск кампании за вечер.

@blossom_beauty
Hero — composed organism. Правая колонка (illustration card, floating chips) остаётся inline. Полное расположение: index.html:88–234
Назначение
Первый экран воронки. Асимметричный split lg:grid-cols-[1.05fr_1fr]: copy + InstaInput слева, decorative illustration справа.
Использований
1 место: index.html:88–234
Левая колонка
Chip dark (badge) → StatusPill live counter → H1 font-black → sub H2 text-ink-400 → body p → InstaInput row
Правая колонка (inline)
Blob decorations + Card (analysis mockup: audience 2×2 grid + 3 creative thumbnails + pseudo-CTA) + 2 floating chips
Зависимости
StatusPill · InstaInput · ButtonPrimary · Card · Chip
AnalysisGrid 1 место · composed
3 AnalysisCard (упрощённая раскладка)
А

Бизнес

Blossom Beauty · @blossom_beauty

Beauty / Anti-Age · Москва

Ниша

Beauty · Anti-Age

высокий спрос

Аудитория

Ж 28-45 · МСК+СПб

доход выше среднего

Полная композиция: Business + Niche + Audience + Insight (col-span-2) + Competitors + Reputation + Score

Назначение
Грид карточек AI-анализа в Section 2. BusinessCard full-width + 4 AnalysisCard + Reputation + Score.
Использований
1 место: index.html:787–933
Grid structure
grid sm:grid-cols-2 gap-4 · BusinessCard col-span-2 · Insight sm:col-span-2 · Competitors sm:col-span-2
Зависимости
AnalysisCard · IconBox · AvatarInitial · CompetitorRow
EcosystemQuiz 1 место · Alpine-state
Шаг 3 из 5 — header + 2 ModuleCard inline
Шаг 3 из 5 · Что ещё подключим

Реклама приводит лидов — кто их подхватит?

AI-таргетолог FB/IG

базовый

Всегда включён. Базовый модуль.

Бот-ответчик WA/TG

Ловит лидов 24/7. Первый ответ 30 сек.

Назначение
Интерактивный квиз выбора модулей экосистемы. Alpine-state: массив modules[], динамическая рекомендация внизу.
Использований
1 место: index.html:1069–1223
Структура
SectionHeader + grid sm:grid-cols-2 gap-3 из ModuleCard (required full-width + 5 optional) + AIRecommendationCard (mint-50 hint) + ButtonPrimary
Зависимости
ModuleCard · SectionHeader · ButtonPrimary · Alpine.js (toggleModule, ecosystemRecommendation)
FlowDiagram single-use · без preview
Визуальная схема «Instagram → AI → Клиенты» с иконками-нодами и стрелками. 1 место: index.html:255–313. Структура: bg-gradient rounded-3xl + grid grid-cols-1 sm:grid-cols-5 (3 node-карточки + 2 стрелки) + sub-controls strip. Сложная декоративная схема, уникальна для explainer-секции. Остаётся inline, не извлекается в library.
HowItWorksBento single-use · без preview
Bento-grid «Три шага»: 1 большая карточка md:row-span-2 + 2 маленьких SmallCard с illustration square. 1 место: index.html:338–401. Bento-layout уникален для explainer-секции. При следующем использовании — проверить на extracted component. Сейчас остаётся inline.
ChatFeatureSection single-use · без preview
Dark split-секция bg-ink-950: features list слева (eyebrow badge, H2, bullet list с иконками) + phone mockup с chat-сообщениями + platform chips справа. 1 место: index.html:405–491. Специфична для killer-feature page. Остаётся inline.
CancelRetentionFlow single-use · без preview
5-step modal flow удержания при отмене подписки. fixed overlay + bottom-sheet rounded-t-3xl sm:rounded-3xl. Шаги: причина отмены → offer по причине → +1 месяц бесплатно → confirm → done. ProgressBars (не dots). 1 место: dashboard.html:824–949. Специфичный flow удержания, остаётся inline в dashboard.html.
ChatHelper single-use · без preview
Плавающий чат-помощник в левом нижнем углу. fixed positioned. Компоненты: PeekTooltip (auto-show 15s, animate-pulse кольцо) + ExpandedChat (header + messages + quick-chips + Input) + FloatingBubble (анимированное кольцо). 1 место: index.html:1617–1676. Специфичен для воронки. Остаётся inline, но LogoMark + StatusPill внутри — в library.
Reusable — полный или упрощённый preview (7 компонентов)
Composed — упрощённый preview + composition note (3 компонента)
Single-use — только описание (5 компонентов)