VibeUI
РусEng
Войти

Тарифы и сравнение

Сравнение «мы против типичной бригады» со счётчиками и прорисовкой галочек

Сравнение подрядчика с «бригадой по объявлению»: сверху три счётчика (объектов сдано, дней задержки, процент), которые докручиваются, когда секция входит в экран, ниже таблица критериев в две колонки. Галочки в нашей колонке прорисовываются штрихом строка за строкой, кресты в чужой проявляются приглушённо, текстовые ячейки — моно. Наша колонка выделена шапкой в цвет акцента. На узком колонка критерия сжимается, значки остаются.

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

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

  • eyebrow, title, lede, fine
  • stats: value, label, suffix
  • usLabel, themLabel; rows: criterion, us, them (true | false | строка)

Собран из

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

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

Превью

1440pxТема страницы
Сравнение «мы против типичной бригады» со счётчиками и прорисовкой галочек — Сравнение подрядчика с «бригадой по объявлению»: сверху три счётчика (объектов сдано, дней задержки, процент), которые докручиваются, когда секция входит в экран, ниже таблица критериев в две колонки. Галочки в нашей колонке прорисовываются штрихом строка за строкой, кресты в чужой проявляются приглушённо, текстовые ячейки — моно. Наша колонка выделена шапкой в цвет акцента. На узком колонка критерия сжимается, значки остаются.

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

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

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

https://vibeui.ru/c/comparison-010?theme=dark

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

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

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

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

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

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

<Comparison010
  usLabel="Ровно"
  themLabel="Типичная бригада"
  stats={[{ value: 312, label: "объектов сдано" }, { value: 0, label: "дней задержки" }]}
  rows={[{ criterion: "Цена фиксируется в договоре", us: true, them: "«примерно»" }]}
/>

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

Настройки

Заголовок
title · по умолчанию: Чем мы отличаемся от «бригады по объявлению»
Наша колонка
usLabel · по умолчанию: Ровно
Чужая колонка
themLabel · по умолчанию: Типичная бригада
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

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

Ещё в разделе «Тарифы и сравнение»

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

Как установить компонент «Сравнение «мы против типичной бригады» со счётчиками и прорисовкой галочек» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Сравнение «мы против типичной бригады» со счётчиками и прорисовкой галочек»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: card-145.
Что можно поменять в компоненте «Сравнение «мы против типичной бригады» со счётчиками и прорисовкой галочек»?
Можно менять: eyebrow, title, lede, fine; stats: value, label, suffix; usLabel, themLabel; rows: criterion, us, them (true | false | строка). Сохранить как есть: импорты card-145 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; IntersectionObserver с threshold 0.2 ставит data-in один раз; счётчики идут 1,4 с cubic ease-out в requestAnimationFrame; строка tbody — opacity/translateY с transition-delay = --i × 90ms; path галочки/креста с pathLength=1 и stroke-dashoffset 1→0 с той же задержкой + .25s.
Компонент «Сравнение «мы против типичной бригады» со счётчиками и прорисовкой галочек» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

npx shadcn@latest add https://vibeui.ru/r/pro/comparison-010.json

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

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

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

Теги

  • comparison
  • table
  • versus
  • counters
  • stats
  • checkmarks
  • renovation
  • construction
  • contractor
  • trust
  • why us
  • composite
Исходник компонента

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

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