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
- One clear message per hero
- One CTA maximum
- Text must be readable on any background (test contrast)
- Mobile: content above image, not overlaid
- Performance: hero is the LCP element, optimize it
- Height: 60-80vh on desktop, 50-70vh on mobile