TutorialsShip in Minutes

Ship in minutes

Let’s get your startup in front of your customers in 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 ⭐️

  1. If you havent’t already, clone the repo and run the server locally. See the Get Started tutorial.

  2. Delete everything in /app/page.js, and paste this:

/app/page.js
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 />
    </>
  );
}
  1. 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!

  2. (Optional) To collect emails for a waitlist, set up a database.

  3. (Optional) Replace the main call-to-action button in Hero, Pricing, and CTA with this:

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

    Join the Leaderboards to feature your app and stay motivated!

    You can also become an affiliate and earn 30% per sale.

    Congrats on crushing the first steps, legend!

    -Marc