What is Hero section?

The hero section is the top of a marketing page, the part visitors see before scrolling. In a few seconds it has to tell them what the product is, who it is for, and what to do next. Most heroes combine a headline, a supporting sentence, one or two calls to action, and a visual such as a product screenshot. Everything else on the page, from the bento grid of features to pricing, builds on the claim the hero makes.

Anatomy

• Eyebrow (optional): a short label or announcement link above the headline.
• Headline: the page's single h1. Say what the product does in concrete words, not a slogan.
• Subhead: one or two sentences on who it is for and the main outcome.
• Calls to action: one primary action, and at most one quieter secondary action such as a demo link.
• Visual: the product itself, a short loop, or an illustration that supports the headline.
• Proof (optional): logos, a rating or a line like "No card required".

Write the headline after the rest of the page is clear. A useful test: if a visitor read only the headline and the primary button label, would they know what happens when they click? "Start free" beats "Get started" because it also answers the question of cost.

Performance

The hero usually contains the Largest Contentful Paint element, so it decides the page's LCP score. Serve the hero image at the right size with sizes, preload it, and do not lazy-load it. Keep the headline as real text rather than text baked into an image. Avoid entrance animations that start the headline at opacity: 0 and wait for JavaScript to reveal it; until hydration finishes, the most important words on the page are invisible. If you animate, render the final state on the server and animate only transform.

How to build one in React

import { Hero } from "@/components/ui/hero"

export default function Home() {
  return (
    <main>
      <Hero
        eyebrow="Now with Slack alerts"
        title="Know why revenue changed, before Monday"
        description="Acme watches Stripe and your CRM and explains every movement in plain language."
        primaryAction={{ label: "Start free" }}
        secondaryAction={{ label: "Watch the demo" }}
      />
    </main>
  )
}

Accessibility

• Use exactly one h1, and keep the headline, subhead and buttons in DOM order.
• Buttons that navigate should be links. Buttons that act in place should be buttons.
• Check text contrast over background images and gradients at every breakpoint.
• Stop autoplaying video and looping animation for users who set prefers-reduced-motion, and give any video a pause control.

MiniDev's free Hero covers the centered layout. The premium HeroSplitShowcase, HeroAurora and other variants live in the marketing category. For a full page, follow the Next.js landing page guide.