Add 2 files

index.html

@@ -66,23 +66,39 @@
                     </div>
                     <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                         <a href="#" class="border-purple-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Accueil</a>
-                        <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Fonctionnalités</a>
-                        <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Modèles</a>
-                        <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tarifs</a>
+                        <a href="#features" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Fonctionnalités</a>
+                        <a href="#templates" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Modèles</a>
+                        <a href="#pricing" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tarifs</a>
                     </div>
                 </div>
                 <div class="hidden sm:ml-6 sm:flex sm:items-center">
-                    <button class="bg-white text-purple-600 hover:bg-gray-50 border border-purple-600 px-4 py-2 rounded-md text-sm font-medium mr-3">Connexion</button>
-                    <button class="gradient-bg text-white px-4 py-2 rounded-md text-sm font-medium shadow-sm hover:opacity-90 transition">Essai gratuit</button>
+                    <button onclick="showLoginModal()" class="bg-white text-purple-600 hover:bg-gray-50 border border-purple-600 px-4 py-2 rounded-md text-sm font-medium mr-3">Connexion</button>
+                    <button onclick="startFreeTrial()" class="gradient-bg text-white px-4 py-2 rounded-md text-sm font-medium shadow-sm hover:opacity-90 transition">Essai gratuit</button>
                 </div>
                 <div class="-mr-2 flex items-center sm:hidden">
-                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500" aria-controls="mobile-menu" aria-expanded="false">
+                    <button type="button" onclick="toggleMobileMenu()" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500" aria-controls="mobile-menu" aria-expanded="false">
                         <span class="sr-only">Open main menu</span>
                         <i class="fas fa-bars"></i>
                     </button>
                 </div>
             </div>
         </div>
+
+        <!-- Mobile menu -->
+        <div id="mobile-menu" class="hidden sm:hidden bg-white border-t">
+            <div class="pt-2 pb-3 space-y-1">
+                <a href="#" class="bg-purple-50 border-purple-500 text-purple-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Accueil</a>
+                <a href="#features" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Fonctionnalités</a>
+                <a href="#templates" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Modèles</a>
+                <a href="#pricing" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Tarifs</a>
+            </div>
+            <div class="pt-4 pb-3 border-t border-gray-200">
+                <div class="space-y-1 px-2">
+                    <button onclick="showLoginModal()" class="block w-full text-left bg-white text-purple-600 hover:bg-gray-50 border border-purple-600 px-4 py-2 rounded-md text-base font-medium">Connexion</button>
+                    <button onclick="startFreeTrial()" class="block w-full text-left gradient-bg text-white px-4 py-2 rounded-md text-base font-medium shadow-sm hover:opacity-90 mt-2">Essai gratuit</button>
+                </div>
+            </div>
+        </div>
     </nav>
 
     <!-- Hero Section -->
@@ -93,8 +109,8 @@
                     <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Créez votre site web professionnel en quelques minutes</h1>
                     <p class="text-xl opacity-90 mb-8">Plus de 1000 modèles, outils e-commerce, hébergement gratuit et création assistée par IA pour votre boutique en ligne.</p>
                     <div class="flex flex-col sm:flex-row gap-4">
-                        <button class="bg-white text-purple-600 px-6 py-3 rounded-lg font-bold shadow-lg hover:bg-gray-100 transition">Commencer gratuitement</button>
-                        <button class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-bold hover:bg-white hover:bg-opacity-10 transition flex items-center justify-center">
+                        <button onclick="startFreeTrial()" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-bold shadow-lg hover:bg-gray-100 transition">Commencer gratuitement</button>
+                        <button onclick="showDemoVideo()" class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-bold hover:bg-white hover:bg-opacity-10 transition flex items-center justify-center">
                             <i class="fas fa-play-circle mr-2"></i> Voir la démo
                         </button>
                     </div>
@@ -137,8 +153,8 @@
                                     <p class="text-gray-700">Bonjour ! Je suis votre assistant GRC IA. Dites-moi en quelques mots ce que vous souhaitez pour votre site web et je le créerai pour vous automatiquement.</p>
                                 </div>
                                 <div class="flex">
-                                    <input type="text" placeholder="Ex: Un site e-commerce de vêtements bio..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
-                                    <button class="bg-purple-600 text-white px-4 rounded-r-lg hover:bg-purple-700"><i class="fas fa-paper-plane"></i></button>
+                                    <input id="ai-input" type="text" placeholder="Ex: Un site e-commerce de vêtements bio..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
+                                    <button onclick="generateSiteWithAI()" class="bg-purple-600 text-white px-4 rounded-r-lg hover:bg-purple-700"><i class="fas fa-paper-plane"></i></button>
                                 </div>
                             </div>
                         </div>
@@ -175,7 +191,7 @@
     </div>
 
     <!-- Features Section -->
-    <div class="bg-gray-50 py-20">
+    <div id="features" class="bg-gray-50 py-20">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-16">
                 <h2 class="text-3xl font-bold text-gray-900 mb-4">Tout ce dont vous avez besoin pour réussir en ligne</h2>
@@ -230,7 +246,7 @@
     </div>
 
     <!-- Templates Section -->
-    <div class="py-20 bg-white">
+    <div id="templates" class="py-20 bg-white">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-16">
                 <h2 class="text-3xl font-bold text-gray-900 mb-4">Explorez nos modèles populaires</h2>
@@ -255,7 +271,7 @@
                                 <i class="fas fa-eye text-gray-400 mr-1"></i>
                                 <span class="text-sm text-gray-500">1,245</span>
                             </div>
-                            <button class="text-purple-600 font-medium hover:text-purple-800">Voir le modèle →</button>
+                            <button onclick="previewTemplate('ecommerce')" class="text-purple-600 font-medium hover:text-purple-800">Voir le modèle →</button>
                         </div>
                     </div>
                 </div>
@@ -277,7 +293,7 @@
                                 <i class="fas fa-eye text-gray-400 mr-1"></i>
                                 <span class="text-sm text-gray-500">892</span>
                             </div>
-                            <button class="text-purple-600 font-medium hover:text-purple-800">Voir le modèle →</button>
+                            <button onclick="previewTemplate('portfolio')" class="text-purple-600 font-medium hover:text-purple-800">Voir le modèle →</button>
                         </div>
                     </div>
                 </div>
@@ -299,14 +315,14 @@
                                 <i class="fas fa-eye text-gray-400 mr-1"></i>
                                 <span class="text-sm text-gray-500">1,532</span>
                             </div>
-                            <button class="text-purple-600 font-medium hover:text-purple-800">Voir le modèle →</button>
+                            <button onclick="previewTemplate('corporate')" class="text-purple-600 font-medium hover:text-purple-800">Voir le modèle →</button>
                         </div>
                     </div>
                 </div>
             </div>
             
             <div class="text-center mt-12">
-                <button class="gradient-bg text-white px-6 py-3 rounded-lg font-medium shadow-lg hover:opacity-90 transition flex items-center mx-auto">
+                <button onclick="showAllTemplates()" class="gradient-bg text-white px-6 py-3 rounded-lg font-medium shadow-lg hover:opacity-90 transition flex items-center mx-auto">
                     <i class="fas fa-th-large mr-2"></i> Voir tous les modèles
                 </button>
             </div>
@@ -351,7 +367,7 @@
                         </div>
                     </div>
                     
-                    <button class="mt-8 bg-white text-purple-600 px-6 py-3 rounded-lg font-bold shadow-lg hover:bg-gray-100 transition">Créer ma boutique</button>
+                    <button onclick="createEcommerceStore()" class="mt-8 bg-white text-purple-600 px-6 py-3 rounded-lg font-bold shadow-lg hover:bg-gray-100 transition">Créer ma boutique</button>
                 </div>
                 <div class="relative">
                     <div class="bg-white rounded-xl shadow-2xl overflow-hidden">
@@ -395,7 +411,7 @@
                                 </div>
                             </div>
                             
-                            <button class="w-full gradient-bg text-white py-3 rounded-lg font-bold mt-6 hover:opacity-90 transition">Passer la commande</button>
+                            <button onclick="simulateCheckout()" class="w-full gradient-bg text-white py-3 rounded-lg font-bold mt-6 hover:opacity-90 transition">Passer la commande</button>
                         </div>
                     </div>
                     <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-yellow-300 rounded-full opacity-20 blur-xl"></div>
@@ -442,7 +458,7 @@
                         </div>
                     </div>
                     
-                    <button class="mt-8 gradient-bg text-white px-6 py-3 rounded-lg font-bold shadow-lg hover:opacity-90 transition">Essayer l'IA maintenant</button>
+                    <button onclick="tryAIBuilder()" class="mt-8 gradient-bg text-white px-6 py-3 rounded-lg font-bold shadow-lg hover:opacity-90 transition">Essayer l'IA maintenant</button>
                 </div>
                 <div class="order-1 md:order-2 relative">
                     <div class="bg-gray-50 rounded-2xl p-8 shadow-lg">
@@ -567,13 +583,13 @@
             </div>
             
             <div class="mt-16 text-center">
-                <button class="bg-white text-purple-600 px-6 py-3 rounded-lg font-bold shadow-lg hover:bg-gray-100 transition">Voir plus de témoignages</button>
+                <button onclick="showMoreTestimonials()" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-bold shadow-lg hover:bg-gray-100 transition">Voir plus de témoignages</button>
             </div>
         </div>
     </div>
 
     <!-- Pricing -->
-    <div class="bg-white py-20">
+    <div id="pricing" class="bg-white py-20">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-16">
                 <h2 class="text-3xl font-bold text-gray-900 mb-4">Des tarifs simples et transparents</h2>
@@ -591,7 +607,7 @@
                         <span class="text-4xl font-bold text-gray-900">€9</span>
                         <span class="text-gray-500">/mois</span>
                     </div>
-                    <button class="w-full bg-gray-100 text-gray-800 py-3 rounded-lg font-medium mb-8 hover:bg-gray-200 transition">Commencer</button>
+                    <button onclick="selectPlan('basic')" class="w-full bg-gray-100 text-gray-800 py-3 rounded-lg font-medium mb-8 hover:bg-gray-200 transition">Commencer</button>
                     <ul class="space-y-3">
                         <li class="flex items-center">
                             <i class="fas fa-check text-green-500 mr-2"></i>
@@ -627,7 +643,7 @@
                         <span class="text-4xl font-bold text-gray-900">€29</span>
                         <span class="text-gray-500">/mois</span>
                     </div>
-                    <button class="w-full gradient-bg text-white py-3 rounded-lg font-bold mb-8 hover:opacity-90 transition">Commencer</button>
+                    <button onclick="selectPlan('pro')" class="w-full gradient-bg text-white py-3 rounded-lg font-bold mb-8 hover:opacity-90 transition">Commencer</button>
                     <ul class="space-y-3">
                         <li class="flex items-center">
                             <i class="fas fa-check text-green-500 mr-2"></i>
@@ -662,7 +678,7 @@
                         <span class="text-4xl font-bold text-gray-900">€79</span>
                         <span class="text-gray-500">/mois</span>
                     </div>
-                    <button class="w-full bg-gray-100 text-gray-800 py-3 rounded-lg font-medium mb-8 hover:bg-gray-200 transition">Commencer</button>
+                    <button onclick="selectPlan('business')" class="w-full bg-gray-100 text-gray-800 py-3 rounded-lg font-medium mb-8 hover:bg-gray-200 transition">Commencer</button>
                     <ul class="space-y-3">
                         <li class="flex items-center">
                             <i class="fas fa-check text-green-500 mr-2"></i>
@@ -690,7 +706,7 @@
             
             <div class="mt-12 text-center">
                 <p class="text-gray-600 mb-4">Vous avez des besoins spécifiques ?</p>
-                <button class="text-purple-600 font-medium hover:text-purple-800 flex items-center justify-center mx-auto">
+                <button onclick="contactSales()" class="text-purple-600 font-medium hover:text-purple-800 flex items-center justify-center mx-auto">
                     <i class="fas fa-envelope mr-2"></i> Contactez notre équipe
                 </button>
             </div>
@@ -703,8 +719,8 @@
             <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à créer votre site web professionnel ?</h2>
             <p class="text-xl opacity-90 mb-8">Essayez GRC Site Pro gratuitement pendant 14 jours. Aucune carte de crédit requise.</p>
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <button class="bg-white text-purple-600 px-8 py-4 rounded-lg font-bold shadow-lg hover:bg-gray-100 transition text-lg">Commencer gratuitement</button>
-                <button class="bg-transparent border-2 border-white px-8 py-4 rounded-lg font-bold hover:bg-white hover:bg-opacity-10 transition text-lg flex items-center justify-center">
+                <button onclick="startFreeTrial()" class="bg-white text-purple-600 px-8 py-4 rounded-lg font-bold shadow-lg hover:bg-gray-100 transition text-lg">Commencer gratuitement</button>
+                <button onclick="contactExpert()" class="bg-transparent border-2 border-white px-8 py-4 rounded-lg font-bold hover:bg-white hover:bg-opacity-10 transition text-lg flex items-center justify-center">
                     <i class="fas fa-phone-alt mr-2"></i> Parler à un expert
                 </button>
             </div>
@@ -739,7 +755,296 @@
                 <div>
                     <h3 class="text-lg font-semibold mb-6">Produit</h3>
                     <ul class="space-y-3">
-                        <li><a href="#" class="text-gray-400 hover:text-white">Fonctionnalités</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Modèles</a></li>
-                        <li><a href="#" class="text-gray-
+                        <li><a href="#features" class="text-gray-400 hover:text-white">Fonctionnalités</a></li>
+                        <li><a href="#templates" class="text-gray-400 hover:text-white">Modèles</a></li>
+                        <li><a href="#pricing" class="text-gray-400 hover:text-white">Tarifs</a></li>
+                        <li><a href="#" onclick="tryAIBuilder()" class="text-gray-400 hover:text-white">Créateur IA</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-6">Ressources</h3>
+                    <ul class="space-y-3">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Tutoriels</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-6">Entreprise</h3>
+                    <ul class="space-y-3">
+                        <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Presse</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
+                    </ul>
+                </div>
+            </div>
+            
+            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-400 mb-4 md:mb-0">© 2023 GRC Site Pro. Tous droits réservés.</p>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a>
+                    <a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a>
+                    <a href="#" class="text-gray-400 hover:text-white">Cookies</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Modals -->
+    <!-- Login Modal -->
+    <div id="login-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
+        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+            </div>
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <div class="sm:flex sm:items-start">
+                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10">
+                            <i class="fas fa-user text-purple-600"></i>
+                        </div>
+                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                            <h3 class="text-lg leading-6 font-medium text-gray-900">Connexion à votre compte</h3>
+                            <div class="mt-2">
+                                <p class="text-sm text-gray-500">Entrez vos identifiants pour accéder à votre espace client.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-5">
+                        <form>
+                            <div class="mb-4">
+                                <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
+                                <input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500">
+                            </div>
+                            <div class="mb-4">
+                                <label for="password" class="block text-sm font-medium text-gray-700">Mot de passe</label>
+                                <input type="password" id="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500">
+                            </div>
+                            <div class="flex items-center justify-between mb-4">
+                                <div class="flex items-center">
+                                    <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
+                                    <label for="remember-me" class="ml-2 block text-sm text-gray-700">Se souvenir de moi</label>
+                                </div>
+                                <div class="text-sm">
+                                    <a href="#" class="font-medium text-purple-600 hover:text-purple-500">Mot de passe oublié?</a>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                    <button onclick="submitLogin()" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
+                        Se connecter
+                    </button>
+                    <button onclick="hideLoginModal()" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+                        Annuler
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Demo Video Modal -->
+    <div id="demo-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
+        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+            </div>
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
+                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <div class="sm:flex sm:items-start">
+                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10">
+                            <i class="fas fa-play text-purple-600"></i>
+                        </div>
+                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                            <h3 class="text-lg leading-6 font-medium text-gray-900">Démonstration GRC Site Pro</h3>
+                            <div class="mt-2">
+                                <p class="text-sm text-gray-500">Découvrez comment créer votre site web en quelques minutes.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-5">
+                        <div class="bg-black aspect-w-16 aspect-h-9">
+                            <div class="w-full h-96 bg-gray-200 flex items-center justify-center">
+                                <i class="fas fa-play-circle text-6xl text-gray-400"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                    <button onclick="hideDemoModal()" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
+                        Fermer
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Template Preview Modal -->
+    <div id="template-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
+        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+            </div>
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-6xl sm:w-full">
+                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <div class="sm:flex sm:items-start">
+                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+                            <h3 class="text-lg leading-6 font-medium text-gray-900" id="template-modal-title">Prévisualisation du modèle</h3>
+                            <div class="mt-2">
+                                <p class="text-sm text-gray-500">Visualisez ce modèle sur différents appareils.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-5">
+                        <div class="flex justify-center">
+                            <div class="border-8 border-gray-800 rounded-lg overflow-hidden">
+                                <img id="template-modal-img" src="" alt="Template Preview" class="w-full h-auto max-h-[80vh]">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                    <button onclick="useThisTemplate()" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
+                        Utiliser ce modèle
+                    </button>
+                    <button onclick="hideTemplateModal()" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
+                        Fermer
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- JavaScript -->
+    <script>
+        // Toggle mobile menu
+        function toggleMobileMenu() {
+            const menu = document.getElementById('mobile-menu');
+            menu.classList.toggle('hidden');
+        }
+
+        // Show login modal
+        function showLoginModal() {
+            document.getElementById('login-modal').classList.remove('hidden');
+        }
+
+        // Hide login modal
+        function hideLoginModal() {
+            document.getElementById('login-modal').classList.add('hidden');
+        }
+
+        // Submit login form
+        function submitLogin() {
+            alert('Fonctionnalité de connexion en cours de développement');
+            hideLoginModal();
+        }
+
+        // Show demo video modal
+        function showDemoVideo() {
+            document.getElementById('demo-modal').classList.remove('hidden');
+        }
+
+        // Hide demo modal
+        function hideDemoModal() {
+            document.getElementById('demo-modal').classList.add('hidden');
+        }
+
+        // Start free trial
+        function startFreeTrial() {
+            alert('Essai gratuit démarré ! Redirection vers la page d\'inscription...');
+        }
+
+        // Show template preview
+        function previewTemplate(templateType) {
+            let imgSrc = '';
+            let title = '';
+            
+            switch(templateType) {
+                case 'ecommerce':
+                    imgSrc = 'https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80';
+                    title = 'Modèle Boutique Moderne';
+                    break;
+                case 'portfolio':
+                    imgSrc = 'https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80';
+                    title = 'Modèle Portfolio Créatif';
+                    break;
+                case 'corporate':
+                    imgSrc = 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80';
+                    title = 'Modèle Corporate Pro';
+                    break;
+            }
+            
+            document.getElementById('template-modal-img').src = imgSrc;
+            document.getElementById('template-modal-title').textContent = title;
+            document.getElementById('template-modal').classList.remove('hidden');
+        }
+
+        // Hide template modal
+        function hideTemplateModal() {
+            document.getElementById('template-modal').classList.add('hidden');
+        }
+
+        // Use selected template
+        function useThisTemplate() {
+            alert('Modèle sélectionné ! Redirection vers l\'éditeur...');
+            hideTemplateModal();
+        }
+
+        // Show all templates
+        function showAllTemplates() {
+            alert('Affichage de tous les modèles disponibles...');
+        }
+
+        // Create e-commerce store
+        function createEcommerceStore() {
+            alert('Création de votre boutique en ligne...');
+        }
+
+        // Simulate checkout
+        function simulateCheckout() {
+            alert('Simulation de paiement réussie !');
+        }
+
+        // Generate site with AI
+        function generateSiteWithAI() {
+            const input = document.getElementById('ai-input').value;
+            if (input.trim() === '') {
+                alert('Veuillez décrire ce que vous souhaitez pour votre site web');
+                return;
+            }
+            alert(`Génération en cours pour: "${input}"`);
+        }
+
+        // Try AI builder
+        function tryAIBuilder() {
+            alert('Lancement du créateur de site par IA...');
+        }
+
+        // Show more testimonials
+        function showMoreTestimonials() {
+            alert('Affichage de plus de témoignages...');
+        }
+
+        // Select pricing plan
+        function selectPlan(plan) {
+            alert(`Vous avez sélectionné le plan ${plan}. Redirection vers le paiement...`);
+        }
+
+        // Contact sales team
+        function contactSales() {
+            alert('Contactez notre équipe commerciale à sales@grcsitepro.com');
+        }
+
+        // Contact expert
+        function contactExpert() {
+            alert('Un expert vous contactera sous 24h. Merci !');
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/site-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt

@@ -1 +1,2 @@
-	 Logiciel de création de site Web GRC, plus de 1 000 modèles, formulaires, entonnoirs de conversion, commerce électronique, création de boutique en ligne dropshipping, hébergement de domaine gratuit et créateur d'IA . AVEC UNE BELLE INTERFACE
+	 Logiciel de création de site Web GRC, plus de 1 000 modèles, formulaires, entonnoirs de conversion, commerce électronique, création de boutique en ligne dropshipping, hébergement de domaine gratuit et créateur d'IA . AVEC UNE BELLE INTERFACE
+activer toutes les bouton qui fonctionne pas