feat: add GSAP animations to signup, login, and dashboard pages; include Attachment serializer in backend

frontend/src/routes/dashboard/+page.svelte

@@ -2,6 +2,57 @@
 	import AdventureCard from '$lib/components/AdventureCard.svelte';
 	import type { PageData } from './$types';
 	import { t } from 'svelte-i18n';
+	import { onMount } from 'svelte';
+	import { gsap } from 'gsap';
+
+	// Initial animation for page load
+	onMount(() => {
+		// Stat animations with quicker duration
+		gsap.from('.stat', {
+			opacity: 0,
+			y: 50,
+			duration: 0.6, // Quicker animation duration
+			stagger: 0.1, // Faster staggering between elements
+			ease: 'power2.out' // Slightly sharper easing for quicker feel
+		});
+
+		gsap.from('.stat-title', {
+			opacity: 0,
+			x: -50, // Smaller movement for quicker animation
+			duration: 0.6, // Quicker animation duration
+			stagger: 0.1, // Faster staggering
+			ease: 'power2.out'
+		});
+
+		// Stat values with faster reveal and snappier effect
+		gsap.from('.stat-value', {
+			opacity: 0,
+			scale: 0.8, // Slightly less scaling for a snappier effect
+			duration: 1, // Shorter duration
+			stagger: 0.2, // Faster staggering
+			ease: 'power2.out', // Snappier easing
+			delay: 0.3 // Faster delay for quicker sequencing
+		});
+
+		// Adventure card animations with quicker reveal
+		gsap.from('.adventure-card', {
+			opacity: 0,
+			y: 50, // Less movement for snappier feel
+			duration: 0.8, // Quicker duration
+			stagger: 0.1, // Faster staggering
+			ease: 'power2.out',
+			delay: 0.6 // Shorter delay for quicker appearance
+		});
+
+		// Inspiration section with faster bounce effect
+		gsap.from('.inspiration', {
+			opacity: 0,
+			scale: 0.7, // Less scale for snappier effect
+			duration: 1, // Slightly quicker duration
+			ease: 'elastic.out(0.75, 0.5)', // Snappier bounce
+			delay: 1 // Reduced delay for quicker animation
+		});
+	});
 
 	export let data: PageData;
 
@@ -19,9 +70,7 @@
 	<!-- Welcome Message -->
 	<div class="mb-8">
 		<h1 class="text-4xl font-extrabold">
-			{$t('dashboard.welcome_back')}, {user?.first_name
-				? `${user.first_name} ${user.last_name}`
-				: user?.username}!
+			{$t('dashboard.welcome_back')}, {user?.first_name ? `${user.first_name}` : user?.username}!
 		</h1>
 	</div>
 
@@ -62,7 +111,9 @@
 		<h2 class="text-3xl font-semibold mb-4">{$t('dashboard.recent_adventures')}</h2>
 		<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
 			{#each recentAdventures as adventure}
-				<AdventureCard {adventure} user={data.user} readOnly />
+				<div class="adventure-card">
+					<AdventureCard {adventure} user={data.user} readOnly />
+				</div>
 			{/each}
 		</div>
 	{/if}
@@ -70,7 +121,7 @@
 	<!-- Inspiration if there are no recent adventures -->
 	{#if recentAdventures.length === 0}
 		<div
-			class="flex flex-col items-center justify-center bg-neutral shadow p-8 mb-8 rounded-lg text-neutral-content"
+			class="inspiration flex flex-col items-center justify-center bg-neutral shadow p-8 mb-8 rounded-lg text-neutral-content"
 		>
 			<h2 class="text-3xl font-semibold mb-4">{$t('dashboard.no_recent_adventures')}</h2>
 			<p class="text-lg text-center">

frontend/src/routes/login/+page.svelte

@@ -15,6 +15,29 @@
 	import OpenIdConnect from '~icons/mdi/openid';
 
 	import { page } from '$app/stores';
+	import { gsap } from 'gsap'; // Import GSAP
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		gsap.from('.card', {
+			opacity: 0,
+			y: 50,
+			duration: 1,
+			ease: 'power3.out'
+		});
+		gsap.from('.text-center', {
+			opacity: 0,
+			x: -50,
+			duration: 1,
+			ease: 'power2.out'
+		});
+		gsap.from('.input', {
+			opacity: 0,
+			y: 30,
+			duration: 1,
+			ease: 'power2.out'
+		});
+	});
 
 	import ImageInfoModal from '$lib/components/ImageInfoModal.svelte';
 	import type { Background } from '$lib/types.js';

frontend/src/routes/signup/+page.svelte

@@ -4,6 +4,29 @@
 
 	export let data;
 	console.log(data);
+	import { gsap } from 'gsap'; // Import GSAP
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		gsap.from('.card', {
+			opacity: 0,
+			y: 50,
+			duration: 1,
+			ease: 'power3.out'
+		});
+		gsap.from('.text-center', {
+			opacity: 0,
+			x: -50,
+			duration: 1,
+			ease: 'power2.out'
+		});
+		gsap.from('.input', {
+			opacity: 0,
+			y: 30,
+			duration: 1,
+			ease: 'power2.out'
+		});
+	});
 
 	import FileImageBox from '~icons/mdi/file-image-box';