feat: tag contenuti programmi e pricing

src/pages/programs/[slug].astro

@@ -1,59 +1,62 @@
 ---
 import Base from '../../layouts/Base.astro';
 import PageHero from '../../components/PageHero.astro';
-import { Image } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
 import { programs } from '../../data/programs';
 import { performanceClassPricing } from '../../data/pricing';
 import { programIcons } from '../../data/program-icons';
+import T from '../../components/content/T.astro';
+import TImg from '../../components/content/TImg.astro';
+import { t } from '../../lib/content';
 export const prerender = true;
 
 export function getStaticPaths() {
   return programs.map((p) => ({ params: { slug: p.slug }, props: { program: p } }));
 }
 const { program } = Astro.props;
+const slug = program.slug;
 const others = programs.filter((p) => p.slug !== program.slug);
 const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/program-*.jpg', { eager: true });
 const imgOf = (slug: string) => Object.entries(images).find(([p]) => p.includes(`program-${slug}.`))?.[1]?.default;
 const heroImg = imgOf(program.slug);
-// Categorie come da Figma (Performance class.pdf), non quelle del blog
-const categories = ['Fitness', 'Salute', 'Stile di vita', 'Nutrizione'];
+// Categorie come da Figma (Performance class.pdf), non quelle del blog → tag program.side.category.1-4
+const categoryIndexes = [1, 2, 3, 4];
 // Ordine card pricing come da Figma: tan, taupe, dark
 const tones = ['tan', 'taupe', 'dark'];
 ---
-<Base title={program.title} description={program.excerpt}>
-  <PageHero title={program.title.toUpperCase()} bgImage={heroImg} />
+<Base title={t(`program.${slug}.title`)} description={t(`program.${slug}.excerpt`)}>
+  <PageHero title={t(`program.${slug}.title`).toUpperCase()} bgImage={heroImg} />
 
   <section class="section">
     <div class="container prog">
       <div>
-        <h2>{program.title.toUpperCase()}</h2>
-        <p>{program.longDescription}</p>
+        <h2>{t(`program.${slug}.title`).toUpperCase()}</h2>
+        <T tag={`program.${slug}.long-description`} as="p" />
         <ul class="prog__features">
-          {program.features.map((f) => <li>{f}</li>)}
+          {program.features.map((_, i) => <T tag={`program.${slug}.feature.${i + 1}`} as="li" />)}
         </ul>
         {heroImg && (
-          <Image src={heroImg} alt={program.title} class="prog__img" widths={[600, 1000]} sizes="(max-width:991px) 100vw, 60vw" data-reveal="fade" />
+          <TImg tag={`program.${slug}.image`} src={heroImg} alt={t(`program.${slug}.title`)} class="prog__img" widths={[600, 1000]} sizes="(max-width:991px) 100vw, 60vw" data-reveal="fade" />
         )}
         <div class="prog__faq">
-          {program.faq.map((item, i) => (
+          {program.faq.map((_, i) => (
             <details open={i === 0}>
-              <summary>{item.q}</summary>
-              <p>{item.a}</p>
+              <summary><T tag={`program.${slug}.faq.${i + 1}.q`} /></summary>
+              <T tag={`program.${slug}.faq.${i + 1}.a`} as="p" />
             </details>
           ))}
         </div>
       </div>
       <aside class="prog__side">
-        <h3>Categorie</h3>
-        {categories.map((c) => <p class="prog__cat">{c}</p>)}
-        <h3>Altri programmi</h3>
+        <T tag="program.side.categories-label" as="h3" />
+        {categoryIndexes.map((n) => <T tag={`program.side.category.${n}`} as="p" class="prog__cat" />)}
+        <T tag="program.side.others-label" as="h3" />
         {others.map((o) => (
           <a class="prog__other" href={`/programs/${o.slug}`}>
             <span class="prog__icon">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" width="26" height="26" aria-hidden="true"><path d={programIcons[o.slug]} /></svg>
             </span>
-            <span>{o.title}</span>
+            <T tag={`program.${o.slug}.title`} />
           </a>
         ))}
       </aside>
@@ -64,25 +67,25 @@ const tones = ['tan', 'taupe', 'dark'];
     <section class="section section--alt">
       <div class="container">
         <div class="section-heading">
-          <h2>{performanceClassPricing.heading}</h2>
-          <p>{performanceClassPricing.intro}</p>
+          <T tag="pricing.heading" as="h2" />
+          <T tag="pricing.intro" as="p" />
         </div>
-        {performanceClassPricing.groups.map((g) => (
+        {performanceClassPricing.groups.map((g, gi) => (
           <details class="price__group" open={g.open}>
-            <summary>{g.open ? '+' : '–'} {g.label}</summary>
+            <summary>{g.open ? '+' : '–'} <T tag={`pricing.group.${gi + 1}.label`} /></summary>
             {g.plans.length === 0 ? (
-              <p class="price__empty">Contattaci per i dettagli di questo programma. <a href="/contact">Scrivici →</a></p>
+              <T tag="program.pricing.empty-note" as="p" class="price__empty" />
             ) : (
               <div class="price__row">
                 {g.plans.map((p, i) => (
                   <div class:list={['price__card', `price__card--${tones[i % 3]}`]}>
                     <p class="price__amount">{p.monthly}€</p>
-                    <p class="price__per">al mese, semestrale</p>
-                    <p class="price__entries">{p.entries} {p.entries === 1 ? 'ingresso settimanale' : 'ingressi settimanali'}</p>
-                    <p>{p.note}</p>
-                    <p>{p.installments}</p>
-                    <p class="price__best">{p.best}</p>
-                    <a class="btn btn--light" href="/contact">Acquista</a>
+                    <T tag="program.pricing.per" as="p" class="price__per" />
+                    <p class="price__entries">{p.entries} {p.entries === 1 ? t('program.pricing.entries-singular') : t('program.pricing.entries-plural')}</p>
+                    <T tag={`pricing.group.${gi + 1}.plan.${i + 1}.note`} as="p" />
+                    <T tag={`pricing.group.${gi + 1}.plan.${i + 1}.installments`} as="p" />
+                    <T tag={`pricing.group.${gi + 1}.plan.${i + 1}.best`} as="p" class="price__best" />
+                    <a class="btn btn--light" href="/contact">{t('program.pricing.buy-cta')}</a>
                   </div>
                 ))}
               </div>

src/pages/programs/index.astro

@@ -1,34 +1,36 @@
 ---
 import Base from '../../layouts/Base.astro';
 import PageHero from '../../components/PageHero.astro';
-import { Image } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
 import { programs } from '../../data/programs';
+import T from '../../components/content/T.astro';
+import TImg from '../../components/content/TImg.astro';
+import { t } from '../../lib/content';
 const images = import.meta.glob<{ default: ImageMetadata }>('../../assets/img/program-*.jpg', { eager: true });
 const imgOf = (slug: string) => Object.entries(images).find(([p]) => p.includes(`program-${slug}.`))?.[1]?.default;
 export const prerender = true;
 ---
-<Base title="Programmi" description="I programmi InsanityLab: Personal Training, Performance Class, Coaching, Pilates Flow, Rehab e Nutrizione.">
-  <PageHero title="Programmi" />
+<Base title={t('programs.meta.title')} description={t('programs.meta.description')}>
+  <PageHero title={t('programs.hero.title')} />
   <section class="section">
     <div class="container">
       <div class="section-heading">
-        <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="programs.intro.title" as="h2" />
+        <T tag="programs.intro.body" as="p" />
       </div>
       <div class="plist">
         {programs.map((p, i) => (
           <article class="plist__card" data-reveal style={`--reveal-delay:${((i % 3) * 0.15).toFixed(2)}s`}>
             {imgOf(p.slug) && (
               <a class="plist__photo" href={`/programs/${p.slug}`}>
-                <Image src={imgOf(p.slug)!} alt={p.title} widths={[400, 700]} sizes="(max-width:767px) 100vw, 33vw" />
+                <TImg tag={`program.${p.slug}.image`} src={imgOf(p.slug)!} alt={t(`program.${p.slug}.title`)} widths={[400, 700]} sizes="(max-width:767px) 100vw, 33vw" />
               </a>
             )}
             <div class="plist__body">
-              <h3>{p.title}</h3>
-              <p class="plist__sub">{p.subtitle}</p>
-              <p>{p.excerpt}</p>
-              <a class="plist__more" href={`/programs/${p.slug}`}>Per saperne di più →</a>
+              <T tag={`program.${p.slug}.title`} as="h3" />
+              <T tag={`program.${p.slug}.subtitle`} as="p" class="plist__sub" />
+              <T tag={`program.${p.slug}.excerpt`} as="p" />
+              <a class="plist__more" href={`/programs/${p.slug}`}>{t('programs.card.more-label')}</a>
             </div>
           </article>
         ))}