# Homepages

## Homepages

**Files:** `src/pages/[...lang]/index.astro`, `home-studio.astro`, `home-photo.astro`, `src/content/homepage/english/` · **Skill level:** Beginner to edit, light code to reorder

Margo has three homepages, one per kind of portfolio: a solo designer, a small studio, and a photographer. They use the same sections with different content, layouts, header, and footer, so each one also shows which combination suits that kind of site. Keep one as your homepage and delete the others, or keep a second one as a landing page.

| Homepage                   | URL               | Route file                                 | Content file                                    |
| -------------------------- | ----------------- | ------------------------------------------ | ----------------------------------------------- |
| Solo designer (main)       | `/`               | `src/pages/[...lang]/index.astro`          | `src/content/homepage/english/-index.md`        |
| Small studio               | `/home-studio/`   | `src/pages/[...lang]/home-studio.astro`    | `src/content/homepage/english/home-studio.md`   |
| Photographer               | `/home-photo/`    | `src/pages/[...lang]/home-photo.astro`     | `src/content/homepage/english/home-photo.md`    |

Each content file has a copy in each other language folder: `src/content/homepage/french/` and `src/content/homepage/arabic/`.

### Solo Designer (Main Homepage)
For an independent designer: a hero with a very large headline and a mosaic of three projects, then the work, services, and the person behind it.

Sections, top to bottom, with the layout set in `-index.md`:

1. Hero, `masthead` (`heroSection`)
2. Projects, `stack` (`projectsSection`)
3. Services, `ruled` (`servicesSection`)
4. Stats, `ruled` (`statsSection`)
5. About, `statement` (`aboutSection`)
6. Testimonials, `spotlight` (`testimonialsSection`)
7. Logos, `grid` (`logosSection`)
8. Pricing, `cards` (`pricingSection`)
9. FAQ, `two-column` (`faqSection`)
10. Journal, `grid` (`journalSection`), showing two chosen posts

Header and footer come from `config.toml` (`bar` and `email`). This page has no call to action above the footer: the footer carries the contact.

The hero's `cards` list names projects from `src/content/projects/english/` (up to four), in order; the `masthead` layout shows the first three. To feature other work, change the ids in `cards`, in every language folder.

### Small Studio
For a design studio of a few people: a dark panel hero, client logos, a project index you can filter, and the team.

1. Hero, `panel` (`heroSection`)
2. Logos, `marquee` (`logosSection`)
3. Projects, `index` with filter chips (`projectsSection`)
4. Quote, `statement` (`quoteSection`)
5. Services, `list` (`servicesSection`)
6. Steps, `timeline` (`stepsSection`)
7. Stats, `cards` (`statsSection`)
8. Team, `strip` (`teamGridSection`)
9. Testimonials, `marquee` (`testimonialsSection`)
10. Journal, `list` (`journalSection`)
11. Call to action, `band` (`ctaSection`)

Header `bar`, footer `columns`, contact dock off. The studio's copy speaks as "we", so most of it is in `home-studio.md` rather than in the section files.

### Photographer
For a photographer: a full-screen photo under a see-through header, an artist's statement, a series that scrolls sideways, and commission rates.

1. Hero, `photo` (`heroSection`)
2. Quote, `statement`: the artist's statement (`quoteSection`)
3. Gallery, `horizontal`: one series, pinned while it scrolls sideways on larger screens, a swipe row on phones (`gallerySection`)
4. Projects, `wall`: the photo series (`projectsSection`)
5. Pricing, `rates`: commission packages and the open months (`pricingSection`)
6. Logos, `grid` (`logosSection`)
7. Testimonials, `spotlight` (`testimonialsSection`)
8. Call to action, `split` (`ctaSection`)

Header `overlay`, footer `email`, and the contact dock on.

### How A Homepage Gets Its Content
Each section reads its default copy from its own file in `src/content/sections/english/` (`hero-section.md`, `projects-section.md`, ...). The homepage content file holds one **named block** per section (`heroSection:`, `projectsSection:`, ...) with only this page's choices: its layouts and, on the studio and photographer homepages, its own copy.

```yaml
# src/content/homepage/english/-index.md
heroSection:
  cards: ["ceramic-forms", "envelope-system", "stone-still-life", "colour-fan"]
  options:
    layout: "masthead" # stack | panel | photo | centered | masthead
```

- Objects merge key by key, so a block only needs the fields it changes.
- A list replaces the whole list: repeat every item you want to keep.
- An empty string (`""`) clears a value.
- `enable: false` hides that section on this homepage.

Because the main homepage's blocks hold almost no copy, **edit the section files to change its text**, in every language folder. Remember that the section files are shared: an inner page that shows the same section shows your new text too. To change a text on the main homepage only, add the field to its block in `-index.md`. More in [Sections](/margo/customization/sections/) and [Section Layouts](/margo/customization/section-layouts/).

### Reorder Or Remove Sections
The order of the sections is set in the route file, not the content file. `index.astro` lists its sections top to bottom:

```astro
<Base {...homepageContent?.data} footerSpaceTop={false} hideCallToAction>
  <LayoutVariants section="hero" content={heroSection} />
  <LayoutVariants section="projects" content={projectsSection} />
  <LayoutVariants section="services" content={servicesSection} />
  <LayoutVariants section="stats" content={statsSection} />
  <LayoutVariants section="about" content={aboutSection} />
  <LayoutVariants section="testimonials" content={testimonialsSection} />
  <LayoutVariants section="logos" content={logosSection} />
  <LayoutVariants section="pricing" content={pricingSection} />
  <LayoutVariants section="faq" content={faqSection} />
  <LayoutVariants section="journal" content={journalSection} />
</Base>
```

Move a line up or down to move the section. Delete a line to remove it, or set `enable: false` in its block instead, which is easier to undo. `home-studio.astro` and `home-photo.astro` work the same way.

Keep the `<LayoutVariants section="..." content={...} />` wrapper when you move a line. It renders the layout you set in `options.layout`, exactly like the section component itself would.

**Add a section.** Add a line with the section's key and its block, and take the block from the content file at the top of the route. For example, `-index.md` already has a `quoteSection` block that the main homepage doesn't show. To show it after the projects:

```astro
---
const {
  heroSection,
  projectsSection,
  quoteSection, // add the block here
  // ...
} = homepageContent?.data ?? {};
---
<LayoutVariants section="projects" content={projectsSection} />
<LayoutVariants section="quote" content={quoteSection} />
```

The keys are `hero`, `projects`, `quote`, `services`, `tools`, `stats`, `about`, `experience`, `pricing`, `steps`, `logos`, `testimonials`, `faq`, `journal`, `team`, `gallery`, `nextProject`, and `cta` (listed in `src/lib/layoutVariants.ts`).

**The call to action.** It is not in the list: the page's `<Base>` renders it above the footer from the `ctaSection` block. `index.astro` turns it off with `hideCallToAction`. Remove that word to show it on the main homepage too.

### Use Another Homepage As Your Homepage
<Steps>

1. **Copy the route.** Replace the contents of `src/pages/[...lang]/index.astro` with the contents of the homepage you want, for example `home-studio.astro`. In the copied code, change the entry name from `"home-studio"` to `"-index"`:

   ```astro
   const homepageContent = await getEntryCTM(
     "homepage",
     "-index",
     Astro.currentLocale,
   );
   ```

2. **Copy the content.** Replace the frontmatter of `src/content/homepage/english/-index.md` with that of `home-studio.md`. Set `metaTitle` to the browser title you want for your homepage (the tagline is added after it). Do the same in the other language folders.

3. **Delete the demo homepages** you don't keep: the route files in `src/pages/[...lang]/` and the content files in every language folder of `homepage/`.

4. **Update the menus.** Remove the deleted homepages from the **Pages** menu in every `menu.<language>.json`, or turn the whole Pages menu off.

5. **Check it.** Run `npm run astro-check` and open `/`, `/fr/`, and `/ar/`.

</Steps>

<Aside type="tip" title="Keep a demo homepage as a landing page">
  You can also keep, for example, `/home-photo/` as a page for your photography
  work, next to a designer homepage. Rename the route file if you want another
  URL, and link to it from the menu.
</Aside>

### Header, Footer, And Contact Dock Per Homepage
The studio and photographer homepages pick their header, footer, and contact dock in their content files. They win over `config.toml`:

```yaml
headerLayout: "overlay" # pill | bar | overlay
footerLayout: "email"   # wordmark | columns | email
contactDock: true       # the Copy email / Book a call bar at the bottom of the screen
```

When you copy a demo homepage into `-index.md`, these lines come with it. Delete them to use the site defaults. The `overlay` header has light text, so keep it with the `photo` hero. See [Header](/margo/customization/header/) and [Footer](/margo/customization/footer/).

### Do It With AI
```text
On the main homepage (src/pages/[...lang]/index.astro), move the [SECTION] above the
[SECTION] and remove the [SECTION]. Keep the LayoutVariants wrappers. Then rewrite the text of
the hero and services sections for my work: [ONE PARAGRAPH]. Edit hero-section.md and
services-section.md in every language folder of src/content/sections/, keeping every key,
option, and list length.
```

```text
Make the /home-[studio | photo]/ design my homepage. Replace src/pages/[...lang]/index.astro
with the contents of home-[NAME].astro, reading the "-index" entry. Copy the frontmatter of
src/content/homepage/english/home-[NAME].md into -index.md (same for the french and arabic
folders) and set metaTitle to "[HOMEPAGE TITLE]". Delete the other homepage routes and content files, remove them
from the Pages menu in each src/config/menu.<language>.json, and run npm run astro-check.
```