Zeo Homes
Zeo Homes je developerská společnost specializující se na výstavbu moderních pasivních domů, které kombinují ekologickou šetrnost, energetickou efektivitu a elegantní design. Firma se zaměřuje na udržitelné bydlení s důrazem na nízkou energetickou náročnost a kvalitní životní prostředí pro své klienty.
Klientské zadání
Klient potřeboval vytvořit webové stránky, které by efektivně prezentovaly jejich developerský projekt pasivních domů. Hlavními požadavky byly:
- Moderní a atraktivní design odpovídající prémiové povaze nabízených nemovitostí
- Přehledná prezentace výhod pasivních domů a technologií použitých při jejich výstavbě
- Vícejazyčné řešení s českou a anglickou verzí webu
- Intuitivní uživatelské rozhraní s důrazem na vizuální prezentaci projektů
- Kontaktní formuláře pro potenciální zájemce
- Možnost snadné správy obsahu klientem
Řešení a technické provedení
Pro nový web Zeo Homes jsme zvolili šablonou vytvořenou na míru podle dodaného grafického návrhu v aplikaci Figma. Implementovali jsme následující technická řešení:
- Dvojjazyčná verze webu (čeština a angličtina) s intuitivním přepínáním mezi jazyky
- Pokročilé animace vytvořené pomocí knihovny GSAP pro dynamické načítání obsahu při scrollování
- SVG animace s transformací vektorových cest pro plynulou přeměnu textového nápisu ZEO do grafického loga společnosti
- Interaktivní kartičky prezentující jednotlivé projekty a jejich klíčové parametry
- Accordion s nejčastějšími otázkami a odpověďmi pro přehlednou prezentaci informací
- Optimalizované kontaktní formuláře s propojením na CRM systém klienta
- Fotogalerie s lightboxem pro efektní prezentaci realizovaných projektů a vizualizací
- SEO optimalizace s důrazem na cílová klíčová slova v obou jazykových verzích
Animace GSAP
Při scrollování stránkou se jednotlivé elementy dynamicky načítají a zaujímají své místo pomocí knihovny GSAP. Tento efekt dodává webu moderní a interaktivní dojem. Elementy jsou zpočátku mimo obrazovku nebo neviditelné a postupně se objevují a přesunují na své finální pozice.
Animace SVG loga
Vytvořili jsme animaci vytvořenou pomocí SVG, kde se textový nápis „ZEO“ postupně transformuje do grafického loga společnosti. Animace využívá možnosti transformace vektorových cest u SVG s knihovnou GSAP.
Interaktivní kartičky
Klíčové standardy a výhody pasivních domů Zeo Homes jsou prezentovány formou interaktivních kartiček, které reagují na akce uživatele. Při najetí myší se na kartičce zobrazí doplňující informace o daném standardu.
Accordion s FAQ
Sekce nejčastějších otázek a odpovědí využívá accordion systém, který umožňuje přehledně prezentovat velké množství informací v kompaktní podobě. Kliknutím na otázku se rozbalí odpověď s plynulou animací.
Galerie & lightbox
Pro prezentaci fotografií realizovaných projektů a vizualizací jsme použili fotogalerii s lightboxem. Po kliknutí na náhled se fotografie zobrazí v plné velikosti s možností procházení všech obrázků v galerii. Lightbox je optimalizován pro všechna zařízení.
