Ship 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 ⭐️

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.js1import { Suspense } from 'react' 2import Header from "@/components/Header"; 3import Hero from "@/components/Hero"; 4import Problem from "@/components/Problem"; 5import FeaturesAccordion from "@/components/FeaturesAccordion"; 6import Pricing from "@/components/Pricing"; 7import FAQ from "@/components/FAQ"; 8import CTA from "@/components/CTA"; 9import Footer from "@/components/Footer"; 10 11export default function Home() { 12 return ( 13 <> 14 <Suspense> 15 <Header /> 16 </Suspense> 17 <main> 18 <Hero /> 19 <Problem /> 20 <FeaturesAccordion /> 21 <Pricing /> 22 <FAQ /> 23 <CTA /> 24 </main> 25 <Footer /> 26 </> 27 ); 28}
3. 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!
4. (Optional) To collect emails for a waitlist, set up a database and uncomment the code in /api/lead/route.js to save emails in your database.
5. (Optional) Replace the main call-to-action button in Hero, Pricing, and CTA with this: Hero.js1import ButtonLead from "@/components/ButtonLead"; 2 3 ... 4 </div> 5 6 {/* For the Hero & CTA use this 👇 */} 7 <ButtonLead /> 8 9 {/* For the Pricing use this instead 👇 */} 10 <ButtonLead extraStyle="!max-w-none !w-full" /> 11 12 <div> 13 ...
6. It's time to deploy! If you need help, here's a simple tutorial
7. (Optional) Track your traffic with DataFast — 30% OFF for WeeShip members ❤️

Join the Leaderboards

become an affiliate

Congrats on crushing the first steps, legend!

— Marc