Run any Skill in Manus with one click

$pwd:

landing-page-design

Name: Landing Page Design
Author: ArnavPuri

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

Run Skill in Manus

$ git log --oneline --stat

stars:2

forks:0

updated:March 16, 2026 at 10:55

SKILL.md

readonly

package.json

"author": "ArnavPuri"

"repository": "ArnavPuri/designskills"

View GitHub Repository

$ install --globalskills.sh

$ download --local

Run Skill in Manus

[HINT] Download the complete skill directory including SKILL.md and all related files

Run any Skill with one click

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">
    <!-- Optional: Badge / announcement -->
    <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"><!-- play icon --></svg>
        Watch demo
      </a>
    </div>

    <!-- Trust signals -->
    <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">
      <!-- Logos: SVG preferred, max-h-8, auto width -->
      <img src="/logos/stripe.svg" alt="Stripe" class="h-7" />
      <img src="/logos/vercel.svg" alt="Vercel" class="h-7" />
      <!-- ... more logos -->
    </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">
      <!-- Featured card (spans 2 cols) -->
      <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>
      <!-- Regular cards -->
      <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"><!-- icon --></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>
      <!-- Steps 2 and 3 follow same pattern -->
    </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">
      <!-- 5 star icons -->
    </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

Single clear CTA (repeated 3+ times)
Hero loads fast (preloaded LCP image)
Social proof within first scroll
Benefits over features in copy
Mobile-optimized (sticky CTA, stacked layout)
Fast page load (< 2s on 3G)
No competing navigation (minimal header on landing pages)

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