neo/wow-design-wiki

0 Fork 0

Files

T

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

2026-06-20 17:06:07 +05:00

21 KiB

Raw Permalink Blame History

name, title, description, tags, source

name

title

description

Landing Page Patterns

25 паттернов лендингов, оптимизированных для конверсии. Каждый включает: порядок секций, CTA-стратегию, цветовую стратегию и рекомендации.

1. Hero + Features + CTA

Keywords: hero, features, CTA
CTA: Hero (sticky) + Bottom
Конверсия: Высокая — глубокая размещение CTA

Section Order

Hero с headline/image
Value proposition
Key features (3-5)
CTA section
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

Hero
Problem statement
Solution overview
Testimonials carousel
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

Hero
Product video/mockup (center)
Feature breakdown
Comparison (optional)
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

Hero headline
Short description
Benefit bullets (3 max)
CTA
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

Hero
Step 1 (problem)
Step 2 (solution)
Step 3 (action)
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

Hero
Problem intro
Comparison table (product vs competitors)
Pricing (optional)
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

Hero (benefit headline)
Lead magnet preview
Form (minimal fields)
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

Hero (pricing headline)
Price comparison cards
Feature comparison table
FAQ section
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

Intro hook
Chapter 1 (problem)
Chapter 2 (journey)
Chapter 3 (solution)
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

Hero with countdown
Product teaser/preview
Email capture form
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

Hero with device mockup
Screenshots carousel
Features with icons
Reviews/ratings
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

Hero (date/location/countdown)
Speakers grid
Agenda/schedule
Sponsors
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

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

21 KiB Raw Permalink Blame History Unescape Escape

Landing Page Patterns

1. Hero + Features + CTA

Section Order

Implementation

Effects

Conversion Tips

2. Hero + Testimonials + CTA

Section Order

Implementation

Conversion Tips

3. Product Demo + Features

Section Order

Conversion Tips

4. Minimal Single Column

Section Order

Implementation

Conversion Tips

5. Funnel (3-Step Conversion)

Section Order

Implementation

Conversion Tips

6. Comparison Table + CTA

Section Order

Implementation

Conversion Tips

7. Lead Magnet + Form

Section Order

Implementation

Conversion Tips

8. Pricing Page + CTA

Section Order

Implementation

Conversion Tips

9. Video-First Hero

Implementation

Conversion Tips

10. Scroll-Triggered Storytelling

Section Order

Implementation

Conversion Tips

11. AI Personalization Landing

Implementation

Conversion Tips

12. Waitlist / Coming Soon

Section Order

Implementation

Conversion Tips

13. App Store Style Landing

Section Order

Conversion Tips

14. FAQ / Documentation Landing

Conversion Tips

15. Immersive / Interactive Experience

Conversion Tips

16. Event / Conference Landing

Section Order

Conversion Tips

17. Before-After Transformation

Implementation

Conversion Tips

18. Marketplace / Directory

Conversion Tips

19. Newsletter / Content First

Implementation

Conversion Tips

20. Webinar Registration

Conversion Tips

21. Enterprise Gateway

Conversion Tips

22. Portfolio Grid

Conversion Tips

23. Horizontal Scroll Journey

Conversion Tips

24. Bento Grid Showcase

Implementation

Conversion Tips

25. AI-Driven Dynamic Landing

Implementation

Conversion Tips

21 KiB

Raw Permalink Blame History