Heroes

10 hero components for landing pages. Centered, split, minimal, stats, mosaic, cards, typed, breadcrumb, video, and fullscreen variants.

hero-centered.astro

Component Demo

Build Something Great

Centered hero with gradient background.

Get Started

hero-split.astro

Split Layout Hero

Text on one side, image on the other. Perfect for product launches.

Learn More

hero-minimal.astro

Minimal Hero

Clean, understated hero for refined pages.

Start

hero-stats.astro

Stats Hero

Hero with key metrics bar below the headline.

View Plans

99.9% Uptime

50K+ Customers

24/7 Support

hero-mosaic.astro

Visual Impact

Mosaic Hero

Hero with a 4-image mosaic grid.

Explore

hero-cards.astro

Cards Hero

Hero with feature cards below the fold.

Get Started

Fast

Lightning-quick performance.

Secure

Enterprise-grade security.

Scalable

Grows with your business.

hero-typed.astro

Build for Developers

Rotating words for dynamic headlines.

Try It

hero-breadcrumb.astro

hero-video.astro

Watch the Story

Video Hero

Hero with video placeholder and play button overlay.

Watch Now

hero-fullscreen.astro

Fullscreen Hero

Full viewport hero (constrained here for demo).

Scroll Down