VibeUI
РусEng
Войти

Первый экран

Бенто-хиро курса с плитками и наклоном

Первый экран лендинга курса: гигантский заголовок на всю ширину, слова проявляются из размытия, маркер под словом дорисовывается. Под ним мозаика из четырёх плиток: превью урока с play, цифра-гигант, живой индикатор мест и дата старта — плитки наклоняются за курсором. Фон — плывущий mesh-градиент, факты внизу набегают счётчиком.

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

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

  • eyebrow, title (слово в *звёздочках*), lede, primaryLabel/Href, secondaryLabel/Href
  • poster, duration, bigValue/bigLabel, seatsTaken/seatsTotal/seatsLabel, dateValue/dateLabel
  • facts, logosLabel, logos, accent и background, tone

Собран из

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

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

Превью

1440pxТема страницы
Бенто-хиро курса с плитками и наклоном — Первый экран лендинга курса: гигантский заголовок на всю ширину, слова проявляются из размытия, маркер под словом дорисовывается. Под ним мозаика из четырёх плиток: превью урока с play, цифра-гигант, живой индикатор мест и дата старта — плитки наклоняются за курсором. Фон — плывущий mesh-градиент, факты внизу набегают счётчиком.

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

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

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

https://vibeui.ru/c/hero-022?theme=dark

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

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

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

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

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

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

<Hero022
  eyebrow="Онлайн-курс · старт 6 октября"
  title="Figma для продуктовых дизайнеров: от макета до *живого прототипа*"
  lede="Шесть недель практики на реальных задачах."
  primaryLabel="Записаться на поток"
  primaryHref="#pricing"
  secondaryLabel="Смотреть первый урок"
  secondaryHref="/lesson-1"
  poster="/photos/poster.webp"
  duration="4:32"
  bigValue="6"
  bigLabel="недель"
  seatsTaken={48}
  seatsTotal={60}
  dateValue="6 окт"
  facts={[{ value: "18", label: "уроков" }, { value: "94 %", label: "доходят до защиты" }]}
  logos={["Ozon", "Яндекс"]}
/>

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

Настройки

Тема
tone · по умолчанию: auto
Заголовок
title · по умолчанию: Figma для продуктовых дизайнеров: от макета до *живого прототипа*
Дата
dateValue · по умолчанию: 6 окт
Занято мест
seatsTaken · по умолчанию: 48
Акцент
accent · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

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

Ещё в разделе «Первый экран»

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

Как установить компонент «Бенто-хиро курса с плитками и наклоном» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Бенто-хиро курса с плитками и наклоном»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: button-016, button-077.
Что можно поменять в компоненте «Бенто-хиро курса с плитками и наклоном»?
Можно менять: eyebrow, title (слово в *звёздочках*), lede, primaryLabel/Href, secondaryLabel/Href; poster, duration, bigValue/bigLabel, seatsTaken/seatsTotal/seatsLabel, dateValue/dateLabel; facts, logosLabel, logos, accent и background, tone. Сохранить как есть: импорты button-016, button-077 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; заголовок словами из размытия и маркер, растущий после — главный жест экрана; бенто из четырёх плиток с наклоном за курсором через CSS-переменные, без ререндеров.
Компонент «Бенто-хиро курса с плитками и наклоном» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

npx shadcn@latest add https://vibeui.ru/r/pro/hero-022.json

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

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

Составной блок: импортирует button-016, button-077 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает. Один файл, ноль зависимостей, «use client» ради наклона и счётчиков. Заголовок режется на слова: каждое — span с @keyframes blur(8px)→0 и задержкой --i×70ms; слово в *звёздочках* получает фоновый маркер, который растёт background-size 0→100 % после слов. Плитки — <ul data-part=bento>, у каждой pointermove пишет --rx/--ry/--mx/--my в style без ререндеров: rotateX/rotateY до 6° и блик через ::after. Mesh — три радиальных градиента на ::before секции с медленной анимацией transform. Факты — компонент с IntersectionObserver и requestAnimationFrame, число набегает за 1,4 с. От 60rem (container query) плитки 4 колонки: превью 2×2, остальные 1×1. Палитра --vibeui-hero-022-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; шрифты Unbounded и Inter подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.

Теги

  • course
  • education
  • edtech
  • landing
  • hero
  • bento
  • tilt
  • video
  • counter
  • composite
Исходник компонента

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

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