Skip to main content
The order of components on your landing page matters. Here’s the proven structure that converts.
1

Header

Always first. Navigation + CTA button.Goal: Let visitors explore or take action immediately.
2

Hero

First thing visitors see after header.Goal: Hook them in 3 seconds. Clear value proposition + main CTA.Choose one:
  • Hero - Side-by-side (text + image)
  • HeroCentered - Centered layout
3

Social Proof (Optional)

Right after hero if you have it.Goal: Build instant credibility.Use if you have:
  • Company logos (customers/partners)
  • User count (“Join 10,000+ users”)
  • Quick testimonial
4

Problem

Show the pain they’re experiencing.Goal: Make them feel the frustration, then tease the solution.Skip if: You’re selling something new (no existing pain to solve).
5

Features

What your product does.Goal: Show capabilities. Let them explore what’s included.Choose one:
  • Features - Interactive carousel with screenshots
  • FeaturesAccordion - Collapsible list (more features)
6

Pricing

Show your plans and prices.Goal: Convert interest into purchase.Place here because: They now understand what you offer and why it matters.
7

Testimonials

Real customer results.Goal: Validate everything you’ve claimed. Remove doubt.Why after pricing: Pushes hesitant buyers over the edge.
8

FAQ

Answer objections.Goal: Handle last-minute questions that block purchase.Place last because: Catches people right before they bounce or buy.
9

Footer

Always last. Links, legal, social.Goal: Provide navigation and required legal pages.

​
Quick Reference

/app/(site)/page.tsx
import Header from '@/components/Header'
import Hero from '@/components/Hero'
import Problem from '@/components/Problem'
import Features from '@/components/Features'
import Pricing from '@/components/Pricing'
import TestimonialsGrid from '@/components/TestimonialsGrid'
import FAQ from '@/components/FAQ'
import Footer from '@/components/Footer'

export default function Home() {
  return (
    <>
      <Header />
      <main>
        <Hero />
        <Problem />
        <Features />
        <Pricing />
        <TestimonialsGrid />
        <FAQ />
      </main>
      <Footer />
    </>
  )
}

​
Alternative Orders

    1. Hero
    2. Features (show what it does first)
    3. Testimonials (prove it works)
    4. Pricing
    5. FAQ
Why: SaaS buyers want to understand features before pricing.

​
The Psychology

People buy solutions to problems, not features. Make them feel the pain first, then show how you solve it.Bad order: Features → Problem → “Huh, why do I need this?”Good order: Problem → Features → “Oh! This solves my exact issue!”
Pricing creates sticker shock. Testimonials right after reassure them it’s worth it.Flow:
  1. See price → “That’s expensive”
  2. Scroll down → See 10 people who paid and got results
  3. Think → “Okay, maybe it’s worth it”
FAQ catches people right before they leave. They’ve seen everything but have one last question.If FAQ is too early, they haven’t built enough interest to care about the answers.

​
Components to Skip

Not every landing page needs every component:

Skip Problem if

  • Selling something new/innovative
  • No clear existing pain
  • Positive-only messaging works better

Skip Features if

  • Dead simple product (one feature)
  • Hero explains everything
  • More focus on results than capabilities

Skip Testimonials if

  • Brand new product (no users yet)
  • Better to launch without than fake them
  • Add later when you have real feedback

Skip FAQ if

  • Self-explanatory product
  • No common objections
  • Everything answered in other sections

​
Adding CTAs Throughout

Don’t wait until pricing. Add CTAs strategically: 
<Hero>
  <ButtonCheckout />  {/* Primary CTA */}
</Hero>

<Problem>
  {/* Show pain, no CTA yet */}
</Problem>

<Features>
  {/* Let them explore */}
</Features>

<div className="text-center py-12">
  <ButtonCheckout />  {/* Repeat CTA */}
</div>

<Pricing>
  <ButtonCheckout />  {/* Main conversion point */}
</Pricing>

<TestimonialsGrid />

<div className="text-center py-12">
  <ButtonCheckout />  {/* Final CTA */}
</div>

<FAQ />
Repeat your CTA every 1.5-2 screen heights. When someone’s ready to buy, make it easy.

​
Mobile Considerations

On mobile, visitors scroll more. Adjust accordingly:
  • Keep Hero short - Get to value fast
  • Condense Problem - Mobile users have less patience
  • Prioritize Pricing - They might not scroll to the bottom
  • FAQ can be last - Mobile users who scroll will find it

​
Testing Your Order

1

Show it to someone for 5 seconds

Can they explain what you do? If not, hero needs work.
2

Watch them scroll

Where do they stop reading? That’s where you’re losing them.
3

Check analytics

What % scroll to pricing? To FAQ? Adjust order based on where people drop off.
4

A/B test

Try Problem → Features vs Features → Problem. See what converts better.
Don’t overthink it. Start with the recommended order. Only change if you have data showing it’s not working.
The best order is the one that converts. Use analytics to see where people drop off and adjust accordingly.
Every component should answer one question: Hero = “What is this?”, Problem = “Why do I need it?”, Features = “What can it do?”, Pricing = “How much?”, etc.