Первый экран сайта

49 компонентов

Первый экран — то, что посетитель видит до прокрутки: заголовок, пара фраз и главная кнопка. Здесь варианты для продукта, сервиса, мероприятия и личного сайта — с картинкой сбоку, снимком интерфейса, видео, подпиской, логотипами клиентов или показателями. Откройте блок, проверьте его на телефоне и десктопе и нажмите «Копировать для ИИ»: агент поставит блок в проект на React и Tailwind CSS, а тексты вы замените на свои.

Первый экран сайта

HE001Первый экран с сиянием (Aurora Hero)

HE002Первый экран с консолью (Console Hero)

HE003Первый экран мозаикой (Mosaic Hero)

HE004Простой центрированный экран (Plain Centred Hero)

HE005Первый экран со снимком продукта (Product Shot Hero)

HE006Первый экран с подпиской (Subscribe Hero)

HE007Первый экран с постером видео (Video Poster Hero)

HE008Первый экран с логотипами клиентов (Client Logos Hero)

HE009Первый экран с показателями (Metrics Hero)

HE010Первый экран с картинкой сбоку (Split Image Hero)

HE011Первый экран со светящейся сеткой (Grid Glow Hero)

HE012Первый экран с объявлением (Announcement Hero)

HE013Первый экран с поиском по каталогу (Catalog Search Hero)

HE014Первый экран с отсчётом до события (Event Countdown Hero)

HE015Текстовый первый экран (Editorial Text Hero)

HE016Первый экран с двумя путями (Two Paths Hero)

HE017Первый экран со сменным словом (Rotating Word Hero)

HE018Светлый первый экран (Light Hero)

HE019Первый экран с регистрацией (Signup Form Hero)

HE020Первый экран с поиском жилья (Hero with property search)

HE021Первый экран ресторана с бегущей строкой (Restaurant hero with a ticker)

HE022Бенто-хиро курса с плитками и наклоном (Course bento hero with tilting tiles)

HE023Первый экран с гигантским заголовком и цветными капсулами (Hero with a giant headline and colour pills)

HE024Неоновая вывеска с фото и свечением за курсором (Neon sign hero with a photo and a cursor glow)

HE025Первый экран приглашения с конвертом, отсчётом и «в календарь» (Invitation hero with an envelope, countdown and “add to calendar”)

HE026Первый экран-путешествие с посадочным талоном и пляжем (Travel hero with a boarding pass and a beach)

HE027Первый экран со свечой на входе и домом в снежном лесу (Hero with a candle intro and a house in a snowy forest)

HE028Первый экран пекарни с таймером печи (Bakery hero with a live oven timer)

HE029Первый экран подкаста с плеером и живой волной (Podcast hero with a player and a live waveform)

HE030Первый экран библиотеки с установкой и живым терминалом (Library hero with install command and a live terminal)

HE031Первый экран личного сайта: печатающиеся роли и свет за курсором (Personal hero: typing roles and a cursor spotlight)

HE032Первый экран приложения с CSS-телефоном и дышащим кругом (App hero with a CSS phone and a breathing circle)

HE033Хиро AI для созвонов: монитор с приложением встречи, после «Завершить» приходят уведомления с результатами (AI meetings hero: a monitor with a call app, after «Leave» the results arrive as notifications)

HE034Хиро детейлинга: силуэт машины прорисовывается и подсвечивает услуги по зонам (Detailing hero: a car outline draws itself and lights up services by zone)

HE035Хиро ветклиники: CSS-морда следит за курсором, переключатель питомца (Vet clinic hero: a CSS pet face follows the cursor, pet switcher)

HE036Хиро с букетом из слоёв: собирается при загрузке, разъезжается на прокрутке (Hero with a layered bouquet: assembles on load, drifts apart on scroll)

HE037Хиро ремонта: план квартиры рисуется линиями, комнаты подсвечиваются с площадью (Renovation hero: an apartment plan draws itself, rooms highlight with their area)

HE038Хиро доставки: живой таймер «привезём за 28:00», CSS-бургер и бегущая строка (Delivery hero: a live “delivered in 28:00” timer, a CSS burger and a marquee)

HE039Хиро языковой школы: слово-перелистывание и живой диалог урока (Language school hero: a flipping word and a live lesson dialogue)

HE040Хиро необанка: 3D-карта за курсором и живые операции (Neobank hero: a 3D card following the cursor and live transactions)

HE041Хиро с полкой обложек в 3D, которая по прокрутке разъезжается в сетку (Hero with a 3D shelf of covers that spreads into a grid on scroll)

HE042Хиро API: запрос печатается, JSON-ответ приходит с задержкой «42 ms» (API hero: the request types itself, the JSON response arrives with a “42 ms” badge)

HE043Хиро гаджета: CSS-лампа, свет которой меняют ползунки (Gadget hero: a CSS lamp whose light is driven by sliders)

HE044Хиро сбора: счётчик суммы, прогресс с вехами и магнитная кнопка (Fundraising hero: an amount counter, a milestone progress bar and a magnetic button)

HE045Хиро писателя: имя из-под маски, цитата пером, солнце/луна (Writer's hero: name rising from a mask, a quote written by a pen, sun/moon)

HE046Хиро-интро с видео: загрузка, въезд машины, стоп-кадр и надпись за крышей (Video intro hero: loader, a car driving in, a freeze frame and a wordmark behind the roof)

HE047Хиро ветклиники с фоновым роликом: кошка впрыгивает в кадр и замирает (Vet clinic hero with a background clip: a cat leaps into frame and freezes)

HE048Хиро доставки еды с фоновым роликом: бургер собирается в слоу-мо, живой таймер (Food delivery hero with a background clip: a burger stacks in slow motion, a live timer)

HE049Хиро-слайдер проектов домов со стеклянной карточкой и ценой (Full-screen house project slider with a glass card and price)

Первый экран с сиянием (Aurora Hero)

Первый экран с консолью (Console Hero)

Первый экран мозаикой (Mosaic Hero)

Простой центрированный экран (Plain Centred Hero)

Первый экран со снимком продукта (Product Shot Hero)

Первый экран с подпиской (Subscribe Hero)

Первый экран с постером видео (Video Poster Hero)

Первый экран с логотипами клиентов (Client Logos Hero)

Первый экран с показателями (Metrics Hero)

Первый экран с картинкой сбоку (Split Image Hero)

Первый экран со светящейся сеткой (Grid Glow Hero)

Первый экран с объявлением (Announcement Hero)

Первый экран с поиском по каталогу (Catalog Search Hero)

Первый экран с отсчётом до события (Event Countdown Hero)

Текстовый первый экран (Editorial Text Hero)

Первый экран с двумя путями (Two Paths Hero)

Первый экран со сменным словом (Rotating Word Hero)

Светлый первый экран (Light Hero)

Первый экран с регистрацией (Signup Form Hero)

Первый экран с поиском жилья (Hero with property search)

Первый экран ресторана с бегущей строкой (Restaurant hero with a ticker)

Бенто-хиро курса с плитками и наклоном (Course bento hero with tilting tiles)

Первый экран с гигантским заголовком и цветными капсулами (Hero with a giant headline and colour pills)

Неоновая вывеска с фото и свечением за курсором (Neon sign hero with a photo and a cursor glow)

Первый экран приглашения с конвертом, отсчётом и «в календарь» (Invitation hero with an envelope, countdown and “add to calendar”)

Первый экран-путешествие с посадочным талоном и пляжем (Travel hero with a boarding pass and a beach)

Первый экран со свечой на входе и домом в снежном лесу (Hero with a candle intro and a house in a snowy forest)

Первый экран пекарни с таймером печи (Bakery hero with a live oven timer)

Первый экран подкаста с плеером и живой волной (Podcast hero with a player and a live waveform)

Первый экран библиотеки с установкой и живым терминалом (Library hero with install command and a live terminal)

Первый экран личного сайта: печатающиеся роли и свет за курсором (Personal hero: typing roles and a cursor spotlight)

Первый экран приложения с CSS-телефоном и дышащим кругом (App hero with a CSS phone and a breathing circle)

Хиро AI для созвонов: монитор с приложением встречи, после «Завершить» приходят уведомления с результатами (AI meetings hero: a monitor with a call app, after «Leave» the results arrive as notifications)

Хиро детейлинга: силуэт машины прорисовывается и подсвечивает услуги по зонам (Detailing hero: a car outline draws itself and lights up services by zone)

Хиро ветклиники: CSS-морда следит за курсором, переключатель питомца (Vet clinic hero: a CSS pet face follows the cursor, pet switcher)

Хиро с букетом из слоёв: собирается при загрузке, разъезжается на прокрутке (Hero with a layered bouquet: assembles on load, drifts apart on scroll)

Хиро ремонта: план квартиры рисуется линиями, комнаты подсвечиваются с площадью (Renovation hero: an apartment plan draws itself, rooms highlight with their area)

Хиро доставки: живой таймер «привезём за 28:00», CSS-бургер и бегущая строка (Delivery hero: a live “delivered in 28:00” timer, a CSS burger and a marquee)

Хиро языковой школы: слово-перелистывание и живой диалог урока (Language school hero: a flipping word and a live lesson dialogue)

Хиро необанка: 3D-карта за курсором и живые операции (Neobank hero: a 3D card following the cursor and live transactions)

Хиро с полкой обложек в 3D, которая по прокрутке разъезжается в сетку (Hero with a 3D shelf of covers that spreads into a grid on scroll)

Хиро API: запрос печатается, JSON-ответ приходит с задержкой «42 ms» (API hero: the request types itself, the JSON response arrives with a “42 ms” badge)

Хиро гаджета: CSS-лампа, свет которой меняют ползунки (Gadget hero: a CSS lamp whose light is driven by sliders)

Хиро сбора: счётчик суммы, прогресс с вехами и магнитная кнопка (Fundraising hero: an amount counter, a milestone progress bar and a magnetic button)

Хиро писателя: имя из-под маски, цитата пером, солнце/луна (Writer's hero: name rising from a mask, a quote written by a pen, sun/moon)

Хиро-интро с видео: загрузка, въезд машины, стоп-кадр и надпись за крышей (Video intro hero: loader, a car driving in, a freeze frame and a wordmark behind the roof)

Хиро ветклиники с фоновым роликом: кошка впрыгивает в кадр и замирает (Vet clinic hero with a background clip: a cat leaps into frame and freezes)

Хиро доставки еды с фоновым роликом: бургер собирается в слоу-мо, живой таймер (Food delivery hero with a background clip: a burger stacks in slow motion, a live timer)

Хиро-слайдер проектов домов со стеклянной карточкой и ценой (Full-screen house project slider with a glass card and price)