chore: add i18n

polylan_submitter/src/Home.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useTitle } from "@vueuse/core";
 import { gamesApiListEventGames } from "./api";
 import type { GamesApiListEventGamesResponse } from "./api/types.gen";
 
@@ -12,6 +14,9 @@ const props = withDefaults(defineProps<Props>(), {
   marketEnabled: true,
 });
 
+const { t } = useI18n();
+useTitle(computed(() => t("home.title")));
+
 const games = ref<GamesApiListEventGamesResponse | undefined>();
 const loading = ref(true);
 const imageErrors = ref<Set<number>>(new Set());
@@ -58,9 +63,9 @@ onMounted(async () => {
     <div class="w-full max-w-6xl">
       <!-- Header -->
       <div class="text-center mb-12">
-        <h1 class="text-5xl font-bold mb-4">PolyLAN Submitter</h1>
+        <h1 class="text-5xl font-bold mb-4">{{ t("home.title") }}</h1>
         <p class="text-xl text-base-content/70">
-          Choose a game and submit your best solutions
+          {{ t("home.subtitle") }}
         </p>
       </div>
 
@@ -79,12 +84,12 @@ onMounted(async () => {
             <div class="absolute inset-0 bg-black/30 group-hover:bg-black/20 transition-colors"></div>
           </figure>
           <div class="card-body">
-            <h2 class="card-title text-2xl">Market</h2>
-            <p class="text-base-content/70">Place your bets and compete</p>
+            <h2 class="card-title text-2xl">{{ t("home.marketCard.title") }}</h2>
+            <p class="text-base-content/70">{{ t("home.marketCard.description") }}</p>
             <div class="card-actions justify-end mt-4">
               <button class="btn btn-primary">
                 <i class="mdi mdi-arrow-right mr-2"></i>
-                Place bets
+                {{ t("home.marketCard.cta") }}
               </button>
             </div>
           </div>
@@ -108,7 +113,7 @@ onMounted(async () => {
             <div class="card-actions justify-end mt-4">
               <button @click="navigate(game.path)" class="btn btn-primary">
                 <i class="mdi mdi-arrow-right mr-2"></i>
-                Submit results
+                {{ t("home.submitResults") }}
               </button>
             </div>
           </div>
@@ -117,7 +122,7 @@ onMounted(async () => {
 
       <!-- Footer -->
       <div class="text-center mt-12 text-base-content/50">
-        <p>Select a game above to begin submitting</p>
+        <p>{{ t("home.footer") }}</p>
       </div>
     </div>
   </div>