Призыв к действию
Финальный призыв с flip-часами и свечением
Финальный призыв курса: тёмная карточка в цветном halo — conic-свечение за карточкой и два плывущих пятна внутри, обратный отсчёт flip-часами (дни, часы, минуты, секунды переворачиваются по оси X), плашка «осталось мест», форма с email и кнопкой. С action уходит POST, без него показывает «место за вами».
Что можно поменять
- eyebrow, title, text, startsAt (ISO), countdownLabel, seats, placeholder, submitLabel, doneTitle, doneText, consent
- action — куда отправлять; без него показывается done
- accent и background, tone
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/cta-017?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, «use client» ради таймера и формы. Время берётся только на клиенте (useEffect + setInterval раз в секунду), на сервере таймер отдаётся нулями с aria-hidden — нет hydration mismatch. Каждая цифра — span с key=значение в плашке с perspective:600px: смена значения перемонтирует span с @keyframes rotateX(-80deg)→0, линия посередине — ::after. Halo — ::before обёртки wrap с inset:-.5rem, conic-gradient(from var(--a)) и blur(28px), угол — @property <angle>, 14 с; пятна — ::before/::after карточки с blur и @keyframes drift. Форма: <input type=email name=email required>, кнопка submit; action пустой — submit перехватывается, показывается done. От 60rem (container query) две колонки 1.1fr/1fr. Палитра --vibeui-cta-017-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; шрифты Unbounded и Inter подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.
Теги
- course
- education
- edtech
- landing
- cta
- countdown
- timer
- flip
- form
- glow
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…