# Homepage Variants

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

<div class="border border-dark">![Techlo Home 01](/images/techlo/home.png)</div>

- 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

<div class="border border-dark">![Techlo Home 02](/images/techlo/home-two.png)</div>

- 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

<div class="border border-dark">![Techlo Home 03](/images/techlo/home-three.png)</div>

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

```astro
// src/pages/[...lang]/home-two.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:

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. 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](../../features/what-is-editable-tina/) and [Editable In Sanity](../../features/what-is-editable-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:

```astro
<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