Skip to main content

​
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/:
SectionFileWhat It Shows
Herohero.tsxMain headline, subheading, CTA buttons
Social Proofsocial-proof.tsxLogos or trust indicators
Problem/Solutionproblem-solution.tsxPain points and how BunShip solves them
Featuresfeatures.tsxFeature grid with icons and descriptions
Code Previewcode-preview.tsxSyntax-highlighted code example
Statsstats.tsxKey numbers (routes, components, etc.)
Testimonialstestimonials.tsxCustomer/user quotes
Pricing Previewpricing-preview.tsxPlan cards with pricing
FAQfaq.tsxFrequently asked questions accordion
CTActa.tsxFinal 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:
  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:
export function Integrations() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-6xl px-6">{/* Your content */}</div>
    </section>
  );
}
  1. Add it to the barrel export in apps/web/src/components/landing/index.ts (if one exists) or import directly in index.tsx
  2. Place it where you want in the page
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