add trailer to homepage

src/pages/index.astro

@@ -4,8 +4,9 @@ import Countdown from '@app/website/index/Countdown.svelte';
 import LiveStats from '@app/website/index/LiveStats.svelte';
 import Craftattack from '@assets/img/craftattack.webp';
 import Background from '@assets/img/background.webp';
-import { START_DATE } from 'astro:env/server';
+import { HOMEPAGE_TRAILER_URL, START_DATE } from 'astro:env/server';
 import { getSetting, SettingKey } from '@util/settings';
+import { siteUrl } from '@util/url.ts';
 import { db } from '@db/database.ts';
 
 const signupEnabled = await getSetting(db, SettingKey.SignupEnabled, false);
@@ -72,6 +73,39 @@ const information = [
     </div>
   </div>
 
+  {HOMEPAGE_TRAILER_URL && (
+    <section class="bg-base-300 w-full px-4 py-12" aria-labelledby="trailer-heading">
+      <div class="mx-auto flex items-center w-full max-w-7xl gap-30">
+        <iframe
+          class="aspect-video w-full border-0"
+          src={HOMEPAGE_TRAILER_URL}
+          title="CraftAttack 9 Trailer"
+          allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
+          allowfullscreen
+          loading="lazy"
+        ></iframe>
+
+        <div class="hidden items-center gap-2 lg:flex" aria-hidden="true">
+          <span class="h-60 w-1 rotate-12 rounded-full bg-base-content/30"></span>
+          <span class="h-60 w-1 rotate-12 rounded-full bg-base-content/30"></span>
+        </div>
+
+        <div class="space-y-4">
+          <h2 id="trailer-heading" class="text-2xl font-bold">
+            CraftAttack geht in die neunte Runde - und du kannst dabei sein!
+          </h2>
+          <p class="leading-relaxed text-base-content/80">
+            Die Teilnahme ist kostenlos. Am 27. Dezember 2026 startet CraftAttack 9 – die Anmeldung ist ab dem 1.
+            Dezember 2026 möglich.
+          </p>
+          <p class="leading-relaxed text-base-content/80">
+            Alle Informationen zum Projekt und zur Teilnahme findest du unter hier.
+          </p>
+        </div>
+      </div>
+    </section>
+  )}
+
   <div class="flex justify-center py-20 bg-base-200">
     <div class="card bg-base-100 shadow-lg w-11/12 xl:w-5/12 p-10">
       <div>