Initial commit

2026-05-06 22:38:06 +12:00
commit 0342b5fb9d
54 changed files with 22513 additions and 0 deletions
@@ -0,0 +1,152 @@
+# Lean101 — Website source files (v3.5)
+
+Hi Matt — these are the latest HTML/CSS/JS files for the Lean101 website. Drop-in replacement for the current site, restructured into a 4-page setup, with photos and the latest engagement-section restructure.
+
+---
+
+## File structure
+
+```
+lean101-website/
+├── index.html                       — Homepage
+├── services/
+│   ├── consulting.html              — Process Excellence & Transformation
+│   ├── coaching.html                — Coaching & Training
+│   └── digital-solutions.html       — Digital Solutions
+├── assets/
+│   ├── lean101-isotipo.png          — Hexagon mark only (used in nav)
+│   └── lean101-logotipo.png         — Full wordmark (used in mobile drawer + footer)
+└── README.md                        — This file
+```
+
+Every page is fully self-contained — all CSS is inlined in a `<style>` block, all JS is in a single `<script>` block at the bottom, and there are no external CSS/JS dependencies beyond Google Fonts and Unsplash images.
+
+---
+
+## Conventions worth knowing
+
+**HTML structure**
+- All four pages share the same `<nav>`, footer, and CTA card markup
+- Each page has its own inlined CSS (currently no shared stylesheet — keeps each page self-contained for easy preview, but happy to refactor if you want a shared `styles.css`)
+- Pages are responsive down to ~360px wide — break points are at 1100px, 920px, 880px, 720px, 540px, 460px
+
+**CSS variables**
+At the top of each `<style>` block:
+```css
+--blue: #0070c7
+--blue-deep: #005aa3
+--orange: #ec8b33
+--charcoal: #565656
+--grey: #efefef
+--ink: #1a1a1a
+```
+Each service page also has `--accent` set to either blue or orange — that drives the page's accent colouring.
+
+**Typography**
+- General Sans (Fontshare) — weights 400/500/600/700
+- Loaded from `https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap`
+
+**JavaScript**
+There are a few small interactive elements:
+- Hero stats counter animation (homepage) — uses `IntersectionObserver`, ticks from 0 to target on scroll-in
+- Mobile hamburger drawer — slides in from right, body scroll lock
+- Outcomes carousel (homepage) — horizontal scroll-snap with prev/next buttons + mobile pagination dots
+- Two accordions in the engagement section (each service page) — animated max-height expand
+- Example outcome reveal animation (each service page) — fade-in-and-slide-up on scroll-in
+- All animations respect `prefers-reduced-motion`
+
+---
+
+## Section structure on each service page
+
+```
+1. Hero (with photo)
+2. Who it's for (with photo + 4 problem cards)
+3. The framework (DMAIC / SHU-HA-RI / Build cards)
+4. What this looks like in practice (2 example cards with photos)
+5. The engagement (timeline + 2 accordions)
+6. Page footnote
+7. CTA
+8. Footer
+```
+
+The engagement section now folds together what used to be three separate things — the timeline (sizing), the considerations (what shapes the scope), and the deliverables list (what you get). It now reads as one comprehensive "this is the engagement" moment:
+
+- **Timeline first** — three project tiers as starting points, transition arrow, partnership as destination
+- **Then two stacked accordions:**
+  - "What drives scope and timeline" — the three considerations that shape sizing
+  - "See what's in a typical engagement" — the deliverables list
+
+Both accordions are closed by default. The deliverables list used to be a standalone "What's included" section between Who-it's-for and the framework — that section is gone now and the content lives here, as reference content for prospects who want to verify scope.
+
+---
+
+## ⚠️ Photos — please verify
+
+The site has **12 photos sourced from Unsplash** (free, commercial-use, no attribution required) — placed across the 3 service pages:
+
+| Page | Section | Photo URL |
+|---|---|---|
+| Consulting | Hero | `photo-1581091226825-a6a2a5aee158` |
+| Consulting | Who it's for (anchor) | `photo-1556761175-5973dc0f32e7` |
+| Consulting | Examples — Manufacturing | `photo-1565793298595-6a879b1d9492` |
+| Consulting | Examples — Services & admin | `photo-1454165804606-c3d57bc86b40` |
+| Coaching | Hero | `photo-1521737711867-e3b97375f902` |
+| Coaching | Who it's for (anchor) | `photo-1519389950473-47ba0277781c` |
+| Coaching | Examples — Leadership development | `photo-1573497019940-1c28c88b4f3e` |
+| Coaching | Examples — Frontline team | `photo-1542744173-8e7e53415bb0` |
+| Digital | Hero | `photo-1551288049-bebda4e38f71` |
+| Digital | Who it's for (anchor) | `photo-1460925895917-afdab827c52f` |
+| Digital | Examples — Dashboard | `photo-1543286386-713bdd548da4` |
+| Digital | Examples — Custom app | `photo-1517292987719-0369a794ec0f` |
+
+Photos are referenced as direct Unsplash CDN URLs in the HTML, e.g.
+```html
+<img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=1600&q=80" alt="...">
+```
+
+**Two action items here:**
+
+1. **Please load each page and verify the photos look right.** They were chosen by content/context but not visually verified before integration — there's a chance one or two don't match the intent. If any look off, swap with another Unsplash search, the URL pattern is:
+   `https://images.unsplash.com/photo-{ID}?auto=format&fit=crop&w=1600&q=80`
+
+2. **Consider self-hosting them.** Currently they load from Unsplash's CDN. This works, but if you'd prefer self-hosted (no external dependency, faster load on poor connections), download each one once and put them in `assets/photos/` — the HTML references will need updating to local paths.
+
+---
+
+## Things that need real values before launch
+
+The following placeholders need swapping with real URLs before going live:
+
+1. **`href="#contact"` on the dark "Book a call" CTA buttons** — these point to `#contact` for now, but should ultimately link to the real Calendly URL (Alex will provide).
+2. **`href="#"` on the LinkedIn footer link** — should point to the Lean101 LinkedIn company page.
+3. **No favicon yet** — happy to leave this for you to add via your tooling, or we can generate one from the isotipo if helpful.
+4. **No Open Graph / Twitter meta tags yet** — also a "before launch" item for clean link previews on LinkedIn / WhatsApp / Slack.
+
+---
+
+## Hero image — important note
+
+We added a **fourth KPI** to the hero on the homepage and changed the desktop design. The hero photo itself stays the same (the team-around-table image you currently have).
+
+**The four KPIs are now:**
+- Efficiency `+35%` (blue)
+- Cost savings `−27%` (orange)
+- Lead time `−44%` (orange)
+- Engagement `+41%` (blue)
+
+In the current source files, the KPIs sit in a 2×2 card panel **below** the hero photo on both desktop and mobile. **On the live site they should sit on top of the photo on desktop, and only drop below on mobile** — that's how the existing live site already works, we're just keeping that pattern. The fourth KPI was added so the desktop overlay layout doesn't have an awkward blank slot in the 2×2 grid.
+
+In short: keep your current desktop overlay layout, add the new fourth KPI value (Engagement +41%), and the source CSS in this package is fine as the mobile-side fallback.
+
+---
+
+## Quick deploy notes
+
+- All paths in the HTML are relative — `assets/...` from the homepage, `../assets/...` from service pages
+- No build step required, no preprocessor needed — these are static HTML files ready to serve
+- Service pages use clean URLs (`/services/consulting`) — your nginx config or equivalent will need a `try_files $uri $uri.html $uri/ =404;` rule to support both `.html` and clean URLs
+
+If anything's unclear or you want me to refactor anything to fit your tooling better (shared stylesheet, separate JS file, build pipeline-friendly format), just let me know.
+
+— Alex