add basic index site

src/app.css

@@ -11,10 +11,29 @@
 	@font-face {
 		font-family: 'Roboto';
 		src: url('/fonts/Roboto-Regular.ttf') format('truetype');
+		font-weight: normal;
+	}
+
+	@font-face {
+		font-family: 'Roboto';
+		src: url('/fonts/Roboto-Medium.ttf') format('truetype');
+		font-weight: normal;
+	}
+
+	@font-face {
+		font-family: 'Roboto';
+		src: url('/fonts/Roboto-Bold.ttf') format('truetype');
+		font-weight: bold;
+	}
+
+	@font-face {
+		font-family: 'Roboto';
+		src: url('/fonts/Roboto-Black.ttf') format('truetype');
+		font-weight: 900;
 	}
 
 	html {
-		@apply font-roboto;
+		@apply font-roboto scroll-smooth;
 	}
 
 	h1,

src/lib/components/Countdown/Countdown.svelte

@@ -27,26 +27,26 @@
 </script>
 
 <div class="grid grid-flow-col gap-5 text-center auto-cols-max">
-	<div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
+	<div class="flex flex-col">
-		<span class="countdown font-mono text-3xl sm:text-5xl">
+		<span class="countdown font-mono text-3xl sm:text-6xl">
 			<span class="m-auto" style="--value:{days};" />
 		</span>
 		Tage
 	</div>
-	<div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
+	<div class="flex flex-col">
-		<span class="countdown font-mono text-3xl sm:text-5xl">
+		<span class="countdown font-mono text-3xl sm:text-6xl">
 			<span class="m-auto" style="--value:{hours};" />
 		</span>
 		Stunden
 	</div>
-	<div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
+	<div class="flex flex-col">
-		<span class="countdown font-mono text-3xl sm:text-5xl">
+		<span class="countdown font-mono text-3xl sm:text-6xl">
 			<span class="m-auto" style="--value:{minutes};" />
 		</span>
 		Minuten
 	</div>
-	<div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
+	<div class="flex flex-col">
-		<span class="countdown font-mono text-3xl sm:text-5xl">
+		<span class="countdown font-mono text-3xl sm:text-6xl">
 			<span class="m-auto" style="--value:{seconds};" />
 		</span>
 		Sekunden

src/routes/+layout.svelte

@@ -1,26 +1,5 @@
 <script lang="ts">
 	import '../app.css';
-
-	import { env } from '$env/dynamic/public';
 </script>
 
-<nav class="navbar fixed top-0 bg-base-100 h-12 z-40">
+<slot />
-	<div class="navbar-start h-full">
-		<a class="h-full" href="{env.PUBLIC_BASE_PATH}/">
-			<img
-				class="rounded h-full"
-				src="{env.PUBLIC_BASE_PATH}/img/craftattack-logo.webp"
-				alt="Logo"
-			/>
-		</a>
-	</div>
-	<div class="navbar-center flex space-x-20">
-		<a class="link" href="{env.PUBLIC_BASE_PATH}/register">Anmelden</a>
-		<a class="link" href="{env.PUBLIC_BASE_PATH}/rules">Regeln</a>
-	</div>
-	<div class="navbar-end" />
-</nav>
-
-<main class="flex min-h-[calc(100vh-64px-16px)] mt-16 mb-4">
-	<slot />
-</main>

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { env } from '$env/dynamic/public';
 	import Countdown from '$lib/components/Countdown/Countdown.svelte';
+	import { IconOutline } from 'svelte-heros-v2';
 </script>
 
 <svelte:head>
@@ -10,3 +11,60 @@
 <div class="w-full flex justify-center items-center">
 	<Countdown end={Date.parse(env.PUBLIC_START_DATE)} />
 </div>
+
+<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"
+			/>
+			<div class="mt-4 sm:mt-10 lg:mt-16">
+				<Countdown end={Date.parse(env.PUBLIC_START_DATE)} />
+			</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>
+			</button>
+		</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>