VibeUI
РусEng
Войти

Подвал

Подвал-посадочный талон с координатами пляжа

Подвал свадьбы-путешествия как низ посадочного талона на чернильно-синем: линия отрыва с перфорацией сверху, коды рейса и дата слева, имена с рукописной «¡Hasta la boda!» по центру, координаты пляжа моноширинным справа; ниже ряд якорей, хэштег и «check-in до…». Невысокий.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • names, script, from, to, dateLabel, place, coordinates, hashtag, links
  • rsvpText, rsvpLabel, rsvpHref
  • accent и background, tone

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Подвал-посадочный талон с координатами пляжа — Подвал свадьбы-путешествия как низ посадочного талона на чернильно-синем: линия отрыва с перфорацией сверху, коды рейса и дата слева, имена с рукописной «¡Hasta la boda!» по центру, координаты пляжа моноширинным справа; ниже ряд якорей, хэштег и «check-in до…». Невысокий.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/footer-025?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<Footer025
  names="Соня & Тимур"
  script="¡Hasta la boda!"
  from="SVO"
  to="HAV"
  dateLabel="12 · 02 · 2027"
  place="Playa Paraíso, Cayo Largo"
  coordinates="21°37′28″N 81°33′46″W"
  hashtag="#сонятимурлетят"
  links={[
    { label: "Маршрут", href: "#route" },
    { label: "Check-in", href: "#checkin" },
  ]}
  rsvpLabel="до 1 декабря"
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Имена
names · по умолчанию: Соня & Тимур
Хэштег
hashtag · по умолчанию: #сонятимурлетят
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Используется в сценариях

Ещё в разделе «Подвал»

Частые вопросы

Как установить компонент «Подвал-посадочный талон с координатами пляжа» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Подвал-посадочный талон с координатами пляжа»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Подвал-посадочный талон с координатами пляжа»?
Можно менять: names, script, from, to, dateLabel, place, coordinates, hashtag, links; rsvpText, rsvpLabel, rsvpHref; accent и background, tone. Сохранить как есть: импорты из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; перфорацию линии отрыва по верхнему краю; три колонки талона: коды рейса, имена с рукописной строкой, координаты моноширинным.
Компонент «Подвал-посадочный талон с координатами пляжа» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/footer-025.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Составной блок: импортирует из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает. Один файл, ноль зависимостей, серверный. Перфорация — ::before radial-gradient по верхнему краю. Верхняя строка — сетка 1fr/auto/1fr от 56rem (до — столбиком по центру): коды с самолётиком Oswald, имена капсом с рукописной строкой Lobster, координаты ui-monospace с подписью места. Нижняя строка — якоря капсом, хэштег-капсула на Instagram, «check-in до» с ссылкой. Фон всегда чернильный (light-dark даёт две глубины). Палитра --vibeui-footer-025-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; тёмная тема — по .dark/[data-theme] или tone. Шрифты Oswald, Lobster и Manrope подключаются <link precedence> с Google Fonts, с fallback на системные. accent и background переопределяют цвета, prefers-reduced-motion гасит анимации.

Теги

  • wedding
  • travel
  • footer
  • boarding pass
  • flight
  • coordinates
  • hashtag
  • dark
  • cuba
  • retro
  • composite
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…