# Homepages

## Homepages

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

Homio has four homepages, one per kind of home-services business. They use the same sections with different content, layouts, header, and footer, so each one also shows which combination suits that business. Keep one as your homepage and delete the others, or keep a second one as a landing page.

| Homepage                          | URL                 | Route file                                     | Content file                                       |
| --------------------------------- | ------------------- | ---------------------------------------------- | -------------------------------------------------- |
| Multi-trade home services (main)  | `/`                 | `src/pages/[...lang]/index.astro`              | `src/content/homepage/english/-index.md`           |
| Cleaning company                  | `/home-cleaning/`   | `src/pages/[...lang]/home-cleaning.astro`      | `src/content/homepage/english/home-cleaning.md`    |
| Commercial cleaning               | `/home-commercial/` | `src/pages/[...lang]/home-commercial.astro`    | `src/content/homepage/english/home-commercial.md`  |
| Handyman                          | `/home-handyman/`   | `src/pages/[...lang]/home-handyman.astro`      | `src/content/homepage/english/home-handyman.md`    |

Each content file has a French copy in `src/content/homepage/french/`. In the demo, the **Homepages** group of the **Pages** menu links to all four. The three demo homepages ship with `robots: "noindex, follow"` and `excludeFromSitemap: true`, so search engines don't index them.

### Multi-Trade Home Services (Main Homepage)
<div class="border border-dark">
  ![Homio main homepage](/images/homio/home.jpg)
</div>

For a company that does cleaning, small repairs, windows, and carpets. A framed photo hero with a sage card holding the title, two buttons, and three check items, and the review rating in a notch at its corner.

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

1. Hero, `default` (`heroSection`)
2. How it works, `illustrated` (`stepsSection`)
3. Who we are and why us, `story`, with the numbers of `metricsSection` in its green block (`whyUsSection`)
4. Services, `cards` (`servicesSection`)
5. Reviews, `carousel` (`reviewsSection`)
6. Get a quote form, `quote` (`contactSection`, anchor `#quote`)
7. FAQ, `default` (`questionsSection`)
8. Blog posts on a sage panel (`relatedPostsSection`)

Header `default`, footer `default`. The CTA band is off: the footer opens with its own headline and button.

### Cleaning Company
<div class="border border-dark">
  ![Homio cleaning company homepage](/images/homio/home-cleaning.jpg)
</div>

For a residential cleaning company. A photo hero with a quote form card, recurring-plan savings, a booking card, and the service areas in tabs.

1. Hero, `form` (`heroSection`)
2. Who we are, `accordion` (`whyUsSection`)
3. Services, `checklist`, on a sage panel (`servicesSection`)
4. Plans, `savings`: the recurring discounts from your pricing file (`plansSection`)
5. How it works, `path` (`stepsSection`)
6. The difference, `checks` (`featureGridSection`)
7. Reviews, `band` (`reviewsSection`)
8. Booking card, `card` (`bookingSection`)
9. FAQ, `grid` (`questionsSection`)
10. Blog posts, `side` (`relatedPostsSection`)
11. Service areas, `tabs` (`areasSection`)

Header `centered`, footer `large`. No CTA band: the large footer starts with the newsletter.

### Commercial Cleaning
<div class="border border-dark">
  ![Homio commercial cleaning homepage](/images/homio/home-commercial.jpg)
</div>

For office and commercial cleaning. There is no instant booking: every button leads to the walkthrough request form near the end of the page (`#walkthrough`) or to the phone.

1. Hero, `split` (`heroSection`)
2. Services, `columns` (`servicesSection`)
3. Why us, `collage` (`whyUsSection`)
4. Features, `showcase` (`featureGridSection`)
5. Reviews, `spotlight` (`reviewsSection`)
6. Team, `portraits` (`teamGridSection`)
7. Blog posts on a sage panel (`relatedPostsSection`)
8. Walkthrough request form, `walkthrough` (`contactSection`)
9. CTA band, `band` (`ctaSection`)

Header `utility` (the green call strip), footer `minimal`. Its `primaryCta` block turns the header button, the mobile action bar, and the footer's booking links into "Request a walkthrough" on this page:

```yaml
primaryCta: # header button, phone bar, announcement link, footer booking link
  label: "Request a walkthrough"
  url: "#walkthrough" # the form near the end of this page
  announcement: "hide" # link (swap the bar's booking link) | hide | keep
```

### Handyman
<div class="border border-dark">
  ![Homio handyman homepage](/images/homio/home-handyman.jpg)
</div>

For a handyman and small-repairs company. The whole page is warm cream, with a full-height photo hero under a transparent header.

1. Hero, `band` (`heroSection`)
2. Trust strip, `features` (`trustStrip`)
3. Why us, `media` (`whyUsSection`)
4. Services, `overlay` (`servicesSection`)
5. Numbers, `box` (`metricsSection`)
6. Features, `split` (`featureGridSection`)
7. How it works, `staggered` (`stepsSection`)
8. Reviews, `single` (`reviewsSection`)
9. Before and after, `gallery` (`beforeAfterSection`)
10. FAQ, `card` (`questionsSection`)
11. Blog posts (`relatedPostsSection`)
12. CTA band, `slanted` (`ctaSection`)

Header `simple`, footer `columns`.

### How A Homepage Gets Its Content
Each homepage content file holds one **named block** per section (`heroSection:`, `servicesSection:`, ...). A block overrides the section's default file in `src/content/sections/english/` for this page only, and picks the section's look with `options.layout`:

```yaml
# src/content/homepage/english/-index.md
heroSection: # defaults: hero-section.md
  enable: true
  title: "A cleaner home, the same crew every visit"
  checks: ["Insured", "Background-checked", "Fixed prices"]
  options:
    layout: "default" # default (framed photo, sage card, rating notch) | split | form | band
```

- 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.
- `enable: false` hides that section on this homepage.

To change the text of the main homepage, edit `-index.md`, not the section files. Change both languages. The allowed layouts are in the comment next to each `layout:`. More in [Sections](/homio/customization/sections/) and [Section Layouts](/homio/customization/section-layouts/).

### Reorder Or Remove Sections
The order of the sections is set in the route file, not the content file.

**The main homepage** (`index.astro`) lists its sections in the page, top to bottom:

```astro
<Base {...homepageContent?.data} className="framed home-rhythm home-v5" footerSpaceTop={false} layoutSwitcher>
  <LayoutVariants section="hero" content={heroSection} />
  <LayoutVariants section="steps" content={stepsSection} />
  <WhyUsSection content={whyUsSection} metrics={metricsSection} />
  <LayoutVariants section="services" content={servicesSection} />
  <LayoutVariants section="reviews" content={reviewsSection} />
  <ContactSection content={contactSection} />
  <LayoutVariants section="faq" content={questionsSection} />
  <SectionBand tone="sage">
    <RelatedPostsSection content={relatedPostsSection} />
  </SectionBand>
</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.

Keep the `<LayoutVariants section="..." content={...} />` wrapper on the sections that use it (hero, services, steps, plans, reviews, FAQ). It renders the layout you set in `options.layout`. Replacing it with the section component itself still works, but leaves the section out of the demo layout switcher.

**The demo homepages** (`home-cleaning.astro`, `home-commercial.astro`, `home-handyman.astro`) use a list instead:

```astro
const sections: HomeSection[] = [
  { block: "heroSection" },
  { block: "whyUsSection" },
  { block: "servicesSection", tone: "sage" },
  { block: "plansSection" },
  ...
];
```

Each entry names a block of the content file. Reorder the entries to reorder the page. `tone` puts the section on a tinted panel (`sage`, `mint`, `sand`, `cream`) or a colored block (`deep`, `forest`, `coral`); without `tone` the section is white. A block that is listed here but missing from the content file uses the section file's defaults.

### 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-cleaning.astro`. In the copied code, change the entry name from `"home-cleaning"` to `"-index"`:

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

2. **Copy the content.** Replace the frontmatter of `src/content/homepage/english/-index.md` with that of `home-cleaning.md`. Then delete the `robots` and `excludeFromSitemap` lines, and set `title: ""`. The browser title comes from `metaTitle`, so set that to your homepage title. Do the same in `french/`.

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

4. **Update the menus.** Remove the deleted homepages from the **Homepages** group of the Pages menu in `menu.en.json` and `menu.fr.json`, or turn the whole Pages menu off.

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

</Steps>

<Aside type="tip" title="Keep a demo homepage as a landing page">
  You can also keep, for example, `/home-commercial/` as a landing page for
  your office customers. Remove its `robots` and `excludeFromSitemap` lines so
  search engines can find it, and rename the route file if you want another
  URL.
</Aside>

### Header And Footer Per Homepage
Each demo homepage picks its header and footer in its content file. They win over `[settings.layout]` in `config.toml`:

```yaml
headerLayout: "centered" # default | simple | centered | utility
footerLayout: "large"    # default | minimal | large | columns
```

When you copy a demo homepage into `-index.md`, these lines come with it. Delete them to use the site defaults. The `simple` header is transparent only over the `band` hero, so pair them. See [Header & Mobile Bar](/homio/customization/header/) and [Footer & CTA Band](/homio/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 blocks in src/content/homepage/english/-index.md for my business:
[ONE PARAGRAPH]. Keep every key, option, and list length. Do the French file too.
```

```text
Make the /home-[cleaning | commercial | handyman]/ 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 french/), remove robots and excludeFromSitemap, and set title to "". Delete the
other homepage routes and content files, remove them from the Homepages group in
menu.en.json and menu.fr.json, and run npm run astro-check.
```