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 ⭐️
-
If you havent’t already, clone the repo and run the server locally. See the Get Started tutorial.
-
Delete everything in
/app/page.js
, and paste this:
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 />
</>
);
}
-
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.
-
(Optional) Replace the main call-to-action button in
Hero
,Pricing
, andCTA
with this:
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>
...
-
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