Zeo Homes
Zeo Homes is a property development company specialising in the construction of modern passive houses that combine eco-friendliness, energy efficiency and elegant design. The company focuses on sustainable living with an emphasis on low energy consumption and a quality living environment for its clients.
Client assignment
The client needed to create a website that would effectively showcase their passive house development project. The main requirements were:
- Modern and attractive design in keeping with the premium nature of the properties on offer
- Clear presentation of the advantages of passive houses and the technologies used in their construction
- Multilingual solution with Czech and English versions of the website
- Intuitive user interface with emphasis on visual presentation of projects
- Contact forms for potential applicants
- Easy content management by the client
Solution and technical design
For the new Zeo Homes website, we chose a customized template based on the graphic design provided by Figma. We implemented the following technical solutions:
- Bilingual version of the website (Czech and English) with intuitive switching between languages
- Advanced animations created using GSAP library for dynamic loading of content when scrolling
- SVG animation with vector path transformation to seamlessly transform ZEO’s text sign into a graphical company logo
- Interactive cards presenting individual projects and their key parameters
- Accordion with frequently asked questions and answers for a clear presentation of information
- Optimized contact forms with connection to the client’s CRM system
- Photo gallery with lightbox for effective presentation of realized projects and visualizations
- SEO optimization with emphasis on target keywords in both language versions
GSAP animation
As you scroll through the page, the elements are dynamically loaded and positioned using the GSAP library. This effect gives the site a modern and interactive feel. Elements are initially off-screen or invisible and gradually appear and move to their final positions.
SVG logo animation
We created an animation using SVG, where the text sign “ZEO” is gradually transformed into a graphic logo of the company. The animation uses the vector path transformation capabilities of SVG with the GSAP library.
Interactive cards
The key standards and benefits of Zeo Homes Passive House are presented in the form of interactive cards that respond to user actions. When the mouse is hovered over, additional information about the standard is displayed on the card.
Accordion with FAQ
The Frequently Asked Questions and Answers section uses an accordion system to present a large amount of information in a compact format. Click on a question to expand the answer with a smooth animation.
Galerie & lightbox
We used a photo gallery with a lightbox to present photos of completed projects and visualizations. After clicking on the preview, the photos will be displayed in full size with the option to browse all images in the gallery. The lightbox is optimized for all devices.
