add panellum to bundle

create card event component
fix heading levels card event

web/src/components/Cards/CardEvent.astro

@@ -0,0 +1,32 @@
+---
+import type { Event } from "@/lib/events-api";
+import Card from "../Card.astro";
+
+type Props = {
+  event: Event;
+};
+
+const { event } = Astro.props;
+---
+
+<Card class="" padding={false}>
+  <div class="bg-primary rounded-t-card p-card">
+    <h3 class="text-neutral">
+      <span class="block font-medium">
+        {event.start.toLocaleDateString("de-DE", { year: "numeric" })}
+      </span>
+      <span class="block font-bold text-4xl">
+        {
+          event.start.toLocaleDateString("de-DE", {
+            month: "long",
+            day: "numeric",
+          })
+        }
+      </span>
+    </h3>
+  </div>
+  <div class="p-card">
+    <h3>{event.title}</h3>
+    <Fragment class="text-secondary" set:html={event.description} />
+  </div>
+</Card>

web/src/components/Layout/Header.astro

@@ -16,7 +16,12 @@ import { Menu } from "lucide-astro";
         <h2 class="text-3xl font-extrabold">vspace.one</h2>
       </a>
     </div>
-    <Button variant="default" class="lg:hidden" id="nav-button">
+    <Button
+      aria-label="Blendet die Navigation ein oder aus"
+      variant="default"
+      class="lg:hidden"
+      id="nav-button"
+    >
       <Menu />
     </Button>
     <div

web/src/sections/Events.astro

@@ -1,5 +1,5 @@
 ---
-import Card from "@/components/Card.astro";
+import CardEvent from "@/components/Cards/CardEvent.astro";
 import Heading from "@/components/Heading.astro";
 import { getEvents } from "@/lib/events-api";
 
@@ -8,25 +8,5 @@ const events = await getEvents();
 
 <Heading>Events</Heading>
 <div class="grid md:grid-cols-1 lg:grid-cols-2 gap-main">
-  {
+  {events.map((e) => <CardEvent event={e} />)}
-    events.map((e) => (
-      <Card class="" padding={false}>
-        <div class="bg-primary rounded-t-card p-card">
-          <h5 class="text-neutral">
-            {e.start.toLocaleDateString("de-DE", { year: "numeric" })}
-          </h5>
-          <h2 class="text-4xl text-neutral">
-            {e.start.toLocaleDateString("de-DE", {
-              month: "long",
-              day: "numeric",
-            })}
-          </h2>
-        </div>
-        <div class="p-card">
-          <h3>{e.title}</h3>
-          <Fragment class="text-secondary" set:html={e.description} />
-        </div>
-      </Card>
-    ))
-  }
 </div>

web/src/sections/LandingHeader.astro

@@ -38,13 +38,10 @@ import { Image } from "astro:assets";
       src="/pic/panorama/maschinenraum_half.jpg"
       mode="pano"></!little-planet-->
   </div>
-  <script
-    is:inline
-    type="text/javascript"
-    src="https://cdn.pannellum.org/2.3/pannellum.js"></script>
   <script>
     import { animate } from "motion";
     import { ease } from "@unom/style";
+    import "pannellum";
 
     const init = () => {
       const panoBg = document.getElementById("pano-bg")!;