# Hero

Hero is a neobrutalist React component from Cruise UI. The big --primary opening section: headline, two actions, an illustration (danfo bus, Micra taxi or cruise ship) and a ghost word.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/hero
```

Import: `import { CruiseHero, CruiseDanfoBus, CruiseMicraTaxi, CruiseHeroShip } from "@/components/cruise/hero";`

## When to use

The top of a landing page.

## When not to

Inner pages (use a plain heading).

## Example (React)

```tsx
import { CruiseButton } from "@/components/cruise/button";
import { CruiseDanfoBus, CruiseHero } from "@/components/cruise/hero";

export default function HeroExample() {
  return (
    <CruiseHero
      headline="Book your next ride."
      lede="Every route in Lagos, one fare, no queues."
      actions={
        <>
          <CruiseButton variant="inverted">Book a ride</CruiseButton>
          <CruiseButton variant="secondary">See routes</CruiseButton>
        </>
      }
      illustration={<CruiseDanfoBus />}
      ghostWord="RIDE"
    />
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<section class="hero on-primary">
  <span class="ghost-word" aria-hidden="true">DANFO</span>
  <div class="hero-inner">
    <span class="badge">New route</span>
    <h1 class="hero-title">Your app, but make it Lagos.</h1>
    <p class="hero-sub">One short supporting sentence about what the product does.</p>
    <div class="hero-actions">
      <a class="brutal btn btn-invert" href="#start">Get started</a>
      <a class="brutal btn btn-secondary" href="#examples">See examples</a>
    </div>
  </div>
  <div class="danfo-stripe" aria-hidden="true"></div>
</section>
```

## Props: CruiseHero

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `headline` | `ReactNode` | — | — |
| `lede?` | `ReactNode` | — | — |
| `footnote?` | `ReactNode` | — | A small line under the buttons (e.g. a support link). |
| `actions?` | `ReactNode` | — | One primary + one secondary Button. On this yellow background the primary must use the "inverted" variant. Stacks full-width on mobile. |
| `illustration?` | `ReactNode` | — | Optional illustration, shown in a .brutal frame rotated 2deg. |
| `ghostWord?` | `string` | — | Optional ghost word (A6): one oversized decorative word behind the copy, cropped by the section edge. Max one per page. From 1280px it is anchored to the content container, so on wide screens it stays behind the content instead of drifting to the screen edge. |
| `ghostFit?` | `boolean` | — | Scale the ghost word to fit entirely inside the hero (no cropping) instead of the oversized, edge-cropped default. |
| `className?` | `string` | — | — |

## Props: CruiseDanfoBus

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className?` | `string` | — | — |
| `palette?` | `CruiseBusPalette` | `cssPalette` | — |
| `width?` | `number` | — | Fixed pixel width; otherwise the bus fills its container. |
| `driveIn?` | `boolean` | — | Drive the bus in from the left once on mount (CSS .bus-drive-in). |

## Props: CruiseMicraTaxi

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className?` | `string` | — | — |
| `width?` | `number` | — | — |

## Props: CruiseHeroShip

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className?` | `string` | — | — |

## Accessibility

- The headline is the page's <h1>.
- The ghost word and illustration are decorative (aria-hidden).