🌐 Added footer to translations

frontend/src/lib/footer.svelte

@@ -5,35 +5,36 @@
   -->
 <script lang="ts">
 	import LanguageToggle from './language-toggle.svelte';
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
 </script>
 
 <footer class="text-center text-white border-black w-screen">
 	<div class="grid grid-cols-12 w-full pt-4 bg-gray-700 pb-2">
 		<p class="col-start-3 col-end-11 text-center w-full">
-			Made with ❤️ by
-			<a
-				href="https://mawoka.eu?utm_source=ClassQuiz&utm_medium=footer"
-				target="_blank"
-				class="hover:underline bg-clip-text text-transparent bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f]"
-				>Mawoka</a
-			>
-			and with the help of
-			<a
-				href="/docs/attribution"
-				class="underline text-blue-300 hover:text-blue-500 transition">others</a
-			>.
+			{@html $t('footer.self_ads', {
+				mawoka_link:
+					'<a href="https://mawoka.eu?utm_source=ClassQuiz&utm_medium=footer" target="_blank" class="hover:underline bg-clip-text text-transparent bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f]">Mawoka</a>',
+				others_link: `<a href="/docs/attribution" class="underline text-blue-300 hover:text-blue-500 transition">${$t(
+					'words.other',
+					{ count: 2 }
+				)}</a>`,
+				interpolation: { escapeValue: false }
+			})}
 			<br />
-			If you find this useful, please consider
-			<a
-				href="https://mawoka.eu/donate"
-				target="_blank"
-				class="underline text-blue-300 hover:text-blue-500 transition">Donating</a
-			>.
+
+			{@html $t('footer.donate', {
+				donate_link: `<a href='https://mawoka.eu/donate' target='_blank' class='underline text-blue-300 hover:text-blue-500 transition'>${$t(
+					'words.donating'
+				)}</a>`,
+				interpolation: { escapeValue: false }
+			})}
 			<a
 				href="https://mawoka.eu/donate"
 				target="_blank"
 				class="underline text-blue-300 hover:text-blue-500 transition"
-				>More details are here.</a
+				>{$t('footer.more_details_here')}.</a
 			>
 		</p>
 		<div