Techbyte Theme Documentation

Customizing Layouts

Techbyte is built from reusable sections. Most pages are assembled by importing section components in src/pages/[...lang]/... files, while each section reads its default content from src/content/sections/<language>/.

• Layout files: src/layouts/components/sections/
• Content files (Markdown): src/content/sections/<language>/

For example, if you want to change the “About” section on the homepage, there are two layers involved:

1. The page layout that includes the section
2. The section content Markdown file

Customizing the Section Markdown File

Step 1: Locate the page layout file

The main homepage file is:

• src/pages/[...lang]/index.astro

Techbyte also includes other page entry files such as:

• src/pages/[...lang]/home-two.astro
• src/pages/[...lang]/about.astro
• src/pages/[...lang]/contact.astro

Step 2: Find the section in the layout file

Open the page file and look for the section imports and render calls:

src/pages/[...lang]/index.astro

---
import Base from "@/layouts/Base.astro";
import HeroSection from "@/components/sections/HeroSection.astro";
import FeaturesGrid from "@/components/sections/FeaturesGrid.astro";
import AboutSection from "@/components/sections/AboutSection.astro";
import ServicesSection from "@/components/sections/ServicesSection.astro";
import ProjectsSection from "@/components/sections/ProjectsSection.astro";
import BlogSection from "@/components/sections/BlogSection.astro";
---

<Base {...page?.data} footerLayout="footer-1" fitToScreen={false}>
  <HeroSection hasSectionSpacingTop={false} />
  <FeaturesGrid />
  <AboutSection hasSectionSpacingBottom={true} />
  <ServicesSection hasSectionSpacingBottom={true} />
  <ProjectsSection hasSectionSpacingBottom={true} />
  <BlogSection />
</Base>

From this, you can see which component controls each homepage block. Sections accept spacing and appearance props such as hasSectionSpacingTop, hasSectionSpacingBottom, hasMainBg, halfBackground, variant, and badgeVariant to tune their look per page.

Step 3: Modify the Markdown file

Next, open the related section content file. Section files use kebab-case names matching their component, for example:

• HeroSection.astro → src/content/sections/english/hero-section.md
• AboutSection.astro → src/content/sections/english/about-section.md
• AboutSectionTwo.astro → src/content/sections/english/about-section-two.md

Example frontmatter from the hero slider:

---
enable: true
slides:
  - image: "/images/banner/banner-1.png"
    alt: "Professional IT consultation"
    title: "Managed IT<br/>Services Focused<br/>On Your Success"
    description: "Reliable support, secure systems, and practical technology guidance for growing teams."
    button:
      enable: true
      label: "See Our Projects"
      url: "/projects"
      variant: "fill"
      hoverEffect: "creative-fill"
stats:
  - prependValue: "+"
    value: "60"
    label: "Daily Support Requests Resolved"
---

To hide the entire section, set enable: false. To change the copy or artwork, update the frontmatter fields.

Customizing the Section Layout File

For deeper structural changes, edit the section component itself:

1. Open src/layouts/components/sections/AboutSection.astro (or the matching section component)
2. Adjust the Astro markup, logic, or styling

Techbyte sections typically follow this pattern:

• fetch default content with getEntryCTM("sections", "...", Astro.currentLocale)
• merge optional overrides passed in from the page
• bail out early when enable is false

That means content-level changes are safe for most users, while layout changes are the right path for more advanced design edits.