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

name, title, description, tags, source

name	title	description	tags	source
layout/landing-patterns	Landing Page Patterns	25 conversion-optimized landing page patterns with section order, CTA strategy, and conversion tips.	landing cta conversion layout landing-page-patterns	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

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

<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

<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

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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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