The task
Most panel brands put a logo on somebody else's product. This plant has a quarry, a furnace, a line and its own fitting crews, and that whole chain is the reason it can give a twenty-five year warranty. The argument only works if the buyer sees the chain.
So the site had to show production rather than describe it, and still answer the practical questions on the same page: which module fits which roof, what it costs, and how long it takes to pay for itself. Three languages, because the plant sells beyond its own country.
What we built
Six stages from quarry to roof
The first screen puts the visitor in the quarry: excavator, trucks, eleven kilometres to the line. A row of steps runs along the bottom edge, sand, plant, line, roof, night and buy, and it works as both a progress bar and a menu.
Scrolling moves the story one stage at a time. Each stage has its own scene and two figures beside it, so production reads as a sequence rather than as a page about quality.
Inside the hall: four machines on one takt
The middle of the page opens the hall. Melting, cutting, stringing and testing stand as four short blocks, each saying what the machine does and at what pace, with the furnace setting the rhythm for the rest.
The scene above them looks down the line from the gate. It is the same argument as the quarry, one step further in: nothing waits in a yard between steps because there is no yard.
Three module formats and eight kinds of roof
The catalogue is short on purpose. One cell, three frames: a tile for roofs full of dormers, the standard house module, and a long one for barns and carports. A table lists power, size and price side by side, so the choice takes one glance.
Under it the page shows where the modules actually go. Eight roofs open one at a time on hover or tap: a terrace, a garage, a carport, a barn, a block of flats, a school, a field and a workshop.
A payback calculator instead of a promise
Three sliders set roof area, yearly consumption and the grid price. The page answers with the number of modules, the system price, the yearly saving and the years to payback, and a chart shows where the line crosses the cost.
A switch compares panels only against panels with storage on the same chart, and the assumptions are printed under the figures.
Under the hood
The page is hand-built static, and that shows up in the numbers. Here is how the three languages are wired, what the measurements say and how the scenes were made.
Search and speed
Three languages at three addresses
English sits at the root, Portuguese at /pt and Russian at /ru, each a real address a person can send to someone. Open the Portuguese version
Performance 95 on desktop
Lighthouse measures the desktop page at 95 for performance, with the main image on screen in about one second.
Full marks for search and practices
Lighthouse gives the page 100 for SEO and 100 for best practices, on mobile and on desktop alike.
Images load as you scroll
Every image on the page is lazy-loaded, so a visitor downloads the quarry scene and not the five stages below it.
Content
All the text in one file
The page is hand-written HTML, CSS and JavaScript, and the copy for all three languages lives in a single content file.
Generation
Six scenes built by generation
The quarry, the hall, the roofs and the modules are generated images, made through a pipeline that keeps one light, one palette and one style across all six stages.
Reliability
HTTPS with no way back
The insecure address redirects to HTTPS, and the server sends an HSTS header with preload, so the browser stops trying the insecure one at all.
Mobile version
The phone version was measured
On a 390 pixel screen the page is exactly 390 pixels wide, so nothing sticks out and there is no sideways scroll.
On a phone
What came out of it
- The manufacturing is clear in one pass down the page.
- Module, roof type, price and payback are answered without leaving the page.
- The same page runs in three languages from one switcher.
The site sells the short chain, the one thing this plant has that a reseller does not. A visitor sees where the sand comes from, picks a module for their roof, checks the payback on their own numbers and sends the address from the last screen.
