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.

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)

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

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

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:

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

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:

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

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

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

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

   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/.

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:

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 and Footer & CTA Band.

Do It With AI

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.

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.