Helio

Helio is a site for a solar panel and home battery installer, and it fits heat pump and EV charger installers and renewable energy contractors too. It is set at night over a solar array: the blue-black of a solar cell with the faint grid of cells behind every page, solar amber, cell blue and leaf green, an crisp grotesque with monospaced figures for readouts and prices, and a glass pill nav. The home page opens on one house, photographed from the same spot through one day as you scroll, with the rating, the headline, one line, Get a free quote and Call over it from the first frame. The demo is a fictional installer, Ambrel Energy.

Helio comes in two variants, chosen when you create the site: files/Sanity (static pages, any host) and EmDash (--cms emdash, rendered on request on Cloudflare). The pages are the same in both.

Pages and their content

Page	Edit it in
Home	Pages → Home page (a list of sections)
Solutions (every solution as a card, what every installation includes, questions)	Pages → Solutions page
A solution (a page each: from price, typical savings, warranty, fitting time, key figures, what’s included, how it goes, questions, photo)	Content → Solutions
Savings calculator (the estimate, what to tell us, the quote form, questions)	Pages → Calculator page
Installations (every home as a card)	Pages → Installations page
An installation (a page each: system size, generation, savings, before and after, the brief, how we did it, the kit, the story)	Content → Installations
Finance and grants (ways to pay, a finance example, grants, monthly care plans, questions)	Pages → Finance and grants page
How it works (the steps, book a free survey, the installation deposit, questions)	Pages → How it works page
Reviews	Pages → Reviews page
Journal	Content → Journal (one guide can be members-only)
Contact (the map of the area, where you work, office hours, message form, questions)	Pages → Contact page
Name, phone, address, accreditations, area covered, rating, hours, navigation, profiles	Pages → Site settings
Buttons, labels, chat, emails, game texts	Content → Interface texts
Privacy, terms, deposit and installation terms	Pages → Legal

In headlines, words wrapped in *stars* catch a glint of sunlight that sweeps across them once, over a thin amber line, as in “Your roof, *working from dawn*”.

The hero

The hero is the site’s signature. Five photos of the same house from exactly the same spot (Pages → Home page → Hero → Photos) are revealed one after another as you scroll while the screen stays put:

1. Dawn: the plain slate roof, mist drifting over the lawn. It is there from the first frame and is the page’s largest image, so it loads first.
2. Morning: the scaffold up and the first panels on, sweeping in from the left behind a line of low gold sunlight, with rays raking across.
3. Noon: the full array, arriving behind a band of glare that crosses the glass, the sun flaring and dust turning in the light.
4. Evening: dusk falls from the sky, then the house lights up window by window on its battery while the car charges in the drive, the charger’s ring breathing. This stage uses two photos: the evening with every light off, and the same evening with them on.

A live readout counts kW now, kWh today, the battery and what the day has saved so far, and the captions follow in a glass card with a progress line; write your own in the hero’s four stages. Phones and portrait tablets get a tall version of the same five photos (Photos for phones), with the whole house between the headline and the caption. The later photos load after the page has loaded, so they never slow it down. With reduced motion, or in a browser without scroll-driven animations, the hero is one still: the house in the evening, with the four stages listed under it.

To use your own house, take the photos from a tripod, or generate one and edit it into the others so nothing moves. Where the windows, the charger and the sun are in your photos goes in the lights, charger and sun lists at the top of src/components/sections/Hero.astro, in percent of the photo’s width and height (wide and tall frames each have their own).

Savings are always shown as typical or as an estimate. Keep it that way in your own content: what a system saves depends on the roof, the weather, prices and how a household uses power.

The savings calculator

The calculator asks which way the roof faces, how big it is, the yearly electricity bill, who’s home in the day and whether to add a battery, and shows an estimate of the system size, what it makes in a year, what it saves, a rough cost and how long it takes to pay for itself, with the split between what’s used at home and what’s sold to the grid. It works it out in the browser as the answers change (the first figures are in the page already), says plainly that it’s an estimate, and lists its assumptions under the results. Every choice and assumption is content (Pages → Calculator page → Savings calculator): the yield factor of each roof orientation, the most kWp each roof size fits, the share each household uses at home, the electricity and export prices, the yield per kWp and the costs. The sums are in src/lib/estimate.ts. The home section “A typical home” shows one estimate as a teaser.

Solutions, installations and prices

Each solution has a page with a from price (and a note like “for a 4 kWp system, fitted”), typical savings and what they assume, the warranty, how long fitting takes, key figures, what’s included, how it goes and questions; search engines get it as a schema.org Service with an offer. Each installation has a page with its system size, yearly generation and savings, a before-and-after slider, the brief, how we did it, the kit and the solutions fitted (which link it to those solutions’ pages). On the cards, the roof before is wiped away to the roof after as you scroll.

How it works, the deposit, finance and care plans

Book a free survey with Cal.com (it loads on click; until it’s connected the page shows a preview of the calendar with your times). The installation deposit is paid with Stripe (a one-time Price id) or Lemon Squeezy (a variant id) in Pages → How it works page → Installation deposit. Care plans on the finance page are monthly subscriptions: a Stripe monthly Price id (or a Lemon Squeezy subscription variant id) on each plan. Without keys the buttons explain how to switch them on. The finance page also lists ways to pay, a representative finance example (only use the one your lender gives you) and the grants and payments that apply.

The map

The contact page and the home section “Where we work” show a map of the area round your base, drawn from OpenStreetMap in your colors, with a pin, a ring round the area you cover (in km, set on each), your address and directions links. It is part of the page (no embed, no cookies) and follows the theme and your accent. To draw your own, put your coordinates in map.config.json and run pnpm map -- fetch. List the towns and villages you cover in Site settings → Area covered.

Integrations

Everything works without keys; each feature switches on with its variables in .env.example.

Feature	Where	Service
Book a free survey	How it works page, loads on click; a preview of the calendar until connected	Cal.com
Installation deposit and care plans	How it works page (one-time) and finance page (monthly)	Stripe or Lemon Squeezy
Energy notes by email	Home and journal pages, with a welcome email	Supabase or Mailchimp
Quote requests and messages	Calculator and contact pages; to the email in Site settings	Resend
AI chat	Every page; answers about solutions, prices from, typical savings, grants, finance, how it works and the area; never promises savings	Claude or OpenAI
Members-only guide	Journal	Clerk
Search	⌘K or the search button: solutions, installations, pages, journal	built in, or Algolia
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, Google Analytics, PostHog
Photos	Production builds	Cloudinary (optional)

Sections

The home page is built from these sections, in any order: Hero, Solutions, A typical home (the calculator teaser, a summer day’s generation curve that draws itself with the sun riding it), Recent installations, Numbers (over an energy meter that lights up as it scrolls in), How it works (the steps along a cable whose connectors light one by one), Finance and grants (a photo in moving sunlight), Reviews, Journal, Energy notes (a leaf-green band), Where we work (the map of the area) and Closing call (a sunset photo beside the headline, dark in both themes).

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (solar amber: the quote buttons, marks and the sun), the second (cell blue: small capitals, readouts and rules) and the third (leaf green: savings, the favourite care plan, badges, the energy notes band). Buttons are lightened until their dark text is readable, leaf green is darkened until white text on it reads, and the text colors are adjusted for each theme; a color that can’t get there stops the build with a message. Brand also sets the fonts and the corners. The site opens in its dark theme even when the visitor’s system is light; the toggle switches to the day (bright noon paper and graphite) and the browser remembers it.

Languages

Helio is ready for more languages: see Languages.

The 404 page

A small game, Load shift: a day of sunshine from 6:00 to 21:00 and the household’s loads to run (the washing machine, the dishwasher, the car, hot water and the tumble dryer), each with its power and how long it runs. They start out in the evening; move each one along the day (drag it, or Tab to it and press ← →) so as much as possible runs on the roof, then run the day. The chart shows each hour’s sunshine, the part the house uses and what it buys from the grid. You score 100 × the solar your loads used ÷ the most they could have used. Three days: a clear June day, a cloudy morning and an April day with a shower; the best score is kept in the visitor’s browser.

AI assistants and search engines

• AGENTS.md describes the project for coding assistants (Claude Code reads it through CLAUDE.md, Cursor through .cursor/rules/).
• /llms.txt lists your pages, solutions, installations and the journal for AI assistants, in every language.
• Pages carry JSON-LD: the company as a HomeAndConstructionBusiness (the area it serves, hours, rating and its solutions as offers), solutions as Services with offers, installations as CreativeWorks, the deposit and care plans as offers, the reviews, questions as a FAQPage, and each journal post as a BlogPosting.

Commands

pnpm dev                     # local site, editor at /keystatic
pnpm build                   # production build
pnpm map -- fetch            # draw the map round map.config.json from OpenStreetMap
pnpm cms sanity schema|seed  # move content to Sanity (see Content → Sanity)

In the EmDash variant: npm run dev, npm run deploy (Cloudflare) and npm run emdash:schema (after changing the content model).