lean-101-website/lean-101-website-html-v3/README.md

# 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