Landing page funnel

Landing Page Funnel Skill

When to Use This Skill

Use when building, auditing, or redesigning a SaaS landing page, pricing page, or signup funnel.

---

1. Page Structure Template (Exact Section Order)

Build every landing page in this order. Do not skip sections. Do not reorder.

#	Section	Purpose	Key Rule
1	Nav bar	Orientation + persistent CTA	Logo left, 3-5 links center, CTA button right
2	Hero	Hook + primary conversion	Headline (under 8 words) + subheadline (1-2 sentences) + primary CTA + product screenshot or 15s demo
3	Logo bar	Instant credibility	5-8 recognizable customer/press logos. Scrolling carousel on mobile
4	Problem/pain	Emotional resonance	Name the specific pain. No features here. Only the broken status quo
5	Solution showcase	Outcome-driven features	3-5 feature cards or use-case sections. Benefits, not features. Bento grid or card layout
6	Social proof	Trust through evidence	Testimonials with photo + full name + title + company + specific metric. Never generic quotes
7	How it works	Simplify the mental model	3-step visual process. Numbered. Icons or illustrations per step
8	Pricing preview	Remove ambiguity	Embedded pricing or "See Pricing" link. If embedded: 3 tiers max, middle highlighted
9	FAQ / objection handling	Overcome hesitation	5-8 most common questions. Accordion format on mobile
10	Final CTA	Close the loop	Repeat hero CTA with urgency-adjacent copy. "No credit card required" micro-copy
11	Footer	Navigation + legal	Links, legal, secondary nav

---

2. Copy Frameworks

Framework Selection Guide

Framework	Best For	Structure
Problem-Solution-Proof	Enterprise B2B, long consideration	State problem > show solution > prove with data
PAS (Problem-Agitate-Solution)	High-ticket, emotional purchases	Name pain > twist the knife > present relief
Before-After-Bridge	Product-led growth, transformation	Show "before" state > show "after" state > bridge = your product
AIDA	Content-heavy pages, multiple CTAs	Attention > Interest > Desire > Action
Outcome-first	Developer/creative audiences who hate hype	Lead with result, explain mechanism second

Headline Rules

• Under 8 words. Always.
• Lead with the OUTCOME the customer gets, not the tool's features.
• Use an action verb.
• No jargon. No buzzwords.

10 Headline Templates

1. Outcome + price anchor: "[Product] that runs your [function]. $X/mo."
2. Aspirational identity: "You're one [product unit] away from [transformation]."
3. Anti-status-quo: "Goodbye [old way]. Hello [new way]."
4. Developer empathy: "We built [thing] so you don't have to."
5. Contrast pair: "One [noun]. Zero [pain point]."
6. Speed promise: "[Verb] [outcome] in [timeframe]."
7. Action + specificity: "Put [technology] to work for [job]."
8. Parallel structure: "[Verb] anything. [Verb] anywhere."
9. Reframe + outcome: "More than [category]. [Business result]."
10. Imperative + scale: "Stop [wasteful action]. Start [desired action]."

CTA Button Copy Rules

• Primary CTA: filled/solid button. Text = action + value ("Start Free Trial", "See It In Action").
• Secondary CTA: outlined/ghost button. Text = lower commitment ("Watch Demo", "Learn More").
• Always add micro-copy below primary CTA: "No credit card required" or "Free 14-day trial."
• Repeat primary CTA every 2-3 scroll sections.
• Never use "Submit" or "Click Here."

---

3. Design Rules

Typography

• Headline: 48-64px desktop, 32-40px mobile. Bold weight (700+).
• Subheadline: 20-24px desktop, 16-18px mobile. Regular weight (400).
• Body: 16-18px desktop, 14-16px mobile. Line height 1.5-1.6.
• Use one font family max. Sans-serif. Inter, Geist, or system fonts.

Mobile-First Rules

• Design mobile layout first, then scale up to desktop.
• 58% of SaaS pricing page visits are mobile. 79-83% of total visits are mobile.
• CTA buttons: minimum 48px height (WCAG), optimal 56-64px on mobile. Full-width on mobile viewports.
• Thumb zone: place primary CTAs in bottom third of screen.
• Sticky/floating CTA on long-scroll pages.
• Stack pricing tiers vertically on mobile. Never horizontal scroll.
• Collapsible feature comparison tables, not wide grids.
• Logo bar: scrolling horizontal carousel on mobile.

Layout Patterns (2026)

• Bento grid for feature sections.
• Card-based feature sections with hover animations.
• Split-screen hero: text left, product screenshot right.
• Scroll-triggered progressive disclosure.
• Full-width sections alternating with contained-width text blocks.
• Dark backgrounds work best for AI products, developer tools, premium positioning.

---

4. Conversion Tactics

Dual CTA Strategy

Every hero section gets two CTAs side by side:

Position	Label Pattern	Target
Primary (left)	"Start Free Trial" / "Try for Free"	Self-serve signups
Secondary (right)	"Get a Demo" / "See It In Action"	Enterprise / high-touch leads

This routes visitor intent without forcing a single path.

Intent Routing (Post-Signup)

Ask 2-3 questions at signup to personalize the experience:

1. Business type / industry
2. Team size (solo / small team / enterprise)
3. Primary goal

Route answers to a personalized dashboard, onboarding checklist, and feature surfacing.

Social Proof Placement Strategy

Location	Proof Type	Purpose
Immediately after hero	Logo bar (5-8 logos)	Reduces bounce
Mid-page	Full testimonials with metrics	Builds trust for engaged scrollers
Next to pricing tiers	Short testimonial quotes	Reduces plan hesitation
Near signup/payment forms	Security badges (SOC 2, GDPR, SSL)	Removes friction at conversion point

Testimonial Format (Mandatory)

Every testimonial MUST include all five elements:

1. Photo of the person (not a logo, not an icon)
2. Full name (never "John D." or initials)
3. Title and company
4. Specific metric or outcome ("$16M saved annually", "10,000+ hours saved", "5x more meetings")
5. 1-sentence quote in their voice

Generic testimonials ("Great product!") are worse than no testimonials.

Pricing Page Rules

• 3 tiers maximum. Two feels incomplete. Five causes paralysis.
• Highlight middle tier as "Most Popular" with border, badge, or background color.
• Annual/monthly toggle at top. Default to annual. Show savings in dollars, not percentages.
• 8-10 key features per tier with checkmarks/dashes.
• One CTA button per tier.
• Feature comparison table below tier cards for deep evaluators.
• Enterprise tier separated visually, not as a 4th column.

---

5. Anti-Patterns (What to Avoid)

Anti-Pattern	Why It Fails
Fake countdown timers	Users know they reset on reload. Destroys trust.
"Only X spots left" (fabricated)	Detected easily. Only use with real scarcity.
Exit-intent pop-ups	Blocked by Safari, Firefox, Brave. Feels desperate.
Feature-dumping (20+ features listed)	Overwhelms visitors. Focus on 3-5 outcomes.
Generic testimonials without names/metrics	Zero credibility. Worse than no testimonials.
More than 3 form fields at signup	Each extra field drops conversion. Ask for email only.
Horizontal pricing tables on mobile	58% of pricing visits are mobile. Horizontal scroll kills conversion.
Stock photos instead of product screenshots	Signals the product is not ready or not real. Show the actual product.
Gating all content behind demo requests	Buyers complete 69% of purchase decisions before talking to sales. Let them self-educate.

Visual Anti-Patterns (NEVER DO)

Anti-Pattern	Why It Fails
Border-radius on section containers	Creates "card" feel. Top SaaS pages use full-width sections.
Glassmorphism/blur effects	Dated trend. No top-5 SaaS page uses frosted glass on content sections.
Card grids for main content	Fragments the reading flow. Single-column text for core messaging.
Icon grids (4 icons in a row with labels)	Feels like a template. Typography hierarchy replaces icon decoration.
Center-aligned body text	Hard to read past 2 lines. Left-align always except headlines.
More than 2 font weights per page	Visual clutter. Use only 400 (body) and 600-700 (headlines).
Generic SaaS copy ("Transform your business")	Signals AI-generated. Specific, concrete language only.

---

6. Quality Checklist

Structure

• Page follows the 11-section order
• Hero headline is under 8 words and outcome-focused
• Dual CTA in hero (primary + secondary)
• Logo bar has 5-8 logos immediately after hero
• Primary CTA repeats every 2-3 scroll sections

Copy

• No feature-dumping. 3-5 outcomes max in solution section
• Every testimonial has: photo, full name, title, company, specific metric, quote
• Micro-copy below every CTA
• FAQ covers 5-8 objections

Design

• CTA buttons are 48px+ height on mobile, 44px+ on desktop
• Mobile layout designed first, then scaled to desktop
• Sticky CTA visible on mobile during scroll
• Pricing tiers stack vertically on mobile
• One font family. Sans-serif.

Conversion

• Dual CTA routes to different paths
• Pricing page defaults to annual toggle
• Annual savings shown in dollars, not percentages
• Money-back guarantee near pricing CTAs
• Security badges near signup/payment forms

Technical

• Lighthouse performance score 90+
• Core Web Vitals pass (LCP < 2.5s, FID < 100ms, CLS < 0.1)
• All images optimized (WebP/AVIF, lazy loaded below fold)
• Semantic HTML (h1 once, proper heading hierarchy)
• No layout shift on CTA buttons or pricing cards

Benchmarks to Target

Metric	Target
Visitor-to-lead	5%+
Landing page conversion	6%+
Free trial to paid	25%+
Annual plan uptake	55%+
Mobile conversion	3%+

---

Built by PureBrain -- AI-powered marketing operations.

Want the full suite of 183+ production-tested skills? Start your trial ->