diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,16 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Générateur Pro d'Applications Web</title>
+    <title>Générateur Pro - Création & Déploiement Automatique</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .gradient-bg {
             background: linear-gradient(135deg, #6e8efb, #a777e3);
         }
-        .sidebar {
-            transition: all 0.3s ease;
-        }
         .code-block {
             font-family: 'Courier New', monospace;
             background-color: #2d3748;
@@ -25,28 +22,6 @@
             background: white;
             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
         }
-        .feature-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-        }
-        .architecture-diagram {
-            background: linear-gradient(45deg, #f3f4f6, #e5e7eb);
-            border-radius: 1rem;
-        }
-        .toggle-checkbox:checked {
-            right: 0;
-            background-color: #4f46e5;
-        }
-        .toggle-checkbox:checked + .toggle-label {
-            background-color: #a5b4fc;
-        }
-        .draggable-item {
-            cursor: grab;
-            transition: all 0.2s ease;
-        }
-        .draggable-item:active {
-            cursor: grabbing;
-        }
         .drop-zone {
             min-height: 200px;
             transition: all 0.3s ease;
@@ -58,10 +33,6 @@
         .progress-bar {
             transition: width 0.5s ease;
         }
-        .tooltip:hover .tooltip-text {
-            visibility: visible;
-            opacity: 1;
-        }
         .animate-pulse {
             animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
         }
@@ -73,6 +44,55 @@
                 opacity: 0.5;
             }
         }
+        .deploy-option:hover {
+            transform: scale(1.03);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+        .domain-input {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath d='M4 8l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2' stroke='%23a0aec0' stroke-width='1.5'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 0.75rem center;
+            background-size: 0.75rem 0.75rem;
+        }
+        .toggle-switch {
+            position: relative;
+            display: inline-block;
+            width: 60px;
+            height: 34px;
+        }
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            transition: .4s;
+            border-radius: 34px;
+        }
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 26px;
+            width: 26px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            transition: .4s;
+            border-radius: 50%;
+        }
+        input:checked + .slider {
+            background-color: #4f46e5;
+        }
+        input:checked + .slider:before {
+            transform: translateX(26px);
+        }
     </style>
 </head>
 <body class="bg-gray-50 font-sans antialiased">
@@ -80,56 +100,19 @@
     <nav class="bg-white shadow-lg">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between h-16">
-                <div class="flex">
-                    <div class="flex-shrink-0 flex items-center">
-                        <i class="fas fa-cube text-indigo-600 text-2xl mr-2"></i>
-                        <span class="text-xl font-bold text-gray-900">AppGen Pro</span>
-                    </div>
-                    <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
-                        <a href="#" class="border-indigo-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">
-                            Templates
-                        </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>
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <i class="fas fa-rocket text-indigo-600 text-2xl"></i>
+                        <span class="ml-2 text-xl font-bold text-gray-900">AutoDeploy Pro</span>
                     </div>
                 </div>
                 <div class="hidden sm:ml-6 sm:flex sm:items-center">
                     <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
-                        <i class="fas fa-sign-in-alt mr-2"></i>Connexion
-                    </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-indigo-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
-                        <span class="sr-only">Open main menu</span>
-                        <i class="fas fa-bars text-xl"></i>
+                        <i class="fas fa-user-plus mr-2"></i>Essai gratuit
                     </button>
                 </div>
             </div>
         </div>
-
-        <!-- Mobile menu -->
-        <div class="sm:hidden hidden" id="mobile-menu">
-            <div class="pt-2 pb-3 space-y-1">
-                <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Accueil</a>
-                <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Fonctionnalités</a>
-                <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Templates</a>
-                <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Tarifs</a>
-                <div class="pt-4 pb-3 border-t border-gray-200">
-                    <div class="mt-3 space-y-1">
-                        <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
-                            <i class="fas fa-sign-in-alt mr-2"></i>Connexion
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
     </nav>
 
     <!-- Hero Section -->
@@ -137,348 +120,349 @@
         <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
             <div class="text-center">
                 <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
-                    Générateur Pro d'Applications Web
+                    Générateur Automatique de Sites Web
                 </h1>
                 <p class="mt-6 max-w-2xl mx-auto text-xl">
-                    Créez des applications web complètes avec architecture professionnelle en quelques clics. Pas de sites vitrine, uniquement des solutions professionnelles.
+                    Créez et déployez des sites professionnels avec DNS, SSL et hébergement en quelques minutes.
                 </p>
-                <div class="mt-10 flex justify-center">
-                    <div class="inline-flex rounded-md shadow">
-                        <a href="#generator" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
-                            <i class="fas fa-bolt mr-2"></i> Commencer maintenant
-                        </a>
-                    </div>
-                    <div class="ml-3 inline-flex">
-                        <a href="#features" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-800 bg-opacity-60 hover:bg-opacity-70">
-                            <i class="fas fa-info-circle mr-2"></i> En savoir plus
-                        </a>
-                    </div>
+                <div class="mt-10">
+                    <button id="start-generator" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
+                        <i class="fas fa-bolt mr-2"></i> Commencer maintenant
+                    </button>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- Stats Section -->
-    <div class="bg-white py-12">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
-                <div class="text-center">
-                    <div class="text-5xl font-extrabold text-indigo-600">1500+</div>
-                    <div class="mt-2 text-base text-gray-500">Lignes de code générées</div>
-                </div>
-                <div class="text-center">
-                    <div class="text-5xl font-extrabold text-indigo-600">50+</div>
-                    <div class="mt-2 text-base text-gray-500">Composants disponibles</div>
-                </div>
-                <div class="text-center">
-                    <div class="text-5xl font-extrabold text-indigo-600">10+</div>
-                    <div class="mt-2 text-base text-gray-500">Architectures professionnelles</div>
-                </div>
-                <div class="text-center">
-                    <div class="text-5xl font-extrabold text-indigo-600">∞</div>
-                    <div class="mt-2 text-base text-gray-500">Possibilités de personnalisation</div>
-                </div>
+    <!-- Generator Section -->
+    <div id="generator" class="hidden max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
+        <div class="bg-white shadow-xl rounded-lg overflow-hidden">
+            <div class="p-6 border-b border-gray-200">
+                <h2 class="text-2xl font-bold text-gray-800">Configuration du Projet</h2>
+                <p class="text-gray-600 mt-2">Remplissez les détails de votre site web</p>
             </div>
-        </div>
-    </div>
-
-    <!-- Main Generator Section -->
-    <div id="generator" class="bg-gray-50 py-16">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="lg:grid lg:grid-cols-12 lg:gap-8">
-                <!-- Sidebar -->
-                <div class="lg:col-span-4">
-                    <div class="bg-white shadow rounded-lg p-6 mb-8">
-                        <h2 class="text-lg font-medium text-gray-900 mb-4">Configuration de l'application</h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
+                <!-- Project Details -->
+                <div class="md:col-span-2">
+                    <div class="space-y-6">
+                        <div>
+                            <label for="project-name" class="block text-sm font-medium text-gray-700">Nom du projet</label>
+                            <input type="text" id="project-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="MonSitePro">
+                        </div>
                         
-                        <div class="space-y-4">
-                            <div>
-                                <label for="app-name" class="block text-sm font-medium text-gray-700">Nom de l'application</label>
-                                <input type="text" id="app-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="MonAppPro">
-                            </div>
-                            
-                            <div>
-                                <label for="app-type" class="block text-sm font-medium text-gray-700">Type d'application</label>
-                                <select id="app-type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
-                                    <option>Application SaaS</option>
-                                    <option>Plateforme e-commerce</option>
-                                    <option>Réseau social</option>
-                                    <option>ERP personnalisé</option>
-                                    <option>CRM avancé</option>
-                                    <option>Application mobile hybride</option>
-                                </select>
+                        <div>
+                            <label for="project-type" class="block text-sm font-medium text-gray-700">Type de site</label>
+                            <select id="project-type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+                                <option>Site vitrine</option>
+                                <option>Blog professionnel</option>
+                                <option>Portfolio</option>
+                                <option>Site e-commerce</option>
+                                <option>Application web</option>
+                                <option>Landing page</option>
+                            </select>
+                        </div>
+                        
+                        <div>
+                            <label for="tech-stack" class="block text-sm font-medium text-gray-700">Technologies</label>
+                            <select id="tech-stack" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+                                <option>React + Node.js</option>
+                                <option>Vue.js + Express</option>
+                                <option>Angular + Firebase</option>
+                                <option>HTML/CSS/JS pur</option>
+                                <option>WordPress (headless)</option>
+                                <option>Next.js</option>
+                            </select>
+                        </div>
+                        
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700">Fonctionnalités</label>
+                            <div class="mt-2 grid grid-cols-2 gap-2">
+                                <label class="inline-flex items-center">
+                                    <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
+                                    <span class="ml-2 text-sm text-gray-700">Responsive design</span>
+                                </label>
+                                <label class="inline-flex items-center">
+                                    <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
+                                    <span class="ml-2 text-sm text-gray-700">SEO optimisé</span>
+                                </label>
+                                <label class="inline-flex items-center">
+                                    <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
+                                    <span class="ml-2 text-sm text-gray-700">Blog intégré</span>
+                                </label>
+                                <label class="inline-flex items-center">
+                                    <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
+                                    <span class="ml-2 text-sm text-gray-700">Formulaire de contact</span>
+                                </label>
+                                <label class="inline-flex items-center">
+                                    <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
+                                    <span class="ml-2 text-sm text-gray-700">Authentification</span>
+                                </label>
+                                <label class="inline-flex items-center">
+                                    <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
+                                    <span class="ml-2 text-sm text-gray-700">Base de données</span>
+                                </label>
                             </div>
-                            
-                            <div>
-                                <label for="tech-stack" class="block text-sm font-medium text-gray-700">Stack technologique</label>
-                                <select id="tech-stack" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
-                                    <option>MERN (MongoDB, Express, React, Node.js)</option>
-                                    <option>MEAN (MongoDB, Express, Angular, Node.js)</option>
-                                    <option>LAMP (Linux, Apache, MySQL, PHP)</option>
-                                    <option>Django + React</option>
-                                    <option>Ruby on Rails + Vue.js</option>
-                                    <option>Spring Boot + React</option>
-                                </select>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Preview -->
+                <div>
+                    <div class="border border-gray-200 rounded-lg p-4">
+                        <h3 class="text-lg font-medium text-gray-800 mb-3">Aperçu du projet</h3>
+                        <div class="preview-frame w-full h-64 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center">
+                            <div class="text-center p-4">
+                                <i class="fas fa-laptop-code text-4xl text-gray-400 mb-3"></i>
+                                <p class="text-gray-600">Votre aperçu apparaîtra ici</p>
                             </div>
-                            
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700">Fonctionnalités principales</label>
-                                <div class="mt-2 space-y-2">
-                                    <div class="flex items-start">
-                                        <div class="flex items-center h-5">
-                                            <input id="auth" name="auth" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" checked>
-                                        </div>
-                                        <div class="ml-3 text-sm">
-                                            <label for="auth" class="font-medium text-gray-700">Authentification</label>
-                                            <p class="text-gray-500">Système complet de connexion/inscription</p>
-                                        </div>
-                                    </div>
-                                    <div class="flex items-start">
-                                        <div class="flex items-center h-5">
-                                            <input id="database" name="database" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" checked>
-                                        </div>
-                                        <div class="ml-3 text-sm">
-                                            <label for="database" class="font-medium text-gray-700">Base de données</label>
-                                            <p class="text-gray-500">Modèles et schémas prédéfinis</p>
-                                        </div>
-                                    </div>
-                                    <div class="flex items-start">
-                                        <div class="flex items-center h-5">
-                                            <input id="api" name="api" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" checked>
-                                        </div>
-                                        <div class="ml-3 text-sm">
-                                            <label for="api" class="font-medium text-gray-700">API REST</label>
-                                            <p class="text-gray-500">Endpoints sécurisés avec documentation</p>
-                                        </div>
-                                    </div>
-                                    <div class="flex items-start">
-                                        <div class="flex items-center h-5">
-                                            <input id="admin" name="admin" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
-                                        </div>
-                                        <div class="ml-3 text-sm">
-                                            <label for="admin" class="font-medium text-gray-700">Panneau d'administration</label>
-                                            <p class="text-gray-500">Interface de gestion complète</p>
-                                        </div>
-                                    </div>
-                                </div>
+                        </div>
+                        <div class="mt-4 text-sm text-gray-500">
+                            <p><span id="preview-lines">1500+</span> lignes de code générées</p>
+                            <p><span id="preview-components">20+</span> composants inclus</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Deployment Options -->
+            <div class="p-6 bg-gray-50 border-t border-gray-200">
+                <h3 class="text-lg font-medium text-gray-800 mb-4">Options de déploiement automatique</h3>
+                
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div class="deploy-option bg-white p-4 rounded-lg border border-gray-200 shadow-sm transition-all cursor-pointer">
+                        <div class="flex items-center mb-3">
+                            <div class="bg-blue-100 p-2 rounded-full mr-3">
+                                <i class="fab fa-github text-blue-600 text-xl"></i>
                             </div>
-                            
-                            <div>
-                                <label class="block text-sm font-medium text-gray-700">Options avancées</label>
-                                <div class="mt-2 space-y-2">
-                                    <div class="flex justify-between items-center">
-                                        <span class="text-sm font-medium text-gray-700">Tests unitaires</span>
-                                        <div class="relative inline-block w-10 mr-2 align-middle select-none">
-                                            <input type="checkbox" id="toggle-tests" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
-                                            <label for="toggle-tests" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
-                                        </div>
-                                    </div>
-                                    <div class="flex justify-between items-center">
-                                        <span class="text-sm font-medium text-gray-700">CI/CD intégré</span>
-                                        <div class="relative inline-block w-10 mr-2 align-middle select-none">
-                                            <input type="checkbox" id="toggle-ci" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/>
-                                            <label for="toggle-ci" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
-                                        </div>
-                                    </div>
-                                    <div class="flex justify-between items-center">
-                                        <span class="text-sm font-medium text-gray-700">Dockerisation</span>
-                                        <div class="relative inline-block w-10 mr-2 align-middle select-none">
-                                            <input type="checkbox" id="toggle-docker" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/>
-                                            <label for="toggle-docker" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
-                                        </div>
-                                    </div>
-                                </div>
+                            <h4 class="font-medium text-gray-800">GitHub Pages</h4>
+                        </div>
+                        <p class="text-sm text-gray-600">Déploiement instantané avec DNS personnalisé et SSL automatique</p>
+                        <div class="mt-3">
+                            <label class="inline-flex items-center">
+                                <input type="radio" name="deploy-option" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300" checked>
+                                <span class="ml-2 text-sm text-gray-700">Sélectionner</span>
+                            </label>
+                        </div>
+                    </div>
+                    
+                    <div class="deploy-option bg-white p-4 rounded-lg border border-gray-200 shadow-sm transition-all cursor-pointer">
+                        <div class="flex items-center mb-3">
+                            <div class="bg-orange-100 p-2 rounded-full mr-3">
+                                <i class="fab fa-netlify text-orange-600 text-xl"></i>
                             </div>
+                            <h4 class="font-medium text-gray-800">Netlify</h4>
                         </div>
-                        
-                        <div class="mt-6">
-                            <button id="generate-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 px-4 rounded-md text-sm font-medium flex items-center justify-center">
-                                <i class="fas fa-magic mr-2"></i> Générer l'application
-                            </button>
+                        <p class="text-sm text-gray-600">Déploiement automatique avec DNS global et Let's Encrypt SSL</p>
+                        <div class="mt-3">
+                            <label class="inline-flex items-center">
+                                <input type="radio" name="deploy-option" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300">
+                                <span class="ml-2 text-sm text-gray-700">Sélectionner</span>
+                            </label>
                         </div>
                     </div>
                     
-                    <div class="bg-white shadow rounded-lg p-6">
-                        <h2 class="text-lg font-medium text-gray-900 mb-4">Composants disponibles</h2>
-                        <div class="grid grid-cols-2 gap-3">
-                            <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="user-profile">
-                                <i class="fas fa-user-circle text-indigo-500 mb-1"></i>
-                                <div>Profil utilisateur</div>
+                    <div class="deploy-option bg-white p-4 rounded-lg border border-gray-200 shadow-sm transition-all cursor-pointer">
+                        <div class="flex items-center mb-3">
+                            <div class="bg-green-100 p-2 rounded-full mr-3">
+                                <i class="fab fa-aws text-green-600 text-xl"></i>
                             </div>
-                            <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="dashboard">
-                                <i class="fas fa-tachometer-alt text-indigo-500 mb-1"></i>
-                                <div>Tableau de bord</div>
+                            <h4 class="font-medium text-gray-800">AWS Amplify</h4>
+                        </div>
+                        <p class="text-sm text-gray-600">Hébergement scalable avec Route53 DNS et ACM SSL</p>
+                        <div class="mt-3">
+                            <label class="inline-flex items-center">
+                                <input type="radio" name="deploy-option" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300">
+                                <span class="ml-2 text-sm text-gray-700">Sélectionner</span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Domain Configuration -->
+                <div class="mt-6 bg-white p-4 rounded-lg border border-gray-200">
+                    <h4 class="font-medium text-gray-800 mb-3">Configuration du domaine</h4>
+                    
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                            <label for="domain-name" class="block text-sm font-medium text-gray-700">Nom de domaine</label>
+                            <div class="mt-1 flex rounded-md shadow-sm">
+                                <input type="text" id="domain-name" class="domain-input flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-l-md border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="monsite">
+                                <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">.com</span>
                             </div>
-                            <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="data-table">
-                                <i class="fas fa-table text-indigo-500 mb-1"></i>
-                                <div>Tableau de données</div>
+                        </div>
+                        
+                        <div>
+                            <label for="domain-provider" class="block text-sm font-medium text-gray-700">Fournisseur DNS</label>
+                            <select id="domain-provider" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+                                <option>Gérer automatiquement (recommandé)</option>
+                                <option>Cloudflare</option>
+                                <option>Google Domains</option>
+                                <option>Namecheap</option>
+                                <option>OVH</option>
+                                <option>Autre</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="mt-4">
+                        <div class="flex items-center">
+                            <input id="enable-ssl" name="enable-ssl" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
+                            <label for="enable-ssl" class="ml-2 block text-sm text-gray-700">
+                                Activer SSL automatique (Let's Encrypt)
+                            </label>
+                        </div>
+                        <div class="flex items-center mt-2">
+                            <input id="enable-dns" name="enable-dns" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
+                            <label for="enable-dns" class="ml-2 block text-sm text-gray-700">
+                                Configurer automatiquement les enregistrements DNS
+                            </label>
+                        </div>
+                        <div class="flex items-center mt-2">
+                            <input id="enable-cdn" name="enable-cdn" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
+                            <label for="enable-cdn" class="ml-2 block text-sm text-gray-700">
+                                Activer CDN global pour meilleures performances
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Google Services Integration -->
+                <div class="mt-6 bg-white p-4 rounded-lg border border-gray-200">
+                    <h4 class="font-medium text-gray-800 mb-3">Intégration avec Google</h4>
+                    
+                    <div class="space-y-4">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700">Google Search Console</label>
+                                <p class="text-xs text-gray-500">Soumet automatiquement votre sitemap et vérifie la propriété</p>
                             </div>
-                            <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="calendar">
-                                <i class="fas fa-calendar-alt text-indigo-500 mb-1"></i>
-                                <div>Calendrier</div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="enable-gsc" checked>
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        
+                        <div id="gsc-fields" class="pl-2 border-l-2 border-indigo-200">
+                            <div class="mt-2">
+                                <label for="gsc-email" class="block text-sm font-medium text-gray-700">Email Google</label>
+                                <input type="email" id="gsc-email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="votre@email.com">
                             </div>
-                            <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="chat">
-                                <i class="fas fa-comments text-indigo-500 mb-1"></i>
-                                <div>Chat en direct</div>
+                            <div class="mt-2">
+                                <label for="gsc-method" class="block text-sm font-medium text-gray-700">Méthode de vérification</label>
+                                <select id="gsc-method" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+                                    <option>Méta-tag HTML</option>
+                                    <option>Fichier HTML</option>
+                                    <option>DNS (recommandé)</option>
+                                </select>
                             </div>
-                            <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="payment">
-                                <i class="fas fa-credit-card text-indigo-500 mb-1"></i>
-                                <div>Paiements</div>
+                        </div>
+                        
+                        <div class="flex items-center justify-between mt-4">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700">Google Analytics</label>
+                                <p class="text-xs text-gray-500">Ajoute le suivi analytique à votre site</p>
                             </div>
-                            <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="maps">
-                                <i class="fas fa-map-marked-alt text-indigo-500 mb-1"></i>
-                                <div>Cartes</div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="enable-ga" checked>
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        
+                        <div id="ga-fields" class="pl-2 border-l-2 border-indigo-200">
+                            <div class="mt-2">
+                                <label for="ga-id" class="block text-sm font-medium text-gray-700">ID de suivi (G-XXXXXXX)</label>
+                                <input type="text" id="ga-id" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="G-XXXXXXXXXX">
                             </div>
-                            <div class="draggable-item bg-gray-50 p-3 rounded border border-gray-200 text-sm text-center cursor-move" draggable="true" data-component="analytics">
-                                <i class="fas fa-chart-line text-indigo-500 mb-1"></i>
-                                <div>Analytiques</div>
+                            <div class="mt-2">
+                                <label for="ga-consent" class="block text-sm font-medium text-gray-700">Mode de consentement</label>
+                                <select id="ga-consent" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+                                    <option>Automatique (recommandé)</option>
+                                    <option>Manuel (nécessite bannière cookie)</option>
+                                </select>
                             </div>
                         </div>
                     </div>
                 </div>
                 
-                <!-- Main Content -->
-                <div class="mt-12 lg:mt-0 lg:col-span-8">
-                    <div class="bg-white shadow rounded-lg overflow-hidden">
-                        <div class="px-6 py-4 border-b border-gray-200">
-                            <div class="flex justify-between items-center">
-                                <h2 class="text-lg font-medium text-gray-900">Architecture de l'application</h2>
-                                <div class="flex space-x-2">
-                                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded text-sm">
-                                        <i class="fas fa-redo mr-1"></i> Actualiser
-                                    </button>
-                                    <button class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 py-1 px-3 rounded text-sm">
-                                        <i class="fas fa-download mr-1"></i> Exporter
-                                    </button>
+                <div class="mt-6">
+                    <div class="flex items-center">
+                        <input id="connect-repo" name="connect-repo" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
+                        <label for="connect-repo" class="ml-2 block text-sm text-gray-700">
+                            Connecter automatiquement à un dépôt Git et configurer CI/CD
+                        </label>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Actions -->
+            <div class="p-6 bg-white border-t border-gray-200 flex justify-end">
+                <button id="back-button" class="mr-4 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    <i class="fas fa-arrow-left mr-2"></i> Retour
+                </button>
+                <button id="generate-button" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    <i class="fas fa-magic mr-2"></i> Générer & Déployer
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Generation Process -->
+    <div id="generation-process" class="hidden max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
+        <div class="bg-white shadow-xl rounded-lg overflow-hidden">
+            <div class="p-6 border-b border-gray-200">
+                <h2 class="text-2xl font-bold text-gray-800">Génération et déploiement en cours</h2>
+                <p class="text-gray-600 mt-2">Votre site web est en cours de création et de déploiement avec configuration DNS et SSL</p>
+            </div>
+            
+            <div class="p-6">
+                <div class="space-y-6">
+                    <div>
+                        <h3 class="text-lg font-medium text-gray-800 mb-2">Progression</h3>
+                        <div class="w-full bg-gray-200 rounded-full h-2.5">
+                            <div id="progress-bar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
+                        </div>
+                        <p id="progress-text" class="mt-2 text-sm text-gray-600">Initialisation du projet...</p>
+                    </div>
+                    
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div>
+                            <h3 class="text-lg font-medium text-gray-800 mb-2">Détails de génération</h3>
+                            <div class="code-block p-4 text-sm h-64 overflow-y-auto">
+                                <div id="generation-log">
+                                    <p>> Initialisation du générateur...</p>
                                 </div>
                             </div>
                         </div>
                         
-                        <div class="p-6">
-                            <div class="architecture-diagram p-6 mb-6">
-                                <div class="flex justify-center">
-                                    <div class="text-center">
-                                        <div class="bg-indigo-100 text-indigo-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
-                                            <i class="fas fa-user text-xl"></i>
-                                        </div>
-                                        <div class="text-sm font-medium">Interface Utilisateur</div>
-                                    </div>
-                                    <div class="flex items-center mx-4">
-                                        <i class="fas fa-arrow-right text-gray-400"></i>
-                                    </div>
-                                    <div class="text-center">
-                                        <div class="bg-green-100 text-green-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
-                                            <i class="fas fa-code text-xl"></i>
-                                        </div>
-                                        <div class="text-sm font-medium">API</div>
-                                    </div>
-                                    <div class="flex items-center mx-4">
-                                        <i class="fas fa-arrow-right text-gray-400"></i>
-                                    </div>
-                                    <div class="text-center">
-                                        <div class="bg-blue-100 text-blue-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
-                                            <i class="fas fa-database text-xl"></i>
-                                        </div>
-                                        <div class="text-sm font-medium">Base de Données</div>
-                                    </div>
-                                </div>
-                                
-                                <div class="mt-8 grid grid-cols-3 gap-4">
-                                    <div class="bg-indigo-50 p-3 rounded">
-                                        <div class="text-indigo-800 font-medium mb-2">Frontend</div>
-                                        <ul class="text-xs space-y-1">
-                                            <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> React.js</li>
-                                            <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Redux</li>
-                                            <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> TailwindCSS</li>
-                                            <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Axios</li>
-                                        </ul>
-                                    </div>
-                                    <div class="bg-green-50 p-3 rounded">
-                                        <div class="text-green-800 font-medium mb-2">Backend</div>
-                                        <ul class="text-xs space-y-1">
-                                            <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Node.js</li>
-                                            <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Express</li>
-                                            <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> JWT Auth</li>
-                                            <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> API Docs</li>
-                                        </ul>
-                                    </div>
-                                    <div class="bg-blue-50 p-3 rounded">
-                                        <div class="text-blue-800 font-medium mb-2">Base de données</div>
-                                        <ul class="text-xs space-y-1">
-                                            <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> MongoDB</li>
-                                            <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Mongoose</li>
-                                            <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Schémas prédéfinis</li>
-                                            <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Indexation</li>
-                                        </ul>
-                                    </div>
+                        <div>
+                            <h3 class="text-lg font-medium text-gray-800 mb-2">Détails de déploiement</h3>
+                            <div class="code-block p-4 text-sm h-64 overflow-y-auto">
+                                <div id="deployment-log">
+                                    <p>> Préparation du déploiement...</p>
                                 </div>
                             </div>
-                            
-                            <div class="mb-6">
-                                <h3 class="text-md font-medium text-gray-900 mb-3">Zone de construction</h3>
-                                <div id="drop-zone" class="drop-zone border-2 border-dashed border-gray-300 rounded-lg p-6">
-                                    <div class="text-center text-gray-500">
-                                        <i class="fas fa-arrow-down text-2xl mb-2"></i>
-                                        <p>Glissez-déposez des composants ici</p>
-                                    </div>
+                        </div>
+                        
+                        <div>
+                            <h3 class="text-lg font-medium text-gray-800 mb-2">Configuration DNS/SSL</h3>
+                            <div class="code-block p-4 text-sm h-64 overflow-y-auto">
+                                <div id="dns-log">
+                                    <p>> Vérification de la disponibilité du domaine...</p>
                                 </div>
                             </div>
-                            
-                            <div class="mb-6">
-                                <h3 class="text-md font-medium text-gray-900 mb-3">Aperçu du code généré</h3>
-                                <div class="code-block p-4 text-sm">
-                                    <div class="flex border-b border-gray-700 pb-2 mb-2">
-                                        <button class="text-gray-300 hover:text-white mr-4">server.js</button>
-                                        <button class="text-gray-300 hover:text-white mr-4">routes.js</button>
-                                        <button class="text-gray-300 hover:text-white mr-4">models.js</button>
-                                        <button class="text-indigo-400 hover:text-indigo-300">App.jsx</button>
-                                    </div>
-                                    <pre class="overflow-x-auto"><code class="language-javascript">import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import { Provider } from 'react-redux';
-import store from './store';
-
-// Components
-import Navbar from './components/Navbar';
-import Dashboard from './pages/Dashboard';
-import UserProfile from './pages/UserProfile';
-import Login from './pages/Login';
-import Register from './pages/Register';
-
-function App() {
-  return (
-    &lt;Provider store={store}&gt;
-      &lt;Router&gt;
-        &lt;div className="App"&gt;
-          &lt;Navbar /&gt;
-          &lt;div className="container mx-auto px-4"&gt;
-            &lt;Switch&gt;
-              &lt;Route exact path="/" component={Dashboard} /&gt;
-              &lt;Route path="/profile" component={UserProfile} /&gt;
-              &lt;Route path="/login" component={Login} /&gt;
-              &lt;Route path="/register" component={Register} /&gt;
-            &lt;/Switch&gt;
-          &lt;/div&gt;
-        &lt;/div&gt;
-      &lt;/Router&gt;
-    &lt;/Provider&gt;
-  );
-}
-
-export default App;</code></pre>
-                                </div>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
+                        <div class="flex">
+                            <div class="flex-shrink-0">
+                                <i class="fas fa-info-circle text-blue-400 mt-1"></i>
                             </div>
-                            
-                            <div>
-                                <h3 class="text-md font-medium text-gray-900 mb-3">Aperçu de l'application</h3>
-                                <div class="preview-frame w-full h-96 rounded-lg overflow-hidden">
-                                    <div class="h-full flex items-center justify-center bg-gray-100">
-                                        <div class="text-center p-6">
-                                            <i class="fas fa-laptop-code text-4xl text-gray-400 mb-4"></i>
-                                            <h4 class="text-lg font-medium text-gray-700">Aperçu de l'application</h4>
-                                            <p class="text-gray-500 mt-2">L'aperçu sera généré ici après configuration</p>
-                                        </div>
-                                    </div>
+                            <div class="ml-3">
+                                <h3 class="text-sm font-medium text-blue-800">Information</h3>
+                                <div class="mt-2 text-sm text-blue-700">
+                                    <p>Cette opération peut prendre quelques minutes. La configuration DNS peut nécessiter jusqu'à 24h pour se propager globalement.</p>
                                 </div>
                             </div>
                         </div>
@@ -488,78 +472,142 @@ export default App;</code></pre>
         </div>
     </div>
 
+    <!-- Success Screen -->
+    <div id="success-screen" class="hidden max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
+        <div class="bg-white shadow-xl rounded-lg overflow-hidden">
+            <div class="p-12 text-center">
+                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
+                    <i class="fas fa-check text-green-600 text-xl"></i>
+                </div>
+                <h2 class="mt-3 text-3xl font-bold text-gray-900">Votre site est prêt!</h2>
+                <p class="mt-4 text-lg text-gray-600">Le site a été généré et déployé avec succès, avec configuration DNS et SSL automatique.</p>
+                
+                <div class="mt-8 bg-gray-50 p-6 rounded-lg inline-block text-left max-w-2xl mx-auto">
+                    <h3 class="text-lg font-medium text-gray-800 mb-4">Détails du déploiement</h3>
+                    <div class="space-y-3">
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">URL du site:</span>
+                            <a id="site-url" href="#" class="text-indigo-600 hover:underline" target="_blank">https://monsitepro.com</a>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">Dépôt Git:</span>
+                            <a id="repo-url" href="#" class="text-indigo-600 hover:underline" target="_blank">github.com/votrecompte/monsitepro</a>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">DNS configuré:</span>
+                            <span id="dns-status" class="text-green-600">Actif (propagation en cours)</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">SSL activé:</span>
+                            <span id="ssl-status" class="text-green-600">Let's Encrypt (valide)</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">Google Search Console:</span>
+                            <span id="gsc-status" class="text-green-600">Configuré</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">Google Analytics:</span>
+                            <span id="ga-status" class="text-green-600">Actif (ID: G-XXXXXXXXXX)</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">Identifiants admin:</span>
+                            <span class="text-gray-800">admin@monsitepro.com / monsitepro123</span>
+                        </div>
+                    </div>
+                    
+                    <div class="mt-6 pt-4 border-t border-gray-200">
+                        <h4 class="text-sm font-medium text-gray-800 mb-2">Prochaines étapes</h4>
+                        <ul class="list-disc pl-5 space-y-1 text-sm text-gray-600">
+                            <li>La propagation DNS peut prendre jusqu'à 24h</li>
+                            <li>Vérifiez votre email pour les certificats SSL</li>
+                            <li>Connectez-vous à Google Search Console pour voir les données</li>
+                            <li>Vérifiez les données dans Google Analytics après 24h</li>
+                            <li>Configurez votre compte administrateur</li>
+                        </ul>
+                    </div>
+                </div>
+                
+                <div class="mt-8">
+                    <a id="visit-site" href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        <i class="fas fa-external-link-alt mr-2"></i> Visiter le site
+                    </a>
+                    <button id="new-project" class="ml-4 inline-flex items-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        <i class="fas fa-plus mr-2"></i> Nouveau projet
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Features Section -->
-    <div id="features" class="bg-white py-16">
+    <div class="bg-gray-50 py-16">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="lg:text-center">
                 <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Fonctionnalités</h2>
                 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
-                    Tout ce dont vous avez besoin pour des applications professionnelles
-                </p>
-                <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
-                    Notre générateur produit du code de qualité professionnelle avec les meilleures pratiques du secteur.
+                    Tout ce dont vous avez besoin pour un site pro
                 </p>
             </div>
 
-            <div class="mt-20">
+            <div class="mt-10">
                 <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
-                    <div class="feature-card relative bg-white p-6 rounded-lg shadow transition-all duration-300">
-                        <div class="absolute -top-6 left-6 bg-indigo-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
-                            <i class="fas fa-shield-alt text-xl"></i>
+                    <div class="relative">
+                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                            <i class="fas fa-bolt"></i>
                         </div>
-                        <h3 class="text-lg font-medium text-gray-900 mt-6 mb-2">Sécurité intégrée</h3>
-                        <p class="text-gray-500">
-                            Authentification JWT, validation des entrées, protection CSRF, et plus encore intégrés directement dans le code généré.
+                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Génération ultra-rapide</p>
+                        <p class="mt-2 ml-16 text-base text-gray-500">
+                            Créez des sites complexes avec 1500+ lignes de code en quelques minutes grâce à notre moteur de génération avancé.
                         </p>
                     </div>
 
-                    <div class="feature-card relative bg-white p-6 rounded-lg shadow transition-all duration-300">
-                        <div class="absolute -top-6 left-6 bg-indigo-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
-                            <i class="fas fa-layer-group text-xl"></i>
+                    <div class="relative">
+                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                            <i class="fas fa-globe"></i>
                         </div>
-                        <h3 class="text-lg font-medium text-gray-900 mt-6 mb-2">Architecture modulaire</h3>
-                        <p class="text-gray-500">
-                            Structure de projet claire avec séparation des préoccupations pour une maintenance et une évolutivité faciles.
+                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">DNS Automatique</p>
+                        <p class="mt-2 ml-16 text-base text-gray-500">
+                            Configuration automatique des enregistrements DNS (A, CNAME, MX) avec propagation rapide sur les serveurs mondiaux.
                         </p>
                     </div>
 
-                    <div class="feature-card relative bg-white p-6 rounded-lg shadow transition-all duration-300">
-                        <div class="absolute -top-6 left-6 bg-indigo-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
-                            <i class="fas fa-tachometer-alt text-xl"></i>
+                    <div class="relative">
+                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                            <i class="fas fa-lock"></i>
                         </div>
-                        <h3 class="text-lg font-medium text-gray-900 mt-6 mb-2">Optimisation des performances</h3>
-                        <p class="text-gray-500">
-                            Code optimisé avec lazy loading, mise en cache, pagination et autres techniques pour des applications rapides.
+                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">SSL Automatique</p>
+                        <p class="mt-2 ml-16 text-base text-gray-500">
+                            Certificats SSL Let's Encrypt générés et renouvelés automatiquement avec configuration HTTPS sécurisée.
                         </p>
                     </div>
 
-                    <div class="feature-card relative bg-white p-6 rounded-lg shadow transition-all duration-300">
-                        <div class="absolute -top-6 left-6 bg-indigo-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
-                            <i class="fas fa-mobile-alt text-xl"></i>
+                    <div class="relative">
+                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                            <i class="fas fa-server"></i>
                         </div>
-                        <h3 class="text-lg font-medium text-gray-900 mt-6 mb-2">Design responsive</h3>
-                        <p class="text-gray-500">
-                            Interfaces qui s'adaptent parfaitement à tous les appareils, du mobile au desktop.
+                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Hébergement Global</p>
+                        <p class="mt-2 ml-16 text-base text-gray-500">
+                            Serveurs distribués dans 12 régions mondiales avec CDN intégré pour des performances optimales partout.
                         </p>
                     </div>
 
-                    <div class="feature-card relative bg-white p-6 rounded-lg shadow transition-all duration-300">
-                        <div class="absolute -top-6 left-6 bg-indigo-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
-                            <i class="fas fa-database text-xl"></i>
+                    <div class="relative">
+                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                            <i class="fas fa-search"></i>
                         </div>
-                        <h3 class="text-lg font-medium text-gray-900 mt-6 mb-2">Schémas de base de données</h3>
-                        <p class="text-gray-500">
-                            Modèles prédéfinis pour les utilisateurs, les produits, les commandes et plus encore, avec relations et validation.
+                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">SEO optimisé</p>
+                        <p class="mt-2 ml-16 text-base text-gray-500">
+                            Meta tags, sitemap.xml, robots.txt et structure HTML optimisée pour le référencement.
                         </p>
                     </div>
 
-                    <div class="feature-card relative bg-white p-6 rounded-lg shadow transition-all duration-300">
-                        <div class="absolute -top-6 left-6 bg-indigo-600 text-white rounded-full w-12 h-12 flex items-center justify-center">
-                            <i class="fas fa-code-branch text-xl"></i>
+                    <div class="relative">
+                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                            <i class="fas fa-google"></i>
                         </div>
-                        <h3 class="text-lg font-medium text-gray-900 mt-6 mb-2">Intégration continue</h3>
-                        <p class="text-gray-500">
-                            Configuration CI/CD prête à l'emploi pour GitHub Actions, GitLab CI ou autres plateformes.
+                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Intégration Google</p>
+                        <p class="mt-2 ml-16 text-base text-gray-500">
+                            Configuration automatique de Google Search Console et Analytics pour un suivi complet.
                         </p>
                     </div>
                 </div>
@@ -567,175 +615,6 @@ export default App;</code></pre>
         </div>
     </div>
 
-    <!-- Templates Section -->
-    <div class="bg-gray-50 py-16">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center">
-                <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
-                    <span class="block">Templates professionnels</span>
-                </h2>
-                <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
-                    Choisissez parmi nos templates optimisés pour différents cas d'utilisation professionnels.
-                </p>
-            </div>
-            
-            <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
-                <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
-                    <div class="flex-shrink-0">
-                        <img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80" alt="">
-                    </div>
-                    <div class="flex-1 bg-white p-6 flex flex-col justify-between">
-                        <div class="flex-1">
-                            <p class="text-sm font-medium text-indigo-600">
-                                SaaS
-                            </p>
-                            <h3 class="mt-2 text-xl font-semibold text-gray-900">
-                                Plateforme SaaS complète
-                            </h3>
-                            <p class="mt-3 text-base text-gray-500">
-                                Tout ce dont vous avez besoin pour une application SaaS avec abonnements, facturation et tableau de bord analytique.
-                            </p>
-                        </div>
-                        <div class="mt-6 flex items-center">
-                            <button class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md text-sm font-medium">
-                                <i class="fas fa-eye mr-2"></i> Prévisualiser
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
-                    <div class="flex-shrink-0">
-                        <img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80" alt="">
-                    </div>
-                    <div class="flex-1 bg-white p-6 flex flex-col justify-between">
-                        <div class="flex-1">
-                            <p class="text-sm font-medium text-indigo-600">
-                                E-commerce
-                            </p>
-                            <h3 class="mt-2 text-xl font-semibold text-gray-900">
-                                Solution e-commerce avancée
-                            </h3>
-                            <p class="mt-3 text-base text-gray-500">
-                                Panier, passerelle de paiement, gestion des produits et système de recommandation intégrés.
-                            </p>
-                        </div>
-                        <div class="mt-6 flex items-center">
-                            <button class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md text-sm font-medium">
-                                <i class="fas fa-eye mr-2"></i> Prévisualiser
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
-                    <div class="flex-shrink-0">
-                        <img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" alt="">
-                    </div>
-                    <div class="flex-1 bg-white p-6 flex flex-col justify-between">
-                        <div class="flex-1">
-                            <p class="text-sm font-medium text-indigo-600">
-                                CRM
-                            </p>
-                            <h3 class="mt-2 text-xl font-semibold text-gray-900">
-                                Système de gestion de la relation client
-                            </h3>
-                            <p class="mt-3 text-base text-gray-500">
-                                Gestion des contacts, pipeline de vente, automatisation du marketing et rapports analytiques.
-                            </p>
-                        </div>
-                        <div class="mt-6 flex items-center">
-                            <button class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md text-sm font-medium">
-                                <i class="fas fa-eye mr-2"></i> Prévisualiser
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Testimonials -->
-    <div class="bg-white py-16">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="lg:text-center">
-                <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Témoignages</h2>
-                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
-                    Ce que disent nos clients
-                </p>
-            </div>
-            
-            <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-3">
-                <div class="bg-gray-50 p-6 rounded-lg">
-                    <div class="flex items-center mb-4">
-                        <div class="flex-shrink-0">
-                            <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=164&q=80" alt="">
-                        </div>
-                        <div class="ml-3">
-                            <p class="text-sm font-medium text-gray-900">Marie Dupont</p>
-                            <p class="text-sm text-gray-500">CTO, TechSolutions</p>
-                        </div>
-                    </div>
-                    <p class="text-gray-600 italic">
-                        "Nous avons réduit notre temps de développement de 60% grâce à AppGen Pro. Le code généré est propre, bien structuré et facile à maintenir."
-                    </p>
-                </div>
-                
-                <div class="bg-gray-50 p-6 rounded-lg">
-                    <div class="flex items-center mb-4">
-                        <div class="flex-shrink-0">
-                            <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=164&q=80" alt="">
-                        </div>
-                        <div class="ml-3">
-                            <p class="text-sm font-medium text-gray-900">Jean Martin</p>
-                            <p class="text-sm text-gray-500">Développeur Full-Stack</p>
-                        </div>
-                    </div>
-                    <p class="text-gray-600 italic">
-                        "En tant que développeur solo, AppGen Pro m'a permis de créer une application complexe en quelques jours au lieu de plusieurs semaines."
-                    </p>
-                </div>
-                
-                <div class="bg-gray-50 p-6 rounded-lg">
-                    <div class="flex items-center mb-4">
-                        <div class="flex-shrink-0">
-                            <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=164&q=80" alt="">
-                        </div>
-                        <div class="ml-3">
-                            <p class="text-sm font-medium text-gray-900">Thomas Leroy</p>
-                            <p class="text-sm text-gray-500">PDG, StartupXYZ</p>
-                        </div>
-                    </div>
-                    <p class="text-gray-600 italic">
-                        "Nous avons pu lancer notre MVP en un temps record et attirer nos premiers investisseurs grâce à la qualité professionnelle de notre application générée."
-                    </p>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- CTA Section -->
-    <div class="gradient-bg">
-        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
-            <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
-                <span class="block">Prêt à créer votre application professionnelle?</span>
-                <span class="block text-indigo-200">Commencez gratuitement dès aujourd'hui.</span>
-            </h2>
-            <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
-                <div class="inline-flex rounded-md shadow">
-                    <a href="#generator" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
-                        <i class="fas fa-play mr-2"></i> Essayer maintenant
-                    </a>
-                </div>
-                <div class="ml-3 inline-flex">
-                    <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-800 bg-opacity-60 hover:bg-opacity-70">
-                        <i class="fas fa-book mr-2"></i> Documentation
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-
     <!-- Footer -->
     <footer class="bg-gray-800">
         <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
@@ -744,27 +623,24 @@ export default App;</code></pre>
                     <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Produit</h3>
                     <ul class="mt-4 space-y-4">
                         <li><a href="#" class="text-base text-gray-300 hover:text-white">Fonctionnalités</a></li>
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Templates</a></li>
                         <li><a href="#" class="text-base text-gray-300 hover:text-white">Tarifs</a></li>
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">FAQ</a></li>
+                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Entreprise</h3>
+                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
                     <ul class="mt-4 space-y-4">
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">À propos</a></li>
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Carrières</a></li>
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Partenaires</a></li>
+                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Centre d'aide</a></li>
+                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Tutoriels</a></li>
+                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Statut</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
+                    <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Entreprise</h3>
                     <ul class="mt-4 space-y-4">
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li>
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">API Status</a></li>
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Contact</a></li>
+                        <li><a href="#" class="text-base text-gray-300 hover:text-white">À propos</a></li>
+                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
+                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Carrières</a></li>
                     </ul>
                 </div>
                 <div>
@@ -772,189 +648,58 @@ export default App;</code></pre>
                     <ul class="mt-4 space-y-4">
                         <li><a href="#" class="text-base text-gray-300 hover:text-white">Confidentialité</a></li>
                         <li><a href="#" class="text-base text-gray-300 hover:text-white">CGU</a></li>
-                        <li><a href="#" class="text-base text-gray-300 hover:text-white">Licences</a></li>
                     </ul>
                 </div>
             </div>
             <div class="mt-12 border-t border-gray-700 pt-8 flex justify-between">
-                <p class="text-base text-gray-400">&copy; 2023 AppGen Pro. Tous droits réservés.</p>
+                <p class="text-base text-gray-400">&copy; 2023 AutoDeploy Pro. Tous droits réservés.</p>
                 <div class="flex space-x-6">
                     <a href="#" class="text-gray-400 hover:text-white">
-                        <i class="fab fa-twitter text-xl"></i>
+                        <i class="fab fa-twitter"></i>
                     </a>
                     <a href="#" class="text-gray-400 hover:text-white">
-                        <i class="fab fa-github text-xl"></i>
+                        <i class="fab fa-github"></i>
                     </a>
                     <a href="#" class="text-gray-400 hover:text-white">
-                        <i class="fab fa-linkedin text-xl"></i>
+                        <i class="fab fa-linkedin"></i>
                     </a>
                 </div>
             </div>
         </div>
     </footer>
 
-    <!-- Generation Modal -->
-    <div id="generation-modal" class="fixed z-50 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></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-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
-                            <i class="fas fa-cog text-indigo-600 animate-spin"></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" id="modal-title">
-                                Génération de votre application
-                            </h3>
-                            <div class="mt-2">
-                                <p class="text-sm text-gray-500">
-                                    Votre application professionnelle est en cours de génération. Cette opération peut prendre quelques instants.
-                                </p>
-                                <div class="mt-4">
-                                    <div class="w-full bg-gray-200 rounded-full h-2.5">
-                                        <div id="generation-progress" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
-                                    </div>
-                                    <p id="generation-status" class="text-xs text-gray-500 mt-1">Initialisation...</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-                    <button type="button" id="cancel-generation" 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 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-                        Annuler
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Success Modal -->
-    <div id="success-modal" class="fixed z-50 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></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-green-100 sm:mx-0 sm:h-10 sm:w-10">
-                            <i class="fas fa-check text-green-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" id="modal-title">
-                                Génération terminée avec succès!
-                            </h3>
-                            <div class="mt-2">
-                                <p class="text-sm text-gray-500">
-                                    Votre application professionnelle a été générée avec succès. Vous pouvez maintenant télécharger le code source ou le déployer directement.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-                    <button type="button" id="download-code" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 sm:ml-3 sm:w-auto sm:text-sm">
-                        <i class="fas fa-download mr-2"></i> Télécharger le code
-                    </button>
-                    <button type="button" id="deploy-now" 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 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-                        <i class="fas fa-cloud-upload-alt mr-2"></i> Déployer maintenant
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-
     <script>
-        // Mobile menu toggle
-        document.getElementById('mobile-menu-button').addEventListener('click', function() {
-            const menu = document.getElementById('mobile-menu');
-            menu.classList.toggle('hidden');
+        // Main navigation
+        document.getElementById('start-generator').addEventListener('click', function() {
+            document.getElementById('generator').classList.remove('hidden');
+            window.scrollTo({ top: 0, behavior: 'smooth' });
         });
-
-        // Drag and drop functionality
-        const draggableItems = document.querySelectorAll('.draggable-item');
-        const dropZone = document.getElementById('drop-zone');
-
-        draggableItems.forEach(item => {
-            item.addEventListener('dragstart', function(e) {
-                e.dataTransfer.setData('text/plain', this.dataset.component);
-                this.classList.add('opacity-50');
-            });
-
-            item.addEventListener('dragend', function() {
-                this.classList.remove('opacity-50');
-            });
+        
+        document.getElementById('back-button').addEventListener('click', function() {
+            document.getElementById('generator').classList.add('hidden');
         });
-
-        dropZone.addEventListener('dragover', function(e) {
-            e.preventDefault();
-            this.classList.add('highlight');
+        
+        // Toggle Google services fields
+        document.getElementById('enable-gsc').addEventListener('change', function() {
+            document.getElementById('gsc-fields').style.display = this.checked ? 'block' : 'none';
         });
-
-        dropZone.addEventListener('dragleave', function() {
-            this.classList.remove('highlight');
-        });
-
-        dropZone.addEventListener('drop', function(e) {
-            e.preventDefault();
-            this.classList.remove('highlight');
-            
-            const componentType = e.dataTransfer.getData('text/plain');
-            const componentName = getComponentName(componentType);
-            
-            this.innerHTML = `
-                <div class="bg-indigo-50 p-4 rounded border border-indigo-100">
-                    <div class="flex items-center">
-                        <div class="flex-shrink-0 bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center">
-                            <i class="fas ${getComponentIcon(componentType)}"></i>
-                        </div>
-                        <div class="ml-3">
-                            <h4 class="text-sm font-medium text-indigo-800">${componentName}</h4>
-                            <p class="text-xs text-indigo-600">Composant ajouté</p>
-                        </div>
-                    </div>
-                </div>
-            `;
+        
+        document.getElementById('enable-ga').addEventListener('change', function() {
+            document.getElementById('ga-fields').style.display = this.checked ? 'block' : 'none';
         });
-
-        function getComponentName(type) {
-            const names = {
-                'user-profile': 'Profil utilisateur',
-                'dashboard': 'Tableau de bord',
-                'data-table': 'Tableau de données',
-                'calendar': 'Calendrier',
-                'chat': 'Chat en direct',
-                'payment': 'Paiements',
-                'maps': 'Cartes',
-                'analytics': 'Analytiques'
-            };
-            return names[type] || 'Composant';
-        }
-
-        function getComponentIcon(type) {
-            const icons = {
-                'user-profile': 'fa-user-circle',
-                'dashboard': 'fa-tachometer-alt',
-                'data-table': 'fa-table',
-                'calendar': 'fa-calendar-alt',
-                'chat': 'fa-comments',
-                'payment': 'fa-credit-card',
-                'maps': 'fa-map-marked-alt',
-                'analytics': 'fa-chart-line'
-            };
-            return icons[type] || 'fa-cube';
-        }
-
+        
         // Generation process simulation
-        document.getElementById('generate-btn').addEventListener('click', function() {
-            const modal = document.getElementById('generation-modal');
-            modal.classList.remove('hidden');
+        document.getElementById('generate-button').addEventListener('click', function() {
+            document.getElementById('generator').classList.add('hidden');
+            document.getElementById('generation-process').classList.remove('hidden');
+            window.scrollTo({ top: 0, behavior: 'smooth' });
             
-            // Simulate generation progress
-            const progressBar = document.getElementById('generation-progress');
-            const statusText = document.getElementById('generation-status');
+            // Simulate generation and deployment
+            const progressBar = document.getElementById('progress-bar');
+            const progressText = document.getElementById('progress-text');
+            const generationLog = document.getElementById('generation-log');
+            const deploymentLog = document.getElementById('deployment-log');
+            const dnsLog = document.getElementById('dns-log');
             
             let progress = 0;
             const interval = setInterval(() => {
@@ -963,91 +708,161 @@ export default App;</code></pre>
                 
                 progressBar.style.width = `${progress}%`;
                 
-                if (progress < 30) {
-                    statusText.textContent = "Création de la structure du projet...";
+                // Update logs based on progress
+                if (progress < 15) {
+                    progressText.textContent = "Initialisation du projet...";
+                    generationLog.innerHTML += "<p>> Création de la structure des fichiers...</p>";
+                } else if (progress < 30) {
+                    progressText.textContent = "Génération des composants...";
+                    generationLog.innerHTML += "<p>> Génération des templates HTML...</p>";
+                    generationLog.innerHTML += "<p>> Création des styles CSS...</p>";
+                    dnsLog.innerHTML += "<p>> Vérification de la disponibilité du domaine...</p>";
+                } else if (progress < 45) {
+                    progressText.textContent = "Configuration du backend...";
+                    generationLog.innerHTML += "<p>> Configuration des routes API...</p>";
+                    deploymentLog.innerHTML += "<p>> Préparation du dépôt Git...</p>";
+                    dnsLog.innerHTML += "<p>> Enregistrement du domaine...</p>";
                 } else if (progress < 60) {
-                    statusText.textContent = "Génération des composants principaux...";
+                    progressText.textContent = "Optimisation...";
+                    generationLog.innerHTML += "<p>> Minification des assets...</p>";
+                    deploymentLog.innerHTML += "<p>> Configuration CI/CD...</p>";
+                    dnsLog.innerHTML += "<p>> Configuration des enregistrements DNS...</p>";
+                } else if (progress < 75) {
+                    progressText.textContent = "Déploiement initial...";
+                    deploymentLog.innerHTML += "<p>> Déploiement sur serveurs...</p>";
+                    dnsLog.innerHTML += "<p>> Génération du certificat SSL...</p>";
+                    
+                    // Google services integration logs
+                    if (document.getElementById('enable-gsc').checked) {
+                        generationLog.innerHTML += "<p>> Configuration Google Search Console...</p>";
+                    }
+                    if (document.getElementById('enable-ga').checked) {
+                        generationLog.innerHTML += "<p>> Intégration Google Analytics...</p>";
+                    }
                 } else if (progress < 90) {
-                    statusText.textContent = "Configuration des services backend...";
+                    progressText.textContent = "Configuration DNS/SSL...";
+                    deploymentLog.innerHTML += "<p>> Activation du CDN global...</p>";
+                    dnsLog.innerHTML += "<p>> Validation du certificat SSL...</p>";
+                    dnsLog.innerHTML += "<p>> Propagation DNS en cours...</p>";
+                    
+                    if (document.getElementById('enable-gsc').checked) {
+                        dnsLog.innerHTML += "<p>> Soumission du sitemap à Google...</p>";
+                    }
                 } else {
-                    statusText.textContent = "Finalisation et optimisation...";
+                    progressText.textContent = "Finalisation...";
+                    deploymentLog.innerHTML += "<p>> Tests de performance...</p>";
+                    dnsLog.innerHTML += "<p>> Activation HTTPS...</p>";
+                    
+                    if (document.getElementById('enable-gsc').checked) {
+                        deploymentLog.innerHTML += "<p>> Vérification de la propriété dans Google Search Console...</p>";
+                    }
+                    if (document.getElementById('enable-ga').checked) {
+                        deploymentLog.innerHTML += "<p>> Test du suivi Google Analytics...</p>";
+                    }
                 }
                 
+                // Scroll logs to bottom
+                generationLog.scrollTop = generationLog.scrollHeight;
+                deploymentLog.scrollTop = deploymentLog.scrollHeight;
+                dnsLog.scrollTop = dnsLog.scrollHeight;
+                
                 if (progress === 100) {
                     clearInterval(interval);
                     setTimeout(() => {
-                        modal.classList.add('hidden');
-                        document.getElementById('success-modal').classList.remove('hidden');
-                    }, 500);
+                        document.getElementById('generation-process').classList.add('hidden');
+                        document.getElementById('success-screen').classList.remove('hidden');
+                        
+                        // Set random demo URLs
+                        const projectName = document.getElementById('project-name').value || 'monsitepro';
+                        const domainName = document.getElementById('domain-name').value || 'monsite';
+                        const randomId = Math.floor(Math.random() * 1000);
+                        
+                        const domainProvider = document.getElementById('domain-provider').value;
+                        let dnsStatus = "Actif (propagation en cours)";
+                        if (domainProvider.includes("automatiquement")) {
+                            dnsStatus = "Géré automatiquement";
+                        }
+                        
+                        // Set Google services status
+                        const enableGSC = document.getElementById('enable-gsc').checked;
+                        const enableGA = document.getElementById('enable-ga').checked;
+                        const gaId = document.getElementById('ga-id').value || 'G-' + Math.floor(Math.random() * 1000000000);
+                        
+                        document.getElementById('site-url').href = `https://${domainName}.com`;
+                        document.getElementById('site-url').textContent = `https://${domainName}.com`;
+                        document.getElementById('repo-url').href = `https://github.com/demo/${projectName}-${randomId}`;
+                        document.getElementById('repo-url').textContent = `github.com/demo/${projectName}-${randomId}`;
+                        document.getElementById('visit-site').href = `https://${domainName}.com`;
+                        document.getElementById('dns-status').textContent = dnsStatus;
+                        document.getElementById('gsc-status').textContent = enableGSC ? "Configuré" : "Non activé";
+                        document.getElementById('ga-status').textContent = enableGA ? `Actif (ID: ${gaId})` : "Non activé";
+                        
+                        window.scrollTo({ top: 0, behavior: 'smooth' });
+                    }, 1000);
                 }
-            }, 300);
-            
-            document.getElementById('cancel-generation').addEventListener('click', function() {
-                clearInterval(interval);
-                modal.classList.add('hidden');
-            }, { once: true });
-        });
-
-        // Success modal buttons
-        document.getElementById('download-code').addEventListener('click', function() {
-            alert('Le téléchargement du code va commencer. Merci d\'utiliser AppGen Pro!');
-            document.getElementById('success-modal').classList.add('hidden');
-        });
-
-        document.getElementById('deploy-now').addEventListener('click', function() {
-            alert('Redirection vers les options de déploiement...');
-            document.getElementById('success-modal').classList.add('hidden');
+            }, 500);
         });
-
-        // Smooth scrolling for anchor links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function (e) {
-                e.preventDefault();
-                document.querySelector(this.getAttribute('href')).scrollIntoView({
-                    behavior: 'smooth'
-                });
-            });
+        
+        // New project button
+        document.getElementById('new-project').addEventListener('click', function() {
+            document.getElementById('success-screen').classList.add('hidden');
+            document.getElementById('generator').classList.remove('hidden');
+            
+            // Reset progress bar
+            document.getElementById('progress-bar').style.width = '0%';
+            
+            // Clear logs
+            document.getElementById('generation-log').innerHTML = '<p>> Initialisation du générateur...</p>';
+            document.getElementById('deployment-log').innerHTML = '<p>> Préparation du déploiement...</p>';
+            document.getElementById('dns-log').innerHTML = '<p>> Vérification de la disponibilité du domaine...</p>';
         });
-
-        // Tooltip functionality
-        const tooltips = document.querySelectorAll('.tooltip');
-        tooltips.forEach(tooltip => {
-            tooltip.addEventListener('mouseenter', function() {
-                const tooltipText = this.querySelector('.tooltip-text');
-                tooltipText.classList.remove('invisible', 'opacity-0');
-                tooltipText.classList.add('visible', 'opacity-100');
-            });
+        
+        // Update preview stats when project type changes
+        document.getElementById('project-type').addEventListener('change', function() {
+            const types = {
+                'Site vitrine': { lines: 1200, components: 15 },
+                'Blog professionnel': { lines: 1800, components: 22 },
+                'Portfolio': { lines: 1500, components: 18 },
+                'Site e-commerce': { lines: 2500, components: 30 },
+                'Application web': { lines: 3000, components: 35 },
+                'Landing page': { lines: 800, components: 10 }
+            };
             
-            tooltip.addEventListener('mouseleave', function() {
-                const tooltipText = this.querySelector('.tooltip-text');
-                tooltipText.classList.remove('visible', 'opacity-100');
-                tooltipText.classList.add('invisible', 'opacity-0');
-            });
+            const selectedType = this.value;
+            const stats = types[selectedType] || { lines: 1500, components: 20 };
+            
+            document.getElementById('preview-lines').textContent = stats.lines + '+';
+            document.getElementById('preview-components').textContent = stats.components + '+';
         });
-
-        // Feature cards animation
-        const featureCards = document.querySelectorAll('.feature-card');
-        featureCards.forEach(card => {
-            card.addEventListener('mouseenter', function() {
-                this.style.transform = 'translateY(-5px)';
-            });
+        
+        // Update preview stats when tech stack changes
+        document.getElementById('tech-stack').addEventListener('change', function() {
+            const stacks = {
+                'React + Node.js': { lines: 2000, components: 25 },
+                'Vue.js + Express': { lines: 1800, components: 22 },
+                'Angular + Firebase': { lines: 2200, components: 28 },
+                'HTML/CSS/JS pur': { lines: 1200, components: 15 },
+                'WordPress (headless)': { lines: 1600, components: 20 },
+                'Next.js': { lines: 1900, components: 24 }
+            };
             
-            card.addEventListener('mouseleave', function() {
-                this.style.transform = '';
-            });
+            const selectedStack = this.value;
+            const stats = stacks[selectedStack] || { lines: 1500, components: 20 };
+            
+            document.getElementById('preview-lines').textContent = stats.lines + '+';
+            document.getElementById('preview-components').textContent = stats.components + '+';
         });
-
-        // Toggle switches
-        const toggleSwitches = document.querySelectorAll('.toggle-checkbox');
-        toggleSwitches.forEach(toggle => {
-            toggle.addEventListener('change', function() {
-                const label = document.querySelector(`.toggle-label[for="${this.id}"]`);
-                if (this.checked) {
-                    label.classList.add('bg-indigo-200');
-                } else {
-                    label.classList.remove('bg-indigo-200');
-                }
-            });
+        
+        // Domain name validation
+        document.getElementById('domain-name').addEventListener('input', function() {
+            const domainInput = this.value;
+            const domainRegex = /^[a-zA-Z0-9-]+$/;
+            
+            if (!domainRegex.test(domainInput) && domainInput.length > 0) {
+                this.classList.add('border-red-500');
+            } else {
+                this.classList.remove('border-red-500');
+            }
         });
     </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/generateur-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
