# Hero section

> Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.

Block · Pro · https://lodeui.com/blocks/hero-section

## When to use

- The first screen of a product or launch page.

## When not to use

- Inside an app: heroes belong on marketing pages.

## Installation

```bash
npx shadcn@latest add @lode/hero-section
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { HeroSection } from "@/components/blocks/hero-section";

export default function Home() {
  return (
    <HeroSection
      eyebrow="Now with AI insights"
      title="Analytics your whole team"
      highlight="actually reads"
      description="Dashboards, alerts and weekly summaries without a data team."
      primary={{ label: "Start free", href: "/sign-up" }}
      secondary={{ label: "Book a demo", href: "/demo" }}
    />
  );
}
```

Built from: Gradient text, Grid pattern, Number ticker, Sparkline

## API reference

### HeroSection

The hero with a default animated dashboard preview. Every text and link is a prop. Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| eyebrow / badge | `string` | `"40 components…" / "New"` | Badge text above the headline. |
| title / highlight | `string` | – | Headline; highlight is drawn with a flowing gradient. |
| description / note | `string` | – | Supporting line and small print. |
| primary / secondary | `{ label; href }` | – | The two actions. |
| visual | `ReactNode` | – | Replace the default product preview. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the badge link and both actions |

## Accessibility

- One h1; the gradient word stays real text.
- Entrance animations are skipped under reduced motion.

## Motion

- Headline, copy and buttons rise and unblur in sequence; the preview tilts up into place; KPI digits roll and bars grow.

## Responsive behavior

- Buttons stack full width on phones; preview KPIs stack to one column.

## Performance

- Animations start when the section scrolls into view.
- No data fetching; pass your copy as props.

## Notes for AI

- Keep highlight to 2–3 words.
- Pass visual to show a screenshot of your real product.

## Related

- [Feature bento](https://lodeui.com/blocks/feature-bento) — A bento grid of features, each with a small live visual and a pointer spotlight.
- [Logo cloud](https://lodeui.com/blocks/logo-cloud) — Trusted-by logos as an endless strip or a static grid.
- [Grid pattern](https://lodeui.com/components/grid-pattern) — A technical grid background where a few cells gently light up.
- [Gradient text](https://lodeui.com/components/gradient-text) — Text filled with a slowly flowing gradient.