all texts in French

components/footer.js

@@ -75,14 +75,12 @@ class CustomFooter extends HTMLElement {
           background-clip: text;
           font-family: 'Poppins', sans-serif;
         }
-        
         .footer-description {
           color: #9CA3AF;
           line-height: 1.6;
           font-size: 0.95rem;
         }
-        
-        .section-title {
+.section-title {
           font-size: 1.125rem;
           font-weight: 600;
           margin-bottom: 0.5rem;
@@ -274,9 +272,9 @@ class CustomFooter extends HTMLElement {
                 <div class="logo-text">FaceSwap Magic</div>
               </a>
               <p class="footer-description">
-                Transform faces with AI magic. Create hilarious memes, character transformations, and creative edits with our advanced face swapping technology.
+                Transformez les visages avec la magie de l'IA. Créez des mèmes hilarants, des transformations de personnages et des montages créatifs avec notre technologie avancée d'échange de visage.
               </p>
-              <div class="social-links">
+<div class="social-links">
                 <a href="https://twitter.com" class="social-link" target="_blank" rel="noopener noreferrer">
                   <i data-feather="twitter"></i>
                 </a>
@@ -291,87 +289,84 @@ class CustomFooter extends HTMLElement {
                 </a>
               </div>
             </div>
-            
             <!-- Quick Links -->
             <div class="footer-section">
-              <h3 class="section-title">Quick Links</h3>
+              <h3 class="section-title">Liens Rapides</h3>
               <div class="footer-links">
                 <a href="index.html" class="footer-link">
                   <i data-feather="home"></i>
-                  Home
+                  Accueil
                 </a>
                 <a href="#features" class="footer-link">
                   <i data-feather="zap"></i>
-                  Features
+                  Fonctionnalités
                 </a>
                 <a href="gallery.html" class="footer-link">
                   <i data-feather="image"></i>
-                  Gallery
+                  Galerie
                 </a>
                 <a href="pricing.html" class="footer-link">
                   <i data-feather="dollar-sign"></i>
-                  Pricing
+                  Tarifs
                 </a>
                 <a href="about.html" class="footer-link">
                   <i data-feather="info"></i>
-                  About Us
+                  À Propos
                 </a>
               </div>
             </div>
-            
             <!-- Legal -->
             <div class="footer-section">
-              <h3 class="section-title">Legal</h3>
+              <h3 class="section-title">Légal</h3>
               <div class="footer-links">
                 <a href="privacy.html" class="footer-link">
                   <i data-feather="shield"></i>
-                  Privacy Policy
+                  Politique de Confidentialité
                 </a>
                 <a href="terms.html" class="footer-link">
                   <i data-feather="file-text"></i>
-                  Terms of Service
+                  Conditions d'Utilisation
                 </a>
                 <a href="cookies.html" class="footer-link">
                   <i data-feather="cookie"></i>
-                  Cookie Policy
+                  Politique des Cookies
                 </a>
                 <a href="guidelines.html" class="footer-link">
                   <i data-feather="check-circle"></i>
-                  Community Guidelines
+                  Règles de la Communauté
                 </a>
                 <a href="contact.html" class="footer-link">
                   <i data-feather="mail"></i>
-                  Contact Us
+                  Nous Contacter
                 </a>
               </div>
             </div>
-            
-            <!-- Newsletter -->
+<!-- Newsletter -->
             <div class="footer-section">
-              <h3 class="section-title">Stay Updated</h3>
+              <h3 class="section-title">Restez Informé</h3>
               <p class="footer-description">
-                Subscribe to our newsletter for the latest features, updates, and face swapping tips.
+                Abonnez-vous à notre newsletter pour les dernières fonctionnalités, mises à jour et conseils d'échange de visage.
               </p>
-              <form class="newsletter-form" id="newsletterForm">
-                <input type="email" class="newsletter-input" placeholder="Your email address" required>
+<form class="newsletter-form" id="newsletterForm">
+                <input type="email" class="newsletter-input" placeholder="Votre adresse e-mail" required>
                 <button type="submit" class="newsletter-button">
                   <i data-feather="send"></i>
-                  Subscribe
+                  S'abonner
                 </button>
-              </form>
+</form>
             </div>
           </div>
           
           <div class="footer-bottom">
             <div class="copyright">
-              &copy; 2024 FaceSwap Magic. All rights reserved.
+              &copy; 2024 FaceSwap Magic. Tous droits réservés.
             </div>
             <div class="legal-links">
-              <a href="privacy.html" class="legal-link">Privacy Policy</a>
-              <a href="terms.html" class="legal-link">Terms of Service</a>
-              <a href="cookies.html" class="legal-link">Cookie Policy</a>
+              <a href="privacy.html" class="legal-link">Politique de Confidentialité</a>
+              <a href="terms.html" class="legal-link">Conditions d'Utilisation</a>
+              <a href="cookies.html" class="legal-link">Politique des Cookies</a>
             </div>
-          </div>
+</div>
         </div>
         
         <!-- Back to Top Button -->
@@ -399,15 +394,14 @@ class CustomFooter extends HTMLElement {
         if (email && this.validateEmail(email)) {
           // In a real app, this would send to your backend
           console.log('Newsletter subscription:', email);
-          
           // Show success message
-          alert('Thank you for subscribing to our newsletter!');
+          alert('Merci de vous être abonné à notre newsletter !');
           
           // Reset form
           form.reset();
         } else {
-          alert('Please enter a valid email address.');
-        }
+          alert('Veuillez saisir une adresse e-mail valide.');
+}
       });
     }
   }

components/navbar.js

@@ -230,49 +230,46 @@ class CustomNavbar extends HTMLElement {
               <div class="logo-icon">FS</div>
               <div class="logo-text">FaceSwap Magic</div>
             </a>
-            
             <div class="nav-links">
-              <a href="index.html" class="nav-link active">Home</a>
-              <a href="#features" class="nav-link">Features</a>
-              <a href="#gallery" class="nav-link">Gallery</a>
-              <a href="pricing.html" class="nav-link">Pricing</a>
-              <a href="about.html" class="nav-link">About</a>
+              <a href="index.html" class="nav-link active">Accueil</a>
+              <a href="#features" class="nav-link">Fonctionnalités</a>
+              <a href="#gallery" class="nav-link">Galerie</a>
+              <a href="pricing.html" class="nav-link">Tarifs</a>
+              <a href="about.html" class="nav-link">À Propos</a>
             </div>
-            
             <div class="nav-actions">
               <a href="login.html" class="btn-secondary">
                 <i data-feather="log-in"></i>
-                Sign In
+                Connexion
               </a>
               <a href="register.html" class="btn-primary">
                 <i data-feather="user-plus"></i>
-                Get Started
+                Commencer
               </a>
             </div>
-            
-            <button class="mobile-menu-btn" id="mobileMenuBtn">
+<button class="mobile-menu-btn" id="mobileMenuBtn">
               <i data-feather="menu"></i>
             </button>
           </div>
           
           <div class="mobile-menu" id="mobileMenu">
             <div class="mobile-nav-links">
-              <a href="index.html" class="mobile-nav-link active">Home</a>
-              <a href="#features" class="mobile-nav-link">Features</a>
-              <a href="#gallery" class="mobile-nav-link">Gallery</a>
-              <a href="pricing.html" class="mobile-nav-link">Pricing</a>
-              <a href="about.html" class="mobile-nav-link">About</a>
+              <a href="index.html" class="mobile-nav-link active">Accueil</a>
+              <a href="#features" class="mobile-nav-link">Fonctionnalités</a>
+              <a href="#gallery" class="mobile-nav-link">Galerie</a>
+              <a href="pricing.html" class="mobile-nav-link">Tarifs</a>
+              <a href="about.html" class="mobile-nav-link">À Propos</a>
             </div>
-            <div class="mobile-nav-actions">
+<div class="mobile-nav-actions">
               <a href="login.html" class="btn-secondary" style="width: 100%; text-align: center;">
                 <i data-feather="log-in"></i>
-                Sign In
+                Connexion
               </a>
               <a href="register.html" class="btn-primary" style="width: 100%; text-align: center;">
                 <i data-feather="user-plus"></i>
-                Get Started
+                Commencer
               </a>
-            </div>
+</div>
           </div>
         </div>
       </nav>

index.html

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FaceSwap Magic ✨ - AI Face Transformation Tool</title>
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <title>FaceSwap Magic ✨ - Outil de Transformation Faciale par IA</title>
+<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -62,21 +62,21 @@
         <section class="mb-16">
             <div class="text-center max-w-4xl mx-auto">
                 <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 font-['Poppins']">
-                    Transform Faces with <span class="text-primary">AI Magic</span> ✨
+                    Transformez les Visages avec la <span class="text-primary">Magie de l'IA</span> ✨
                 </h1>
                 <p class="text-lg md:text-xl text-gray-600 mb-10 max-w-3xl mx-auto">
-                    Upload your photos and let our advanced AI technology seamlessly swap faces, create hilarious memes, or generate creative character transformations.
+                    Téléchargez vos photos et laissez notre technologie IA avancée échanger les visages de manière transparente, créer des mèmes hilarants ou générer des transformations de personnages créatives.
                 </p>
-                <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                    <a href="#upload-section" class="bg-primary hover:bg-primary-dark text-white font-medium py-3 px-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 flex items-center justify-center gap-2">
-                        <i data-feather="upload-cloud"></i>
-                        Start Swapping Now
-                    </a>
-                    <a href="#gallery" class="bg-white hover:bg-gray-50 text-dark border-2 border-gray-200 font-medium py-3 px-8 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-2">
-                        <i data-feather="image"></i>
-                        View Gallery
-                    </a>
-                </div>
+<div class="flex flex-col sm:flex-row gap-4 justify-center">
+                        <a href="#upload-section" class="bg-primary hover:bg-primary-dark text-white font-medium py-3 px-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 flex items-center justify-center gap-2">
+                            <i data-feather="upload-cloud"></i>
+                            Commencer l'Échange
+                        </a>
+                        <a href="#gallery" class="bg-white hover:bg-gray-50 text-dark border-2 border-gray-200 font-medium py-3 px-8 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-2">
+                            <i data-feather="image"></i>
+                            Voir la Galerie
+                        </a>
+</div>
             </div>
         </section>
 
@@ -84,30 +84,29 @@
         <section id="upload-section" class="mb-20">
             <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
                 <h2 class="text-2xl md:text-3xl font-bold mb-8 text-center font-['Poppins'] text-dark">
-                    Upload Your Photos
+                    Téléchargez Vos Photos
                 </h2>
-                
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                     <!-- Original Image Upload -->
                     <div class="space-y-6">
                         <div class="flex items-center gap-3 mb-4">
                             <div class="bg-primary/10 p-2 rounded-lg">
                                 <i data-feather="image" class="text-primary"></i>
                             </div>
-                            <h3 class="text-xl font-semibold">Original Photo</h3>
-                        </div>
+                            <h3 class="text-xl font-semibold">Photo Originale</h3>
+</div>
                         
                         <div class="border-2 border-dashed border-gray-300 rounded-2xl p-6 text-center hover:border-primary transition-colors duration-300 bg-gray-50 min-h-[300px] flex flex-col items-center justify-center">
                             <div class="mb-4">
                                 <i data-feather="upload" class="w-16 h-16 text-gray-400 mx-auto"></i>
                             </div>
-                            <p class="text-gray-600 mb-4">Drag & drop your original photo here</p>
+                            <p class="text-gray-600 mb-4">Glissez-déposez votre photo originale ici</p>
                             <label for="original-upload" class="bg-primary hover:bg-primary-dark text-white font-medium py-2 px-6 rounded-lg cursor-pointer transition-colors inline-block">
-                                Browse Files
+                                Parcourir les Fichiers
                             </label>
                             <input type="file" id="original-upload" class="hidden" accept="image/*">
-                            <p class="text-sm text-gray-500 mt-4">Supports JPG, PNG, WEBP up to 10MB</p>
-                        </div>
+                            <p class="text-sm text-gray-500 mt-4">Supporte JPG, PNG, WEBP jusqu'à 10Mo</p>
+</div>
                         
                         <div id="original-preview" class="hidden rounded-xl overflow-hidden shadow-lg">
                             <img id="original-image" src="" alt="Original" class="w-full h-auto">
@@ -120,20 +119,20 @@
                             <div class="bg-secondary/10 p-2 rounded-lg">
                                 <i data-feather="user" class="text-secondary"></i>
                             </div>
-                            <h3 class="text-xl font-semibold">Target Face</h3>
-                        </div>
+                            <h3 class="text-xl font-semibold">Visage Cible</h3>
+</div>
                         
                         <div class="border-2 border-dashed border-gray-300 rounded-2xl p-6 text-center hover:border-secondary transition-colors duration-300 bg-gray-50 min-h-[300px] flex flex-col items-center justify-center">
                             <div class="mb-4">
                                 <i data-feather="user-plus" class="w-16 h-16 text-gray-400 mx-auto"></i>
                             </div>
-                            <p class="text-gray-600 mb-4">Drag & drop the face you want to swap</p>
+                            <p class="text-gray-600 mb-4">Glissez-déposez le visage que vous souhaitez échanger</p>
                             <label for="target-upload" class="bg-secondary hover:bg-secondary-dark text-white font-medium py-2 px-6 rounded-lg cursor-pointer transition-colors inline-block">
-                                Browse Files
+                                Parcourir les Fichiers
                             </label>
                             <input type="file" id="target-upload" class="hidden" accept="image/*">
-                            <p class="text-sm text-gray-500 mt-4">Make sure face is clearly visible</p>
-                        </div>
+                            <p class="text-sm text-gray-500 mt-4">Assurez-vous que le visage est clairement visible</p>
+</div>
                         
                         <div id="target-preview" class="hidden rounded-xl overflow-hidden shadow-lg">
                             <img id="target-image" src="" alt="Target Face" class="w-full h-auto">
@@ -144,30 +143,29 @@
                 <!-- Controls -->
                 <div class="mt-10 pt-8 border-t border-gray-200">
                     <div class="max-w-2xl mx-auto">
-                        <h3 class="text-xl font-semibold mb-6 text-center">Adjustment Options</h3>
-                        
-                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                        <h3 class="text-xl font-semibold mb-6 text-center">Options d'Ajustement</h3>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                             <div class="space-y-2">
-                                <label class="text-gray-700 font-medium">Face Alignment</label>
+                                <label class="text-gray-700 font-medium">Alignement du Visage</label>
                                 <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                             </div>
                             <div class="space-y-2">
-                                <label class="text-gray-700 font-medium">Skin Tone Match</label>
+                                <label class="text-gray-700 font-medium">Correspondance de Teint</label>
                                 <input type="range" min="0" max="100" value="75" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                             </div>
                             <div class="space-y-2">
-                                <label class="text-gray-700 font-medium">Blend Intensity</label>
+                                <label class="text-gray-700 font-medium">Intensité de Fusion</label>
                                 <input type="range" min="0" max="100" value="60" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                             </div>
-                        </div>
+</div>
 
                         <div class="text-center">
                             <button id="generate-btn" class="bg-gradient-to-r from-primary to-secondary hover:from-primary-dark hover:to-secondary-dark text-black font-semibold py-4 px-12 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 flex items-center gap-3 mx-auto">
                                 <i data-feather="zap"></i>
-                                Generate FaceSwap
+                                Générer l'Échange
                             </button>
-<p class="text-gray-500 text-sm mt-4">Processing usually takes 10-30 seconds</p>
-                        </div>
+<p class="text-gray-500 text-sm mt-4">Le traitement prend généralement 10 à 30 secondes</p>
+</div>
                     </div>
                 </div>
             </div>
@@ -177,16 +175,15 @@
         <section id="result-section" class="mb-20 hidden">
             <div class="bg-gradient-to-r from-primary/5 to-secondary/5 rounded-2xl shadow-xl p-8">
                 <h2 class="text-2xl md:text-3xl font-bold mb-10 text-center font-['Poppins'] text-dark">
-                    Your Transformed Image
+                    Votre Image Transformée
                 </h2>
-                
-                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
                     <div class="text-center">
                         <div class="mb-4">
                             <i data-feather="image" class="w-10 h-10 text-primary mx-auto"></i>
                         </div>
-                        <h4 class="font-semibold mb-3">Original</h4>
-                        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                        <h4 class="font-semibold mb-3">Originale</h4>
+<div class="bg-white rounded-xl shadow-lg overflow-hidden">
                             <img id="display-original" src="" alt="Original" class="w-full h-48 object-cover">
                         </div>
                     </div>
@@ -195,21 +192,21 @@
                         <div class="mb-4">
                             <i data-feather="arrow-right" class="w-10 h-10 text-gray-500 mx-auto"></i>
                         </div>
-                        <h4 class="font-semibold mb-3">AI Processing</h4>
+                        <h4 class="font-semibold mb-3">Traitement IA</h4>
                         <div class="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-xl p-8 shadow-lg">
                             <div class="animate-pulse">
                                 <i data-feather="cpu" class="w-16 h-16 text-primary mx-auto"></i>
-                                <p class="mt-4 text-gray-600">Analyzing & Transforming...</p>
+                                <p class="mt-4 text-gray-600">Analyse et Transformation...</p>
                             </div>
                         </div>
-                    </div>
+</div>
                     
                     <div class="text-center">
                         <div class="mb-4">
                             <i data-feather="star" class="w-10 h-10 text-secondary mx-auto"></i>
                         </div>
-                        <h4 class="font-semibold mb-3">Result</h4>
-                        <div class="bg-white rounded-xl shadow-lg overflow-hidden relative">
+                        <h4 class="font-semibold mb-3">Résultat</h4>
+<div class="bg-white rounded-xl shadow-lg overflow-hidden relative">
                             <img id="result-image" src="" alt="Result" class="w-full h-48 object-cover">
                             <div class="absolute top-2 right-2 bg-secondary text-white text-xs font-bold px-2 py-1 rounded">
                                 NEW
@@ -222,17 +219,17 @@
                     <div class="flex flex-wrap justify-center gap-4">
                         <button id="download-btn" class="bg-primary hover:bg-primary-dark text-white font-medium py-3 px-8 rounded-lg shadow hover:shadow-lg transition-all duration-300 flex items-center gap-2">
                             <i data-feather="download"></i>
-                            Download Result
+                            Télécharger le Résultat
                         </button>
                         <button id="share-btn" class="bg-white hover:bg-gray-50 text-dark border-2 border-gray-200 font-medium py-3 px-8 rounded-lg shadow hover:shadow-lg transition-all duration-300 flex items-center gap-2">
                             <i data-feather="share-2"></i>
-                            Share
+                            Partager
                         </button>
                         <button id="try-again-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-3 px-8 rounded-lg shadow hover:shadow-lg transition-all duration-300 flex items-center gap-2">
                             <i data-feather="refresh-cw"></i>
-                            Try Another
+                            Essayer un Autre
                         </button>
-                    </div>
+</div>
                 </div>
             </div>
         </section>
@@ -240,107 +237,104 @@
         <!-- Features Section -->
         <section class="mb-20">
             <h2 class="text-2xl md:text-3xl font-bold mb-12 text-center font-['Poppins'] text-dark">
-                Why Choose FaceSwap Magic?
+                Pourquoi Choisir FaceSwap Magic ?
             </h2>
-            
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                 <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
                     <div class="bg-primary/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                         <i data-feather="shield" class="text-primary"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-3">Secure & Private</h3>
-                    <p class="text-gray-600">All images are processed securely and automatically deleted after 24 hours. Your privacy is our priority.</p>
-                </div>
+                    <h3 class="text-xl font-semibold mb-3">Sécurisé & Privé</h3>
+                    <p class="text-gray-600">Toutes les images sont traitées de manière sécurisée et automatiquement supprimées après 24 heures. Votre confidentialité est notre priorité.</p>
+</div>
                 
                 <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
                     <div class="bg-secondary/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                         <i data-feather="zap" class="text-secondary"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-3">AI-Powered Precision</h3>
-                    <p class="text-gray-600">Advanced neural networks ensure realistic face swaps with perfect alignment and natural skin tone matching.</p>
-                </div>
+                    <h3 class="text-xl font-semibold mb-3">Précision Propulsée par IA</h3>
+                    <p class="text-gray-600">Des réseaux de neurones avancés garantissent des échanges de visage réalistes avec un alignement parfait et une correspondance naturelle des tons de peau.</p>
+</div>
                 
                 <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
                     <div class="bg-primary/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
                         <i data-feather="smile" class="text-primary"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-3">Fun & Creative</h3>
-                    <p class="text-gray-600">Create hilarious memes, movie character transformations, or just have fun with friends and family photos.</p>
-                </div>
+                    <h3 class="text-xl font-semibold mb-3">Amusant & Créatif</h3>
+                    <p class="text-gray-600">Créez des mèmes hilarants, des transformations de personnages de films, ou amusez-vous simplement avec des photos d'amis et de famille.</p>
+</div>
             </div>
         </section>
 
         <!-- Gallery Section -->
         <section id="gallery" class="mb-20">
             <h2 class="text-2xl md:text-3xl font-bold mb-12 text-center font-['Poppins'] text-dark">
-                Inspiration Gallery
+                Galerie d'Inspiration
             </h2>
-            
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                 <!-- Gallery items will be populated by JavaScript -->
                 <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
                     <img src="http://static.photos/people/640x360/101" alt="Sample face swap" class="w-full h-48 object-cover">
                     <div class="p-4">
-                        <h4 class="font-semibold">Celebrity Transformation</h4>
-                        <p class="text-sm text-gray-500 mt-1">User: Alex M.</p>
+                        <h4 class="font-semibold">Transformation Célébrité</h4>
+                        <p class="text-sm text-gray-500 mt-1">Utilisateur : Alex M.</p>
                     </div>
-                </div>
+</div>
                 
                 <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
                     <img src="http://static.photos/people/640x360/102" alt="Sample face swap" class="w-full h-48 object-cover">
                     <div class="p-4">
-                        <h4 class="font-semibold">Historical Figure</h4>
-                        <p class="text-sm text-gray-500 mt-1">User: Maria K.</p>
+                        <h4 class="font-semibold">Personnage Historique</h4>
+                        <p class="text-sm text-gray-500 mt-1">Utilisateur : Maria K.</p>
                     </div>
-                </div>
+</div>
                 
                 <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
                     <img src="http://static.photos/people/640x360/103" alt="Sample face swap" class="w-full h-48 object-cover">
                     <div class="p-4">
-                        <h4 class="font-semibold">Movie Character</h4>
-                        <p class="text-sm text-gray-500 mt-1">User: Sam R.</p>
+                        <h4 class="font-semibold">Personnage de Film</h4>
+                        <p class="text-sm text-gray-500 mt-1">Utilisateur : Sam R.</p>
                     </div>
-                </div>
+</div>
             </div>
             
             <div class="text-center mt-10">
                 <a href="gallery.html" class="inline-flex items-center gap-2 text-primary hover:text-primary-dark font-semibold">
-                    View Full Gallery
+                    Voir la Galerie Complète
                     <i data-feather="arrow-right"></i>
                 </a>
-            </div>
+</div>
         </section>
 
         <!-- FAQ Section -->
         <section class="mb-20">
             <h2 class="text-2xl md:text-3xl font-bold mb-12 text-center font-['Poppins'] text-dark">
-                Frequently Asked Questions
+                Questions Fréquemment Posées
             </h2>
-            
-            <div class="max-w-3xl mx-auto space-y-6">
+<div class="max-w-3xl mx-auto space-y-6">
                 <div class="bg-white rounded-xl p-6 shadow-md">
                     <h3 class="text-lg font-semibold mb-2 flex items-center gap-3">
                         <i data-feather="help-circle" class="text-primary"></i>
-                        How accurate are the face swaps?
+                        Quelle est la précision des échanges de visage ?
                     </h3>
-                    <p class="text-gray-600">Our AI uses advanced facial recognition and blending algorithms to create realistic swaps with proper alignment, skin tone matching, and lighting adjustments.</p>
-                </div>
+                    <p class="text-gray-600">Notre IA utilise des algorithmes avancés de reconnaissance faciale et de fusion pour créer des échanges réalistes avec un alignement approprié, une correspondance des tons de peau et des ajustements d'éclairage.</p>
+</div>
                 
                 <div class="bg-white rounded-xl p-6 shadow-md">
                     <h3 class="text-lg font-semibold mb-2 flex items-center gap-3">
                         <i data-feather="shield" class="text-primary"></i>
-                        Is my data secure?
+                        Mes données sont-elles sécurisées ?
                     </h3>
-                    <p class="text-gray-600">Yes! All uploaded images are encrypted and automatically deleted from our servers after 24 hours. We don't store or share your photos.</p>
-                </div>
+                    <p class="text-gray-600">Oui ! Toutes les images téléchargées sont chiffrées et automatiquement supprimées de nos serveurs après 24 heures. Nous ne stockons ni ne partageons vos photos.</p>
+</div>
                 
                 <div class="bg-white rounded-xl p-6 shadow-md">
                     <h3 class="text-lg font-semibold mb-2 flex items-center gap-3">
                         <i data-feather="dollar-sign" class="text-primary"></i>
-                        Is FaceSwap Magic free?
+                        FaceSwap Magic est-il gratuit ?
                     </h3>
-                    <p class="text-gray-600">Yes! You get 5 free swaps per day. For unlimited swaps and advanced features, check out our premium plans.</p>
-                </div>
+                    <p class="text-gray-600">Oui ! Vous obtenez 5 échanges gratuits par jour. Pour des échanges illimités et des fonctionnalités avancées, consultez nos formules premium.</p>
+</div>
             </div>
         </section>
     </main>

script.js

@@ -1,5 +1,5 @@
-// Main JavaScript for FaceSwap Magic Application
 
+// JavaScript principal pour l'application FaceSwap Magic
 // DOM Elements
 const originalUpload = document.getElementById('original-upload');
 const targetUpload = document.getElementById('target-upload');
@@ -34,9 +34,8 @@ let currentState = {
 
 // Initialize Application
 document.addEventListener('DOMContentLoaded', function() {
-    console.log('FaceSwap Magic initialized!');
-    
-    // Set up event listeners
+    console.log('FaceSwap Magic initialisé !');
+// Set up event listeners
     setupEventListeners();
     
     // Check for saved state in localStorage
@@ -76,13 +75,13 @@ function handleFileUpload(event, type) {
     if (!file) return;
     
     if (!file.type.match('image.*')) {
-        showToast('Please upload an image file', 'error');
-        return;
+        showToast('Veuillez télécharger un fichier image', 'error');
+return;
     }
     
     if (file.size > 10 * 1024 * 1024) { // 10MB limit
-        showToast('File size must be less than 10MB', 'error');
-        return;
+        showToast('La taille du fichier doit être inférieure à 10Mo', 'error');
+return;
     }
     
     const reader = new FileReader();
@@ -105,10 +104,8 @@ function handleFileUpload(event, type) {
             generateBtn.disabled = false;
             generateBtn.classList.remove('opacity-50', 'cursor-not-allowed');
         }
-        
-        showToast(`${type === 'original' ? 'Original' : 'Target'} image uploaded successfully!`, 'success');
-        
-        // Save to localStorage
+        showToast(`${type === 'original' ? 'Originale' : 'Cible'} image téléchargée avec succès !`, 'success');
+// Save to localStorage
         saveState();
     };
     
@@ -172,19 +169,18 @@ function setupRangeSliders() {
 // Generate face swap (simulated)
 function generateFaceSwap() {
     if (!currentState.originalImage || !currentState.targetImage) {
-        showToast('Please upload both images first!', 'error');
-        return;
+        showToast('Veuillez télécharger les deux images d\'abord !', 'error');
+return;
     }
     
     // Show loading state
     currentState.isProcessing = true;
     generateBtn.disabled = true;
-    generateBtn.innerHTML = `
+        generateBtn.innerHTML = `
         <div class="spinner"></div>
-        Processing...
+        Traitement en cours...
     `;
-    
-    // Simulate API call delay
+// Simulate API call delay
     setTimeout(() => {
         // Get random sample result for demo
         const randomIndex = Math.floor(Math.random() * sampleResults.length);
@@ -199,15 +195,13 @@ function generateFaceSwap() {
         generateBtn.disabled = false;
         generateBtn.innerHTML = `
             <i data-feather="zap"></i>
-            Generate FaceSwap
+            Générer l'Échange
         `;
-        feather.replace();
+feather.replace();
         
         currentState.isProcessing = false;
-        
-        showToast('Face swap generated successfully!', 'success');
-        
-        // Save state
+        showToast('Échange de visage généré avec succès !', 'success');
+// Save state
         saveState();
     }, 3000);
 }
@@ -215,8 +209,8 @@ function generateFaceSwap() {
 // Download result
 function downloadResult() {
     if (!currentState.generatedResult) {
-        showToast('No result to download!', 'error');
-        return;
+        showToast('Aucun résultat à télécharger !', 'error');
+return;
     }
     
     // In a real app, this would download the actual generated image
@@ -227,15 +221,14 @@ function downloadResult() {
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
-    
-    showToast('Download started!', 'success');
+        showToast('Téléchargement démarré !', 'success');
 }
 
 // Share result
 function shareResult() {
     if (!currentState.generatedResult) {
-        showToast('No result to share!', 'error');
-        return;
+        showToast('Aucun résultat à partager !', 'error');
+return;
     }
     
     if (navigator.share) {
@@ -244,14 +237,14 @@ function shareResult() {
             text: 'Check out this awesome face swap I made with FaceSwap Magic!',
             url: window.location.href
         })
-        .then(() => showToast('Shared successfully!', 'success'))
-        .catch(() => showToast('Share cancelled', 'info'));
-    } else {
+        .then(() => showToast('Partagé avec succès !', 'success'))
+        .catch(() => showToast('Partage annulé', 'info'));
+} else {
         // Fallback: copy to clipboard
         navigator.clipboard.writeText(window.location.href)
-            .then(() => showToast('Link copied to clipboard!', 'success'))
-            .catch(() => showToast('Failed to copy link', 'error'));
-    }
+            .then(() => showToast('Lien copié dans le presse-papier !', 'success'))
+            .catch(() => showToast('Échec de la copie du lien', 'error'));
+}
 }
 
 // Reset application
@@ -287,10 +280,8 @@ function resetApplication() {
     
     // Scroll to upload section
     document.getElementById('upload-section').scrollIntoView({ behavior: 'smooth' });
-    
-    showToast('Ready for a new face swap!', 'info');
-    
-    // Clear localStorage
+    showToast('Prêt pour un nouvel échange de visage !', 'info');
+// Clear localStorage
     localStorage.removeItem('faceswapState');
 }