Phone showcase
Centred hero with a marquee of phone screens.
Usage
import { HeroShowcase } from '@/components/blocks/hero-section-06'
<HeroShowcase />
// Change the copy with props. The images live in hero-section-06.tsx, so edit them there.
<HeroShowcase title="Your headline here." ctaHref="/signup" />
Install
pnpm dlx shadcn@latest add @pastaui-pro/hero-section-06npx shadcn@latest add @pastaui-pro/hero-section-06yarn dlx shadcn@latest add @pastaui-pro/hero-section-06bunx --bun shadcn@latest add @pastaui-pro/hero-section-06Source
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | = Short headline | The main heading. |
| description | string | = Short introduction | Supporting copy below the headline. |
| ctaLabel / ctaHref | string | = Get started free / # | Action button, blue in light mode and white in dark. |
| screens | string[] | = Eight blank cards | Image URLs for the 290×600 phone cards in the marquee. |
| duration | number | = 58 | Seconds for one full loop; pauses on hover and with reduced motion. |
| className | string | = — | Additional classes for the wrapper. |