Launch Your Startup and Reach Customers in Just 5 Minutes ⚡️¶
Now it’s time to build a clean landing page and optionally add a waitlist form to collect emails. Complete this guide and your project will be featured on our homepage ⭐️
Haven’t set things up yet? Clone the repo and start your local server first. Check the “Get Started” guide here → Let’s Begin Then, delete all the content in
/app/page.js
and paste the code below:
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 Content to Match Your Project Idea¶
Each component includes notes to help you write strong, marketing-friendly content—check the components folder for guidance. Congrats! You now have a professional landing page to show off your project 🎉
📨 (Optional) Collect Email Addresses¶
Want to build a waitlist?
- Set up your database.
- Uncomment the code in
/api/lead/route.js
to start saving emails directly.
🚀 (Optional) Customize the Main CTA Button¶
You can also replace the default call-to-action (CTA) button in the Hero, Pricing, and CTA sections with this component:
import ButtonLead from "@/components/ButtonLead";
// For Hero & CTA sections:
<ButtonLead />
// For the Pricing section (full-width style):
<ButtonLead extraStyle="!max-w-none !w-full" />
Ready to Launch?¶
Need help publishing? Follow the Deployment Guide for step-by-step instructions.
📊 Want to track site visits? Try DataFast — SaaSFast users get 30% off ❤️