Ship in 5 Minutes
From zero to production in record time. Let's get your startup in front of customers.
We're going to build a beautiful landing page, set up authentication, and prepare for deployment in just 5 minutes.
1. Local Setup
If you haven't already, clone the repo and get it running locally. See the Get Started tutorial for details.
2. Build Your Landing Page
The project comes with a pre-built landing page in app/page.tsx. It includes all the essential sections: Hero, Features, Pricing, FAQ, and more.
Customize the structure by editing app/page.tsx. Here's what a typical setup looks like:
import Navbar from "./components/landing/Navbar";
import Hero from "./components/landing/Hero";
import Features from "./components/landing/Features";
import Steps from "./components/landing/Steps";
import Pricing from "./components/landing/Pricing";
import Testimonials from "./components/landing/Testimonials";
import FAQ from "./components/landing/FAQ";
import CTA from "./components/landing/CTA";
import Footer from "./components/landing/Footer";
export default function Home() {
return (
<main className="min-h-screen bg-background text-foreground overflow-x-hidden">
<Navbar />
<Hero />
<Features />
<Steps />
<Pricing />
<Testimonials />
<FAQ />
<CTA />
<Footer />
</main>
);
}Edit the copy, images, and configuration in lib/data.ts to match your brand. This centralized file controls the text for most components.
3. Add Essential Features
Authentication
Enable user login via Google and Email with NextAuth.js.
Database
Connect to Supabase or MongoDB to store user data.
Payments
Set up Stripe to start accepting payments and subscriptions.
4. Deploy to Production
Ready to launch? Deploy your app to Vercel in just a few clicks.
Follow our Deployment Guide to push your code to production and configure environment variables.
🎉 You're Live!
Congrats on shipping! Now you can focus on building your features and growing your user base.