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:

// 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:

<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:

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

Adding New Sections

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

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

Add it to the barrel export in apps/web/src/components/landing/index.ts (if one exists) or import directly in index.tsx
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 — Change the brand color and visual style
Adding Pages — Add new marketing pages to the site

​Customizing the Landing Page

​How It’s Built

​Sections

​Editing Content

​Reordering Sections

​Removing Sections

​Adding New Sections

​Header and Footer

​Pricing Page

​Next Steps