partially refactor components to ui package

components/CenterBox.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<div class="min-h-screen items-center justify-center sm:flex">
+	<main class="m-4 max-w-(--breakpoint-sm) sm:mb-[5%] sm:w-full lg:max-w-[950px]">
+		{@render children()}
+	</main>
+</div>