feat: build headless theatre laboratory website

frontend/src/components/ShowsSection.astro

@@ -0,0 +1,29 @@
+---
+import type { ShowContent } from "../lib/api";
+interface Props { shows: ShowContent[] }
+const { shows } = Astro.props;
+---
+
+<section class="shows section section-light" id="spettacoli" aria-labelledby="shows-title">
+  <div class="container">
+    <div class="section-heading horizontal-heading">
+      <div><p class="eyebrow">La ricerca incontra il pubblico</p><h2 id="shows-title">Spettacoli e progetti</h2></div>
+      <p>Esiti, attraversamenti e storie nate durante il lavoro in sala.</p>
+    </div>
+    {shows.length ? (
+      <div class="show-grid">
+        {shows.map((show) => (
+          <article class="show-card">
+            <div class="show-image"><img src={show.image.url} alt={show.image.alt} width="700" height="880" loading="lazy" /></div>
+            <div class="show-copy">
+              <p class="show-meta"><span>{show.year}</span>{show.location && <span>{show.location}</span>}</p>
+              <h3>{show.title}</h3>
+              <p>{show.short_description}</p>
+              {show.cast && <p class="muted">{show.cast}</p>}
+            </div>
+          </article>
+        ))}
+      </div>
+    ) : <p class="empty-state">Nuovi spettacoli e progetti sono in preparazione.</p>}
+  </div>
+</section>