rewrite website

src/pages/index.astro

@@ -0,0 +1,114 @@
+---
+import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
+import Countdown from '@app/website/index/Countdown.svelte';
+import Craftattack from '@assets/img/craftattack.webp';
+import Background from '@assets/img/background.webp';
+import { START_DATE, YOUTUBE_INTRO_LINK } from 'astro:env/server';
+import { getSetting, SettingKey } from '@util/settings';
+import { db } from '@db/database.ts';
+
+const signupEnabled = await getSetting(db, SettingKey.SignupEnabled, false);
+const signupInfoMessage = await getSetting(db, SettingKey.SignupInfoMessage);
+
+const information = [
+  {
+    title: 'Das Projekt',
+    description:
+      'CraftAttack ist ein Vanilla-Minecraft-Projekt, bei dem zahlreiche Spieler im friedlichen Miteinander spielen. Von gemeinsamen Bauvorhaben bis hin zum kollektiven Kampf gegen den Enderdrachen können die vielfältigen Aspekte von Minecraft erkundet werden.'
+  },
+  {
+    title: 'Events',
+    description:
+      'Abwechslungsreiche Events und verschiedene Minispiele sorgen dafür, dass es nie langweilig wird und garantieren somit jede Menge Spielspaß.'
+  },
+  {
+    title: 'Voraussetzungen',
+    description:
+      'Jeder ist willkommen und kann mitspielen. Dazu benötigst Du nur einen Minecraft-Account und schon bist Du Teil unser Community :)'
+  }
+];
+---
+
+<WebsiteLayout title="CraftAttack 8">
+  <div class="bg-base-100 flex flex-col min-h-screen relative">
+    <div class="flex items-center xl:w-1/2 px-6 sm:px-10 min-h-screen h-full">
+      <div class="flex flex-col w-full xl:h-3/4 my-10">
+        <img src={Craftattack.src} alt="CraftAttack 8" />
+        <div class="flex flex-col w-full mt-2 lg:mt-5 lg:w-10/12 h-full">
+          <div>
+            <div class="divider"></div>
+            <div class="flex flex-col md:flex-row xl:flex-col gap-5">
+              {
+                information.map((info) => (
+                  <div>
+                    <h4 class="mb-1 font-bold">{info.title}</h4>
+                    <p>{info.description}</p>
+                  </div>
+                ))
+              }
+            </div>
+            <div class="divider"></div>
+          </div>
+          <div class="flex justify-center">
+            <a class="btn btn-outline btn-accent hover:bg-white" href="signup"
+              >{signupEnabled ? 'Jetzt registrieren' : 'Infos zur Anmeldung'}</a
+            >
+          </div>
+          {signupInfoMessage && <span class="text-center text-xs text-base-content/80 mt-3">{signupInfoMessage}</span>}
+        </div>
+      </div>
+    </div>
+    <div
+      class="hidden xl:block absolute top-0 left-0 h-full w-full"
+      style="clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);"
+    >
+      <img src={Background.src} alt="" loading="lazy" width="100%" height="100%" />
+    </div>
+    <div class="hidden xl:flex justify-center absolute bottom-12 right-0 w-[60%]">
+      <Countdown end={Date.parse(START_DATE)} client:load />
+    </div>
+  </div>
+
+  {
+    YOUTUBE_INTRO_LINK && (
+      <div class="bg-base-300 w-full py-12 flex justify-center">
+        <iframe
+          width="624"
+          height="351"
+          src={YOUTUBE_INTRO_LINK}
+          title="YouTube video player"
+          frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          referrerpolicy="strict-origin-when-cross-origin"
+          allowfullscreen
+        />
+      </div>
+    )
+  }
+
+  <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>
+        <h2 class="text-3xl text-black dark:text-white mb-8">Über uns</h2>
+        <p>
+          Wir sind ein kleines <a class="link" href="team">Team</a> von Minecraft-Enthusiasten, das bereits im 8. Jahr in
+          Folge Minecraft CraftAttack organisiert. Jahr für Jahr arbeiten wir daran, das Spielerlebnis zu verbessern und
+          steigeren die Teilnehmerzahl.
+        </p>
+        <p>
+          Unser Ziel bei diesem ab dem <span class="italic"
+            >{
+              new Date(START_DATE).toLocaleString('de-DE', {
+                day: '2-digit',
+                month: 'numeric',
+                year: 'numeric'
+              })
+            }</span
+          >
+          stattfindenden Projekts ist es, sicherzustellen, dass alle Spieler eine großartige Erfahrung haben und alles reibungslos
+          abläuft. Wir freuen uns immer über Anregungen und stehen Dir jederzeit zur Verfügung.
+        </p>
+      </div>
+    </div>
+  </div>
+</WebsiteLayout>