Skip to main content
Version: Next

Pre-Sale Page

A pre-sale page helps generate early interest and revenue before your SaaS product officially launches. This guide will walk you through setting up a pre-sale page using SaaS Developer Templates.

Step 1: Add the Pre-Sale Component to a Page​

  1. Open src/app/page.tsx or create a new page pages/pre-sale.tsx.

  2. Import and use the pre-sale component:

    /* <--- your imports ----> */
    import { Lifetime } from '@/components/presale/Lifetime';

    export default function Home() {
      return (
        <PageWithHeaderFooter>
          {/* <--- your imports ----> */}
          <Lifetime />
        </PageWithHeaderFooter>
      );
    }

Step 2: Test Your Setup​

  1. Run your Next.js development server: 
    npm run dev
  2. Visit http://localhost:3000 OR http://localhost:3000/pre-sale to test the page.
  3. Verify that the pre-sale form and payment integration are working correctly.

Conclusion​

Your pre-sale page is now live and ready to start accepting early adopters! 🎉

For further enhancements, consider integrating:

  • Email notifications to confirm pre-sale purchases.
  • Payment gateways like Stripe or PayPal.
  • Early-access user management.

Proceed to the next step: Configure Authentication.