first version and docs

2026-08-24 20:12:26 +02:00
parent 76d3d41468
commit 7ea52c185c
11 changed files with 1482 additions and 0 deletions
@@ -0,0 +1,44 @@
+# Changelog
+
+All notable changes to the Apex Turf landing page.
+
+## [1.0.0] — 2026-08-24
+
+### Added
+- Initial build of the `dist/` landing page (`index.html`, `css/styles.css`, `js/main.js`) from the three
+  reference mockups in `website-ideas/` and the copy/structure in `pdfs/`.
+- Full-bleed diagonal split hero: fixed Residential/Landscaping pane (lion) + auto-rotating Sport Turf pane
+  cycling Pádel (shark) → Football (panther) → Golf (eagle), with manual tabs and pause-on-hover/focus.
+- Sticky header with scroll-spy nav highlighting and mobile hamburger menu.
+- Value pillars section, 4-card specialties quick-nav grid, and four alternating-layout detail sections
+  (Landscaping / Pádel / Football / Golf).
+- About/trust section (Installers First, Apex Guarantee cards).
+- Visual gallery/showcase strip.
+- Front-end-only quote request form with client-side validation and success state.
+- Footer with contact info, quick links, and social icons.
+- Scroll-reveal animations, smooth-scroll-with-offset, back-to-top button.
+- Copied and web-optimized image assets from `animals/` and `logos/` into `dist/assets/images/`
+  (JPEG re-compression + logo resizing to cut total image weight roughly in half).
+
+### Fixed (found via automated visual/interaction testing during the build)
+- **Hero right pane not filling its full height.** The rotating Pádel/Football/Golf pane was sized to its
+  text content instead of the full pane (an absolutely-positioned image nested inside a flex-aligned
+  container without an explicit fill), so the background photo appeared as a small floating box instead of
+  full-bleed like the reference mockups. Fixed by making the scene layers fill the pane via `inset: 0` and
+  moving the pane's padding onto the scene layer itself.
+- **Scroll-reveal content could get stuck invisible.** The fade-in-on-scroll effect relied solely on
+  `IntersectionObserver` firing; if it didn't (or fired late), content stayed at `opacity: 0` forever.
+  Added a try/catch fallback, a 2.5s force-reveal safety timeout, and a `<noscript>` rule so content is
+  never permanently hidden regardless of JS timing or availability.
+- **Horizontal overflow on narrow viewports (CSS Grid "blowout").** Every `grid-template-columns` track in
+  the stylesheet used bare `Nfr` values. A bare `fr` track's implicit `auto` minimum can grow past the
+  container's padded content box, which caused the contact section (and, latently, every other grid on the
+  page) to overflow its container and clip text at narrow widths. Fixed by wrapping every fractional track
+  in `minmax(0, …fr)` across the whole stylesheet (hero split, pillar/specialty/showcase/footer grids,
+  detail/about/contact grids, the quote form's two-column row) rather than patching only the section where
+  it was first observed.
+
+### Known placeholders (see `README.md` → "What still needs wiring up before going live")
+- Contact form has no backend/submission endpoint yet.
+- Phone, email, address, and social links are placeholders (none were supplied).
+- Gallery section reuses the four specialty photos in lieu of real installation photography.