proper belter of a fookin page lads

frontend/src/app.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
 @import 'tailwindcss';
 
 @keyframes spin-slower {
@@ -14,6 +15,20 @@
     animation: spin-slower 15s linear infinite;
 }
 
+html,
+body {
+    @apply bg-light-pine-base dark:bg-dark-pine-base;
+    /* or use your color class here */
+    height: 100%;
+    margin: 0;
+}
+
+.lilita-one-regular {
+    font-family: "Lilita One", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
 @theme {
     --color-dark-pine-base: hsl(249deg, 22%, 12%);
     --color-dark-pine-surface: hsl(247deg, 23%, 15%);

frontend/src/lib/components/Room.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-    import { type Room } from "$lib/types"
-    let { room }: { room: Room } = $props()
-</script>
-
-<div class="room flex flex-col items-start gap-2 rounded-lg bg-white p-6 shadow-md">
-    <h2 class="flex items-center gap-2 text-xl font-semibold">
-        {room.name}
-        {#if room.private}
-            <span class="text-gray-500">🔒</span>
-        {/if}
-    </h2>
-    <!-- <span class="text-sm text-gray-600"> -->
-    <!-- {participants} participant{participants === 1 ? "" : "s"} -->
-    <!-- </span> -->
-</div>

frontend/src/lib/components/RoomComponent.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { type Room } from "$lib/types"
+    let { room }: { room: Room } = $props()
+</script>
+
+<button
+    class="flex w-82 cursor-pointer flex-row items-center rounded-md border border-dark-pine-muted bg-light-pine-overlay p-3 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
+>
+    <div class="flex flex-row">
+        {room.name}
+        {room.private ? "🔒" : ""}
+    </div>
+    <div class="grow"></div>
+    <div class="flex flex-row items-center gap-2">
+        <div class="font-mono">64m</div>
+        <div class="rounded bg-light-pine-blue px-2 py-0.5 text-dark-pine-text dark:bg-dark-pine-blue">Join</div>
+    </div>
+</button>

frontend/src/routes/+layout.svelte

@@ -4,6 +4,6 @@
     let { children } = $props()
 </script>
 
-<div class="min-h-screen w-full bg-light-pine-base px-6 text-light-pine-text sm:px-20 md:px-40 lg:px-80 dark:bg-dark-pine-base dark:text-dark-pine-text">
+<div class="min-h-screen w-full bg-light-pine-base px-0 text-light-pine-text sm:px-20 md:px-40 lg:px-80 dark:bg-dark-pine-base dark:text-dark-pine-text">
     {@render children()}
 </div>

frontend/src/routes/+page.svelte

@@ -1,10 +1,40 @@
 <script lang="ts">
-    import RoomComponent from "$lib/components/Room.svelte"
+    import RoomComponent from "$lib/components/RoomComponent.svelte"
     import { parseRoom, type Room } from "$lib/types"
+    import { Plus } from "@lucide/svelte"
 
     let room: Room = { id: "asd", coords: [0.123, 0.456], name: "scatolame party", private: true, range: 124 }
 </script>
 
+<div class="flex flex-col items-center gap-2">
+    <div class="flex flex-row items-center gap-4 py-4">
+        <img src="icon_small.png" class="h-12 w-12" alt="chillbox icon" />
+        <span class="lilita-one-regular text-6xl font-bold">ChillBox</span>
+    </div>
+
+    <img src="/smerdo_radar_bonus.gif" alt="radar" class="h-64 w-64" />
+    <span class="animate-pulse text-sm italic">Scanning for rooms near you...</span>
+
+    <button class="fixed right-4 bottom-4 flex flex-row gap-1 rounded-xl bg-light-pine-blue p-2 text-dark-pine-text sm:right-20 md:right-40 lg:right-80 dark:bg-dark-pine-blue">
+        <span> New Room </span>
+        <Plus />
+    </button>
+
+    <div class="flex flex-col gap-2">
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+        <RoomComponent {room}></RoomComponent>
+    </div>
+</div>
 <!-- <div class="h-full w-full flex-row justify-center p-4"> -->
 <!--     <div class="relative min-h-screen justify-center justify-items-center"> -->
 <!--         <h1>Scan your nearby rooms</h1> -->