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.