Hero Section

The hero is the band of content that fills the viewport when someone first lands. It's the only part of your page a majority of visitors will read carefully. Scroll depth studies across thousands of sites show 50–60% of people never scroll past the hero.

Which means: if your hero doesn't communicate the value, the rest of your landing page doesn't matter.

The standard hero has five elements, in order of importance:

1. Headline — 5 to 10 words, names the outcome
2. Subheadline — 1–2 sentences, explains the "how"
3. Primary CTA — the single action you want
4. Proof signal — a logo row, rating, or stat
5. Visual — product screenshot, hero image, or 15-second demo

If any of these are fighting for attention, cut the one that's weakest.

Good hero headlines are specific about the outcome and name the audience. Bad ones are clever.

Bad (clever): "The future of productivity."
Good (specific): "Ship projects 3× faster — without more meetings."

The bad version might sound impressive, but it doesn't tell anyone what you do or who it's for. The good version names the outcome (faster shipping), the mechanism (fewer meetings), and implies the audience (teams that ship projects).

Product screenshots beat lifestyle photos almost every time for B2B. For physical products, studio shots with a clean background convert better than on-model shots for first impressions. 10–20 second auto-play muted loops beat static images by 8–12% in most tests — but only if the loop shows the product in use, not a generic brand video.