Hero Section Variants

---
name: hero-section-variants
description: Use when picking between hero section patterns — centered, split, image-right, video-bg, code, form. Triggers on "hero variants", "hero options", "landing hero examples", "hero section ideas".
---

# Hero Section Variants

Generate 5-7 hero patterns the user can pick from. Each variant is a self-contained HTML+Tailwind block. Same content, different shape — so the comparison is on layout, not copy.

## Required inputs

1. **Headline** — benefit-stating, < 12 words. Same headline across variants for fair comparison.
2. **Sub-headline** — 1-2 sentences supporting the headline
3. **Primary CTA** + optional secondary CTA
4. **Brand color** + optional accent
5. **Asset(s)** — product screenshot URL (for split / image-right), short video URL (for video-bg), code snippet (for code hero)

If the headline is feature-listing ("AI-powered workflow automation platform"), push back before generating any variant. The hero is wasted on bad copy.

## Output format

One file with 5-7 sections, each clearly labeled:

```
<!-- Variant 1: Centered -->
<section class="...">...</section>

<!-- Variant 2: Split (image right) -->
<section class="...">...</section>

...
```

Each variant uses the SAME headline + sub + CTAs so the user evaluates layout differences only.

## The variants

### 1. Centered (the safe default)

Single column, max-width `max-w-3xl`, everything centered. Headline → sub → CTAs → optional product screenshot below.

```
<section class="px-6 py-24 sm:py-32">
  <div class="mx-auto max-w-3xl text-center">
    <h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-6xl">{headline}</h1>
    <p class="mt-6 text-lg text-gray-600">{sub}</p>
    <div class="mt-8 flex items-center justify-center gap-4">
      <a class="primary-cta">...</a>
      <a class="ghost-cta">Learn more →</a>
    </div>
    <img src="..." class="mt-16 rounded-lg shadow-2xl ring-1 ring-gray-900/10" />
  </div>
</section>
```

When to use: most products. Hard to mess up.

### 2. Split / image-right

Two columns at `md+`: text left, image right. `grid md:grid-cols-2 gap-12 items-center`. Headline tighter — less width to wrap.

When to use: when a product screenshot tells the story better than copy.

### 3. Image-left, text-right

Same as 2, reversed. `md:order-2` on the image.

When to use: rare; sometimes designers prefer when reading languages are RTL or when it's the second hero on a long page.

### 4. Video background hero

Full-bleed `<video>` with poster, dark gradient overlay, white text on top.

```
<section class="relative isolate overflow-hidden">
  <video autoplay muted loop playsinline poster="..." class="absolute inset-0 h-full w-full object-cover">
    <source src="hero.mp4" type="video/mp4" />
  </video>
  <div class="absolute inset-0 bg-gradient-to-b from-gray-900/80 to-gray-900/40"></div>
  <div class="relative px-6 py-32 text-center text-white">
    <h1 class="text-5xl font-semibold">...</h1>
  </div>
</section>
```

Constraints:
- Always `muted playsinline` (autoplay requires muted on mobile Safari)
- Provide `poster` for slow connections
- Honor `prefers-reduced-motion`: pause via JS if user prefers reduced motion
- Video file: < 2MB, 5-10 second loop, encode as H.264 MP4 + WebM fallback
- Check contrast over the busiest video frame, not the average

When to use: brand-heavy launches; landing pages where the product is something visual.

### 5. Code-block hero (developer tools)

Two columns: pitch on the left, runnable code snippet on the right. The code IS the screenshot.

```
<div class="rounded-lg bg-gray-950 p-6 text-sm font-mono">
  <div class="text-gray-400"># Install</div>
  <div class="mt-2 text-emerald-400">$ npm install our-tool</div>
  ...
</div>
```

Pair with Shiki for syntax highlighting if you want it to look more legit.

When to use: dev tools, APIs, CLIs.

### 6. Split with email form

Left: headline + sub. Right: a 1-field email form ("Get early access" / "Join the waitlist") with a button.

When to use: pre-launch landing pages, newsletter signups, gated lead gen.

### 7. Gradient mesh / abstract background

Centered hero (variant 1) with a subtle SVG / CSS gradient mesh background. Adds visual interest without competing with the headline.

```
<div class="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-100 via-white to-white"></div>
```

When to use: most B2B SaaS. Looks modern without being loud.

## Cross-variant rules

- All variants share: `<section>` semantics, `<h1>` for the headline, focus-visible states on CTAs, mobile-first responsive
- Padding pattern: `px-6 py-20 sm:py-28 lg:py-32`
- Headline size: `text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight`
- Sub size: `text-lg sm:text-xl text-gray-600`, max `max-w-2xl`
- Two CTAs max. Primary solid, secondary ghost or text-link.
- All variants tested at 320px wide (smallest mobile)

## Accessibility

- One `<h1>` per page — the hero headline. Subsequent sections use `<h2>`.
- Video: provide `<track kind="captions">` if it has audio. Muted-loop b-roll typically doesn't.
- Image hero: meaningful `alt` if it conveys info, `alt=""` if decorative
- Background video: respect `prefers-reduced-motion` (pause and show poster)
- Color contrast over video / gradients: test the worst-case frame

## Anti-patterns

- **3 CTAs in the hero**: pick one primary
- **Headline that runs 4 lines on mobile**: tighten copy or scale font
- **Video without poster**: blank black frame on slow load
- **Image-right where the image is irrelevant**: use centered if you don't have a real product shot
- **Code hero with fake code**: developers spot it instantly. Use real, runnable code.
- **Gradient that competes with the headline**: subtle, low contrast — gradient is texture, not content

## Output

Return one file with 5-7 `<section>` blocks, each commented with: variant name, when to use, what's different. Top of file: a 1-line "how to choose" recommendation based on the user's input (e.g., "If you have a product screenshot you're proud of, variant 2; otherwise variant 1.").