Case Study · Concept
Helios Solar — Solar Energy
A bilingual marketing site for a fictional Moldovan solar installer, built around an interactive savings-and-payback calculator.
Overview
Helios Solar is a concept project exploring how a solar-panel installer in Moldova might present itself online. The brief was a single-page marketing site that turns a visitor’s curiosity about going solar into a concrete, personalised number — and a request for a quote.
The centrepiece is an interactive calculator: a homeowner enters their monthly electricity bill and roof type and instantly sees a recommended system size, estimated annual savings, payback period, and 25-year savings — animated as the figures count up. The rest of the page is fully bilingual via next-intl, in a calm, premium navy-and-amber identity.
The brief
- One-page marketing site for a Moldovan solar installer concept
- Interactive calculator: monthly bill + roof type → system size, savings, payback
- Bilingual UI — RO default, RU secondary
- Calm, premium navy-and-amber identity
- Responsive and mobile-first
Approach
Interactive savings calculator
A single input — the monthly electricity bill — plus roof type feeds a tunable config of local constants (tariff, yield per kW, install cost) to compute system size, annual savings, payback, and 25-year savings.
Animated result figures
Results count up with a requestAnimationFrame ease-out, with a calm skeleton empty state and locale-aware number formatting.
Full-bleed photographic hero
A full-width hero photo with a gradient scrim for legibility — dark text on light on desktop, white text on dark on mobile — so the image stays vivid at every width.
Bilingual content layer
All copy lives in next-intl message files — Romanian default, Russian secondary — with a language toggle that preserves the current route.
Motion on scroll
Sections fade and rise into view via an Intersection Observer, gated behind prefers-reduced-motion and visible by default if scripts fail.
Engineering highlights
- Next.js 16 App Router with TypeScript and Tailwind CSS v4 (CSS-first @theme tokens)
- Calculator logic isolated in a single tunable config object
- next-intl routing — RO default, RU secondary — with no hardcoded copy
- Local next/image assets, Lucide icons, deployed on Vercel
Gallery
Outcome
- A polished bilingual solar landing live at helios-solar.vercel.app
- An interactive calculator that turns a bill into a personalised savings estimate
- Clean, production-ready Next.js codebase with passing build and lint
- Serves as a portfolio demo of conversion-focused marketing sites
Want something like this?
Have a project in mind? Let's discuss what I can build for you.
Start a project→