This documentation is for a legacy version of Remix Supabase. For the latest version, please visit the Remix Supabase Turbo documentation

Adding pages to the Marketing Site

Learn how to add pages to the Marketing Site of your Remix Supabase application, and how to add them to the navigation menu.

Adding pages to the Marketing Site is easy.

The marketing/site pages are placed under the prefix _site directory, and are part of the site layout.

import type { MetaFunction } from '@remix-run/node'; import configuration from '~/configuration'; import Hero from '~/core/ui/Hero'; import Container from '~/core/ui/Container'; import SubHeading from '~/core/ui/SubHeading'; export const meta: MetaFunction = () => { return { title: `About - ${}`, }; }; const About = () => { return ( <div> <Container> <div className={'flex flex-col space-y-14'}> <div className={'flex flex-col items-center'}> <Hero>About us</Hero> <SubHeading> We are a team of passionate developers and designers who love to build great products. </SubHeading> </div> <div> <!-- Add your content here --> </div> </div> </Container> </div> ); }; export default About;

Adding pages to the navigation menu

To update the site's navigation menu, you can visit the SiteNavigation.tsx component and add a new entry to the menu.

By default, you will see the following object links:

const links: Record<string, Link> = { Blog: { label: 'Blog', path: '/blog', }, Docs: { label: 'Docs', path: '/docs', }, Pricing: { label: 'Pricing', path: '/pricing', }, FAQ: { label: 'FAQ', path: '/faq', }, };

The menu is defined in the render function:

<NavigationMenu> <NavigationMenuItem link={links.Blog} /> <NavigationMenuItem link={links.Docs} /> <NavigationMenuItem link={links.Pricing} /> <NavigationMenuItem link={links.FAQ} /> </NavigationMenu>

Assuming we want to add a new menu entry, say About, we would first add the link object:

About: { label: 'About', path: '/about', },

And then we update the menu:

<NavigationMenu> <NavigationMenuItem link={links.About} /> ... </NavigationMenu>

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS