Add custom error page component for handling errors

- Created a new Svelte component `+error.svelte` to display user-friendly error messages.
- The component differentiates between 404 errors and other error statuses, providing appropriate feedback and navigation options.
- Integrated localization support for error messages using `svelte-i18n`.

frontend/src/routes/+error.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { t } from 'svelte-i18n';
+	import { Home, AlertCircle } from 'lucide-svelte';
+
+	const status = $page.status;
+	const message = $page.error?.message || $t('common.errorOccurred');
+
+	const is404 = status === 404;
+</script>
+
+<div class="flex flex-col items-center justify-center py-20 px-4 text-center">
+	<div class="relative mb-8">
+		<div class="absolute -inset-4 bg-primary/10 blur-3xl rounded-full"></div>
+		{#if is404}
+			<h1 class="text-9xl font-black text-primary/20 relative select-none">404</h1>
+		{:else}
+			<AlertCircle class="w-32 h-32 text-destructive relative opacity-20" />
+		{/if}
+	</div>
+
+	<h2 class="text-3xl font-bold mb-4">
+		{#if is404}
+			{$t('common.pageNotFound')}
+		{:else}
+			{$t('common.error')} {status}
+		{/if}
+	</h2>
+
+	<p class="text-muted-foreground max-w-md mb-8">
+		{#if is404}
+			{$t('common.pageNotFoundDesc')}
+		{:else}
+			{message}
+		{/if}
+	</p>
+
+	<a
+		href="/"
+		class="inline-flex items-center gap-2 bg-primary text-primary-foreground px-6 py-3 rounded-xl font-semibold hover:opacity-90 transition-opacity shadow-lg shadow-primary/20"
+	>
+		<Home class="w-5 h-5" />
+		{$t('common.backHome')}
+	</a>
+</div>