Adding pages to the Marketing Site is easy.
The marketing/site pages are placed under the app/(site) directory, and are part of the site layout.
app/(site)/about/page.tsx
import Hero from '~/core/ui/Hero';
import Container from '~/core/ui/Container';
import SubHeading from '~/core/ui/SubHeading';
export const metadata = {
title: 'About',
};
const AboutPage = () => {
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>
<!-- Content -->
</div>
</Container>
</div>
);
};
export default AboutPage;Adding the page to the site's 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:
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:
<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>