feat: homepage completa da design Figma

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/components/home/FeatureBlocks.astro

@@ -0,0 +1,35 @@
+---
+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';
+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.' },
+];
+---
+<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" />
+        <div class="feat__text">
+          <h2>{b.title}</h2>
+          <p>{b.text}</p>
+          <a class="btn" href="/programs">Scopri</a>
+        </div>
+      </div>
+    ))}
+  </div>
+</section>
+
+<style>
+  .feat { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-block: 40px; }
+  .feat--reverse .feat__img { order: 2; }
+  .feat__text h2 { text-transform: uppercase; letter-spacing: .1em; }
+  @media (max-width: 767px) { .feat { grid-template-columns: 1fr; gap: 24px; } .feat--reverse .feat__img { order: 0; } }
+</style>