Funnel Pages & Landing Pages

Write high-converting landing pages for funnels, including lead capture pages, sales pages, OTO pages, and campaign pages. Apply proven principles from Russell Brunson, Mike Filsaime, Anik Singal, and Product Launch Formula.

Core Objectives

Maximize opt-ins, purchases, or CTA completions
Capture and hold attention with curiosity and clarity
Communicate emotional and strategic benefits
Build urgency and trust quickly
Drive action with scroll-based momentum

Page Types

Lead Capture / Opt-In Page
Sales Page (Long-Form or Short-Form)
OTO / Upsell Page
Webinar Registration Page
Challenge Funnel Page

Core Page Structure

1. Headline + Subheadline (Above-the-Fold)

Attention-grabbing, emotionally charged headline
Clear subheadline expanding benefit/transformation
Hook angle using numbers, outcomes, or paradigm shift
[Hero Image or Video Thumbnail]

2. Lead Magnet or Offer Stack

Bullet list (Feature → Transformation framing)
Immediate benefit + long-term gain
[Supporting visuals, product mockups, icons]

3. Urgency & Scarcity

Countdown timer
Limited bonuses or enrollment caps
Copy cues: "Only available this week"

4. Social Proof & Testimonials

Quotes, screenshots, video testimonials
Trusted client/media logos
Early and mid-scroll placement

5. Offer Breakdown / Value Stack

Visual component listing
Real-world value and price anchor
Bonus stack with stated value

6. Guarantee / Risk Reversal

Money-back or conditional guarantee
"Nothing to lose" reassurance
Clear terms

7. Final CTA Section

High-contrast CTA button
Offer restated near button
Trust badge or secure checkout icon

Copywriting Style

Clear, confident, results-focused tone
Emotional momentum with conversational copy
Short, rhythmic sentences
Ellipses and curiosity loops
Inspired by Brunson, Filsaime, Singal

Quality Standards

Headlines: Stop the scroll Subheadlines: Build desire Bullets: Stack value CTAs: Create urgency Overall: Would you buy from it?

Visual & UX Notes

Mobile-first design
Thumb-friendly buttons
White space for flow
Visual cues (arrows, animations)
Sticky header or floating CTA

Page-Specific Features

OTO Pages

Urgency-focused copy
No exit links
Price anchor
Before/after contrast

Opt-In Pages

One CTA only
Minimal friction (name + email)
Zero distraction

Webinar Registration

Date/time lock-in
Time zone display
Instant confirmation
Calendar add option

Funnel Type Variations

Type	Key Adjustments
Discovery Call	Authority proof, low-friction booking
Product Launch	Pre-launch rhythm, cart open/close
Book Funnel	Chapter highlights, shipping value
Freemium	Time-to-value, plan comparison
Membership	Community, retention bonuses
Tripwire	Order bump + OTO profit stack
VSL/Sales	Video hook, skimmable transcript
Webinar	Countdown, speaker credibility
Challenge	Daily transformation, community

Examples

Opt-In Page Example (Above-the-Fold)

html

<section style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); color: white; padding: 80px 20px; text-align: center;">
  <div style="max-width: 600px; margin: 0 auto;">
    
    <!-- Pre-headline -->
    <p style="color: #f6e05e; font-size: 14px; letter-spacing: 2px; margin-bottom: 15px;">
      FREE INSTANT DOWNLOAD
    </p>
    
    <!-- Headline -->
    <h1 style="font-size: 42px; line-height: 1.2; margin-bottom: 20px;">
      The 7-Figure Funnel Blueprint: How I Generated $2.3M From a Single Funnel
    </h1>
    
    <!-- Subheadline -->
    <p style="font-size: 18px; opacity: 0.9; margin-bottom: 30px;">
      Discover the exact page-by-page breakdown of my highest-converting funnel—including the copy, the tech, and the numbers.
    </p>
    
    <!-- Lead Magnet Image -->
    <img src="lead-magnet-mockup.png" style="max-width: 300px; margin-bottom: 30px;" />
    
    <!-- Value Bullets -->
    <div style="text-align: left; background: rgba(255,255,255,0.1); border-radius: 12px; padding: 25px; margin-bottom: 30px;">
      <p style="font-weight: bold; margin-bottom: 15px;">Inside this free guide, you'll discover:</p>
      <ul style="list-style: none; padding: 0; margin: 0;">
        <li style="margin-bottom: 12px;">✓ The 4-page funnel structure that converts 3x better than average</li>
        <li style="margin-bottom: 12px;">✓ My exact headline formulas (steal them)</li>
        <li style="margin-bottom: 12px;">✓ The "invisible upsell" that added $47K in pure profit</li>
        <li style="margin-bottom: 12px;">✓ Why 97% of funnels fail (and how to be in the 3%)</li>
      </ul>
    </div>
    
    <!-- Opt-In Form -->
    <div style="background: rgba(255,255,255,0.05); border-radius: 12px; padding: 30px;">
      <input type="text" placeholder="Your First Name" style="width: 100%; padding: 15px; border: none; border-radius: 8px; margin-bottom: 15px; font-size: 16px;" />
      <input type="email" placeholder="Your Best Email" style="width: 100%; padding: 15px; border: none; border-radius: 8px; margin-bottom: 15px; font-size: 16px;" />
      <button style="width: 100%; background: #38a169; color: white; padding: 18px; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer;">
        YES! SEND ME THE FREE BLUEPRINT →
      </button>
      <p style="font-size: 12px; opacity: 0.6; margin-top: 15px;">
        🔒 Your info is safe. No spam, ever.
      </p>
    </div>
    
  </div>
</section>

Sales Page Value Stack Example

html

<section style="background: #f7fafc; padding: 60px 20px;">
  <div style="max-width: 800px; margin: 0 auto;">
    
    <h2 style="font-size: 36px; text-align: center; color: #1a202c; margin-bottom: 40px;">
      Here's Everything You Get Inside
    </h2>
    
    <!-- Core Offer -->
    <div style="background: white; border-radius: 12px; padding: 30px; margin-bottom: 20px; border-left: 4px solid #5a67d8;">
      <div style="display: flex; justify-content: space-between; align-items: start;">
        <div>
          <h3 style="color: #1a202c; margin: 0 0 10px 0;">The Complete [Program Name] System</h3>
          <p style="color: #4a5568; margin: 0;">
            6 core modules taking you from zero to [outcome]. Includes video training, 
            worksheets, and implementation guides.
          </p>
        </div>
        <p style="color: #5a67d8; font-weight: bold; white-space: nowrap;">$997 Value</p>
      </div>
    </div>
    
    <!-- Bonus 1 -->
    <div style="background: #fefcbf; border-radius: 12px; padding: 30px; margin-bottom: 20px; border-left: 4px solid #d69e2e;">
      <div style="display: flex; justify-content: space-between; align-items: start;">
        <div>
          <p style="color: #744210; font-size: 12px; font-weight: bold; margin: 0 0 5px 0;">🎁 BONUS #1</p>
          <h3 style="color: #1a202c; margin: 0 0 10px 0;">Done-For-You Templates</h3>
          <p style="color: #4a5568; margin: 0;">
            Copy-paste templates for [specific use case]. Just customize and deploy.
          </p>
        </div>
        <p style="color: #d69e2e; font-weight: bold; white-space: nowrap;">$297 Value</p>
      </div>
    </div>
    
    <!-- Bonus 2 -->
    <div style="background: #fefcbf; border-radius: 12px; padding: 30px; margin-bottom: 20px; border-left: 4px solid #d69e2e;">
      <div style="display: flex; justify-content: space-between; align-items: start;">
        <div>
          <p style="color: #744210; font-size: 12px; font-weight: bold; margin: 0 0 5px 0;">🎁 BONUS #2</p>
          <h3 style="color: #1a202c; margin: 0 0 10px 0;">Private Community Access</h3>
          <p style="color: #4a5568; margin: 0;">
            Get feedback, support, and accountability from peers on the same journey.
          </p>
        </div>
        <p style="color: #d69e2e; font-weight: bold; white-space: nowrap;">$197 Value</p>
      </div>
    </div>
    
    <!-- Total -->
    <div style="background: #1a202c; color: white; border-radius: 12px; padding: 30px; text-align: center;">
      <p style="font-size: 18px; opacity: 0.7; margin: 0;">Total Value:</p>
      <p style="font-size: 36px; text-decoration: line-through; opacity: 0.5; margin: 5px 0;">$1,491</p>
      <p style="font-size: 18px; margin: 0 0 5px 0;">Your Investment Today:</p>
      <p style="font-size: 56px; font-weight: bold; color: #38a169; margin: 0;">$297</p>
      <p style="font-size: 14px; opacity: 0.7; margin-top: 10px;">Or 3 payments of $109</p>
    </div>
    
  </div>
</section>

OTO Page Example (Urgency-Focused)

html

<section style="background: #c53030; color: white; padding: 20px; text-align: center;">
  <p style="margin: 0; font-size: 18px;">
    ⚠️ WAIT! Your order is not yet complete. Do NOT close this page.
  </p>
</section>

<section style="background: white; padding: 60px 20px;">
  <div style="max-width: 700px; margin: 0 auto; text-align: center;">
    
    <h1 style="font-size: 38px; color: #1a202c; line-height: 1.2; margin-bottom: 20px;">
      "One-Time Offer: Get [Product] for 70% Off (Only $47)"
    </h1>
    
    <p style="font-size: 18px; color: #4a5568; margin-bottom: 30px;">
      This exclusive offer is <strong>only available right now, on this page</strong>. 
      Once you leave, it's gone forever.
    </p>
    
    <!-- Product Image -->
    <img src="oto-product.png" style="max-width: 400px; margin-bottom: 30px;" />
    
    <!-- Why This Matters -->
    <div style="text-align: left; background: #f7fafc; border-radius: 12px; padding: 30px; margin-bottom: 30px;">
      <p style="color: #1a202c; margin-bottom: 15px;">
        You just invested in [Main Product]—smart move.
      </p>
      <p style="color: #4a5568; margin-bottom: 15px;">
        But here's the thing...
      </p>
      <p style="color: #4a5568; margin-bottom: 15px;">
        [Main Product] gives you the WHAT.<br>
        [OTO Product] gives you the HOW.
      </p>
      <p style="color: #1a202c; font-weight: bold;">
        Without [OTO Product], most people take 3-6 months to implement.<br>
        With it? You could see results in the first week.
      </p>
    </div>
    
    <!-- Price Anchor -->
    <p style="font-size: 24px; color: #718096; text-decoration: line-through;">
      Regular Price: $147
    </p>
    <p style="font-size: 48px; color: #c53030; font-weight: bold; margin: 10px 0;">
      Today Only: $47
    </p>
    
    <!-- CTA Buttons -->
    <button style="background: #38a169; color: white; font-size: 20px; padding: 18px 48px; border: none; border-radius: 8px; cursor: pointer; margin-bottom: 15px; width: 100%; max-width: 400px;">
      YES! Add This To My Order for $47 →
    </button>
    
    <p style="margin-top: 20px;">
      <a href="#decline" style="color: #718096; font-size: 14px;">
        No thanks, I don't want faster results. Take me to my purchase.
      </a>
    </p>
    
  </div>
</section>

Guidelines

Landing Page Principles (Per Russell Brunson, Mike Filsaime, Anik Singal):

One Page, One Goal - Every page has ONE primary action
Scroll-Based Momentum - Copy builds desire as they scroll
Feature → Transformation - Don't sell features, sell outcomes
Price Anchor - Always show value before price
Risk Reversal - Make buying feel safer than not buying

Avoid Funnel Page Pitfalls:

Never: Multiple competing CTAs on opt-in pages
Never: Exit links on OTO pages
Avoid: Walls of text without visual breaks
Skip: Generic headlines that could be anyone's

Headline Formulas:

"How to [Outcome] Without [Pain Point]"
"The [Number] Secrets to [Desired Result]"
"Discover the [Method] That [Transformation]"
"Finally: A [Solution] That Actually Works for [Audience]"

Copywriting Style (Per Mike Filsaime):

Clear, confident, results-focused tone
Emotional momentum with conversational copy
Break up long sections with short, rhythmic sentences
Use ellipses (...) and curiosity loops to keep users scrolling
3-5 lines maximum per paragraph

Visual & UX Best Practices:

Mobile-first with thumb-friendly buttons
White space and scroll indicators for flow
Visual cues (arrows, animated elements) guide next steps
Sticky header or floating CTA for long-form pages
Video thumbnails with play button overlay

Page-Specific Rules:

Opt-In Pages:

ONE CTA only (no navigation, no footer links)
Minimal friction: first name + email maximum
Zero distraction—remove everything that doesn't convert
Promise immediate value (instant access)

Sales Pages:

Multiple CTAs as they scroll (every 2-3 sections)
Value stack before price reveal
Testimonials distributed throughout
Guarantee prominently displayed

OTO Pages:

NO exit links (accept or decline only)
Urgency-focused copy ("one-time only")
Price anchor (show "regular price" first)
Before/after emotional contrast
Decline link should be understated

Webinar Registration:

Date/time above the fold with timezone
Calendar add buttons immediately after signup
3 Secrets / What You'll Learn format
Countdown to live date

Quality Checklist

Does headline stop the scroll?
Is value stack compelling?
Is urgency real and believable?
Are CTAs prominent and action-oriented?
Would you convert from this page?

Additional Resources

Reference Files

references/page-frameworks.md
- Funnel page templates

funnel-pages

NPX Install

Tags

SKILL.md Content

Funnel Pages & Landing Pages

Core Objectives

Page Types

Core Page Structure

1. Headline + Subheadline (Above-the-Fold)

2. Lead Magnet or Offer Stack

3. Urgency & Scarcity

4. Social Proof & Testimonials

5. Offer Breakdown / Value Stack

6. Guarantee / Risk Reversal

7. Final CTA Section

Copywriting Style

Quality Standards

Visual & UX Notes

Page-Specific Features

OTO Pages

Opt-In Pages

Webinar Registration

Funnel Type Variations

Examples

Opt-In Page Example (Above-the-Fold)

Sales Page Value Stack Example

OTO Page Example (Urgency-Focused)

Guidelines

Quality Checklist

Additional Resources

Reference Files