Задача
Большинство брендов панелей ставит логотип на чужой продукт. У этого завода есть карьер, печь, линия и свои монтажные бригады, и вся цепочка и есть причина, по которой он даёт гарантию двадцать пять лет. Довод работает, только если покупатель эту цепочку видит.
Поэтому сайт должен был показать производство, а не описать его, и на той же странице ответить на практические вопросы: какой модуль подходит к какой крыше, сколько он стоит и за сколько окупается. Три языка, потому что завод продаёт не только у себя в стране.
Что сделали
Шесть этапов от карьера до крыши
Первый экран ставит посетителя в карьер: экскаватор, самосвалы, одиннадцать километров до линии. По нижнему краю идёт лента этапов — песок, завод, линия, крыша, ночь, покупка, — и она одновременно индикатор и меню.
Прокрутка ведёт рассказ по одному этапу за раз. У каждого своя сцена и две цифры рядом, поэтому производство читается как последовательность, а не как текст про качество.
Внутри цеха: четыре машины в одном такте
Середина страницы открывает цех. Плавка, резка, сборка и тест стоят четырьмя короткими блоками: что делает машина и в каком темпе, а ритм всей линии задаёт печь.
Сцена над ними смотрит вдоль линии от ворот. Это тот же довод, что и в карьере, на шаг глубже: между этапами ничего не лежит на складе, потому что склада между ними нет.

Три формата модулей и восемь типов крыш
Каталог намеренно короткий. Одна ячейка, три рамы: черепичный формат для крыш с мансардами, стандартный домовой модуль и длинный для сараев и навесов. В таблице рядом стоят мощность, размер и цена, поэтому выбор занимает один взгляд.
Ниже страница показывает, куда эти модули ставят. Восемь крыш раскрываются по одной при наведении или касании: терраса, гараж, навес, сарай, многоквартирный дом, школа, поле, мастерская.

Калькулятор окупаемости вместо обещания
Три ползунка задают площадь крыши, годовое потребление и цену киловатт-часа. Страница отвечает числом модулей, ценой системы, экономией за год и сроком окупаемости, а график показывает, где линия пересекает стоимость.
Переключатель сравнивает на том же графике вариант без накопителя и с накопителем, а допущения расчёта напечатаны под цифрами.

Техническая часть
Страница — написанная руками статика, и это видно по цифрам. Вот как устроены три языка, что показали замеры и как сделаны сцены.


Поиск и скорость
Три языка на трёх адресах
Английская версия стоит в корне, португальская на /pt, русская на /ru — каждая по своему адресу, который можно переслать. Открыть португальскую версию
Скорость 95 на десктопе
Lighthouse замеряет десктопную версию на 95 по скорости загрузки: главная картинка появляется примерно за секунду.
Сто баллов за SEO и практики
Lighthouse ставит странице 100 по SEO и 100 за лучшие практики — и на мобильном, и на десктопе.
Картинки грузятся по мере прокрутки
Все изображения на странице загружаются отложенно: посетитель скачивает сцену карьера, а не пять этапов под ней.


Контент
Весь текст в одном файле
Страница написана руками на HTML, CSS и JavaScript, а тексты всех трёх языков лежат в одном файле контента.


Генерация
Шесть сцен собраны генерацией
Карьер, цех, крыши и модули — сгенерированные изображения, собранные конвейером, который держит один свет, одну палитру и один стиль на всех шести этапах.

Надёжность
HTTPS без пути назад
Незащищённый адрес переадресуется на HTTPS, а сервер отдаёт заголовок HSTS с preload, поэтому браузер вообще перестаёт пробовать небезопасный вариант.


Мобильная версия
Мобильная версия проверена замером
На экране в 390 пикселей страница ровно 390 пикселей шириной: ничего не торчит, горизонтальной прокрутки нет.
Мобильная версия

Что получилось
- Производство понятно за один проход по странице.
- Модуль, тип крыши, цена и окупаемость закрываются, не уходя со страницы.
- Одна и та же страница работает на трёх языках, переключатель в шапке.
Сайт продаёт короткую цепочку — единственное, чего нет у перекупщика. Посетитель видит, откуда берётся песок, выбирает модуль под свою крышу, проверяет окупаемость на своих числах и с последнего экрана отправляет адрес и фото крыши.


