make it in both French and English

components/footer.js

@@ -35,8 +35,8 @@ class CustomFooter extends HTMLElement {
           <a href="#"><i data-feather="youtube"></i></a>
           <a href="#"><i data-feather="music"></i></a>
         </div>
-        <p class="copyright">&copy; ${new Date().getFullYear()} M.e.B. All rights reserved. Made with anger and electricity.</p>
-      </footer>
+        <p class="copyright">&copy; ${new Date().getFullYear()} M.e.B. <span data-translate="rights">All rights reserved. Made with anger and electricity.</span></p>
+</footer>
     `;
   }
 }

components/navbar.js

@@ -69,16 +69,16 @@ class CustomNavbar extends HTMLElement {
           }
         }
       </style>
-      <nav>
+        <nav>
         <div class="logo">M<span>.e</span>B</div>
         <ul>
-          <li><a href="#home">Home</a></li>
-          <li><a href="#about">The Band</a></li>
-          <li><a href="#music">Music</a></li>
-          <li><a href="#shows">Shows</a></li>
-          <li><a href="#contact">Contact</a></li>
+          <li><a href="#home" data-translate="home">Home</a></li>
+          <li><a href="#about" data-translate="band">The Band</a></li>
+          <li><a href="#music" data-translate="music">Music</a></li>
+          <li><a href="#shows" data-translate="shows">Shows</a></li>
+          <li><a href="#contact" data-translate="contact">Contact</a></li>
         </ul>
-        <div class="mobile-menu">
+<div class="mobile-menu">
           <i data-feather="menu" class="text-white w-8 h-8"></i>
         </div>
       </nav>

index.html

@@ -32,8 +32,8 @@
     <section class="relative py-32 px-6 z-10">
         <div class="max-w-6xl mx-auto text-center">
             <h1 class="text-6xl md:text-8xl font-bold mb-6 tracking-tight">M.e.B</h1>
-            <p class="text-xl md:text-2xl mb-10 font-mono uppercase">Breaking walls since 2012</p>
-            <div class="flex justify-center gap-4">
+            <p class="text-xl md:text-2xl mb-10 font-mono uppercase" data-translate="tagline">Breaking walls since 2012</p>
+<div class="flex justify-center gap-4">
                 <a href="#shows" class="px-6 py-3 bg-red-600 hover:bg-red-700 rounded-md font-bold uppercase tracking-wider">Upcoming Shows</a>
                 <a href="#music" class="px-6 py-3 border-2 border-white hover:bg-white hover:text-black rounded-md font-bold uppercase tracking-wider">Our Music</a>
             </div>
@@ -43,9 +43,8 @@
     <!-- About Section -->
     <section id="about" class="relative py-20 px-6 z-10 bg-black bg-opacity-80">
         <div class="max-w-6xl mx-auto">
-            <h2 class="text-4xl font-bold mb-12 text-center uppercase border-b-2 border-red-600 pb-4 inline-block">The Band</h2>
-            
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mt-12">
+            <h2 class="text-4xl font-bold mb-12 text-center uppercase border-b-2 border-red-600 pb-4 inline-block" data-translate="band">The Band</h2>
+<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mt-12">
                 <!-- Band Member 1 -->
                 <div class="text-center">
                     <div class="w-40 h-40 mx-auto mb-4 overflow-hidden rounded-full border-4 border-red-600">
@@ -88,21 +87,20 @@
             </div>
 
             <div class="mt-16 max-w-3xl mx-auto text-center">
-                <p class="text-xl leading-relaxed">
+                <p class="text-xl leading-relaxed" data-translate="aboutText">
                     M.e.B formed in a basement in 2012 when four angry teenagers decided the world needed more noise. 
                     Since then, we've been tearing up stages across the country with our raw energy and unapologetic sound. 
                     We don't do pretty - we do loud, fast, and in your face.
                 </p>
-            </div>
+</div>
         </div>
     </section>
 
     <!-- Music Section -->
     <section id="music" class="relative py-20 px-6 z-10">
         <div class="max-w-6xl mx-auto">
-            <h2 class="text-4xl font-bold mb-12 text-center uppercase border-b-2 border-red-600 pb-4 inline-block">Our Noise</h2>
-            
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
+            <h2 class="text-4xl font-bold mb-12 text-center uppercase border-b-2 border-red-600 pb-4 inline-block" data-translate="music">Our Noise</h2>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
                 <!-- Album 1 -->
                 <div class="bg-black bg-opacity-80 p-6 rounded-lg hover:scale-105 transition-transform">
                     <div class="mb-4 overflow-hidden rounded-lg">
@@ -115,8 +113,8 @@
                         <li>Concrete Dreams</li>
                         <li>Noise Complaint</li>
                     </ol>
-                    <button class="mt-4 px-4 py-2 bg-red-600 hover:bg-red-700 rounded-md font-bold uppercase text-sm">Listen</button>
-                </div>
+                    <button class="mt-4 px-4 py-2 bg-red-600 hover:bg-red-700 rounded-md font-bold uppercase text-sm" data-translate="listen">Listen</button>
+</div>
 
                 <!-- Album 2 -->
                 <div class="bg-black bg-opacity-80 p-6 rounded-lg hover:scale-105 transition-transform">
@@ -154,13 +152,12 @@
     <!-- Shows Section -->
     <section id="shows" class="relative py-20 px-6 z-10 bg-black bg-opacity-80">
         <div class="max-w-6xl mx-auto">
-            <h2 class="text-4xl font-bold mb-12 text-center uppercase border-b-2 border-red-600 pb-4 inline-block">Live & Loud</h2>
-            
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12">
+            <h2 class="text-4xl font-bold mb-12 text-center uppercase border-b-2 border-red-600 pb-4 inline-block" data-translate="shows">Live & Loud</h2>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12">
                 <!-- Past Shows -->
                 <div>
-                    <h3 class="text-2xl font-bold mb-6 text-red-400 uppercase">Past Shows</h3>
-                    <div class="space-y-4">
+                    <h3 class="text-2xl font-bold mb-6 text-red-400 uppercase" data-translate="pastShows">Past Shows</h3>
+<div class="space-y-4">
                         <div class="border-l-4 border-red-600 pl-4 py-2">
                             <p class="font-bold">June 15, 2023</p>
                             <p>The Riot Club, NYC</p>
@@ -181,14 +178,14 @@
 
                 <!-- Upcoming Shows -->
                 <div>
-                    <h3 class="text-2xl font-bold mb-6 text-red-400 uppercase">Upcoming Shows</h3>
-                    <div class="space-y-4">
+                    <h3 class="text-2xl font-bold mb-6 text-red-400 uppercase" data-translate="upcomingShows">Upcoming Shows</h3>
+<div class="space-y-4">
                         <div class="border-l-4 border-red-600 pl-4 py-2">
                             <p class="font-bold">August 12, 2023</p>
                             <p>The Basement, Austin</p>
                             <p class="text-sm text-red-400">Tickets Available</p>
-                            <button class="mt-2 px-3 py-1 bg-red-600 hover:bg-red-700 rounded-md font-bold uppercase text-xs">Get Tickets</button>
-                        </div>
+                            <button class="mt-2 px-3 py-1 bg-red-600 hover:bg-red-700 rounded-md font-bold uppercase text-xs" data-translate="tickets">Get Tickets</button>
+</div>
                         <div class="border-l-4 border-red-600 pl-4 py-2">
                             <p class="font-bold">September 5, 2023</p>
                             <p>Chaos Factory, Seattle</p>
@@ -210,13 +207,12 @@
     <!-- Contact Section -->
     <section id="contact" class="relative py-20 px-6 z-10">
         <div class="max-w-6xl mx-auto">
-            <h2 class="text-4xl font-bold mb-12 text-center uppercase border-b-2 border-red-600 pb-4 inline-block">Join The Riot</h2>
-            
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mt-12">
+            <h2 class="text-4xl font-bold mb-12 text-center uppercase border-b-2 border-red-600 pb-4 inline-block" data-translate="contact">Join The Riot</h2>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-12 mt-12">
                 <!-- Social Media -->
                 <div class="bg-black bg-opacity-80 p-8 rounded-lg">
-                    <h3 class="text-2xl font-bold mb-6">Follow The Chaos</h3>
-                    <div class="flex space-x-6">
+                    <h3 class="text-2xl font-bold mb-6" data-translate="social">Follow The Chaos</h3>
+<div class="flex space-x-6">
                         <a href="#" class="text-white hover:text-red-400 transition-colors">
                             <i data-feather="facebook" class="w-8 h-8"></i>
                         </a>
@@ -237,8 +233,8 @@
 
                 <!-- Contact Form -->
                 <div class="bg-black bg-opacity-80 p-8 rounded-lg">
-                    <h3 class="text-2xl font-bold mb-6">Book Us / Contact</h3>
-                    <form class="space-y-4">
+                    <h3 class="text-2xl font-bold mb-6" data-translate="contactForm">Book Us / Contact</h3>
+<form class="space-y-4">
                         <div>
                             <label for="name" class="block mb-1">Name</label>
                             <input type="text" id="name" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-red-600">
@@ -251,8 +247,8 @@
                             <label for="message" class="block mb-1">Message</label>
                             <textarea id="message" rows="4" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-red-600"></textarea>
                         </div>
-                        <button type="submit" class="px-6 py-3 bg-red-600 hover:bg-red-700 rounded-md font-bold uppercase tracking-wider">Send</button>
-                    </form>
+                        <button type="submit" class="px-6 py-3 bg-red-600 hover:bg-red-700 rounded-md font-bold uppercase tracking-wider" data-translate="send">Send</button>
+</form>
                 </div>
             </div>
         </div>

script.js

@@ -1,9 +1,74 @@
-// Initialize feather icons
+
+// Translation dictionary
+const translations = {
+    en: {
+        title: "M.e.B - Punk Rock Revolution",
+        tagline: "Breaking walls since 2012",
+        band: "The Band",
+        aboutText: "M.e.B formed in a basement in 2012 when four angry teenagers decided the world needed more noise. Since then, we've been tearing up stages across the country with our raw energy and unapologetic sound. We don't do pretty - we do loud, fast, and in your face.",
+        music: "Our Noise",
+        shows: "Live & Loud",
+        pastShows: "Past Shows",
+        upcomingShows: "Upcoming Shows",
+        contact: "Join The Riot",
+        social: "Follow The Chaos",
+        contactForm: "Book Us / Contact",
+        tickets: "Get Tickets",
+        listen: "Listen",
+        send: "Send",
+        language: "Français"
+    },
+    fr: {
+        title: "M.e.B - Révolution Punk Rock", 
+        tagline: "On casse les murs depuis 2012",
+        band: "Le Groupe",
+        aboutText: "M.e.B s'est formé dans un sous-sol en 2012 lorsque quatre adolescents en colère ont décidé que le monde avait besoin de plus de bruit. Depuis, nous déchirons les scènes à travers le pays avec notre énergie brute et notre son sans compromis. Nous ne faisons pas dans le joli - nous faisons dans le bruyant, rapide et agressif.",
+        music: "Notre Son",
+        shows: "En Concert",
+        pastShows: "Concerts Passés",
+        upcomingShows: "Prochains Concerts",
+        contact: "Rejoignez l'Émeute",
+        social: "Suivez le Chaos",
+        contactForm: "Réservation / Contact",
+        tickets: "Billets",
+        listen: "Écouter",
+        send: "Envoyer",
+        language: "English"
+    }
+};
+
+let currentLanguage = 'en';
+
+// Function to update page content
+function updateContent() {
+    const lang = translations[currentLanguage];
+    document.title = lang.title;
+    
+    // Update text elements
+    document.querySelectorAll('[data-translate]').forEach(el => {
+        const key = el.getAttribute('data-translate');
+        el.textContent = lang[key];
+    });
+}
+
+// Initialize feather icons and language
 document.addEventListener('DOMContentLoaded', function() {
     feather.replace();
     
-    // Smooth scrolling for anchor links
-    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    // Language toggle button
+    const langBtn = document.createElement('button');
+    langBtn.className = 'px-4 py-2 border border-white rounded-md font-bold uppercase text-sm ml-4 hover:bg-white hover:text-black transition-colors';
+    langBtn.setAttribute('data-translate', 'language');
+    langBtn.addEventListener('click', () => {
+        currentLanguage = currentLanguage === 'en' ? 'fr' : 'en';
+        updateContent();
+        feather.replace();
+    });
+    
+    document.querySelector('nav').appendChild(langBtn);
+    updateContent();
+    // Smooth scrolling for anchor links (keep existing code)
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {
             e.preventDefault();
             document.querySelector(this.getAttribute('href')).scrollIntoView({

style.css

@@ -1,9 +1,9 @@
 /* Custom styles */
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');
-
 body {
     font-family: 'Roboto Condensed', sans-serif;
-    min-height: 100vh;
+    transition: all 0.3s ease;
+min-height: 100vh;
 }
 
 /* Custom scrollbar */