landing-page-converter

Build high-converting landing pages and product sales pages using proven 10-section conversion frameworks. Includes Hero → Social Proof → Benefits → CTA flow for both lead capture and e-commerce pages.

Safety Notice

This listing is from the official public ClawHub registry. Review SKILL.md and referenced scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "landing-page-converter" with this command: npx skills add cameron-jovan/landing-page-converter

Landing Page Converter Skill

Convert any offer into a high-converting landing page or product page using the proven templates from the Jovan Industries conversion framework.

The Two Templates

1. LANDING PAGE Template

Used for: Lead magnets, email captures, webinar signups, free trials

┌─────────────────────────────────────────────────────────┐
│                     HERO SECTION                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │ Main Headline (1 line, punchy, benefit-driven)   │   │
│  └─────────────────────────────────────────────────┘   │
│  ┌─────────────────────────────────────────────────┐   │
│  │ Sub-headline (explain the main benefit)         │   │
│  └─────────────────────────────────────────────────┘   │
│  ┌─────────────────────────────────────────────────┐   │
│  │ PRIMARY CTA BUTTON (big, contrasting color)     │   │
│  └─────────────────────────────────────────────────┘   │
│              [Product/hero image]                       │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│                   SOCIAL PROOF BAR                      │
│    "TRUSTED BY 10,000+ [理想Customers]"                │
│         [Logo] [Logo] [Logo] [Logo] [Logo]            │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│                   PROBLEM SECTION                       │
│         "Struggling with [PAIN POINT]?"                │
│    Describe the problem in customer's words            │
│         [Image: person looking frustrated]             │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│                   AGITATION SECTION                    │
│    "Here's why [PAIN POINT] keeps getting worse..."    │
│    Make the problem feel more urgent/painful           │
│         [Image: problem escalation visuals]            │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│                   SOLUTION SECTION                      │
│  ┌─────────────────────────────────────────────────┐   │
│  │  "Introducing [PRODUCT NAME]"                   │   │
│  │                                                 │   │
│  │  [Product image - large, clear]                 │   │
│  └─────────────────────────────────────────────────┘   │
│    List 3-5 key benefits (not features)                │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│                   MECHANICS SECTION                    │
│    "How it works - 3 simple steps"                     │
│    Step 1 → Step 2 → Step 3 (with icons/images)       │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│                 TESTIMONIALS SECTION                   │
│    [★ 5.0] "Changed my life..."                       │
│    - Name, Title                                       │
│    [★ 5.0] "Best investment..."                       │
│    - Name, Title                                       │
│    [★ 5.0] "Finally works..."                         │
│    - Name, Title                                       │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│                    OFFER SECTION                       │
│    "Here's what you get:"                             │
│    ✓ [Benefit 1]                                      │
│    ✓ [Benefit 2]                                      │
│    ✓ [Benefit 3]                                      │
│    + [Bonuses]                                        │
│         [PRIMARY CTA BUTTON]                          │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│                   RISK REVERSAL                        │
│    "Your protection:"                                  │
│    ✓ [Risk Reversal 1 - usually money-back]           │
│    ✓ [Risk Reversal 2]                                │
│    ✓ [Risk Reversal 3]                                │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│                FINAL CTA SECTION                       │
│    "Start [DESIRED ACTION] Today"                     │
│    [Countdown timer if scarcity]                       │
│         [PRIMARY CTA BUTTON]                          │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│                       FOOTER                           │
│    [Links] [Privacy] [Terms] [Contact]                │
└─────────────────────────────────────────────────────────┘

2. PRODUCT PAGE Template

Used for: Direct product sales, e-commerce, digital products

Build product pages EXCLUSIVELY using this 10-section flow from top to bottom:

┌─────────────────────────────────────────────────────────┐
│ 1. NAV (Top Menu)                                      │
│  [Logo]  [Shop] [About] [Blog] [Contact]      [Cart 🛒] │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│ 2. BUYBOX (Hero Product Module)                        │
│  ┌─────────────────────┬───────────────────────────┐  │
│  │                     │  ★★★★★ (128 reviews)     │  │
│  │   [Product Image]   │  PRODUCT NAME              │  │
│  │                     │  $XX.XX                    │  │
│  │                     │  [Color: ▼] [Size: ▼]     │  │
│  │                     │  [ADD TO CART]            │  │
│  │                     │  [Buy Now]                │  │
│  └─────────────────────┴───────────────────────────┘  │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│ 3. SOCIAL PROOF #1 (Testimonials Row 1)               │
│  "⭐⭐⭐⭐⭐ Loved by 10,000+ customers"                 │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐     │
│  │ "Quote..."  │ │ "Quote..."  │ │ "Quote..."  │     │
│  │ - Name      │ │ - Name      │ │ - Name      │     │
│  │ [avatar]    │ │ [avatar]    │ │ [avatar]    │     │
│  └─────────────┘ └─────────────┘ └─────────────┘     │
│        ↗              ↗              ↗               │
│  [FB] [TW] [IG] [PI]  (share icons above)            │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│ 4. SOCIAL PROOF #2 (More Proof / UGC)                 │
│  "Here's what real customers are sharing..."          │
│  [Customer photo 1] [Customer photo 2]               │
│  [Customer photo 3] [Customer photo 4]               │
│  "Posted on Instagram/Twitter..."                      │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│ 5. BENEFITS (Icon-Bulleted List)                      │
│  ┌─────────────────────────────────────────────────┐   │
│  │  [icon] BENEFIT 1                              │   │
│  │        Short description of this benefit       │   │
│  ├─────────────────────────────────────────────────┤   │
│  │  [icon] BENEFIT 2                              │   │
│  │        Short description of this benefit       │   │
│  ├─────────────────────────────────────────────────┤   │
│  │  [icon] BENEFIT 3                              │   │
│  │        Short description of this benefit       │   │
│  ├─────────────────────────────────────────────────┤   │
│  │  [icon] BENEFIT 4                              │   │
│  │        Short description of this benefit       │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│ 6. INGREDIENTS/MATERIALS (Specs Grid)                │
│  "What's Inside / Product Specifications"             │
│  ┌─────────────┬─────────────┬─────────────┐          │
│  │  [img]      │  [img]      │  [img]      │          │
│  │  Label 1   │  Label 2   │  Label 3   │          │
│  │  ✓ Check   │  ✓ Check   │  ✓ Check   │          │
│  └─────────────┴─────────────┴─────────────┘          │
│  [Full ingredient list + detailed specs]              │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│ 7. SOCIAL PROOF #3 (Video / Case Studies)             │
│  [▶ Play Video]  "See how it works"                   │
│  ┌─────────────────────────────────────────────────┐   │
│  │  "My Results After 30 Days"                    │   │
│  │  [Before] → [After]                           │   │
│  │  - Name, Location                             │   │
│  └─────────────────────────────────────────────────┘   │
│  [Influencer quote + handle]                           │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│ 8. COMPARISON (Table)                                 │
│                 ┌───────────┬───────────┬───────────┐  │
│                 │  OUR PRODUCT │ Competitor A │ Competitor B │
│  ├──────────────┼───────────┼───────────┼───────────┤  │
│  │ Feature 1    │     ✓     │     ✓     │     ✗     │
│  ├──────────────┼───────────┼───────────┼───────────┤  │
│  │ Feature 2    │     ✓     │     ✗     │     ✓     │
│  ├──────────────┼───────────┼───────────┼───────────┤  │
│  │ Price        │   $XX     │   $XX     │   $XX     │
│  ├──────────────┼───────────┼───────────┼───────────┤  │
│  │ Quality      │  ★★★★★   │   ★★★     │   ★★      │
│  └──────────────┴───────────┴───────────┴───────────┘  │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│ 9. FAQ (Accordion)                                     │
│  ▼ Question 1?                                         │
│    Answer text here...                                 │
│  ▶ Question 2?                                         │
│  ▶ Question 3?                                        │
│  ▶ Question 4?                                        │
└─────────────────────────────────────────────────────────┘
                         ↓
┌─────────────────────────────────────────────────────────┐
│ 10. CTA (Final Call-to-Action)                        │
│  ┌─────────────────────────────────────────────────┐   │
│  │  "Ready to experience [BENEFIT]?"               │   │
│  │                                                 │   │
│  │        [★ LARGE ADD TO CART BUTTON ★]          │   │
│  │                                                 │   │
│  │  🛡️ Money-back guarantee  │  🚚 Free shipping   │   │
│  │  🔒 Secure checkout      │  ⚡ Ships today     │   │
│  └─────────────────────────────────────────────────┘   │
│  ──────────────────────────────────────────────────    │
│  [Nav] [Shop] [About] [Contact] [Privacy] [Terms]     │
└─────────────────────────────────────────────────────────┘

Section Breakdown

1. NAV (Top Menu)

  • Horizontal navigation bar
  • Logo on left
  • Menu links center (Shop, About, Blog, Contact)
  • Cart icon on right with item count badge

2. BUYBOX (Hero Product Module)

  • Product image on left (large, clear)
  • Product name prominently displayed
  • Social proof callout ABOVE the product name (star rating + review count)
  • Price clearly visible
  • Variant selectors (color, size, quantity)
  • Primary CTA: "Add to Cart"
  • Secondary CTA: "Buy Now"

3. SOCIAL PROOF #1 (Testimonials Row 1)

  • Trust headline ("Loved by X+ customers")
  • 3 testimonial cards in a row
  • Each: quote, star rating, customer name, avatar
  • Social share icons above the testimonials

4. SOCIAL PROOF #2 (More Proof / UGC)

  • User-generated content section
  • Customer photos in grid layout
  • "Posted on Instagram/Twitter" attribution
  • More testimonials or social mentions

5. BENEFITS (Icon-Bulleted List)

  • 4-6 benefits with icons
  • Short description under each bullet
  • Icons should match brand aesthetic

6. INGREDIENTS/MATERIALS (Specs Grid)

  • Visual grid of key ingredients/materials
  • Images for each ingredient
  • Labels/checkmarks indicating what's included
  • Full ingredient list or specs table below

7. SOCIAL PROOF #3 (Video / Case Studies)

  • Video modal trigger button ("Watch how it works")
  • Before/after case study with customer name + location
  • Influencer quote with social handle

8. COMPARISON (Table)

  • Product vs alternatives comparison
  • Feature-by-feature with checkmarks/X marks
  • Price comparison column
  • Quality/rating comparison

9. FAQ (Accordion)

  • Expandable/collapsible questions
  • Address common objections
  • 4-8 Q&A pairs with clear answers

10. CTA (Final Call-to-Action)

  • Large, prominent "Add to Cart" button
  • Urgency headline
  • Trust badges (guarantee, shipping, security)
  • Footer navigation below (same as nav but simplified)

How to Use This Skill

Step 1: Gather Content

Before building, collect:

  • Product/offer name
  • Target audience
  • Primary pain point you're solving
  • Key benefits (3-5)
  • Product features/specs
  • Price and offers
  • Testimonials (or placeholders)
  • Brand colors/fonts

Step 2: Choose Template

  • Landing Page: Lead capture, webinar, free trial, email signup
  • Product Page: Direct product sale, e-commerce

Step 3: Map Content to Template

For Landing Pages:

  1. Hero → Headline, subhead, CTA, hero image
  2. Social Proof → Customer count, logos
  3. Problem → Pain point in customer's words
  4. Agitation → Why problem gets worse
  5. Solution → Product intro + benefits
  6. Mechanics → How it works (3 steps)
  7. Testimonials → Social proof
  8. Offer → What's included + bonuses
  9. Risk Reversal → Guarantees
  10. Final CTA → Urgency + button

For Product Pages (10-section flow):

  1. Nav → Top horizontal navigation bar with menu links, logo, cart icon
  2. Buybox → Central product buy module: image left, title/pricing right, add-to-cart button, variant selectors. Ensure product name is clearly seen, with a social proof callout on top of it
  3. Social Proof → First testimonials row: quotes, stars, avatars; social share icons above
  4. Social Proof #2 → Second proof block: more testimonials or user-generated content feeds
  5. Benefits → Icon-bulleted benefits list with short descriptions under each
  6. Ingredients/Materials → Product ingredients or specs grid: images, labels, checkboxes
  7. Social Proof #3 → Third proof area: video modal trigger, influencer quotes, or case studies
  8. Comparison → Table comparing product vs alternatives: columns for features, pricing, checks
  9. FAQ → Expandable questions list addressing common objections
  10. CTA → Final urgent call-to-action: large button, guarantee badges, footer nav below

Step 4: Output Format

Output as:

  • Figma-ready spec - with exact copy, images needed, colors
  • HTML structure - semantic HTML with placeholder content
  • Copy document - just the text/headlines for your designer

Conversion Principles

Headline Formula

  • [Emotion] + [Specific Result] + [Timeframe]
  • Example: "Wake Up to Glowing Skin in 7 Days"

CTA Button Rules

  • Use contrasting color from brand
  • Action verb + benefit: "Get My Free Guide"
  • Above the fold AND at bottom
  • Big, clickable (min 44px height)

Social Proof Placement

  1. Immediately after hero (logo bar)
  2. Before offer section (testimonials)
  3. Above the fold (star ratings)

Risk Reversal Must-Haves

  • Money-back guarantee (时长)
  • "No questions asked"
  • Free shipping (if applicable)
  • "Secure checkout"

Example: SoftEditSkin Product Page

Product: Ceramide Night Cream Price: $48 Pain Point: Dry, irritated skin

HERO:
- Headline: "Wake Up to Soft, Calm Skin"
- Subhead: "The ceramide-rich cream that repairs your barrier overnight"
- CTA: "Add to Cart - $48"
- Image: Product shot with soft lighting

QUICK OVERVIEW:
- ✓ Repairs skin barrier
- ✓ Deep hydration
- ✓ Fragrance-free
- ✓ Ships free

BENEFITS:
- ✓ Ceramide Complex - Locks in moisture for 24hr hydration
- ✓ Shea Butter - Softens without greasiness  
- ✓ Niacinamide - Calms redness and irritation
- ✓ Vitamin E - Fights free radicals

HOW TO USE:
1. Apply to clean face nightly
2. Massage in upward strokes
3. Wake up with glowing skin

TESTIMONIALS:
- "My skin has never felt better" - Sarah M.
- "Worth every penny" - Jessica L.

FAQ:
- "How long until I see results?" → "Most see improvement in 7 days"
- "Is it for sensitive skin?" → "Yes, fragrance-free and hypoallergenic"

File Structure

landing-page-converter/
├── SKILL.md                 # This file
├── templates/
│   ├── landing-page.html    # Landing page HTML template
│   └── product-page.html   # Product page HTML template
└── examples/
    ├── softedit-skin.md    # Example: product page
    └── tiny-edit.md        # Example: landing page

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open Registry RecordOpen in ClawHub

Related Skills

Related by shared tags or category signals.

General

Conversion Copywriting Engine

Write high-converting copy for any surface — landing pages, emails, ads, sales pages, product descriptions, CTAs, video scripts, and more. Complete conversio...

Registry SourceRecently Updated
3480Profile unavailable
General

Copywriting Mastery

Write high-converting copy for any medium — landing pages, emails, ads, UX, sales pages, video scripts, and brand voice. Complete methodology with frameworks...

Registry SourceRecently Updated
2550Profile unavailable
General

Sales Funnel Engine

Design, build, optimize, and scale sales funnels for any business model. Use when mapping customer journeys, diagnosing conversion leaks, building landing pa...

Registry SourceRecently Updated
3251Profile unavailable
Coding

OPC Landing Page Manager

Landing page strategy, copywriting, design, and code generation for solo entrepreneurs. From product idea to a complete, self-contained, conversion-optimized...

Registry SourceRecently Updated
00Profile unavailable