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.tsx
export 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.