Add components and improve error page

src/lib/components/ui/Button.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+	type ButtonColor = 'brand' | 'accent' | 'bg';
+
+	interface Props {
+		children: import('svelte').Snippet;
+		href?: string;
+		color?: ButtonColor;
+		onclick?: (e: MouseEvent) => void;
+		[key: string]: any;
+	}
+
+	let { children, href, color = 'bg', onclick, ...rest }: Props = $props();
+
+	const isLink = $derived(!!href);
+	const isExternal = $derived(href?.startsWith('http'));
+</script>
+
+{#if isLink}
+	<a
+		{href}
+		class="btn {color}"
+		target={isExternal ? '_blank' : undefined}
+		rel={isExternal ? 'noopener noreferrer' : undefined}
+		{...rest}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button class="btn {color}" {onclick} {...rest}>
+		{@render children?.()}
+	</button>
+{/if}
+
+<style>
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.4rem 1.2rem;
+		width: fit-content;
+		min-width: 90px;
+		min-height: 48px;
+		border: none;
+		border-radius: 20px;
+		cursor: pointer;
+		text-decoration: none;
+		font-family: 'URW Gothic', sans-serif;
+		letter-spacing: 0.05ch;
+		font-size: 1rem;
+		font-weight: 600;
+		transition: all 0.2s;
+		box-shadow: var(--shadow-std);
+		user-select: none;
+		-webkit-user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		touch-action: manipulation;
+	}
+
+	.accent {
+		background-color: var(--color-accent);
+		color: var(--color-title);
+	}
+
+	.brand {
+		background-color: var(--color-brand);
+		color: rgb(30, 30, 30);
+	}
+
+	.bg {
+		background-color: var(--color-bg-light);
+		color: var(--color-title);
+	}
+
+	.btn:hover {
+		filter: brightness(1.5);
+	}
+
+	.btn.active {
+		transform: scale(0.98);
+	}
+</style>