Selection highlight
Sky blue hero with a headline word in a selection box.
Usage
import { HeroSelection } from '@/components/blocks/hero-section-05'
<HeroSelection />
// Change the copy with props. The images live in hero-section-05.tsx, so edit them there.
<HeroSelection highlight="your AI agents." ctaHref="/signup" />
Install
pnpm dlx shadcn@latest add @pastaui-pro/hero-section-05npx shadcn@latest add @pastaui-pro/hero-section-05yarn dlx shadcn@latest add @pastaui-pro/hero-section-05bunx --bun shadcn@latest add @pastaui-pro/hero-section-05Source
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| titleLines | string[] | = Two lines | Headline lines stacked above the highlighted line. |
| highlight | string | = your AI agents. | Last headline line, shown inside the blue selection box. |
| description | string | = Short introduction | Supporting copy below the headline. |
| platforms | HeroSelectionPlatform[] | = [] | Icons shown in a row above the button, each with src and alt. |
| ctaLabel / ctaHref | string | = Start for free / # | Blue gradient pill button. |
| media | ReactNode | = White placeholder panel | Product screenshot that overhangs the bottom edge on wide screens. |
| className | string | = — | Additional classes for the section. |