first draft

src/pages/index.astro

@@ -3,6 +3,14 @@ import Footer from "../components/Footer.astro"
 import Layout from "../layouts/Layout.astro"
 import {Calendar, ChevronDown} from "@lucide/astro"
 import path from "../utils/path.ts"
+
+const events = [
+    {
+        name: "DIDAYS 2026 Hamburg",
+        path: "/hamburg/2026/",
+        text: "02.-04. Oktober 2026, Kultur Palast Harburg",
+    },
+]
 ---
 
 <Layout>
@@ -16,55 +24,40 @@ import path from "../utils/path.ts"
 
   <div class="bg-base-200 pt-8 pb-16">
     <div class="container p-8 max-w-5xl mx-auto flex flex-col md:flex-row gap-10 items-center md:items-start">
-      <div class="bg-black/20 text-white rounded-2xl min-w-fit p-4 flex flex-col items-center gap-4">
-        <div class="flex flex-col items-center gap-2">
-          <span class="text-xl leading-10 text-center font-bold">
-            02.-04.10.2026
-          </span>
-          <span class="text-lg leading-5 text-center">
-            Freitag 16-21:30 Uhr<br>
-            Samstag 12-21:30 Uhr<br>
-            Sonntag 12-17:30 Uhr<br>
-          </span><br>
-          <a class="link text-xl" href="https://www.kulturpalast-harburg.com">Kultur Palast Harburg</a><br>
-          <span class="text-xl">
-            Eintritt frei
-          </span>
-        </div>
-
-        <div class="motion-safe:aura motion-safe:aura-rainbow">
-          <a href={path(import.meta.env.BASE_URL, "didays2026.ics")}
-             class="btn btn-lg motion-reduce:btn-outline shrink-0"
-             target="_blank">
-            <Calendar/>
-            Im Kalender speichern
-          </a>
-        </div>
-      </div>
-
       <p class="text-xl/8 text-center">
         Ein Wochenende digitale Selbstbestimmung: Handy, Tablet und Laptop: längst geht ohne nichts mehr. Und die Apps
         sammeln Daten und tun ihr Möglichstes, um uns nicht mehr loszulassen.
-        In <a class="link" href={path(import.meta.env.BASE_URL, "/hamburg/2026/programm")}>
-        Vorträgen und Workshops </a> erklären wir, wie man einen alternativen Messenger, ein freies Office oder eine
-        sichere Passwortverwaltung nutzen kann. Und wir informieren über Chancen und Gefahren der digitalen Welt. Kommt
-        vorbei, lernt etwas und diskutiert mit uns!
+        In Vorträgen und Workshops erklären wir, wie man einen alternativen Messenger, ein freies Office oder eine
+        sichere Passwortverwaltung nutzen kann. Und wir informieren über Chancen und Gefahren der digitalen Welt.<br>
+        Kommt vorbei, lernt etwas und diskutiert mit uns!
       </p>
     </div>
   </div>
 
   <div class="bg-base-100 pb-20 w-screen overflow-x-hidden">
     <div class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%]"/>
-    <div class="container p-8 max-w-2xl mx-auto text-center text-xl/8">
-      <p>
-        Der <a class="link" href="https://hamburg.ccc.de">CCC Hansestadt Hamburg e.V.</a>
-        veranstaltet vom 2. bis 4. Oktober zusammen mit der <a class="link" href="https://www.wauland.de">Wau Holland Stiftung</a>,
-        Hamburger Stadtteilinitiativen,
-        Maker- und Hackerspaces und weiteren zivilgesellschaftlichen Organisationen aus der Region die ersten Digital
-        Independence Days in Hamburg.<br><br>
-        Euch erwartet ein Programm rund um digitale Unabhängigkeit: Messenger,
-        Office-Programme, Datenschutz oder die eigene Cloud.
-      </p>
+    <div class="container p-8  mx-auto text-center text-xl/8">
+      <h2 class="text-4xl font-semibold mb-8">
+        Kommende Events
+      </h2>
+      <p>Hier veröffentlichen wir, sobald weitere Events geplant sind</p>
+      <h2 class="text-4xl font-semibold my-8">
+        Vergangene Events
+      </h2>
+      <div class="flex gap-4 overflow-x-auto w-full justify-start py-6">
+          {events.map(event =>
+              <a href={path(import.meta.env.BASE_URL, event.path)}
+                 class="card mx-auto shrink-0 w-96 bg-base-100 card-md shadow-lg border-base-200 border-2">
+                <div class="card-body">
+                  <h2 class="card-title">{event.name}</h2>
+                  <p>{event.text}</p>
+                  <div class="justify-end card-actions">
+                    <button class="btn btn-base-200">Ansehen</button>
+                  </div>
+                </div>
+              </a>,
+          )}
+      </div>
     </div>
   </div>
 
@@ -91,31 +84,6 @@ import path from "../utils/path.ts"
     </div>
   </div>
 
-  <div class="bg-base-100 pb-20">
-    <div class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%]"/>
-
-    <div class="container p-8 max-w-2xl mx-auto">
-      <h2 class="text-4xl font-semibold mb-8">
-        DIDAYS - Ein Wochenende digitale Selbstbestimmung
-      </h2>
-      <p>
-        Am Wochenende vom 2. bis 4. Oktober gibt es diese und noch mehr Themen kompakt: Vorträge, Workshops und
-        Austausch
-        zwischen Interessierten. Neben dem praktischen „Wie“ wollen wir auch über gesellschaftliche und politische
-        Themen
-        reden, wie z.B. den Einfluss von Künstlicher Intelligenz oder die Digitalisierung von Stadt und Verwaltung in
-        Hamburg.
-
-        Wir haben dazu den Kultur Palast Harburg (ehem. Rieckhof) als Location gewinnen können. Von Freitagnachmittag
-        bis
-        Sonntagnachmittag haben Besucher*innen die Möglichkeit, in Vorträgen und Workshops zu erfahren, wie sie sich
-        unabhängiger machen können. Natürlich ist der Eintritt frei.
-        Das Programm ist abgestimmt auf Menschen, die mehr oder minder spontan für ein paar Stunden vorbeikommen und
-        „mal schauen“ möchten.
-      </p>
-    </div>
-  </div>
-
 
   <Footer/>
 </Layout>