| 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)
- Hero — value prop + CTA + trust strip
- Big numbers / proof — quantified outcome
- Product tour — what you do (3-6 brains / features)
- How it works — 3-5 steps from signup to value
- Who it's for — segments / personas
- Comparison / vs alternatives — vs hire, vs incumbents, vs free
- Pricing — table + featured tier
- Social proof / testimonials — customer logos + named quotes
- Final CTA — re-pitch + signup
- 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.
