| name | landing-page-design |
| description | High-converting landing page design with proven section frameworks and conversion patterns. Trigger: user asks to "build a landing page", "create a homepage", "design a marketing page", "make a product page", "build a SaaS landing page", "create a signup page", or any marketing/conversion-focused web page.
|
| license | MIT |
Landing Page Design
Pre-Flight: Check Design Context
Before generating landing page code:
- Use
get_design_context to check for existing brand colors, fonts, or component libraries.
- If a Figma URL is provided, pull screenshots and metadata to match the design.
- Ask or infer: What is the product? Who is the audience? What is the single desired action?
1. Section Framework
Every high-converting landing page follows this flow. You can reorder or omit sections, but this is the proven sequence:
1. Hero — Value prop + primary CTA (above the fold)
2. Social Proof — Logos, stats, or trust badges
3. Features — What it does (benefits, not features)
4. How It Works — 3-step simplicity
5. Testimonials — Real humans saying real things
6. Pricing — Clear tiers with obvious recommendation
7. FAQ — Overcome objections
8. Final CTA — Repeat the primary action
9. Footer — Links, legal, secondary nav
Spacing Between Sections
- Use
py-20 md:py-28 lg:py-32 for major sections.
- Alternate between white and subtle gray (
bg-gray-50) backgrounds.
- Use a
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 container for all content.
2. Hero Patterns
Pattern A: Centered Hero (Best for SaaS)
<section class="relative overflow-hidden bg-white pt-24 pb-20 sm:pt-32 sm:pb-28">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
<div class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-3 py-1 text-sm
font-medium text-indigo-700 ring-1 ring-indigo-600/10 mb-8">
<span class="h-1.5 w-1.5 rounded-full bg-indigo-600"></span>
Now in public beta
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-gray-950
max-w-4xl mx-auto leading-[1.1]">
The faster way to build
<span class="text-indigo-600">beautiful products</span>
</h1>
<p class="mt-6 text-lg sm:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
Ship production-ready interfaces in minutes. Stop fighting CSS and start
delighting your users.
</p>
<div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#" class="w-full sm:w-auto bg-indigo-600 text-white px-8 py-3.5 rounded-xl
font-semibold text-lg hover:bg-indigo-500 transition-colors shadow-lg
shadow-indigo-600/25">
Start free trial
</a>
<a href="#" class="w-full sm:w-auto text-gray-700 px-8 py-3.5 rounded-xl font-semibold
text-lg hover:bg-gray-100 transition-colors flex items-center justify-center gap-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"></svg>
Watch demo
</a>
</div>
<p class="mt-8 text-sm text-gray-400">No credit card required. Free for up to 3 projects.</p>
</div>
</section>
Pattern B: Split Hero (Text Left, Visual Right)
<section class="relative overflow-hidden bg-white">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
<div>
<h1 class="text-4xl lg:text-5xl font-extrabold tracking-tight text-gray-950 leading-[1.1]">
Analytics that actually make sense
</h1>
<p class="mt-6 text-lg text-gray-600 leading-relaxed">
Real-time insights without the learning curve. Understand your users
in minutes, not months.
</p>
<div class="mt-8 flex flex-wrap gap-4">
<a href="#" class="bg-gray-950 text-white px-6 py-3 rounded-lg font-semibold
hover:bg-gray-800 transition-colors">Get started</a>
<a href="#" class="text-gray-700 px-6 py-3 rounded-lg font-semibold
hover:bg-gray-100 transition-colors">Learn more</a>
</div>
</div>
<div class="relative">
<div class="rounded-2xl border border-gray-200 shadow-2xl overflow-hidden">
<img src="/dashboard-preview.png" alt="Dashboard preview"
class="w-full" loading="lazy" />
</div>
</div>
</div>
</div>
</section>
Pattern C: Video Background Hero
- Use a short (5–15s) looping muted video.
- Dark overlay at 50–60% opacity for text readability.
- Preload poster image for LCP performance.
Pattern D: Interactive / Animated Hero
- Subtle particle effects, 3D objects, or interactive canvas.
- Keep CPU usage low. Pause animation when off-screen.
- Always have a static fallback for reduced-motion preference.
3. Social Proof Section
Logo Bar
<section class="bg-gray-50 py-12 border-y border-gray-100">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<p class="text-center text-sm font-medium text-gray-500 mb-8">
Trusted by 2,000+ teams worldwide
</p>
<div class="flex flex-wrap items-center justify-center gap-x-12 gap-y-6
grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all">
<img src="/logos/stripe.svg" alt="Stripe" class="h-7" />
<img src="/logos/vercel.svg" alt="Vercel" class="h-7" />
</div>
</div>
</section>
Stats Counters
<div class="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center">
<div>
<div class="text-4xl font-extrabold text-gray-950">10K+</div>
<div class="mt-1 text-sm text-gray-500">Active users</div>
</div>
<div>
<div class="text-4xl font-extrabold text-gray-950">99.9%</div>
<div class="mt-1 text-sm text-gray-500">Uptime SLA</div>
</div>
</div>
4. Feature Sections
Bento Grid (Modern, Visual)
<section class="py-20 bg-white">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold text-gray-950">Everything you need</h2>
<p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
A complete toolkit for modern teams.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="md:col-span-2 bg-gradient-to-br from-indigo-500 to-purple-600
rounded-2xl p-8 text-white min-h-[300px] flex flex-col justify-end">
<h3 class="text-2xl font-bold">AI-powered insights</h3>
<p class="mt-2 text-indigo-100">Automatically surface what matters most.</p>
</div>
<div class="bg-gray-50 rounded-2xl p-8 min-h-[300px] flex flex-col justify-end">
<div class="w-10 h-10 rounded-lg bg-indigo-100 text-indigo-600 flex items-center
justify-center mb-4"></div>
<h3 class="text-lg font-bold text-gray-950">Real-time sync</h3>
<p class="mt-2 text-gray-600">Changes appear instantly across all devices.</p>
</div>
</div>
</div>
</section>
Alternating Rows (Classic, Detailed)
- Odd rows: text left, image right.
- Even rows: image left, text right.
- Each row highlights one feature with a heading, description, and visual.
Icon Grid (Simple, Scannable)
- 3 or 4 columns of icon + heading + short description.
- Icons should be consistent style (outline or filled, not mixed).
5. CTA Design
Primary CTA Rules
- Size: Minimum 48px tall, 200px+ wide. Larger than any other button on the page.
- Color: Highest contrast element on the page. Primary brand color.
- Copy: Action-oriented verb. "Start free trial" > "Submit". "Get started" > "Sign up".
- Urgency: Optional, but effective. "Start free — no credit card required."
- Repetition: Primary CTA appears at least 3 times: hero, mid-page, bottom.
Sticky CTA (Mobile)
<div class="fixed bottom-0 inset-x-0 bg-white/90 backdrop-blur-lg border-t
border-gray-200 p-4 sm:hidden z-50">
<a href="#" class="block w-full bg-indigo-600 text-white text-center py-3.5
rounded-xl font-semibold text-lg">
Start free trial
</a>
</div>
Secondary CTA Patterns
- Ghost button (outline) next to primary.
- Text link with arrow:
Learn more ->.
- Never two equally-weighted CTAs side by side.
6. How It Works
Three-Step Pattern
<section class="py-20 bg-gray-50">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center text-gray-950 mb-16">
Get started in minutes
</h2>
<div class="grid md:grid-cols-3 gap-12">
<div class="text-center">
<div class="w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold
text-lg flex items-center justify-center mx-auto">1</div>
<h3 class="mt-4 text-lg font-semibold text-gray-950">Connect your data</h3>
<p class="mt-2 text-gray-600">Import from 50+ sources with one click.</p>
</div>
</div>
</div>
</section>
Keep it to 3 steps. If your process has more, simplify or group.
7. Testimonials
Card Grid
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
<div class="flex gap-1 text-amber-400 mb-4">
</div>
<blockquote class="text-gray-700 leading-relaxed">
"This completely changed how our team works. We shipped 3x faster in the
first month."
</blockquote>
<div class="mt-4 flex items-center gap-3">
<img src="/avatars/sarah.jpg" alt="" class="w-10 h-10 rounded-full" />
<div>
<div class="font-semibold text-gray-950 text-sm">Sarah Chen</div>
<div class="text-gray-500 text-sm">CTO, Acme Corp</div>
</div>
</div>
</div>
</div>
Rules
- Real photos, real names, real companies.
- Include role/title for authority.
- Star ratings add visual credibility.
- Highlight specific outcomes ("3x faster", "saved 20 hours/week").
8. Pricing Section
Three-Tier Pattern
- Free/Basic — anchor price, limited features.
- Pro (recommended) — highlighted with border, badge, or shadow. Most features.
- Enterprise — "Contact sales", unlimited everything.
Design Rules
- Highlight the recommended plan with
ring-2 ring-indigo-600 scale-105.
- Use a "Most Popular" badge.
- Annual/monthly toggle with savings callout.
- Feature list: checkmarks for included, dashes or X for excluded.
- Price: large number, small period (e.g., $29/mo).
9. Trust Signals
Place these throughout the page, not just in one section:
- Security badges: SSL, SOC 2, GDPR
- Money-back guarantee: "30-day full refund, no questions asked"
- Support: "24/7 support" or "Avg. response time: 2 hours"
- Social proof: "Join 10,000+ teams" near CTA buttons
- Press logos: "As seen in TechCrunch, Forbes..."
10. Performance Priorities
Above-the-Fold (LCP Optimization)
- Hero image/video is the likely LCP element. Preload it.
- Inline critical CSS for the hero section.
- No lazy-loading above the fold.
<link rel="preload" href="/hero-image.webp" as="image" />
Below-the-Fold
- Lazy-load all images:
loading="lazy".
- Use
srcset for responsive images.
- Defer non-critical JS.
- Use
content-visibility: auto on far-down sections.
<img
src="/feature.webp"
srcset="/feature-400.webp 400w, /feature-800.webp 800w, /feature-1200.webp 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
loading="lazy"
alt="Feature description"
class="rounded-2xl"
/>
11. Conversion-Focused Spacing & Flow
Visual Flow Rules
- F-pattern for text-heavy pages (eyes scan top-left to right, then down-left).
- Z-pattern for minimal pages (eyes zigzag across the page).
- Each section answers one question then guides to the next.
- White space is a feature — cramped pages feel untrustworthy.
Section Spacing Scale
- Between major sections:
py-20 lg:py-32
- Between subsections:
py-12 lg:py-16
- Between heading and content:
mb-12 lg:mb-16
- Between content items:
gap-6 lg:gap-8
Page-Level Checklist