# Hero Sections

> Five landing heroes — a drifting aurora over a live workflow run, a split hero with a clickable product demo, a terminal that installs then renders a component, a cited answer engine and a search-first marketplace with floating listings.

- Collection: Blocks
- Tier: pro
- Docs: https://geturui.com/docs/hero-sections
- Install: `npx shadcn@latest add @geturui-pro/hero-sections`
- Dependencies: motion, lucide-react

## Variants

### Aurora workflow

Centered hero over blurred, drifting volt and ember blobs, with a glass workflow strip whose steps run one after another.

Install: `npx shadcn@latest add @geturui-pro/hero-sections-aurora-workflow`

```tsx
import { HeroAuroraWorkflow } from "@/components/blocks/hero-sections/aurora-workflow";

export default function Page() {
  return (
    <HeroAuroraWorkflow
      headline="Automations that read before they act"
      primaryAction={{ label: "Start building free", href: "/signup" }}
      steps={[
        { kind: "Trigger", title: "New ticket", meta: "Ticket #8812", icon: "trigger" },
        { kind: "AI step", title: "Classify intent", meta: "Refund · 98%", icon: "ai" },
        { kind: "Action", title: "Reply and close", meta: "Sent", icon: "action" },
      ]}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | `string` | — | Glass pill above the headline. |
| headline | `string` | — | Main h1. |
| subcopy | `string` | — | Supporting paragraph. |
| primaryAction | `{ label: string; href?: string; onClick?: () => void }` | — | Volt button. Renders a link when href is set. |
| secondaryAction | `{ label: string; href?: string; onClick?: () => void } | null` | — | Secondary button. null hides it. |
| steps | `AuroraWorkflowStep[]` | — | { kind, title, meta, icon?: "trigger" | "ai" | "branch" | "action" }. |
| stepDuration | `number` | 1300 | Milliseconds each step spends running. |
| className | `string` | — | Classes for the section. |

### Split demo

Copy on the left and a working expense-approval inbox on the right: approve, flag or switch on an auto-approve rule until you hit inbox zero.

Install: `npx shadcn@latest add @geturui-pro/hero-sections-split-demo`

```tsx
import { HeroSplitDemo } from "@/components/blocks/hero-sections/split-demo";

export default function Page() {
  return <HeroSplitDemo primaryAction={{ label: "Start a free trial", href: "/signup" }} autoApproveLimit={5000} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | `string` | — | Ember chip above the headline. |
| headline | `string` | — | Main h1. |
| subcopy | `string` | — | Supporting paragraph. |
| primaryAction | `{ label: string; href?: string; onClick?: () => void }` | — | Volt button. |
| secondaryAction | `{ label: string; href?: string; onClick?: () => void } | null` | — | Ghost button. null hides it. |
| proof | `string | null` | — | Rating line under the buttons. |
| expenses | `SplitDemoExpense[]` | — | { id, person, merchant, category, amount } with amount in cents. |
| autoApproveLimit | `number` | 5000 | Cents at or under which the rule auto-approves. |
| className | `string` | — | Classes for the section. |

### Code demo

A terminal types the install command and streams its output, then the installed plan card springs into a live preview you can click.

Install: `npx shadcn@latest add @geturui-pro/hero-sections-code-demo`

```tsx
import { HeroCodeDemo } from "@/components/blocks/hero-sections/code-demo";

export default function Page() {
  return (
    <HeroCodeDemo
      command="npx acme add plan-card"
      output={["Resolving plan-card", "Wrote components/ui/plan-card.tsx", "Done in 1.8s"]}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | `string` | — | Mono label above the headline. |
| headline | `string` | — | Main h1. |
| subcopy | `string` | — | Supporting paragraph. |
| primaryAction | `{ label: string; href?: string; onClick?: () => void }` | — | Volt button. |
| secondaryAction | `{ label: string; href?: string; onClick?: () => void } | null` | — | Outline button. null hides it. |
| command | `string` | "npx geturui add plan-card" | Typed into the terminal and offered in the copy pill. |
| output | `string[]` | — | Lines printed after the command, one per beat; the last is highlighted. |
| fileName | `string` | "plan-card.tsx" | Shown above the preview. |
| typingSpeed | `number` | 45 | Milliseconds per typed character. |
| className | `string` | — | Classes for the section. |

### Centered cited

Answer-engine hero: a question types itself, sources load one by one, then the answer streams in with citation markers that light up their source.

Install: `npx shadcn@latest add @geturui-pro/hero-sections-centered-cited`

```tsx
import { HeroCenteredCited } from "@/components/blocks/hero-sections/centered-cited";

export default function Page() {
  return <HeroCenteredCited headline="Answers you can check" primaryAction={{ label: "Ask free", href: "/ask" }} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | `string` | — | Pill above the headline. |
| headline | `string` | — | Main h1. |
| subcopy | `string` | — | Supporting paragraph. |
| primaryAction | `{ label: string; href?: string; onClick?: () => void }` | — | Button beside the example chips. |
| examples | `CitedExample[]` | — | { label, question, answer: { text, cites? }[], sources: { id, title, site, snippet }[] }. The first plays on mount. |
| className | `string` | — | Classes for the section. |

### Marketplace

Search-first hero with a big search bar, category chips under a sliding highlight and listing cards that float around the headline and refilter live.

Install: `npx shadcn@latest add @geturui-pro/hero-sections-marketplace`

```tsx
import { HeroMarketplace } from "@/components/blocks/hero-sections/marketplace";

export default function Page() {
  return <HeroMarketplace city="Lisbon" onSearch={(q, category) => console.log(q, category)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | `string` | — | Line above the headline. |
| headline | `string` | — | Main h1. |
| subcopy | `string` | — | Supporting paragraph. |
| city | `string` | "Lisbon" | Shown in the search bar. |
| listings | `MarketplaceListing[]` | — | { id, title, area, category: "photo" | "podcast" | "kitchen" | "rooftop" | "workshop", price, rating, href? }. |
| onSearch | `(query: string, category: MarketplaceCategory | "all") => void` | — | Called when the search form is submitted. |
| className | `string` | — | Classes for the section. |

## Accessibility

- Headlines are real h1 elements; decorative aurora, product art and floating cards are aria-hidden.
- Interactive demos use real buttons with labels (approve, flag, billing radios, citation markers) and announce results through polite live regions.
- Typing, looping and drifting animations stop under reduced motion and show their finished state instead.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.