feat: add transitions

frontend/src/lib/components/PageTransition.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { fly } from 'svelte/transition';
+	export let url = '';
+</script>
+
+{#key url}
+	<div
+		in:fly={{ x: -5, duration: 500, delay: 500 }}
+		out:fly={{ x: 5, duration: 500 }}
+		class="absolute bg-inherit w-full"
+	>
+		<slot />
+	</div>
+{/key}

frontend/src/routes/+layout.js

@@ -0,0 +1,6 @@
+/** @type {import('./$types').PageLoad} */
+export const load = async ({ url }) => {
+	return {
+		url: url.pathname
+	};
+};

frontend/src/routes/+layout.svelte

@@ -1,3 +1,9 @@
+<script lang="ts">
+	import PageTransition from '$lib/components/PageTransition.svelte';
+
+	export let data: { url: string };
+</script>
+
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" />
 <link
@@ -5,7 +11,9 @@
 	rel="stylesheet"
 />
 
-<slot />
+<PageTransition url={data.url}>
+	<slot />
+</PageTransition>
 
 <style windi:preflights:global windi:safelist:global>
 	:global(html) {