Кейс · Концепт
Helios Solar — Солнечная энергетика
Двуязычный маркетинговый сайт для вымышленного молдавского установщика солнечных панелей, построенный вокруг интерактивного калькулятора экономии и окупаемости.
Обзор
Helios Solar — концептуальный проект, исследующий, как установщик солнечных панелей в Молдове мог бы подавать себя онлайн. Задача — одностраничный маркетинговый сайт, который превращает интерес посетителя к солнечной энергии в конкретное персональное число и заявку на расчёт.
Центральный элемент — интерактивный калькулятор: владелец дома вводит месячный счёт за электричество и тип крыши и сразу видит рекомендуемую мощность системы, оценку годовой экономии, срок окупаемости и экономию за 25 лет — с анимацией нарастающих цифр. Остальная страница полностью двуязычна через next-intl, в спокойной премиальной сине-янтарной айдентике.
Задача
- Одностраничный маркетинговый сайт для концепта молдавского установщика панелей
- Интерактивный калькулятор: месячный счёт + тип крыши → мощность, экономия, окупаемость
- Двуязычный интерфейс — RO по умолчанию, RU вторым
- Спокойная премиальная сине-янтарная айдентика
- Адаптивный и mobile-first
Подход
Интерактивный калькулятор экономии
Одно поле — месячный счёт за электричество — плюс тип крыши подаются в настраиваемый конфиг локальных констант (тариф, выработка на кВт, стоимость монтажа), чтобы рассчитать мощность системы, годовую экономию, окупаемость и экономию за 25 лет.
Анимированные цифры результата
Цифры нарастают через requestAnimationFrame с ease-out, со спокойным skeleton-состоянием и форматированием чисел под язык.
Полноэкранный фото-hero
Фото-hero во всю ширину с градиентной засветкой для читаемости — тёмный текст на светлом на десктопе, белый на тёмном на мобайле — чтобы изображение оставалось ярким на любой ширине.
Двуязычный слой контента
Весь текст — в message-файлах next-intl: румынский по умолчанию, русский вторым, с переключателем языка, сохраняющим текущий маршрут.
Анимация при скролле
Секции появляются с fade-and-rise через Intersection Observer, с учётом prefers-reduced-motion и видимые по умолчанию, если скрипты не сработают.
Технические решения
- Next.js 16 App Router с TypeScript и Tailwind CSS v4 (CSS-first токены @theme)
- Логика калькулятора вынесена в один настраиваемый конфиг-объект
- Маршрутизация next-intl — RO по умолчанию, RU вторым — без хардкода текста
- Локальные ассеты next/image, иконки Lucide, деплой на Vercel
Галерея
Результат
- Отполированный двуязычный solar-лендинг, доступен на helios-solar.vercel.app
- Интерактивный калькулятор, превращающий счёт в персональную оценку экономии
- Чистый production-ready код на Next.js с проходящими build и lint
- Служит демо в портфолио для конверсионных маркетинговых сайтов
Хотите что-то подобное?
Есть идея проекта? Давайте обсудим, что я могу для вас создать.
Начать проект→