🚸 Added stores for navbar and added feature-overview

frontend/src/lib/navbar.svelte

@@ -70,7 +70,7 @@
 		<li class='py-2'>
 			<a
 				class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
-				href='#install'>Play</a
+				href='/play'>Play</a
 			>
 		</li>
 		<li class='py-2'>

frontend/src/lib/stores.ts

@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+
+
+export const navbarVisible = writable(true);

frontend/src/routes/__layout.svelte

@@ -1,12 +1,18 @@
 <script>
 	import '../app.css';
 	import Navbar from '$lib/navbar.svelte';
+	import { navbarVisible } from '$lib/stores.ts';
 </script>
 
-<Navbar />
+{#if $navbarVisible}
-<div class='pt-16 h-screen'>
+	<Navbar />
-	<slot />
+	<div class='pt-16 h-screen'>
-</div>
+		<slot />
+	</div>
+{:else}
+	<slot></slot>
+{/if}
+
 <style lang='scss'>
   :global(body) {
     background: linear-gradient(to right, #009444, #39b54a, #8dc63f);

frontend/src/routes/account/login.svelte

@@ -21,6 +21,7 @@
 		});
 	}*/
 
+
 	let loginData = {
 		email: '',
 		password: ''

frontend/src/routes/index.svelte

@@ -1,3 +1,21 @@
+<script lang="ts">
+	import {navbarVisible} from '$lib/stores';
+	navbarVisible.set(true);
+</script>
 
-<h1>Welcome to SvelteKit</h1>
+<section>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+	<div class='pt-12 text-center'>
+		<h1 class='sm:text-8xl text-6xl mt-6 marck-script'>ClassQuiz</h1>
+		<p class='text-xl mt-4'>The open-source quiz-platform!</p>
+	</div>
+</section>
+<section id='features'>
+	<div class='text-center pt-48 snap-y'>
+		<h1 class='sm:text-6xl text-4xl'>Features</h1>
+		<p class='text-xl pt-4'>
+			ClassQuiz is a quiz-platform that allows you to create and manage quizzes.
+			<br>
+			Other than that, there are no features.
+		</p>
+	</div>
+</section>

frontend/src/routes/play.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script context='module' lang='ts'>
 	export async function load({ url }) {
 		const token = url.searchParams.get('pin');
 		return {
@@ -9,13 +9,15 @@
 	}
 </script>
 
-<script lang="ts">
+<script lang='ts'>
 	import { socket } from '$lib/socket';
 	import JoinGame from '$lib/play/join.svelte';
 	import type { Answer, QuizData } from '../app';
 	import ShowTitle from '$lib/play/title.svelte';
 	import Question from '$lib/play/question.svelte';
 	import ShowResults from '$lib/play/show_results.svelte';
+	import { navbarVisible } from '$lib/stores';
+
 	// Exports
 	export let game_pin: string;
 
@@ -27,6 +29,7 @@
 	// Variables init
 	let question_index = '';
 	let unique = {};
+	navbarVisible.set(false);
 	let game_pin_valid: boolean;
 	let answer_results: Array<Answer>;
 	let gameData: QuizData;