From fc786e459a51e061a02318047cc3658390b63079 Mon Sep 17 00:00:00 2001
From: monokrome <github@nixvy.ninja>
Date: Wed, 24 Sep 2025 06:11:13 +0200
Subject: [PATCH] feat(i18n): Implement internationalization support with
 Spanish and English locales

- Updated Astro configuration to enable server output for i18n functionality.
- Added i18n configuration with locales and default locale settings.
- Refactored ContactForm component to utilize translations based on the current language.
- Enhanced Head component to dynamically set titles and descriptions based on the selected language.
- Created LanguagePicker component for language selection and routing.
- Updated Navigation component to reflect translated menu items.
- Removed old pages and replaced them with new localized versions for both English and Spanish.
- Added utility functions for language detection and translation handling.
---
 astro.config.mjs                        |   9 +-
 src/components/ContactForm.tsx          |  56 +++++++------
 src/components/Head.astro               |  25 +++---
 src/components/LanguagePicker.astro     |  57 +++++++++++++
 src/components/Navigation.astro         |  50 +++++++++++
 src/i18n/react-utils.ts                 |  13 +++
 src/i18n/ui.ts                          | 107 ++++++++++++++++++++++++
 src/i18n/utils.ts                       |  62 ++++++++++++++
 src/layouts/Layout.astro                |  18 ++--
 src/pages/contacto.astro                |  21 -----
 src/pages/en/about-us.astro             |  32 +++++++
 src/pages/en/contact.astro              |  24 ++++++
 src/pages/en/index.astro                |  16 ++++
 src/pages/en/social-networks.astro      |  45 ++++++++++
 src/pages/es/contacto.astro             |  24 ++++++
 src/pages/es/index.astro                |  16 ++++
 src/pages/{ => es}/redes-sociales.astro |  86 ++++++++++---------
 src/pages/{ => es}/sobre-nosotros.astro |  63 +++++++-------
 src/pages/index.astro                   |  13 +--
 19 files changed, 592 insertions(+), 145 deletions(-)
 create mode 100644 src/components/LanguagePicker.astro
 create mode 100644 src/components/Navigation.astro
 create mode 100644 src/i18n/react-utils.ts
 create mode 100644 src/i18n/ui.ts
 create mode 100644 src/i18n/utils.ts
 delete mode 100644 src/pages/contacto.astro
 create mode 100644 src/pages/en/about-us.astro
 create mode 100644 src/pages/en/contact.astro
 create mode 100644 src/pages/en/index.astro
 create mode 100644 src/pages/en/social-networks.astro
 create mode 100644 src/pages/es/contacto.astro
 create mode 100644 src/pages/es/index.astro
 rename src/pages/{ => es}/redes-sociales.astro (52%)
 rename src/pages/{ => es}/sobre-nosotros.astro (74%)

diff --git a/astro.config.mjs b/astro.config.mjs
index 0758b46..6ba1f0d 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -7,10 +7,17 @@ import tailwind from "@astrojs/tailwind";
 // https://astro.build/config
 export default defineConfig({
   integrations: [react(), tailwind()],
-  output: "hybrid",
+  output: "server", //El output server es necesario para que i18n funcione, para mas info mirar la documentacion del mismo
   adapter: cloudflare({
   }),
   image: {
     domains: ["yellowumbrella.dev"],
+  },
+  i18n: {
+    locales: ["es", "en"],
+    defaultLocale: "es",
+    routing: {
+      prefixDefaultLocale: true
+    }
   }
 });
\ No newline at end of file
diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx
index af28291..f05899a 100644
--- a/src/components/ContactForm.tsx
+++ b/src/components/ContactForm.tsx
@@ -4,6 +4,7 @@ import PhoneInput, { isValidPhoneNumber } from "react-phone-number-input";
 import { Turnstile } from "@marsidev/react-turnstile";
 import type { TurnstileInstance } from "@marsidev/react-turnstile";
 import "react-phone-number-input/style.css";
+import { useTranslationsReact, getLangFromUrlReact } from '../i18n/react-utils';
 
 type FormInputs = {
   empresa: string;
@@ -13,8 +14,15 @@ type FormInputs = {
   mensaje: string;
 };
 
+interface ContactFormProps {
+  lang?: string;
+}
 
-export default function ContactForm() {
+export default function ContactForm({ lang }: ContactFormProps = {}) {
+  // Detectar idioma desde la URL del navegador si no se proporciona
+  const currentLang = lang || getLangFromUrlReact(window.location.pathname);
+  const t = useTranslationsReact(currentLang as 'es' | 'en');
+  
   const {
     register,
     handleSubmit,
@@ -42,7 +50,7 @@ export default function ContactForm() {
       }
       
       if (!token) {
-        setStatus({ type: "error", message: "Por favor, completa el captcha antes de enviar" });
+        setStatus({ type: "error", message: t('contact.form.captcha.required') });
         return;
       }
 
@@ -65,7 +73,7 @@ export default function ContactForm() {
 
       if (!res.ok) {
         const text = await res.text();
-        throw new Error(text || "Error al enviar el formulario");
+        throw new Error(text || t('contact.form.error'));
       }
 
       setStatus({ type: "success" });
@@ -75,7 +83,7 @@ export default function ContactForm() {
       // Reset Turnstile widget using ref
       turnstileRef.current?.reset();
     } catch (err: unknown) {
-      setStatus({ type: "error", message: (err instanceof Error ? err.message : String(err)) || "Error inesperado" });
+      setStatus({ type: "error", message: (err instanceof Error ? err.message : String(err)) || t('contact.form.error') });
     }
   };
 
@@ -89,72 +97,72 @@ export default function ContactForm() {
     >
       <div>
         <label className="mb-1 block text-sm font-medium text-white" htmlFor="empresa">
-          Nombre de la empresa
+          {t('contact.form.company')}
         </label>
         <input
           id="empresa"
           className="w-full rounded-md border border-white/20 bg-white/10 p-3 text-white placeholder-white/50 focus:border-yellow-400 focus:outline-none"
-          placeholder="Yellow Umbrella Tech"
+          placeholder={t('contact.form.company.placeholder')}
           {...register("empresa", { required: true })}
         />
         {errors.empresa && (
-          <p className="mt-1 text-sm text-red-400">Este campo es obligatorio</p>
+          <p className="mt-1 text-sm text-red-400">{t('contact.form.company.required')}</p>
         )}
       </div>
 
       <div>
         <label className="mb-1 block text-sm font-medium text-white" htmlFor="nombreCompleto">
-          Nombre y apellidos
+          {t('contact.form.name')}
         </label>
         <input
           id="nombreCompleto"
           className="w-full rounded-md border border-white/20 bg-white/10 p-3 text-white placeholder-white/50 focus:border-yellow-400 focus:outline-none"
-          placeholder="Ana García Rodríguez"
+          placeholder={t('contact.form.name.placeholder')}
           {...register("nombreCompleto", { required: true, minLength: 2 })}
         />
         {errors.nombreCompleto && (
-          <p className="mt-1 text-sm text-red-400">Introduce tu nombre completo</p>
+          <p className="mt-1 text-sm text-red-400">{t('contact.form.name.required')}</p>
         )}
       </div>
 
       <div>
         <label className="mb-1 block text-sm font-medium text-white" htmlFor="cargo">
-          Cargo en la empresa (opcional)
+          {t('contact.form.position')}
         </label>
         <input
           id="cargo"
           className="w-full rounded-md border border-white/20 bg-white/10 p-3 text-white placeholder-white/50 focus:border-yellow-400 focus:outline-none"
-          placeholder="CEO, CTO, etc."
+          placeholder={t('contact.form.position.placeholder')}
           {...register("cargo")}
         />
       </div>
 
       <div>
         <label className="mb-1 block text-sm font-medium text-white" htmlFor="email">
-          Email
+          {t('contact.form.email')}
         </label>
         <input
           id="email"
           type="email"
           className="w-full rounded-md border border-white/20 bg-white/10 p-3 text-white placeholder-white/50 focus:border-yellow-400 focus:outline-none"
-          placeholder="ana.garcia@empresa.com"
+          placeholder={t('contact.form.email.placeholder')}
           {...register("email", {
             required: true,
             pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
           })}
         />
         {errors.email && (
-          <p className="mt-1 text-sm text-red-400">Introduce un email válido</p>
+          <p className="mt-1 text-sm text-red-400">{t('contact.form.email.required')}</p>
         )}
       </div>
 
       <div>
-        <label className="mb-1 block text-sm font-medium text-white" htmlFor="telefono">Teléfono (opcional)</label>
+        <label className="mb-1 block text-sm font-medium text-white" htmlFor="telefono">{t('contact.form.phone')}</label>
         <div className="rounded-md border border-white/20 bg-white/10 p-2 text-white focus-within:border-yellow-400">
           <PhoneInput
             id="telefono"
-            defaultCountry="ES"
-            placeholder="+34 600 123 456"
+            defaultCountry={currentLang === 'es' ? "ES" : "US"}
+            placeholder={t('contact.form.phone.placeholder')}
             value={telefono}
             onChange={setTelefono}
             smartCaret={false}
@@ -164,20 +172,20 @@ export default function ContactForm() {
         </div>
         {telefono && typeof telefono === "string" && !isValidPhoneNumber(telefono) && (
           <p className="mt-1 text-sm text-yellow-300">
-            El número puede no ser válido. Revisa el país y formato.
+            {t('contact.form.phone.invalid')}
           </p>
         )}
       </div>
 
       <div>
         <label className="mb-1 block text-sm font-medium text-white" htmlFor="mensaje">
-          Mensaje
+          {t('contact.form.message')}
         </label>
         <textarea
           id="mensaje"
           rows={5}
           className="w-full rounded-md border border-white/20 bg-white/10 p-3 text-white placeholder-white/50 focus:border-yellow-400 focus:outline-none"
-          placeholder="Cuéntanos en qué podemos ayudarte..."
+          placeholder={t('contact.form.message.placeholder')}
           {...register("mensaje", {})}
         />
       </div>
@@ -188,7 +196,7 @@ export default function ContactForm() {
           siteKey={siteKey}
           options={{
             theme: "dark",
-            language: "es",
+            language: currentLang as "es" | "en",
           }}
           onSuccess={(token) => {
             setTurnstileToken(token);
@@ -212,13 +220,13 @@ export default function ContactForm() {
           className="relative inline-flex items-center justify-center w-32 h-16 p-[2px] mb-2 mr-4 overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-[#ffd300] to-[#773376] group-hover:from-[#ffd300] group-hover:to-[#773376] hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-[#773376] dark:focus:ring-[#773376]"
         >
           <span className="relative w-full h-full px-2 py-1 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-[6px] group-hover:bg-opacity-0 flex items-center justify-center text-xl lg:text-lg md:text-base sm:text-sm text-center leading-tight">
-            {isSubmitting ? "Enviando..." : "Enviar"}
+            {isSubmitting ? t('contact.form.sending') : t('contact.form.send')}
           </span>
         </button>
       </div>
 
       {status.type === "success" && (
-        <p className="text-sm text-green-400">¡Gracias! Hemos recibido tu solicitud.</p>
+        <p className="text-sm text-green-400">{t('contact.form.success')}</p>
       )}
       {status.type === "error" && (
         <p className="text-sm text-red-400">{status.message}</p>
diff --git a/src/components/Head.astro b/src/components/Head.astro
index 3c342eb..4affd8c 100644
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@@ -1,42 +1,47 @@
 ---
 import Umbrella from '../components/svg/Umbrella.astro'
+import { getLangFromUrl, useTranslations } from '../i18n/utils';
+import { getRelativeLocaleUrl } from 'astro:i18n';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
 ---
 
 <div class="place-items-center mt-10 m-4">
     <div class="flex place-content-center">
-        <a href="/">
+        <a href={getRelativeLocaleUrl(lang, '')}>
             <Umbrella/>
         </a>
     </div>
-    <p class="text-2xl text-white text-center">It's raining outside, take this</p>
-    <h1 class="text-6xl text-[#ffd300] font-bold text-center">Yellow Umbrella</h1>
+    <p class="text-2xl text-white text-center">{t('home.subtitle')}</p>
+    <h1 class="text-6xl text-[#ffd300] font-bold text-center">{t('home.title')}</h1>
     <nav class="mt-5">
         <ul class="flex flex-wrap justify-center gap-2">
-            <a href="/sobre-nosotros">
+            <a href={getRelativeLocaleUrl(lang, lang === 'es' ? 'sobre-nosotros' : 'about-us')}>
                 <button class="relative inline-flex items-center justify-center w-32 h-16 p-[2px] mb-2  mr-4 overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-[#ffd300] to-[#773376] group-hover:from-[#ffd300] group-hover:to-[#773376] hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-[#773376] dark:focus:ring-[#773376]">
                     <span class="relative w-full h-full px-2 py-1 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-[6px] group-hover:bg-opacity-0 flex items-center justify-center text-lg lg:text-base md:text-sm sm:text-xs text-center leading-tight">
-                        ¿Quiénes somos?
+                        {t('home.nav.about')}
                     </span>
                 </button>
             </a>
             <a href="https://blog.yellowumbrella.dev" target="_blank" rel="noreferrer">
                 <button class="relative inline-flex items-center justify-center w-32 h-16 p-[2px] mb-2 mr-4 overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-[#ffd300] to-[#773376] group-hover:from-[#ffd300] group-hover:to-[#773376] hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-[#773376] dark:focus:ring-[#773376]">
                     <span class="relative w-full h-full px-2 py-1 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-[6px] group-hover:bg-opacity-0 flex items-center justify-center text-xl lg:text-lg md:text-base sm:text-sm text-center leading-tight">
-                        Blog
+                        {t('home.nav.blog')}
                     </span>
                 </button>
             </a>
-            <a href="/redes-sociales">
+            <a href={getRelativeLocaleUrl(lang, lang === 'es' ? 'redes-sociales' : 'social-networks')}>
                 <button class="relative inline-flex items-center justify-center w-32 h-16 p-[2px] mb-2 mr-4 overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-[#ffd300] to-[#773376] group-hover:from-[#ffd300] group-hover:to-[#773376] hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-[#773376] dark:focus:ring-[#773376]">
                     <span class="relative w-full h-full px-2 py-1 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-[6px] group-hover:bg-opacity-0 flex items-center justify-center text-lg lg:text-base md:text-sm sm:text-xs text-center leading-tight">
-                        Redes sociales
+                        {t('home.nav.social')}
                     </span>
                 </button>
             </a>
-            <a href="/contacto">
+            <a href={getRelativeLocaleUrl(lang, lang === 'es' ? 'contacto' : 'contact')}>
                 <button class="relative inline-flex items-center justify-center w-32 h-16 p-[2px] mb-2 mr-4 overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-[#ffd300] to-[#773376] group-hover:from-[#ffd300] group-hover:to-[#773376] hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-[#773376] dark:focus:ring-[#773376]">
                     <span class="relative w-full h-full px-2 py-1 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-[6px] group-hover:bg-opacity-0 flex items-center justify-center text-xl lg:text-lg md:text-base sm:text-sm text-center leading-tight">
-                        Contacto
+                        {t('home.nav.contact')}
                     </span>
                 </button>
             </a>
diff --git a/src/components/LanguagePicker.astro b/src/components/LanguagePicker.astro
new file mode 100644
index 0000000..604cbfc
--- /dev/null
+++ b/src/components/LanguagePicker.astro
@@ -0,0 +1,57 @@
+---
+import { languages } from '../i18n/ui';
+import { getLangFromUrl, useTranslatedPath, getRouteFromUrl } from '../i18n/utils';
+import { getRelativeLocaleUrl } from 'astro:i18n';
+
+const lang = getLangFromUrl(Astro.url);
+const translatePath = useTranslatedPath(lang);
+
+// Obtener la ruta actual sin el prefijo del idioma
+const currentRoute = getRouteFromUrl(Astro.url) || '';
+---
+
+<div class="fixed top-5 right-5 z-[1000]">
+  <select 
+    id="language-select" 
+    class="bg-gray-900 text-white border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#ffd300] focus:border-transparent"
+  >
+    {Object.entries(languages).map(([langCode, label]) => {
+      const translatedRoute = translatePath(`/${currentRoute}`, langCode);
+      return (
+        <option 
+          value={langCode} 
+          selected={langCode === lang}
+          data-url={translatedRoute}
+        >
+          {label}
+        </option>
+      );
+    })}
+  </select>
+</div>
+
+<script>
+  function initLanguagePicker() {
+    const select = document.getElementById('language-select') as HTMLSelectElement;
+    
+    if (select) {
+      // Remover event listeners previos para evitar duplicados
+      const newSelect = select.cloneNode(true) as HTMLSelectElement;
+      select.parentNode?.replaceChild(newSelect, select);
+      
+      newSelect.addEventListener('change', function() {
+        const selectedOption = this.options[this.selectedIndex];
+        const url = selectedOption.getAttribute('data-url');
+        if (url) {
+          window.location.href = url;
+        }
+      });
+    }
+  }
+  
+  // Inicializar cuando se carga la página
+  document.addEventListener('DOMContentLoaded', initLanguagePicker);
+  
+  // Reinicializar después de cada transición de página de Astro
+  document.addEventListener('astro:page-load', initLanguagePicker);
+</script>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
new file mode 100644
index 0000000..ef45348
--- /dev/null
+++ b/src/components/Navigation.astro
@@ -0,0 +1,50 @@
+---
+import { getLangFromUrl, useTranslations } from '../i18n/utils';
+import { getRelativeLocaleUrl } from 'astro:i18n';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+const menuItems = [
+  { 
+    path: '', 
+    label: t('nav.home') 
+  },
+  { 
+    path: lang === 'es' ? 'sobre-nosotros' : 'about-us', 
+    label: t('nav.about') 
+  },
+  { 
+    path: lang === 'es' ? 'contacto' : 'contact', 
+    label: t('nav.contact') 
+  },
+  { 
+    path: lang === 'es' ? 'redes-sociales' : 'social-networks', 
+    label: t('nav.social') 
+  },
+];
+---
+
+<nav class="fixed top-20px left-20px z-1000 bg-white/5 backdrop-blur-md rounded-lg p-4">
+  <ul class="flex flex-col gap-2">
+    {menuItems.map((item) => (
+      <li>
+        <a 
+          href={getRelativeLocaleUrl(lang, item.path)} 
+          class="text-white hover:text-yellow-400 transition-colors duration-200 block text-sm"
+        >
+          {item.label}
+        </a>
+      </li>
+    ))}
+  </ul>
+</nav>
+
+<style>
+  nav {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    z-index: 999;
+  }
+</style>
diff --git a/src/i18n/react-utils.ts b/src/i18n/react-utils.ts
new file mode 100644
index 0000000..4a84b81
--- /dev/null
+++ b/src/i18n/react-utils.ts
@@ -0,0 +1,13 @@
+import { ui, defaultLang } from './ui';
+
+export function useTranslationsReact(lang: keyof typeof ui) {
+  return function t(key: keyof typeof ui[typeof defaultLang]) {
+    return ui[lang][key] || ui[defaultLang][key];
+  }
+}
+
+export function getLangFromUrlReact(url: string) {
+  const [, lang] = url.split('/');
+  if (lang in ui) return lang as keyof typeof ui;
+  return defaultLang;
+}
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
new file mode 100644
index 0000000..2a179b1
--- /dev/null
+++ b/src/i18n/ui.ts
@@ -0,0 +1,107 @@
+export const languages = {
+  es: 'Español',
+  en: 'English',
+};
+
+export const defaultLang = 'es';
+export const showDefaultLang = false;
+
+export const routes = {
+  en: {
+    'sobre-nosotros': 'about-us',
+    'contacto': 'contact',
+    'redes-sociales': 'social-networks',
+  },
+  es: {
+    'about-us': 'sobre-nosotros',
+    'contact': 'contacto',
+    'social-networks': 'redes-sociales',
+  },
+};
+
+export const ui = {
+  es: {
+    'site.title': 'Yellow Umbrella',
+    'site.description': 'The Yellow Umbrella Website ☂️',
+    'nav.home': 'Inicio',
+    'nav.about': 'Sobre nosotros',
+    'nav.contact': 'Contacto',
+    'nav.social': 'Redes sociales',
+    'home.title': 'Yellow Umbrella',
+    'home.subtitle': 'It\'s raining outside, take this',
+    'home.nav.about': '¿Quiénes somos?',
+    'home.nav.blog': 'Blog',
+    'home.nav.social': 'Redes sociales',
+    'home.nav.contact': 'Contacto',
+    'about.title': 'Sobre nosotros',
+    'about.description': 'Conoce quienes somos y cual es nuestra misión.',
+    'contact.title': 'Contacto',
+    'contact.description': 'Cuéntanos tu proyecto y te responderemos lo antes posible.',
+    'contact.form.company': 'Nombre de la empresa',
+    'contact.form.company.placeholder': 'Yellow Umbrella Tech',
+    'contact.form.company.required': 'Este campo es obligatorio',
+    'contact.form.name': 'Nombre y apellidos',
+    'contact.form.name.placeholder': 'Perico Palotes Palez',
+    'contact.form.name.required': 'Introduce tu nombre completo',
+    'contact.form.position': 'Cargo en la empresa (opcional)',
+    'contact.form.position.placeholder': 'CEO, CTO, etc.',
+    'contact.form.email': 'Email',
+    'contact.form.email.placeholder': 'ana.garcia@empresa.com',
+    'contact.form.email.required': 'Introduce un email válido',
+    'contact.form.phone': 'Teléfono (opcional)',
+    'contact.form.phone.placeholder': '+34 600 123 456',
+    'contact.form.phone.invalid': 'El número puede no ser válido. Revisa el país y formato.',
+    'contact.form.message': 'Mensaje',
+    'contact.form.message.placeholder': 'Cuéntanos en qué podemos ayudarte...',
+    'contact.form.captcha.required': 'Por favor, completa el captcha antes de enviar',
+    'contact.form.send': 'Enviar',
+    'contact.form.sending': 'Enviando...',
+    'contact.form.success': '¡Gracias! Hemos recibido tu solicitud.',
+    'contact.form.error': 'Error al enviar el formulario',
+    'social.title': 'Redes sociales',
+    'social.description': 'Enlaces a nuestras redes sociales:',
+    'language.switch': 'Cambiar idioma',
+  },
+  en: {
+    'site.title': 'Yellow Umbrella',
+    'site.description': 'The Yellow Umbrella Website ☂️',
+    'nav.home': 'Home',
+    'nav.about': 'About us',
+    'nav.contact': 'Contact',
+    'nav.social': 'Social networks',
+    'home.title': 'Yellow Umbrella',
+    'home.subtitle': 'It\'s raining outside, take this',
+    'home.nav.about': 'About us',
+    'home.nav.blog': 'Blog',
+    'home.nav.social': 'Socials',
+    'home.nav.contact': 'Contact',
+    'about.title': 'About us',
+    'about.description': 'Discover who we are and what is our mission.',
+    'contact.title': 'Contact',
+    'contact.description': 'Tell us about your project and we will contact you as soon as possible.',
+    'contact.form.company': 'Company name',
+    'contact.form.company.placeholder': 'Yellow Umbrella Tech',
+    'contact.form.company.required': 'This field is required',
+    'contact.form.name': 'Full name',
+    'contact.form.name.placeholder': 'Jane Doe',
+    'contact.form.name.required': 'Please enter your full name',
+    'contact.form.position': 'Position in company (optional)',
+    'contact.form.position.placeholder': 'CEO, CTO, etc.',
+    'contact.form.email': 'Email',
+    'contact.form.email.placeholder': 'jane.doe@company.com',
+    'contact.form.email.required': 'Please enter a valid email',
+    'contact.form.phone': 'Phone (optional)',
+    'contact.form.phone.placeholder': '+1 555 123 456',
+    'contact.form.phone.invalid': 'The number may not be valid. Check the country and format.',
+    'contact.form.message': 'Message',
+    'contact.form.message.placeholder': 'Tell us how we can help you...',
+    'contact.form.captcha.required': 'Please complete the captcha before submitting',
+    'contact.form.send': 'Send',
+    'contact.form.sending': 'Sending...',
+    'contact.form.success': 'Thank you! We have received your request.',
+    'contact.form.error': 'Error sending the form',
+    'social.title': 'Social networks',
+    'social.description': 'Links to our social networks:',
+    'language.switch': 'Change language',
+  },
+} as const;
diff --git a/src/i18n/utils.ts b/src/i18n/utils.ts
new file mode 100644
index 0000000..d357012
--- /dev/null
+++ b/src/i18n/utils.ts
@@ -0,0 +1,62 @@
+import { ui, defaultLang, routes } from './ui';
+
+export function getLangFromUrl(url: URL) {
+  const [, lang] = url.pathname.split('/');
+  if (lang in ui) return lang as keyof typeof ui;
+  return defaultLang;
+}
+
+export function useTranslations(lang: keyof typeof ui) {
+  return function t(key: keyof typeof ui[typeof defaultLang]) {
+    return ui[lang][key] || ui[defaultLang][key];
+  }
+}
+
+export function useTranslatedPath(lang: keyof typeof ui) {
+  return function translatePath(path: string, targetLang: string = lang) {
+    // Si es la página de inicio
+    if (!path || path === '/' || path === '') {
+      return `/${targetLang}/`;
+    }
+    
+    // Remover el slash inicial si existe
+    const cleanPath = path.startsWith('/') ? path.substring(1) : path;
+    
+    // Si el path está vacío después de limpiar, es página de inicio
+    if (!cleanPath) {
+      return `/${targetLang}/`;
+    }
+    
+    // Verificar si necesita traducción de ruta
+    if (routes[targetLang] && routes[targetLang][cleanPath]) {
+      const translatedRoute = routes[targetLang][cleanPath];
+      return `/${targetLang}/${translatedRoute}`;
+    }
+    
+    // Si no hay traducción, usar el path original
+    return `/${targetLang}/${cleanPath}`;
+  }
+}
+
+export function getRouteFromUrl(url: URL): string | undefined {
+  const pathname = url.pathname;
+  const parts = pathname.split('/').filter(Boolean); // Remover elementos vacíos
+  
+  if (parts.length === 0) {
+    return ''; // página de inicio
+  }
+  
+  // Si el primer elemento es un código de idioma, omítelo
+  const currentLang = getLangFromUrl(url);
+  if (parts[0] === currentLang) {
+    parts.shift(); // Remover el código de idioma
+  }
+  
+  // Si no hay más partes, es la página de inicio
+  if (parts.length === 0) {
+    return '';
+  }
+  
+  // Devolver la última parte como la ruta actual
+  return parts[parts.length - 1];
+}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index a1d9543..5a14200 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -7,12 +7,15 @@ const { title } = Astro.props;
 import { ViewTransitions } from 'astro:transitions';
 import { InteractiveRain } from "../components/Rain.jsx";
 import { fade } from 'astro:transitions';
+import { getLangFromUrl, useTranslations } from '../i18n/utils';
+import LanguagePicker from '../components/LanguagePicker.astro';
 
-
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
 ---
 
 <!doctype html>
-<html lang="en" transition:animate={fade({ duration: '0.5s' })}>
+<html lang={lang} transition:animate={fade({ duration: '0.5s' })}>
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
@@ -26,28 +29,29 @@ import { fade } from 'astro:transitions';
 		<meta name="theme-color" content="#ffffff">
 		<meta
         	name="description"
-        	content="The Yellow Umbrella Website ☂️ "
+        	content={t('site.description')}
       	/>
       	<meta
       	  name="keywords"
       	  content="YellowUmbrella, yellow, umbrella"
       	/>
-      	<meta property="og:title" content="The Yellow Umbrella" />
+      	<meta property="og:title" content={t('site.title')} />
       	<meta
       	  property="og:description"
-      	  content="The Yellow Umbrella Website ☂️"
+      	  content={t('site.description')}
       	/>
       	<meta property="og:image" content="https://yellowumbrella.dev/card.png" />
       	<meta property="og:url" content="https://yellowumbrella.dev/" />
       	<meta property="twitter:domain" content="yellowumbrella.dev"/>
       	<meta property="twitter:url" content="https://yellowumbrella.dev/"/>
-      	<meta name="twitter:title" content="The Yellow Umbrella"/>
-      	<meta name="twitter:description" content="The Yellow Umbrella Website ☂️"/>
+      	<meta name="twitter:title" content={t('site.title')}/>
+      	<meta name="twitter:description" content={t('site.description')}/>
       	<meta name="twitter:card" content="summary_large_image" />
       	<meta name="twitter:image" content="https://yellowumbrella.dev/card.png"/>
 		<ViewTransitions/>
 	</head>
 	<body class="no-scroll">
+		<LanguagePicker />
 		<slot />
 		<InteractiveRain client:only="react"></InteractiveRain>
 	</body>
diff --git a/src/pages/contacto.astro b/src/pages/contacto.astro
deleted file mode 100644
index d017388..0000000
--- a/src/pages/contacto.astro
+++ /dev/null
@@ -1,21 +0,0 @@
----
-import Layout from "../layouts/Layout.astro";
-import ContactForm from "../components/ContactForm.tsx";
-import Head from "../components/Head.astro";
----
-
-<Layout title="Contacto – Yellow Umbrella">
-  <Head />
-  <div class="mx-auto flex min-h-screen max-w-5xl items-center justify-center px-4">
-    <section class="w-full">
-      <div class="mb-8 text-center">
-        <h1 class="text-4xl font-bold text-white">Contacto</h1>
-        <p class="mt-2 text-white/70">
-          Cuéntanos tu proyecto y te responderemos lo antes posible.
-        </p>
-      </div>
-      <ContactForm client:load />
-    </section>
-  </div>
-</Layout>
-
diff --git a/src/pages/en/about-us.astro b/src/pages/en/about-us.astro
new file mode 100644
index 0000000..6fddb3c
--- /dev/null
+++ b/src/pages/en/about-us.astro
@@ -0,0 +1,32 @@
+---
+import Head from "../../components/Head.astro";
+import Layout from "../../layouts/Layout.astro";
+import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+<Layout title={`${t('about.title')} - ${t('site.title')}`}>
+    <Head/>
+    <div class="place-items-center m-4">
+        <div class="flex place-content-center">
+            <h1 class="text-white text-6xl">{t('about.title')}</h1>
+        </div>
+        <div class="flex place-content-center mx-auto max-w-2xl mt-10">
+            <span class="text-justify text-white font-monaspace">
+                Yellow Umbrella means many things. For you, if you are the owner 
+                of an emerging business, it means shelter and coverage for all your 
+                cloud, cybersecurity, and development needs.<br><br>
+
+                We are a small group dedicated to ensuring your company can grow peacefully in a world 
+                increasingly dependent on good software.<br><br>
+
+                Our values are clear: We are committed to
+                open source and accessibility to our services and projects. Our future together does not imply dependency. 
+                We seek to cover you and train your team so that when the time comes, you can close the umbrella 
+                and continue your path without us.
+            </span>
+        </div>
+    </div>
+</Layout>
diff --git a/src/pages/en/contact.astro b/src/pages/en/contact.astro
new file mode 100644
index 0000000..35ae5cf
--- /dev/null
+++ b/src/pages/en/contact.astro
@@ -0,0 +1,24 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import ContactForm from "../../components/ContactForm";
+import Head from "../../components/Head.astro";
+import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+<Layout title={`${t('contact.title')} – ${t('site.title')}`}>
+  <Head />
+  <div class="mx-auto flex min-h-screen max-w-5xl items-center justify-center px-4">
+    <section class="w-full">
+      <div class="mb-8 text-center">
+        <h1 class="text-4xl font-bold text-white">{t('contact.title')}</h1>
+        <p class="mt-2 text-white/70">
+          {t('contact.description')}
+        </p>
+      </div>
+      <ContactForm client:load lang={lang} />
+    </section>
+  </div>
+</Layout>
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
new file mode 100644
index 0000000..625eb51
--- /dev/null
+++ b/src/pages/en/index.astro
@@ -0,0 +1,16 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Head from "../../components/Head.astro";
+import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+<Layout title={t('site.title')}>
+	<div class="flex justify-center items-center h-screen ">
+		<div class="">
+			<Head/>
+		</div>
+	</div>
+</Layout>
diff --git a/src/pages/en/social-networks.astro b/src/pages/en/social-networks.astro
new file mode 100644
index 0000000..ff1a6fa
--- /dev/null
+++ b/src/pages/en/social-networks.astro
@@ -0,0 +1,45 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import SocialCard from "../../components/SocialCard.astro";
+import Head from "../../components/Head.astro";
+import data from "../../api/socials.json";
+import twitter from "../../images/twitter.svg";
+import github from "../../images/github-circle.svg";
+import linkedin from "../../images/linkedin.svg";
+import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+// Crear mapeo de iconos
+const iconMap = {
+  "twitter": twitter,
+  "github-circle": github,
+  "linkedin": linkedin
+};
+
+export const prerender = false
+---
+<Layout title={`${t('social.title')} - ${t('site.title')}`}>
+    <Head/>
+    <div class="place-items-center mt-10">
+        <div class="flex place-content-center">
+            <h1 class="text-white text-6xl">{t('social.title')}</h1>
+        </div>
+        <div class="flex place-content-center mx-auto max-w-2xl mt-2">
+            <p class="flex text-justify text-white">{t('social.description')}</p>
+        </div>
+        <div class="m-10 socials flex flex-wrap justify-center gap-6 max-w-4xl mx-auto">
+            {
+                data.socials.map((output, index) => (
+                <SocialCard
+                    key={index}
+                    icon={iconMap[output.icon]}
+                    name={output.name}
+                    link={output.link}
+                />
+                ))
+            }
+        </div>
+    </div>
+</Layout>
diff --git a/src/pages/es/contacto.astro b/src/pages/es/contacto.astro
new file mode 100644
index 0000000..35ae5cf
--- /dev/null
+++ b/src/pages/es/contacto.astro
@@ -0,0 +1,24 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import ContactForm from "../../components/ContactForm";
+import Head from "../../components/Head.astro";
+import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+<Layout title={`${t('contact.title')} – ${t('site.title')}`}>
+  <Head />
+  <div class="mx-auto flex min-h-screen max-w-5xl items-center justify-center px-4">
+    <section class="w-full">
+      <div class="mb-8 text-center">
+        <h1 class="text-4xl font-bold text-white">{t('contact.title')}</h1>
+        <p class="mt-2 text-white/70">
+          {t('contact.description')}
+        </p>
+      </div>
+      <ContactForm client:load lang={lang} />
+    </section>
+  </div>
+</Layout>
diff --git a/src/pages/es/index.astro b/src/pages/es/index.astro
new file mode 100644
index 0000000..625eb51
--- /dev/null
+++ b/src/pages/es/index.astro
@@ -0,0 +1,16 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Head from "../../components/Head.astro";
+import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+<Layout title={t('site.title')}>
+	<div class="flex justify-center items-center h-screen ">
+		<div class="">
+			<Head/>
+		</div>
+	</div>
+</Layout>
diff --git a/src/pages/redes-sociales.astro b/src/pages/es/redes-sociales.astro
similarity index 52%
rename from src/pages/redes-sociales.astro
rename to src/pages/es/redes-sociales.astro
index 71a60ed..ff1a6fa 100644
--- a/src/pages/redes-sociales.astro
+++ b/src/pages/es/redes-sociales.astro
@@ -1,41 +1,45 @@
----
-import Layout from "../layouts/Layout.astro";
-import SocialCard from "../components/SocialCard.astro";
-import Head from "../components/Head.astro";
-import data from "../api/socials.json";
-import twitter from "../images/twitter.svg";
-import github from "../images/github-circle.svg";
-import linkedin from "../images/linkedin.svg";
-
-// Crear mapeo de iconos
-const iconMap = {
-  "twitter": twitter,
-  "github-circle": github,
-  "linkedin": linkedin
-};
-
-export const prerender = false
----
-<Layout title="Redes sociales">
-    <Head/>
-    <div class="place-items-center mt-10">
-        <div class="flex place-content-center">
-            <h1 class="text-white text-6xl">Redes sociales</h1>
-        </div>
-        <div class="flex place-content-center mx-auto max-w-2xl mt-2">
-            <p class="flex text-justify text-white">Enlaces a nuestras redes sociales:</p>
-        </div>
-        <div class="m-10 socials flex flex-wrap justify-center gap-6 max-w-4xl mx-auto">
-            {
-                data.socials.map((output, index) => (
-                <SocialCard
-                    key={index}
-                    icon={iconMap[output.icon]}
-                    name={output.name}
-                    link={output.link}
-                />
-                ))
-            }
-        </div>
-    </div>
-</Layout>
\ No newline at end of file
+---
+import Layout from "../../layouts/Layout.astro";
+import SocialCard from "../../components/SocialCard.astro";
+import Head from "../../components/Head.astro";
+import data from "../../api/socials.json";
+import twitter from "../../images/twitter.svg";
+import github from "../../images/github-circle.svg";
+import linkedin from "../../images/linkedin.svg";
+import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+// Crear mapeo de iconos
+const iconMap = {
+  "twitter": twitter,
+  "github-circle": github,
+  "linkedin": linkedin
+};
+
+export const prerender = false
+---
+<Layout title={`${t('social.title')} - ${t('site.title')}`}>
+    <Head/>
+    <div class="place-items-center mt-10">
+        <div class="flex place-content-center">
+            <h1 class="text-white text-6xl">{t('social.title')}</h1>
+        </div>
+        <div class="flex place-content-center mx-auto max-w-2xl mt-2">
+            <p class="flex text-justify text-white">{t('social.description')}</p>
+        </div>
+        <div class="m-10 socials flex flex-wrap justify-center gap-6 max-w-4xl mx-auto">
+            {
+                data.socials.map((output, index) => (
+                <SocialCard
+                    key={index}
+                    icon={iconMap[output.icon]}
+                    name={output.name}
+                    link={output.link}
+                />
+                ))
+            }
+        </div>
+    </div>
+</Layout>
diff --git a/src/pages/sobre-nosotros.astro b/src/pages/es/sobre-nosotros.astro
similarity index 74%
rename from src/pages/sobre-nosotros.astro
rename to src/pages/es/sobre-nosotros.astro
index 2dedf93..511a5bb 100644
--- a/src/pages/sobre-nosotros.astro
+++ b/src/pages/es/sobre-nosotros.astro
@@ -1,31 +1,32 @@
----
-
-import Head from "../components/Head.astro";
-import Layout from "../layouts/Layout.astro";
-
-
----
-
-<Layout title="Sobre nosotros">
-    <Head/>
-    <div class="place-items-center m-4">
-        <div class="flex place-content-center">
-            <h1 class="text-white text-6xl">Sobre nosotros</h1>
-        </div>
-        <div class="flex place-content-center mx-auto max-w-2xl mt-10">
-            <span class="text-justify text-white font-monaspace">
-                Yellow Umbrella significa muchas cosas. Para tí, si eres el dueño 
-                de un negocio emergente, significa resguardo y cobertura de todas tus necesidades 
-                de cloud, ciberseguridad, y desarrollo.<br><br>
-
-                Somos un pequeño grupo dedicado a que tu empresa pueda crecer tranquila en un mundo cada vez 
-                más dependiente de un buen software.<br><br>
-
-                Nuestros valores son claros: Estamos comprometidos con el
-                código abierto y la accesibilidad a nuestros servicios y proyectos. Nuestro futuro juntos no implica dependencia. 
-                Buscamos cubrirte y entrenar a tu equipo para que llegado el momento, puedas cerrar el paragüas 
-                y continuar tu camino sin nosotros.
-            </span>
-        </div>
-    </div>
-</Layout>
\ No newline at end of file
+---
+import Head from "../../components/Head.astro";
+import Layout from "../../layouts/Layout.astro";
+import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+<Layout title={`${t('about.title')} - ${t('site.title')}`}>
+    <Head/>
+    <div class="place-items-center m-4">
+        <div class="flex place-content-center">
+            <h1 class="text-white text-6xl">{t('about.title')}</h1>
+        </div>
+        <div class="flex place-content-center mx-auto max-w-2xl mt-10">
+            <span class="text-justify text-white font-monaspace">
+                Yellow Umbrella significa muchas cosas. Para tí, si eres el dueño 
+                de un negocio emergente, significa resguardo y cobertura de todas tus necesidades 
+                de cloud, ciberseguridad, y desarrollo.<br><br>
+
+                Somos un pequeño grupo dedicado a que tu empresa pueda crecer tranquila en un mundo cada vez 
+                más dependiente de un buen software.<br><br>
+
+                Nuestros valores son claros: Estamos comprometidos con el
+                código abierto y la accesibilidad a nuestros servicios y proyectos. Nuestro futuro juntos no implica dependencia. 
+                Buscamos cubrirte y entrenar a tu equipo para que llegado el momento, puedas cerrar el paragüas 
+                y continuar tu camino sin nosotros.
+            </span>
+        </div>
+    </div>
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9732403..39d3888 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,12 +1,5 @@
 ---
-import Layout from "../layouts/Layout.astro";
-import Head from "../components/Head.astro";
+//Esta pagina es necesaria para que i18n funcione.
+// Redirección automática al idioma predeterminado (español)
+return Astro.redirect('/es/');
 ---
-
-<Layout title="Yellow Umbrella">
-	<div class="flex justify-center items-center h-screen ">
-		<div class="">
-			<Head/>
-		</div>
-	</div>
-</Layout>