78 lines
2.0 KiB
Markdown
78 lines
2.0 KiB
Markdown
---
|
|
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)` |
|