wow-design-wiki/layout/landing-patterns.md

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