🌐 Add full i18n system frontend + API (Story 1.3)

Nuxt i18n with lazy-loaded JSON files, localized routes, hreflang SEO tags,
LanguageSwitcher component. Laravel SetLocale middleware, HasTranslations trait,
API Resources and Controllers for projects/skills with Accept-Language support.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/app/app.vue

@@ -3,3 +3,16 @@
     <NuxtPage />
   </NuxtLayout>
 </template>
+
+<script setup lang="ts">
+const head = useLocaleHead({
+  addDirAttribute: true,
+  addSeoAttributes: true,
+})
+
+useHead({
+  htmlAttrs: computed(() => head.value.htmlAttrs ?? {}),
+  link: computed(() => head.value.link ?? []),
+  meta: computed(() => head.value.meta ?? []),
+})
+</script>

frontend/app/components/ui/LanguageSwitcher.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex items-center gap-1" role="group" :aria-label="$t('common.language')">
+    <button
+      v-for="loc in availableLocales"
+      :key="loc.code"
+      :aria-current="currentLocale === loc.code ? 'true' : undefined"
+      :class="[
+        'px-2 py-1 text-sm font-ui rounded transition-colors',
+        currentLocale === loc.code
+          ? 'text-sky-accent font-semibold'
+          : 'text-sky-text/50 hover:text-sky-text',
+      ]"
+      @click="switchLocale(loc.code)"
+    >
+      {{ loc.code.toUpperCase() }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { currentLocale, availableLocales, switchLocale } = useLocale()
+</script>

frontend/app/composables/useApi.ts

@@ -0,0 +1,18 @@
+export const useApi = () => {
+  const config = useRuntimeConfig()
+  const { locale } = useI18n()
+
+  const apiFetch = async <T>(endpoint: string, options: Record<string, any> = {}) => {
+    return await $fetch<T>(`${config.public.apiUrl}${endpoint}`, {
+      ...options,
+      headers: {
+        'X-API-Key': config.public.apiKey as string,
+        'Accept-Language': locale.value,
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+    })
+  }
+
+  return { apiFetch }
+}

frontend/app/composables/useLocale.ts

@@ -0,0 +1,29 @@
+export const useLocale = () => {
+  const { locale, locales, setLocale } = useI18n()
+  const switchLocalePath = useSwitchLocalePath()
+  const localePath = useLocalePath()
+
+  const currentLocale = computed(() => locale.value)
+
+  const availableLocales = computed(() =>
+    (locales.value as Array<{ code: string; name: string }>).map(l => ({
+      code: l.code,
+      name: l.name,
+    }))
+  )
+
+  const switchLocale = (code: string) => {
+    return navigateTo(switchLocalePath(code))
+  }
+
+  const localizedPath = (path: string) => {
+    return localePath(path)
+  }
+
+  return {
+    currentLocale,
+    availableLocales,
+    switchLocale,
+    localizedPath,
+  }
+}

frontend/app/pages/index.vue

@@ -1,5 +1,14 @@
 <template>
-  <div class="min-h-screen bg-sky-dark flex items-center justify-center">
-    <h1 class="text-4xl font-ui text-sky-text">Skycel</h1>
+  <div class="min-h-screen bg-sky-dark flex flex-col items-center justify-center gap-6">
+    <h1 class="text-4xl font-narrative text-sky-text">{{ $t('landing.title') }}</h1>
+    <p class="text-xl font-ui text-sky-text/70">{{ $t('landing.subtitle') }}</p>
+    <div class="flex gap-4 mt-4">
+      <button class="px-6 py-3 bg-sky-accent text-sky-dark font-ui font-semibold rounded-lg">
+        {{ $t('landing.cta_adventure') }}
+      </button>
+      <button class="px-6 py-3 border border-sky-text/30 text-sky-text font-ui rounded-lg">
+        {{ $t('landing.cta_express') }}
+      </button>
+    </div>
   </div>
 </template>