Hero Section Variants: 8 High-Converting Landing Page Designs

Why Your Hero Section Is Costing You Signups

Honestly, most hero sections are just vibes with no structure — a big headline, a vague subline, and a button that says "Get Started." Developers copy-paste something from Dribbble, ship it, and wonder why the bounce rate is 80%.

The hero is the first thing a visitor sees. You have maybe three seconds. Not three minutes. Three seconds to communicate what you do, who it's for, and why they should care. That means the visual design and the component structure both matter, a lot.

In this article, we're walking through 8 concrete hero section variants you can build in React with Tailwind v4. Each one is suited to a different product type or audience. No hand-wavy "just add gradients" advice — actual layout choices, spacing values, and when to use each.

Variant 1: Centered Hero with Gradient Text

This is the workhorse. A centered layout with a large headline, a one-sentence subline, and two CTAs (primary + secondary). It works for SaaS, dev tools, and anything with a clear value proposition you can express in under 10 words.

The trick with gradient text in Tailwind v4 is combining bg-clip-text with a proper bg-gradient-to-r. Set text-transparent and you're done — but make sure your gradient stops have enough contrast or it'll look muddy on OLED screens.

export function CenteredHero() {
  return (
    <section className="flex flex-col items-center justify-center min-h-[90vh] px-6 text-center">
      <h1 className="text-5xl md:text-7xl font-bold tracking-tight bg-gradient-to-r from-violet-500 to-indigo-400 bg-clip-text text-transparent">
        Ship UI. Fast.
      </h1>
      <p className="mt-6 text-lg text-zinc-400 max-w-xl">
        40 open-source React components styled for every taste. Copy, paste, done.
      </p>
      <div className="mt-10 flex gap-4">
        <a href="/components" className="px-6 py-3 rounded-xl bg-violet-600 text-white font-medium hover:bg-violet-500 transition">
          Browse Components
        </a>
        <a href="/docs" className="px-6 py-3 rounded-xl border border-zinc-700 text-zinc-300 hover:border-zinc-500 transition">
          Read Docs
        </a>
      </div>
    </section>
  );
}

Variant 2: Split-Screen Hero (Text Left, Visual Right)

Split-screen works when you have a strong visual asset — a product screenshot, an illustration, or a live demo preview. The left column carries the copy, the right column earns attention through imagery.

One thing a lot of devs get wrong: they make the two columns equal width. Don't. Give the text column 45% and the visual 55%. The visual should feel slightly dominant because that's what pulls the eye. Use a gap-16 or 64px between columns, not the default gap-8 — breathing room matters at this scale.

Also worth noting: on mobile, the visual should stack below the text, not above it. Users read top-to-bottom. They need context before they see the product. It sounds obvious but plenty of "mobile-first" hero implementations get this backwards.

Variant 3: Glassmorphism Hero with Frosted Card

If you want to understand what makes glassmorphism work as a hero treatment, start with what is glassmorphism — the backdrop-filter and layering mechanics are worth knowing before you try to use them in a hero.

The pattern here is a full-viewport background (gradient, mesh, or blurred image) with a centered frosted card containing your CTA block. The card uses backdrop-blur-xl, bg-white/10 (or rgba(255,255,255,0.08) for dark themes), and a 1px border at rgba(255,255,255,0.15).

It reads as premium. It works for fintech, AI products, and anything targeting a design-conscious audience. It doesn't work well if your background is busy or low-contrast — the blur just makes things worse. Keep the background simple: two-color gradient, max.

Variant 4: Announcement Banner + Minimal Hero

This pattern has a thin announcement bar at the top ("We just launched v2.0 — read the changelog →"), then a stripped-down centered hero beneath it. The banner does the heavy lifting for time-sensitive news, and the hero stays clean.

The banner should be dismissible. Store the dismissed state in localStorage — not a cookie, not a database call. It's a UI preference. Height should be fixed: 44px works well. Don't let it reflow the page on dismiss; use a CSS transition on max-height from 44px to 0px with overflow-hidden.

For the hero beneath it, you want less vertical padding than a standalone hero because the banner already anchors the top of the page. min-h-[80vh] instead of min-h-screen usually feels right. Pair this layout with an animated button on the primary CTA and it draws the eye exactly where you want.

Variant 5: Video Background Hero

Video backgrounds look great in mockups and terrible in production when done wrong. The rules: the video must be muted and autoplay, loop, and have playsinline set (iOS ignores autoplay without it). Use a <video> tag, not an iframe.

Keep the file under 3MB. Use MP4 with H.264 encoding. Add a poster image so users on slow connections see something meaningful before the video loads. The text overlay needs a dark scrim — bg-black/50 minimum, or the copy becomes unreadable on bright video frames.

This variant is best for physical products, travel, and events. It's overkill for a SaaS dashboard app. Ask yourself: does video actually show something your screenshot can't? If the answer is no, use variant 1 or 2.

Variant 6: Bento Grid Hero with Feature Tiles

Instead of a single visual, this variant turns the right column (or the lower half) into a mini bento grid of feature tiles. Three or four small cards, each showing one thing your product does. It's denser than a single screenshot and works well when your product has multiple distinct features worth highlighting above the fold.

The tile sizes don't have to be uniform — a 2×1 tile next to two 1×1 tiles with an 8px gap creates visual rhythm without looking random. Each tile should have an icon, a 3-5 word label, and nothing else. This isn't a feature list. It's a visual proof that you have depth.

The layout uses CSS Grid with grid-template-columns: repeat(2, 1fr) and grid-template-rows: auto — let the content decide row height. On mobile, collapse to a single column and keep only two tiles. Four tiles stacked vertically on a phone is just noise.

Variant 7: Marquee Hero with Social Proof

What's better than saying "trusted by 10,000 developers"? Showing their faces and names scrolling past in real time. A marquee component of user avatars, logos, or testimonial snippets just below the headline headline is surprisingly effective for credibility.

The structure: headline + subline + CTA at the top, then a subtle divider, then the marquee running at about 30px/s. Don't pause on hover — that makes it feel interactive when it's not. Keep it ambient. The marquee should be a second-read element, not competing with the primary CTA.

One technical note: set aria-hidden="true" on the marquee container. Screen readers don't need to read every scrolling testimonial. The marquee is decoration. Your actual social proof copy should live in the static text above it.

Variant 8: Dark Terminal / Code Preview Hero

For developer tools, CLIs, and APIs — show code. A terminal-style component on the right side with a simple install command or a quick code snippet converts developers better than any illustration. Developers trust code. They don't trust stock art of laptops.

The terminal window should have a realistic chrome: three colored dots (red, yellow, green at 12px diameter with 8px gap), a dark background (#0d0d0d or zinc-950), and syntax-highlighted output. You can use shiki or prism-react-renderer for the highlighting — just keep the bundle impact in mind.

Pair this with a cards stack component if you want to show multiple code examples without cluttering the hero. A stacked card interface lets users flip through "npm install", a quick API call example, and a config snippet without needing tabs or accordions. And if you do want tabs, there are solid animated tab implementations worth checking out.

FAQ

Read next