wow-design-wiki/layout/hero-variations.md

---

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)

<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)

<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)

<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)

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

5. Interactive (3D/WebGL)

<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)