Marketing Pages in the React Router Supabase Turbo Starter Kit
Learn how to create and update marketing pages in the React Router Supabase Turbo Starter Kit.
Makerkit comes with pre-defined marketing pages to help you get started with your SaaS application. These pages are built with React Router and Tailwind CSS and are located in the apps/web/app/(marketing)
directory.
Makerkit comes with the following marketing pages:
- Home Page
- Contact Form
- Pricing Page
- FAQ
- Contact Page (with a contact form)
Adding a new marketing page
To add a new marketing page to your Makerkit application, you need to follow these steps.
Create a file in the apps/web/app/routes/marketing
directory:
// apps/web/app/routes/marketing/about.tsxexport default function AboutPage() { return <div></div>}
Then add the route to the apps/web/app/routes.ts
file:
const marketingLayout = layout('routes/marketing/layout.tsx', [ index('routes/marketing/index.tsx'), route('terms-of-service', 'routes/marketing/terms-of-service.tsx'), route('privacy-policy', 'routes/marketing/privacy-policy.tsx'), route('pricing', 'routes/marketing/pricing.tsx'), route('contact', 'routes/marketing/contact/index.tsx'), route('faq', 'routes/marketing/faq.tsx'), route('blog', 'routes/marketing/blog/index.tsx'), route('blog/:slug', 'routes/marketing/blog/$slug.tsx'), route('cookie-policy', 'routes/marketing/cookie-policy.tsx'), route('about', 'routes/marketing/about.tsx'), // <-- add this line layout('routes/marketing/docs/layout.tsx', [ route('docs', 'routes/marketing/docs/index.tsx'), route('docs/*', 'routes/marketing/docs/$slug.tsx'), ]),]);
This page inherits the layout at apps/web/app/routes/marketing/layout.tsx
. You can customize the layout by editing this file - but remember that it will affect all marketing pages.
Contact Form
To make the contact form work, you need to add the following environment variables:
CONTACT_EMAIL=
In this variable, you need to set the email address where you want to receive the contact form submissions. The sender will be the same as the one configured in your mailing configuration.