button

*Сейчас обязательно добавила бы состояния disabled,
focus и loading

компонент кнопки

• Primary — светлая заливка с иконкой. Вспомогательное действие («Смотреть видео»). Не конкурирует визуально с целевым CTA
• Secondary — насыщенная синяя заливка. Целевое действие страницы («Оставить заявку»). Максимальный визуальный вес
• Outline — белая с обводкой. Альтернативный путь к тому же действию в контекстах, где сплошная заливка перегружает композицию (например, внутри карточки или на цветном фоне)
• Link — текстовая ссылка. Третичное действие, переход к дополнительной информации («Подробнее»)

Состояния: default и hover для каждого варианта. Hover реализован через затемнение заливки (Secondary), появление заливки (Outline), усиление градиента (Primary).
Решения: набор вариантов покрывает всю иерархию действий на маркетинговых страницах продукта — от целевого CTA до вспомогательных переходов. Это позволяет собирать новые страницы из готовых компонентов без создания кастомных кнопок под каждый раздел *

components

Pricing Card — два состояния

• Overview State — название тарифа, цена, ссылка «Что входит в тариф». Используется для первичного знакомства с тарифами.
• Action State — название, цена после расчёта, Primary CTA Button. Активируется после взаимодействия со слайдером периода. CTA различается по стилю в зависимости от тарифа: outlined для бесплатного, filled для платных — визуальная иерархия направляет к платной конверсии

Внутри кнопки двух типов:

• «Попробовать» — Primary Button (outlined / ghost вариант для бесплатного)
• «Рассчитать на компанию» — Primary Button (filled, тёмный)

for Feature Comparison Table

→ Table Cell — базовая ячейка с четырьмя состояниями:

• Feature Available — зелёная иконка ✓ (фича доступна)
• Feature Unavailable — красная иконка ✕ (фича недоступна)
• Feature Upcoming — приглушённые иконки (фича в разработке, бейдж «скоро»)
• Text Value — текстовое значение (числа, названия ролей, список платформ)

→ Status Badge «Скоро» — маркер функций в разработке. Позволяет отображать roadmap продукта прямо в интерфейсе без перестройки таблицы.
→ Filter Toggle «Показать только различия» — скрывает строки с одинаковыми значениями во всех тарифах. Снижает когнитивную нагрузку при сравнении: пользователь видит только то, что действительно отличается.
→ Info Icon с Tooltip — подсказка к названию каждой функции. Компонент переиспользуется во всей таблице без изменений.
→ Feature Group Header — заголовки групп строк («Виды», «Команда»). Структурирует длинную таблицу по смысловым блокам.

discrete slider

дискретный слайдер выбора периода подписки с динамической меткой скидки

dropdown

Storage Selector — компоненты конфигуратора дополнительного хранилища
Набор компонентов для настройки тарифа под нужды команды. Пользователь выбирает объём дополнительного хранилища сверх включённого в тариф и сразу видит, как это отражается на цене

→ Select Value Simple — свёрнутое поле выбора. Три состояния:

• Default — текущее значение («100 Гб») с пояснением «Входит в тариф»
• Focused / Open — активное состояние с синей обводкой, стрелка развёрнута вверх
• Selected with Add-on — выбрано дополнительное хранилище, показан прирост («+ 10 Гб») и стоимость в бейдже («60 ₽/мес»)

Компонент держит три уровня информации одновременно: базовое значение, прирост и цена прироста — при этом остаётся компактны
.
→ Dropdown — раскрытый список опций хранилища. Каждая строка несёт три параметра: объём прироста, стоимость за гигабайт и итоговую цену в месяц. Цена за гигабайт снижается с ростом объёма (6 ₽ → 1,8 ₽) — прогрессия видна сразу, без необходимости считать самому. Это работает как встроенный аргумент в пользу большего объёма.
→ Select Item — строка списка. Состояния: default, hover (подсветка фона), selected. Компонент переиспользуется в любом списке с ценовыми опциями.
→ Months — Billing Period Cards — карточки выбора периода оплаты. Состояния: default и selected (синяя обводка и заливка). Каждая карточка показывает период, размер скидки в бейдже, зачёркнутую исходную цену и итоговую. Визуальное сопоставление «было / стало» снимает необходимость считать выгоду

Решения: вся группа компонентов построена на одном принципе — пользователь видит последствие выбора в момент выбора, без перехода на другой экран и без подсчётов. Цена пересчитывается и отображается внутри самого элемента управления.

select value simple

select item

months

lead form modal