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...
ๆ่ฝ่ฏดๆ
name: landing-page-converter description: 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. metadata: openclaw: requires: bins: [] env: [] tags: - landing-page - sales-page - conversion - copywriting - marketing - ecommerce - funnel keywords: - "landing page template" - "product page" - "high converting page" - "sales page generator" - "conversion framework" - "ecommerce template" - "lead capture page" examples: - "Create a landing page for a webinar signup" - "Build a product sales page for Shopify" - "Design a lead magnet capture page" - "Generate a high-conversion squeeze page"
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:
- Hero โ Headline, subhead, CTA, hero image
- Social Proof โ Customer count, logos
- Problem โ Pain point in customer's words
- Agitation โ Why problem gets worse
- Solution โ Product intro + benefits
- Mechanics โ How it works (3 steps)
- Testimonials โ Social proof
- Offer โ What's included + bonuses
- Risk Reversal โ Guarantees
- Final CTA โ Urgency + button
For Product Pages (10-section flow):
- Nav โ Top horizontal navigation bar with menu links, logo, cart icon
- 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
- Social Proof โ First testimonials row: quotes, stars, avatars; social share icons above
- Social Proof #2 โ Second proof block: more testimonials or user-generated content feeds
- Benefits โ Icon-bulleted benefits list with short descriptions under each
- Ingredients/Materials โ Product ingredients or specs grid: images, labels, checkboxes
- Social Proof #3 โ Third proof area: video modal trigger, influencer quotes, or case studies
- Comparison โ Table comparing product vs alternatives: columns for features, pricing, checks
- FAQ โ Expandable questions list addressing common objections
- 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
- Immediately after hero (logo bar)
- Before offer section (testimonials)
- 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
ๅฆไฝไฝฟ็จใLanding Page Converterใ๏ผ
- ๆๅผๅฐ้พ่พAI๏ผWeb ๆ iOS App๏ผ
- ็นๅปไธๆนใ็ซๅณไฝฟ็จใๆ้ฎ๏ผๆๅจๅฏน่ฏๆกไธญ่พๅ ฅไปปๅกๆ่ฟฐ
- ๅฐ้พ่พAI ไผ่ชๅจๅน้ ๅนถ่ฐ็จใLanding Page Converterใๆ่ฝๅฎๆไปปๅก
- ็ปๆๅณๆถๅ็ฐ๏ผๆฏๆ็ปง็ปญๅฏน่ฏไผๅ