Gallery marquee
Centred hero with an edge-to-edge image card marquee.
Usage
import { HeroGallery } from '@/components/blocks/hero-section-04'
<HeroGallery />
// Change the copy with props. The images live in hero-section-04.tsx, so edit them there.
<HeroGallery title="Your headline here." onPrimaryClick={() => router.push('/signup')} />
Install
pnpm dlx shadcn@latest add @pastaui-pro/hero-section-04npx shadcn@latest add @pastaui-pro/hero-section-04yarn dlx shadcn@latest add @pastaui-pro/hero-section-04bunx --bun shadcn@latest add @pastaui-pro/hero-section-04Source
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | = Short headline | The main heading. |
| description | string | = Short introduction | Muted supporting copy below the headline. |
| primaryLabel / onPrimaryClick | string / () => void | = Start designing / — | Blue primary button and its click handler. |
| secondaryLabel / secondaryHref | string | = See examples / #examples | Outline button link. |
| note / noteDetail | string | = Start for free / No credit card required | Small line under the buttons; pass empty strings to hide it. |
| duration | number | = 90 | Seconds for one full loop; pauses with reduced motion. |
| className | string | = — | Additional classes for the section. |