Skip to main content

​
Landing Page Variants

By default you will get two landing pages variants, @/web/src/app/page.tsx is a minimal placeholder. You can easily switch up between full-featured landing pages using the provided component variants from @/features/home.

​
Landing Page 1 (Default Example)

Hero Light Hero Dark 
import BentoGrid from "@/features/home/bento-grid1";
import CallToAction from "@/features/home/call-to-action1";
import Contact from "@/features/home/contact1";
import FAQs from "@/features/home/faqs1";
import Features from "@/features/home/features1";
import Footer from "@/features/home/footer1";
import Hero from "@/features/home/hero1";
import Navigation from "@/features/home/navigation1";
import { Pricing } from "@/features/home/shared/pricing";
import Stats from "@/features/home/stats1";
import Testimonials from "@/features/home/testimonials1";

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col">
      <Navigation />
      <main className="flex-1">
        <Hero />
        <Features />
        <BentoGrid />
        <Stats />
        <Pricing />
        <Testimonials />
        <FAQs />
        <Contact />
        <CallToAction />
      </main>
      <Footer />
    </div>
  );
}

​
Landing Page 2 (Alternative)

Hero Light Hero Dark 
import Navigation from "@/features/home/navigation2";
import Hero from "@/features/home/hero2";
import Features from "@/features/home/features2";
import Stats from "@/features/home/stats2";
import { Pricing } from "@/features/home/shared/pricing";
import { Testimonials } from "@/features/home/testimonials2";
import FAQs from "@/features/home/faqs2";
import Footer from "@/features/home/footer2";
import CallToAction from "@/features/home/call-to-action2";
import Logos from "@/features/home/logos2";

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col">
      <Navigation />
      <main className="flex-1 w-full max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
        <Hero />
        <Features />
        <Stats />
        <Pricing />
        <Testimonials />
        <FAQs />
        <Logos />
        <CallToAction />
      </main>
      <Footer />
    </div>
  );
}
Tip: Mix and match any components from @/features/home/ to create your own custom landing page.
⌘I