---
name: layout/hero-variations
title: Hero Section Variations
description: 5 hero patterns: centered, split, full-bleed, minimal, interactive.
tags: [layout, hero, cta, landing, conversion]
source: stripe.com, linear.app, raycast.com, resend.com, amppz.com
---

# Hero Section Variations

## 5 паттернов hero-секций

### 1. Centered (Linear/Raycast)
```html
<section class="hero hero-centered">
  <div class="hero-content">
    <h1>Главный заголовок</h1>
    <p>Подзаголовок с описанием</p>
    <a href="#signup" class="btn btn-primary">Начать бесплатно</a>
  </div>
</section>
```

### 2. Split (Stripe)
```html
<section class="hero hero-split">
  <div class="hero-text">
    <h1>Заголовок</h1>
    <p>Описание</p>
    <a href="#signup" class="btn btn-primary">Начать</a>
  </div>
  <div class="hero-visual">
    <img src="/product-screenshot.png" alt="Screenshot">
  </div>
</section>
```

### 3. Full-Bleed (Apple)
```html
<section class="hero hero-fullbleed">
  <video autoplay muted loop playsinline>
    <source src="/hero.mp4" type="video/mp4">
  </video>
  <div class="hero-overlay"></div>
  <div class="hero-content">
    <h1>Заголовок</h1>
  </div>
</section>
```

### 4. Minimal (Brutalist)
```html
<section class="hero hero-minimal">
  <h1>Один заголовок<br>на весь экран</h1>
  <a href="#signup" class="btn btn-primary">→</a>
</section>
```

### 5. Interactive (3D/WebGL)
```html
<section class="hero hero-interactive">
  <div id="webgl-container"></div>
  <div class="hero-content">
    <h1>Заголовок</h1>
    <p>Описание</p>
  </div>
</section>
```

## Anti-patterns

| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Без CTA на первом экране | CTA всегда виден |
| Текст < 40px | `font-size: clamp(2.5rem, 6vw, 4rem)` |
| Без whitespace | `padding: 128px 0` |
| Без mobile breakpoint | `@media (max-width: 768px)` |