feat: rinomina sezione Programmi in Servizi (route, tag, migrazione DB)

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

src/components/home/ServicesGrid.astro

@@ -0,0 +1,35 @@
+---
+import { services } from '../../data/services';
+import { serviceIcons as icons } from '../../data/service-icons';
+import T from '../content/T.astro';
+---
+<section class="section">
+  <div class="container">
+    <div class="section-heading" data-reveal>
+      <T tag="home.services.title" as="h2" />
+      <T tag="home.services.body" as="p" />
+    </div>
+    <div class="pgrid">
+      {services.map((p, i) => (
+        <a class="pgrid__item" href={`/services/${p.slug}`} data-reveal style={`--reveal-delay:${(i % 3) * 0.15}s`}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="var(--c-accent-dark)" stroke-width="1.4" width="52" height="52" aria-hidden="true"><path d={icons[p.slug]} /></svg>
+          <T tag={`service.${p.slug}.title`} as="h3" />
+          <T tag={`service.${p.slug}.subtitle`} as="p" />
+        </a>
+      ))}
+    </div>
+  </div>
+</section>
+
+<style>
+  .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 40px; text-align: center; }
+  .pgrid__item { text-decoration: none; transition: transform .3s ease; }
+  .pgrid__item:hover { transform: translateY(-4px); }
+  .pgrid__item:hover h3 { color: var(--c-accent-dark); }
+  .pgrid__item h3 { transition: color .3s ease; }
+  .pgrid__item svg { margin-inline: auto; }
+  .pgrid__item h3 { text-transform: uppercase; letter-spacing: .12em; font-size: .95rem; margin: 18px 0 6px; }
+  .pgrid__item p { font-size: .85rem; color: var(--c-text-light); margin: 0; }
+  @media (max-width: 767px) { .pgrid { grid-template-columns: 1fr 1fr; } }
+  @media (max-width: 480px) { .pgrid { grid-template-columns: 1fr; } }
+</style>