For the complete documentation index, see llms.txt. Prefer markdown by appending .md to documentation URLs or sending Accept: text/markdown.

Marketing pages

Discover which marketing pages ship out of the box - home, waitlist, newsletter, blog, pricing, contact — and how to add a new one.

TurboStarter 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/src/app/[locale]/(marketing) directory.

TurboStarter comes with the following marketing pages:

  • Home: conversions-optimized landing page with hero section, features, pricing, testimonials, FAQ, newsletter signup, and more
  • Waitlist: dedicated email capture page for pre-launch and early-access campaigns
  • Blog: to display your blog posts
  • Pricing: to display your pricing plans
  • Contact: to enable users to contact you with a contact form

Waitlist

The waitlist page lives at apps/web/src/app/[locale]/waitlist and includes an email signup form with validation and success feedback. Use it for early access, product launches, or closed betas before your full marketing site is live.

The homepage also ships a newsletter section (apps/web/src/modules/marketing/home/newsletter.tsx) so you can collect subscribers without a separate page.

Contact form

To make the contact form work, you need to add the following environment variable:

CONTACT_EMAIL=

Set this variable to the email address where you want to receive contact form submissions. The sender's email address will match what you configured in your mailing configuration.

Adding a new marketing page

To add a new marketing page, create a new directory in apps/web/src/app/[locale]/(marketing) with the desired route name.

The page will automatically become available in your application at the corresponding URL path.

For example, to create a page accessible at /about, create a directory named about and add a page.tsx file inside it. The complete path would be apps/web/src/app/[locale]/(marketing)/about/page.tsx.

apps/web/src/app/[locale]/(marketing)/about/page.tsx
export default function AboutPage() {
  return <div>About</div>;
}

This page inherits the layout at apps/web/src/app/[locale]/(marketing)/layout.tsx. You can customize the layout by editing this file - but remember that it will affect all marketing pages.

How is this guide?

Last updated on

On this page

Ship your startup everywhere. In minutes.Try TurboStarter