website/src/routes/+page.svelte

<script lang="ts">
	import { env } from '$env/dynamic/public';
	import Countdown from '$lib/components/Countdown/Countdown.svelte';
	import { Clock, User, WrenchScrewdriver } from 'svelte-heros-v2';
	import Crosshairs from '$lib/components/CustomIcons/Crosshairs.svelte';
	import Skull from '$lib/components/CustomIcons/Skull.svelte';
	import type { PageData } from './$types';

	let 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 :)'
		}
	];

	export let data: PageData;
</script>

<svelte:head>
	<title>Craftattack</title>
</svelte:head>

<div class="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 items-center xl:items-start w-full xl:h-3/4 my-10">
			<img src="{env.PUBLIC_BASE_PATH}/img/craftattack.webp" alt="Craftattack 7" />
			<div class="flex flex-col gap-5 lg:gap-14 w-full mt-2 lg:mt-5 lg:w-10/12 h-full">
				<div>
					<div class="divider" />
					<div class="flex flex-col md:flex-row xl:flex-col gap-5">
						{#each information as info}
							<div>
								<h4 class="text-black dark:text-white mb-1">{info.title}</h4>
								<p>{info.description}</p>
							</div>
						{/each}
					</div>
					<div class="divider" />
				</div>
				<div class="flex justify-center">
					<a
						class="btn btn-outline btn-accent hover:bg-white"
						href="{env.PUBLIC_BASE_PATH}/register"
						>{data.register_enabled ? '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="{env.PUBLIC_BASE_PATH}/img/bg.webp" alt="" />
	</div>
	<div class="hidden xl:flex justify-center absolute bottom-12 right-0 w-[60%]">
		<Countdown end={Date.parse(env.PUBLIC_START_DATE)} />
	</div>
</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={`${env.PUBLIC_BASE_PATH}/team`}>Team</a> von Minecraft-Enthusiasten,
				das bereits im 6. 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(env.PUBLIC_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 xl:flex-row justify-center items-center py-20 bg-base-100">
	<div>
		<h3 class="text-center text-2xl mb-6">2023 in Zahlen</h3>
		<div class="flex flex-col lg:flex-row gap-4">
			<div class="stats stats-vertical xl:stats-horizontal shadow">
				<div class="stat">
					<div class="stat-figure">
						<WrenchScrewdriver />
					</div>
					<div class="stat-title">Abgebaute Blöcke</div>
					<div class="stat-value">35M</div>
					<div class="stat-desc"><span class="underline">9.6M</span> davon Stein</div>
				</div>
				<div class="stat">
					<div class="stat-figure">
						<User />
					</div>
					<div class="stat-title">Teilnehmer</div>
					<div class="stat-value">148</div>
				</div>
			</div>
			<div class="stats stats-vertical xl:stats-horizontal shadow h-min xl:h-[initial]">
				<div class="stat">
					<div class="stat-figure">
						<Clock />
					</div>
					<div class="stat-title">Gesamtspielzeit</div>
					<div class="stat-value">246 Tage</div>
				</div>
			</div>
			<div class="stats stats-vertical xl:stats-horizontal shadow">
				<div class="stat">
					<div class="stat-figure">
						<Crosshairs />
					</div>
					<div class="stat-title">Getötete Mobs</div>
					<div class="stat-value">1.8M</div>
				</div>
				<div class="stat">
					<div class="stat-figure">
						<Skull />
					</div>
					<div class="stat-title">Spieler Tode</div>
					<div class="stat-value">3054</div>
					<div class="stat-desc"><span class="underline">552</span> davon durch andere Spieler</div>
				</div>
			</div>
		</div>
	</div>
</div>

<style>
	@keyframes -global-pleaseINeedAttention {
		0% {
			margin-bottom: 15px;
			opacity: 0;
		}
		40% {
			opacity: 1;
		}
		80% {
			margin-bottom: -15px;
			opacity: 0;
		}
		100% {
			opacity: 0;
		}
	}
</style>