# Ecozen > Ecozen is best for solar installers and renewable-energy companies, for homes or businesses, that need service pages, project case studies, package pricing, a savings calculator and a multi-step quote request. Canonical page: [https://getastrothemes.com/astro-themes/ecozen/](https://getastrothemes.com/astro-themes/ecozen/) - Categories: Business ## Best for - Residential solar installer websites - Commercial and farm solar installer websites - Battery storage and EV charger installer websites - Energy audit and maintenance service websites ## Not intended for - SaaS and software products - Energy suppliers that need customer accounts or live tariffs - Sites that need dark mode - Single-page sites ## Feature highlights - 4 homepages: residential solar, commercial solar, renewable energy developer, and EV charging with batteries - 19 inner page designs, including services, projects, pricing, calculator and careers - Savings calculator with editable tariff, sun-hour, cost and CO₂ assumptions - Multi-step quote form and pricing with an upfront and monthly toggle - English and French, with French removable - Static Astro output with Tailwind CSS ## Technology - Astro: 7.4.2 - Tailwind CSS: 4.3.3 Live preview: [https://ecozen-astro.pages.dev/](https://ecozen-astro.pages.dev/) Ecozen is an Astro theme for the website of a solar installer or renewable-energy company that works with homes, businesses or farms. It is built with Astro and Tailwind CSS and covers services, project case studies, package pricing, a savings calculator, a multi-step quote request, about, team and careers pages, in English and French. Quotes, surveys and contracts stay in your own process. Ecozen gives you the pages that explain what you install and turn visitors into quote requests. ## By The Numbers - **4 Homepages** - **19 Inner Page Designs** - **32 Section Components** - **7 Sections With 2 To 4 Layouts** - **4 Header Layouts And 4 Footer Layouts** - **6 Sample Services And 6 Sample Projects** - **2 Languages: English And French** ## Four Homepages Each homepage is built for one kind of energy business, with its own header, hero, sections and footer: - **Residential solar** (`/`): a full photo hero with a rating and key facts, services band, benefits, a four-step process, reviews, impact figures, the savings calculator, the areas you cover, reasons to choose you, FAQ and latest posts. - **Commercial solar** (`/home-two/`): a light split hero with key figures, company cards, a grid vs solar vs solar-plus-battery cost table, benefits with photos, a project timeline, a services list, case studies, a careers band and a newsletter footer. - **Renewable energy developer** (`/home-three/`): wind, solar parks and storage, with a dark hero with photo tiles, a statement paragraph with inline photos, a sector grid, a step slider, portfolio figures, a large-quote review, a site enquiry form over a photo and a footer with a call to action. - **EV charging and batteries** (`/home-four/`): a quote-form hero on a brand-color block, tabs for home charger, battery and workplace charging, a charging speed guide, packages with an upfront/monthly toggle, case studies, FAQ and a light footer with contact details. Keep the one that fits your business and remove the others, or reuse their sections on your own pages. ## Pages Included **Services and work** - Services overview and a page per service, with sample residential solar, commercial solar, battery storage, EV charging, energy audit and maintenance pages - Projects overview and a case study page per project, with a facts strip and a client quote - Pricing page with three packages, a pay upfront and pay monthly toggle, an includes list and a pricing FAQ. Packages link to your quote page; there is no checkout. - Savings calculator page - Quote request page with a three-step form that also works without JavaScript **Company** - About page with mission, values and impact figures - Team page - Careers with a page per role - FAQ page grouped by topic **Content and legal** - Blog with featured posts, categories, tags, pagination, related posts and RSS - Privacy policy and terms pages with placeholder text for your own legal review, and a 404 page in each language ## What You Get - Full Astro source code, deploy configs for Netlify, Vercel and Cloudflare Pages, AI assistant instruction files, a changelog, and demo content in English and French. - Static output: no server or database needed to host it. - Demo photos, logos, prices, figures and text are samples to replace before launch. ## Not Included - Quoting, survey booking or CRM software. The quote form posts to a form service. - Checkout or financing. The pricing page and monthly prices are page designs with sample figures. - Live tariffs or solar data. The calculator uses fixed assumptions that you edit. - A CMS. Content lives in files in your repository. - Dark mode. Ecozen ships one light palette. - A Figma file. - Hosting, a domain or deployment. ## What You Can Build With Ecozen **Residential solar installer.** Start from `/`: the photo hero, services band, reviews, the savings calculator and the quote form. Extra work: set the calculator's tariff, sun hours and installed cost for your region. **Commercial or farm solar installer.** Start from `/home-two/`: the headline hero, company cards, the services list and project case studies. Extra work: replace the sample projects with your own sites, figures and client quotes. **Battery or EV charger installer.** Use the service pages, pricing packages and quote form, and rename the sample services to what you install. Extra work: write your own package contents and prices. **Energy audit or maintenance company.** Use the services, FAQ, team and careers pages. Extra work: the calculator and packages are solar-specific, so remove them or rewrite them for your services. ## Change Layouts From Content Files 7 sections come in 2 to 4 layouts: hero (`photo`, `split`, `panel` or `form`), company intro (`default` or `cards`), services (`band` or `list`), benefits (`grid` or `stack`), impact figures (`panel`, `split` or `cards`), process (`steps` or `timeline`) and reviews (`slider` or `quote`). Pick a layout with one `options.layout` value in the section's content file, or in a page's frontmatter block, with no code changes. ```yaml options: layout: "headline" # photo | headline ``` Section files list their options and allowed values in comments. ## Site Settings In One File Site identity, contact details, forms, local business details, cookie consent, the announcement bar, animation and languages are set in `src/config/config.toml`. For example (comments shortened): ```toml [seo.localBusiness] type = "HomeAndConstructionBusiness" areaServed = ["Springfield", "Riverside", "Greenfield"] # the towns or regions you install in ``` Set your site URL once in `config.toml`, and every canonical, sitemap and feed URL follows it. Colors and the type scale are set in `src/styles/theme.css`. Menus are in `src/config/menu.en.json` and `menu.fr.json`. ## Where Things Live ```text src/ config/ config.toml, menu.en.json, menu.fr.json, social.json, fonts.json, language.json content/ Markdown and MDX for every page, in english/ and french/ folders sections/ default content for each section layouts/ page layouts, 22 section components, widgets and cards pages/[...lang]/ routes for both languages sections.schema.ts section fields and layout options styles/theme.css colors and type scale ``` Page text, images, buttons, menus and section options live in Markdown, TOML and JSON files, not in components. A page can override any section's content through a named block in its frontmatter while the section keeps its shared defaults. ## Built-In Site Features - SEO basics built in: canonical and Open Graph tags, a sitemap, `robots.txt` and an RSS feed. Set your site URL in `config.toml` first. - JSON-LD structured data for your local business, services, blog posts and job postings. Delete or replace the sample careers entries before launch so no sample job ads are published. - Hreflang tags for both languages. - Cookie consent banner: scripts you mark as analytics or marketing run only after the visitor accepts that category. - Desktop dropdowns and the services mega menu open in one panel that resizes and slides between menus, with keyboard support. Optional announcement bar. - Contact and quote form that posts to Formsubmit, Formspree or Netlify Forms, chosen in `config.toml`. - Respects the reduced-motion setting for animations and smooth scrolling. - Generates llms.txt, llms-full.txt and a Markdown copy of each service, project, post, FAQ and legal page, which some AI tools and coding agents can read. - Copy page and View as Markdown buttons on blog posts, with optional Ask links for ChatGPT, Claude, Perplexity or Grok. - `robots.txt` switches to allow or block AI search crawlers and AI training crawlers separately. ## Customize With AI Coding Tools Ecozen ships instruction files for AI coding tools: `AGENTS.md`, plus `CLAUDE.md` for Claude Code and rules for Cursor and GitHub Copilot. What each tool reads on its own: - **Codex:** `AGENTS.md` - **Cursor:** `.cursor/rules/theme-architecture.mdc` and `AGENTS.md` - **Windsurf:** `AGENTS.md` - **GitHub Copilot:** `.github/copilot-instructions.md` and `AGENTS.md` - **Claude Code:** `CLAUDE.md` Most changes are edits to Markdown, TOML and JSON files. Ask your assistant to update the English and French files. Some things stay with you: form accounts, your domain and host, legal text, prices and calculator assumptions, logos and photos, and a final look at every page in the browser.