🌐 Added i18next

frontend/src/routes/index.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
 	import { navbarVisible } from '$lib/stores';
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
 
 	navbarVisible.set(true);
 
@@ -15,26 +18,23 @@
 </script>
 
 <svelte:head>
-	<title>ClassQuiz - Home</title>
-	<meta
-		name="description"
-		content="ClassQuiz is a quiz app like KAHOOT! for students, which is open source and free to use."
-	/>
+	<title>ClassQuiz - {$t('index_page.meta.title')}</title>
+	<meta name="description" content={$t('index_page.meta.description')} />
 </svelte:head>
 
 <section>
 	<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>
+		<p class="text-xl mt-4">{$t('index_page.slogan')}</p>
 	</div>
 </section>
 
 <section id="stats">
 	<div class="text-center pt-48 snap-y">
-		<h1 class="sm:text-6xl text-4xl">Stats</h1>
+		<h1 class="sm:text-6xl text-4xl">{$t('index_page.stats')}</h1>
 		<p class="text-xl pt-4">
 			{#await getStats() then stats}
-				There are already <span class="underline">{stats.user_count}</span> users and
+				There are already <span class="underline">{stats.user_count}</span> users and <!-- TODO: Add translation -->
 				<span class="underline">{stats.quiz_count}</span> quizzes on ClassQuiz.
 			{/await}
 		</p>
@@ -42,11 +42,11 @@
 </section>
 <section id="features">
 	<div class="text-center pt-24 snap-y">
-		<h1 class="sm:text-6xl text-4xl">Features</h1>
+		<h1 class="sm:text-6xl text-4xl">{$t('index_page.features')}</h1>
 		<p class="text-xl pt-4">
-			ClassQuiz is a quiz-platform that allows you to create and manage quizzes.
+			{$t('index_page.features_description.1')}
 			<br />
-			The main feature is a KAHOOT!-import function that allows you to import quizzes from KAHOOT!-quizzes.
+			{$t('index_page.features_description.2')}
 		</p>
 	</div>
 </section>