Homepages

Homepages

Files: src/pages/[...lang]/index.astro, home-two.astro, home-three.astro, home-four.astro, src/content/homepage/english/ · Skill level: Beginner to edit, light code to reorder

Ecozen has four homepages, one per kind of business. They share the same section components with different content and layouts, so each one also shows which sections and layouts suit that business.

In the demo, the Home group of the Pages menu lists them as “Residential solar”, “Commercial solar”, “Renewable energy”, and “EV and batteries”.

Residential Solar (Main Homepage)

A full-screen photo hero with three slides. Each slide brings its own photo, headline, and text; the two buttons and the star rating stay. Named tabs with progress bars along the bottom switch the slides, and a pause button stops them. The transparent header, with its info row, sits on top of the photo. Sections show at once on this page, without the fade-in on scroll (scrollReveal: false, see Animations).

Sections, top to bottom:

1. Hero, photo layout with slides (hero-section.md)
2. Logo strip (logo-strip-section.md)
3. About, default layout (company-section.md)
4. Services, band layout (services-section.md)
5. Benefits, grid layout, with a scrolling marquee (benefits-section.md)
6. How it works, steps layout (process-section.md)
7. Testimonials, slider layout (testimonial-section.md, reviews from src/content/testimonial/)
8. Results, panel layout (impact-section.md)
9. Savings calculator (calculator-section.md)
10. Service area, list layout (coverage-section.md)
11. Why choose us (why-us-section.md)
12. FAQ (faq-section.md)
13. Blog preview (blog-section.md)

The call to action section is off on this page (ctaSection: enable: false in -index.md). The footer closes the page instead: wordmark (footerLayout in -index.md), a dark footer with a large closing line beside phone, email, and quote rows, then the link columns, a large outlined wordmark, and line drawings of solar panels along the bottom.

All section files are in src/content/sections/english/ (and the other language folders).

Commercial And Farm Solar

The classic header, then a split hero: an eyebrow, the headline, two buttons, and three key figures that count up on a light surface, beside a tall framed photo. Then: about (cards layout, with mission and vision cards), a cost comparison table (grid only, solar, solar + battery), benefits (stack layout, photo cards that stack as you scroll), results (split layout), how it works (timeline layout), services (list layout), projects, a careers band, and a blog preview. The call to action section is off on this page (ctaSection: enable: false). Footer: newsletter. A call-to-action band with an arched photo overlaps the top of the footer, and the dark footer below has the contact details, the services, and the email sign-up, over faint line drawings of power pylons.

Renewable Energy Developer

For wind, solar park, and battery storage developers. The floating header over a dark panel hero: the headline on the left, the text and buttons on the right, then a row of three captioned photo tiles (wind, solar parks, storage). The tile under the pointer widens. Then: a logo strip, a large statement with inline photos, a bento grid, a “for landowners” mission section with a button, a feature slider, results (cards layout), partner quotes (quote layout, with its own reviews), a blog preview, and a contact band with a short enquiry form instead of the usual call to action. Footer: cta. A photo band overlaps the top of the footer: a wind turbine photo with a closing line, a button, and a card of current projects. The dark footer below ends with a row of line-drawn wind turbines.

EV Charging And Batteries

For charger and battery installers. The promo header with its own announcement (headerAnnouncement), then a form hero: a deep green block with the headline, a check list, a price line, and a wide photo on the left, and a quote form card on the right. Then: product tabs (home charger, home battery, workplace charging), charging speeds compared, packages with the upfront / monthly toggle, projects, testimonials, an FAQ, and the call to action. Footer: contact, a light mint panel with the reply time, the phone number, and a postcode area check, then the link columns with trust badges.

How The Other Homepages Get Their Look

home-two.md, home-three.md, and home-four.md override each section with a named block and a layout. For example, in home-two.md:

heroSection:
  options:
    layout: "split" # photo | split | panel | form
  badge: "Commercial and farm solar"
  title: "Solar for buildings that work hard"
  image: "/images/photos/service-commercial-unsplash-aQOzmgcT6sI.jpg"
  stats:
    - value: "350+"
      label: "Business sites installed"

That means you can copy a block from one homepage file into another page file whose route passes it, or copy its options.layout line into a section file to use that layout everywhere. Sections lists the blocks each homepage reads.

Edit A Homepage

• Main homepage: edit the section files in src/content/sections/english/.
• Another homepage only: edit its block in src/content/homepage/english/home-two.md (or home-three.md, home-four.md). If there is no block for that section yet, add one with enable: true and only the keys you want to change. The route must pass the block: check the route file.
• Reorder or remove sections: move or delete the lines in the route file. A line like <LayoutVariants section="hero" /> is a section that has more than one layout, and a line like <FaqSection /> is a section with one. Keep each line as it is when you move it.

Pick Your Homepage And Delete The Others

Most sites keep one homepage. To keep the main one, delete the other three:

1. Delete the routes src/pages/[...lang]/home-two.astro, home-three.astro, and home-four.astro.

2. Delete home-two.md, home-three.md, and home-four.md in every language folder of src/content/homepage/.

3. Remove their links from the Home group of the Pages menu in every src/config/menu.*.json file, or hide the whole Pages menu.

4. Search the project for /home-two/, /home-three/, and /home-four/ and change any link that is left.

To use another homepage as your main one:

1. Open its route, for example src/pages/[...lang]/home-three.astro, and copy the section lines between <Base ...> and </Base>, with the import lines they need and the const data = page?.data || {}; and const source = page?.filePath; lines.

2. Paste them into src/pages/[...lang]/index.astro, replacing the lines there. Keep index.astro’s own <Base ...> line. The header and footer of each home come from headerLayout and footerLayout in its content file, which you copy in the next step.

3. Copy the frontmatter blocks from src/content/homepage/english/home-three.md into src/content/homepage/english/-index.md, replacing its ctaSection block, and keep its title and metaDescription or write new ones. Copy headerLayout, footerLayout, and headerAnnouncement (if there is one) too, to keep that home’s header and footer. Delete scrollReveal: false if you want sections to fade in on scroll. Do the same for the other language folders.

4. Delete the homepages you don’t need, as above, including the one you copied from.

Do It With AI

Make /home-[two | three | four]/ the main homepage. Copy the sections of
src/pages/[...lang]/home-[two | three | four].astro into src/pages/[...lang]/index.astro (imports,
the data and source lines, and the content props), and move the frontmatter blocks, headerLayout,
footerLayout, and headerAnnouncement of home-[two | three | four].md into -index.md, replacing its
ctaSection block (same for every language folder). Then delete the other
homepage routes and their content files, remove their links from the Home group of the "Pages"
menu in every src/config/menu.*.json file, search for links to them, and run
npm run astro-check.