VibeUI
РусEng
Войти

Призыв к действию

Промо приложения доставки: промокод, магазины, SMS-ссылка и QR-стикер

Секция «скачай приложение» для доставки: контрастная карточка на фоне страницы, заголовок с акцентной скидкой (проценты подсвечиваются автоматически), промокод в пунктирной рамке с кнопкой «скопировать» (буфер обмена, подпись меняется на «скопировано»), кнопки App Store и Google Play, поле телефона «пришлём ссылку» с прорисованной галочкой после отправки. Справа QR-стикер со скотчем, нарисованный SVG-модулями из seed-строки (декоративный, не сканируется), за ним фото в блобе, который медленно морфит. Форма — заглушка.

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

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

  • eyebrow, title (проценты подсветятся), lede, code, qrLabel, qrSeed
  • appStoreLabel/Href, googlePlayLabel/Href, phonePlaceholder, smsLabel, doneText
  • image, imageAlt

Собран из

Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.

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

Превью

1440pxТема страницы
Промо приложения доставки: промокод, магазины, SMS-ссылка и QR-стикер — Секция «скачай приложение» для доставки: контрастная карточка на фоне страницы, заголовок с акцентной скидкой (проценты подсвечиваются автоматически), промокод в пунктирной рамке с кнопкой «скопировать» (буфер обмена, подпись меняется на «скопировано»), кнопки App Store и Google Play, поле телефона «пришлём ссылку» с прорисованной галочкой после отправки. Справа QR-стикер со скотчем, нарисованный SVG-модулями из seed-строки (декоративный, не сканируется), за ним фото в блобе, который медленно морфит. Форма — заглушка.

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

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

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

https://vibeui.ru/c/download-011?theme=dark

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

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

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

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

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

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

<Download011
  title="−20 % на первый заказ в приложении"
  code="GORYACHO20"
  image="/photos/box.webp"
  appStoreHref="https://apps.apple.com/…"
  googlePlayHref="https://play.google.com/…"
/>

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

Настройки

Заголовок
title · по умолчанию: −20 % на первый заказ в приложении
Промокод
code · по умолчанию: GORYACHO20
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

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

Ещё в разделе «Призыв к действию»

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

Как установить компонент «Промо приложения доставки: промокод, магазины, SMS-ссылка и QR-стикер» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Промо приложения доставки: промокод, магазины, SMS-ссылка и QR-стикер»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: input-001, button-001.
Что можно поменять в компоненте «Промо приложения доставки: промокод, магазины, SMS-ссылка и QR-стикер»?
Можно менять: eyebrow, title (проценты подсветятся), lede, code, qrLabel, qrSeed; appStoreLabel/Href, googlePlayLabel/Href, phonePlaceholder, smsLabel, doneText; image, imageAlt. Сохранить как есть: импорты input-001, button-001 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; QR — modules(qrSeed): три finder-паттерна настоящие, остальные модули из LCG по FNV-хэшу seed, path с shape-rendering crispEdges; copy — navigator.clipboard.writeText в try/catch, copied держится 1.8 с; проценты в title ищутся регуляркой и оборачиваются в em.
Компонент «Промо приложения доставки: промокод, магазины, SMS-ссылка и QR-стикер» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

npx shadcn@latest add https://vibeui.ru/r/pro/download-011.json

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

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

Составной блок: импортирует input-001, button-001 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает.

Теги

  • download
  • app
  • mobile
  • promo
  • promo-code
  • qr
  • app-store
  • google-play
  • sms
  • delivery
  • food
  • composite
Исходник компонента

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

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