first version and docs

docs/Changelog.md

@@ -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.

docs/README.md

@@ -0,0 +1,95 @@
+# Apex Turf — Landing Page
+
+A single-page marketing landing page for **Apex Turf**, a premium artificial-turf design & installation
+company (residential landscaping, pádel courts, football/multisport pitches, and golf putting greens),
+built with plain HTML, CSS and vanilla JavaScript — no build step, no frameworks, no dependencies.
+
+## Where things live
+
+```
+dist/
+├── index.html              # the landing page
+├── css/styles.css          # all styling (CSS variables, layout, components)
+├── js/main.js               # all interactivity (vanilla JS, no dependencies)
+└── assets/images/
+    ├── animals/             # lion, shark, panther, eagle — hero/section imagery
+    │   (compressed to ~250–420KB JPEGs; originals lived in ../animals)
+    └── logos/                # apexturf-logo.png (full lockup), apexturf-icon.png (mark only)
+        (resized from ../logos, background-transparent variants)
+docs/
+├── README.md                 # this file
+└── Changelog.md
+```
+
+To preview locally: open `dist/index.html` directly in a browser, or serve the folder
+(`python3 -m http.server` from inside `dist/`) so the favicon/font preconnects behave exactly as in
+production.
+
+## Design source
+
+The three reference mockups in `../website-ideas/` (`Websiteidea1.png` – `Websiteidea3.png`) all share one
+layout: a full-bleed, diagonally-split hero — **Residential Turf** (lion) fixed on the left, and a rotating
+**Sport Turf** category (Pádel/shark, Football/panther, Golf/eagle) on the right. Rather than picking one
+mockup, the landing page **combines all three**: the hero's right pane auto-rotates through Pádel → Football
+→ Golf every 6 seconds (with manual P/F/G tabs, pause-on-hover/focus), so every specialty shown across the
+three reference images is represented on one page.
+
+Copy, section structure, and messaging (headlines, value pillars, "Installers First, Not Salesmen", the
+Apex Guarantee, etc.) are drawn from the four sport-specific and About Us page specifications in `../pdfs/`,
+condensed from full dedicated pages into single-page sections since this build is one landing page rather
+than a multi-page site.
+
+## Page structure
+
+1. **Header** — logo, nav (Home / Landscaping / Pádel / Football / Golf / About Us), sticky on scroll,
+   hamburger menu on mobile.
+2. **Hero** — split diagonal layout as above.
+3. **Value pillars** — Child & Family Safe, Pet-Friendly, Built for Spanish Weather, Low Maintenance (not
+   no maintenance).
+4. **Specialties grid** — 4 quick-nav cards (Landscaping / Pádel / Football / Golf) linking to detail
+   sections below.
+5. **Detail sections ×4** — one per specialty, alternating image/text layout, each with its own feature
+   list and CTA, matching the messaging of the corresponding PDF spec.
+6. **About** — "Master Installers. Absolute Precision." trust section with the two Apex Guarantee cards.
+7. **Showcase/Gallery** — a 4-image visual recap of the specialties (not client project photos — there
+   were none supplied; swap in real installation photography here when available).
+8. **Contact / quote form** — front-end-only form (name, email, phone, project type, message) with
+   client-side validation and a success message. **There is no backend** — see "What still needs wiring
+   up" below.
+9. **Footer** — logo, quick links, contact info, social icons.
+
+## Notable implementation details
+
+- **No build tooling.** Plain CSS with custom properties for the palette/spacing scale; plain ES5-ish
+  vanilla JS (one IIFE, no bundler needed).
+- **Self-contained interactivity**: sticky header, mobile nav, hero tab rotation, scroll-spy nav
+  highlighting, scroll-reveal animations, smooth-scroll with header offset, back-to-top button, and the
+  quote form — all in `js/main.js`, no external libraries.
+- **Grid-blowout defense**: every `grid-template-columns` track uses `minmax(0, …fr)` rather than a bare
+  `fr`. A bare `fr` track's implicit `auto` minimum can exceed the container's padded content box and
+  force horizontal overflow — this was caught during testing (see Changelog) and fixed everywhere as a
+  standing defensive pattern, not just on the section where it first showed up.
+- **Scroll-reveal never gets stuck hidden**: the fade-in-on-scroll effect (`.reveal` → `.is-visible`) is
+  wrapped in try/catch with a 2.5s safety-net timeout that force-reveals everything, and a `<noscript>`
+  rule shows everything immediately if JavaScript is unavailable.
+- **`prefers-reduced-motion`** is respected throughout (reveal animations, hero auto-rotation, and smooth
+  scrolling all fall back to instant/static behavior).
+- **Accessibility basics**: semantic landmarks, `aria-label`/`aria-expanded` on the nav toggle, `role=tab`
+  / `aria-selected` on the hero sport tabs, alt text on every image, visible focus states inherited from
+  default UA styles (not suppressed).
+- Images were re-compressed (JPEG quality ~72, resized logo PNGs) from the originals in `../animals` and
+  `../logos` to keep total page weight reasonable (~1.5MB of images total).
+
+## What still needs wiring up before going live
+
+This is a front-end-only deliverable. Before launch:
+
+- **Contact form has no backend.** It currently just shows a client-side "thanks" message and does not
+  send an email or hit an API. Wire `#quoteForm`'s submit handler in `js/main.js` to a real form
+  endpoint (e.g. Formspree, a serverless function, or your own backend).
+- **Placeholder contact details**: phone `+34 900 123 456`, email `hello@apexturf.com`, and "Madrid,
+  Spain" are placeholders (no real contact info was supplied) — replace with the real ones in `index.html`
+  (they appear in both the Contact section and the footer). Social links (`#`) are also placeholders —
+  point them at real profiles.
+- **Gallery images are stand-ins.** The showcase/gallery section reuses the four mascot photos for lack
+  of real installation photography — swap in real project photos when available.