Lumio Theme Documentation

Homepage Variants

Lumio ships with three homepage variants. This is one of the first places users get confused, because each homepage has:

• its own page file
• its own homepage entry in src/content/homepage/<language>/
• its own section composition
• sometimes a different header or footer variant

Where Each Homepage Lives

Home 1

• Page file: src/pages/[...lang]/index.astro
• Content entry: src/content/homepage/<language>/-index.md

Home 2

• Page file: src/pages/[...lang]/home-two.astro
• Content entry: src/content/homepage/<language>/home-two.md

Home 3

• Page file: src/pages/[...lang]/home-three.astro
• Content entry: src/content/homepage/<language>/home-three.md

How The Homepage Files Work

Each homepage imports a different stack of section components. Example:

src/pages/[...lang]/home-two.astro

---
import Base from "@/layouts/Base.astro";
import HomeBannerTwo from "@/components/sections/HomeBannerTwo.astro";
import FeaturesGridTwo from "@/components/sections/FeaturesGridTwo.astro";
import AboutCompanySectionTwo from "@/components/sections/AboutCompanySectionTwo.astro";

const homepage = await getEntryCTM("homepage", "home-two", Astro.currentLocale);
---

<Base {...homepage.data} homepage={true} header="two" footer="two">
  <HomeBannerTwo />
  <FeaturesGridTwo />
  <AboutCompanySectionTwo />
</Base>

That means changing a homepage usually involves two layers:

1. updating the page-level content entry in src/content/homepage/...
2. updating the individual section content files in src/content/sections/...

Important Detail: Homepage Content Files Are Thin

The homepage content files such as -index.md, home-two.md, and home-three.md mostly contain page-level metadata like title or meta description.

The actual visible homepage content usually comes from reusable section entries like:

• src/content/sections/english/home-banner.md
• src/content/sections/english/about-company.md
• src/content/sections/english/pricing-section.md

So if you update only src/content/homepage/english/home-three.md, you may not see the section copy change. You usually need to update the matching section file too.

Which Variant Uses Which Shell

• Home 1 uses footer="one"
• Home 2 uses header="two" and footer="two"
• Home 3 uses header="three"

These variants are passed into Base.astro, which decides which header/footer components to render.

Safe Editing Workflow

If you want to change a homepage safely:

1. Open the relevant page file in src/pages/[...lang]/
2. Note the imported section components
3. Edit the corresponding src/content/sections/<language>/... files first
4. Only edit the Astro section component if you need structural or styling changes