feat: homepage completa da design Figma

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

src/components/home/InfoColumns.astro

@@ -0,0 +1,26 @@
+---
+import infoPerformance from '../../assets/img/info-performance.jpg';
+import infoBalance from '../../assets/img/info-balance.jpg';
+import infoLongevity from '../../assets/img/info-longevity.jpg';
+const cols = [
+  { title: 'PERFORMANCE.', image: infoPerformance },
+  { title: 'BALANCE.', image: infoBalance },
+  { title: 'LONGEVITY.', image: infoLongevity },
+];
+---
+<section class="info" aria-label="pilastri">
+  {cols.map((c) => (
+    <a class="info__col" href="/programs" style={`background-image:url(${c.image.src})`}>
+      <span class="info__title">{c.title}</span>
+    </a>
+  ))}
+</section>
+
+<style>
+  .info { display: grid; grid-template-columns: repeat(3, 1fr); }
+  .info__col { position: relative; min-height: 320px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-decoration: none; }
+  .info__col::before { content: ''; position: absolute; inset: 0; background: rgba(30,24,20,.35); transition: background .2s; }
+  .info__col:hover::before { background: rgba(30,24,20,.15); }
+  .info__title { position: relative; color: #fff; font-family: var(--font-heading); font-weight: 600; letter-spacing: .1em; font-size: 1.1rem; }
+  @media (max-width: 767px) { .info { grid-template-columns: 1fr; } }
+</style>