✨ feat: implement new feature for enhanced user experience

frontend/src/App.svelte

@@ -1,6 +1,18 @@
 <script lang="ts">
     import { metricCall } from "./config"
     import { location } from "./lib/store"
+    import { _, locale } from "./lib/i18n/index"
+    import {
+        SUPPORTED_LANGUAGES,
+        LANGUAGE_LABELS,
+        currentLanguage,
+        localizedPath,
+        getLanguageSwitchUrl,
+        getBrowserLanguage,
+        extractLanguageFromPath,
+        DEFAULT_LANGUAGE,
+        getRoutePath,
+    } from "./lib/i18n"
     export let url = ""
 
     if (url) {
@@ -13,8 +25,19 @@
             push: false,
             pop: false,
         }
+        // Set svelte-i18n locale from URL for SSR rendering
+        const lang = extractLanguageFromPath(l[0]) || DEFAULT_LANGUAGE
+        $locale = lang
     }
 
+    // Redirect root "/" to default language
+    $effect(() => {
+        if (typeof window !== "undefined" && $location.path === "/") {
+            const lang = getBrowserLanguage()
+            history.replaceState(null, "", `/${lang}/`)
+        }
+    })
+
     // metrics
     let oldPath = $state("")
     $effect(() => {
@@ -38,14 +61,47 @@
 </script>
 
 <header class="text-white p-4 bg-red-900">
-    <div class="container mx-auto flex justify-between items-center">
-        <a href="/" class="text-xl font-bold">Tibi Svelte Starter</a>
-        <nav>
-            <ul class="flex space-x-4">
-                <li><a href="/" class="hover:underline">Home</a></li>
-                <li><a href="/about" class="hover:underline">About</a></li>
-                <li><a href="/contact" class="hover:underline">Contact</a></li>
+    <div class="container mx-auto flex flex-wrap items-center justify-between gap-2">
+        <a href={localizedPath("/")} class="text-xl font-bold shrink-0">Tibi Svelte Starter</a>
+        <nav class="flex items-center gap-4">
+            <ul class="hidden sm:flex space-x-4">
+                <li><a href={localizedPath("/")} class="hover:underline">{$_("nav.home")}</a></li>
+                <li><a href={localizedPath("/about")} class="hover:underline">{$_("nav.about")}</a></li>
+                <li><a href={localizedPath("/contact")} class="hover:underline">{$_("nav.contact")}</a></li>
             </ul>
+            <div class="flex space-x-2 text-sm sm:border-l sm:border-white/30 sm:pl-4">
+                {#each SUPPORTED_LANGUAGES as lang}
+                    <a
+                        href={getLanguageSwitchUrl(lang)}
+                        class="hover:underline px-1"
+                        class:font-bold={$currentLanguage === lang}
+                        class:opacity-60={$currentLanguage !== lang}
+                    >
+                        {LANGUAGE_LABELS[lang]}
+                    </a>
+                {/each}
+            </div>
         </nav>
     </div>
+    <!-- Mobile nav -->
+    <nav class="sm:hidden mt-2 border-t border-white/20 pt-2">
+        <ul class="flex space-x-4 text-sm">
+            <li><a href={localizedPath("/")} class="hover:underline">{$_("nav.home")}</a></li>
+            <li><a href={localizedPath("/about")} class="hover:underline">{$_("nav.about")}</a></li>
+            <li><a href={localizedPath("/contact")} class="hover:underline">{$_("nav.contact")}</a></li>
+        </ul>
+    </nav>
 </header>
+
+<main class="container mx-auto p-4">
+    {#if getRoutePath($location.path) === "/about"}
+        <h1 class="text-2xl font-bold mb-4">{$_("page.about.title")}</h1>
+        <p>{$_("page.about.text")}</p>
+    {:else if getRoutePath($location.path) === "/contact"}
+        <h1 class="text-2xl font-bold mb-4">{$_("page.contact.title")}</h1>
+        <p>{$_("page.contact.text")}</p>
+    {:else}
+        <h1 class="text-2xl font-bold mb-4">{$_("page.home.title")}</h1>
+        <p>{$_("page.home.text")}</p>
+    {/if}
+</main>