# Hero section

A shadcn/ui hero section for SaaS landing pages that need to prove value at first glance: live data panels, rotating CTAs and a customer logo wall.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** SaaS and AI product landing pages; Analytics, data and dashboard products; Launch pages that need proof above the fold
- **Category:** Marketing · **Type:** Hero · **Style:** Motion, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/templates/hero-section) · [Screenshot](https://www.craftui.space/llms.md/preview/hero-section.5fc6d226.jpg)

![Data panel hero](https://www.craftui.space/llms.md/preview/hero-section.5fc6d226.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/hero-section.json
```

This is a paid item (SEC-0003): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import AktaHero01 from "@/components/blocks/hero-section";

export default function Page() {
  return <AktaHero01 />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `plateImage` | `string \| null` | `"/images/data-panel-hero-plate.webp"` | The photographic plate behind the panel cluster. Purely decorative and painted as a CSS background layer, not an <img>: if the file is absent the layer simply does not paint and the hatch beneath it shows through, so the block never ships a broken image. Pass `null` to force the hatch. |
| `className` | `string` | `""` | Extra classes for the section's root element. |

## Files

The install adds:

- `components/blocks/hero-section.tsx`
- `components/blocks/drawing-styles.ts`

npm dependencies (installed for you): `@hugeicons/core-free-icons`, `@hugeicons/react`, `@tabler/icons-react`, `motion`.