The packages/landing-page folder
The packages/landing-page folder houses a full Next.js 14 project for our landing page (including a documentation website).
It utilizes both the app router for the main landing page and the pages router for the documentation setup.
Key Features
- Next.js 14 (opens in a new tab): Leverages the latest features of Next.js, including the app router.
- Mantine (opens in a new tab): Uses Mantine as the primary component library and styling framework.
- Stripe (opens in a new tab): Handles checkout processes with Stripe.
- Documentation (opens in a new tab): Utilizes the pages router for a comprehensive documentation setup.
Mantine includes more than 100 customizable components and 50 hooks to cover you in any situation
Project Structure
Theming
We use Mantine's theming capabilities, configured in theme/theme.ts. This file sets up our color schemes and default styles for all components.
Checkout the theming docs for more information.
Components
The /components folder contains a variety of pre-built components used throughout the landing page:
- Pricing cards
- Headers and footers
- Cookie banners
- Testimonial cards
- And more...
These components are designed to be easily reused and modified to suit your specific needs.
Hooks
The hooks folder includes pre-built custom hooks:
- GDPR-compliant cookie consent banner handling
- Stripe checkout session management
Product Analytics
The application includes an integration with PostHog (opens in a new tab) for comprehensive product analytics:
- Pre-configured setup for tracking user interactions and events
- Seamlessly integrated with the GDPR-compliant cookie consent system
- Ensures analytics data is only collected when user permissions are granted
- Provides valuable insights into user behavior and product usage
This integration allows you to make data-driven decisions while respecting user privacy and complying with GDPR regulations.