feat: tag contenuti home cards, team, metodo, partner, agenda

src/components/Agenda.astro

@@ -1,20 +1,21 @@
 ---
 import { agenda, disciplines, days, slots } from '../data/agenda';
+import T from './content/T.astro';
 ---
 <section class="section section--dark agenda">
   <div class="container">
-    <div class="section-heading" data-reveal><h2>Agenda</h2></div>
+    <div class="section-heading" data-reveal><T tag="agenda.title" as="h2" /></div>
     <div class="agenda__tabs" role="tablist" data-reveal style="--reveal-delay:.1s">
       {disciplines.map((d, i) => (
-        <button class:list={['agenda__tab', { 'is-active': i === 0 }]} data-filter={d} role="tab" aria-selected={i === 0 ? 'true' : 'false'}>{d}</button>
+        <button class:list={['agenda__tab', { 'is-active': i === 0 }]} data-filter={d} role="tab" aria-selected={i === 0 ? 'true' : 'false'}><T tag={`agenda.discipline.${i + 1}`} as="span" /></button>
       ))}
     </div>
     <div class="agenda__grid" data-reveal style="--reveal-delay:.2s">
       <div class="agenda__corner"></div>
-      {days.map((d) => <div class="agenda__day">{d}</div>)}
-      {slots.map((slot) => (
+      {days.map((_, i) => <T tag={`agenda.day.${i + 1}`} as="div" class="agenda__day" />)}
+      {slots.map((slot, si) => (
         <>
-          <div class="agenda__slot">{slot}</div>
+          <T tag={`agenda.slot.${si + 1}`} as="div" class="agenda__slot" />
           {days.map((_, dayIdx) => {
             const entry = agenda.find((e) => e.day === dayIdx && e.slot === slot);
             return entry

src/components/content/TImg.astro

@@ -4,7 +4,7 @@ import type { ImageMetadata } from 'astro';
 import { getImageOverride } from '../../lib/content';
 interface Props {
   tag: string; src: ImageMetadata; alt: string;
-  class?: string; loading?: 'lazy' | 'eager'; widths?: number[]; sizes?: string;
+  class?: string; loading?: 'lazy' | 'eager'; widths?: number[]; sizes?: string; height?: number;
 }
 const { tag, src, alt, class: cls, ...rest } = Astro.props;
 const override = getImageOverride(tag);

src/components/home/MethodSteps.astro

@@ -1,26 +1,27 @@
 ---
-import { Image } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
-import { methodIntro, methodExtraNote, methodSteps } from '../../data/method';
+import { methodSteps } from '../../data/method';
+import T from '../content/T.astro';
+import TImg from '../content/TImg.astro';
 const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/method-*.{jpg,png}', { eager: true });
 const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(name))?.[1].default;
 ---
 <section class="section section--alt">
   <div class="container">
     <div class="section-heading" data-reveal>
-      <h2>Il metodo<br />InsanityLab</h2>
-      <p set:html={methodIntro.replace('Metodo Insanitylab', '<strong>Metodo Insanitylab</strong>')} />
+      <T tag="home.method.title" as="h2" />
+      <T tag="method.intro" as="p" />
     </div>
-    <p class="method__note">{methodExtraNote}</p>
+    <T tag="method.extra-note" as="p" class="method__note" />
     <div class="method__row">
       {methodSteps.map((s, i) => (
         <div class:list={['method__step', { 'method__step--extra': s.extra }]} data-reveal style={`--reveal-delay:${(i * 0.15).toFixed(2)}s`}>
           <div class="method__circle">
-            {imgOf(s.image) && <Image src={imgOf(s.image)!} alt="" widths={[220]} sizes="220px" />}
+            {imgOf(s.image) && <TImg tag={`method.step.${s.n}.image`} src={imgOf(s.image)!} alt="" widths={[220]} sizes="220px" />}
             <span>{s.n}</span>
           </div>
-          <h3>{s.title}</h3>
-          <p>{s.text}</p>
+          <T tag={`method.step.${s.n}.title`} as="h3" />
+          <T tag={`method.step.${s.n}.text`} as="p" />
         </div>
       ))}
     </div>

src/components/home/PartnersStrip.astro

@@ -1,13 +1,14 @@
 ---
-import { Image } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
 import { partners } from '../../data/partners';
+import TImg from '../content/TImg.astro';
+import { t } from '../../lib/content';
 const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/partner-*.{jpg,png}', { eager: true });
 const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(name))?.[1].default;
 ---
 <section class="pstrip" aria-label="partner">
   <div class="container pstrip__in" data-reveal="fade">
-    {partners.map((p) => imgOf(p.image) && <Image src={imgOf(p.image)!} alt={p.name} height={44} />)}
+    {partners.map((p, i) => imgOf(p.image) && <TImg tag={`partner.${i + 1}.image`} src={imgOf(p.image)!} alt={t(`partner.${i + 1}.name`)} height={44} />)}
   </div>
 </section>
 

src/components/home/ProgramsGrid.astro

@@ -1,12 +1,13 @@
 ---
 import { programs } from '../../data/programs';
 import { programIcons as icons } from '../../data/program-icons';
+import T from '../content/T.astro';
 ---
 <section class="section">
   <div class="container">
     <div class="section-heading" data-reveal>
-      <h2>Programmi</h2>
-      <p>Questi sono i programmi delle classi di Insanity Lab selezionati per voi. Abbiamo scelto i migliori percorsi per offrirvi un’esperienza di allenamento completa e mirata.</p>
+      <T tag="home.programs.title" as="h2" />
+      <T tag="home.programs.body" as="p" />
     </div>
     <div class="pgrid">
       {programs.map((p, i) => (

src/components/home/TeamSection.astro

@@ -1,7 +1,9 @@
 ---
-import { Image } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
 import { team, homeTeam } from '../../data/team';
+import T from '../content/T.astro';
+import TImg from '../content/TImg.astro';
+import { t } from '../../lib/content';
 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;
@@ -9,16 +11,19 @@ const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(
 <section class="section">
   <div class="container">
     <div class="tteam__head" data-reveal>
-      <h2>Team<br />Trainer</h2>
-      <a class="btn" href="/about">Scopri team</a>
+      <T tag="home.team.title" as="h2" />
+      <a class="btn" href="/about"><T tag="home.team.cta" as="span" /></a>
     </div>
     <div class="tteam__grid">
-      {members.map((m, i) => (
-        <figure class="tteam__card" data-reveal style={`--reveal-delay:${i * 0.12}s`}>
-          <Image src={imgOf(m.image!)!} alt={m.name} widths={[300, 500]} sizes="(max-width: 767px) 50vw, 25vw" />
-          <figcaption>{m.shortName}</figcaption>
-        </figure>
-      ))}
+      {members.map((m, i) => {
+        const slug = m.shortName.toLowerCase();
+        return (
+          <figure class="tteam__card" data-reveal style={`--reveal-delay:${i * 0.12}s`}>
+            <TImg tag={`team.${slug}.image`} src={imgOf(m.image!)!} alt={t(`team.${slug}.name`)} widths={[300, 500]} sizes="(max-width: 767px) 50vw, 25vw" />
+            <figcaption>{m.shortName}</figcaption>
+          </figure>
+        );
+      })}
     </div>
   </div>
 </section>

src/components/home/TrainingCards.astro

@@ -1,7 +1,9 @@
 ---
-import { Image } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
 import { trainings } from '../../data/trainings';
+import T from '../content/T.astro';
+import TImg from '../content/TImg.astro';
+import { t } from '../../lib/content';
 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;
 const tones = ['taupe', 'tan', 'dark', 'charcoal'];
@@ -9,18 +11,18 @@ const tones = ['taupe', 'tan', 'dark', 'charcoal'];
 const isSwapRow = (i: number) => Math.floor(i / 2) % 2 === 1;
 ---
 <section class="tcards">
-  {trainings.map((t, i) => {
-    const img = imgOf(t.image);
+  {trainings.map((tr, i) => {
+    const img = imgOf(tr.image);
     const card = (
       <div class:list={['tcards__cell', `tcards__cell--${tones[i]}`]} data-reveal="fade" style={`--reveal-delay:${(i % 2) * 0.15}s`}>
-        <h3>{t.title}</h3>
-        <p>{t.caption}</p>
-        <a class="tcards__link" href={t.cta.href}>Scopri →</a>
+        <T tag={`training.${tr.id}.title`} as="h3" />
+        <T tag={`training.${tr.id}.caption`} as="p" />
+        <a class="tcards__link" href={tr.cta.href}><T tag="home.training-cards.link-label" as="span" /> →</a>
       </div>
     );
     const photo = img ? (
       <div class="tcards__photo" data-reveal="fade" style={`--reveal-delay:${((i % 2) * 0.15 + 0.1).toFixed(2)}s`}>
-        <Image src={img} alt={t.title} class="tcards__img" widths={[400, 700]} sizes="(max-width: 767px) 50vw, 25vw" />
+        <TImg tag={`training.${tr.id}.image`} src={img} alt={t(`training.${tr.id}.title`)} class="tcards__img" widths={[400, 700]} sizes="(max-width: 767px) 50vw, 25vw" />
       </div>
     ) : null;
     return isSwapRow(i) ? <>{photo}{card}</> : <>{card}{photo}</>;