Hero section
The big opening block at the top of a page: headline, one supporting line, a button, and a visual. The first thing anyone sees.
See it
What it is
The hero is the opening block of a page: one headline, one supporting line, one primary action, and usually a visual (product shot, screenshot, video, or gradient). Its whole job is to answer 'what is this and why should I care' before anyone decides to scroll.
Reach for it on landing pages, marketing sites, and product homepages. Common shapes: centered (headline stacked over a screenshot), split (copy left, image right), and full-bleed (text over a background image or video). Keep the copy to one clear promise; the hero is the worst place to list features.
Gotcha: heroes get bloated. Two competing buttons, a paragraph of body copy, and a 4MB background video is the standard failure. Also, a hero set to 100vh looks great on a laptop and traps mobile users on a wall of nothing, so let content set the height instead of the viewport.
Ask AI for it
Build a hero section as the first block of the page: a short bold headline (6 to 10 words), one supporting sentence under it, a single primary button plus one quiet text link, and a product screenshot on the right in a split two-column layout. Center the column stack on mobile with the image below the text. Use generous top and bottom padding, let the content set the height (no forced 100vh), and keep the headline the largest type on the page by a clear margin.