Performante Funnel · Component Library

Каталог компонентов v1

Inventory из v19. 42 повторяющихся блока сгруппированы по atomic design. Источник — funnel/iterations/v19/index.html + dashboard.html. Это первый шаг к library — извлечения ещё не начались.

42
компонента в каталоге
5
top-priority на первую очередь
9
конфликтов на решение до extraction
7
single-use исключены из library

Top-5 — первая очередь извлечения

Сортировка по частоте использования + кросс-файловой переносимости. С этих компонентов начинаем Phase 3 EXTRACTION после resolve конфликтов ниже.

#1
ButtonPrimary
6 мест в index
+ 2 в dashboard
#2
Card
15+ мест
базовый блок
#3
IconBox
12+ мест
dependency для molecules
#4
SectionWrapper
12+ мест
каждая секция landing
#5
StatusPill
7 мест
уже описан в DS

Конфликты — нужно решение до extraction

9 расхождений между design-system.md v1 и реальной реализацией в v19. По 4 ключевым принял дефолты (см. отдельный пост в треде). Остальные 5 — открытые.

#1
Eyebrow vs StepBadge маскированы под одно имя
Landing-eyebrow — простой текст. Quiz step-pill — обёртка с bg+shadow+rounded. Это разные компоненты. Default → разделить.
#2
Card radius rounded-2xl vs rounded-3xl смешаны
В v19 без чёткого правила. Default → rounded-3xl для cards на bg-white/bg-ink-50; rounded-2xl для nested cards в плотных grid'ах.
#3
Input focus: DS говорит focus:bg-white, v19 использует focus:bg-ink-100
Конфликт на тёмном vs светлом фоне. Default → focus:bg-white когда input на bg-ink-50; ring-2 ring-ink-900 когда input на белом.
#4
QuoteCard: DS = число+цитата, v19 = чистая цитата
Замаскированы под одно имя. Default → разделить на QuoteCard (чистая) + StatQuoteCard (число+цитата).
#5
max-w непоследовательность
Большинство секций max-w-5xl, но Section 3 (Creatives) и Section 4 (Pricing) используют max-w-6xl. Открыт — основной = 5xl, wide grid = 6xl?
#6
Chip vs StatusPill именование
В коде они вариант одного паттерна. После library — разделить: StatusPill (с animate-pulse dot, live), Chip (статичный label без dot).
#7
SectionWrapper padding непоследовательность
py-16 sm:py-20 (стандарт) vs py-16 sm:py-24 (Bento, Chat Feature, Analysis). Предлагается 2 токена: spacing.section.standard / spacious.
#8
AvatarInitial используется, но не описан в DS
8+ мест. Раздел Iconography в DS только про Lucide. Добавить компонент при первом извлечении.
#9
Avatar gradient from-to не токенизированы
Каждый аватар имеет уникальный from/to. Зафиксировать 4-5 preset-пар в DS как avatar-gradient-N.

Single-use exclusions — остаются inline

По правилу D29 trade-off: компонент попадает в library только при ≥2 местах использования. Эти 7 блоков пока inline в v19, при следующем использовании — перепроверим.

FlowDiagramсложная схема Insta → AI → Клиенты, уникальна для explainer-секции
HowItWorksBentobento-layout «3 шага», 1 место
ChatFeatureSectiondark-split killer-feature, специфичен
ChatHelperfloating чат-виджет, 1 место
CancelRetentionFlow5-step modal flow в dashboard, специфичен
InstaInputцентральный элемент Hero, 1 место
HeroIllustrationCardдекоративный mockup в Hero, 1 место

Полный каталог

42 компонента по уровням. Раскрой карточку для деталей: использования с file:line, Tailwind-токены, варианты, конфликты с design-system.md.

Atoms 10
Molecules 16
Organisms 16

Atoms (10)

ButtonPrimary8 мест · top-1▾
Назначение
Главный CTA на экране. Filled dark, с иконкой стрелки.
Использования
  • index.html:130–140 — «Показать мою рекламу»
  • index.html:937–943 — «Сделать 3 креатива…»
  • index.html:1058–1064 — «Дальше: что ещё подключить»
  • index.html:1213–1219 — «Подобрать тариф»
  • index.html:1497–1504 — «Запустить первую кампанию»
  • dashboard.html:200–203 — «Оплатить 117 600 ₸»
Tokens
px-6 sm:px-8 py-3 sm:py-4 bg-ink-900 hover:bg-ink-800 text-white font-semibold rounded-2xl flex items-center gap-3 transition shadow-lg shadow-ink-900/10
Варианты
dark (default), mint (accent), disabled, with-icon-right, full-width
Slots
label, optional leading icon, optional trailing icon
ButtonMint5 мест▾
Назначение
Positive CTA — оплата, запуск, принятие оффера.
Использования
  • index.html:763 — «Наверх к полю»
  • index.html:1586 — «Да, оплатить и запустить»
  • dashboard.html:866 — «Принять и остаться»
  • dashboard.html:892 — «Беру бесплатный месяц»
Tokens
bg-mint-500 hover:bg-mint-600 text-white font-semibold rounded-2xl shadow-xl shadow-mint-500/30
Варианты
default, full-width
ButtonSecondary5 мест▾
Назначение
Вторичное действие, без акцента. Filled серый.
Использования
  • index.html:1592 — «Сменить тариф»
  • dashboard.html:387 — «Не сейчас»
  • dashboard.html:849 — «Остаться»
  • dashboard.html:869 / 895 — варианты в Cancel flow
Tokens
bg-ink-100 hover:bg-ink-200 text-ink-900 font-medium rounded-2xl
Eyebrow14 мест · конфликт #1▾
Назначение
Метка-надпись над заголовком секции.
Использования
14 мест: index.html 246, 329, 497, 613, 706, 779, 1073, 1229, 1518; dashboard 165, 217, 744, 857, 877
Tokens
text-xs uppercase tracking-wider text-ink-400 font-semibold
Варианты
default ink-400, mint, amber
Конфликт DS
Step-pill в quiz обёрнут в bg-white shadow-sm rounded-full — это фактически другой компонент (StepBadge), не чистый Eyebrow. Default → разделить.
StatusPill7 мест · top-5▾
Назначение
Inline-индикатор статуса с живой animate-pulse точкой.
Использования
  • index.html:98 — «5 421 кампания запущена»
  • index.html:168 — «AI смотрит»
  • dashboard 306 / 400 / 479 / 636 / 740 — разные tab статусы
Tokens
inline-flex items-center gap-1.5 px-2.5 py-1 bg-mint-50 text-mint-700 text-xs font-semibold rounded-full + size-1.5 bg-mint-500 animate-pulse
Варианты
mint/live (default), amber/warning, compact
Chip9 мест · конфликт #6▾
Назначение
Inline-тег, лейбл, бейдж. Без точки-индикатора (отличие от StatusPill).
Использования
9 мест: index 96, 505, 511, 1094, 1253, 1443; dashboard 123, 139, 648
Варианты
mint, dark, amber, outline-rounded-full
Конфликт DS
DS описывает Chip с точкой — это StatusPill. Чистый Chip без точки не описан, нужно добавить.
Input4 места · конфликт #3▾
Назначение
Поле ввода текста. Без border, bg-смена на focus.
Использования
index 122 (Hero), index 1574/1580 (Auth phone/WA), dashboard 1661 (Chat input)
Tokens
w-full px-4 py-3 bg-ink-50 rounded-xl outline-none focus:bg-ink-100 transition
Конфликт DS
DS: focus:bg-white. v19: focus:bg-ink-100. Default → bg-white когда input на ink-50 bg; ring-2 ring-ink-900 когда input на белом.
ProgressDots3 места▾
Назначение
Dot-индикатор прогресса (onboarding 3 step, cancel 5 step).
Использования
dashboard 158, 208, 277 (3-step dots) + 828 (5 bars — другой паттерн)
Заметка
Cancel flow использует bars (h-1 rounded-full flex-1), не dots. Предлагается выделить ProgressBars отдельно.
LogoMark3 места▾
Назначение
Логотип Performante — квадрат с P.
Использования
index 75 (navbar), index 1385 (two-wallets), dashboard 119 (header)
Tokens
size-7 rounded-lg bg-ink-900 flex items-center justify-center + text-white text-xs font-bold
Варианты
sm (size-6), md (size-7, default), lg (size-8+)
IconBox12+ мест · top-3▾
Назначение
Квадратный контейнер для Lucide-иконки с цветным фоном. Dependency для большинства molecules.
Использования
12+: analysis cards (index 812, 826, 838), reputation (883), score (907), ecosystem modules (1087, 1108, 1128), dashboard 378, 421 и далее
Tokens
size-10 rounded-xl bg-{color} flex items-center justify-center shrink-0 + inner size-5 text-white
Варианты
sm (size-9), md (size-10 default), lg (size-11/12, с shadow)

Molecules (16)

SectionHeader9 мест▾
Назначение
Eyebrow + H2 + sub-line. Центрированный или left-aligned.
Использования
9: index 244, 328, 496, 612, 704, 775, 950, 1070, 1227
Варианты
center, left, center-with-step-pill, left-large
Зависимости
Eyebrow
SectionWrapper12+ мест · top-4▾
Назначение
Секция-обёртка с max-w контейнером и py padding.
Tokens
<section class="bg-{color}"><div class="max-w-5xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
Варианты
light, muted, dark, darkest
Конфликт DS
max-w-5xl стандарт, но Creatives/Pricing используют max-w-6xl + padding py-24 vs py-20. См. конфликты #5 и #7.
Card15+ мест · top-2 · конфликт #2▾
Назначение
Базовая карточка-контейнер. Без border, bg + rounded.
Использования
15+: hero illustration, business card, niche/insight/reputation/score, campaign summary, value list, onboarding step 1, AI recommendation, subscription и т.д.
Tokens
bg-white rounded-3xl p-6 sm:p-8 (default)
Варианты
default, muted (bg-ink-50), dark, gradient-dark, with-shadow
Конфликт DS
rounded-2xl vs rounded-3xl смешаны без правила. Default → 3xl для cards на bg-белом/ink-50; 2xl для nested в плотных grid'ах.
InstaInput1 место · single-use▾
Назначение
Составной инпут с Instagram-иконкой и submit-кнопкой. Центр Hero.
Использования
index.html:118–146 (Hero)
Статус
Single-use → остаётся inline по D29.
AnalysisCard4 места▾
Назначение
Карточка-результат в Section 2. Icon + label + value + sub.
Использования
index 810 (Niche), 824 (Audience), 837 (Insight col-2), 854 (Competitors col-2)
Зависимости
IconBox, Eyebrow
TariffCard3 места▾
Назначение
Карточка тарифа в Pricing-секции.
Использования
index 1418 (Старт), 1441 (Pro, highlighted), 1465 (Agency)
Варианты
default, highlighted (dark, lifted, «популярный»), selected (ring-2)
Зависимости
Card, Chip
FAQItem5 мест▾
Назначение
Аккордеон-элемент FAQ. Alpine expand/collapse.
Использования
index 710, 718, 727, 736, 745
Alpine
x-data="{ open: 0 }" wrapper, @click="open = open === N ? 0 : N"
CompetitorRow3 места (в одном блоке)▾
Назначение
Строка-элемент в списке конкурентов (аватар-инициал + ник + метрика).
Использования
index 857, 864, 872
Зависимости
AvatarInitial
AvatarInitial8+ мест · конфликт #8, #9▾
Назначение
Круглый или квадратный аватар с инициалом на градиентном фоне.
Использования
8+: business card (792), competitors (857-872), dashboard 130/573/604/616/644/685
Варианты
xs (size-8), sm (size-9), md (size-10), lg (size-12), xl (size-14 rounded-2xl)
Конфликт DS
Не описан в DS вообще. Gradient pairs не токенизированы — нужно зафиксировать 4-5 preset-пар как avatar-gradient-N.
ModuleCard6 мест▾
Назначение
Карточка модуля в Ecosystem quiz. Кликабельная, с чекбоксом.
Использования
index 1086, 1103, 1122, 1142, 1162, 1182
Варианты
default (selectable), required (cursor-not-allowed), selected (ring-2)
Зависимости
IconBox
EcosystemProductCard6 мест▾
Назначение
Карточка продукта в landing catalog экосистемы. Вертикальная, с ценой.
Использования
index 504, 522, 539, 555, 571, 586
Варианты
dark (featured), light, free
Зависимости
IconBox
StatCard6 мест▾
Назначение
Карточка с большой цифрой-метрикой. KPI-блок.
Использования
index 621, 639, 657 (landing dark); dashboard 352, 357, 362, 367 (compact white)
Варианты
landing-dark (large + comparison), dashboard-compact (4-col grid)
Конфликт DS
DS описывает text-4xl-5xl, на dashboard text-xl-2xl (compact). Нужно формализовать оба.
QuoteCard3 места · конфликт #4▾
Назначение
Карточка цитаты клиента. БЕЗ числа, только текст + attribution.
Использования
index 684, 688, 692
Конфликт DS
DS описывает QuoteCard как число+цитата. v19 — чистая цитата. Default → разделить на QuoteCard + StatQuoteCard.
AIFeedItem3 места (в одном блоке)▾
Назначение
Строка лога AI-действий в Feed-блоке.
Использования
dashboard 321, 326, 331
LeadRow3 места▾
Назначение
Строка лида в CRM с аватаром, сообщением и action-кнопкой.
Использования
dashboard 571, 585, 604
Варианты
wait (с phone CTA), work (без CTA), done (opacity)
Зависимости
AvatarInitial
MenuListItem5 мест▾
Назначение
Строка меню с иконкой, названием, sub-line и chevron.
Использования
dashboard 451, 692, 697, 702, 707
Варианты
full (с sub + chevron), compact (без sub)
SegmentedControl3 места▾
Назначение
Pill-toggle для переключения вариантов. Alpine-based.
Использования
index 1248 (frequency), dashboard 563 (leads filter), index 1562 (auth method)
Варианты
default (3 options), compact

Organisms (16)

Navbar2 места▾
Использования
index 71 (funnel), dashboard 116 (compact с tabs)
Варианты
funnel (blur, links), dashboard (compact, tabs+avatar)
Hero1 место · single-use▾
Использования
index.html:88–234
Структура
grid 2-col + LEFT (dark badge → StatusPill → H1 → sub H2 → body → InstaInput) + RIGHT (analysis preview Card + decorative)
Зависимости
StatusPill, InstaInput, ButtonPrimary, Card, Chip
FlowDiagram1 место · single-use▾
Использования
index.html:255–313
Статус
Single-use → остаётся inline.
HowItWorksBento1 место · single-use▾
Использования
index.html:338–401
ChatFeatureSection1 место · single-use▾
Использования
index.html:405–491
AnalysisGrid1 место (composed)▾
Использования
index.html:787–933
Зависимости
AnalysisCard, IconBox, AvatarInitial
CreativeGrid2 места▾
Использования
index 964 (funnel large), dashboard 508 (compact с lead stats)
Варианты
funnel (large + regenerate), dashboard (compact + lead-leader ring)
EcosystemQuiz1 место▾
Использования
index.html:1069–1223
Зависимости
ModuleCard, SectionHeader, ButtonPrimary
PricingSection1 место (composed)▾
Использования
index.html:1225–1511
Структура
SectionHeader + promo + SegmentedControl + summary card + value list + TwoWalletsDisclaimer + 3×TariffCard + CTA
Зависимости
SectionHeader, SegmentedControl, TariffCard, Card, ButtonPrimary
OnboardingSteps1 место (composed)▾
Использования
dashboard.html:154–301
Варианты
step-1 (dark + Pay), step-2 (white + FB), step-3 (mint + animations A/B/C/D)
Зависимости
ProgressDots, ButtonMint, ButtonPrimary, Card
AIFeedBlock1 место▾
Использования
dashboard.html:315–340
Зависимости
AIFeedItem
AIRecommendationCard3 места▾
Использования
index 1204 (mint-50 hint), dashboard 375 (white home), dashboard 952 (sticky dark mobile)
Варианты
white-card, mint-50, sticky-dark
CancelRetentionFlow1 место · single-use▾
Использования
dashboard.html:824–949
Статус
5-step flow специфичен для dashboard. Остаётся inline.
MobileBottomNav1 место▾
Использования
dashboard.html:969–979
Структура
fixed bottom + grid + tab buttons (icon + label + badge dot)
ChatHelper1 место · single-use▾
Использования
index.html:1617–1676
Состав
PeekTooltip (auto-show 15s) + ExpandedChat + FloatingBubble