saas-landing-page-anatomy

name	saas-landing-page-anatomy
description	Use when designing a complete SaaS marketing landing page. Covers the canonical 9-section structure, how to choose which sections you need, and the order that converts.

SaaS Landing Page Anatomy

The canonical SaaS landing page has 9 sections. You don't need all of them, but you should know what's possible.

The 9 sections (in order)

1. Hero — value prop + CTA + trust strip
2. Big numbers / proof — quantified outcome
3. Product tour — what you do (3-6 brains / features)
4. How it works — 3-5 steps from signup to value
5. Who it's for — segments / personas
6. Comparison / vs alternatives — vs hire, vs incumbents, vs free
7. Pricing — table + featured tier
8. Social proof / testimonials — customer logos + named quotes
9. Final CTA — re-pitch + signup
10. Footer — second nav + legal

Which sections you need

For a SaaS in 2025, the must-haves:

• Hero
• Product tour
• Pricing (or "Talk to us" if you're SaaS-enterprise)
• Footer

Strong adds:

• Big numbers (if you have real metrics)
• Comparison (if you have competitors)
• Final CTA

Conditional:

• Testimonials (if you have real ones)
• How it works (if your value-add is process-driven)

Section order

Standard: Hero → Big numbers → Product → How → Who → Compare → Pricing → Social → CTA → Footer

The two flexible spots: "Who" can move before or after "Product"; "Comparison" can move to anywhere after "Product".

Section spacing

Vertical padding alternates for rhythm:

• 100-140px on Hero
• 80-100px on standard sections
• 60-80px on lighter sections (eg testimonials)

When to break the canonical order

For specific product types:

• Free-tier focused: Pricing earlier (before "How")
• Enterprise / sales-led: "Talk to us" earlier, no pricing table
• Marketplace / B2B: "Who it's for" earlier (segment selection)
• API products: Product tour heavier, code samples woven in

Common mistakes

• 20 sections — user gives up scrolling
• Pricing buried at bottom — user can't find it
• "How it works" before "What is it" — premature explanation
• Social proof at the bottom — wasted (most users don't reach it)
• No final CTA — user scrolls back up to find one

Where this fits in X3 Compass

X3 Compass uses all 9 sections: Hero / Big numbers / 6 brains / How / 100 skills / Use cases / ROI calc / Compare / Corpus credibility / Pricing / Guarantees / FAQ / Final CTA / Footer.