Hi so for the language option can you actually make it clickable and work. So let say if I click Spanish it actually translate my website to spanish

index.html

@@ -626,21 +626,119 @@ Get Started
     <script src="https://unpkg.com/i18next-http-backend/i18nextHttpBackend.js"></script>
 
     <script>
-        // Initialize i18next
+        // Initialize i18next with translations
         i18next
             .use(i18nextBrowserLanguageDetector)
-            .use(i18nextHttpBackend)
             .init({
                 fallbackLng: 'en',
                 debug: false,
-                backend: {
-                    loadPath: '/locales/{{lng}}/translation.json'
+                resources: {
+                    en: {
+                        translation: {
+                            "home": "Home",
+                            "features": "Features",
+                            "pricing": "Pricing",
+                            "about": "About",
+                            "currency": "Currency",
+                            "events": "Events",
+                            "results": "Results",
+                            "login": "Login",
+                            "title": "Amplify - Mental Performance for Champions",
+                            "hero_title": "AMPLIFY YOUR MIND",
+                            "hero_subtitle": "VR & AR mental training for athletes and performers.",
+                            "get_started": "Get Started",
+                            "watch_demo": "Watch Demo",
+                            "train_your_mind": "TRAIN YOUR MIND",
+                            "vr_scenarios": "VR Scenarios",
+                            "vr_desc": "Immersive virtual reality puts you in high-pressure situations before the big moment.",
+                            "ar_training": "AR Training",
+                            "ar_desc": "Augmented reality overlays provide real-time feedback on posture, breathing, and movement.",
+                            "biometrics": "Biometrics",
+                            "bio_desc": "Track heart rate, breathing patterns, and stress levels to understand your physiological responses."
+                            // Add more translations as needed
+                        }
+                    },
+                    es: {
+                        translation: {
+                            "home": "Inicio",
+                            "features": "Características",
+                            "pricing": "Precios",
+                            "about": "Sobre nosotros",
+                            "currency": "Moneda",
+                            "events": "Eventos",
+                            "results": "Resultados",
+                            "login": "Iniciar sesión",
+                            "title": "Amplify - Rendimiento mental para campeones",
+                            "hero_title": "AMPLIFICA TU MENTE",
+                            "hero_subtitle": "Entrenamiento mental con VR y AR para atletas y artistas.",
+                            "get_started": "Comenzar",
+                            "watch_demo": "Ver demo",
+                            "train_your_mind": "ENTRENA TU MENTE",
+                            "vr_scenarios": "Escenarios VR",
+                            "vr_desc": "La realidad virtual inmersiva te coloca en situaciones de alta presión antes del gran momento.",
+                            "ar_training": "Entrenamiento AR",
+                            "ar_desc": "Las superposiciones de realidad aumentada proporcionan retroalimentación en tiempo real sobre postura, respiración y movimiento.",
+                            "biometrics": "Biometría",
+                            "bio_desc": "Monitorea ritmo cardíaco, patrones de respiración y niveles de estrés para entender tus respuestas fisiológicas."
+                            // Add more Spanish translations as needed
+                        }
+                    },
+                    fr: {
+                        translation: {
+                            "home": "Accueil",
+                            "features": "Fonctionnalités",
+                            "pricing": "Tarifs",
+                            "about": "À propos",
+                            "currency": "Devise",
+                            "events": "Événements",
+                            "results": "Résultats",
+                            "login": "Connexion",
+                            "title": "Amplify - Performance mentale pour les champions",
+                            "hero_title": "AMPLIFIEZ VOTRE ESPRIT",
+                            "hero_subtitle": "Formation mentale en VR et AR pour les athlètes et les artistes.",
+                            "get_started": "Commencer",
+                            "watch_demo": "Voir la démo",
+                            "train_your_mind": "ENTRAÎNEZ VOTRE ESPRIT",
+                            "vr_scenarios": "Scénarios VR",
+                            "vr_desc": "La réalité virtuelle immersive vous place dans des situations de haute pression avant le grand moment.",
+                            "ar_training": "Formation AR",
+                            "ar_desc": "Les superpositions de réalité augmentée fournissent des commentaires en temps réel sur la posture, la respiration et le mouvement.",
+                            "biometrics": "Biométrie",
+                            "bio_desc": "Suivez la fréquence cardiaque, les schémas respiratoires et les niveaux de stress pour comprendre vos réponses physiologiques."
+                            // Add more French translations as needed
+                        }
+                    },
+                    de: {
+                        translation: {
+                            "home": "Startseite",
+                            "features": "Funktionen",
+                            "pricing": "Preise",
+                            "about": "Über uns",
+                            "currency": "Währung",
+                            "events": "Veranstaltungen",
+                            "results": "Ergebnisse",
+                            "login": "Anmelden",
+                            "title": "Amplify - Mentale Leistung für Champions",
+                            "hero_title": "VERSTÄRKEN SIE IHREN GEIST",
+                            "hero_subtitle": "VR- und AR-Mentaltraining für Sportler und Künstler.",
+                            "get_started": "Loslegen",
+                            "watch_demo": "Demo ansehen",
+                            "train_your_mind": "TRAINIEREN SIE IHREN GEIST",
+                            "vr_scenarios": "VR-Szenarien",
+                            "vr_desc": "Immersives Virtual Reality versetzt Sie in Hochdrucksituationen vor dem großen Moment.",
+                            "ar_training": "AR-Training",
+                            "ar_desc": "Augmented-Realität-Overlays liefern Echtzeit-Feedback zu Haltung, Atmung und Bewegung.",
+                            "biometrics": "Biometrie",
+                            "bio_desc": "Verfolgen Sie Herzfrequenz, Atemmuster und Stresslevel, um Ihre physiologischen Reaktionen zu verstehen."
+                            // Add more German translations as needed
+                        }
+                    }
                 }
             }, function(err, t) {
                 // Initial translations loaded
                 updateContent();
             });
-        // Language switcher
+// Language switcher
         const languageButton = document.getElementById('language-button');
         const languageDropdown = document.getElementById('language-dropdown');
         
@@ -667,18 +765,56 @@ Get Started
                 languageDropdown.classList.add('hidden');
             }
         });
-// Update page content
+        // Update page content with translations
         function updateContent() {
-            // Translate all elements with data-i18n attribute
-            document.querySelectorAll('[data-i18n]').forEach(el => {
-                el.textContent = i18next.t(el.getAttribute('data-i18n'));
+            // Update navigation items
+            document.querySelectorAll('nav a[href="index.html"]').forEach(el => {
+                el.textContent = i18next.t('home');
             });
-            
-            // Update any other dynamic text as needed
+            document.querySelectorAll('nav a[href="index.html#features"]').forEach(el => {
+                el.textContent = i18next.t('features');
+            });
+            document.querySelectorAll('nav a[href="index.html#pricing"]').forEach(el => {
+                el.textContent = i18next.t('pricing');
+            });
+            document.querySelectorAll('nav a[href="about.html"]').forEach(el => {
+                el.textContent = i18next.t('about');
+            });
+            document.querySelectorAll('nav a[href="currency.html"]').forEach(el => {
+                el.textContent = i18next.t('currency');
+            });
+            document.querySelectorAll('nav a[href="events.html"]').forEach(el => {
+                el.textContent = i18next.t('events');
+            });
+            document.querySelectorAll('nav a[href="results.html"]').forEach(el => {
+                el.textContent = i18next.t('results');
+            });
+            document.querySelectorAll('nav a[href="login.html"]').forEach(el => {
+                el.textContent = i18next.t('login');
+            });
+
+            // Update hero section
+            document.querySelector('h1 span.text-yellow-500').textContent = i18next.t('hero_title');
+            document.querySelector('section.hero-gradient p').textContent = i18next.t('hero_subtitle');
+            document.querySelector('section.hero-gradient button:nth-of-type(1)').textContent = i18next.t('get_started');
+            document.querySelector('section.hero-gradient button:nth-of-type(2)').textContent = i18next.t('watch_demo');
+
+            // Update features section
+            document.querySelector('section#features h2').textContent = i18next.t('train_your_mind');
+            document.querySelectorAll('section#features h3')[0].textContent = i18next.t('vr_scenarios');
+            document.querySelectorAll('section#features p')[2].textContent = i18next.t('vr_desc');
+            document.querySelectorAll('section#features h3')[1].textContent = i18next.t('ar_training');
+            document.querySelectorAll('section#features p')[3].textContent = i18next.t('ar_desc');
+            document.querySelectorAll('section#features h3')[2].textContent = i18next.t('biometrics');
+            document.querySelectorAll('section#features p')[4].textContent = i18next.t('bio_desc');
+
+            // Update document title
             document.title = i18next.t('title');
+            
+            // Re-render feather icons after text changes
+            feather.replace();
         }
-
-        // Mobile menu toggle
+// Mobile menu toggle
 const mobileMenuButton = document.getElementById('mobile-menu-button');
         const mobileMenu = document.getElementById('mobile-menu');
         const mobileMenuClose = document.getElementById('mobile-menu-close');