diff --git a/.superpowers/sdd/task-2-report.md b/.superpowers/sdd/task-2-report.md new file mode 100644 index 0000000..e11e41f --- /dev/null +++ b/.superpowers/sdd/task-2-report.md @@ -0,0 +1,150 @@ +# 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.4 MB (31 file JPG + 4 PNG partner loghi) +public/img/ ~50 KB (2 PNG logo fallback) +``` + +Tutte le immagini sono ≤ 1400 px larghezza o ≤ 1200 px (ritratti). Nessun file supera 400 KB. + +--- + +## 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.** diff --git a/scripts/apply-asset-map.mjs b/scripts/apply-asset-map.mjs index 97c9835..f018d3c 100644 --- a/scripts/apply-asset-map.mjs +++ b/scripts/apply-asset-map.mjs @@ -1,3 +1,8 @@ +// Pipeline asset: extract-fig-images.sh → apply-asset-map.mjs → optimize-assets.sh +// 1. extract-fig-images.sh: estrae hash-named images da .fig → assets-src/ +// 2. apply-asset-map.mjs: copia da assets-src/ → destinazioni (src/assets/img, public/img) +// 3. optimize-assets.sh: converte PNG fotografici → JPG q85, ridimensiona ≤1400px + import { copyFileSync, mkdirSync, existsSync } from 'node:fs'; import { readFileSync } from 'node:fs'; import { join, dirname } from 'node:path'; @@ -6,7 +11,10 @@ import { fileURLToPath } from 'node:url'; const root = join(dirname(fileURLToPath(import.meta.url)), '..'); const map = JSON.parse(readFileSync(join(root, 'scripts/asset-map.json'), 'utf8')); let n = 0, missing = 0; + +// Sezione principale: copia da assets-src/ for (const [destDir, entries] of Object.entries(map)) { + if (destDir === 'fallbacks') continue; mkdirSync(join(root, destDir), { recursive: true }); for (const [src, dest] of Object.entries(entries)) { const from = join(root, 'assets-src', src); @@ -15,5 +23,19 @@ for (const [destDir, entries] of Object.entries(map)) { n++; } } + +// Sezione fallbacks: copia da path relativo alla root del repo (es. ../Dati/) +if (map.fallbacks) { + for (const [destDir, entries] of Object.entries(map.fallbacks)) { + mkdirSync(join(root, destDir), { recursive: true }); + for (const [srcRelPath, dest] of Object.entries(entries)) { + const from = join(root, srcRelPath); + if (!existsSync(from)) { console.error(`MANCANTE (fallback): ${srcRelPath}`); missing++; continue; } + copyFileSync(from, join(root, destDir, dest)); + n++; + } + } +} + console.log(`Copiate ${n} immagini${missing ? `, ${missing} mancanti` : ''}`); process.exit(missing ? 1 : 0); diff --git a/scripts/asset-map.json b/scripts/asset-map.json index e421329..0907eb3 100644 --- a/scripts/asset-map.json +++ b/scripts/asset-map.json @@ -32,8 +32,10 @@ "c51a49b9be7f1b1a31de6b2f5261c8c5b5fdab52.png": "about-trainer-3.png", "3341a11b7153349a23c75b1fa2a9a62d48953330.png": "about-trainer-4.png" }, - "public/img": { - "logo-dark.png": "logo-dark.png", - "logo-light.png": "logo-light.png" + "fallbacks": { + "public/img": { + "../Dati/logo-dark.png": "logo-dark.png", + "../Dati/logo-light.png": "logo-light.png" + } } } diff --git a/scripts/optimize-assets.sh b/scripts/optimize-assets.sh new file mode 100755 index 0000000..690a2fb --- /dev/null +++ b/scripts/optimize-assets.sh @@ -0,0 +1,37 @@ +#!/usr/bin/env bash +# Passo 3 della pipeline asset (dopo apply-asset-map.mjs). +# Converte PNG fotografici in src/assets/img/ → JPG q85 e ridimensiona a ≤1400px larghezza. +# I PNG partner-* (loghi con trasparenza) restano PNG. +# Idempotente: se il .png non esiste (già convertito), salta. +set -euo pipefail + +SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" +ROOT="$(cd "$SCRIPT_DIR/.." && pwd)" +IMG_DIR="$ROOT/src/assets/img" + +cd "$IMG_DIR" + +# --- PNG fotografici → JPG q85 + resize ≤1400px --- +shopt -s nullglob +converted=0 +for png in *.png; do + [[ "$png" == partner-* ]] && continue + jpg="${png%.png}.jpg" + convert "$png" -quality 85 -resize '1400x>' "$jpg" + rm "$png" + echo " PNG→JPG: $png → $jpg" + (( converted++ )) || true +done + +# --- Resize JPG già esistenti se >1400px --- +resized=0 +for jpg in *.jpg; do + w=$(identify -format '%w' "$jpg") + if (( w > 1400 )); then + mogrify -resize '1400x>' "$jpg" + echo " Resize: $jpg (era ${w}px → ≤1400px)" + (( resized++ )) || true + fi +done + +echo "Ottimizzazione completata: ${converted} PNG→JPG, ${resized} JPG ridimensionati." diff --git a/src/assets/img/about-exterior.jpg b/src/assets/img/about-exterior.jpg index 21365fe..f9acbb9 100644 Binary files a/src/assets/img/about-exterior.jpg and b/src/assets/img/about-exterior.jpg differ diff --git a/src/assets/img/about-trainer-1.jpg b/src/assets/img/about-trainer-1.jpg index 355ebc8..0888fc2 100644 Binary files a/src/assets/img/about-trainer-1.jpg and b/src/assets/img/about-trainer-1.jpg differ diff --git a/src/assets/img/about-trainer-2.jpg b/src/assets/img/about-trainer-2.jpg index 7899a91..4791b00 100644 Binary files a/src/assets/img/about-trainer-2.jpg and b/src/assets/img/about-trainer-2.jpg differ diff --git a/src/assets/img/about-trainer-3.jpg b/src/assets/img/about-trainer-3.jpg index 19ce4e8..1046caf 100644 Binary files a/src/assets/img/about-trainer-3.jpg and b/src/assets/img/about-trainer-3.jpg differ diff --git a/src/assets/img/about-trainer-4.jpg b/src/assets/img/about-trainer-4.jpg index a376cc8..00aa1bb 100644 Binary files a/src/assets/img/about-trainer-4.jpg and b/src/assets/img/about-trainer-4.jpg differ diff --git a/src/assets/img/about-training-group.jpg b/src/assets/img/about-training-group.jpg index 7cffc63..959e60e 100644 Binary files a/src/assets/img/about-training-group.jpg and b/src/assets/img/about-training-group.jpg differ diff --git a/src/assets/img/hero-1.jpg b/src/assets/img/hero-1.jpg index fbd901b..eb13ceb 100644 Binary files a/src/assets/img/hero-1.jpg and b/src/assets/img/hero-1.jpg differ diff --git a/src/assets/img/info-balance.jpg b/src/assets/img/info-balance.jpg index d5c0ba6..43f7989 100644 Binary files a/src/assets/img/info-balance.jpg and b/src/assets/img/info-balance.jpg differ diff --git a/src/assets/img/info-longevity.jpg b/src/assets/img/info-longevity.jpg index ce65397..b153873 100644 Binary files a/src/assets/img/info-longevity.jpg and b/src/assets/img/info-longevity.jpg differ diff --git a/src/assets/img/method-step-1.jpg b/src/assets/img/method-step-1.jpg index 1b477d8..d8d000c 100644 Binary files a/src/assets/img/method-step-1.jpg and b/src/assets/img/method-step-1.jpg differ diff --git a/src/assets/img/method-step-2.jpg b/src/assets/img/method-step-2.jpg index a8a3ba9..ca23451 100644 Binary files a/src/assets/img/method-step-2.jpg and b/src/assets/img/method-step-2.jpg differ diff --git a/src/assets/img/quote-bg.jpg b/src/assets/img/quote-bg.jpg index 07ceb83..23bc137 100644 Binary files a/src/assets/img/quote-bg.jpg and b/src/assets/img/quote-bg.jpg differ diff --git a/src/assets/img/team-antonello.jpg b/src/assets/img/team-antonello.jpg index b2056da..e14d8b6 100644 Binary files a/src/assets/img/team-antonello.jpg and b/src/assets/img/team-antonello.jpg differ diff --git a/src/assets/img/team-donata.jpg b/src/assets/img/team-donata.jpg index fb880e9..06beba4 100644 Binary files a/src/assets/img/team-donata.jpg and b/src/assets/img/team-donata.jpg differ diff --git a/src/assets/img/team-eleonora.jpg b/src/assets/img/team-eleonora.jpg index e32db0a..ec473b3 100644 Binary files a/src/assets/img/team-eleonora.jpg and b/src/assets/img/team-eleonora.jpg differ diff --git a/src/assets/img/team-nicola.jpg b/src/assets/img/team-nicola.jpg index 0979b57..6a44984 100644 Binary files a/src/assets/img/team-nicola.jpg and b/src/assets/img/team-nicola.jpg differ diff --git a/src/assets/img/training-performance-class.jpg b/src/assets/img/training-performance-class.jpg index 42e88cd..c4cde4d 100644 Binary files a/src/assets/img/training-performance-class.jpg and b/src/assets/img/training-performance-class.jpg differ diff --git a/src/assets/img/training-small-groups.jpg b/src/assets/img/training-small-groups.jpg index b23ca00..01b5fc5 100644 Binary files a/src/assets/img/training-small-groups.jpg and b/src/assets/img/training-small-groups.jpg differ