TutorialsShip in 5 minutes

Let's get your startup in front of your customers in 5 minutes ⚡️

We're building a beautiful landing page and adding forms to collect emails for a waitlist (optional)

Finish this tutorial to be featured on our homepage ⭐️

  • If you havent't already, clone the repo and run the server locally. See the Get Started tutorial.
  • Delete everything in the /pages/index.js file, and paste this:


    1import Header from "@/components/Header";
    2import Hero from "@/components/Hero";
    3import Pricing from "@/components/Pricing";
    4import FAQ from "@/components/FAQ";
    5import CTA from "@/components/CTA";
    6import Footer from "@/components/Footer";
    8export default function Home() {
    9  return (
    10    <>
    11      <Header />
    12      <main>
    13        <Hero />
    14        <Pricing />
    15        <FAQ />
    16        <CTA />
    17      </main>
    18      <Footer />
    19    </>
    20  );
  • Edit the copy to fit your business logic. Each component has tips to help you write copy that sells—see components section. Congrats you have a beautiful landing page to show!
  • (Optional) To collect emails for a waitlist, set up a database.
  • Replace the main call-to-action button in Hero, Pricing, and CTA by this:


    1import ButtonLead from "@/components/ButtonLead";
    3  ...
    4  </div>
    6  {/* For the Hero & CTA use this 👇 */}
    7  <ButtonLead />
    9  {/* For the Pricing use this instead 👇 */}
    10  <ButtonLead extraStyle="!max-w-none !w-full" />
    12  <div>
    13  ...
  • It's time to deploy! If you need help, here's a simple tutorial

    If you collect emails for the waitlist, add your database connection string to MONGODB_URI in your hosting provider environment variables.
MarcOnce you have a link to show, send it to me on Twitter or by email so I can showcase your app on the ShipFast homepage!

Congrats on making it that far, legend!

— Marc