Initial commit: 79+ design patterns, LLM prompts, and assets
This commit is contained in:
Neo committed
commit
2b42a76d6d
112 files changed
+13652
No files matched your search
@@ -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 |
|
||||
Reference in new issue
Block a user