MegaGym
Premium Greek fitness brand pitch site
MegaGym is a pitch website for one of Greece's largest premium fitness chains: 7 Athens-area clubs, 15,000+ active members, three decades in business since 1993. The brief was a polished, bilingual marketing site that conveys premium positioning while staying fast and dependency-free. Built with zero frameworks (vanilla HTML/CSS/JS) but engineered with real attention to detail: an interactive Leaflet locations finder with bidirectional card-to-pin linking, runtime Greek/English language switching with localStorage persistence, an equipment carousel with blurred peek cards, scroll-driven parallax hero, custom branded cursor, full dark mode, and a preloader gated by sessionStorage.
Key Features
8 pages, all in Greek
All page filenames in Greek (gymnastiria, proponisi, pilates, dokimastiki, epikoinonia) reflecting the local market focus. Each specializes in one service while sharing navigation and footer.
- Homepage: hero, services, locations finder, video tour, pricing, trainers, FAQ
- Locations directory: 7 gym exterior shots + Fitness Club vs EXCLUSIVE comparison
- Group Personal Training: TRX, MEGA ZONE, MEGA CAGE, SKILLMILL programs
- Personal Training & Transformation: 45-day and 90-day programs at EXCLUSIVE centers
- Pilates Studio: split intro, full equipment slideshow, accessories
- Trial booking + contact pages with translated forms and side-by-side map+list rebuild
Locations finder
Side-by-side card list and Leaflet map (sticky on scroll, 600px each on desktop). Custom teardrop SVG pins (black body, yellow border, M-logo overlay) with HQ Kifissia distinguished by a larger size + permanent drop-shadow glow filter.
- Hover a card: matching pin scales up and glows
- Hover a pin: matching card highlights and scrolls into view
- Click a pin: map flyTo + popup with address, phone, tags, and Google Maps directions
- Pop-ups translate live when language switches via custom mg:langchange event
Equipment carousel
Pilates page features a 7-slide carousel with three visible at once: active in full focus, prev/next as blurred peek cards. Smooth 0.55s cubic-bezier transitions, staggered content fade-in, edge-fade gradients on container ::before/::after to hide cutoffs. The prev card is flipped on the X-axis for visual symmetry.
Attention to detail (the polish)
Beyond the headline features, the build invests heavily in the small things that make a site feel premium.
- overflow-y: scroll on html prevents layout shift between scrollable and non-scrollable pages
- min-width on nav CTA prevents reflow on language switch (Greek text is wider than English)
- Non-breaking spaces in translations keep brand phrases like 'ΖΩΗ ΜΟΥ' on one line
- display: inline-flex on Services dropdown maintains baseline alignment with sibling links
- Service card buttons use margin-top: auto so different content lengths still align
- Preloader gated to first-visit-per-session via sessionStorage (skip on internal navigation)
- Lazy-loaded images, semantic HTML, OpenGraph + Twitter card tags, custom 404 page