Hero Section

Первый экран лендинга. Pro · Лендинги и бренд › Первый экран

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add hero-section

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { HeroSection } from 'valyro-ui-pro';

Prop	Type	Default
`eyebrow`	`HeroEyebrow`		Announcement pill above the headline; a link with an arrow when it has `href`.
`title` *	`ReactNode`		Headline; also the accessible name of the section.
`highlight`	`ReactNode`		Rendered after the title with gradient text.
`subtitle`	`ReactNode`		Supporting paragraph under the headline.
`primaryAction`	`MarketingAction`		Large primary button; a link when it has `href`.
`secondaryAction`	`MarketingAction`		Large secondary button next to the primary one.
`visual`	`ReactNode`		Product shot, code sample or illustration, framed by the theme's material.
`align`	`'center' \| 'left'`	`'center'`	`left` puts the visual beside the text on wide screens.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1`	Level of the title; default 1, as the hero usually carries the page's main heading.