extremely simple register page

src/lib/components/extra/Title.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+    const {size}: {size: string} = $props();
+</script>
+<div class="text-{size || "2xl"} bg-clip-text text-transparent bg-linear-to-r from-amber-500 to-orange-500">
+    chat.sad.ovh
+</div>

src/routes/+page.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
+	import Title from "$lib/components/extra/Title.svelte";
 	import Button from "$lib/components/ui/button/button.svelte";
 </script>
 
 <div class="p-6 md:w-1/2">
-    <div class="pb-2 text-5xl bg-clip-text text-transparent bg-linear-to-r from-amber-500 to-orange-500">
-        chat.sad.ovh
-    </div>
-
+    <Title size="5xl"></Title>
     <div class="pb-2">A extremely simple chatting application. Supports mobile devices (as a PWA), and also works on almost every single screen size (responsive design!)</div>
 
     <div class="pb-2">
@@ -32,6 +30,6 @@
     </div>
 
     <div class="flex flex-col gap-3 w-[calc(80%)]">
-        <Button>Log in</Button> <Button>Register</Button>
+        <Button href='/login'>Log in</Button> <Button href='/register'>Register</Button>
     </div>
 </div>

src/routes/register/+page.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import Title from "$lib/components/extra/Title.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
+	import Input from "$lib/components/ui/input/input.svelte";
+</script>
+
+<div class="flex min-h-screen flex-col items-center justify-center gap-2">
+    <div class='w-1/2 p-2 bg-secondary rounded-md '>
+        <div class="text-center pb-2">
+            <Title size="2xl"></Title>
+        </div>
+
+        <Input class="mb-2" type="text" placeholder="Username"></Input>
+        <Input class="mb-2" type="email" placeholder="E-mail"></Input>
+
+        <Input class="mb-2" type="password" placeholder="Password"></Input>
+
+        <Button class="w-full">Register</Button>
+    </div>
+</div>