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
-
Open
src/app/page.tsx
or create a new pagepages/pre-sale.tsx
. -
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
- Run your Next.js development server:
npm run dev
- Visit
http://localhost:3000
ORhttp://localhost:3000/pre-sale
to test the page. - 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.