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.

app/routes/_site.about.tsx

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 - ${configuration.site.siteName}`,
 };
};
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;

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:

components/SiteNavigation.tsx

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:

tsx

<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:

tsx

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

And then we update the menu:

tsx

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

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 - ${configuration.site.siteName}`, }; }; 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>  </div> </div> </Container> </div> ); }; export default About;

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', }, };

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

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 navigation menu

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 navigation menu