Hero sectionPro
Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.
What's inside
- Flowing gradient headline
- Glowing grid background
- Animated product preview
- Props for your own copy
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
Usage
Import it from @/components/blocks/hero-section after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
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" }}
/>
);
}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.
This page as Markdown, for assistants and coding agents:
/blocks/hero-section/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt