Hero Section

Hero section

A hero has one job: tell a visitor what this is and give them the next step, before they scroll.

Before writing code

1. Find the real material: product name, what it does in one sentence, the one action (sign up, book, download), and any real screenshot or photo. Ask for missing facts. Never invent numbers, logos or quotes.
2. Write the copy first:
   • Headline: 7 words or fewer, concrete, no buzzwords ("Book a doctor in two taps", not "Revolutionizing healthcare").
   • One sentence under it: 12 to 20 words, says who it is for and what they get.
   • One primary button with a verb ("Start free", "Book now"). At most one quieter secondary link.
3. Decide what the visual shows: the real product, a real photo, or nothing. Never a fake browser window or stock "dashboard" drawing.

Layout rules

• Headline, sentence and button are visible at 1280×800 and at 390×844 without scrolling.
• Cap the text measure at about 20 words per line for the sentence.
• Use the site's existing tokens for colour, type and spacing. Add none ad hoc.
• One focal point. If there is an image, the text and the image do not fight for the same weight.
• The button has hover, focus-visible and active states. Focus is visible instantly.
• Images: real width and height attributes, fetchpriority="high" on the hero image only, no lazy loading above the fold.

Avoid

• Gradient text, purple-to-blue gradients, floating blobs, emoji as icons.
• A small label above the headline in spaced capitals.
• Three bullet "features" crammed into the hero.
• Autoplay video with sound, or motion without a prefers-reduced-motion fallback.

Check before you finish

1. Screenshot at 1280×800 and 390×844. Is the action visible in both?
2. Read the headline aloud. Would a stranger know what the product does?
3. Tab through: is every control reachable with a visible focus ring?
4. Lighthouse: no layout shift from the hero image (CLS under 0.1).

Report what you changed and anything you could not check.