Workspace showcase
Left-aligned hero with a wide product window below.
Usage
import { HeroWorkspace } from '@/components/blocks/hero-section-03'
<HeroWorkspace />
// Change the copy with props. The images live in hero-section-03.tsx, so edit them there.
<HeroWorkspace title="Your headline here." primaryHref="/signup" />
Install
pnpm dlx shadcn@latest add @pastaui-pro/hero-section-03npx shadcn@latest add @pastaui-pro/hero-section-03yarn dlx shadcn@latest add @pastaui-pro/hero-section-03bunx --bun shadcn@latest add @pastaui-pro/hero-section-03Source
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | = Short headline | The main heading. |
| description | string | = Short introduction | Muted supporting copy below the headline. |
| primaryLabel / primaryHref | string | = Get started / # | Pink action button. |
| secondaryLabel / secondaryHref | string | = See how it works / #features | Charcoal action button. |
| media | ReactNode | = Tiled workspace mockup | Content for the 16:9 product window. |
| className | string | = — | Additional classes for the wrapper. |