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.
This commit is contained in:
2026-07-02 13:56:55 +02:00
parent 0d9b645636
commit 6cc1cf5f44
48 changed files with 82 additions and 37 deletions
+41 -14
View File
@@ -52,9 +52,9 @@ export const prerender = true;
<h2>About</h2>
<p>InsanityLab nasce con l'obiettivo di unire fitness e salute in un unico percorso dedicato al benessere globale, superando il concetto tradizionale di palestra. Un laboratorio esclusivo, guidato da osteopati e chinesiologi e professionisti specializzati, dove movimento, prevenzione e performance convivono all'interno di un approccio personalizzato e consapevole.</p>
</div>
{imgOf('about-team-group') && (
{imgOf('about-pushup') && (
<div class="about-img-row__img about-img-row__img--native">
<Image src={imgOf('about-team-group')!} alt="Team InsanityLab" widths={[270]} sizes="270px" />
<Image src={imgOf('about-pushup')!} alt="Allenamento InsanityLab" widths={[320, 640]} sizes="320px" />
</div>
)}
</div>
@@ -75,6 +75,11 @@ export const prerender = true;
<li>Le convenzioni vengono definite su misura insieme a InsanityLab, in base alle caratteristiche e alle necessità dell'azienda partner.</li>
</ul>
<p class="conv__cta">Per ricevere maggiori informazioni o attivare una convenzione: {site.email} · {site.phone}</p>
{imgOf('about-conventions') && (
<div class="round-img">
<Image src={imgOf('about-conventions')!} alt="Convenzioni aziendali" widths={[360, 720]} sizes="360px" />
</div>
)}
</div>
</section>
@@ -87,7 +92,7 @@ export const prerender = true;
<div class="tgrid tgrid--founders">
{founders.map((m) => (
<article class="tcard">
{m.image && imgOf(m.image) && <Image src={imgOf(m.image)!} alt={m.name} widths={[300, 500]} sizes="(max-width:767px) 100vw, 33vw" />}
{m.imageAbout && imgOf(m.imageAbout) && <Image src={imgOf(m.imageAbout)!} alt={m.name} widths={[300, 500]} sizes="(max-width:767px) 100vw, 33vw" />}
<h3>{m.shortName}</h3>
<p class="tcard__role">{m.role}</p>
<p>{m.bio}</p>
@@ -98,7 +103,7 @@ export const prerender = true;
<div class="tgrid">
{staff.map((m) => (
<article class="tcard">
{m.image && imgOf(m.image) && <Image src={imgOf(m.image)!} alt={m.name} widths={[300, 500]} sizes="(max-width:767px) 100vw, 33vw" />}
{m.imageAbout && imgOf(m.imageAbout) && <Image src={imgOf(m.imageAbout)!} alt={m.name} widths={[300, 500]} sizes="(max-width:767px) 100vw, 33vw" />}
<h3>{m.shortName}</h3>
<p class="tcard__role">{m.role}</p>
<p>{m.bio}</p>
@@ -109,10 +114,21 @@ export const prerender = true;
</section>
<section class="section section--alt">
<div class="container section-heading">
<h2>Metodo</h2>
<p>Il team InsanityLab lavora con un approccio empatico e personalizzato, seguendo ogni persona in un percorso continuo e su misura. Unisce competenze multidisciplinari in allenamento, prevenzione, riabilitazione e performance, supportate da formazione costante. Il metodo si basa su sinergia, condivisione e qualità, per generare risultati concreti e duraturi.</p>
<p>In poche parole, il team di InsanityLab è composto da professionisti che credono profondamente in ciò che fanno: un gruppo unito da valori condivisi, formato per eccellere e guidato dalla convinzione che il movimento sia uno strumento di benessere, equilibrio e qualità della vita.</p>
<div class="container">
<div class="section-heading">
<h2>Metodo</h2>
<p>Il team InsanityLab lavora con un approccio empatico e personalizzato, seguendo ogni persona in un percorso continuo e su misura. Unisce competenze multidisciplinari in allenamento, prevenzione, riabilitazione e performance, supportate da formazione costante. Il metodo si basa su sinergia, condivisione e qualità, per generare risultati concreti e duraturi.</p>
</div>
<div class="about-img-row">
<div class="about-img-row__text section-heading">
<p>In poche parole, il team di InsanityLab è composto da professionisti che credono profondamente in ciò che fanno: un gruppo unito da valori condivisi, formato per eccellere e guidato dalla convinzione che il movimento sia uno strumento di benessere, equilibrio e qualità della vita.</p>
</div>
{imgOf('about-team-group') && (
<div class="round-img">
<Image src={imgOf('about-team-group')!} alt="Il team InsanityLab" widths={[360, 720]} sizes="360px" />
</div>
)}
</div>
</div>
</section>
@@ -125,9 +141,9 @@ export const prerender = true;
<p>Il progetto nasce con l'obiettivo di offrire a liberi professionisti uno spazio elegante, riservato e già attrezzato, in cui poter svolgere la propria attività all'interno di un contesto consolidato e altamente qualificato, senza dover affrontare i costi e le complessità di una struttura indipendente.</p>
<p>IN-SANITY STUDIOS si rivolge a figure specializzate nel settore salute e wellness, come fisioterapisti, osteopati, psicologi, nutrizionisti, massaggiatori e altri professionisti dedicati alla cura della persona. Ogni studio è progettato per garantire comfort, professionalità e continuità operativa, all'interno di un ambiente coerente con la filosofia di InsanityLab: mettere il benessere globale della persona al centro del percorso.</p>
</div>
{imgOf('about-exterior') && (
{imgOf('about-studios') && (
<div class="about-img-row__img">
<Image src={imgOf('about-exterior')!} alt="In-Sanity Studios" widths={[600, 900]} sizes="(max-width:767px) 100vw, 50vw" />
<Image src={imgOf('about-studios')!} alt="In-Sanity Studios" widths={[600, 900]} sizes="(max-width:767px) 100vw, 50vw" />
</div>
)}
</div>
@@ -135,10 +151,19 @@ export const prerender = true;
</section>
<section class="section section--alt">
<div class="container section-heading">
<h2>Vision</h2>
<p>InsanityLab nasce con l'obiettivo di aiutare le persone a ritrovare energia ed equilibrio attraverso il movimento, promuovendo un approccio autentico, scientifico e umano al benessere. La sua visione va oltre l'estetica e la performance: allenarsi significa prendersi cura di sé, costruendo abitudini sane, sostenibili e orientate alla longevità, alla prevenzione e alla qualità della vita.</p>
<p>L'obiettivo è diventare un punto di riferimento capace di lasciare un impatto reale nella comunità, trasformando il movimento in uno strumento di salute, consapevolezza e identità.</p>
<div class="container">
<div class="about-img-row">
{imgOf('about-vision') && (
<div class="round-img">
<Image src={imgOf('about-vision')!} alt="La comunità InsanityLab" widths={[360, 720]} sizes="360px" />
</div>
)}
<div class="about-img-row__text section-heading">
<h2>Vision</h2>
<p>InsanityLab nasce con l'obiettivo di aiutare le persone a ritrovare energia ed equilibrio attraverso il movimento, promuovendo un approccio autentico, scientifico e umano al benessere. La sua visione va oltre l'estetica e la performance: allenarsi significa prendersi cura di sé, costruendo abitudini sane, sostenibili e orientate alla longevità, alla prevenzione e alla qualità della vita.</p>
<p>L'obiettivo è diventare un punto di riferimento capace di lasciare un impatto reale nella comunità, trasformando il movimento in uno strumento di salute, consapevolezza e identità.</p>
</div>
</div>
</div>
</section>
</Base>
@@ -152,6 +177,8 @@ export const prerender = true;
.about-img-row__img--native { max-width: 320px; margin: 0 auto; }
.conv { max-width: 760px; margin: 0 auto 30px; display: grid; gap: 18px; padding-left: 20px; }
.conv__cta { text-align: center; font-family: var(--font-heading); letter-spacing: .06em; }
.round-img { max-width: 380px; margin: 30px auto 0; }
.round-img img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: 100%; }
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.tcard img { aspect-ratio: 3/4; object-fit: cover; margin-bottom: 16px; }
.tcard h3 { text-transform: lowercase; letter-spacing: .2em; }
+2 -1
View File
@@ -3,11 +3,12 @@ import Base from '../layouts/Base.astro';
import PageHero from '../components/PageHero.astro';
import ContactForm from '../components/ContactForm.astro';
import { site } from '../data/site';
import contactHero from '../assets/img/contact-hero.jpg';
export const prerender = true;
const mapsQuery = encodeURIComponent(`${site.address}, ${site.cityLine}`);
---
<Base title="Contatti" description="Contatta InsanityLab: Via Leandro Alberti 76, Bologna. Compila il form o chiamaci per una consulenza iniziale.">
<PageHero title="Contattaci" />
<PageHero title="Contattaci" bgImage={contactHero} />
<section class="section">
<div class="container cgrid">
<div class="cmap" id="map-box">
+6 -2
View File
@@ -5,6 +5,7 @@ import TrainingCards from '../components/home/TrainingCards.astro';
import Agenda from '../components/Agenda.astro';
import { Image } from 'astro:assets';
import { trainings } from '../data/trainings';
import trialImg from '../assets/img/trial-class.jpg';
const images = import.meta.glob<{ default: ImageMetadata }>('../assets/img/training-*.{jpg,png}', { eager: true });
const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(name))?.[1]?.default;
export const prerender = true;
@@ -39,7 +40,8 @@ export const prerender = true;
<section class="section section--alt">
<div class="container trial">
<div>
<Image src={trialImg} alt="Lezione di prova InsanityLab" widths={[500, 900]} sizes="(max-width:767px) 100vw, 45vw" data-reveal="left" />
<div data-reveal="right">
<h2>Prenota la lezione di prova</h2>
<p>La lezione di prova è l'occasione perfetta per conoscere il metodo, vivere l'esperienza in prima persona e capire il percorso più adatto a te. Inizia oggi il tuo percorso: prenota la tua lezione di prova.</p>
<a class="btn btn--dark" href="/contact">Prenota</a>
@@ -52,6 +54,8 @@ export const prerender = true;
.tblock { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-block: 40px; scroll-margin-top: calc(var(--header-h) + 20px); }
.tblock--reverse img { order: 2; }
.tblock h2 { letter-spacing: .1em; }
.trial { max-width: 720px; text-align: center; }
.trial { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.trial img { width: 100%; height: auto; max-height: 460px; object-fit: cover; }
@media (max-width: 767px) { .trial { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 767px) { .tblock { grid-template-columns: 1fr; gap: 24px; } .tblock--reverse img { order: 0; } }
</style>