Lior Renewable Energy
A solar equipment and engineering services website converted built with Hugo, built to showcase a solar product catalogue, project gallery, and an interactive system-sizing calculator for a Nigerian solar energy company.
Overview
Lior Renewable is a Nigerian solar-energy company website focused on providing clean, reliable power solutions for homes, businesses, and industrial facilities.
The website offers:
Solar panels, inverters, batteries, complete solar kits, and accessories Solar system design and load assessment Energy audits and PV sizing Installation and commissioning Battery and inverter selection Maintenance, monitoring, troubleshooting, and technical support Commercial and industrial solutions, including generator synchronization The site presents Lior Renewable as more than an equipment seller: it combines product sales with in-house engineering services. Customers can either purchase equipment directly or hire the company to design and install a complete system.
It also showcases projects such as a 12 kW clinic system in Kaduna, a 150 kW industrial plant in Ogun State, a 20 kW commercial system in Abuja, and a 5 kW residential installation in Gwarinpa. The main call to action is to request a free solar assessment or contact the company through WhatsApp.
Solution
The site was rebuilt in Hugo using a strict content/data/layout separation:
reusable page sections live in layouts/partials/, page copy lives in
per-page Markdown front matter, and list-shaped content (categories,
testimonials, process steps, service plans, engineering services) lives in
YAML data files that a non-developer can edit directly. Products and
projects are Hugo page bundles — one Markdown file per item giving each
a real, linkable detail page and clean filtering by category or segment
without a client-side framework.
The React SystemBuilder component was reimplemented from scratch as a
dependency-free vanilla JavaScript widget: a four-step wizard (property
type → backup hours → appliance quantities → estimated system) that
progressively enhances plain HTML, so the calculator still renders as
usable content even before the script loads. The full design system —
colors, type scale, spacing, shadows was translated into a Tailwind v4
theme so every template could reuse the original’s utility-class
vocabulary directly.
Features
- Full solar equipment catalogue with category filtering
- Individual, linkable pages for every product and project
- Interactive 4-step solar system-sizing calculator (vanilla JS)
- Filterable project gallery by market segment
- Contracted-engineering enquiry form with service selection
- Service & support plans with tiered maintenance packages
- Product-specific WhatsApp enquiry links with automatic link-preview images
- Mega-menu product navigation with mobile-optimized fallback
- Responsive desktop and mobile design
- SEO-friendly, server-rendered architecture with Open Graph metadata
- Data-driven content using YAML no code changes needed for content updates
- Modular, component-based Go template partials.
Results
The migration replaced a client-rendered single-page application with a statically generated site that loads instantly, indexes cleanly for search engines, and lets the client update products, projects and pricing without touching code. The signature system-sizing calculator was preserved in full, now running as lightweight vanilla JavaScript, faster, and easier-to-maintain result than the original.