Lumora Energy
A company site built as a sales channel: a savings estimate a visitor can run alone, and every enquiry routed to the team that handles it.
A fictional commercial solar, storage and EV charging company · Next.js 16 App Router
The brief.
Written for this demo, the way briefs reach us. Lumora Energy is a fictional company.
Our site reads like a brochure. Most good projects still come from referrals, and the enquiries the site does bring sit in one shared inbox until someone gets to them. We want a site that tells a facilities or finance director what we do in a minute, gives them a number they can take to their board, and puts every enquiry in front of the right team.
- 01One action on every page: request a site assessment.
- 02A savings estimate a visitor can run without talking to anyone.
- 03Every enquiry in the CRM with its source, routed to solar, storage or charging.
The pages and journeys in the build.
- [01]A homepage built around one actionA live model of a site through one day, then proof, solutions, process, sectors, projects and financing. Every section leads to the site assessment.
- [02]Savings estimatorSite type, spend, roof, hours, storage and charging in; system size, savings, payback, CO2 and two charts out, carried into the enquiry.
- [03]Solution pagesSolar, storage and EV charging from one template: how it works, who it suits, specs, the process, related projects and questions.
- [04]Project storiesNine projects, filterable by sector and solution, each led by system size, yearly generation, savings, payback and CO2.
- [05]Site assessment requestFour short steps, checked as the visitor goes, that send the request to the team that handles it.
- [06]InsightsSix articles with a topic filter and an email sign-up, answering the questions buyers ask before they enquire.
How it works underneath.
- 01Enquiries reach the CRMThe form posts to the site's own server, which checks every field with the same rules as the browser and returns a reference. On a client build that step creates the lead in the CRM.
- 02Routing by interestOne interest goes to the solar, storage or e-mobility team. Two or more, or Not sure yet, go to a project lead.
- 03The estimate travels with the leadFigures from the estimator are kept in the browser tab and attached to the enquiry, so the engineer starts from what the visitor saw.
- 04A source on every leadThe page and the button the visitor asked from are recorded with the enquiry.
- 05Analytics waits for consentPage views, estimate runs and form steps are measured only with analytics consent, the conversion tag only with marketing consent. The form works either way.
- 06Drawn in codeEvery illustration, from the live site model to the project plans and portraits, is drawn in SVG. No photo library, no image requests.
The decisions, and the reason for each.
- 01An assessment, not a contact formA named next step with a clear outcome is easier to say yes to than an empty message box.
- 02A number before a conversationFinance directors want a figure first. Giving one without a sales call brings better-prepared enquiries.
- 03Show the system workingThe live model shows in seconds what a system does through a day: the roof by day, the battery after dark, the grid when needed.
- 04A form in stepsFour short steps feel lighter than one long form, and the first answer decides who reads the rest.
- 05Proof in numbersProject stories lead with system size, yearly savings and payback, the figures a board asks for.
Where each part sends what a visitor did.
The parts the X-ray marks inside the demo. Open the demo notes on any page and choose X-ray to see them in place.
- 1Request an assessmentThe one action on every page. It opens the request with the page it came from recorded as the source.// CRMOn every page →
- 2Savings estimateRuns in the browser. Asking an engineer to check it attaches the figures to the enquiry.// CRMOn Savings estimate →
- 3Site assessment requestFour steps, each checked in the browser before the next. The server checks everything again before a lead is created.// CRMOn Request an assessment →
- 4What you are interested inDecides the team that receives the request: solar, storage, e-mobility or a project lead.// CRMOn Request an assessment →
- 5Send requestCreates the lead with its source and any estimate, notifies the team and sends a confirmation email.// CRMOn Request an assessment →
- 6Project filterFilters the project library by sector and solution. On a client build the library lives in the CMS, so a new story appears without a developer.// Content libraryOn Projects →
- 7Cookie choiceDecides whether analytics and marketing tags run. Everything else on the site works either way.// ConsentOn every page →
Three things to do in the demo.
Built with Next.js 16 App Router, React 19, TypeScript, Tailwind CSS 4, Motion, Zod in the browser and on the server.
Let's talk about what you are building.
A discovery session maps where visitors drop out and which systems the site should feed.