Guides > Quick Start

Let's set up your startup's landing page and configure essential features to start collecting user interest right away.

🌟 Complete this guide to showcase your startup on homepage!

Prerequisites

If you haven't set up your local development environment yet, follow Getting Started guide first.

1. Set Up Your Landing Page

Replace the content of your homepage with pre-built components:

// app/page.tsx
import { CTA } from '@/components/sections/CTA/CTA';
import { Demo } from '@/components/sections/Demo';
import { FAQ } from '@/components/sections/FAQ';
import { Features } from '@/components/sections/Features';
import { Hero } from '@/components/sections/Hero';
import { Pricing } from '@/components/sections/Pricing';
import { Problem } from '@/components/sections/Problem';
import { TestimonialsList } from '@/components/ui/testimonialsList';
import { Footer } from '@/layouts/Footer';
import { Header } from '@/layouts/Header';
import { getSEOTags } from '@/libs/seo';

export default function Home() {
  return (
    <>
      <Header />
      <main className="pt-24">
        <Hero />
        <Problem />
        <Features />
        <Demo />
        <Pricing />
        <FAQ />
        <TestimonialsList />
        <CTA />
      </main>
      <Footer />
    </>
  );
}

2. Customize Your Content

Each component is designed to be easily customizable:

• 1

  🎯 Update Hero section with your value proposition

• 2

  ✨ Customize Features to showcase your product benefits

• 3

  💰 Configure Pricing plans that match your business model

• 4

  ❓ Add relevant FAQs for your target audience

3. Enable Email Collection (Optional)

To start collecting emails for your waitlist:

• 1

  Configure your MongoDB connection in .env.local

• 2

  Update the Lead model in /models/Leads/route.ts if needed

• 3

  The API endpoint is already set up at /api/lead/route.ts

4. Add Email Collection Button

Replace the main CTA buttons with email collection component:

// In your Hero.tsx or CTA.tsx
import { ButtonLead } from '@/components/ui/buttonLead';

// Standard button
<ButtonLead />

// Full-width button (for pricing sections)
<ButtonLead className="w-full" />

Ready to Launch? 🚀

Take your startup live by following our launch guide. Just a few more steps to reach your first users!