add home structure

frontend/src/lib/components/RoomList.svelte

@@ -0,0 +1,17 @@
+<script>
+    let name = "dio nastro";
+    let participants = 12;
+    let locked = true;
+</script>
+
+<div class="room bg-white rounded-lg shadow-md p-6 flex flex-col gap-2 items-start">
+    <h2 class="text-xl font-semibold flex items-center gap-2">
+        {name}
+        {#if locked}
+            <span class="text-gray-500">🔒</span>
+        {/if}
+    </h2>
+    <span class="text-gray-600 text-sm">
+        {participants} participant{participants === 1 ? '' : 's'}
+    </span>
+</div>

frontend/src/routes/+page.svelte

@@ -1,8 +1,24 @@
 <script lang="ts">
+    import RoomList from "$lib/components/RoomList.svelte"
 </script>
 
-<div class="flex h-full w-full items-center justify-center p-4">
+<div class="h-full w-full flex-row justify-center p-4">
-    <div class="">
+    <div class="relative min-h-screen justify-center justify-items-center">
         <h1>Scan your nearby rooms</h1>
+        <img src="/smerdoradar.gif" alt="radar" class="h-64 w-64" />
+        <div class="max-h-50 w-full overflow-y-auto">
+            <RoomList />
+            <RoomList />
+            <RoomList />
+            <RoomList />
+            <RoomList />
+            <RoomList />
+            <RoomList />
+            <RoomList />
+            <RoomList />
+        </div>
+        <div class="fixed bottom-0 right-0">
+            <button class="mt-4 justify-end rounded bg-blue-500 px-6 py-2 text-white transition-colors hover:bg-blue-600 active:bg-blue-700"> + </button>
+        </div>
     </div>
 </div>