feat: tag contenuti home hero, info, feature, quote

src/components/home/FeatureBlocks.astro

@@ -1,26 +1,25 @@
 ---
-import { Image } from 'astro:assets';
 import featPerformance from '../../assets/img/feature-performance.jpg';
 import featBalance from '../../assets/img/feature-balance.jpg';
 import featLongevity from '../../assets/img/feature-longevity.jpg';
+import T from '../content/T.astro';
+import TImg from '../content/TImg.astro';
+import { t } from '../../lib/content';
 const blocks = [
-  { title: 'PERFORMANCE', image: featPerformance, reverse: false,
-    text: 'Allenamenti progettati su misura per adattarsi ai tuoi obiettivi e al tuo livello. Programmi mirati che sviluppano forza, resistenza e funzionalità in modo equilibrato. Un metodo efficace per migliorare le performance e ottenere risultati concreti e duraturi.' },
-  { title: 'BALANCE', image: featBalance, reverse: true,
-    text: 'L’equilibrio tra corpo e mente è la base di ogni performance duratura. Attraverso movimento, recupero e gestione dello stress, costruiamo stabilità e controllo. Un approccio integrato che sostiene benessere, energia e continuità nel tempo.' },
-  { title: 'LONGEVITY', image: featLongevity, reverse: false,
-    text: 'Benessere completo tra movimento, nutrizione e stile di vita. Un percorso personalizzato che unisce prevenzione, recupero ed equilibrio. Investi nella tua salute e qualità della vita nel tempo.' },
+  { key: 'performance', image: featPerformance, reverse: false },
+  { key: 'balance', image: featBalance, reverse: true },
+  { key: 'longevity', image: featLongevity, reverse: false },
 ];
 ---
 <section class="section">
   <div class="container">
     {blocks.map((b) => (
       <div class:list={['feat', { 'feat--reverse': b.reverse }]}>
-        <Image src={b.image} alt={b.title} class="feat__img" widths={[500, 900]} sizes="(max-width: 767px) 100vw, 45vw" data-reveal={b.reverse ? 'right' : 'left'} />
+        <TImg tag={`home.feature.${b.key}.image`} src={b.image} alt={t(`home.feature.${b.key}.title`)} class="feat__img" widths={[500, 900]} sizes="(max-width: 767px) 100vw, 45vw" data-reveal={b.reverse ? 'right' : 'left'} />
         <div class="feat__text" data-reveal={b.reverse ? 'left' : 'right'}>
-          <h2>{b.title}</h2>
-          <p>{b.text}</p>
-          <a class="btn" href="/programs">Scopri</a>
+          <T tag={`home.feature.${b.key}.title`} as="h2" />
+          <T tag={`home.feature.${b.key}.body`} as="p" />
+          <a class="btn" href="/programs">{t(`home.feature.${b.key}.cta`)}</a>
         </div>
       </div>
     ))}

src/components/home/HeroSlider.astro

@@ -1,8 +1,10 @@
 ---
-import { Image } from 'astro:assets';
 import hero1 from '../../assets/img/hero-1.png';
+import T from '../content/T.astro';
+import TImg from '../content/TImg.astro';
+import { t } from '../../lib/content';
 const slides = [
-  { title: ['PERFORMANCE.', 'BALANCE.', 'LONGEVITY.'], image: hero1, alt: 'Atleti InsanityLab' },
+  { titleTags: ['home.hero.title-line-1', 'home.hero.title-line-2', 'home.hero.title-line-3'], image: hero1, alt: 'Atleti InsanityLab' },
 ];
 ---
 <section class="hero" aria-label="presentazione">
@@ -10,10 +12,10 @@ const slides = [
     <div class:list={['hero__slide', { 'is-active': i === 0 }]}>
       <div class="container hero__in">
         <div class="hero__text">
-          <h1>{s.title.map((line) => <span class="hero__line">{line}</span>)}</h1>
-          <a class="btn" href="/programs">Scopri</a>
+          <h1>{s.titleTags.map((tag) => <T tag={tag} as="span" class="hero__line" />)}</h1>
+          <a class="btn" href="/programs">{t('home.hero.cta')}</a>
         </div>
-        <Image src={s.image} alt={s.alt} class="hero__img" widths={[600, 1000, 1400]} sizes="(max-width: 991px) 100vw, 60vw" loading="eager" />
+        <TImg tag="home.hero.image" src={s.image} alt={s.alt} class="hero__img" widths={[600, 1000, 1400]} sizes="(max-width: 991px) 100vw, 60vw" loading="eager" />
       </div>
     </div>
   ))}

src/components/home/InfoColumns.astro

@@ -3,18 +3,20 @@ 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';
+import T from '../content/T.astro';
+import { contentImageUrl } from '../../lib/content';
 // 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 })));
+  { titleTag: 'home.info.col1.title', imageTag: 'home.info.col1.image', image: infoPerformance },
+  { titleTag: 'home.info.col2.title', imageTag: 'home.info.col2.image', image: infoBalance },
+  { titleTag: 'home.info.col3.title', imageTag: 'home.info.col3.image', image: infoLongevity },
+].map(async (c) => ({ ...c, bg: contentImageUrl(c.imageTag, (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.bg});--reveal-delay:${i * 0.15}s`} data-reveal="fade">
-      <span class="info__title">{c.title}</span>
+    <a class="info__col" href="/programs" style={`background-image:url(${c.bg});--reveal-delay:${i * 0.15}s`} data-reveal="fade" data-tag={c.imageTag}>
+      <T tag={c.titleTag} as="span" class="info__title" />
     </a>
   ))}
 </section>

src/components/home/QuoteBanner.astro

@@ -1,22 +1,21 @@
 ---
 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>');
+import { t, contentImageUrl } from '../../lib/content';
+const quoteBg = contentImageUrl('home.quote.image', (await getImage({ src: quoteBgSrc, width: 1920 })).src);
 ---
 <section class="quote" data-parallax>
-  <div class="quote__bg" style={`background-image:url(${quoteBg.src})`}></div>
+  <div class="quote__bg" style={`background-image:url(${quoteBg})`} data-tag="home.quote.image"></div>
   <div class="quote__in">
     <p class="quote__mark">“</p>
     <blockquote>
       <div class="quote__marquee">
         <p class="quote__track">
-          <span class="quote__seg" set:html={quoteHtml} />
-          <span class="quote__seg" aria-hidden="true" set:html={quoteHtml} />
+          <span class="quote__seg" data-tag="home.quote.text" set:html={t('home.quote.text')} />
+          <span class="quote__seg" aria-hidden="true" data-tag="home.quote.text" set:html={t('home.quote.text')} />
         </p>
       </div>
-      <cite>Insanitylab</cite>
+      <cite data-tag="home.quote.cite">{t('home.quote.cite')}</cite>
     </blockquote>
   </div>
 </section>