Тарифы
Билеты цветными карточками со счётчиком
Билеты фестиваля: три карточки, каждая своего цвета, цена гигантом, зачёркнутая старая, список того, что входит, кнопка-пилюля. Счётчик «Билетов» умножает цены во всех карточках, число перелистывается. Выделенный тариф чуть крупнее и с чёрной кнопкой. Внизу строка про бесплатные зоны.
Что можно поменять
- tickets: названия, тексты, цены, старые цены, цвета, ink, features, featured, note, ссылки
- counter, counterLabel, maxCount, freeNote, currency; eyebrow, title, lede
- accent и background, tone
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/pricing-021?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, «use client» ради счётчика. Счётчик — role=group с кнопками «−»/«+» (disabled на границах 1…maxCount) и aria-live на числе. Карточка — <li> с ticket.color в --color и ink в --ink; data-dark переводит плашку и кнопку в тёмный режим, data-featured — scale(1.03) и чёрная кнопка. Цена — span с key=значение и @keyframes въезда снизу. Галочки — кружок currentColor с уголком цвета карточки через ::after. Формат чисел — Intl.NumberFormat ru-RU. От 56rem три колонки. Палитра --vibeui-pricing-021-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; цвета капсул задаются в данных (color и ink на каждый элемент), поэтому одна секция может нести все двенадцать цветов фестиваля. Шрифты Inter Tight и Inter подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.
Теги
- festival
- event
- colorful
- pills
- landing
- tickets
- pricing
- counter
- tiers
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…