Initial commit: 79+ design patterns, LLM prompts, and assets

layout/hero-variations.md

@@ -0,0 +1,77 @@
+---
+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)` |