website/src/pages/index.astro

---
import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
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 { HOMEPAGE_TRAILER_URL, START_DATE } 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 statisticsEnabled = await getSetting(db, SettingKey.LiveStatisticsEnabled, false);

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 9">
  <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 z-1">
      <div class="flex flex-col items-center xl:items-start w-full xl:h-3/4 my-10">
        <img src={Craftattack.src} alt="CraftAttack 9" />
        <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="xl:hidden absolute top-0 left-0 h-full w-full blur-xs brightness-25">
      <img src={Background.src} alt="" loading="lazy" class="h-full w-full object-none" />
    </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={new Date(START_DATE)} client:load />
    </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 flex-col xl:flex-row items-center w-full max-w-360 gap-10 xl:gap-30">
        <div class="w-full max-w-2xl">
          <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>

        <div class="hidden items-center gap-2 xl: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 w-full max-w-3xl">
          <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 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>
        <h2 class="text-3xl text-black dark:text-white mb-8">Über uns</h2>
        <p>
          Wir sind ein kleines{' '}
          <a class="link" href="admins">
            Team
          </a>{' '}
          von Minecraft-Enthusiasten, das bereits im 9. 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>

  <div class="flex flex-col justify-center items-center py-20 bg-base-100">
    {statisticsEnabled && (
      <>
        <LiveStats />
        <div class="divider divider-horizontal mx-auto my-6 h-18" />
      </>
    )}
    <div>
      <h3 class="text-center text-2xl mb-6">2025/2026 in Zahlen</h3>
      <div class="flex flex-col lg:flex-row gap-4">
        <div class="bg-base-200 stats stats-vertical xl:stats-horizontal shadow">
          <div class="stat">
            <div class="stat-figure">
              <span class="iconify iconify-[heroicons--wrench-screwdriver-solid] size-[1.5em]"></span>
            </div>
            <div class="stat-title">Abgebaute Blöcke</div>
            <div class="stat-value">1.41M</div>
            <div class="stat-desc">
              <span class="underline">975K</span> davon Stein
            </div>
          </div>
          <div class="stat">
            <div class="stat-figure">
              <span class="iconify iconify-[heroicons--users-solid] size-[1.5em]"></span>
            </div>
            <div class="stat-title">Teilnehmer</div>
            <div class="stat-value">213</div>
            <div class="stat-desc">&#8203;</div>
          </div>
        </div>
        <div class="bg-base-200 stats stats-vertical xl:stats-horizontal shadow h-min xl:h-[initial]">
          <div class="stat">
            <div class="stat-figure">
              <span class="iconify iconify-[heroicons--clock-solid] size-[1.5em]"></span>
            </div>
            <div class="stat-title">Gesamtspielzeit</div>
            <div class="stat-value">281 Tage</div>
            <div class="stat-desc">&#8203;</div>
          </div>
        </div>
        <div class="bg-base-200 stats stats-vertical xl:stats-horizontal shadow">
          <div class="stat">
            <div class="stat-figure">
              <span class="iconify iconify-[local--crosshairs] size-[1.5em]"></span>
            </div>
            <div class="stat-title">Getötete Monster</div>
            <div class="stat-value">1.16M</div>
            <div class="stat-desc">&#8203;</div>
          </div>
          <div class="stat">
            <div class="stat-figure">
              <span class="iconify iconify-[local--skull] size-[1.5em]"></span>
            </div>
            <div class="stat-title">Spieler Tode</div>
            <div class="stat-value">6351</div>
            <div class="stat-desc">
              <span class="underline">348</span> davon durch andere Spieler
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</WebsiteLayout>