make the languages clickable and actually translate the website

index.html

@@ -87,16 +87,16 @@
                     <div class="relative group">
                         <button class="flex items-center space-x-1 bg-black bg-opacity-50 px-3 py-2 rounded-lg border border-yellow-500">
                             <i data-feather="globe" class="text-yellow-500"></i>
-                            <span class="text-white">EN</span>
+                            <span class="text-white" id="current-language">EN</span>
                         </button>
-<div class="absolute right-0 mt-2 w-48 bg-black border border-yellow-500 rounded-lg shadow-lg py-1 z-20 hidden group-hover:block">
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">English</a>
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">Español</a>
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">Français</a>
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">Deutsch</a>
+                        <div class="absolute right-0 mt-2 w-48 bg-black border border-yellow-500 rounded-lg shadow-lg py-1 z-20 hidden group-hover:block">
+                            <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="en">English</a>
+                            <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="es">Español</a>
+                            <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="fr">Français</a>
+                            <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="de">Deutsch</a>
                         </div>
                     </div>
-                    <a href="login.html" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center">
+<a href="login.html" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center">
                         <i data-feather="user" class="mr-2"></i> Login
                     </a>
 <script>
@@ -578,10 +578,52 @@ description: 'Full suite with AI analysis, custom builds, and coaching'
             <a href="results.html" class="text-2xl text-white hover:text-yellow-500 transition">Results</a>
         </div>
     </div>
+    <!-- Add i18next libraries -->
+    <script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
+    <script src="https://unpkg.com/i18next-browser-languagedetector/i18nextBrowserLanguageDetector.js"></script>
+    <script src="https://unpkg.com/i18next-http-backend/i18nextHttpBackend.js"></script>
 
     <script>
+        // Initialize i18next
+        i18next
+            .use(i18nextBrowserLanguageDetector)
+            .use(i18nextHttpBackend)
+            .init({
+                fallbackLng: 'en',
+                debug: false,
+                backend: {
+                    loadPath: '/locales/{{lng}}/translation.json'
+                }
+            }, function(err, t) {
+                // Initial translations loaded
+                updateContent();
+            });
+
+        // Language switcher
+        document.querySelectorAll('.language-switch').forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                const lang = e.target.getAttribute('data-lang');
+                i18next.changeLanguage(lang, () => {
+                    document.getElementById('current-language').textContent = lang.toUpperCase();
+                    updateContent();
+                });
+            });
+        });
+
+        // Update page content
+        function updateContent() {
+            // Translate all elements with data-i18n attribute
+            document.querySelectorAll('[data-i18n]').forEach(el => {
+                el.textContent = i18next.t(el.getAttribute('data-i18n'));
+            });
+            
+            // Update any other dynamic text as needed
+            document.title = i18next.t('title');
+        }
+
         // Mobile menu toggle
-        const mobileMenuButton = document.getElementById('mobile-menu-button');
+const mobileMenuButton = document.getElementById('mobile-menu-button');
         const mobileMenu = document.getElementById('mobile-menu');
         const mobileMenuClose = document.getElementById('mobile-menu-close');
         

locales/de/translation.json

@@ -0,0 +1,57 @@
+```json
+{
+    "title": "Amplify - Mentale Leistung für Champions",
+    "home": "Startseite",
+    "features": "Funktionen",
+    "pricing": "Preise",
+    "about": "Über uns",
+    "currency": "Währung",
+    "events": "Veranstaltungen",
+    "results": "Ergebnisse",
+    "login": "Anmelden",
+    "amplify_your_mind": "VERSTÄRKEN SIE IHRE GEDANKEN",
+    "vr_description": "VR- und AR-Mentaltraining für Sportler und Künstler. Bezwingen Sie Nervosität. Bauen Sie Selbstvertrauen auf. Beherrschen Sie den Moment.",
+    "get_started": "Loslegen",
+    "watch_demo": "Demo ansehen"
+}
+```
+
+Then update all navigation links and text elements in the HTML files to use the translation system. For example:
+
+<<<<<<< SEARCH
+                <a href="index.html" class="text-white hover:text-yellow-500 transition">Home</a>
+=======
+                <a href="index.html" class="text-white hover:text-yellow-500 transition" data-i18n="home">Home</a>
+>>>>>>> REPLACE
+
+And for the hero section:
+<<<<<<< SEARCH
+                    <h1 class="text-5xl md:text-7xl font-bold font-['Bebas+Neue'] mb-6 tracking-wider">
+                        <span class="text-yellow-500 glow-text">AMPLIFY</span> YOUR MIND
+                    </h1>
+                    <p class="text-xl md:text-2xl mb-8 text-gray-300">
+                        VR & AR mental training for athletes and performers. 
+                        <span class="text-yellow-500 font-bold">Conquer nerves.</span> 
+                        <span class="text-red-500 font-bold">Build confidence.</span> 
+                        <span class="text-yellow-500 font-bold">Own the moment.</span>
+                    </p>
+=======
+                    <h1 class="text-5xl md:text-7xl font-bold font-['Bebas+Neue'] mb-6 tracking-wider">
+                        <span class="text-yellow-500 glow-text">AMPLIFY</span> <span data-i18n="amplify_your_mind">YOUR MIND</span>
+                    </h1>
+                    <p class="text-xl md:text-2xl mb-8 text-gray-300" data-i18n="vr_description">
+                        VR & AR mental training for athletes and performers. 
+                        <span class="text-yellow-500 font-bold">Conquer nerves.</span> 
+                        <span class="text-red-500 font-bold">Build confidence.</span> 
+                        <span class="text-yellow-500 font-bold">Own the moment.</span>
+                    </p>
+>>>>>>> REPLACE
+
+You'll need to:
+1. Create a `/locales` folder in your project root
+2. Add subfolders for each language (en, es, fr, de)
+3. Add translation.json files in each language folder
+4. Update all text elements in all HTML files to use the data-i18n attribute
+5. The language selector will now work and persist across pages
+
+The translations will be automatically loaded based on the user's browser language preferences, and can be changed via the language dropdown which will persist across pages.

locales/en/translation.json

@@ -0,0 +1,17 @@
+```json
+{
+    "title": "Amplify - Mental Performance for Champions",
+    "home": "Home",
+    "features": "Features",
+    "pricing": "Pricing",
+    "about": "About",
+    "currency": "Currency",
+    "events": "Events",
+    "results": "Results",
+    "login": "Login",
+    "amplify_your_mind": "AMPLIFY YOUR MIND",
+    "vr_description": "VR & AR mental training for athletes and performers. Conquer nerves. Build confidence. Own the moment.",
+    "get_started": "Get Started",
+    "watch_demo": "Watch Demo"
+}
+```

locales/es/translation.json

@@ -0,0 +1,17 @@
+```json
+{
+    "title": "Amplify - Rendimiento Mental para Campeones",
+    "home": "Inicio",
+    "features": "Características",
+    "pricing": "Precios",
+    "about": "Acerca de",
+    "currency": "Moneda",
+    "events": "Eventos",
+    "results": "Resultados",
+    "login": "Iniciar sesión",
+    "amplify_your_mind": "AMPLIFICA TU MENTE",
+    "vr_description": "Entrenamiento mental con VR y AR para atletas y artistas. Conquista los nervios. Desarrolla confianza. Domina el momento.",
+    "get_started": "Comenzar",
+    "watch_demo": "Ver Demo"
+}
+```

locales/fr/translation.json

@@ -0,0 +1,17 @@
+```json
+{
+    "title": "Amplify - Performance Mentale pour Champions",
+    "home": "Accueil",
+    "features": "Fonctionnalités",
+    "pricing": "Tarification",
+    "about": "À propos",
+    "currency": "Devise",
+    "events": "Événements",
+    "results": "Résultats",
+    "login": "Connexion",
+    "amplify_your_mind": "AMPLIFIEZ VOTRE ESPRIT",
+    "vr_description": "Entraînement mental en RV et RA pour les athlètes et les artistes. Vainquez le stress. Bâtissez la confiance. Maîtrisez le moment.",
+    "get_started": "Commencer",
+    "watch_demo": "Voir la démo"
+}
+```