cook up a simple hero

src/routes/+page.svelte

@@ -1,3 +1,37 @@
-<div class="flex min-h-screen flex-col items-center justify-center gap-2">
-    <h1>test</h1>
+<script lang="ts">
+	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>
+
+    <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">
+        Featurelist:
+        <ul class="list-disc pl-6">
+            <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </li>
+            <li>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</li>
+            <li>when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
+            <li>It has survived not only five centuries, but also the leap into electronic typesetting,</li>
+            <li>remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,</li>
+        </ul>
+    </div>
+
+    <div class="pb-2">
+        Screenshots
+
+        <div class="grid grid-cols-2 grid-rows-2 w-76 gap-2">
+            <img src="https://placehold.co/150x150"/>
+            <img src="https://placehold.co/150x150"/>
+            <img src="https://placehold.co/150x150"/>
+            <img src="https://placehold.co/150x150"/>
+        </div>
+    </div>
+
+    <div class="flex flex-col gap-3 w-[calc(80%)]">
+        <Button>Log in</Button> <Button>Register</Button>
+    </div>
 </div>