hero-section

Hero Section Design

Beyond the Generic

The centered headline + subtext + button hero is the default AI output. Here are alternatives:

Split Hero

Content on one side, visual on the other. 60/40 or 50/50 split.

Full-Bleed Image Hero

Image fills the viewport, text overlaid with scrim gradient.

Video Hero

Autoplay muted video as background with minimal text overlay.

Product Screenshot Hero

The product itself as the hero visual. "Show, don't tell."

Editorial Hero

Large typography only, no image. Serif headline, compelling copy.

Scroll Hero

Animated or interactive element that responds to scroll.

Rules

1. One clear message per hero
2. One CTA maximum
3. Text must be readable on any background (test contrast)
4. Mobile: content above image, not overlaid
5. Performance: hero is the LCP element, optimize it
6. Height: 60-80vh on desktop, 50-70vh on mobile