Centered hero

An announcement, a big promise and two actions, centered on a glow with a faint grid, and the customers below.

$ pnpm dlx shadcn@latest add @dashral/hero-centered

When to use

The top of a landing page: an announcement, the promise, two actions and the customers below.
Launches and home pages where one clear message matters more than showing the product.

When not to use

When the product sells itself on sight: Split hero or Product hero show it.
Sign-ups that are just an email: Sign-up hero.

Usage

Centered hero with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { HeroCentered } from "@/components/dashral/blocks/hero-centered"
2
3<HeroCentered
4  announcement={{ label: "New", text: "AI reports are here", href: "/changelog" }}
5  title="Dashboards your team actually opens"
6  description="Connect your data in minutes and share live numbers with everyone."
7  primary={{ label: "Start free", href: "/register" }}
8  secondary={{ label: "Book a demo", href: "/demo" }}
9  logos={customerLogos}
10/>

API reference

HeroCentered

A centered hero: an announcement, the promise, two actions and the customers who already use it, on a soft glow of the primary color with a faint grid. Each line arrives a moment after the one before. Every part comes from props.

Prop	Type	Default
`announcement`	`{ label: string; text: string; href: string } \| null` The pill above the headline; null hides it.	`sample`
`title`	`React.ReactNode`	`sample`
`description`	`React.ReactNode`	`sample`
`primary`	`BlockAction`	`sample`
`secondary`	`BlockAction \| null` The second button; null hides it.	`sample`
`note`	`React.ReactNode` A line under the buttons; none hides it.	`sample`
`logosTitle`	`string`	`"Trusted by teams at"`
`logos`	`typeof sampleLogos` Your customers: a name with an icon, or a logo of their own; none hides the row.	`sample`

type BlockAction

A button: a link with href, or your handler with onClick.

Prop	Type	Default
`label`	`string`	—
`href`	`string`	—
`onClick`	`() => void`	—