Stats centered
Centred hero with a stats row and a wide media panel.
Usage
import { HeroStats } from '@/components/blocks/hero-section-01'
<HeroStats />
// Change the copy with props. The images live in hero-section-01.tsx, so edit them there.
<HeroStats title="Your headline here." ctaHref="/signup" />
Install
pnpm dlx shadcn@latest add @pastaui-pro/hero-section-01npx shadcn@latest add @pastaui-pro/hero-section-01yarn dlx shadcn@latest add @pastaui-pro/hero-section-01bunx --bun shadcn@latest add @pastaui-pro/hero-section-01Source
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| badge | string | = Loved by 1,200+ teams | Text inside the social-proof badge. |
| title | ReactNode | = Headline with a muted accent word | The main heading. |
| description | string | = Short introduction | Supporting copy below the headline. |
| ctaLabel / ctaHref | string | = Get started / #pricing | Action text and destination. |
| stats | HeroStat[] | = Four sample stats | Value and label pairs shown in the stats row. |
| className | string | = — | Additional classes for the section. |