> ## Documentation Index
> Fetch the complete documentation index at: https://beta-docs.replo.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Landing Page Principles

> The structure, message, and layout choices that make a landing page work.

Building landing pages that convert isn't about creativity, it's about clarity, focus, and removing friction. This guide covers each principle with a side-by-side: the pattern that converts, next to the common version that doesn't, so you can spot both in your own pages.

These principles apply whether you're selling products, software, services, or anything in between.

***

## Value Propositions & Headlines

Your headline is the most important element on the page. Visitors decide to stay or leave in 3 seconds. Vague headlines lose conversions immediately.

<CardGroup cols={2}>
  <Card title="❌ Vague & Generic">
    "Transform your life"

    "The best solution"

    "Premium quality products"

    "Get results faster"

    "The all-in-one solution"

    **Why this fails:** Says nothing about what you actually do or who it's for. Every competitor could use the same headline.
  </Card>

  <Card title="✅ Clear & Specific">
    **Ecommerce:** "Wireless earbuds that stay in during workouts"

    **SaaS:** "Project management for remote teams"

    **Services:** "Tax prep for freelancers and creators"

    **Coaching:** "Career coaching for mid-level managers"

    **Local:** "Same-day AC repair in Austin"

    **Why this works:** Immediately answers "What is this?" and "Who is it for?" No guessing required.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="❌ Feature-First">
    "Advanced technology"

    "Premium materials"

    "Full-service platform"

    "Comprehensive solution"

    **Why this fails:** Features don't communicate value. Buyers care about outcomes, not capabilities.
  </Card>

  <Card title="✅ Outcome-First">
    **Ecommerce:** "Earbuds that won't fall out, even during your toughest workout"

    **SaaS:** "Ship projects 2x faster without adding headcount"

    **Services:** "Get your taxes done in one hour, no forms, no confusion"

    **Info Product:** "Learn graphic design in 30 days without art school"

    **Why this works:** Leads with the transformation or result. Benefits over features.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="❌ Clever & Abstract">
    "Where innovation meets excellence"

    "Elevate your experience"

    "The future is here"

    **Why this fails:** Sounds nice but communicates nothing. Visitors leave because they don't understand what you do.
  </Card>

  <Card title="✅ Literal & Direct">
    **Ecommerce:** "Organic skincare that clears acne in 2 weeks"

    **SaaS:** "Video conferencing that actually works"

    **Services:** "Website design delivered in 7 days"

    **Local:** "Plumber that shows up on time, every time"

    **Why this works:** No interpretation required. Visitor knows immediately if this is for them.
  </Card>
</CardGroup>

***

## CTAs That Convert

Your CTA button is the gateway to conversion. Weak, vague, or competing CTAs kill conversion rates by 30-50%.

<CardGroup cols={2}>
  <Card title="❌ Passive & Vague">
    "Learn More"

    "Click Here"

    "Submit"

    "Get Started"

    "Sign Up"

    **Why this fails:** Doesn't tell visitors what happens next. "Learn More" could mean anything, docs, a video, another page.
  </Card>

  <Card title="✅ Direct & Action-Oriented">
    **Ecommerce:** "Add to Cart" / "Shop Now" / "Buy Now"

    **SaaS:** "Start Free Trial" / "Book a Demo"

    **Services:** "Schedule Consultation" / "Get a Quote"

    **Info Products:** "Enroll Now" / "Download Guide"

    **Lead Gen:** "Get My Free Estimate" / "Claim Your Spot"

    **Why this works:** Clear, specific action. Visitor knows exactly what they're committing to.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="❌ Multiple Competing CTAs">
    Hero section has:

    * "Shop Now"
    * "Learn More"
    * "Watch Video"
    * "See Reviews"

    **Why this fails:** Decision paralysis. Visitors don't know which action is right for them, so they pick none.
  </Card>

  <Card title="✅ Single Primary CTA">
    Hero section has:

    * "Add to Cart" (primary, high contrast)
    * "See Full Details" (secondary, text link)

    OR for lead gen:

    * "Get Free Quote" (primary)
    * "See Our Work" (secondary)

    **Why this works:** One clear path to conversion. Secondary option for browsers who aren't ready yet.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="❌ Mismatched Button Copy">
    Hero CTA: "Get Started"
    Benefits CTA: "Learn More"
    Testimonials CTA: "Try It Free"
    Footer CTA: "Sign Up Now"

    **Why this fails:** Inconsistent messaging creates confusion. Each CTA feels like a different offer.
  </Card>

  <Card title="✅ Consistent CTA Throughout">
    **Ecommerce example:**

    * Hero: "Add to Cart"
    * Benefits: "Add to Cart"
    * Testimonials: "Add to Cart"
    * Footer: "Add to Cart"

    **Service example:**

    * Hero: "Book Consultation"
    * Features: "Book Consultation"
    * Case Studies: "Book Consultation"

    **Why this works:** Reinforces the same action repeatedly. No confusion about what to do.
  </Card>
</CardGroup>

***

## Social Proof That Works

Generic testimonials don't build trust. Specific, quantifiable customer results do.

<CardGroup cols={2}>
  <Card title="❌ Generic Praise">
    "Great product! Highly recommend!"
    – Anonymous

    "Love this service, so easy!"
    – Happy Customer

    "Best purchase ever ⭐⭐⭐⭐⭐"
    – User123

    **Why this fails:** No credibility. Could be fake. Doesn't explain what results the customer got.
  </Card>

  <Card title="✅ Quantifiable Results">
    **Ecommerce:** "These leggings don't pill after 50+ washes, finally found workout gear that lasts"
    – Jessica M., Marathon Runner

    **SaaS:** "Cut project delivery time from 6 weeks to 3 weeks"
    – David Chen, VP Product at TechCo

    **Services:** "Sold our house in 8 days for \$40K over asking"
    – Mike & Sarah Rodriguez, Austin TX

    **Coaching:** "Got promoted to senior manager 3 months after our coaching sessions"
    – Amanda Park, Tech Industry

    **Why this works:** Specific outcome + real person + context = credible and relevant.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="❌ Hiding Customer Info">
    "Our customers love us"

    Testimonials with no names or locations

    Stock photo headshots

    Generic "★★★★★ Rated 5 stars"

    **Why this fails:** Feels fake. If customers are real, why hide their identity?
  </Card>

  <Card title="✅ Real People, Real Proof">
    **Ecommerce:** "10,000+ 5-star reviews" + specific testimonials with first name & last initial

    **B2B:** Full attribution: Name, Title, Company + logo

    **Services:** Name + Location + real photo

    **Local:** "Trusted by 500+ Austin homeowners" + Google reviews

    **Why this works:** Transparency builds trust. Real names prove legitimacy.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="❌ Opinion-Based Testimonials">
    "This is the best product I've ever used!"

    "I can't imagine life without this"

    "Absolutely love everything about this"

    **Why this fails:** Emotional but not actionable. Doesn't help buyer understand if it solves their specific problem.
  </Card>

  <Card title="✅ Outcome-Based Testimonials">
    **Ecommerce:** "My back pain disappeared after 2 weeks of using this chair"

    **SaaS:** "We shipped 3x more campaigns without adding staff"

    **Services:** "Our revenue increased 40% in 6 months"

    **Fitness:** "Lost 20 pounds in 12 weeks following this program"

    **Why this works:** Specific outcomes. Buyer can project similar results for themselves.
  </Card>
</CardGroup>

***

## Page Structure & Layout

How you organize your page determines whether visitors convert or bounce. Too much information overwhelms. Too little creates doubt.

<CardGroup cols={2}>
  <Card title="❌ Kitchen Sink Approach">
    * 15+ features or products listed
    * 3 different CTA options
    * Comparison table + pricing + bundles
    * Full site navigation with dropdowns
    * Related products carousel
    * Blog posts section
    * Newsletter signup
    * Live chat popup

    **Why this fails:** Overwhelms visitors with choices. Every option is a potential exit point.
  </Card>

  <Card title="✅ Focused Conversion Path">
    * 3-5 key benefits or products
    * Single primary CTA repeated 3-4 times
    * Minimal navigation (logo + cart/login only)
    * FAQ for common objections
    * One clear goal: purchase, signup, or lead

    **Why this works:** Guides visitors down one path. Fewer decisions = higher conversions.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="❌ Hiding What You're Selling">
    * Abstract lifestyle imagery only
    * No product shots until you scroll
    * Conceptual graphics
    * Video that doesn't show the product
    * "Coming soon" or vague descriptions

    **Why this fails:** Visitors want to see what they're buying. Hiding it creates suspicion or confusion.
  </Card>

  <Card title="✅ Show, Don't Tell">
    **Ecommerce:** Multiple product photos from different angles, model shots, close-ups of details

    **SaaS:** Real dashboard screenshots with actual UI

    **Services:** Portfolio samples, before/after, case study images

    **Physical Services:** Photos of your team, work in progress, finished results

    **Why this works:** Builds confidence. Visitor can visualize owning/using it.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="❌ Wall of Text">
    Long paragraphs explaining features

    Dense copy with no visual breaks

    Technical specifications only

    Product description that reads like a manual

    **Why this fails:** Visitors scan, they don't read. Long blocks of text get ignored.
  </Card>

  <Card title="✅ Scannable Content">
    Short headlines with supporting bullets

    Visual breaks every 2-3 sentences

    Icons, product shots, and diagrams

    Clear section headers

    White space between elements

    **Why this works:** Matches how people actually consume web content. Easy to scan = more engagement.
  </Card>
</CardGroup>

***

## Forms & Friction

Every form field you add reduces conversions by 10-20%. Ask for the minimum required, collect details later.

<CardGroup cols={2}>
  <Card title="❌ Long Forms">
    **Ecommerce checkout asking for:**

    * Account creation before purchase
    * Birthday, gender, phone
    * "How did you hear about us?"

    **Lead gen asking for:**

    * First name, last name
    * Email, phone
    * Company, role, company size
    * Budget, timeline, project details

    **Why this fails:** 8-9 fields = 40-60% form abandonment. Asking too much too soon.
  </Card>

  <Card title="✅ Minimal Friction">
    **Ecommerce:**

    * Guest checkout option
    * Only shipping/payment required
    * Account creation optional after purchase

    **Lead gen / Services:**

    * Name + Email (or just Email)
    * Phone only if you call to schedule
    * Everything else optional

    **SaaS:**

    * Email + Password only
    * Collect company info after signup

    **Why this works:** 2-3 fields = 5-10% abandonment. Get them in first, collect details later.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="❌ Unclear Value Exchange">
    Form headline: "Contact Us"

    Button: "Submit"

    No explanation of what happens next

    No timeline or expectations

    **Why this fails:** Visitor doesn't know what they're getting or what happens after submitting.
  </Card>

  <Card title="✅ Clear Expectations">
    **Services:**

    * Headline: "Get Your Free Project Quote"
    * Subtext: "We'll respond within 24 hours"
    * Button: "Get My Quote"

    **SaaS:**

    * Headline: "Start Your Free 14-Day Trial"
    * Subtext: "No credit card required"
    * Button: "Start Free Trial"

    **Ecommerce:**

    * Headline: "Join Our VIP List"
    * Subtext: "Get early access + 20% off"
    * Button: "Unlock My Discount"

    **Why this works:** Sets expectations and removes objections. Clarity reduces friction.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="❌ Requiring Too Much Upfront">
    **Ecommerce:** Must create account to checkout

    **SaaS:** Credit card required for free trial

    **Services:** Must schedule call before getting pricing

    **Why this fails:** High friction for first-time visitors. Many will abandon rather than commit.
  </Card>

  <Card title="✅ Low-Friction Entry">
    **Ecommerce:** Guest checkout, account optional after purchase

    **SaaS:** "No credit card required" free trial

    **Services:** Pricing visible, call optional for questions

    **Coaching/Courses:** Free preview or sample lesson before purchase

    **Why this works:** Let people experience value before asking for commitment. They'll happily convert once they see results.
  </Card>
</CardGroup>

***

## Mobile Optimization

70-80% of paid social traffic is mobile. If your page doesn't work on mobile, you're losing most of your conversions.

<CardGroup cols={2}>
  <Card title="❌ Desktop-First Design">
    * 3-column grid squeezed onto mobile
    * Small tap targets (\< 40px)
    * Horizontal scrolling required
    * Tiny text (\< 14px)
    * Pinch-to-zoom needed to read
    * Product images too small to see details

    **Why this fails:** Forces awkward interactions. Visitors bounce.
  </Card>

  <Card title="✅ Mobile-First Experience">
    * Single column layout, vertical scroll only
    * Large tap targets (48px minimum)
    * Readable text (16px+ body, 24px+ headlines)
    * Short, scannable sections
    * Large product images, swipeable galleries
    * Thumb-friendly CTA placement (middle or bottom)

    **Why this works:** Designed for how people actually use phones. Natural, frictionless experience.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="❌ Slow Load Times">
    Uncompressed images (5-10 MB each)

    Heavy video files autoplay

    Multiple tracking scripts

    No lazy loading

    **Why this fails:** Every second of delay = 7-10% conversion loss. Mobile networks are slower than WiFi.
  </Card>

  <Card title="✅ Speed-Optimized">
    Compressed images (\< 200 KB)

    Lazy loading for below-fold content

    Videos load on interaction, not autoplay

    Critical CSS inline, defer non-critical

    **Why this works:** Loads in under 3 seconds. Protects conversion rate and ad spend.
  </Card>
</CardGroup>

***

## Pricing & Transparency

Hiding information to "force conversations" backfires. Transparency builds trust and qualifies buyers faster.

<CardGroup cols={2}>
  <Card title="❌ Hidden Pricing or Info">
    **Ecommerce:** "Call for pricing" on products

    **Services:** "Contact us for rates"

    **SaaS:** "Custom pricing only"

    **When you have standard pricing**

    **Why this fails:** Creates friction. Buyers want to self-evaluate. They'll leave and check your competitor.
  </Card>

  <Card title="✅ Transparent Pricing">
    **Ecommerce:** Clear pricing on all products, sales tax calculated at checkout

    **Services:** Starting prices or packages visible ("Website design starting at \$5,000")

    **SaaS:** Show standard plans, use "Contact Sales" only for enterprise

    **Use "Contact for quote" only when:** Custom work, volume pricing, or complex implementations where pricing truly varies

    **Why this works:** Qualifies buyers faster. Those ready to buy can proceed immediately.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="❌ Confusing Pricing Structure">
    **Ecommerce:** Hidden fees (shipping surprise at checkout)

    **Services:** Vague packages with unclear deliverables

    **SaaS:** 12 different tiers with overlapping features

    **Why this fails:** Analysis paralysis. Buyer can't figure out what they need or what they'll actually pay.
  </Card>

  <Card title="✅ Clear Pricing">
    **Ecommerce:**

    * Prices visible on all products
    * Shipping cost shown early
    * All fees disclosed before purchase

    **Services:**

    * 3 clear packages (Good, Better, Best)
    * What's included in each
    * All deliverables listed

    **Why this works:** Easy decision. Buyer knows exactly what they get and what they'll pay.
  </Card>
</CardGroup>

***

## Copy & Messaging

The words you choose determine whether visitors understand your offer and trust you enough to convert.

<CardGroup cols={2}>
  <Card title="❌ Industry Jargon">
    "Leverage our synergistic solution"

    "Best-in-class premium offering"

    "Revolutionary disruptive innovation"

    "Enterprise-grade integrated platform"

    **Why this fails:** Sounds like every other brand. Says nothing concrete about what you actually do or sell.
  </Card>

  <Card title="✅ Plain Language">
    **Ecommerce:** "Leggings that don't fall down during yoga"

    **SaaS:** "Project management simple enough to use daily"

    **Services:** "Tax prep that doesn't require a finance degree"

    **Coaching:** "Career advice from someone who's actually done the job"

    **Why this works:** Direct, honest, human. Visitor immediately understands the value.
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="❌ We-Focused Copy">
    "We're the leading provider of..."

    "Our award-winning product offers..."

    "We've been in business since..."

    "Our mission is to..."

    **Why this fails:** Visitor doesn't care about you. They care about solving their problem.
  </Card>

  <Card title="✅ You-Focused Copy">
    **Ecommerce:** "You'll look great and feel comfortable all day"

    **SaaS:** "You'll ship projects 2x faster"

    **Services:** "You'll get more leads without more ad spend"

    **Coaching:** "You'll land that promotion within 6 months"

    **Why this works:** Makes it about the buyer's outcome. Shows immediate relevance.
  </Card>
</CardGroup>

***

## Industry-Specific Tips

Each vertical has unique considerations. Here are key practices that apply specifically to different types of businesses.

<CardGroup cols={2}>
  <Card title="Ecommerce: Show Multiple Product Angles">
    ❌ Single product photo, small thumbnail

    ✅ 5-7 photos showing different angles, zoom capability, model wearing/using product, close-ups of details

    **Why:** Buyers can't touch products online, photos replace physical inspection
  </Card>

  <Card title="SaaS: Show Real Dashboard UI">
    ❌ Abstract illustrations, conceptual graphics

    ✅ Actual product screenshots with real (anonymized) data showing key workflow

    **Why:** Buyers want to see what they're signing up for before committing
  </Card>

  <Card title="Services: Show Your Work">
    ❌ Team photo and generic promises

    ✅ Before/after examples, case study results, portfolio samples, process breakdown

    **Why:** Services are intangible, show proof of your capability
  </Card>

  <Card title="Local Business: Show Social Proof from Your Area">
    ❌ "Trusted nationwide" / Generic 5-star rating

    ✅ "Trusted by 500+ Austin homeowners" / Google reviews with customer locations

    **Why:** Local buyers want to see you've served their community
  </Card>

  <Card title="Coaching/Courses: Provide Preview">
    ❌ Must purchase to see any content

    ✅ Free sample lesson, preview video, downloadable PDF

    **Why:** Let people experience your teaching style before buying
  </Card>

  <Card title="High-Ticket Services: Lead with Credentials">
    ❌ Generic "experienced professional" claim

    ✅ Years in business, certifications, notable clients, case study with ROI

    **Why:** High-ticket buyers need more trust signals before committing
  </Card>
</CardGroup>

***

## When to Break These Rules

Rules exist for a reason, but context matters:

**Hidden pricing works when:**

* Custom work where pricing genuinely varies (home remodeling, enterprise software with complex implementations)
* High-ticket B2B sales requiring discovery calls
* You need to qualify leads before quoting

**Long forms work when:**

* Qualifying high-value leads (\$50K+ services)
* Form itself filters out bad-fit customers
* You need information to provide accurate quote

**Multiple CTAs work when:**

* Different visitor segments need different paths (Buy Now vs Get Quote)
* You're testing which offer converts better
* Secondary CTA is clearly differentiated and non-competing

**The test:** Does breaking the rule improve your actual conversion metrics (CVR, CAC, AOV, LTV)? If yes, keep it. If no, follow the proven pattern.