Add components and improve error page

src/lib/components/ui/Textbox.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+    import { fade } from 'svelte/transition';
+    import type { HTLMInputAttributes } from 'svelte/elements';
+
+    interface Props extends HTMLInputAttributes {
+        value?: string;
+        label?: string;
+        placeholder?: string;
+        type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
+        error?: string;
+        uppercase?: boolean;
+        [key: string]: any;
+    }
+
+    let {
+        value = $bindable(''),
+        label,
+        placeholder = '',
+        type = 'text',
+        error = '',
+        uppercase = false,
+        ...rest
+    }: Props = $props();
+
+    let isFocussed = $state(false);
+</script>
+
+<div class="input-wrapper" class:focussed={isFocussed} class:has-error={!!error}>
+    {#if label}
+        <label for="adaptive-input">{label}</label>
+    {/if}
+
+    <input
+        id="adaptive-input"
+        class:all-caps={uppercase}
+        {type}
+        {placeholder}
+        bind:value={value}
+        onfocus={() => isFocussed = true}
+        onblur={() => isFocussed = false}
+        {...rest}
+    />
+
+    {#if error}
+        <span class="error-message" transition:fade>{error}</span>
+    {/if}
+</div>
+
+<style>
+    .input-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        width: 100%;
+        font-family: 'URW Gothic', sans-serif;
+    }
+
+    label {
+        font-size: 0.9rem;
+        font-weight: 400;
+        color: var(--color-title)
+    }
+
+    input {
+        min-height: 48px;
+        padding: 0 16px;
+        background-color: var(--color-title);
+        border: 2px solid transparent;
+        border-radius: 20px;
+        color: var(--color-bg-dark);
+        font-size: 1.5rem;
+        transition: all 0.2s ease-in-out;
+        outline: none;
+        text-align: center;
+    }
+
+    .all-caps {
+        text-transform: uppercase;
+    }
+
+    .focussed input {
+        border-color: var(--color-bg-light);
+    }
+
+    .has-error input {
+        border-color: #ff4d4d;
+    }
+
+    .error-message {
+        color: #ff4d4d;
+        font-size: 1rem;
+        text-align: center;
+    }
+</style>