GuidesDeploy in Minutes

Getting your SaaS up and running in minutes! 🚀

We are going to build a simple landing page and adding a form to collect the emails of our users.

1. If you need to clone the repo, followthis tutorial

2. Delete everything in the/app/page.tsxand paste the following code:

import Header from "@/components/ui/Header";
import Hero from "@/components/ui/Hero";
import FeaturesSection from "@/components/sections/FeaturesSection";
import PerfectForSection from "@/components/sections/PerfectForSection";
import Stats from "@/components/sections/Stats";
import PricingSection from "@/components/sections/PricingSection";
import Faqs from "@/components/sections/Faqs";
import CallToActionSection from "@/components/sections/CallToActionSection";
import NewsletterSection from "@/components/sections/NewsletterSection";
import Footer from "@/components/sections/Footer";
const Page = () => {
return (
<div>
<Header />
<main>
<Hero />
<FeaturesSection />
<PerfectForSection />
<Stats />
<PricingSection />
<Faqs/>
<CallToActionSection/>
<NewsletterSection/>
</main>
<Footer />
</div>
);
};
export default Page;

3. Make sure to edit the copy to fit your needs. Each component has placeholders to help you write copy that converts. Congrats you have a beautiful landing page to show!

4. (optional) Check out the guide onhow to set up a custom databaseif you want to collect the emails of your newsletter.