initial commit

src/pages/index.astro

@@ -0,0 +1,89 @@
+---
+import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
+import Scroll from '@components/website/index/Scroll.svelte';
+import Teams from '@app/webite/index/Teams.svelte';
+import Countdown from '@components/website/index/Countdown.svelte';
+import Varo from '@assets/img/varo.webp';
+import Background from '@assets/img/background.webp';
+import { START_DATE } from 'astro:env/client';
+import { getSetting, SettingKey } from '@util/settings';
+import { db } from '@db/database.ts';
+
+const teams = await db.getTeams({});
+const deaths = await db.getDeaths({});
+
+const signupEnabled = await getSetting(db, SettingKey.SignupEnabled, false);
+
+const information = [
+  {
+    title: 'Was ist Varo?',
+    description:
+      'Varo ist ein spannendes Vanilla-Minecraft-PvP-Projekt, bei dem Zweier-Teams im Kampf ums Überleben gegeneinander antreten. Wer stirbt – ganz gleich auf welche Weise – scheidet endgültig aus. Das letzte verbleibende Team gewinnt Varo!'
+  },
+  {
+    title: 'Warum Varo?',
+    description:
+      'Varo 5 ist unser erstes großes Sommerprojekt – ein PvP-Format, das für frische Abwechslung sorgt und die Wartezeit auf das nächsten CraftAttack verkürzt.\n' +
+      'Tatsächlich ist es schon das fünfte Varo – auch wenn das viele überraschen dürfte.\n' +
+      'Zum ersten Mal veranstalten wir es jedoch in dieser offenen Form für alle Teilnehmenden.\n' +
+      'Wenn es euch gefällt, könnte Varo künftig als feste Sommerreihe weitergeführt werden.\n' +
+      'Und natürlich gilt: Im Winter sehen wir uns wie gewohnt bei CraftAttack wieder!'
+  },
+  {
+    title: 'Wer kann mitspielen?',
+    description:
+      'Alle Spieler mit einem Minecraft Java-Account sind herzlich eingeladen, mitzumachen. Wenn du dabei sein willst, brauchst du nur einen Teampartner – gemeinsam könnt ihr euch direkt hier auf unserer Website anmelden.'
+  }
+];
+---
+
+<WebsiteLayout title="Varo 5">
+  <div class="bg-base-200 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">
+        <div class="flex flex-col w-full mt-2 lg:mt-5 lg:w-10/12 h-full">
+          <div class="w-2/3 m-auto">
+            <img src={Varo.src} alt="Varo 5" />
+          </div>
+          <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>
+        </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>
+
+  <div class="fixed bottom-0 right-0 m-5">
+    <Scroll href="#teams" client:load />
+  </div>
+
+  <div class="bg-base-100 flex flex-col space-y-10 items-center py-10">
+    <h2 id="teams" class="text-4xl">Teams</h2>
+    <Teams {teams} {deaths} />
+  </div>
+</WebsiteLayout>