Shadcn UI Hero Block
Hero101 is a centered single-column hero with a radial gradient background. The content includes a large headline, supporting paragraph, two CTAs (primary button and a “Watch Demo” link with play icon), and a row of company logos at the bottom. Clicking the demo link opens a modal dialog with an embedded video player.
Soft pastel gradient background using violet, yellow, and cyan tones with a subtle inner shadow at the bottom edge. The play button has an animated spinning gradient border. Centered text with generous spacing. The logo strip wraps on smaller screens.
Polished and modern with a friendly, approachable feel. The gradient background and animated play button give it more personality than a standard centered hero. More feature-complete than a basic starter block due to the interactive video modal and logo strip.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
aspect-ratio @shadcn | Registry |
button @shadcn | Registry |
dialog @shadcn | Registry |