Skip to content
Type something to search...
to navigateto selectESC to close
Ultimate Astro Theme GuidesDocs
Techlo Theme Documentation

Homepage Variants

Techlo 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
  • its own header layout (and sometimes a different header position)

Home 01 — Dark hero, startup focus

Techlo Home 01
  • Page file: src/pages/[...lang]/index.astro
  • Content entry: src/content/homepage/<language>/-index.md
  • Uses headerLayout="one" and hasFooterDarkBackground={true}

Home 02 — Light hero, agency focus

Techlo Home 02
  • Page file: src/pages/[...lang]/home-two.astro
  • Content entry: src/content/homepage/<language>/home-two.md
  • Uses headerLayout="two" and headerPosition="fixed"

Home 03 — Centered dark hero, business focus

Techlo Home 03
  • Page file: src/pages/[...lang]/home-three.astro
  • Content entry: src/content/homepage/<language>/home-three.md
  • Uses headerLayout="three" and headerPosition="fixed"

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 BannerTwo from "@/components/sections/BannerTwo.astro";
import ServicesSection from "@/components/sections/ServicesSection.astro";
import ProjectsSection from "@/components/sections/ProjectsSection.astro";
import PricingSection from "@/components/sections/PricingSection.astro";


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


<Base {...homepageContent?.data} headerLayout="two" headerPosition="fixed">
  <BannerTwo />
  <ServicesSection content={{ options: { layout: "grid" } }} />
  <ProjectsSection content={{ options: { layout: "grid", limit: 6 } }} />
  <PricingSection />
</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 (title, meta description) plus optional section overrides.

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

  • src/content/sections/english/banner.md
  • src/content/sections/english/about-section.md
  • src/content/sections/english/services-section.md

So if you update only src/content/homepage/english/home-three.md, you may not see a section’s copy change unless you override it there. You usually need to update the matching section file instead.

Same Section, Different Layout

Several sections accept a layout option, so the same data renders differently per homepage. For example, the Projects section is masonry on Home 01, grid on Home 02, and carousel on Home 03:

<ProjectsSection content={{ options: { layout: "masonry", limit: 7 } }} /> // Home 01
<ProjectsSection content={{ options: { layout: "grid", limit: 6 } }} />    // Home 02
<ProjectsSection content={{ options: { layout: "carousel", limit: 5 } }} /> // Home 03

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 and the props passed to them
  3. Edit the corresponding src/content/sections/<language>/... files first
  4. Only edit the Astro section component if you need structural or styling changes