# GYMMAXX Proto

Premium fitness center (GYMMAXX) homepage prototype. Content-heavy modern design with video backgrounds, heavy photo usage, minimal typography using brand fonts — targeting high-net-worth individuals.

## Directions
Three separate files, one direction each (no more multi-option canvas page):
- `GYMMAXX 1a Cinematic Dark.dc.html` — dark, gold accents, cinematic.
- `GYMMAXX 1c Bold MAXX.dc.html` — heavy typography with brand DNA (italic MAXX type, marquee strip).
- `GYMMAXX 2a Champagne Soft.dc.html` — cream (#FCE9CA) background, rounded gold accent blocks, video in gold frame with white card overlay, bordered "Learn more →" buttons matching brand tiles, rounded photo corners, dark rounded footer card. Rebuilt from an earlier "1b Warm Premium" direction which was scrapped (dropped entirely, not kept as a file).

Brand colors: cream #FCE9CA, gold #D8AA5E, near-black #181818. Font: Archivo (Google Fonts).

All heroes use the same drone video (`https://gymmaxx.com/wp-content/uploads/2026/05/dron_site_small.mp4`), autoplay/muted/loop, with `componentDidMount` forcing `.play()` for reliability.

Real content in place: gym interior/equipment photos (assets/), three actual program names — 90х60х90, FIT FAN FORM, Functional Training — used as placeholders; program descriptions still need real copy from the user. Footer copyright is Ukrainian mock text: "© 2026 ТОВ «ДЖИММАКС». Усі права захищено."

- `GYMMAXX 3a Editorial.dc.html` — content-first editorial direction modeled on camperandnicholsons.com: white bg, light-weight Archivo display type, gold (#D8AA5E/#B8873D) eyebrows + underlined arrow links, full-height video hero, alternating image/editorial splits (Fitness/SPA/Terrace), 3-card program row, full-bleed summer band, 8-tile services grid on #FAF6EF, centered "The Club" overlay section, dark footer with newsletter. Uses new outdoor terrace photos (uploads/F84A8318–8450).

- `GYMMAXX 3b Content Editorial.dc.html` — content-max evolution of 3a, all Ukrainian: video hero with right-aligned smaller title + scroll pulse, club-cards grid (4 real cards with images hotlinked from gymmaxx.com/cards/ — Weekend SPA, Day 88 888, Gold 99 999, Platinum Maxx 165 000 грн), three full-viewport space panels with alternating text sides (odd left / even right, flipped gradients), count-up stats, horizontal program strip on #FAF6EF, mosaic gallery, italic marquee, quote over image, white "Спільнота" exclusivity block, footer with photo bg + dark gradient (uploads/F84A8330). Tweaks: footerOverlay, showMarquee. Vlad's review comments from m0120 all addressed & resolved.

## Zone page templates (modular, for WordPress/Gutenberg)
Single-zone page templates — a library of interchangeable section blocks (each a Gutenberg block); real pages combine a subset. All in the dark cinematic master style.
- `GYMMAXX Zone SPA.dc.html` — SPA worked example. Blocks: hero (image default; video/image tweak), overview split, **sub-zones expanding panels** (the core hover-to-reveal mechanic — 6 SPA zones: Фінська сауна, Хамам, Римська парна, Джакузі, Басейн, Соляна кімната), stats strip, amenities checklist, gallery (mosaic/grid tweak), booking form + contacts. Timetable removed (moved to Group) to avoid confusing the client. Hero uses a SPA image, not the drone video.
- `GYMMAXX Zone Group.dc.html` — Групові програми worked example. Same block system; sub-zone panels become program directions (90х60х90, FIT FAN FORM, Functional Training, Силові класи, Кардіо·Сайкл, Mind & Body) using real program images. **Holds the weekly class timetable block.**
- Shared mechanic `initSubzones()`: horizontal expanding image panels, hover expands + reveals detail (temp/level/etc), staggered scroll-in. Tweaks per page: heroMedia, galleryLayout, subzoneAutocycle. Sub-zone descriptions still need real copy (marked `[Уточнити опис]`).

## Open next steps
Decide whether to keep developing 2a, refine 1a/1c, or merge elements across directions. Still need real program description copy.