What makes a hero section convert?

A benefit-led headline that names the value in seconds, one unmistakable primary action, and supporting copy kept short. Clarity beats cleverness — visitors should know what you do and what to click without scrolling.

How many calls to action should a hero have?

One primary action, optionally one lower-emphasis secondary action. Competing buttons of equal weight split attention and reduce conversion. Vireya's hero blocks support a primary and secondary action with built-in visual hierarchy.

All categories

hero/*

Heroes

Page-opening sections — set the tone, frame the value, get the user to scroll.

4 variants

@vireya/blocks/hero/backgroundImage

Full-bleed image with tunable overlay opacity for legibility.

server

HeroBackgroundImage

Tell a story at full bleed

Pair imagery with sharp copy. Tunable overlay opacity included.

@vireya/blocks/hero/centered

Symmetric, badge + title + description + actions, single column.

server

HeroCentered

Sections that ship themselves

Drop a single component, customize through props, done.

@vireya/blocks/hero/minimal

Title + description + single CTA. Maximum restraint.

server

Less is more.

Tight typography, breathing room, one CTA. The rest is up to you.

@vireya/blocks/hero/splitVisual

Two-column: copy on one side, free-form visual on the other.

server

HeroSplitVisual

Split hero with visual

Text on the left, anything you want on the right.

Understanding Heroes

The hero is the first section a visitor sees — the part above or near the fold that has to answer 'what is this and why should I care?' in a few seconds. It sets the tone, states the value proposition and offers the primary action, so it carries more conversion weight than any other block on the page.

Vireya's hero blocks are prop-driven and server-component-friendly: centered, split-with-visual, minimal and background-image layouts that you customise through props rather than rebuilding markup.

When to use

Opening a landing page, product page or marketing site.
Framing a single clear value proposition with a primary call to action.
Pairing a headline with a supporting visual, screenshot or demo.

When to avoid

Content-dense app screens where a hero wastes valuable space.
Pages with no single primary action — a hero's job is to point somewhere.

Best practices

Lead with a benefit-driven headline, not a feature list or tagline.
Offer one primary call to action; demote secondary actions visually.
Keep supporting copy to a sentence or two — the page below carries the detail.
Use the headline as the page's single <h1> for both clarity and SEO.

Accessibility

Mark the hero headline up as a real <h1> heading element.
Ensure text contrast over background images meets WCAG AA.
Give the primary action a descriptive, action-oriented label.

Frequently asked questions

What makes a hero section convert?: A benefit-led headline that names the value in seconds, one unmistakable primary action, and supporting copy kept short. Clarity beats cleverness — visitors should know what you do and what to click without scrolling.
How many calls to action should a hero have?: One primary action, optionally one lower-emphasis secondary action. Competing buttons of equal weight split attention and reduce conversion. Vireya's hero blocks support a primary and secondary action with built-in visual hierarchy.