Techbyte Theme Documentation

Homepage Variants

Techbyte ships with two 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 and footer layout

Home 01 — Light header, hero slider

• Page file: src/pages/[...lang]/index.astro
• Content entry: src/content/homepage/<language>/-index.md
• Uses the default headerLayout (header-1) and footerLayout="footer-1" (contact section above the footer)
• Opens with a Swiper-powered hero slider (hero-section.md slides)

Home 02 — Dark header, announcement bar

• Page file: src/pages/[...lang]/home-two.astro
• Content entry: src/content/homepage/<language>/home-two.md
• Uses headerLayout="header-2" and the default footer (footer-2)
• Dark hero with vertical social links and the announcement topbar

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 HeroSectionTwo from "@/components/sections/HeroSectionTwo.astro";
import FeaturesGridTwo from "@/components/sections/FeaturesGridTwo.astro";
import ServicesSectionTwo from "@/components/sections/ServicesSectionTwo.astro";
import TeamSection from "@/components/sections/TeamSection.astro";

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

<Base {...page?.data} headerLayout="header-2" footerSpaceTop={true}>
  <HeroSectionTwo />
  <FeaturesGridTwo hasSectionSpacingBottom={true} />
  <ServicesSectionTwo hasSectionSpacingBottom={true} />
  <TeamSection hasSectionSpacingBottom={true} badgeVariant="secondary" />
</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 (-index.md, home-two.md) mostly contain page-level metadata like the meta description.

The actual visible homepage content comes from reusable section entries. Home 02 mostly uses the -two variants of each section:

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

So if you update only src/content/homepage/english/home-two.md, you will not see section copy change. You need to update the matching section file instead.

Shared Sections

Some sections are shared between both homepages with different props — for example StatsSection renders with hasMainBg={true} on Home 01 and halfBackground={{ enable: true }} on Home 02, and CTAGallerySection closes both pages (with variant="secondary" on Home 02).

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