> ## Documentation Index
> Fetch the complete documentation index at: https://shipfast.so/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Component Order
> How to arrange components for maximum conversions
The order of components on your landing page matters. Here's the proven structure that converts.
## Recommended Order
**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
```tsx /app/(site)/page.tsx theme={null}
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 (
<>
)
}
```
## Alternative Orders
**For SaaS Products**
```
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.
**For Boilerplates/Templates**
```
1. Hero
2. Problem (setup pain)
3. Features (what's included)
4. Testimonials (fast results)
5. Pricing
6. FAQ
```
**Why:** Developers relate to setup frustration. Lead with that.
**For High-Ticket Products**
```
1. Hero
2. Problem
3. Testimonials (early, build trust)
4. Features
5. More Testimonials
6. Pricing
7. FAQ
```
**Why:** Expensive = more proof needed. Double down on testimonials.
**Single Page Minimal**
```
1. Hero
2. Features (brief)
3. Pricing
```
**Why:** Some products don't need the full treatment. Keep it simple.
## The Psychology
> **Why Problem before Features?**
>
> 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!"
> **Why Pricing before Testimonials?**
>
> 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"
> **Why FAQ at the end?**
>
> 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:
```tsx theme={null}
{/* Primary CTA */}
{/* Show pain, no CTA yet */}
{/* Let them explore */}
{/* Repeat CTA */}
{/* Main conversion point */}
{/* Final CTA */}
```
> [!TIP]
>
> 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.
> [!WARNING]
>
> Don't overthink it. Start with the recommended order. Only change if you have data showing it's not working.
> [!TIP]
>
> The best order is the one that converts. Use analytics to see where people drop off and adjust accordingly.
> [!TIP]
>
> 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.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.