Skip to content
Tvorum.
Concept

Sonce Energy — website concept for a solar installer

A landing page for a company that installs solar power systems for homes and businesses. The page is built as a single sunny day — from dawn in the hero to night by the request form — and at every step visitors see how a system would work for them.

Demo UI in Ukrainian — we build in any language.

Sonce Energy — homepage screenshot

This is a concept, not a client project. The brand, people and data are fictional; the code is real. It was built for the Ukrainian market, so the demo interface is in Ukrainian. Order a site, and with your permission it becomes our next real case study.

Industry
Solar installer
Site type
Landing page
Year
2026
Format
Studio concept

The task

What the site had to do

A solar system is an expensive and “invisible” purchase. People spend thousands of dollars on equipment they’ve never seen working and compare several companies that promise roughly the same. In Ukraine in 2026 the decision usually comes down to three reasons: energy bills, power outages and selling surplus power to the grid. The site has to answer each with numbers, not slogans.

The site had four goals:

  • qualified requests for a free engineer visit — the main conversion, after which the company designs the system and prepares an estimate;
  • self-service calculation — so before the call people understand the price range, the system size they need and the real payback with their own tariff;
  • answering the main fear — “will the battery last when the power goes out on a winter evening?”;
  • trust without fake reviews — through transparent stages, equipment types without a “favorite brand” and guarantees written into the contract.

The solution

Design and UX decisions

The idea — the website as a sunny day. Every section has its own hour: 5:48 am in the hero, 10:30 am at the calculator, 12:30 pm — “peak generation” — at the packages, 7:40 pm for the blackout test, 9:15 pm at the site-visit request. A small “sundial” in the header moves the sun along an arc as you scroll.

Visual language. A bright, optimistic palette: sunny yellow, turquoise, white and a deep graphite green for contrast. Instead of stock photos — a custom SVG illustration system: a house with panels, an equipment diagram, a roof plan with the panel layout, a warehouse with rows of panels and a night street where only one house is lit.

Interactive selling points:

  • a “living” house in the hero: the sky, sun, clouds and window lights change throughout the day, and a monitor card shows energy flowing between the panels, the house, the battery and the grid — including during a scheduled outage;
  • a system calculator by consumption or roof area, with region and goal (savings, backup, selling surplus), that works out system size, number of panels, battery capacity, inverter type, a price range and payback; tariffs are editable, and there are no unverified government rates;
  • monthly generation and 15-year cumulative savings charts that account for panel degradation;
  • a blackout test that models battery charge hour by hour for the season, outage schedule and battery size, shows the hours without power and suggests the smallest battery that covers the schedule;
  • 5/10/30 kW packages, an equipment diagram with component highlighting and a site-visit request that automatically pulls in the calculation, the blackout-test result or the chosen package.

Screens

On desktop and on a phone

Sonce Energy — full homepage
The full homepage — scroll inside the frame.
Sonce Energy — mobile version
Mobile version

Features

What’s on the site

  • An illustrated house that lives through the day: sky, sun, lights in the windows
  • Energy-flow monitor with a scheduled-outage simulation
  • System calculator: by consumption or roof area, region and goal
  • Panels, inverter, batteries, cost and payback calculated with editable tariffs
  • Monthly generation and 15-year savings charts
  • Blackout test with hourly battery charge, capacity sizing and hand-off to the request form
  • 5/10/30 kW packages that carry the choice into the form
  • Interactive equipment diagram: panels, inverters, batteries, protection
  • Engineer-visit form with phone mask, validation and date choice
  • Responsive down to 390 px, swipe cards on mobile, prefers-reduced-motion

Stack

  • HTML5
  • CSS Grid/Flex
  • Vanilla JS
  • Illustrated day scene: SVG house, sky and sun change in real time
  • Energy-flow simulation: panels → inverter → house / battery / grid
  • System calculator: size, panels, battery, cost and payback
  • SVG charts: monthly generation and 15-year savings
  • Blackout test: hourly battery model against an outage schedule
  • Interactive equipment diagram with ARIA tabs
  • IntersectionObserver animations with prefers-reduced-motion
  • CMS-ready

Concepts are hand-built static sites. For clients we pick the stack by the job: Next.js, WordPress, Shopify or WooCommerce, with a CMS your team can use.

Palette

  • #FFC83D
  • #12B3A8
  • #0D2B33
  • #FFFDF6
  • #E3F6F3
For your businessNeed a landing page like this?Landing page: prices and process

More concepts

Other projects

All concepts

$0 · 24 hours

Want one like this — for your business?

Tell us about your business. Within 24 hours we’ll send a prototype of your homepage — inspired by Sonce Energy or something entirely different.

  • Free homepage prototype within 24 hours
  • Fixed price and deadline in the contract
  • 5% off for every day we’re late
  • Code in your GitHub from day one
  • 30% off for our first 10 clients

Prefer email? tvorum172@gmail.com

Preferred way to talk

No spam, no sales sequences. We use your details only to reply — see our privacy policy.