Support multiple languages

frontend/src/pages/public/LandingPage.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { Button } from '../../components/ui';
 import { PublicLayout } from '../../components/layout';
 import { 
@@ -23,6 +24,8 @@ import {
 } from 'lucide-react';
 
 const LandingPage: React.FC = () => {
+  const { t } = useTranslation();
+
   const scrollToSection = (sectionId: string) => {
     const element = document.getElementById(sectionId);
     if (element) {
@@ -37,12 +40,13 @@ const LandingPage: React.FC = () => {
       headerProps={{
         showThemeToggle: true,
         showAuthButtons: true,
+        showLanguageSelector: true,
         variant: "default",
         navigationItems: [
-          { id: 'features', label: 'Características', href: '#features' },
-          { id: 'benefits', label: 'Beneficios', href: '#benefits' },
-          { id: 'pricing', label: 'Precios', href: '#pricing' },
-          { id: 'testimonials', label: 'Testimonios', href: '#testimonials' }
+          { id: 'features', label: t('landing:navigation.features', 'Características'), href: '#features' },
+          { id: 'benefits', label: t('landing:navigation.benefits', 'Beneficios'), href: '#benefits' },
+          { id: 'pricing', label: t('landing:navigation.pricing', 'Precios'), href: '#pricing' },
+          { id: 'testimonials', label: t('landing:navigation.testimonials', 'Testimonios'), href: '#testimonials' }
         ]
       }}
     >
@@ -54,24 +58,23 @@ const LandingPage: React.FC = () => {
             <div className="mb-6">
               <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
                 <Zap className="w-4 h-4 mr-2" />
-                IA Avanzada para Panaderías
+                {t('landing:hero.badge', 'IA Avanzada para Panaderías')}
               </span>
             </div>
             
             <h1 className="text-4xl tracking-tight font-extrabold text-[var(--text-primary)] sm:text-5xl lg:text-7xl">
-              <span className="block">Revoluciona tu</span>
-              <span className="block text-[var(--color-primary)]">Panadería con IA</span>
+              <span className="block">{t('landing:hero.title_line1', 'Revoluciona tu')}</span>
+              <span className="block text-[var(--color-primary)]">{t('landing:hero.title_line2', 'Panadería con IA')}</span>
             </h1>
             
             <p className="mt-6 max-w-3xl mx-auto text-lg text-[var(--text-secondary)] sm:text-xl">
-              Optimiza automáticamente tu producción, reduce desperdicios hasta un 35%, 
-              predice demanda con precisión del 92% y aumenta tus ventas con inteligencia artificial.
+              {t('landing:hero.subtitle', 'Optimiza automáticamente tu producción, reduce desperdicios hasta un 35%, predice demanda con precisión del 92% y aumenta tus ventas con inteligencia artificial.')}
             </p>
             
             <div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
               <Link to="/register">
                 <Button size="lg" className="px-8 py-4 text-lg font-semibold bg-[var(--color-primary)] hover:bg-[var(--color-primary-dark)] text-white shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">
-                  Comenzar Gratis 14 Días
+                  {t('landing:hero.cta_primary', 'Comenzar Gratis 14 Días')}
                   <ArrowRight className="ml-2 w-5 h-5" />
                 </Button>
               </Link>
@@ -82,22 +85,22 @@ const LandingPage: React.FC = () => {
                 onClick={() => scrollToSection('demo')}
               >
                 <Play className="mr-2 w-5 h-5" />
-                Ver Demo en Vivo
+                {t('landing:hero.cta_secondary', 'Ver Demo en Vivo')}
               </Button>
             </div>
             
             <div className="mt-12 flex items-center justify-center space-x-6 text-sm text-[var(--text-tertiary)]">
               <div className="flex items-center">
                 <Check className="w-4 h-4 text-green-500 mr-2" />
-                Sin tarjeta de crédito
+                {t('landing:hero.features.no_credit_card', 'Sin tarjeta de crédito')}
               </div>
               <div className="flex items-center">
                 <Check className="w-4 h-4 text-green-500 mr-2" />
-                Configuración en 5 minutos
+                {t('landing:hero.features.quick_setup', 'Configuración en 5 minutos')}
               </div>
               <div className="flex items-center">
                 <Check className="w-4 h-4 text-green-500 mr-2" />
-                Soporte 24/7 en español
+                {t('landing:hero.features.support_24_7', 'Soporte 24/7 en español')}
               </div>
             </div>
           </div>

frontend/src/pages/public/LoginPage.tsx

@@ -37,6 +37,7 @@ const LoginPage: React.FC = () => {
       headerProps={{
         showThemeToggle: true,
         showAuthButtons: false,
+        showLanguageSelector: true,
         variant: "minimal"
       }}
     >

frontend/src/pages/public/RegisterPage.tsx

@@ -21,6 +21,7 @@ const RegisterPage: React.FC = () => {
       headerProps={{
         showThemeToggle: true,
         showAuthButtons: false,
+        showLanguageSelector: true,
         variant: "minimal"
       }}
     >