ShipFast Docs

Appearance

Ship in 5 Minutes ​

Fresh

Source: shipfa.st/docs/tutorials/ship-in-5-minutes

Build a landing page and collect emails for a waitlist in 5 minutes.

Procedure ​

Step 1: Set Up the Landing Page ​

Delete everything in /app/page.js and paste:

javascript
import { Suspense } from 'react'
import Header from "@/components/Header";
import Hero from "@/components/Hero";
import Problem from "@/components/Problem";
import FeaturesAccordion from "@/components/FeaturesAccordion";
import Pricing from "@/components/Pricing";
import FAQ from "@/components/FAQ";
import CTA from "@/components/CTA";
import Footer from "@/components/Footer";

export default function Home() {
  return (
    <>
      <Suspense>
        <Header />
      </Suspense>
      <main>
        <Hero />
        <Problem />
        <FeaturesAccordion />
        <Pricing />
        <FAQ />
        <CTA />
      </main>
      <Footer />
    </>
  );
}

Step 2: Customize Copy ​

Edit each component to fit your business. See the Components section for tips on writing copy that converts.

Step 3: (Optional) Collect Emails ​

  1. Set up a database
  2. Uncomment the code in /api/lead/route.js
  3. Replace CTA buttons with ButtonLead:
javascript
import ButtonLead from "@/components/ButtonLead";

// For Hero & CTA:
<ButtonLead />

// For Pricing:
<ButtonLead extraStyle="!max-w-none !w-full" />

Step 4: Deploy ​

Follow the Deployment guide.

Step 5: (Optional) Track Traffic ​

Use DataFast for analytics -- 30% OFF for ShipFast members.

Verification Checklist ​

  • [ ] Landing page renders at localhost:3000
  • [ ] All sections display correctly (Hero, Problem, Features, Pricing, FAQ, CTA)
  • [ ] Copy is customized for your business
  • [ ] (Optional) Email collection saves to database
  • [ ] Site is deployed and accessible

See Also ​