Add or remove pages

How pages work

Every page is a folder inside src/app with a file called page.tsx in it. The folder name becomes the web address:

A folder name in square brackets, like [slug], is a detail page. It creates one page for every item in a content list. You add or remove those pages by editing the list (see Text & content), not by adding folders.

Add a new page

As an example, we will add an About Us page at /about-us.

1. Create the folder and file

   In VS Code, right-click the src/app folder, choose New Folder and name it about-us. Then right-click about-us, choose New File and name it page.tsx.

   Use lowercase letters and dashes for the folder name. It becomes the address people see.

2. Paste the page starter

   Paste this into the new file. It uses the same building blocks as the other pages, so it matches your design:

   src/app/about-us/page.tsxCopy

   import { PageIntro } from "@/components/sections/PageIntro";import { BookingBand } from "@/components/sections/BookingBand";import { pageMetadata } from "@/config/seo"; export const metadata = pageMetadata("about"); export default function AboutPage() {  return (    <>      <PageIntro        eyebrow="About us"        title="Our story"        intro="A short introduction to your business."        crumbs={[{ label: "About us", href: "/about-us" }]}      />       <section className="container-page section-space">        <h2 className="display-md text-plum">Who we are</h2>        <p className="mt-6 max-w-2xl">Write your text here.</p>      </section>       <BookingBand />    </>  );}

   Change the highlighted text to your own. BookingBand adds the booking banner at the bottom; delete that line if you do not want it.

3. Add its title for Google

   Open src/config/seo.ts. Inside pageSeo, add an entry with the same name you used in step 2 (about). Paste it just before the privacy: entry:

   src/config/seo.tsCopy

     about: {    title: "About Us",    description: "Learn about our story, our team and what makes us different.",    path: "/about-us",  },

   This gives the page its browser title and Google description, and adds it to your sitemap automatically.

4. Add it to the menu

   In src/config/navigation.ts, add a line to primaryNav and/or a footer column:

   src/config/navigation.tsCopy

     { label: "About Us", href: "/about-us" },

5. Check it

   Save everything and open localhost:3000/about-us.

Building blocks you can reuse

Pages are made of sections from src/components/sections. Look at an existing page to see how a section is used, then copy that line into your page. Each file in that folder is one block, for example a heading area, a booking banner or a list of questions.

Remove a page

1. Delete the page folder

   In VS Code, right-click the folder in src/app (for example terms) and choose Delete.

2. Remove its SEO entry

   In src/config/seo.ts, delete its entry from pageSeo (from the name, like terms: {, to the closing },). This also removes it from the sitemap.

3. Remove its menu links

   In src/config/navigation.ts, delete every line that links to it.

4. Find any links left in the text

   Pages sometimes link to each other inside paragraphs. Press Ctrl + Shift + F (or ⌘ + Shift + F on Mac) and search for the address in quotes, for example "/terms". Remove or change each link you find.

Change a page's address

Rename its folder (for example the-maison to about), then update the path in seo.ts and any links in navigation.ts and page text.

Rearrange the home page

The home page is a simple list of sections in src/app/page.tsx. Each line is one section, shown in this order from top to bottom:

export default function HomePage() {  return (    <>      <HomeHero />      <QuietLuxury />      <SignatureTreatments />      <FacialFeature />      <TreatmentMenuSection />      <MaisonExperience />      <Therapists />      <PetalRitual />      <GuestWords />      <JournalTeaser />      <BookingInvitation botanical />    </>  );}

• Hide a section: delete its line. Its matching import line at the top can then be deleted too.
• Reorder sections: move lines up or down.
• Edit a section's text: each section lives in src/components/sections/home with the same name, for example HomeHero.tsx.