rework index page

src/routes/+page.svelte

@@ -2,48 +2,107 @@
 	import { env } from '$env/dynamic/public';
 	import Countdown from '$lib/components/Countdown/Countdown.svelte';
 	import { IconOutline } from 'svelte-heros-v2';
+
+	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 :)'
+		}
+	];
 </script>
 
 <svelte:head>
 	<title>Craftattack</title>
 </svelte:head>
 
-<div class="absolute top-0 left-0 h-screen w-full overflow-hidden">
-	<!-- svelte-ignore a11y-media-has-caption -->
-	<video
-		class="h-full w-full blur-sm object-cover"
-		autoplay
-		loop
-		src="{env.PUBLIC_BASE_PATH}/vid/background.mp4"
-	/>
-	<div class="absolute top-0 left-0 w-full h-full bg-black opacity-70" />
-</div>
-<div class="absolute top-0 w-full">
-	<div class="relative h-screen">
-		<div class="flex flex-col items-center w-full pt-36">
-			<img
-				class="w-11/12 sm:w-3/4 pointer-events-none"
-				src="{env.PUBLIC_BASE_PATH}/img/craftattack.webp"
-				alt="Craftattack 6"
-				width="1905"
-				height="188"
-			/>
-			<div class="mt-4 sm:mt-10 lg:mt-16">
-				<Countdown end={Date.parse(env.PUBLIC_START_DATE)} />
+<div class="flex flex-col min-h-screen h-screen relative">
+	<div class="sm:absolute top-0 left-0 flex items-center xl:w-1/2 px-6 sm:px-10 h-full">
+		<div class="flex flex-col items-center xl:items-start w-full xl:h-3/4">
+			<img src="{env.PUBLIC_BASE_PATH}/img/craftattack.webp" alt="Craftattack 6" />
+			<div class="flex flex-col justify-around w-full 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-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">Jetzt registrieren</a
+					>
+				</div>
 			</div>
 		</div>
-		<div class="absolute bottom-4 sm:bottom-6 lg:bottom-10 w-full flex justify-center">
-			<button
-				on:click={() => {
-					window.scrollTo(0, window.innerHeight);
-				}}
-			>
-				<div class="border-2 border-white rounded-full w-10 h-16 flex justify-center items-center">
-					<div class="animate-[pleaseINeedAttention_1.5s_ease-in-out_infinite]">
-						<IconOutline name="chevron-double-down-outline" width="34" height="34" />
-					</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-white mb-8">Über uns</h2>
+			<p>
+				Wir sind ein kleines Team 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="underline">27.12.2023</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">2022 in Zahlen</h3>
+		<div class="stats stats-vertical sm:stats-horizontal shadow">
+			<div class="stat">
+				<div class="stat-figure">
+					<img
+						class="w-8 h-8"
+						src="{env.PUBLIC_BASE_PATH}/img/netherrack.webp"
+						alt=""
+						title="Netherrack"
+					/>
 				</div>
-			</button>
+				<div class="stat-title">Meistabgebauter Block</div>
+				<div class="stat-value">2.3M</div>
+			</div>
+			<div class="stat">
+				<div class="stat-figure">
+					<IconOutline name="user-outline" />
+				</div>
+				<div class="stat-title">Angemeldete Spieler</div>
+				<div class="stat-value">156</div>
+			</div>
 		</div>
 	</div>
 </div>