fix: rimappa tutte le foto sugli slot corretti del design figma

Le immagini erano asset reali del .fig ma piazzate in slot sbagliati.
Rimappate home/training/about dal confronto con i PDF Figma; aggiunti
i 9 ritratti team about (chiari in home, scuri in about via imageAbout),
immagini mancanti per metodo/vision/convenzioni/studios/trial e hero
contatti. Fix imgOf (match esatto) e getImage per i background dedupati.

src/components/PageHero.astro

@@ -1,8 +1,12 @@
 ---
-interface Props { title: string; eyebrow?: string }
-const { title, eyebrow } = Astro.props;
+import type { ImageMetadata } from 'astro';
+import { getImage } from 'astro:assets';
+
+interface Props { title: string; eyebrow?: string; bgImage?: ImageMetadata }
+const { title, eyebrow, bgImage } = Astro.props;
+const bg = bgImage ? await getImage({ src: bgImage, width: 1920 }) : null;
 ---
-<section class="phero">
+<section class:list={['phero', { 'phero--photo': bg }]} style={bg ? `background-image:url(${bg.src})` : undefined}>
   <div class="container" data-reveal>
     {eyebrow && <p class="eyebrow">{eyebrow}</p>}
     <h1>{title}</h1>
@@ -12,4 +16,8 @@ const { title, eyebrow } = Astro.props;
 <style>
   .phero { background: var(--c-bg-alt); padding-block: 70px; }
   .phero h1 { text-transform: lowercase; font-weight: 500; margin: 0; }
+  .phero--photo { position: relative; background-size: cover; background-position: center; padding-block: 110px; }
+  .phero--photo::before { content: ''; position: absolute; inset: 0; background: rgba(46,32,24,.6); }
+  .phero--photo .container { position: relative; }
+  .phero--photo h1 { color: #fff; }
 </style>

src/components/home/HeroSlider.astro

@@ -1,6 +1,6 @@
 ---
 import { Image } from 'astro:assets';
-import hero1 from '../../assets/img/hero-1.jpg';
+import hero1 from '../../assets/img/hero-1.png';
 const slides = [
   { title: ['PERFORMANCE.', 'BALANCE.', 'LONGEVITY.'], image: hero1, alt: 'Atleti InsanityLab' },
 ];
@@ -33,7 +33,7 @@ const slides = [
   .hero__in { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; min-height: calc(100vh - var(--header-h)); gap: 30px; }
   .hero__line { display: block; }
   .hero__text h1 { font-weight: 500; }
-  .hero__img { object-fit: cover; height: 100%; max-height: calc(100vh - var(--header-h)); width: 100%; }
+  .hero__img { object-fit: contain; object-position: center bottom; height: 100%; max-height: calc(100vh - var(--header-h)); width: 100%; }
   .hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 3rem; color: var(--c-heading); cursor: pointer; }
   .hero__arrow--prev { left: 12px; } .hero__arrow--next { right: 12px; }
   @media (max-width: 991px) { .hero__in { grid-template-columns: 1fr; padding-block: 40px; min-height: 0; } }

src/components/home/InfoColumns.astro

@@ -1,16 +1,19 @@
 ---
+import { getImage } from 'astro:assets';
 import infoPerformance from '../../assets/img/info-performance.jpg';
 import infoBalance from '../../assets/img/info-balance.jpg';
 import infoLongevity from '../../assets/img/info-longevity.jpg';
-const cols = [
+// getImage garantisce l'emissione dell'asset anche quando il file è byte-identico
+// ad altri import (Astro dedupa e non emette l'originale usato solo come background).
+const cols = await Promise.all([
   { title: 'PERFORMANCE.', image: infoPerformance },
   { title: 'BALANCE.', image: infoBalance },
   { title: 'LONGEVITY.', image: infoLongevity },
-];
+].map(async (c) => ({ ...c, bg: (await getImage({ src: c.image, width: 1200 })).src })));
 ---
 <section class="info" aria-label="pilastri">
   {cols.map((c, i) => (
-    <a class="info__col" href="/programs" style={`background-image:url(${c.image.src});--reveal-delay:${i * 0.15}s`} data-reveal="fade">
+    <a class="info__col" href="/programs" style={`background-image:url(${c.bg});--reveal-delay:${i * 0.15}s`} data-reveal="fade">
       <span class="info__title">{c.title}</span>
     </a>
   ))}

src/components/home/QuoteBanner.astro

@@ -1,5 +1,7 @@
 ---
-import quoteBg from '../../assets/img/quote-bg.jpg';
+import { getImage } from 'astro:assets';
+import quoteBgSrc from '../../assets/img/quote-bg.jpg';
+const quoteBg = await getImage({ src: quoteBgSrc, width: 1920 });
 const quote = 'PERFORMANCE È SPINGERE OLTRE I PROPRI LIMITI, BALANCE È SAPERLI ASCOLTARE, LONGEVITY È COSTRUIRE NEL TEMPO CIÒ CHE DAVVERO CONTA.';
 const quoteHtml = quote.replace(/(PERFORMANCE|BALANCE|LONGEVITY)/g, '<strong>$1</strong>');
 ---

src/components/home/TeamSection.astro

@@ -4,7 +4,7 @@ import type { ImageMetadata } from 'astro';
 import { team, homeTeam } from '../../data/team';
 const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/team-*.{jpg,png}', { eager: true });
 const members = homeTeam.map((short) => team.find((m) => m.shortName === short)!).filter((m) => m.image);
-const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(name))?.[1].default;
+const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(`${name}.`))?.[1].default;
 ---
 <section class="section">
   <div class="container">