1. Sytuacja Wyjściowa, Cel i Wyzwania

LEON to polski producent nowoczesnych drzwi premium – ukrytych, naściennych, regulowanych i systemów przesuwnych. Firma tworzy rozwiązania architektoniczne dla klientów indywidualnych, biur projektowych i generalnych wykonawców.

Główne cele:

• stworzenie strony internetowej spójnej z minimalistycznym designem produktów LEON,
• przygotowanie konfiguratora 3D, który pozwoli klientom zobaczyć drzwi w realistycznym modelu i personalizować:
  • modele,
  • warianty skrzydeł,
  • ościeżnice,
  • kolory i forniry,
  • klamki,
  • kierunek otwierania,
  • niestandardowe wymiary,
• połączenie konfiguratora z bazą danych produktów i wariantów technicznych,
• zapewnienie szybkiego ładowania przy dużej ilości assetów graficznych 3D,
• przygotowanie infrastruktury pod przyszłą sprzedaż online.

Największe wyzwania:

• ogarnięcie setek wariantów produktowych w jasnej strukturze danych,
• integracja Adobe Forge z WordPressem i API backendowym,
• optymalizacja assetów 3D, żeby nie zabić Core Web Vitals,
• przygotowanie UX konfiguratora, który nie męczy, tylko prowadzi użytkownika krok po kroku.

2. Zakres Prac i Wdrożone Funkcjonalności

A. Strona internetowa (WordPress)

• nowoczesny design premium dopasowany do stylu drzwi LEON,
• projekt UX/UI pod wysokiej klasy odbiorcę (architekci, deweloperzy, premium retail),
• layout oparty na dużych zdjęciach, hero transitions i sekcjach prezentujących linie produktowe,
• moduły:
  • katalog drzwi,
  • kolekcje,
  • prezentacje systemów: ukryte, naścienne, przesuwne,
  • strefa dla partnerów,
  • materiały do pobrania (PDF, 3D, DWG),
  • blog/poradnik dla architektów.

B. Konfigurator 3D drzwi (Adobe Forge)

Najbardziej zaawansowany element całego projektu.

Funkcjonalności:

• realistyczny model drzwi w 3D na bazie Adobe Forge / Autodesk Forge,
• zmiana:
  • modelu,
  • kierunku otwierania,
  • rodzaju ościeżnicy,
  • koloru / forniru / lakieru,
  • rodzaju klamki i okuć,
  • przeszklenia,
  • wymiarów (standard i custom),
• dynamiczne nakładanie tekstur i materiałów,
• generowanie podsumowania PDF z wybraną konfiguracją,
• API do pobierania wariantów i dostępności elementów,
• kompatybilność z bazą produktową + możliwością rozszerzania kolekcji,
• backend tyrający:
  • relacje modeli,
  • kompatybilności,
  • ograniczenia montażowe (np. system ukryty vs typ ściany),
• przygotowanie struktury danych pod przyszłe wykorzystanie w sprzedaży B2B.

To jest poziom konfiguratorów klasy Häfele, Porta Premium albo Rimadesio.

C. Integracja danych produktowych

• stworzenie centralnej bazy parametrów drzwi,
• relacje między modelami, systemami i akcesoriami,
• możliwość dopinania kolejnych wariantów bez rozwalania systemu,
• API udostępniające konfiguratorowi aktualne zasoby.

D. Optymalizacja wydajności

• minimalizacja assetów 3D,
• WebP + lazy loading,
• caching statycznych wariantów tekstur,
• kompresja modeli,
• SSR w WordPressie dla sekcji marketingowych,
• optymalizacja animacji pod Lighthouse / CWV.

3. Efekty i Rezultaty Projektu

• nowoczesna strona internetowa, spójna z marką premium,
• konfigurator 3D pozwalający klientowi:
  • realnie zobaczyć drzwi „u siebie”,
  • porównać style i materiały,
  • wygenerować własną specyfikację,
• skrócony proces ofertowania dla handlowców,
• eliminacja błędów wynikających z niepoprawnej konfiguracji,
• wsparcie architektów i deweloperów (większa czytelność oferty),
• gotowa baza danych umożliwiająca rozwój:
  • sprzedaży online,
  • integracji B2B,
  • katalogów produktowych,
  • showroomowych konfiguratorów offline.

Brand LEON dostał narzędzie, które ustawia ich w ścisłej czołówce producentów premium.

4. Stack technologiczny

Platforma i architektura

• WordPress (custom theme + ACF Pro)
• Elementor Pro – layout i mikromoduły
• Adobe Forge / Autodesk Forge – silnik konfiguratora 3D
• API layer (REST) – komunikacja WordPress ↔ konfigurator
• Custom Product Variant Engine (backendowa baza parametrów)
• PHP 8.x
• MySQL 8.x
• Cloudflare CDN

Biblioteki frontendowe

• Three.js (wizualizacja 3D)
• GSAP (animacje)
• WebGL shaders (tekstury)
• Sass / Tailwind

Optymalizacja

• WP Rocket / LiteSpeed Cache
• ShortPixel / WebP Express
• Lazy loading + preloading dynamicznych assetów

5. FAQ 

1. Jak działa konfigurator 3D drzwi LEON?

Konfigurator korzysta z Adobe Forge i Three.js. Po wybraniu modelu drzwi użytkownik może zmieniać kolory, materiały, ościeżnice, klamki i łączyć warianty w dowolnej kolejności. System na żywo renderuje zmiany i aktualizuje podsumowanie techniczne.

2. Czy konfigurator jest połączony z bazą produktów?

Tak. Wszystkie modele i warianty drzwi znajdują się w centralnej bazie parametrów. Konfigurator pobiera aktualne dane przez REST API.

3. Czy konfigurator umożliwia zapis lub pobranie projektu?

Tak. System generuje PDF z pełną specyfikacją wybranego modelu drzwi.

4. Czy strona jest przystosowana pod architektów?

Tak – dostępne są materiały do pobrania (PDF, CAD, tekstury), galerie, wizualizacje i dane techniczne.

5. Czy projekt umożliwia dalszy rozwój w kierunku sklepu online?

Tak. Architektura została przygotowana tak, aby łatwo rozbudować ją o moduł e-commerce.