adds i18n

web/src/routes/+page.svelte

@@ -12,6 +12,7 @@
     import { currentUser } from "$lib/stores/user_store";
     import { country_codes } from "$lib/util/country_code_util";
     import { Canvas } from "@threlte/core";
+    import { _ } from "svelte-i18n";
 
     let searchDropdownItems: SearchItem[] = [];
 
@@ -59,6 +60,10 @@
     }
 </script>
 
+<svelte:head>
+    <title>Home | wanderer</title>
+</svelte:head>
+
 <section
     class="hero grid grid-cols-1 md:grid-cols-2 md:px-8 md:gap-8"
     style="height: calc(100vh - 112px)"
@@ -67,17 +72,16 @@
         class="flex flex-col justify-center gap-8 max-w-md mx-8 md:mx-auto lg:-mt-24"
     >
         <h2 class="text-7xl font-bold">
-            Welcome to <span class="-tracking-[0.075em]">wanderer</span>
+            {$_("welcome_to")} <span class="-tracking-[0.075em]">wanderer</span>
         </h2>
         <h5>
-            Explore exciting trails, save your favorites, and experience the
-            beauty of nature. Find your next adventure!
+            {$_("hero_section_0_text")}
         </h5>
         <Search
             on:update={(e) => search(e.detail)}
             on:click={(e) => handleSearchClick(e.detail)}
             large={true}
-            placeholder="Search for trails, places..."
+            placeholder="{$_("search-for-trails-places")}..."
             items={searchDropdownItems}
         ></Search>
     </div>
@@ -105,13 +109,12 @@
             {$currentUser ? "Trails for you" : "Explore some trails"}
         </h2>
         <h5>
-            Here are some trails you might like. Or you can just go to the full
-            list right now.
+            {$_("hero_section_1_text")}
         </h5>
         <a
             class="inline-block btn-primary btn-large"
             href="/trails"
-            role="button">Explore</a
+            role="button">{$_("explore")}</a
         >
     </div>
 </section>
@@ -119,10 +122,9 @@
     class="max-w-7xl mx-auto mt-8 px-8 xl:px-0 grid grid-cols-1 md:grid-cols-2 items-center"
 >
     <div class="max-w-md md:mx-auto space-y-8">
-        <h2 class="text-4xl md:text-5xl font-bold">Categories</h2>
+        <h2 class="text-4xl md:text-5xl font-bold">{$_("categories")}</h2>
         <h5>
-            Did you know? You cannot only save you hiking trails. There are many
-            categories for all your adventures.
+            {$_("hero_section_2_text")}
         </h5>
     </div>
     <div
@@ -130,7 +132,10 @@
         class="grid grid-cols-1 lg:grid-cols-2 justify-items-center gap-8 py-8"
     >
         {#each $categories as category}
-            <a href="/trails?category={category.id}" data-sveltekit-preload-data="off">
+            <a
+                href="/trails?category={category.id}"
+                data-sveltekit-preload-data="off"
+            >
                 <CategoryCard {category}></CategoryCard>
             </a>
         {/each}