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

# Customizing the Landing Page

> Edit sections, reorder layout, and update marketing content on the BunShip Pro landing page.

# Customizing the Landing Page

The landing page is built from modular sections — each one is a separate component file. You can edit content, reorder sections, or remove ones you don't need.

## How It's Built

The landing page route is at `apps/web/src/routes/index.tsx`. It imports and renders each section in order:

```tsx theme={null}
// apps/web/src/routes/index.tsx
function HomePage() {
  return (
    <div className="flex min-h-screen flex-col">
      <MarketingHeader />
      <main className="flex-1">
        <Hero />
        <SocialProof />
        <ProblemSolution />
        <Features />
        <CodePreview />
        <Stats />
        <Testimonials />
        <PricingPreview />
        <Faq />
        <Cta />
      </main>
      <MarketingFooter />
    </div>
  );
}
```

## Sections

Each section lives in its own file under `apps/web/src/components/landing/`:

| Section          | File                   | What It Shows                            |
| ---------------- | ---------------------- | ---------------------------------------- |
| Hero             | `hero.tsx`             | Main headline, subheading, CTA buttons   |
| Social Proof     | `social-proof.tsx`     | Logos or trust indicators                |
| Problem/Solution | `problem-solution.tsx` | Pain points and how BunShip solves them  |
| Features         | `features.tsx`         | Feature grid with icons and descriptions |
| Code Preview     | `code-preview.tsx`     | Syntax-highlighted code example          |
| Stats            | `stats.tsx`            | Key numbers (routes, components, etc.)   |
| Testimonials     | `testimonials.tsx`     | Customer/user quotes                     |
| Pricing Preview  | `pricing-preview.tsx`  | Plan cards with pricing                  |
| FAQ              | `faq.tsx`              | Frequently asked questions accordion     |
| CTA              | `cta.tsx`              | Final call-to-action with button         |

## Editing Content

Open the section file and change the text, links, or images. Each file is self-contained — the content is right there in the component.

For example, to change the hero headline, edit `apps/web/src/components/landing/hero.tsx` and find the heading text.

To update FAQ questions, edit `apps/web/src/components/landing/faq.tsx` and modify the questions array.

## Reordering Sections

Change the order in `apps/web/src/routes/index.tsx`. Move components up or down:

```tsx theme={null}
<main className="flex-1">
  <Hero />
  <Features /> {/* moved up */}
  <CodePreview />
  <PricingPreview /> {/* moved up */}
  <Testimonials />
  <Faq />
  <Cta />
</main>
```

## Removing Sections

Delete the component from `index.tsx` and optionally remove the import. For example, to remove the social proof bar:

1. Remove `<SocialProof />` from the JSX
2. Remove `SocialProof` from the import statement
3. Optionally delete `apps/web/src/components/landing/social-proof.tsx`

## Adding New Sections

1. Create a new file in `apps/web/src/components/landing/`, e.g. `integrations.tsx`
2. Export a component:

```tsx theme={null}
export function Integrations() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-6xl px-6">{/* Your content */}</div>
    </section>
  );
}
```

3. Add it to the barrel export in `apps/web/src/components/landing/index.ts` (if one exists) or import directly in `index.tsx`
4. Place it where you want in the page

## Header and Footer

The marketing header and footer are separate from the landing sections:

* **Header**: `apps/web/src/components/marketing-header.tsx` — Logo, navigation links, CTA button
* **Footer**: `apps/web/src/components/marketing-footer.tsx` — Links, social icons, copyright

Edit these files to change navigation links, add/remove menu items, or update the CTA button.

## Pricing Page

The dedicated pricing page is at `apps/web/src/routes/_marketing/pricing.tsx`. It shows detailed plan comparison and links to Stripe checkout. Update plan names, features, and prices there.

## Next Steps

* [Theming & Branding](/pro/theming) — Change the brand color and visual style
* [Adding Pages](/pro/adding-pages) — Add new marketing pages to the site