Wiele grup odbiorców
Odbiorcy i producenci energii, dostawcy, kandydaci, media oraz partnerzy potrzebują osobnych ścieżek w jednym doświadczeniu marki.
Case study · Energia i transformacja cyfrowa
ENGIE Zielona Energia.
Dwujęzyczny serwis korporacyjny, który łączy ofertę dla odbiorców i producentów energii, aktualności, wiedzę, rekrutację oraz mapę aktywów w jednym systemie treści.
59tras w wersjach PL i EN
83komponenty frontendu
37modeli treści Strapi
46komponentów CMS
25modułów komunikacji z API
~24 tys.linii kodu aplikacji
01
Punkt wyjścia
Serwis firmy energetycznej musi jednocześnie obsługiwać sprzedaż, komunikację korporacyjną, publikacje eksperckie i rekrutację. Każdy obszar ma inną strukturę oraz rytm aktualizacji.
Dwa języki
Polska i angielska wersja obejmują strony, wpisy, kategorie, oferty, webinary, FAQ oraz kampanie.
Różne formaty
Dane liczbowe, osie czasu i mapy występują obok dokumentów, wideo, formularzy oraz treści redakcyjnych.
Standard korporacyjny
SEO, dostępność, zgody, analityka, bezpieczeństwo i zgodność z globalnym językiem wizualnym ENGIE.
02
Architektura rozwiązania
Next.js odpowiada za statycznie publikowany frontend, a Strapi za modele danych, lokalizacje, media i codzienną pracę redakcji.
Frontend Next.js
React 18 i TypeScript. 58 plików stron generuje 59 publicznych tras w dwóch językach.
CMS Strapi
37 typów treści, publikacja szkiców, lokalizacja i 46 wielokrotnie używanych komponentów.
Warstwa danych
25 modułów endpointów izoluje widoki od REST API oraz obsługuje relacje i wersje językowe.
Publikacja
Eksport statyczny uzupełniony generowaniem sitemap, przekierowań i walidacją unikalności adresów.
Redakcja zarządza treścią bez ingerencji w kod, a frontend zachowuje kontrolę nad strukturą i prezentacją.
03
Modułowy system treści
Dynamiczna strefa w Strapi jest renderowana przez odpowiadające jej, typowane komponenty React.
10 bloków stron
Sekcje z tłem, obrazem i formularzem, listy, akordeony, pełne media, pliki i wideo.
Modele domenowe
Oferta, aktualności, blog, webinary, FAQ, zespół, aktywa ENGIE, realizacje i strony korporacyjne.
Lokalizacja danych
Pola, relacje, slugi i SEO są lokalizowane w CMS-ie i mapowane na adresy PL oraz EN.
Nawigacja jako treść
Menu, rozwijane sekcje, linki zewnętrzne i warianty nagłówka są zarządzane w CMS-ie.
Nowa kampania korzysta z istniejącego języka komponentów zamiast kolejnego jednorazowego szablonu.
04
Oferta i dane operacyjne
Serwis porządkuje szeroką działalność ENGIE w czytelne ścieżki dopasowane do rodzaju informacji.
Oferta energetyczna
Osobne obszary dla odbiorców i producentów, kategorie, nawigacja sekcyjna i wezwania do kontaktu.
Mapa aktywów
Google Maps prezentuje instalacje w Polsce i na świecie z markerami, klastrowaniem, filtrami i kartami szczegółów.
Centrum wiedzy
Aktualności, blog i webinary mają paginację, kategorie, powiązane materiały i pliki do pobrania.
Firma i rekrutacja
Historia, CSR, zespół, system zarządzania i oferty pracy z zewnętrznej platformy.
05
SEO i publikacja statyczna
Proces budowania wykonuje kontrole, które w aplikacji serwerowej byłyby obsługiwane podczas żądania.
Metadane z CMS
Każdy typ strony ma lokalizowane pola SEO i social media.
Automatyczna sitemap
Łączy strony z CMS-u z blogiem, aktualnościami i webinarami.
Przekierowania
Lista ze Strapi trafia do statycznego pliku obsługiwanego również na stronie 404.
Walidacja tras
Build wykrywa kolizje między stronami dynamicznymi i adresami systemowymi.
Publikacja kończy się dopiero wtedy, gdy treści, adresy, przekierowania i indeksowanie są spójne.
06
Integracje
Frontend łączy CMS z narzędziami sprzedaży, komunikacji, analityki i HR.
Salesforce Web-to-Lead
Formularze kontaktowe i newsletter przekazują zgłoszenia wraz z wymaganymi zgodami.
Google Maps
Interaktywne mapy aktywów z lokalizacjami zarządzanymi w CMS-ie.
Matomo Cloud
Analityka jest ładowana centralnie, bez powielania skryptu między widokami.
YouTube i eRecruiter
Moduły wideo oraz oferty pracy są osadzone w spójnym doświadczeniu serwisu.
07
Design system ENGIE
Warstwa wizualna używa semantycznych tokenów tła, tekstu, obramowań, statusów i akcentów.
Tokeny semantyczne
Komponent deklaruje rolę brand, neutral, status lub accent zamiast przypadkowego koloru.
Charakterystyczny gradient
Błękit przechodzący w turkus, jasne powierzchnie i typografia Lato budują język marki.
Dostępne prymitywy
Akordeony, selecty, suwaki, checkboxy i nawigacja korzystają z Radix UI.
Ruch z umiarem
Animacje wejścia, karuzele i wielowarstwowy hero wspierają hierarchię treści.
Ten sam system obejmuje stronę główną, ofertę, mapy, publikacje i dynamiczne kampanie.
08
Rezultaty
Jedna platforma
Serwis korporacyjny, oferta, publikacje, webinary, FAQ, rekrutacja i realizacje współdzielą architekturę.
Pełne PL i EN
Routing, treści, metadane oraz kolekcje mają równoległe, lokalizowane ścieżki.
Samodzielna redakcja
37 modeli i 46 komponentów CMS daje kontrolę bez utraty spójności frontendu.
Rozwijalny builder
Kampanie można składać z gotowych bloków zgodnych z design systemem.
Kontrolowana publikacja
Build generuje serwis, sitemap, przekierowania i prawidłowe trasy oraz wykrywa kolizje.
Połączone integracje
Sprzedaż, mapy, analityka, wideo i rekrutacja są częścią jednego doświadczenia.
Bezpieczeństwo
Historia obejmuje aktualizacje zależności, poprawki audytu i wzmacnianie integracji.
Ciągły rozwój
165 commitów od sierpnia 2024 dokumentuje rozwój treści, SEO, mobile i bezpieczeństwa.