design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md)

- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
2026-06-21 20:40:35 +05:00
1 parent e3738f2b3e
commit 76c4c5b4fe
@@ -0,0 +1,214 @@
+---
+name: layout/bento-grid
+title: Bento Grid Layout
+description: Asymmetric grid layout inspired by Apple's design language. Cards of varying sizes in a cohesive grid.
+tags: [layout, grid, asymmetric, bento, cards]
+source: apple.com, linear.app, raycast.com, godly.website
+---
+
+# Bento Grid Layout
+
+## Что это
+Сетка карточек разного размера, объединённых общим стилем. Вдохновлена дизайном Apple и Linear. Каждый блок — самостоятельная единица, но вместе они создают целостную композицию.
+
+## Ключевые характеристики
+
+| Параметр | Значение |
+|----------|----------|
+| `gap` | `16–24px` |
+| `grid-template-columns` | `repeat(auto-fit, minmax(280px, 1fr))` |
+| `border-radius` | `16–24px` (большой радиус) |
+| `padding` | `32–48px` внутри карточек |
+| `border` | `1px solid rgba(255,255,255,0.06)` |
+| `background` | `rgba(255,255,255,0.02)` или `#111` |
+
+## Шаблоны раскладок
+
+### 2x2 Balanced (4 карточки)
+```
+┌─────────────┬─────────────┐
+│   Card 1    │   Card 2    │
+│   (wide)    │   (wide)    │
+├─────────────┴─────────────┤
+│   Card 3  │   Card 4  │  │
+│   (tall)  │   (tall)  │  │
+└─────────────┴─────────────┘
+```
+
+### 3-2-1 Asymmetric
+```
+┌────────────┬────────────┬────────────┐
+│            │   Card 2   │            │
+│  Card 1    ├────────────┤   Card 3   │
+│   (tall)   │   Card 4   │   (tall)   │
+│            ├────────────┤   (tall)   │
+│            │   Card 5   │            │
+└────────────┴────────────┴────────────┘
+```
+
+### Hero Bento (featured card + smaller)
+```
+┌────────────────────┬────────────┐
+│                    │            │
+│  Card 1 (featured) │  Card 2    │
+│  span 2 cols       │            │
+│                    ├────────────┤
+│                    │  Card 3    │
+└────────────────────┴────────────┘
+```
+
+## Реализация
+
+```html
+<section class="bento-section">
+  <div class="bento-grid">
+    <!-- Featured card: spans 2 columns -->
+    <div class="bento-card featured">
+      <span class="bento-label">01</span>
+      <h3>Заголовок карточки</h3>
+      <p>Описание...</p>
+      <div class="bento-visual">
+        <!-- Визуальный элемент, скриншот, иконка -->
+      </div>
+    </div>
+
+    <!-- Standard cards -->
+    <div class="bento-card">
+      <span class="bento-label">02</span>
+      <h3>Заголовок</h3>
+      <p>Описание...</p>
+    </div>
+
+    <div class="bento-card">
+      <span class="bento-label">03</span>
+      <h3>Заголовок</h3>
+      <p>Описание...</p>
+    </div>
+
+    <div class="bento-card">
+      <span class="bento-label">04</span>
+      <h3>Заголовок</h3>
+      <p>Описание...</p>
+    </div>
+  </div>
+</section>
+```
+
+```css
+.bento-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.bento-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 20px;
+  padding: 32px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.bento-card:hover {
+  border-color: rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.05);
+  transform: translateY(-2px);
+}
+
+/* Featured card: spans 2 columns */
+.bento-card.featured {
+  grid-column: span 2;
+}
+
+/* Tall card: spans 2 rows (requires grid-template-rows) */
+.bento-card.tall {
+  grid-row: span 2;
+}
+
+.bento-label {
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.3);
+  letter-spacing: 0.1em;
+  margin-bottom: 16px;
+}
+
+.bento-card h3 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.bento-card p {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+```
+
+## CSS Grid Layouts
+
+### 3-column Bento
+```css
+.bento-grid-3col {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(200px, auto);
+  gap: 16px;
+}
+```
+
+### 4-column Bento
+```css
+.bento-grid-4col {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: minmax(180px, auto);
+  gap: 16px;
+}
+```
+
+### Responsive Bento
+```css
+@media (max-width: 768px) {
+  .bento-grid {
+    grid-template-columns: 1fr;
+  }
+  .bento-card.featured {
+    grid-column: span 1;
+  }
+}
+```
+
+## Визуальные элементы внутри Bento
+
+1. **Скриншоты продукта** — внутри карточки, с `border-radius: 12px` и `box-shadow`
+2. **Иконки/эмодзи** — крупные (48–64px), слева или сверху
+3. **Градиентные фоны** — `radial-gradient` для создания глубины
+4. **Анимированные элементы** — простые CSS-анимации для привлечения внимания
+5. **Цифры** — крупные цифры (48–72px) для метрик
+
+## Anti-patterns
+
+| ❌ Плохо | ✅ Хорошо |
+|----------|-----------|
+| Все карточки одинакового размера | 1–2 featured + обычные |
+| `gap: 8px` — слишком тесно | `gap: 16–24px` |
+| `border-radius: 8px` — квадратный | `border-radius: 16–24px` |
+| Белый фон карточек на светлом фоне | Полупрозрачный на тёмном фоне |
+| Без hover-эффектов | Hover: lift + border glow |
+
+## CV Service Validation
+
+```bash
+# Проверить grid adherence
+curl -s -X POST http://localhost:8001/design/analyze-dom \
+  -H "Content-Type: application/json" \
+  -d '{"html": "...", "full_analysis": false}' | \
+  python3 -c "import sys,json; d=json.load(sys.stdin); print(f\"Grid: {d['analyzers'].get('design_tokens',{}).get('score','N/A')}\")"
+```
+
+Ожидается: `grid_adherence` > 6 (cv-service меряет по регулярности gap и выравниванию).
@@ -0,0 +1,89 @@
+---
+name: layout/card-grid
+title: Card Grid with Hover States
+description: Responsive card grids with hover animations and shadows.
+tags: [layout, grid, card, hover, responsive]
+source: raycast.com, linear.app, resend.com, stripe.com
+---
+
+# Card Grid Layout
+
+## CSS Grid
+
+```css
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 24px;
+}
+```
+
+## Card Structure
+
+```html
+<article class="card">
+  <div class="card-icon">📊</div>
+  <h3 class="card-title">Заголовок</h3>
+  <p class="card-description">Описание фичи...</p>
+  <a href="#" class="card-link">Подробнее →</a>
+</article>
+```
+
+```css
+.card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 20px;
+  padding: 32px;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+.card:hover {
+  border-color: var(--color-accent);
+  transform: translateY(-4px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+.card-icon {
+  width: 48px;
+  height: 48px;
+  background: rgba(99, 102, 241, 0.1);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+.card-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+.card-description {
+  color: var(--color-text-secondary);
+  flex: 1;
+  margin-bottom: 16px;
+}
+.card-link {
+  color: var(--color-accent);
+  font-weight: 600;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: gap 0.3s ease;
+}
+.card-link:hover {
+  gap: 8px;
+}
+```
+
+## Anti-patterns
+
+| ❌ Плохо | ✅ Хорошо |
+|----------|-----------|
+| `min-width: 200px` | `min-width: 300px` |
+| Без `auto-fit` | `grid-template-columns: repeat(auto-fit, ...)` |
+| Без hover | `transform: translateY(-4px)` |
+| Без `flex: 1` | `flex: 1` для описания |
@@ -0,0 +1,416 @@
+---
+name: layout/feature-list
+title: Feature List with Animated Checkmarks
+description: Clean feature lists with animated checkmarks, icons, and hover states.
+tags: [layout, feature-list, checkmark, hover, clean, conversion]
+source: resend.com, linear.app, raycast.com, stripe.com
+---
+
+# Feature List with Animated Checkmarks
+
+## Что это
+Чистый, структурированный список фич с анимированными чекмарками иконками. Один из самых конверсионных паттернов — используется на Resend, Linear, Raycast.
+
+## Где используется
+- Pricing-страницы
+- Сравнение планов
+- Feature comparison
+- Onboarding-экраны
+- "Why choose us" секции
+
+## Pattern 1: Standard Feature List
+
+```html
+<section class="feature-list-section">
+  <div class="feature-list-container">
+    <div class="feature-list">
+      <div class="feature-item">
+        <span class="feature-icon check">✓</span>
+        <div class="feature-content">
+          <h3>Анализ 99+ звонков</h3>
+          <p>Загрузите аудио — получите детальный отчёт по 10 пунктам скрипта.</p>
+        </div>
+      </div>
+      
+      <div class="feature-item">
+        <span class="feature-icon check">✓</span>
+        <div class="feature-content">
+          <h3>Рейтинг операторов</h3>
+          <p>ИИ автоматически оценивает каждого оператора и формирует рейтинг.</p>
+        </div>
+      </div>
+      
+      <div class="feature-item">
+        <span class="feature-icon check">✓</span>
+        <div class="feature-content">
+          <h3>Конкретные рекомендации</h3>
+          <p>Не просто "плохо", а "замените фразу X на Y для роста конверсии на 15%".</p>
+        </div>
+      </div>
+      
+      <div class="feature-item">
+        <span class="feature-icon check">✓</span>
+        <div class="feature-content">
+          <h3>Еженедельные отчёты</h3>
+          <p>Автоматический мониторинг качества звонков с динамикой улучшений.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+```
+
+```css
+.feature-list-section {
+  padding: 128px 0;
+}
+
+.feature-list-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 var(--space-6);
+}
+
+.feature-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.feature-item {
+  display: flex;
+  gap: var(--space-5);
+  padding: 32px 0;
+  border-bottom: 1px solid var(--color-border);
+  transition: all 0.3s ease;
+  align-items: flex-start;
+}
+
+.feature-item:first-child {
+  padding-top: 0;
+}
+
+.feature-item:last-child {
+  border-bottom: none;
+}
+
+.feature-item:hover {
+  transform: translateX(8px);
+}
+
+.feature-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  font-size: 16px;
+  font-weight: 700;
+  margin-top: 2px;
+}
+
+.feature-icon.check {
+  background: rgba(16, 185, 129, 0.1);
+  color: #10b981;
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.feature-icon.cross {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+  border: 1px solid rgba(239, 68, 68, 0.3);
+}
+
+.feature-content h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.feature-content p {
+  font-size: 0.95rem;
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+}
+```
+
+## Pattern 2: Two-Column Comparison
+
+```html
+<section class="comparison">
+  <div class="comparison-grid">
+    <div class="comparison-col">
+      <h3>calls24</h3>
+      <div class="feature-check">
+        <span class="check-icon">✓</span>
+        <span>AI-анализ по 10 пунктам</span>
+      </div>
+      <div class="feature-check">
+        <span class="check-icon">✓</span>
+        <span>Рейтинг операторов</span>
+      </div>
+      <div class="feature-check">
+        <span class="check-icon">✓</span>
+        <span>Рекомендации по скрипту</span>
+      </div>
+    </div>
+    
+    <div class="comparison-col">
+      <h3>Другие</h3>
+      <div class="feature-cross">
+        <span class="cross-icon">×</span>
+        <span>Только базовые метрики</span>
+      </div>
+      <div class="feature-cross">
+        <span class="cross-icon">×</span>
+        <span>Нет рейтинга операторов</span>
+      </div>
+      <div class="feature-cross">
+        <span class="cross-icon">×</span>
+        <span>Общие рекомендации</span>
+      </div>
+    </div>
+  </div>
+</section>
+```
+
+```css
+.comparison-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.comparison-col {
+  padding: 48px;
+  border-radius: 20px;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+}
+
+.comparison-col h3 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 32px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.feature-check, .feature-cross {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 12px 0;
+}
+
+.check-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(16, 185, 129, 0.1);
+  color: #10b981;
+  font-size: 14px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.cross-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+  font-size: 14px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.feature-check span:last-child,
+.feature-cross span:last-child {
+  color: var(--color-text-secondary);
+  font-size: 0.95rem;
+}
+
+@media (max-width: 768px) {
+  .comparison-grid {
+    grid-template-columns: 1fr;
+  }
+}
+```
+
+## Pattern 3: Animated Checkmark
+
+```html
+<div class="feature-item-animated">
+  <div class="check-circle">
+    <svg class="check-path" viewBox="0 0 24 24" width="24" height="24">
+      <path d="M5 13l4 4L19 7" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  </div>
+  <div class="feature-content">
+    <h3>Фича с анимацией</h3>
+    <p>Описание фичи</p>
+  </div>
+</div>
+```
+
+```css
+.feature-item-animated {
+  display: flex;
+  gap: 16px;
+  padding: 24px 0;
+  align-items: flex-start;
+}
+
+.check-circle {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(16, 185, 129, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.check-path {
+  stroke-dasharray: 30;
+  stroke-dashoffset: 30;
+  animation: draw-check 0.5s ease forwards;
+  animation-delay: 0.3s;
+}
+
+@keyframes draw-check {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.feature-item-animated:hover .check-circle {
+  transform: scale(1.1);
+  transition: transform 0.2s ease;
+}
+```
+
+## Pattern 4: Pricing Table with Checkmarks
+
+```html
+<div class="pricing-table">
+  <div class="pricing-card">
+    <h3>Бесплатно</h3>
+    <p class="price">0 ₽</p>
+    <ul class="pricing-features">
+      <li><span class="check-icon">✓</span> 3 звонка</li>
+      <li><span class="check-icon">✓</span> Базовый отчёт</li>
+      <li class="disabled"><span class="cross-icon">×</span> Рейтинг операторов</li>
+    </ul>
+    <button class="btn btn-secondary">Попробовать</button>
+  </div>
+  
+  <div class="pricing-card featured">
+    <h3>Стандарт</h3>
+    <p class="price">5 000 ₽</p>
+    <ul class="pricing-features">
+      <li><span class="check-icon">✓</span> 10 звонков</li>
+      <li><span class="check-icon">✓</span> Детальный отчёт</li>
+      <li><span class="check-icon">✓</span> Рейтинг операторов</li>
+      <li><span class="check-icon">✓</span> Рекомендации</li>
+    </ul>
+    <button class="btn btn-primary">Заказать</button>
+  </div>
+</div>
+```
+
+```css
+.pricing-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 20px;
+  padding: 48px;
+  text-align: center;
+}
+
+.pricing-card.featured {
+  border-color: var(--color-accent);
+}
+
+.pricing-features {
+  list-style: none;
+  margin: 32px 0;
+  text-align: left;
+}
+
+.pricing-features li {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  color: var(--color-text-secondary);
+}
+
+.pricing-features li.disabled {
+  opacity: 0.4;
+}
+
+.btn-primary {
+  display: block;
+  width: 100%;
+  padding: 14px;
+  background: var(--gradient-accent);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.btn-secondary {
+  display: block;
+  width: 100%;
+  padding: 14px;
+  background: transparent;
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+```
+
+## Anti-patterns
+
+| ❌ Плохо | ✅ Хорошо |
+|----------|-----------|
+| Без визуального разделения строк | `border-bottom: 1px solid` |
+| Маленькие чекмарки | `32x32px` круги |
+| Без hover | `translateX(8px)` на hover |
+| Без контраста | `✓` зелёный, `×` красный |
+| Без `flex-shrink: 0` | Иконка не сжимается |
+
+## CV Service Validation
+
+```bash
+# Проверить visual hierarchy feature list
+curl -s -X POST http://localhost:8001/design/analyze-dom \
+  -H "Content-Type: application/json" \
+  -d '{"html": "..."}' | python3 -c "
+import sys, json
+d = json.load(sys.stdin)
+ux = d['analyzers'].get('ux_heuristics', {})
+print(f\"UX Heuristics: {ux.get('score', 'N/A')}/10\")
+print(f\"  Clarity: {ux.get('clarity', 'N/A')}\")
+"
+```
+
+Ожидается: `ux_heuristics` > 7 (feature list — один из самых понятных паттернов).
@@ -0,0 +1,32 @@
+---
+name: layout/full-bleed-content
+title: Full-Bleed Content Sections
+description: Content that breaks container boundaries for visual impact.
+tags: [layout, full-bleed, breaking-boundaries, premium]
+source: stripe.com, apple.com, brad.co, amppz.com
+---
+
+# Full-Bleed Content
+
+## CSS
+
+```css
+.full-bleed-section {
+  width: 100vw;
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+```
+
+## Anti-patterns
+
+| ❌ Плохо | ✅ Хорошо |
+|----------|-----------|
+| Без `overflow-x: hidden` на body | Всегда overflow hidden |
+| Без `transform` | `translateX(-50%)` |
+| Без container | `max-width: 1200px` |
@@ -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)` |
@@ -0,0 +1,784 @@
+---
+name: layout/landing-patterns
+title: Landing Page Patterns
+description: 25 conversion-optimized landing page patterns with section order, CTA strategy, and conversion tips.
+tags: [landing, cta, conversion, layout, landing-page-patterns]
+source: ui-ux-pro-max-skill
+---
+
+# Landing Page Patterns
+
+25 паттернов лендингов, оптимизированных для конверсии. Каждый включает: порядок секций, CTA-стратегию, цветовую стратегию и рекомендации.
+
+---
+
+## 1. Hero + Features + CTA
+
+**Keywords:** hero, features, CTA  
+**CTA:** Hero (sticky) + Bottom  
+**Конверсия:** Высокая — глубокая размещение CTA
+
+### Section Order
+1. Hero с headline/image
+2. Value proposition
+3. Key features (3-5)
+4. CTA section
+5. Footer
+
+### Implementation
+
+```html
+<!-- Hero -->
+<section class="relative py-20">
+  <h1 class="text-5xl font-bold text-center">Headline</h1>
+  <p class="text-xl text-gray-600 mt-4">Value prop</p>
+  <a href="#cta" class="mt-8 inline-block bg-blue-600 text-white px-8 py-4 rounded-lg text-lg font-semibold">
+    Get Started
+  </a>
+</section>
+
+<!-- Features -->
+<section class="bg-[#FAFAFA] py-16">
+  <div class="grid grid-cols-3 gap-8">
+    <div class="p-6">
+      <h3 class="text-xl font-bold mb-2">Feature 1</h3>
+      <p>Description</p>
+    </div>
+    <!-- repeat -->
+  </div>
+</section>
+
+<!-- CTA -->
+<section id="cta" class="py-16 text-center">
+  <a class="bg-orange-600 text-white px-8 py-4 rounded-lg text-lg font-semibold">
+    Start Now
+  </a>
+</section>
+```
+
+### Effects
+- Hero parallax
+- Feature card hover lift
+- CTA glow on hover
+
+### Conversion Tips
+- Используй контрастный цвет для CTA (минимум 7:1 contrast ratio)
+- Sticky navbar CTA
+
+---
+
+## 2. Hero + Testimonials + CTA
+
+**Keywords:** hero, testimonials, social-proof  
+**CTA:** Hero (sticky) + Post-testimonials  
+**Конверсия:** Высокая — social proof перед CTA
+
+### Section Order
+1. Hero
+2. Problem statement
+3. Solution overview
+4. Testimonials carousel
+5. CTA
+
+### Implementation
+
+```html
+<section class="py-20 bg-[#F5F5F5]">
+  <h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
+  <div class="grid grid-cols-3 gap-8">
+    <div class="p-6 bg-white rounded-lg shadow">
+      <p class="italic text-gray-600 mb-4">"Best product I've ever used!"</p>
+      <div class="flex items-center gap-3">
+        <img src="avatar.jpg" class="w-12 h-12 rounded-full" alt="" />
+        <div>
+          <p class="font-semibold">Jane Doe</p>
+          <p class="text-sm text-gray-500">CEO, Company</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+```
+
+### Conversion Tips
+- Используй 3-5 testimonials
+- Включи photo + name + role
+- CTA после social proof
+
+---
+
+## 3. Product Demo + Features
+
+**Keywords:** demo, product-demo, interactive  
+**CTA:** Video center + CTA right/bottom  
+**Конверсия:** Высокая — интерактивный demo
+
+### Section Order
+1. Hero
+2. Product video/mockup (center)
+3. Feature breakdown
+4. Comparison (optional)
+5. CTA
+
+### Conversion Tips
+- Встроенный демо-продукт повышает вовлечённость
+- Используй интерактивный mockup если возможно
+- Auto-play video muted
+
+---
+
+## 4. Minimal Single Column
+
+**Keywords:** minimal, simple, direct  
+**CTA:** Center, large CTA button  
+**Конверсия:** Высокая — single CTA focus
+
+### Section Order
+1. Hero headline
+2. Short description
+3. Benefit bullets (3 max)
+4. CTA
+5. Footer
+
+### Implementation
+
+```html
+<section class="min-h-screen flex flex-col items-center justify-center px-4">
+  <h1 class="text-6xl font-bold text-center mb-6">Your Headline</h1>
+  <p class="text-xl text-gray-600 mb-8 text-center max-w-2xl">
+    One clear value proposition.
+  </p>
+  <ul class="space-y-2 mb-8">
+    <li>✓ Benefit 1</li>
+    <li>✓ Benefit 2</li>
+    <li>✓ Benefit 3</li>
+  </ul>
+  <a href="#cta" class="bg-blue-600 text-white px-10 py-5 rounded-lg text-xl font-semibold">
+    Get Started
+  </a>
+</section>
+```
+
+### Conversion Tips
+- Single CTA focus
+- Large typography
+- Lots of whitespace
+- No nav clutter
+- Mobile-first
+
+---
+
+## 5. Funnel (3-Step Conversion)
+
+**Keywords:** funnel, conversion, steps  
+**CTA:** Each step: mini-CTA, Final: main CTA  
+**Конверсия:** Высокая — progressive disclosure
+
+### Section Order
+1. Hero
+2. Step 1 (problem)
+3. Step 2 (solution)
+4. Step 3 (action)
+5. CTA progression
+
+### Implementation
+
+```html
+<!-- Step 1: Problem -->
+<section class="py-16 bg-red-50">
+  <h2 class="text-2xl font-bold mb-4">Is this you?</h2>
+  <p class="text-gray-600 mb-6">Struggling with X, Y, Z?</p>
+  <button class="bg-white border border-red-500 text-red-500 px-6 py-3 rounded">
+    Yes, this is me
+  </button>
+</section>
+
+<!-- Step 2: Solution -->
+<section class="py-16 bg-orange-50">
+  <h2 class="text-2xl font-bold mb-4">Here's the solution</h2>
+  <p class="text-gray-600 mb-6">Our product solves all three.</p>
+  <button class="bg-white border border-orange-500 text-orange-500 px-6 py-3 rounded">
+    Learn More
+  </button>
+</section>
+
+<!-- Step 3: Action -->
+<section class="py-16 bg-green-50">
+  <h2 class="text-2xl font-bold mb-4">Ready to get started?</h2>
+  <button class="bg-green-500 text-white px-8 py-4 rounded-lg text-lg">
+    Get Started Now
+  </button>
+</section>
+```
+
+### Conversion Tips
+- Progressive disclosure
+- Show only essential info per step
+- Use progress indicators
+- Multiple CTAs
+
+---
+
+## 6. Comparison Table + CTA
+
+**Keywords:** comparison, table, versus  
+**CTA:** Table: Right column, CTA: Below table  
+**Конверсия:** 35% higher vs competitor page
+
+### Section Order
+1. Hero
+2. Problem intro
+3. Comparison table (product vs competitors)
+4. Pricing (optional)
+5. CTA
+
+### Implementation
+
+```html
+<section class="py-16">
+  <table class="w-full">
+    <thead>
+      <tr class="border-b">
+        <th class="text-left py-4">Feature</th>
+        <th class="text-center py-4 bg-yellow-50">Us</th>
+        <th class="text-center py-4">Competitor</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="border-b">
+        <td class="py-3">Feature 1</td>
+        <td class="text-center bg-yellow-50">✅</td>
+        <td class="text-center">❌</td>
+      </tr>
+      <tr class="border-b bg-yellow-50">
+        <td class="py-3">Feature 2</td>
+        <td class="text-center bg-yellow-50">✅</td>
+        <td class="text-center">⚠️</td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="text-center mt-8">
+    <a class="bg-blue-600 text-white px-8 py-4 rounded-lg">Start Free Trial</a>
+  </div>
+</section>
+```
+
+### Conversion Tips
+- Highlight your product row
+- Include 'free trial' in pricing row
+- Be factual
+
+---
+
+## 7. Lead Magnet + Form
+
+**Keywords:** lead, form, signup, capture  
+**CTA:** Form CTA: Submit button  
+**Конверсия:** Высокая — form fields ≤ 3
+
+### Section Order
+1. Hero (benefit headline)
+2. Lead magnet preview
+3. Form (minimal fields)
+4. CTA submit
+
+### Implementation
+
+```html
+<section class="py-16 bg-[#FAFAFA]">
+  <div class="grid grid-cols-2 gap-12 items-center">
+    <div>
+      <h2 class="text-3xl font-bold mb-4">Get Our Free Guide</h2>
+      <p class="text-gray-600">Learn X in 10 minutes</p>
+      <img src="ebook-cover.png" class="mt-6 rounded-lg shadow-lg" alt="" />
+    </div>
+    <form class="bg-white p-8 rounded-lg shadow">
+      <label class="block mb-2 font-medium">Email</label>
+      <input type="email" class="w-full border rounded px-3 py-2 mb-4" />
+      <input type="text" placeholder="Name" class="w-full border rounded px-3 py-2 mb-4" />
+      <button class="w-full bg-blue-600 text-white py-3 rounded font-semibold">
+        Download Free Guide
+      </button>
+      <p class="text-sm text-gray-500 mt-2">We'll never spam. Unsubscribe anytime.</p>
+    </form>
+  </div>
+</section>
+```
+
+### Conversion Tips
+- Form fields ≤ 3 for best conversion
+- Offer valuable lead magnet preview
+- Show form submission progress
+
+---
+
+## 8. Pricing Page + CTA
+
+**Keywords:** pricing, plans, tiers  
+**CTA:** Each card: CTA, Sticky CTA in nav  
+**Конверсия:** Высокая — mid-tier recommendation
+
+### Section Order
+1. Hero (pricing headline)
+2. Price comparison cards
+3. Feature comparison table
+4. FAQ section
+5. Final CTA
+
+### Implementation
+
+```html
+<section class="py-16">
+  <div class="grid grid-cols-3 gap-8">
+    <!-- Free -->
+    <div class="p-6 border rounded-lg">
+      <h3 class="text-xl font-bold mb-2">Free</h3>
+      <p class="text-4xl font-bold mb-6">$0</p>
+      <ul class="space-y-2 mb-6">
+        <li>✓ Feature 1</li>
+        <li>✓ Feature 2</li>
+      </ul>
+      <button class="w-full py-3 border rounded text-gray-600">Start Free</button>
+    </div>
+
+    <!-- Pro (Highlighted) -->
+    <div class="p-6 border-2 border-blue-500 rounded-lg relative">
+      <span class="absolute -top-3 right-4 bg-blue-500 text-white px-3 py-1 rounded text-sm">Popular</span>
+      <h3 class="text-xl font-bold mb-2">Pro</h3>
+      <p class="text-4xl font-bold mb-6">$29<span class="text-base font-normal text-gray-500">/mo</span></p>
+      <ul class="space-y-2 mb-6">
+        <li>✓ Feature 1</li>
+        <li>✓ Feature 2</li>
+        <li>✓ Feature 3</li>
+      </ul>
+      <button class="w-full bg-blue-500 text-white py-3 rounded font-semibold">Get Pro</button>
+    </div>
+
+    <!-- Enterprise -->
+    <div class="p-6 bg-gray-900 text-white rounded-lg">
+      <h3 class="text-xl font-bold mb-2">Enterprise</h3>
+      <p class="text-4xl font-bold mb-6">$99</p>
+      <ul class="space-y-2 mb-6">
+        <li>✓ Everything in Pro</li>
+        <li>✓ Dedicated support</li>
+      </ul>
+      <button class="w-full bg-white text-gray-900 py-3 rounded font-semibold">Contact Sales</button>
+    </div>
+  </div>
+</section>
+```
+
+### Conversion Tips
+- Recommend starter plan (pre-select/highlight)
+- Show annual discount (20-30%)
+- Use FAQs to address concerns
+- Popular plan highlighted
+
+---
+
+## 9. Video-First Hero
+
+**Keywords:** video, hero, media  
+**CTA:** Overlay on video (center/bottom)  
+**Конверсия:** 86% higher engagement
+
+### Implementation
+
+```html
+<section class="relative h-screen flex items-center justify-center overflow-hidden">
+  <video autoplay muted loop playsinline class="absolute inset-0 w-full h-full object-cover">
+    <source src="hero.mp4" type="video/mp4" />
+  </video>
+  <div class="absolute inset-0 bg-black bg-opacity-60"></div>
+  <div class="relative z-10 text-center text-white px-4">
+    <h1 class="text-5xl font-bold mb-4">Your Headline</h1>
+    <p class="text-xl mb-8">Value proposition with video proof</p>
+    <a class="bg-orange-500 text-white px-8 py-4 rounded-lg text-lg font-semibold">
+      Get Started
+    </a>
+  </div>
+</section>
+```
+
+### Conversion Tips
+- Add captions for accessibility
+- Compress video for performance
+- Auto-play muted
+
+---
+
+## 10. Scroll-Triggered Storytelling
+
+**Keywords:** storytelling, scroll, narrative  
+**CTA:** End of each chapter (mini) + Final climax CTA  
+**Конверсия:** Narrative increases time-on-page 3x
+
+### Section Order
+1. Intro hook
+2. Chapter 1 (problem)
+3. Chapter 2 (journey)
+4. Chapter 3 (solution)
+5. Climax CTA
+
+### Implementation
+
+```html
+<section class="scroll-smooth">
+  <!-- Chapter 1 -->
+  <section class="min-h-screen flex flex-col items-center justify-center px-4">
+    <h2 class="text-4xl font-bold mb-4">The Problem</h2>
+    <p class="text-xl text-gray-600 max-w-2xl">Describe the pain point.</p>
+    <div class="mt-8"><a class="text-blue-600 underline">Continue reading →</a></div>
+  </section>
+
+  <!-- Chapter 2 -->
+  <section class="min-h-screen flex flex-col items-center justify-center px-4 bg-gray-50">
+    <h2 class="text-4xl font-bold mb-4">The Journey</h2>
+    <p class="text-xl text-gray-600 max-w-2xl">Show how it works.</p>
+  </section>
+
+  <!-- Chapter 3 -->
+  <section class="min-h-screen flex flex-col items-center justify-center px-4">
+    <h2 class="text-4xl font-bold mb-4">The Solution</h2>
+    <a class="mt-8 bg-blue-600 text-white px-8 py-4 rounded-lg text-xl font-semibold">
+      Get Started Now
+    </a>
+  </section>
+</section>
+```
+
+### Conversion Tips
+- Use progress indicator
+- Mobile: simplify animations
+- ScrollTrigger animations
+
+---
+
+## 11. AI Personalization Landing
+
+**Keywords:** ai, personalization, smart  
+**CTA:** Context-aware placement based on user segment  
+**Конверсия:** 20%+ conversion with personalization
+
+### Implementation
+
+```html
+<section class="py-20">
+  <div id="personalized-hero">
+    <h1 id="personalized-headline">Hi {firstName}! Ready to {goal}?</h1>
+    <p id="personalized-sub">Based on your {industry}, here's what works:</p>
+  </div>
+  <div id="personalized-features" class="grid grid-cols-3 gap-8 mt-12">
+    <!-- Features relevant to segment -->
+  </div>
+</section>
+```
+
+### Conversion Tips
+- Requires analytics integration
+- Fallback for new users
+- A/B test color variations per segment
+
+---
+
+## 12. Waitlist / Coming Soon
+
+**Keywords:** waitlist, coming-soon, launch  
+**CTA:** Email form prominent (above fold) + Sticky form on scroll  
+**Конверсия:** Высокая — scarcity + exclusivity
+
+### Section Order
+1. Hero with countdown
+2. Product teaser/preview
+3. Email capture form
+4. Social proof (waitlist count)
+
+### Implementation
+
+```html
+<section class="min-h-screen flex flex-col items-center justify-center bg-gray-900 text-white">
+  <h1 class="text-5xl font-bold mb-4">Something Amazing Is Coming</h1>
+  <div id="countdown" class="text-3xl font-mono mb-8">00:00:00:00</div>
+  <form class="flex gap-4 mb-8">
+    <input type="email" placeholder="your@email.com" class="px-4 py-3 rounded text-gray-900" />
+    <button class="bg-blue-500 text-white px-6 py-3 rounded font-semibold">Join Waitlist</button>
+  </form>
+  <p class="text-gray-400">Join <strong>12,847</strong> others on the waitlist</p>
+</section>
+```
+
+### Conversion Tips
+- Show waitlist count
+- Early access benefits
+- Referral program
+- Countdown timer animation
+
+---
+
+## 13. App Store Style Landing
+
+**Keywords:** app, mobile, download  
+**CTA:** Download buttons prominent (App Store + Play Store)  
+**Конверсия:** Высокая — platform-specific CTAs
+
+### Section Order
+1. Hero with device mockup
+2. Screenshots carousel
+3. Features with icons
+4. Reviews/ratings
+5. Download CTAs
+
+### Conversion Tips
+- Show real screenshots
+- Include ratings (4.5+ stars)
+- QR code for mobile
+- Platform-specific CTAs
+
+---
+
+## 14. FAQ / Documentation Landing
+
+**Keywords:** faq, documentation, support  
+**CTA:** Search bar prominent + Contact CTA
+
+### Conversion Tips
+- Reduce support tickets
+- Track search analytics
+- Show related articles
+- Contact escalation path
+
+---
+
+## 15. Immersive / Interactive Experience
+
+**Keywords:** immersive, interactive, 3d  
+**CTA:** After interaction complete + Skip option
+
+### Conversion Tips
+- 40% higher engagement
+- Performance trade-off
+- Provide skip option
+- Mobile fallback essential
+
+---
+
+## 16. Event / Conference Landing
+
+**Keywords:** event, conference, meetup  
+**CTA:** Register CTA sticky + After speakers  
+**Конверсия:** Высокая — early bird pricing
+
+### Section Order
+1. Hero (date/location/countdown)
+2. Speakers grid
+3. Agenda/schedule
+4. Sponsors
+5. Register CTA
+
+### Conversion Tips
+- Early bird pricing with deadline
+- Social proof (past attendees)
+- Speaker credibility
+- Multi-ticket discounts
+
+---
+
+## 17. Before-After Transformation
+
+**Keywords:** before-after, transformation, results  
+**CTA:** After transformation reveal + Bottom  
+**Конверсия:** 45% higher conversion
+
+### Implementation
+
+```html
+<section class="py-16">
+  <h2 class="text-3xl font-bold text-center mb-8">See the Difference</h2>
+  <div class="relative h-96">
+    <div class="absolute inset-0 bg-gray-300 flex items-center justify-center">BEFORE</div>
+    <div class="absolute inset-0 bg-green-100 flex items-center justify-center"
+         style="clip-path: inset(0 0 0 50%);">AFTER</div>
+    <div class="absolute inset-0 flex items-center justify-center">
+      <div class="w-2 h-full bg-gray-500 cursor-col-resize"></div>
+    </div>
+  </div>
+</section>
+```
+
+### Conversion Tips
+- Visual proof of value
+- Real results with specific metrics
+- Guarantee offer
+
+---
+
+## 18. Marketplace / Directory
+
+**Keywords:** marketplace, directory, search  
+**CTA:** Hero Search Bar + Navbar 'List your item'
+
+### Conversion Tips
+- Search bar is the CTA
+- Reduce friction to search
+- Popular searches suggestions
+
+---
+
+## 19. Newsletter / Content First
+
+**Keywords:** newsletter, content, writer  
+**CTA:** Hero inline form + Sticky header form
+
+### Implementation
+
+```html
+<section class="py-20 bg-amber-50 text-center">
+  <h1 class="text-4xl font-bold mb-4">Get Weekly Insights</h1>
+  <form class="max-w-md mx-auto flex gap-4">
+    <input type="email" placeholder="your@email.com" class="flex-1 px-4 py-3 rounded" />
+    <button class="bg-amber-600 text-white px-6 py-3 rounded font-semibold">Subscribe</button>
+  </form>
+  <p class="mt-4 text-gray-600">Join 50,000+ readers</p>
+</section>
+```
+
+### Conversion Tips
+- Single field form (Email only)
+- Show 'Join X, 000 readers'
+- Read sample link
+
+---
+
+## 20. Webinar Registration
+
+**Keywords:** webinar, registration, training  
+**CTA:** Hero (Right side form) + Bottom anchor
+
+### Conversion Tips
+- Limited seats logic
+- 'Live' indicator
+- Auto-fill timezone
+
+---
+
+## 21. Enterprise Gateway
+
+**Keywords:** enterprise, corporate, solutions  
+**CTA:** Contact Sales (Primary) + Login (Secondary)
+
+### Conversion Tips
+- Path selection (I am a...)
+- Mega menu navigation
+- Trust signals prominent
+
+---
+
+## 22. Portfolio Grid
+
+**Keywords:** portfolio, grid, showcase  
+**CTA:** Project Card Hover + Footer Contact
+
+### Conversion Tips
+- Visuals first
+- Filter by category
+- Fast loading essential
+
+---
+
+## 23. Horizontal Scroll Journey
+
+**Keywords:** horizontal, scroll, journey  
+**CTA:** Floating Sticky CTA or End of Horizontal Track
+
+### Conversion Tips
+- Immersive product discovery
+- High engagement
+- Keep navigation visible
+
+---
+
+## 24. Bento Grid Showcase
+
+**Keywords:** bento, grid, features, apple-style  
+**CTA:** Floating Action Button or Bottom of Grid
+
+### Implementation
+
+```html
+<section class="py-16">
+  <div class="grid grid-cols-4 grid-rows-3 gap-4 h-[600px]">
+    <div class="col-span-2 row-span-2 bg-gray-100 rounded-xl p-8 flex flex-col justify-end">
+      <h3 class="text-2xl font-bold">Main Feature</h3>
+      <p class="text-gray-600">Detailed description</p>
+    </div>
+    <div class="bg-gray-100 rounded-xl p-6 flex items-center justify-center">
+      <!-- Video embed or image -->
+    </div>
+    <div class="bg-gray-100 rounded-xl p-6 flex items-center justify-center">
+      <!-- Stat or icon -->
+    </div>
+    <div class="col-span-2 bg-gray-100 rounded-xl p-6 flex items-center">
+      <!-- Feature list -->
+    </div>
+  </div>
+</section>
+```
+
+### Conversion Tips
+- Scannable value props
+- High information density without clutter
+- Mobile stack
+
+---
+
+## 25. AI-Driven Dynamic Landing
+
+**Keywords:** ai, dynamic, generative  
+**CTA:** Input Field (Hero) + 'Try it' Buttons
+
+### Implementation
+
+```html
+<section class="py-20 bg-gray-900 text-white text-center">
+  <h1 class="text-5xl font-bold mb-4">Generate Anything</h1>
+  <p class="text-xl text-gray-300 mb-8">Describe what you want</p>
+  <div class="max-w-2xl mx-auto flex gap-4 mb-8">
+    <input type="text" placeholder="Describe your idea..."
+           class="flex-1 px-6 py-4 rounded-lg text-gray-900 text-lg" />
+    <button class="bg-blue-500 text-white px-8 py-4 rounded-lg font-semibold">
+      Generate
+    </button>
+  </div>
+  <div class="flex gap-4 justify-center flex-wrap">
+    <span class="px-4 py-2 bg-gray-800 rounded-full text-sm cursor-pointer">Logo design</span>
+    <span class="px-4 py-2 bg-gray-800 rounded-full text-sm cursor-pointer">Code review</span>
+    <span class="px-4 py-2 bg-gray-800 rounded-full text-sm cursor-pointer">Data analysis</span>
+  </div>
+</section>
+```
+
+### Conversion Tips
+- 'Show, don't tell'
+- Low friction start
+- Typing text effects
+
+---
+
+## Quick Reference: CTA Strategy by Pattern
+
+| Pattern | CTA Count | CTA Placements |
+|---------|-----------|----------------|
+| Hero + Features | 2 | Hero (sticky) + Bottom |
+| Hero + Testimonials | 2 | Hero (sticky) + Post-testimonials |
+| Product Demo | 2 | Video center + CTA right/bottom |
+| Minimal Single Column | 1 | Center, large button |
+| Funnel (3-Step) | 4 | Each step mini-CTA + Final |
+| Comparison Table | 2 | Table right + Below table |
+| Lead Magnet | 1 | Submit button |
+| Pricing Page | 4 | Each card + Sticky nav + Bottom |
+| Video-First | 2 | Overlay on video + Bottom |
+| Waitlist/Coming Soon | 2 | Above fold + Sticky scroll |
+| Newsletter | 2 | Hero inline + Sticky header |
+| AI-Driven | 2 | Input Field + 'Try it' |
+| App Store | 3 | Throughout (App + Play) |
+| Event | 3 | Sticky + After speakers + Bottom |
@@ -0,0 +1,35 @@
+---
+name: layout/overlapping-layers
+title: Overlapping Elements
+description: Elements that overlap to create depth and visual interest.
+tags: [layout, overlapping, depth, premium]
+source: amppz.com, brad.co, stripe.com, linear.app
+---
+
+# Overlapping Elements
+
+## CSS
+
+```css
+.overlapping-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+.image-card {
+  grid-column: span 6;
+  z-index: 1;
+}
+.text-card {
+  grid-column: 7 / span 6;
+  margin-top: -60px;
+  z-index: 2;
+}
+```
+
+## Anti-patterns
+
+| ❌ Плохо | ✅ Хорошо |
+|----------|-----------|
+| Без `z-index` | `z-index: 1/2` |
+| `margin-top: -200px` | `margin-top: -30px` |
+| Без mobile fallback | `@media (max-width: 768px)` |
@@ -0,0 +1,364 @@
+---
+name: layout/sticky-feature
+title: Sticky Feature Section (Scroll Reveal)
+description: Text scrolls while image/visual stays pinned. Classic premium pattern from Stripe, Linear, Apple.
+tags: [layout, sticky, scroll, parallax, reveal, premium]
+source: stripe.com, linear.app, apple.com, raycast.com
+---
+
+# Sticky Feature Section
+
+## Что это
+Секция где текст скроллится, а визуальный элемент (скриншот, видео, анимация) остаётся прилипшим (sticky). Классический паттерн Stripe.com и Apple.
+
+## Ключевые параметры
+
+| Параметр | Значение |
+|----------|----------|
+| `min-height` | `100vh` |
+| `sticky top` | `0` или `100px` |
+| `padding` | `128px 0` |
+| `gap between text blocks` | `80–120px` |
+| `scroll duration` | `100–200vh` (время просмотра) |
+
+## Pattern 1: Stripe-Style (text left, sticky image right)
+
+```html
+<section class="feature-sticky">
+  <div class="feature-sticky-container">
+    <!-- Sticky visual -->
+    <div class="feature-sticky-visual">
+      <img src="/feature-demo.png" alt="Feature demo" loading="lazy">
+    </div>
+    
+    <!-- Scrolling text -->
+    <div class="feature-sticky-texts">
+      <div class="feature-block">
+        <span class="feature-number">01</span>
+        <h3>Молниеносная скорость</h3>
+        <p>Загрузка страниц менее чем за 100мс. Оптимизированный движок, CDN по всему миру.</p>
+      </div>
+      
+      <div class="feature-block">
+        <span class="feature-number">02</span>
+        <h3>Умная аналитика</h3>
+        <p>AI-анализ данных в реальном времени. Прогнозирование трендов и автоматические отчёты.</p>
+      </div>
+      
+      <div class="feature-block">
+        <span class="feature-number">03</span>
+        <h3>Безопасность данных</h3>
+        <p>Шифрование end-to-end. Соответствие GDPR, PCI DSS, SOC 2 Type II.</p>
+      </div>
+    </div>
+  </div>
+</section>
+```
+
+```css
+.feature-sticky {
+  min-height: 100vh;
+  padding: 128px 0;
+  background: var(--color-bg);
+}
+
+.feature-sticky-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--space-6);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-16);
+  align-items: start;
+}
+
+/* Sticky visual */
+.feature-sticky-visual {
+  position: sticky;
+  top: 100px;
+  height: 500px;
+  border-radius: 20px;
+  overflow: hidden;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+}
+
+.feature-sticky-visual img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Scrolling text blocks */
+.feature-block {
+  padding: 64px 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.feature-block:first-child {
+  padding-top: 0;
+}
+
+.feature-block:last-child {
+  border-bottom: none;
+}
+
+.feature-number {
+  display: block;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--color-accent);
+  letter-spacing: 0.1em;
+  margin-bottom: 16px;
+}
+
+.feature-block h3 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.feature-block p {
+  font-size: 1.125rem;
+  color: var(--color-text-secondary);
+  line-height: 1.7;
+  max-width: 400px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .feature-sticky-container {
+    grid-template-columns: 1fr;
+  }
+  
+  .feature-sticky-visual {
+    position: relative;
+    top: 0;
+    height: 300px;
+    margin-bottom: 48px;
+  }
+}
+```
+
+## Pattern 2: Apple-Style (image center, text fades in)
+
+```html
+<section class="feature-fade">
+  <div class="feature-fade-visual">
+    <img src="/product-shot.png" alt="Product" loading="lazy">
+  </div>
+  <div class="feature-fade-texts">
+    <div class="feature-fade-block" data-target="1">
+      <h3>Тонкий дизайн</h3>
+      <p>Всего 6.1мм толщина.</p>
+    </div>
+    <div class="feature-fade-block" data-target="2">
+      <h3>Мощный чип</h3>
+      <p>A17 Pro — самый быстрый в смартфоне.</p>
+    </div>
+    <div class="feature-fade-block" data-target="3">
+      <h3>Камера 48MP</h3>
+      <p>Детали, которые вы не увидите.</p>
+    </div>
+  </div>
+</section>
+```
+
+```css
+.feature-fade {
+  min-height: 300vh; /* 3 экрана скролла */
+  position: relative;
+}
+
+.feature-fade-visual {
+  position: sticky;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 70vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.feature-fade-visual img {
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+}
+
+.feature-fade-block {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.feature-fade-block.active {
+  opacity: 1;
+}
+
+.feature-fade-block h3 {
+  font-size: 3rem;
+  font-weight: 800;
+  margin-bottom: 16px;
+}
+
+.feature-fade-block p {
+  font-size: 1.25rem;
+  color: var(--color-text-secondary);
+}
+```
+
+```javascript
+// Intersection Observer для fade-эффекта
+const blocks = document.querySelectorAll('.feature-fade-block');
+const visual = document.querySelector('.feature-fade-visual');
+const container = document.querySelector('.feature-fade');
+
+if (blocks.length && container) {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      blocks.forEach(block => block.classList.remove('active'));
+      if (entry.isIntersecting) {
+        entry.target.classList.add('active');
+      }
+    });
+  }, {
+    root: container,
+    rootMargin: '0px',
+    threshold: 0.5
+  });
+  
+  blocks.forEach(block => observer.observe(block));
+}
+```
+
+## Pattern 3: GSAP ScrollTrigger (scroll-based animations)
+
+```javascript
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+// Image zoom on scroll
+gsap.to('.feature-sticky-visual img', {
+  scale: 1.1,
+  scrollTrigger: {
+    trigger: '.feature-sticky',
+    start: 'top bottom',
+    end: 'bottom top',
+    scrub: 1
+  }
+});
+
+// Text color change on scroll
+gsap.utils.toArray('.feature-block').forEach((block, i) => {
+  gsap.from(block.querySelector('h3'), {
+    opacity: 0,
+    y: 40,
+    duration: 0.8,
+    scrollTrigger: {
+      trigger: block,
+      start: 'top 80%',
+      toggleActions: 'play none none reverse'
+    }
+  });
+});
+```
+
+## Pattern 4: Horizontal Scroll Cards
+
+```html
+<section class="horizontal-scroll">
+  <div class="horizontal-scroll-track">
+    <div class="scroll-card">
+      <h3>Feature 1</h3>
+      <p>Description</p>
+    </div>
+    <div class="scroll-card">
+      <h3>Feature 2</h3>
+      <p>Description</p>
+    </div>
+    <div class="scroll-card">
+      <h3>Feature 3</h3>
+      <p>Description</p>
+    </div>
+  </div>
+</section>
+```
+
+```css
+.horizontal-scroll {
+  overflow: hidden;
+  padding: 128px 0;
+}
+
+.horizontal-scroll-track {
+  display: flex;
+  gap: 24px;
+  padding: 0 24px;
+  width: max-content;
+}
+
+.scroll-card {
+  min-width: 400px;
+  padding: 48px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 20px;
+}
+
+.scroll-card h3 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+```
+
+## Anti-patterns
+
+| ❌ Плохо | ✅ Хорошо |
+|----------|-----------|
+| `top: 0` — прилипает к самому верху | `top: 100px` — отступ от навигации |
+| `min-height: 200vh` — слишком длинно | `min-height: 100–200vh` |
+| Без `position: sticky` fallback | `position: relative` на мобильных |
+| Text без `max-width` | `max-width: 400px` для читаемости |
+| Нет scroll-анимации | GSAP ScrollTrigger или CSS scrub |
+
+## Mobile Considerations
+
+```css
+@media (max-width: 768px) {
+  /* Sticky не работает так же на мобильных */
+  .feature-sticky-visual {
+    position: relative;
+    top: 0;
+    height: 300px;
+  }
+  
+  /* Уменьшаем секцию */
+  .feature-sticky {
+    padding: 64px 0;
+  }
+}
+```
+
+## CV Service Validation
+
+```bash
+# Проверить UX heuristics sticky секции
+curl -s -X POST http://localhost:8001/design/analyze-dom \
+  -H "Content-Type: application/json" \
+  -d '{"html": "..."}' | python3 -c "
+import sys, json
+d = json.load(sys.stdin)
+ux = d['analyzers'].get('ux_heuristics', {})
+print(f\"UX Heuristics: {ux.get('score', 'N/A')}/10\")
+"
+```
+
+Ожидается: `ux_heuristics` > 6.