+```
+
+### 4. Adding the Language Switcher
+
+The language switcher is automatically included in the main layout. To add it to other components:
+
+```astro
+---
+import LanguageSwitcher from '../components/LanguageSwitcher.astro';
+---
+
+
+```
+
+### 5. Creating Localized Links
+
+Use the `getLocalizedPath` function for navigation:
+
+```astro
+---
+import { getLocalizedPath, getLanguageFromPath } from '../lib/i18n';
+
+const currentLang = getLanguageFromPath(Astro.url.pathname);
+---
+
+About
+```
+
+## File Structure
+
+```
+src/
+├── lib/
+│ └── i18n.ts # Main i18n utilities and translations
+├── components/
+│ ├── LanguageSwitcher.astro # Language selection component
+│ └── ... # Other components
+├── pages/
+│ ├── [lang]/ # English-specific pages
+│ │ ├── index.astro # Redirects Spanish to root
+│ │ ├── elements.astro # Redirects Spanish to root
+│ │ └── ...
+│ ├── index.astro # Spanish default homepage
+│ ├── elements.astro # Spanish default elements page
+│ └── ... # Other Spanish default pages
+└── middleware.ts # Language routing middleware
+```
+
+## API Reference
+
+### Translation Functions
+
+#### `t(key, lang?)`
+Get a translation for a given key and language.
+
+```typescript
+t('nav.home', 'es') // Returns: "Inicio"
+t('nav.home', 'en') // Returns: "Home"
+```
+
+#### `getLanguageFromPath(pathname)`
+Extract language from URL path.
+
+```typescript
+getLanguageFromPath('/en/elements') // Returns: "en"
+getLanguageFromPath('/elements') // Returns: "es" (default)
+getLanguageFromPath('/') // Returns: "es" (default)
+```
+
+#### `getLocalizedPath(path, lang)`
+Generate a localized URL path.
+
+```typescript
+getLocalizedPath('/elements', 'es') // Returns: "/elements"
+getLocalizedPath('/elements', 'en') // Returns: "/en/elements"
+```
+
+#### `isSupportedLanguage(lang)`
+Check if a language is supported.
+
+```typescript
+isSupportedLanguage('es') // Returns: true
+isSupportedLanguage('fr') // Returns: false
+```
+
+### Constants
+
+- `SUPPORTED_LANGUAGES` - Array of supported language codes (['es', 'en'])
+- `DEFAULT_LANGUAGE` - Default language code ('es')
+- `TranslationKey` - TypeScript type for translation keys
+
+## Adding New Languages
+
+1. Add the language code to `SUPPORTED_LANGUAGES` in `src/lib/i18n.ts`
+2. Add translations for the new language in the `translations` object
+3. Update the language switcher component if needed
+4. Create language-specific pages in `src/pages/[lang]/`
+
+Example for French:
+
+```typescript
+export const SUPPORTED_LANGUAGES = ['es', 'en', 'fr'] as const;
+
+const translations = {
+ es: { /* Spanish translations */ },
+ en: { /* English translations */ },
+ fr: { /* French translations */ }
+}
+```
+
+## Best Practices
+
+1. **Use descriptive keys**: Use namespaced keys like `nav.home`, `elements.title`
+2. **Keep translations organized**: Group related translations together
+3. **Test all languages**: Ensure all translations are complete
+4. **Use TypeScript**: Leverage the `TranslationKey` type for type safety
+5. **Handle missing translations**: The system falls back to the default language
+6. **Spanish first**: Always put Spanish translations first in the dictionary
+
+## SEO Considerations
+
+- Spanish content is served at root URLs (better for SEO)
+- English content has `/en/` prefix
+- Language is properly set in the HTML `lang` attribute
+- Search engines can index content in multiple languages
+- Use proper hreflang tags if needed for advanced SEO
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Translation not found**: Check if the key exists in all language dictionaries
+2. **Language not detected**: Ensure the URL follows the correct pattern
+3. **Redirect loops**: Check middleware configuration
+4. **Type errors**: Use the `TranslationKey` type for translation keys
+
+### Debug Mode
+
+Enable debug logging by adding console logs in the i18n functions:
+
+```typescript
+export function t(key: TranslationKey, lang: SupportedLanguage = DEFAULT_LANGUAGE): string {
+ console.log(`Translating: ${key} for language: ${lang}`);
+ // ... rest of function
+}
+```
\ No newline at end of file
diff --git a/client/src/components/LanguageSwitcher.astro b/client/src/components/LanguageSwitcher.astro
new file mode 100644
index 00000000..9cfb90cf
--- /dev/null
+++ b/client/src/components/LanguageSwitcher.astro
@@ -0,0 +1,49 @@
+---
+import { SUPPORTED_LANGUAGES, getLanguageFromPath, getLocalizedPath, type SupportedLanguage } from '../lib/i18n';
+
+// Get current language from URL
+const currentPath = Astro.url.pathname;
+const currentLang = getLanguageFromPath(currentPath);
+
+// Generate language options
+const languageOptions = SUPPORTED_LANGUAGES.map(lang => ({
+ code: lang,
+ name: lang === 'es' ? 'Español' : 'English',
+ path: getLocalizedPath(currentPath, lang),
+ isCurrent: lang === currentLang
+}));
+---
+
+
+
+
+
+
\ No newline at end of file
diff --git a/client/src/components/Navigation.astro b/client/src/components/Navigation.astro
index 224882e3..64317ff1 100644
--- a/client/src/components/Navigation.astro
+++ b/client/src/components/Navigation.astro
@@ -1,5 +1,9 @@
---
// Navigation component for Pole Sport website
+import { t, getLanguageFromPath, getLocalizedPath } from "../lib/i18n";
+
+// Get current language from URL
+const currentLang = getLanguageFromPath(Astro.url.pathname);
---