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

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

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

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:

---
import Base from "@/layouts/Base.astro";
import BannerTwo from "@/components/sections/BannerTwo.astro";
import MultipurposeSection from "@/components/sections/Section.astro";
import ServicesSection from "@/components/sections/ServicesSection.astro";
import ProjectsSection from "@/components/sections/ProjectsSection.astro";
import PricingSection from "@/components/sections/PricingSection.astro";
import TeamSection from "@/components/sections/TeamSection.astro";
import FaqSection from "@/components/sections/FaqSection.astro";
import BlogSection from "@/components/sections/BlogSection.astro";

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

<Base {...homepageContent?.data} headerLayout="two" headerPosition="fixed">
  <BannerTwo />
  <ServicesSection hasLightBackground={false} content={{ options: { layout: "grid" } }} />
  <MultipurposeSection hasSectionBackground={true} content={skillSectionContent.data} />
  <ProjectsSection hasSectionBackground={false} content={{ options: { layout: "grid", limit: 6 } }} />
  <PricingSection />
  <TeamSection content={teamSectionContent} hasDarkAppearance={false} />
  <FaqSection />
  <BlogSection />
</Base>

That means changing a homepage usually involves two layers:

updating the page-level content entry in src/content/homepage/...
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. You usually need to update the matching section file instead.

An override works only if the page file passes it on. In the Astro and Sanity editions, Home 02 passes teamSection, and every homepage’s call to action reads ctaSection. Home 01’s servicesSection block isn’t passed on, so it changes nothing there. In the Tina edition, each home page’s form has a block for each of its sections, and the page file passes each one on. See Editable In Tina and Editable In Sanity.

Same Section, Different Layout

Several sections accept a layout option, so the same data renders differently per homepage. These values in the page files win over Options on the section. 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:

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