Огляд
Клієнт — компанія у сфері відновлюваної енергетики, що пропонує сонячні електростанції (автономні, мережеві та гібридні) — потребував преміального маркетингового сайту, орієнтованого на конверсію, який позиціонував би бренд у верхньому сегменті ринку приватної сонячної енергетики.
Бриф був чіткий: відійти від загального вигляду «монтажника сонячних панелей», передати інженерну надійність, зробити каталог продуктів простим у підтримці та дати потенційним клієнтам інструмент для самостійного підбору правильної системи для свого будинку ще до контакту з відділом продажів.
Мій внесок
Я спроєктував і побудував увесь сайт від початку до кінця як швидкий, статичний, SEO-дружній досвід на Hugo та Tailwind CSS v4.
Архітектура та збірка
- Налаштовано статичний сайт на Hugo з кастомною темою (
sun-power-theme-v1), модульними секційними partials (hero, переваги, добірка рішень, обрані продукти, FAQ, контактна форма, останні публікації журналу, специфікації кейсів, специфікації систем, список етапів) та перевикористовуваними шорткодами. - Реалізовано Node.js-конвеєр даних, що читає єдине джерело істини —
products.json— і автоматично генерує Markdown-файли для кожного SKU, тож клієнт може оновлювати весь каталог (назви, ціни, категорії, зображення, рейтинги, теги), редагуючи лише один JSON-файл — без знань Hugo чи Markdown. - Налаштовано чистий build-скрипт (
npm run dev/build:css), що компілює Tailwind v4 і запускає Hugo в один крок.
Інтерактивний калькулятор СЕС
- Побудовано 4-кроковий керований калькулятор (тип станції → мережа/фази → потужність у кВт → місячне споживання у кВт·год) на власному client-side JavaScript із валідацією та виводом рекомендованої конфігурації, що веде користувача у модальне вікно замовлення.
- Сценарій спроєктований так, щоб відчуватися як конфігуратор продукту, а не форма — нумеровані кроки, анімовані появи елементів та миттєвий зворотний зв’язок.
Контентні секції
- Редакційний журнал із лонг-рідами («Beyond the Grid», «Inverters Explained», «The Architectural Integration», «The Quiet Revolution» та іншими) для підтримки SEO та авторитету бренду.
- Три окремі лендинг-сторінки під автономні, мережеві та гібридні системи з власними специфікаціями та секціями кейсів.
- Каталог продуктів із детальними сторінками для сонячних модулів, інверторів, акумуляторів та комплектуючих.
- Юридичні сторінки (приватність, умови, етика) та структурований контактний потік із модальним вікном замовлення, доступним із будь-якої сторінки.
Візуальний дизайн
Виразна glassmorphism-естетика — матові скляні панелі, м’які ефекти сонячного сяйва та неба на фоні, акценти сонячних градієнтів у тексті, ультралегка типографіка та scroll-reveal анімації — що виділяє бренд серед типових шаблонних сайтів у сонячній галузі. Повністю адаптивні layout’и з ретельно опрацьованим мобільним досвідом для калькулятора та сітки продуктів.
Технологічний стек
| Шар | Технологія |
|---|---|
| Генератор статичного сайту | Hugo (extended) |
| Стилі | Tailwind CSS v4, PostCSS |
| Розмітка | HTML5, семантичні partials та шорткоди |
| Інтерактивність | Vanilla JavaScript (калькулятор, модалки, scroll-reveal) |
| Конвеєр даних | Node.js-скрипт, що читає products.json → Markdown |
| Збірка | npm run dev / build:css (Tailwind + Hugo одним кроком) |
| Хостинг | Статичний деплой — фактично нульова вартість хостингу |
Результат
Швидкий, повністю статичний, простий у підтримці маркетинговий сайт, який клієнт може запускати й оновлювати самостійно.
- Каталог продуктів тепер керується JSON-файлом — перебудова 10+ SKU займає секунди.
- Інтерактивний калькулятор перетворює головну сторінку з брошури на інструмент кваліфікації лідів, фіксуючи попередньо кваліфіковані запити з уже заповненими типом системи, потужністю та споживанням.
- Дизайн візуально піднімає бренд значно вище конкуруючих сонячних сайтів у тому самому сегменті.
- Архітектура статичного сайту забезпечує майже миттєве завантаження сторінок при фактично нульовій вартості хостингу.