adds 3d model

web/src/routes/+page.svelte

@@ -4,14 +4,15 @@
         type SearchItem,
     } from "$lib/components/base/search.svelte";
     import CategoryCard from "$lib/components/category_card.svelte";
+    import Scene from "$lib/components/scene.svelte";
     import TrailCard from "$lib/components/trail/trail_card.svelte";
     import { ms } from "$lib/meilisearch";
     import { categories } from "$lib/stores/category_store";
-    import {
-        trails
-    } from "$lib/stores/trail_store";
+    import { trails } from "$lib/stores/trail_store";
     import { currentUser } from "$lib/stores/user_store";
     import { country_codes } from "$lib/util/country_code_util";
+    import { Canvas, } from "@threlte/core";
+
 
     let searchDropdownItems: SearchItem[] = [];
 
@@ -56,14 +57,28 @@
     }
 </script>
 
-<section class="hero flex justify-center items-center" style="height: 50vh">
-    <Search
-        on:update={(e) => search(e.detail)}
-        on:click={(e) => handleSearchClick(e.detail)}
-        large={true}
-        placeholder="Search trails..."
-        items={searchDropdownItems}
-    ></Search>
+<section class="hero grid grid-cols-2" style="height: calc(100vh - 112px)">
+    <div class="flex flex-col justify-center gap-8 max-w-md mx-auto -mt-24">
+        <h2 class="text-7xl font-bold">
+            Welcome to <span class="-tracking-[0.075em]">wanderer</span>
+        </h2>
+        <h5>
+            Explore diverse trails, save your favorites, and experience the
+            beauty of nature. Find your next adventure!
+        </h5>
+        <Search
+            on:update={(e) => search(e.detail)}
+            on:click={(e) => handleSearchClick(e.detail)}
+            large={true}
+            placeholder="Search trails..."
+            items={searchDropdownItems}
+        ></Search>
+    </div>
+    <div>
+        <Canvas>
+            <Scene></Scene>
+        </Canvas>
+    </div>
 </section>
 <section class="max-w-7xl mx-auto mt-8 px-8 xl:px-0">
     <h2 class="text-5xl md:text-6xl font-bold text-primary">
@@ -75,10 +90,7 @@
     >
         {#each $trails as trail}
             <a href="/trail/view/{trail.id}">
-                <TrailCard
-                    {trail}
-                    mode="edit"
-                ></TrailCard></a
+                <TrailCard {trail} mode="edit"></TrailCard></a
             >
         {/each}
     </div>
@@ -96,10 +108,4 @@
 </section>
 
 <style>
-    .hero {
-        background-image: url("/imgs/hero.jpg");
-        background-position: bottom;
-        background-size: cover;
-        background-repeat: no-repeat;
-    }
 </style>