feat: pagina about

src/components/about/Timeline.astro

@@ -0,0 +1,34 @@
+---
+const openText = `Il percorso di crescita di InsanityLab si è sviluppato attraverso tappe precise e coerenti con la visione iniziale. Nato nel 2021 con un piccolo team e grandi ambizioni, il progetto ha conosciuto una forte evoluzione nel 2024, anno in cui il servizio si è ampliato attraverso nuovi format come gli small group e una sempre maggiore specializzazione nella profilazione fisica del cliente, grazie a sistemi avanzati di valutazione e monitoraggio. Parallelamente, anche l'area dedicata alla riabilitazione e all'esercizio preventivo si è consolidata, ponendo le basi per un importante salto di qualità.`;
+const stages = [
+  { label: 'INSANITYLAB 2025', text: 'Contenuto in arrivo: il cliente fornirà il testo di questa tappa.' },
+  { label: 'INSANITYLAB 2026', text: 'Contenuto in arrivo: il cliente fornirà il testo di questa tappa.' },
+  { label: 'INSANITYLAB OGGI', text: 'Contenuto in arrivo: il cliente fornirà il testo di questa tappa.' },
+];
+---
+<section class="section">
+  <div class="container">
+    <div class="section-heading">
+      <h2>Storylab</h2>
+      <p>Scopri la nostra storia: come nasce InsanityLab, perché abbiamo deciso di creare qualcosa di diverso e chi sono i visionari che hanno trasformato questa idea in un nuovo modo di vivere benessere, movimento e salute.</p>
+    </div>
+    <div class="tl">
+      <h3 class="tl__label">INSANITYLAB 2021-2024</h3>
+      <p>{openText}</p>
+      {stages.map((s) => (
+        <details class="tl__stage">
+          <summary>+ {s.label}</summary>
+          <p>{s.text}</p>
+        </details>
+      ))}
+    </div>
+  </div>
+</section>
+
+<style>
+  .tl { max-width: 720px; margin-inline: auto; }
+  .tl__label { text-transform: uppercase; letter-spacing: .16em; font-size: .9rem; }
+  .tl__stage { border-top: 1px solid #e4ded6; padding-block: 14px; }
+  .tl__stage summary { cursor: pointer; font-family: var(--font-heading); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-heading); list-style: none; }
+  .tl__stage summary::-webkit-details-marker { display: none; }
+</style>