nimatica
Обсудить проект
2026

silex

Сайт завода солнечных панелей и накопителей

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

Задача

Большинство брендов панелей ставит логотип на чужой продукт. У этого завода есть карьер, печь, линия и свои монтажные бригады, и вся цепочка и есть причина, по которой он даёт гарантию двадцать пять лет. Довод работает, только если покупатель эту цепочку видит.

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

Что сделали

Шесть этапов от карьера до крыши

Первый экран ставит посетителя в карьер: экскаватор, самосвалы, одиннадцать километров до линии. По нижнему краю идёт лента этапов — песок, завод, линия, крыша, ночь, покупка, — и она одновременно индикатор и меню.

Прокрутка ведёт рассказ по одному этапу за раз. У каждого своя сцена и две цифры рядом, поэтому производство читается как последовательность, а не как текст про качество.

Внутри цеха: четыре машины в одном такте

Середина страницы открывает цех. Плавка, резка, сборка и тест стоят четырьмя короткими блоками: что делает машина и в каком темпе, а ритм всей линии задаёт печь.

Сцена над ними смотрит вдоль линии от ворот. Это тот же довод, что и в карьере, на шаг глубже: между этапами ничего не лежит на складе, потому что склада между ними нет.

Изометрический вид в цех: печь, конвейер, рука робота и стеллажи готовых панелей.

Три формата модулей и восемь типов крыш

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

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

Таблица модулей с мощностью, размером и ценой, под ней лента из восьми типов крыш.

Калькулятор окупаемости вместо обещания

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

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

Блок окупаемости: слева срок и параметры системы, справа график окупаемости.

Техническая часть

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

Поиск и скорость

  • Три языка на трёх адресах

    Английская версия стоит в корне, португальская на /pt, русская на /ru — каждая по своему адресу, который можно переслать. Открыть португальскую версию

  • Скорость 95 на десктопе

    Lighthouse замеряет десктопную версию на 95 по скорости загрузки: главная картинка появляется примерно за секунду.

  • Сто баллов за SEO и практики

    Lighthouse ставит странице 100 по SEO и 100 за лучшие практики — и на мобильном, и на десктопе.

  • Картинки грузятся по мере прокрутки

    Все изображения на странице загружаются отложенно: посетитель скачивает сцену карьера, а не пять этапов под ней.

Контент

  • Весь текст в одном файле

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

Генерация

  • Шесть сцен собраны генерацией

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

Надёжность

  • HTTPS без пути назад

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

Мобильная версия

  • Мобильная версия проверена замером

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

Мобильная версия

Сайт завода на телефоне: сцена карьера, лента этапов и блоки модулей друг под другом.
Сайт завода на телефоне: сцена карьера, лента этапов и блоки модулей друг под другом.

Что получилось

  • Производство понятно за один проход по странице.
  • Модуль, тип крыши, цена и окупаемость закрываются, не уходя со страницы.
  • Одна и та же страница работает на трёх языках, переключатель в шапке.

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

Нужен похожий проект?

Напишите, что должен делать ваш. Ответим в тот же день с оценкой и сроками.

Вопросы по проекту

  • Рассказ о производстве, за которым можно проследить, короткий каталог с настоящими характеристиками, примеры применения и способ запросить расчёт. Калькулятор оправдан, когда решение о покупке упирается в цифру.

  • Здесь каждая сцена построена, а не снята: карьер, цех, крыши и модули. Это выручает, когда линию нельзя снимать или когда нужен один визуальный язык на всех этапах.

  • Одна страница, один переключатель, три версии текста. Переводятся все заголовки, цифры и единицы, а вёрстка проверяется на каждом языке: строка на португальском и на русском разной длины.

  • Такие сайты считаются от тарифа «Сайт компании», актуальная цифра стоит на странице цен. На неё влияют количество этапов, объём сгенерированной графики и число языков.

Похожие проекты