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
- Outcome + price anchor: "[Product] that runs your [function]. $X/mo."
- Aspirational identity: "You're one [product unit] away from [transformation]."
- Anti-status-quo: "Goodbye [old way]. Hello [new way]."
- Developer empathy: "We built [thing] so you don't have to."
- Contrast pair: "One [noun]. Zero [pain point]."
- Speed promise: "[Verb] [outcome] in [timeframe]."
- Action + specificity: "Put [technology] to work for [job]."
- Parallel structure: "[Verb] anything. [Verb] anywhere."
- Reframe + outcome: "More than [category]. [Business result]."
- 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:
- Business type / industry
- Team size (solo / small team / enterprise)
- 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:
- Photo of the person (not a logo, not an icon)
- Full name (never "John D." or initials)
- Title and company
- Specific metric or outcome ("$16M saved annually", "10,000+ hours saved", "5x more meetings")
- 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
Copy
Design
Conversion
Technical
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 ->
1---2name: landing-page-funnel3description: Build high-converting SaaS landing page funnels using proven patterns from top-performing companies. Page structure template, copy frameworks, design rules, conversion tactics, anti-patterns.4---56# Landing Page Funnel Skill78## When to Use This Skill910Use when building, auditing, or redesigning a SaaS landing page, pricing page, or signup funnel.1112---1314## 1. Page Structure Template (Exact Section Order)1516Build every landing page in this order. Do not skip sections. Do not reorder.1718| # | Section | Purpose | Key Rule |19|---|---------|---------|----------|20| 1 | **Nav bar** | Orientation + persistent CTA | Logo left, 3-5 links center, CTA button right |21| 2 | **Hero** | Hook + primary conversion | Headline (under 8 words) + subheadline (1-2 sentences) + primary CTA + product screenshot or 15s demo |22| 3 | **Logo bar** | Instant credibility | 5-8 recognizable customer/press logos. Scrolling carousel on mobile |23| 4 | **Problem/pain** | Emotional resonance | Name the specific pain. No features here. Only the broken status quo |24| 5 | **Solution showcase** | Outcome-driven features | 3-5 feature cards or use-case sections. Benefits, not features. Bento grid or card layout |25| 6 | **Social proof** | Trust through evidence | Testimonials with photo + full name + title + company + specific metric. Never generic quotes |26| 7 | **How it works** | Simplify the mental model | 3-step visual process. Numbered. Icons or illustrations per step |27| 8 | **Pricing preview** | Remove ambiguity | Embedded pricing or "See Pricing" link. If embedded: 3 tiers max, middle highlighted |28| 9 | **FAQ / objection handling** | Overcome hesitation | 5-8 most common questions. Accordion format on mobile |29| 10 | **Final CTA** | Close the loop | Repeat hero CTA with urgency-adjacent copy. "No credit card required" micro-copy |30| 11 | **Footer** | Navigation + legal | Links, legal, secondary nav |3132---3334## 2. Copy Frameworks3536### Framework Selection Guide3738| Framework | Best For | Structure |39|-----------|----------|-----------|40| **Problem-Solution-Proof** | Enterprise B2B, long consideration | State problem > show solution > prove with data |41| **PAS (Problem-Agitate-Solution)** | High-ticket, emotional purchases | Name pain > twist the knife > present relief |42| **Before-After-Bridge** | Product-led growth, transformation | Show "before" state > show "after" state > bridge = your product |43| **AIDA** | Content-heavy pages, multiple CTAs | Attention > Interest > Desire > Action |44| **Outcome-first** | Developer/creative audiences who hate hype | Lead with result, explain mechanism second |4546### Headline Rules4748- Under 8 words. Always.49- Lead with the OUTCOME the customer gets, not the tool's features.50- Use an action verb.51- No jargon. No buzzwords.5253### 10 Headline Templates54551. **Outcome + price anchor:** "[Product] that runs your [function]. $X/mo."562. **Aspirational identity:** "You're one [product unit] away from [transformation]."573. **Anti-status-quo:** "Goodbye [old way]. Hello [new way]."584. **Developer empathy:** "We built [thing] so you don't have to."595. **Contrast pair:** "One [noun]. Zero [pain point]."606. **Speed promise:** "[Verb] [outcome] in [timeframe]."617. **Action + specificity:** "Put [technology] to work for [job]."628. **Parallel structure:** "[Verb] anything. [Verb] anywhere."639. **Reframe + outcome:** "More than [category]. [Business result]."6410. **Imperative + scale:** "Stop [wasteful action]. Start [desired action]."6566### CTA Button Copy Rules6768- Primary CTA: filled/solid button. Text = action + value ("Start Free Trial", "See It In Action").69- Secondary CTA: outlined/ghost button. Text = lower commitment ("Watch Demo", "Learn More").70- Always add micro-copy below primary CTA: "No credit card required" or "Free 14-day trial."71- Repeat primary CTA every 2-3 scroll sections.72- Never use "Submit" or "Click Here."7374---7576## 3. Design Rules7778### Typography7980- Headline: 48-64px desktop, 32-40px mobile. Bold weight (700+).81- Subheadline: 20-24px desktop, 16-18px mobile. Regular weight (400).82- Body: 16-18px desktop, 14-16px mobile. Line height 1.5-1.6.83- Use one font family max. Sans-serif. Inter, Geist, or system fonts.8485### Mobile-First Rules8687- Design mobile layout first, then scale up to desktop.88- 58% of SaaS pricing page visits are mobile. 79-83% of total visits are mobile.89- CTA buttons: minimum 48px height (WCAG), optimal 56-64px on mobile. Full-width on mobile viewports.90- Thumb zone: place primary CTAs in bottom third of screen.91- Sticky/floating CTA on long-scroll pages.92- Stack pricing tiers vertically on mobile. Never horizontal scroll.93- Collapsible feature comparison tables, not wide grids.94- Logo bar: scrolling horizontal carousel on mobile.9596### Layout Patterns (2026)9798- Bento grid for feature sections.99- Card-based feature sections with hover animations.100- Split-screen hero: text left, product screenshot right.101- Scroll-triggered progressive disclosure.102- Full-width sections alternating with contained-width text blocks.103- Dark backgrounds work best for AI products, developer tools, premium positioning.104105---106107## 4. Conversion Tactics108109### Dual CTA Strategy110111Every hero section gets two CTAs side by side:112113| Position | Label Pattern | Target |114|----------|--------------|--------|115| Primary (left) | "Start Free Trial" / "Try for Free" | Self-serve signups |116| Secondary (right) | "Get a Demo" / "See It In Action" | Enterprise / high-touch leads |117118This routes visitor intent without forcing a single path.119120### Intent Routing (Post-Signup)121122Ask 2-3 questions at signup to personalize the experience:1231241. Business type / industry1252. Team size (solo / small team / enterprise)1263. Primary goal127128Route answers to a personalized dashboard, onboarding checklist, and feature surfacing.129130### Social Proof Placement Strategy131132| Location | Proof Type | Purpose |133|----------|-----------|---------|134| Immediately after hero | Logo bar (5-8 logos) | Reduces bounce |135| Mid-page | Full testimonials with metrics | Builds trust for engaged scrollers |136| Next to pricing tiers | Short testimonial quotes | Reduces plan hesitation |137| Near signup/payment forms | Security badges (SOC 2, GDPR, SSL) | Removes friction at conversion point |138139### Testimonial Format (Mandatory)140141Every testimonial MUST include all five elements:1421431. **Photo** of the person (not a logo, not an icon)1442. **Full name** (never "John D." or initials)1453. **Title and company**1464. **Specific metric or outcome** ("$16M saved annually", "10,000+ hours saved", "5x more meetings")1475. **1-sentence quote** in their voice148149Generic testimonials ("Great product!") are worse than no testimonials.150151### Pricing Page Rules152153- 3 tiers maximum. Two feels incomplete. Five causes paralysis.154- Highlight middle tier as "Most Popular" with border, badge, or background color.155- Annual/monthly toggle at top. Default to annual. Show savings in dollars, not percentages.156- 8-10 key features per tier with checkmarks/dashes.157- One CTA button per tier.158- Feature comparison table below tier cards for deep evaluators.159- Enterprise tier separated visually, not as a 4th column.160161---162163## 5. Anti-Patterns (What to Avoid)164165| Anti-Pattern | Why It Fails |166|-------------|-------------|167| Fake countdown timers | Users know they reset on reload. Destroys trust. |168| "Only X spots left" (fabricated) | Detected easily. Only use with real scarcity. |169| Exit-intent pop-ups | Blocked by Safari, Firefox, Brave. Feels desperate. |170| Feature-dumping (20+ features listed) | Overwhelms visitors. Focus on 3-5 outcomes. |171| Generic testimonials without names/metrics | Zero credibility. Worse than no testimonials. |172| More than 3 form fields at signup | Each extra field drops conversion. Ask for email only. |173| Horizontal pricing tables on mobile | 58% of pricing visits are mobile. Horizontal scroll kills conversion. |174| Stock photos instead of product screenshots | Signals the product is not ready or not real. Show the actual product. |175| Gating all content behind demo requests | Buyers complete 69% of purchase decisions before talking to sales. Let them self-educate. |176177### Visual Anti-Patterns (NEVER DO)178179| Anti-Pattern | Why It Fails |180|-------------|-------------|181| Border-radius on section containers | Creates "card" feel. Top SaaS pages use full-width sections. |182| Glassmorphism/blur effects | Dated trend. No top-5 SaaS page uses frosted glass on content sections. |183| Card grids for main content | Fragments the reading flow. Single-column text for core messaging. |184| Icon grids (4 icons in a row with labels) | Feels like a template. Typography hierarchy replaces icon decoration. |185| Center-aligned body text | Hard to read past 2 lines. Left-align always except headlines. |186| More than 2 font weights per page | Visual clutter. Use only 400 (body) and 600-700 (headlines). |187| Generic SaaS copy ("Transform your business") | Signals AI-generated. Specific, concrete language only. |188189---190191## 6. Quality Checklist192193### Structure194- [ ] Page follows the 11-section order195- [ ] Hero headline is under 8 words and outcome-focused196- [ ] Dual CTA in hero (primary + secondary)197- [ ] Logo bar has 5-8 logos immediately after hero198- [ ] Primary CTA repeats every 2-3 scroll sections199200### Copy201- [ ] No feature-dumping. 3-5 outcomes max in solution section202- [ ] Every testimonial has: photo, full name, title, company, specific metric, quote203- [ ] Micro-copy below every CTA204- [ ] FAQ covers 5-8 objections205206### Design207- [ ] CTA buttons are 48px+ height on mobile, 44px+ on desktop208- [ ] Mobile layout designed first, then scaled to desktop209- [ ] Sticky CTA visible on mobile during scroll210- [ ] Pricing tiers stack vertically on mobile211- [ ] One font family. Sans-serif.212213### Conversion214- [ ] Dual CTA routes to different paths215- [ ] Pricing page defaults to annual toggle216- [ ] Annual savings shown in dollars, not percentages217- [ ] Money-back guarantee near pricing CTAs218- [ ] Security badges near signup/payment forms219220### Technical221- [ ] Lighthouse performance score 90+222- [ ] Core Web Vitals pass (LCP < 2.5s, FID < 100ms, CLS < 0.1)223- [ ] All images optimized (WebP/AVIF, lazy loaded below fold)224- [ ] Semantic HTML (h1 once, proper heading hierarchy)225- [ ] No layout shift on CTA buttons or pricing cards226227### Benchmarks to Target228229| Metric | Target |230|--------|--------|231| Visitor-to-lead | 5%+ |232| Landing page conversion | 6%+ |233| Free trial to paid | 25%+ |234| Annual plan uptake | 55%+ |235| Mobile conversion | 3%+ |236237---238239Built by [PureBrain](https://purebrain.ai) -- AI-powered marketing operations.240241Want the full suite of 183+ production-tested skills? [Start your trial ->](https://purebrain.ai/pricing)
puretechnyc