Отзывы
Стена пожеланий гостей на пробковой доске
Стена пожеланий: кремовые записки на пробковой доске под разными углами, у каждой акцентная кнопка сверху, текст рукописным serif'ом, подпись акцентом. Слева форма «оставить пожелание» — новая записка прикалывается первой с анимацией. Без бэкенда записка живёт до перезагрузки; с action — уходит POST'ом.
Что можно поменять
- eyebrow, title, lede, wishes (name, text, note)
- formTitle, nameLabel, textLabel, submitLabel, freshNote, action
- accent и background, tone
Анатомия
Стена пожеланий записками на пробковой доске и форма
- пожелание *
- имя *
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/testimonials-020?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, «use client» ради формы. Доска — <ul> auto-fill minmax(12rem,1fr) с inset-тенью и «рамкой» через box-shadow; записка — article с наклоном --vibeui-testimonials-020-tilt по nth-child(4n…), hover выпрямляет и увеличивает; кнопка — radial-gradient латуни. Новые записки — state-массив, добавляются в начало с data-fresh и keyframes «приколоть». Форма — name + textarea (required), onSubmit без action — preventDefault, с action — POST. От 56rem сетка .8fr/1.6fr, левая колонка sticky. Палитра --vibeui-testimonials-020-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; тёмная тема — по .dark/[data-theme] или tone. Шрифты Cormorant Garamond и Manrope подключаются <link precedence> с Google Fonts, с fallback на Georgia и системные. accent и background переопределяют цвета, prefers-reduced-motion гасит анимации.
Теги
- wedding
- guestbook
- wishes
- wall
- notes
- cork board
- pins
- form
- testimonials
- serif
- cream
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…