Fix i18n, improve header styling, and add generated images

Author: GitHub Copilot

components/SiteHeader.vue

@@ -11,20 +11,20 @@
         </div>
 
         <!-- Desktop Navigation -->
-        <nav class="hidden md:flex space-x-8">
-          <NuxtLink :to="localePath('/')" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+        <nav class="hidden md:flex space-x-2">
+          <NuxtLink :to="localePath('/')" class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-full text-sm font-medium transition-all duration-200">
             {{ $t('nav.home') }}
           </NuxtLink>
-          <NuxtLink :to="localePath('/classes')" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+          <NuxtLink :to="localePath('/classes')" class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-full text-sm font-medium transition-all duration-200">
             {{ $t('nav.classes') }}
           </NuxtLink>
-          <NuxtLink :to="localePath('/booking')" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+          <NuxtLink :to="localePath('/booking')" class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-full text-sm font-medium transition-all duration-200">
             {{ $t('nav.booking') }}
           </NuxtLink>
-          <NuxtLink :to="localePath('/prices')" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+          <NuxtLink :to="localePath('/prices')" class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-full text-sm font-medium transition-all duration-200">
             {{ $t('nav.prices') }}
           </NuxtLink>
-          <NuxtLink :to="localePath('/references')" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors">
+          <NuxtLink :to="localePath('/references')" class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-full text-sm font-medium transition-all duration-200">
             {{ $t('nav.references') }}
           </NuxtLink>
         </nav>

locales/en.json

@@ -0,0 +1,16 @@
+{
+    "welcome": "Welcome to TOP",
+    "nav": {
+        "home": "Home",
+        "classes": "Classes",
+        "booking": "Booking",
+        "prices": "Prices",
+        "references": "References",
+        "contact": "Contact"
+    },
+    "hero": {
+        "title": "Unleash Your Potential",
+        "subtitle": "Join TOP – The premier destination for Paddle and Tennis excellence.",
+        "cta": "Book a Court"
+    }
+}

locales/es.json

@@ -0,0 +1,16 @@
+{
+    "welcome": "Bienvenido a TOP",
+    "nav": {
+        "home": "Inicio",
+        "classes": "Clases",
+        "booking": "Reservas",
+        "prices": "Precios",
+        "references": "Referencias",
+        "contact": "Contacto"
+    },
+    "hero": {
+        "title": "Libera Tu Potencial",
+        "subtitle": "Únete a TOP – El destino principal para la excelencia en Pádel y Tenis.",
+        "cta": "Reservar Pista"
+    }
+}

nuxt.config.ts

@@ -9,23 +9,26 @@ export default defineNuxtConfig({
         '@nuxtjs/i18n'
     ],
     i18n: {
-        vueI18n: './i18n.config.ts',
+        strategy: 'prefix_except_default',
+        defaultLocale: 'en',
+        lazy: true,
+        langDir: 'locales',
         locales: [
             {
                 code: 'en',
-                name: 'English'
+                name: 'English',
+                file: 'en.json'
             },
             {
                 code: 'es',
-                name: 'Español'
+                name: 'Español',
+                file: 'es.json'
             }
         ],
-        defaultLocale: 'en',
-        strategy: 'prefix_except_default',
         detectBrowserLanguage: {
             useCookie: true,
             cookieKey: 'i18n_redirected',
-            redirectOn: 'root',  // recommended
+            redirectOn: 'root',
         }
     }
 })