# Task 2 Report — Estrazione e mappatura asset immagine da Figma

**Data:** 2026-07-01  
**Fonte:** `../FigmaDoc/Web Insanity.fig` (60 immagini uniche + ~66 duplicati = 126 estratte)  
**Destinazione:** `src/assets/img/` (31 file) + `public/img/` (2 loghi)

---

## Mappature completate

### Hero
| File destinazione | Hash sorgente | Descrizione |
|---|---|---|
| `hero-1.jpg` | `8b71f158...` | Uomo con palla medica (medicine ball) che la tiene verso donna in posizione crunch, palestra scura — "uomo con palla medica + donna" ✓ |

### Info sezioni (PERFORMANCE / BALANCE / LONGEVITY)
| File destinazione | Hash sorgente | Descrizione |
|---|---|---|
| `info-performance.jpg` | `0f803439...` | Uomo muscoloso in planche su sfondo grigio neutro |
| `info-balance.jpg` | `432d397a...` | Due donne sedute schiena a schiena in abiti sportivi beige/neutri |
| `info-longevity.jpg` | `d7fcf0aa...` | Donna anziana in posizione push-up — longevità attiva |

### Feature sezioni (immagini più grandi per ciascun pilastro)
| File destinazione | Hash sorgente | Descrizione |
|---|---|---|
| `feature-performance.jpg` | `6d602573...` | Uomo con chalk sulle mani — preparazione sollevamento pesi, performance atletica |
| `feature-balance.jpg` | `16e611de...` | Gruppo yoga all'aperto al tramonto — equilibrio e benessere |
| `feature-longevity.jpg` | `98f1f8d2...` | Donna anziana in piedi con bottiglia d'acqua, outfit sportivo beige — longevità sana |

### Quote background
| File destinazione | Hash sorgente | Descrizione |
|---|---|---|
| `quote-bg.jpg` | `28e8157d...` | Scritta "PERFORMANCE. BALANCE. LONGEVITY." su muro di intonaco — elemento visivo identitario |

### Training programs
| File destinazione | Hash sorgente | Descrizione |
|---|---|---|
| `training-one-to-one.jpg` | `85808a0c...` | Trainer e cliente a colloquio in palestra, tablet in mano — consulenza personalizzata |
| `training-small-groups.jpg` | `bb632b8d...` | Due donne con manubri leggeri in posizione atletica — small group training |
| `training-performance-class.jpg` | `91aa82b5...` | Grande gruppo in sala fitness/danza con palle fitball — performance class |
| `training-fit-remote.jpg` | `86c1363b...` | Donna a casa sul tappetino con laptop — allenamento remoto online |

### Team Trainer (homepage — 4 ritratti luce dorata)
| File destinazione | Hash sorgente | Persona identificata |
|---|---|---|
| `team-donata.jpg` | `0b6cf694...` | Donna capelli lunghi scuri dritti, luce dorada laterale — Donata ✓ |
| `team-nicola.jpg` | `1cc33c41...` | Uomo barba folta, turtleneck scuro, luce dorata — Nicola ✓ |
| `team-eleonora.jpg` | `a75ca105...` | Donna capelli biondi/chiari, stessa luce dorata — Eleonora ✓ |
| `team-antonello.jpg` | `e3c84f99...` | Uomo occhiali tondi, capelli rasatissimi, luce dorata — Antonello ✓ |

### Il Metodo (4 passi circolari)
| File destinazione | Hash sorgente | Step identificato |
|---|---|---|
| `method-step-1.jpg` | `88cfcd5f...` | Calibro plicometro su addome — valutazione composizione corporea |
| `method-step-2.jpg` | `d21671bb...` | Donna in cucina con verdure fresche e metro — pianificazione nutrizionale |
| `method-step-3.jpg` | `a3e84d7d...` | Silhouette uomo in palestra in controluce — sessione allenamento |
| `method-step-4.jpg` | `e50b6f78...` | Scarpe su tapis roulant — monitoraggio continuo e progressione |

### Partner loghi
| File destinazione | Hash sorgente | Logo identificato |
|---|---|---|
| `partner-edenred.png` | `bee22f37...` | "Ticket Welfare Edenred" — logo rosso/blu su sfondo trasparente ✓ |
| `partner-welbee.png` | `cf079250...` | "welbee" — logo verde su sfondo bianco ✓ |
| `partner-aon.png` | `014a7708...` | "Aon" — logo rosso su sfondo bianco ✓ |
| `partner-howden.png` | `872c3679...` | "HOWDEN" — logo blu su sfondo bianco ✓ |

### Loghi InsanityLab (public/img/)
| File destinazione | Sorgente | Note |
|---|---|---|
| `logo-dark.png` | `../Dati/logo-dark.png` | **Fallback** — logo non presente nel file Figma |
| `logo-light.png` | `../Dati/logo-light.png` | **Fallback** — logo non presente nel file Figma |

### About page (bonus — non richiesti dal brief)
| File destinazione | Hash sorgente | Descrizione |
|---|---|---|
| `about-exterior.jpg` | `8ffc5f7a...` | Facciata esterna palestra/studio InsanityLab, sera |
| `about-team-group.jpg` | `32ecd00a...` | Foto di gruppo team InsanityLab in bianco e nero |
| `about-training-group.jpg` | `d4608b10...` | Gruppo che salta con kettlebell in sala beige |
| `about-trainer-1.jpg` | `dafcc193...` | Trainer donna capelli scuri ondulati, luce dorata |
| `about-trainer-2.jpg` | `9c50f1d3...` | Trainer donna capelli scuri più corti, matura, luce dorata |
| `about-trainer-3.jpg` | `c51a49b9...` | Trainer donna capelli neri lisci, sorriso, sfondo chiaro |
| `about-trainer-4.jpg` | `3341a11b...` | Trainer uomo giovane senza barba, turtleneck scuro |

---

## Immagini attese ma non trovate nel Figma

| Nome atteso | Motivo mancanza | Azione intrapresa |
|---|---|---|
| `logo-dark.png` | Assente in `Web Insanity.fig` | Fallback da `../Dati/logo-dark.png` ✓ |
| `logo-light.png` | Assente in `Web Insanity.fig` | Fallback da `../Dati/logo-light.png` ✓ |

Tutti e 4 i loghi partner sono stati trovati nel Figma. Nessuna altra immagine richiesta dal brief risulta mancante.

---

## Dimensioni finali

```
src/assets/img/   3.7 MB  (31 file JPG + 4 PNG partner loghi)
public/img/       ~3.4 KB  (2 PNG logo: logo-dark.png 1.7 KB, logo-light.png 1.7 KB)
```

Tutte le immagini sono ≤ 1400 px larghezza e ≤ 1600 px altezza. Il file più pesante è quote-bg.jpg a 460 KB. Nessun file supera 500 KB.

*Aggiornato dopo fix round 2 — i numeri precedenti (3.4 MB / nessun file >400 KB) erano errati: la pipeline originale non vincolava l'altezza, lasciando immagini portrait a 2-3 MB ciascuna.*

---

## Note tecnica — PNG → JPG

Le foto trainer e training erano estratte dal Figma come PNG lossless (6–8 MB ciascuna). Convertite a JPG qualità 85 con resize a 1200 px max → risparmio ~98% per file. I loghi partner restano PNG per preservare sfondo trasparente.

Il file `asset-map.json` referenzia gli hash originali (estensione .png/.jpg come estratti). I file di destinazione finali hanno tutti estensione .jpg (eccetto loghi partner .png), il che diverge dai nomi originali nel map ma i file in `src/assets/img/` riflettono il formato convertito.

---

## Conteggio

- **Mappate e presenti:** 33 (31 in src/assets/img + 2 in public/img)
- **Mancanti nel Figma:** 2 (logo-dark, logo-light) → risolti con fallback
- **Immagini estratte totali:** 126 (inclusi ~66 duplicati)
- **Lasciate in assets-src/ (gitignored):** 126 file sorgente

---

## Fix round 1

**Data:** 2026-07-02

### Cosa cambiato

1. **`scripts/asset-map.json`** — rimossa sezione `"public/img"` (chiavi non-hash, rompeva pipeline dopo `extract-fig-images.sh`). Aggiunta sezione top-level `"fallbacks"` con struttura `{ "public/img": { "../Dati/logo-dark.png": "logo-dark.png", "../Dati/logo-light.png": "logo-light.png" } }`. Le destinazioni in `src/assets/img` mantengono l'estensione REALE del sorgente estratto da Figma (`.png` per PNG Figma, `.jpg` per JPEG già presenti in assets-src).

2. **`scripts/apply-asset-map.mjs`** — aggiunto commento d'intestazione sull'ordine pipeline (extract → apply → optimize). Aggiunto loop `fallbacks`: copia da path relativo alla root del repo invece che da `assets-src/`, senza exit 1 per file assenti nel .fig.

3. **`scripts/optimize-assets.sh`** (nuovo) — bash, `set -euo pipefail`. Converte tutti i PNG non-partner in `src/assets/img/` → JPG qualità 85 con resize `1400x>`, poi ridimensiona JPG già esistenti se larghezza > 1400px. Idempotente (nullglob su `.png`).

### Output verifica riproducibilità

```
node scripts/apply-asset-map.mjs → "Copiate 33 immagini"
./scripts/optimize-assets.sh    → 16 PNG→JPG, 5 JPG ridimensionati (hero-1, info-balance, info-longevity, method-step-1, method-step-2)
git status --short              → elenco file identico al pre-fix (31 img + 4 PNG partner)
                                   18 file binari rigenerati (ricompressione diversa da conversione manuale originale)
                                   → ricommittati: repo = output pipeline ✓
```

### Esito punto 4 — bassa risoluzione

- **`method-step-3.jpg`** (184×276): sorgente in `assets-src/a3e84d7daf0b25c750ef694f4b9fc10bf0f2f1a8.jpg` è già 184×276 — stessa risoluzione del file committato. Nessuna versione ad alta risoluzione disponibile in `assets-src/`. **Richiede sorgente migliore dal cliente.**
- **`about-team-group.jpg`** (270×480): sorgente in `assets-src/32ecd00a20321e58c700fbaf739e53ac3bf03876.png` è già 270×480. Nessuna versione ad alta risoluzione disponibile. **Richiede sorgente migliore dal cliente.**

---

## Fix round 2

**Data:** 2026-07-02

### Numeri finali

```
src/assets/img/   3.7 MB  totale (31 JPG + 4 PNG partner)
```

Top-5 per peso:
| File | Dimensioni | Peso |
|---|---|---|
| quote-bg.jpg | 1087×1600 | 460 KB |
| info-performance.jpg | 1200×1500 | 256 KB |
| info-longevity.jpg | 1095×1600 | 248 KB |
| training-performance-class.jpg | 1400×1400 | 240 KB |
| about-exterior.jpg | 1400×781 | 188 KB |

Nessun file supera 500 KB. Precedente info-longevity.jpg era 2.7 MB, info-balance.jpg 2.0 MB.

### Cosa cambiato

1. **`scripts/optimize-assets.sh`** — vincolo resize cambiato da `'1400x>'` (solo larghezza) a `'1400x1600>'` (larghezza E altezza). Qualità JPG da 85 a 83. Tutti i JPG già esistenti vengono ri-codificati a q83 con nuovo vincolo (loop separato, skip file appena convertiti per evitare doppia codifica). Risultato: portrait da 2-3 MB → 248-460 KB.

2. **`scripts/asset-map.json`** — aggiunta chiave `"_nota"` in testa per documentare la conversione PNG→JPG operata da optimize-assets.sh (JSON non supporta commenti, chiave dedicata con prefisso `_`).

3. **`scripts/apply-asset-map.mjs`** — aggiunto `destDir.startsWith('_')` nella condizione di skip, così le chiavi meta `_*` del JSON vengono ignorate nella pipeline.

### Esito idempotenza

Terza esecuzione `apply-asset-map.mjs + optimize-assets.sh`: md5sum su tutti i .jpg identico prima e dopo → **IDEMPOTENTE** ✓

### Esito verifica loghi

`public/img/logo-dark.png` (130×19, 1725 B) e `logo-light.png` (135×19, 1701 B) sono **identici** ai file sorgente in `../Dati/logo-dark.png` e `../Dati/logo-light.png` (stessa dimensione byte-level). Non sono placeholder: sono i loghi reali InsanityLab copiati dalla sezione `fallbacks` di asset-map.json tramite apply-asset-map.mjs. Le dimensioni in pixel ridotte (130×19 px) sono caratteristiche del PNG sorgente in Dati/, non di un errore di pipeline.

---

## Fix round 3

**Data:** 2026-07-02

### Problema chiuso

`public/img/logo-dark.png` e `logo-light.png` contenevano i loghi del template "PROWESS++" copiati da `../Dati/` (sorgente errato). Sostituiti con i loghi reali "insanitylab" estratti vettorialmente dal PDF Figma.

### Metodo

Sorgente: `../FigmaDoc/Homepage.pdf` (1334×10460 pt, 1 pagina).

Render esplorativi a 72–150 dpi per individuare le zone logo:
- **Logo dark** (header, fondo bianco): riga nav in alto, x≈25pt, y≈10pt
- **Logo light** (footer, fondo scuro `srgb(58,41,41)`): sezione footer, y≈8490pt

Estrazione finale con `pdftoppm -r 300`, poi ImageMagick:
- Dark: `-fuzz 8% -transparent white -trim -resize 600x -strip`
- Light: `-crop 850x660+130+60` (esclude tagline e colonne destra), `-fuzz 12% -transparent 'srgb(58,41,41)' -trim -resize 600x -strip`

`-strip` su entrambi garantisce idempotenza md5sum tra esecuzioni successive.

### Coordinate pdftoppm a 300 dpi (pixel)

| Logo | -x | -y | -W | -H | crop interno |
|---|---|---|---|---|---|
| dark  | 104 | 41    | 895  | 250 | — |
| light | 0   | 35375 | 1800 | 833 | `850x660+130+60` |

### Dimensioni finali

| File | Dimensioni | Tipo |
|---|---|---|
| `public/img/logo-dark.png`  | **600×108 px** | TrueColorAlpha (PNG trasparente) |
| `public/img/logo-light.png` | **600×342 px** | TrueColorAlpha (PNG trasparente) |

### Aggiornamenti pipeline

- Creato `scripts/extract-logos.sh` (bash, `set -euo pipefail`, coordinate fisse, idempotente)
- `scripts/asset-map.json`: rimossa sezione `fallbacks` (loghi ora da extract-logos.sh, non da `../Dati`)
- `scripts/apply-asset-map.mjs`: commento pipeline aggiornato a step 4
- Ordine pipeline: `extract-fig-images.sh → apply-asset-map.mjs → optimize-assets.sh → extract-logos.sh`

### Verifica visiva

- `logo-dark.png`: icona onda/battito cardiaco beige + scritta "insanitylab" scura, layout orizzontale, sfondo trasparente. **Nessun residuo PROWESS++.**
- `logo-light.png`: icona onda/battito cardiaco beige sopra, scritta "insanitylab" beige sotto, layout stacked, sfondo trasparente. **Nessun residuo PROWESS++.**

### Idempotenza

```
md5sum run1 = md5sum run2 → IDEMPOTENTE ✓
```