HELIO — Solar Energy Company
Power from the sky. Savings on the ground.
A bright, optimistic marketing site for a residential and commercial solar company — how solar works, an interactive savings calculator, residential and commercial offerings, case studies, the installation process and a get-a-quote flow. Built in Nuxt 4 (Vue 3), static-exported. The calculator is a real illustrative estimator; the quote form is an honest demo.
Role · Design + front-end build (Nuxt 4, savings calculator, demo quote) · Updated Jun 2026
- 9 page types: home, how-it-works, residential, commercial, calculator, process, projects, about, quote + 404
- An interactive savings calculator with deterministic solar math and a live SVG chart
- A typed data layer for projects/case studies and a quote-enquiry form with validation
- Procedural SVG sun/panel/energy-flow diagrams — zero external images, ~0 CLS
- Delivery
- Within 24h
- Licence
- One-time licence · full source
- Support
- 14 days setup support
- Updates
- Free updates included
Backend · CRM / forms
Projects and pricing are a typed data layer; the savings calculator is a front-end estimator and the quote form wires to your CRM or a form provider.
Delivered as full Nuxt 4 source. Swap company details and projects, recolour with the accent tokens, and connect the quote form to your CRM.
What makes it special
An interactive savings calculator
Real, illustrative solar math turns a monthly bill and roof/sun inputs into system size, annual and 25-year savings, payback years and CO₂ offset — with a live SVG chart, clearly framed as an estimate.
Residential and commercial, both done
Dedicated offerings with packages, financing options (loan, lease, PPA, PACE, cash), industries and a sustainability-reporting angle — the two halves of a real solar business.
A documented install process
Six phases — consult, design, permits, install, inspection, monitor — each with what-happens and a timeline, plus six case studies with system size, savings and payback.
Bright, optimistic design
A warm light canvas with a solar-amber→energy-green accent, a Sora display, sun/ray motifs, an energy-flow diagram and reduced-motion-gated reveals — clean and confident.
Self-contained and fast
Nuxt prerenders every route with self-hosted fonts and procedural SVG diagrams (no external requests), LocalBusiness JSON-LD, sitemap and a branded error page.
What’s included
- 9 page types: home, how-it-works, residential, commercial, calculator, process, projects, about, quote + 404
- An interactive savings calculator with deterministic solar math and a live SVG chart
- A typed data layer for projects/case studies and a quote-enquiry form with validation
- Procedural SVG sun/panel/energy-flow diagrams — zero external images, ~0 CLS
- Self-hosted Sora + Inter via @nuxt/fonts, LocalBusiness JSON-LD, sitemap and robots
Gallery
More Construction & Trades templates
Make HELIO yours.
Buy it as-is, or have YantraCore tailor it to your brand and content.