# 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.
| Homepage | URL | Route file | Content file |
| -------------------------------- | --------------- | ---------------------------------------- | -------------------------------------------- |
| Residential solar (main) | `/` | `src/pages/[...lang]/index.astro` | `src/content/homepage/english/-index.md` |
| Commercial and farm solar | `/home-two/` | `src/pages/[...lang]/home-two.astro` | `src/content/homepage/english/home-two.md` |
| Renewable energy developer | `/home-three/` | `src/pages/[...lang]/home-three.astro` | `src/content/homepage/english/home-three.md` |
| EV charging and batteries | `/home-four/` | `src/pages/[...lang]/home-four.astro` | `src/content/homepage/english/home-four.md` |
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](/ecozen/customization/animations/#turn-off-fade-in-on-one-page)).
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`:
```yaml
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](/ecozen/customization/sections/#blocks-each-page-reads) 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 `` is a section that has more than one layout, and a line like `` 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 `` and ``, 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 `` 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
```text
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.
```