Building quality and comfort since 1994.
ZAL Investments Company S.A. is a Romanian construction and installation firm with more than 30 years of electrical, sanitary and HVAC work. Its website had to present everything it does (design, procurement, execution, supervision, maintenance and training) clearly enough to win over property developers, business owners and facility managers.
The site uses a light corporate theme with a frosted-glass navigation bar that tracks where you are and content that reveals as you scroll. Projects are grouped into five categories (Retail, HoReCa, Residential, Office, Industrial), each with its own page and lightbox gallery. A dark certifications section shows the ISO 9001, ANRE, IGSU and ISCIR accreditations, and contact and careers sections make it easy to get in touch.
Design System
Color
Typography
Tech Stack
Key Features
Six Service Domains
Electrical, sanitary, HVAC, construction, design engineering, and energy auditing, each rendered as a dark-themed card with Phosphor icon, colour-coded hover borders, and detailed checklist items.
Glassmorphic Navigation
Fixed navbar with backdrop-blur and scroll-spy active states. Desktop features a nested dropdown for project categories; mobile has a full slide-down panel with expandable sub-menu.
Certifications Showcase
Dark slate section with four glassmorphic cards (ANRE, IGSU, ISO 9001, ISCIR) each with colour-coded badges, hover lift animations, and coloured shadow accents.
Project Detail Pages
Dedicated pages per project (Arbo Residence, Michelin, Wolf Plastics, etc.) with hero overlays, info grids, lightbox galleries, and related-project navigation.
Scroll Reveal System
IntersectionObserver-powered .reveal class with translateY + opacity transitions. Elements animate in as they enter the viewport with a 50px bottom margin offset.
Careers & Contact CTAs
Three job listing cards (Electrician, Installer, Engineer) with hover colour transitions. Dark CTA banner with animated ping dot, decorative blur orbs, and dual action buttons.
Component Library
Full UI element reference page documenting buttons, cards, badges, forms, stats counters, testimonials, and timeline components used across the site.
Light Corporate Theme
Clean #f8fafc background with white cards, slate borders, and a five-colour accent system (blue, amber, green, orange, indigo) mapped to service domains. Hero uses horizontal gradient overlay on full-bleed photography.
Page Architecture
Screenshots
/img/web/zal/
