• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
    • Getting Started with Development
    • Database Architecture
    • Migrations
    • Extending the DB Schema
    • Database Functions
    • Loading data from the DB
    • Writing data to Database
    • Database Webhooks
    • RBAC: Roles and Permissions
    • Marketing Pages
    • Legal Pages
    • External Marketing Website
    • SEO
    • Adding a Turborepo package
    • Adding a Turborepo app

Marketing Pages in the Next.js Supabase Turbo Starter Kit

Learn how to create and update marketing pages in the Next.js Supabase Turbo Starter Kit.

How to create and update marketing pages

Learn how to create and update marketing pages in the Next.js Supabase Turbo Starter Kit.

1

The marketing pages included in the Starter Kit

2

Adding a new marketing page

3

Customizing the layout

4

Adding a contact form

Makerkit comes with pre-defined marketing pages to help you get started with your SaaS application. These pages are built with Next.js and Tailwind CSS and are located in the apps/web/app/(marketing) directory.

The marketing pages included in the Starter Kit

Makerkit comes with the following marketing pages:

  • Home Page
  • Contact Form
  • Pricing Page
  • FAQ
  • Contact Page (with a contact form)
  • Legal Pages (Terms of Service, Privacy Policy, Cookie Policy)

Adding a new marketing page

To add a new marketing page to your Makerkit application, you need to follow these steps.

Create a folder in the apps/web/app/(marketing) directory with the path you want to use for the page. For example, to create a new page at /about, you would create a folder named about. Then, create the page file in the folder. For example, to create an about page, you would create an page.tsx file in the about folder.

tsx
// apps/web/app/(marketing)/about/page.tsx
export default function AboutPage() {
return <div></div>
}

Customizing the layout

This page inherits the layout at apps/web/app/(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:

bash
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.

On this page
  1. The marketing pages included in the Starter Kit
    1. Adding a new marketing page
      1. Customizing the layout
    2. Contact Form