Quick tutorials

Make a waitlist landing page

There are 4 waitlist pages pre-built for you in SupaSaas. Each is configured to be SEO friendly and optimized for performance.

On each waitlist, you are able to collect email addresses using NextJs server actions. Simply integrate your email provider, and you are good to go.

Waitlist Page v1

To get started, simply edit the file found at @/src/(frontend)/waitlist/page.tsx and you can select which landing page you would like to use by changing the component that is imported.

@/src/(frontend)/waitlist/page.tsx
// import Waitlist1 from "@/components/WaitlistPage/Waitlist1"; // import Waitlist2 from "@/components/WaitlistPage/Waitlist2"; // import Waitlist3 from "@/components/WaitlistPage/Waitlist3"; import Waitlist4 from "@/components/WaitlistPage/Waitlist4"; import { appName } from "@/config"; export const metadata: Metadata = { title: `Coming Soon | ${appName}`, description: `Register your interest for ${appName}.`, }; export default function Waitlist() { return ( <> {/* <Waitlist1 /> */} {/* <Waitlist2 /> */} {/* <Waitlist3 /> */} <Waitlist4 /> </> ); }

That's it! Your waitlist page will now be up and running on the /waitlist url.

If you'd like to change the waitlist page, simply comment out the current import and uncomment the import of the waitlist page you'd like to use.

If you want to make the waitlist page the home page, simply copy & paste the <Waitlist4 /> component into the @/src/(frontend)/page.tsx file, and remove <LandingPage 1/>.

Previous
Make a SaaS landing page