Hugging Face's logo

Spaces:
docto41
/
ia-web-builder
Running

App Files Community
docto41 commited on
Commit
d2994f3
·
verified ·
1 Parent(s): 3155725

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +837 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ia Web Builder
3
- emoji: 😻
4
- colorFrom: purple
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ia-web-builder
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,837 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>IA Web Builder - Générateur Automatique de Sites Web</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes float {
11
+ 0% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-20px); }
13
+ 100% { transform: translateY(0px); }
14
+ }
15
+ @keyframes pulse {
16
+ 0% { opacity: 1; }
17
+ 50% { opacity: 0.5; }
18
+ 100% { opacity: 1; }
19
+ }
20
+ @keyframes gradient {
21
+ 0% { background-position: 0% 50%; }
22
+ 50% { background-position: 100% 50%; }
23
+ 100% { background-position: 0% 50%; }
24
+ }
25
+ .gradient-bg {
26
+ background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
27
+ background-size: 400% 400%;
28
+ animation: gradient 15s ease infinite;
29
+ }
30
+ .floating {
31
+ animation: float 6s ease-in-out infinite;
32
+ }
33
+ .pulse {
34
+ animation: pulse 2s infinite;
35
+ }
36
+ .glow {
37
+ box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
38
+ }
39
+ .glow:hover {
40
+ box-shadow: 0 0 30px rgba(59, 130, 246, 0.8);
41
+ }
42
+ .code-block {
43
+ font-family: 'Courier New', monospace;
44
+ background-color: #1e293b;
45
+ color: #f8fafc;
46
+ border-radius: 0.5rem;
47
+ padding: 1rem;
48
+ overflow-x: auto;
49
+ }
50
+ .progress-bar {
51
+ transition: width 0.5s ease;
52
+ }
53
+ .feature-card:hover {
54
+ transform: translateY(-10px);
55
+ transition: transform 0.3s ease;
56
+ }
57
+ </style>
58
+ </head>
59
+ <body class="bg-gray-900 text-white min-h-screen">
60
+ <!-- Navigation -->
61
+ <nav class="gradient-bg p-4 sticky top-0 z-50">
62
+ <div class="container mx-auto flex justify-between items-center">
63
+ <div class="flex items-center space-x-2">
64
+ <i class="fas fa-robot text-3xl"></i>
65
+ <span class="text-2xl font-bold">IA Web Builder</span>
66
+ </div>
67
+ <div class="hidden md:flex space-x-6">
68
+ <a href="#features" class="hover:text-gray-200 transition">Fonctionnalités</a>
69
+ <a href="#how-it-works" class="hover:text-gray-200 transition">Comment ça marche</a>
70
+ <a href="#pricing" class="hover:text-gray-200 transition">Tarifs</a>
71
+ <a href="#testimonials" class="hover:text-gray-200 transition">Témoignages</a>
72
+ </div>
73
+ <button class="bg-white text-blue-600 px-4 py-2 rounded-full font-bold hover:bg-gray-100 transition md:hidden">
74
+ <i class="fas fa-bars"></i>
75
+ </button>
76
+ </div>
77
+ </nav>
78
+
79
+ <!-- Hero Section -->
80
+ <section class="gradient-bg py-20">
81
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
82
+ <div class="md:w-1/2 mb-10 md:mb-0">
83
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">Créez des sites web professionnels <span class="text-yellow-300">en quelques clics</span></h1>
84
+ <p class="text-xl mb-8">Notre IA avancée génère automatiquement des sites web complexes avec plus de 2000 lignes de code, incluant domaine, SSL, hébergement et WordPress - le tout sans aucune compétence technique requise.</p>
85
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
86
+ <button class="bg-white text-blue-600 px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition glow">
87
+ Essai Gratuit <i class="fas fa-rocket ml-2"></i>
88
+ </button>
89
+ <button class="bg-transparent border-2 border-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-blue-600 transition">
90
+ Voir la démo <i class="fas fa-play ml-2"></i>
91
+ </button>
92
+ </div>
93
+ </div>
94
+ <div class="md:w-1/2 relative floating">
95
+ <div class="relative bg-gray-800 rounded-2xl p-2 shadow-2xl">
96
+ <div class="bg-gray-900 rounded-xl overflow-hidden">
97
+ <div class="bg-gray-800 p-3 flex items-center">
98
+ <div class="flex space-x-2">
99
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
100
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
101
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
102
+ </div>
103
+ <div class="flex-1 text-center text-sm font-mono">IA Web Builder - Terminal</div>
104
+ </div>
105
+ <div class="p-4 code-block">
106
+ <div class="text-green-400">$ ia-web-builder init --project=ecommerce</div>
107
+ <div class="text-blue-400">> Initialisation du projet ecommerce...</div>
108
+ <div class="text-blue-400">> Analyse des besoins...</div>
109
+ <div class="text-blue-400">> Génération de l'architecture...</div>
110
+ <div class="text-blue-400">> Création de 23 pages...</div>
111
+ <div class="text-blue-400">> Génération de 1247 composants...</div>
112
+ <div class="text-blue-400">> Configuration de WordPress...</div>
113
+ <div class="text-blue-400">> Achat du domaine (votresite.com)...</div>
114
+ <div class="text-blue-400">> Configuration SSL...</div>
115
+ <div class="text-blue-400">> Déploiement sur serveur cloud...</div>
116
+ <div class="text-green-400">$ Projet créé avec succès! (2134 lignes de code)</div>
117
+ <div class="text-green-400">$ Visitez: <span class="text-white">https://votresite.com</span></div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-purple-500 rounded-full opacity-20 filter blur-2xl"></div>
122
+ <div class="absolute -top-10 -right-10 w-40 h-40 bg-blue-500 rounded-full opacity-20 filter blur-2xl"></div>
123
+ </div>
124
+ </div>
125
+ </section>
126
+
127
+ <!-- Features Section -->
128
+ <section id="features" class="py-20 bg-gray-800">
129
+ <div class="container mx-auto px-4">
130
+ <h2 class="text-4xl font-bold text-center mb-16">Fonctionnalités <span class="text-blue-400">Avancées</span></h2>
131
+
132
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
133
+ <!-- Feature 1 -->
134
+ <div class="bg-gray-900 p-8 rounded-2xl feature-card transition shadow-lg">
135
+ <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mb-6">
136
+ <i class="fas fa-magic text-2xl"></i>
137
+ </div>
138
+ <h3 class="text-2xl font-bold mb-4">Génération Automatique</h3>
139
+ <p class="text-gray-300">Notre IA génère des sites web complexes avec plus de 2000 lignes de code optimisé, basé sur votre simple description.</p>
140
+ </div>
141
+
142
+ <!-- Feature 2 -->
143
+ <div class="bg-gray-900 p-8 rounded-2xl feature-card transition shadow-lg">
144
+ <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mb-6">
145
+ <i class="fas fa-server text-2xl"></i>
146
+ </div>
147
+ <h3 class="text-2xl font-bold mb-4">Hébergement Complet</h3>
148
+ <p class="text-gray-300">Configuration automatique du domaine, SSL, serveur cloud et WordPress - tout en un seul clic.</p>
149
+ </div>
150
+
151
+ <!-- Feature 3 -->
152
+ <div class="bg-gray-900 p-8 rounded-2xl feature-card transition shadow-lg">
153
+ <div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mb-6">
154
+ <i class="fas fa-eye text-2xl"></i>
155
+ </div>
156
+ <h3 class="text-2xl font-bold mb-4">Visualisation en Temps Réel</h3>
157
+ <p class="text-gray-300">Voyez votre site prendre forme étape par étape avec notre éditeur visuel interactif.</p>
158
+ </div>
159
+
160
+ <!-- Feature 4 -->
161
+ <div class="bg-gray-900 p-8 rounded-2xl feature-card transition shadow-lg">
162
+ <div class="w-16 h-16 bg-yellow-600 rounded-full flex items-center justify-center mb-6">
163
+ <i class="fas fa-shield-alt text-2xl"></i>
164
+ </div>
165
+ <h3 class="text-2xl font-bold mb-4">Sécurité Avancée</h3>
166
+ <p class="text-gray-300">Protection automatique contre les vulnérabilités avec pare-feu, protection DDoS et sauvegardes quotidiennes.</p>
167
+ </div>
168
+
169
+ <!-- Feature 5 -->
170
+ <div class="bg-gray-900 p-8 rounded-2xl feature-card transition shadow-lg">
171
+ <div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mb-6">
172
+ <i class="fas fa-mobile-alt text-2xl"></i>
173
+ </div>
174
+ <h3 class="text-2xl font-bold mb-4">Design Responsive</h3>
175
+ <p class="text-gray-300">Adaptation automatique à tous les appareils avec des designs modernes et performants.</p>
176
+ </div>
177
+
178
+ <!-- Feature 6 -->
179
+ <div class="bg-gray-900 p-8 rounded-2xl feature-card transition shadow-lg">
180
+ <div class="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center mb-6">
181
+ <i class="fas fa-brain text-2xl"></i>
182
+ </div>
183
+ <h3 class="text-2xl font-bold mb-4">IA Évolutive</h3>
184
+ <p class="text-gray-300">Notre système apprend de chaque projet pour offrir des résultats toujours plus pertinents et personnalisés.</p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </section>
189
+
190
+ <!-- How It Works Section -->
191
+ <section id="how-it-works" class="py-20 bg-gray-900">
192
+ <div class="container mx-auto px-4">
193
+ <h2 class="text-4xl font-bold text-center mb-16">Comment ça <span class="text-blue-400">fonctionne</span></h2>
194
+
195
+ <div class="flex flex-col md:flex-row items-center mb-16">
196
+ <div class="md:w-1/2 mb-10 md:mb-0">
197
+ <div class="bg-gray-800 p-6 rounded-2xl shadow-lg">
198
+ <div class="flex items-center mb-4">
199
+ <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center mr-4">
200
+ <span class="font-bold">1</span>
201
+ </div>
202
+ <h3 class="text-2xl font-bold">Décrivez votre projet</h3>
203
+ </div>
204
+ <p class="text-gray-300 mb-4">Parlez-nous de votre site web idéal en quelques phrases ou utilisez notre assistant vocal.</p>
205
+ <div class="bg-gray-700 p-4 rounded-lg">
206
+ <p class="text-blue-400 italic">"Je veux un site e-commerce pour vendre des produits artisanaux avec système de paiement, avis clients, blog intégré et design moderne."</p>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ <div class="md:w-1/2 flex justify-center">
211
+ <div class="relative floating">
212
+ <img src="https://via.placeholder.com/500x300" alt="Step 1" class="rounded-2xl shadow-xl">
213
+ <div class="absolute -bottom-5 -right-5 w-20 h-20 bg-blue-500 rounded-full flex items-center justify-center shadow-lg">
214
+ <i class="fas fa-microphone text-2xl"></i>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="flex flex-col md:flex-row items-center mb-16">
221
+ <div class="md:w-1/2 order-2 md:order-1 flex justify-center">
222
+ <div class="relative floating">
223
+ <img src="https://via.placeholder.com/500x300" alt="Step 2" class="rounded-2xl shadow-xl">
224
+ <div class="absolute -bottom-5 -left-5 w-20 h-20 bg-purple-500 rounded-full flex items-center justify-center shadow-lg">
225
+ <i class="fas fa-robot text-2xl"></i>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ <div class="md:w-1/2 order-1 md:order-2 mb-10 md:mb-0 md:pl-10">
230
+ <div class="bg-gray-800 p-6 rounded-2xl shadow-lg">
231
+ <div class="flex items-center mb-4">
232
+ <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center mr-4">
233
+ <span class="font-bold">2</span>
234
+ </div>
235
+ <h3 class="text-2xl font-bold">L'IA travaille pour vous</h3>
236
+ </div>
237
+ <p class="text-gray-300 mb-4">Notre système analyse vos besoins et génère automatiquement l'architecture, le design et le code.</p>
238
+ <div class="mb-4">
239
+ <div class="flex justify-between mb-1">
240
+ <span>Génération du code</span>
241
+ <span>87%</span>
242
+ </div>
243
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
244
+ <div class="bg-purple-600 h-2.5 rounded-full progress-bar" style="width: 87%"></div>
245
+ </div>
246
+ </div>
247
+ <div class="text-sm text-gray-400">
248
+ <div class="flex justify-between">
249
+ <span>Pages générées: 23</span>
250
+ <span>Composants: 1247</span>
251
+ <span>Lignes de code: 2134</span>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <div class="flex flex-col md:flex-row items-center">
259
+ <div class="md:w-1/2 mb-10 md:mb-0">
260
+ <div class="bg-gray-800 p-6 rounded-2xl shadow-lg">
261
+ <div class="flex items-center mb-4">
262
+ <div class="w-10 h-10 bg-green-600 rounded-full flex items-center justify-center mr-4">
263
+ <span class="font-bold">3</span>
264
+ </div>
265
+ <h3 class="text-2xl font-bold">Personnalisation & Déploiement</h3>
266
+ </div>
267
+ <p class="text-gray-300 mb-4">Visualisez et ajustez votre site avant le déploiement automatique avec domaine, SSL et hébergement.</p>
268
+ <div class="grid grid-cols-3 gap-4 text-center">
269
+ <div class="bg-gray-700 p-3 rounded-lg">
270
+ <i class="fas fa-globe text-2xl mb-2 text-blue-400"></i>
271
+ <p>Domaine</p>
272
+ </div>
273
+ <div class="bg-gray-700 p-3 rounded-lg">
274
+ <i class="fas fa-lock text-2xl mb-2 text-green-400"></i>
275
+ <p>SSL</p>
276
+ </div>
277
+ <div class="bg-gray-700 p-3 rounded-lg">
278
+ <i class="fas fa-cloud text-2xl mb-2 text-purple-400"></i>
279
+ <p>Hébergement</p>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ <div class="md:w-1/2 flex justify-center">
285
+ <div class="relative floating">
286
+ <img src="https://via.placeholder.com/500x300" alt="Step 3" class="rounded-2xl shadow-xl">
287
+ <div class="absolute -top-5 -right-5 w-20 h-20 bg-green-500 rounded-full flex items-center justify-center shadow-lg">
288
+ <i class="fas fa-rocket text-2xl"></i>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </section>
295
+
296
+ <!-- Demo Generator -->
297
+ <section class="py-20 gradient-bg">
298
+ <div class="container mx-auto px-4">
299
+ <h2 class="text-4xl font-bold text-center mb-6">Essayez notre <span class="text-yellow-300">Générateur IA</span></h2>
300
+ <p class="text-xl text-center mb-12">Décrivez votre site et voyez un aperçu en temps réel de ce que notre IA peut créer pour vous</p>
301
+
302
+ <div class="max-w-4xl mx-auto bg-gray-900 bg-opacity-70 rounded-2xl p-8 shadow-2xl">
303
+ <div class="mb-6">
304
+ <label class="block text-lg mb-2">Décrivez votre site web idéal:</label>
305
+ <textarea class="w-full bg-gray-800 rounded-lg p-4 text-white border border-gray-700 focus:border-blue-500 focus:outline-none h-32" placeholder="Ex: Je veux un portfolio moderne pour mon travail de photographe avec galerie, formulaire de contact et blog intégré..."></textarea>
306
+ </div>
307
+
308
+ <div class="mb-6">
309
+ <label class="block text-lg mb-2">Type de site:</label>
310
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
311
+ <button class="bg-gray-800 hover:bg-blue-600 transition py-3 px-4 rounded-lg flex items-center justify-center">
312
+ <i class="fas fa-shopping-cart mr-2"></i> E-commerce
313
+ </button>
314
+ <button class="bg-gray-800 hover:bg-purple-600 transition py-3 px-4 rounded-lg flex items-center justify-center">
315
+ <i class="fas fa-briefcase mr-2"></i> Portfolio
316
+ </button>
317
+ <button class="bg-gray-800 hover:bg-green-600 transition py-3 px-4 rounded-lg flex items-center justify-center">
318
+ <i class="fas fa-newspaper mr-2"></i> Blog
319
+ </button>
320
+ <button class="bg-gray-800 hover:bg-red-600 transition py-3 px-4 rounded-lg flex items-center justify-center">
321
+ <i class="fas fa-building mr-2"></i> Entreprise
322
+ </button>
323
+ </div>
324
+ </div>
325
+
326
+ <div class="mb-6">
327
+ <label class="block text-lg mb-2">Style de design:</label>
328
+ <div class="flex flex-wrap gap-4">
329
+ <button class="bg-gray-800 hover:bg-yellow-600 transition py-2 px-4 rounded-lg">Moderne</button>
330
+ <button class="bg-gray-800 hover:bg-yellow-600 transition py-2 px-4 rounded-lg">Minimaliste</button>
331
+ <button class="bg-gray-800 hover:bg-yellow-600 transition py-2 px-4 rounded-lg">Artistique</button>
332
+ <button class="bg-gray-800 hover:bg-yellow-600 transition py-2 px-4 rounded-lg">Professionnel</button>
333
+ <button class="bg-gray-800 hover:bg-yellow-600 transition py-2 px-4 rounded-lg">Vintage</button>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="text-center">
338
+ <button id="generateBtn" class="bg-white text-blue-600 px-10 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition glow">
339
+ Générer mon site <i class="fas fa-magic ml-2"></i>
340
+ </button>
341
+ </div>
342
+
343
+ <div id="generationResult" class="hidden mt-8">
344
+ <div class="bg-gray-800 rounded-xl p-6">
345
+ <div class="flex items-center mb-4">
346
+ <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mr-4">
347
+ <i class="fas fa-cog fa-spin text-xl"></i>
348
+ </div>
349
+ <h3 class="text-2xl font-bold">Génération en cours...</h3>
350
+ </div>
351
+
352
+ <div class="mb-6">
353
+ <div class="flex justify-between mb-1">
354
+ <span>Analyse des besoins</span>
355
+ <span id="progress1">0%</span>
356
+ </div>
357
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
358
+ <div id="progressBar1" class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
359
+ </div>
360
+ </div>
361
+
362
+ <div class="mb-6">
363
+ <div class="flex justify-between mb-1">
364
+ <span>Création de l'architecture</span>
365
+ <span id="progress2">0%</span>
366
+ </div>
367
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
368
+ <div id="progressBar2" class="bg-purple-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
369
+ </div>
370
+ </div>
371
+
372
+ <div class="mb-6">
373
+ <div class="flex justify-between mb-1">
374
+ <span>Génération du code</span>
375
+ <span id="progress3">0%</span>
376
+ </div>
377
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
378
+ <div id="progressBar3" class="bg-green-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
379
+ </div>
380
+ </div>
381
+
382
+ <div id="resultPreview" class="hidden">
383
+ <div class="border-2 border-dashed border-blue-500 rounded-lg p-4 mb-4">
384
+ <h4 class="text-xl font-bold mb-2 text-blue-400">Aperçu de votre site</h4>
385
+ <p class="mb-4">Voici ce que notre IA a généré pour vous. Vous pouvez personnaliser chaque élément avant le déploiement final.</p>
386
+ <div class="bg-gray-900 p-4 rounded-lg">
387
+ <div class="flex justify-between items-center mb-2">
388
+ <span>Pages générées:</span>
389
+ <span class="font-bold">12</span>
390
+ </div>
391
+ <div class="flex justify-between items-center mb-2">
392
+ <span>Composants:</span>
393
+ <span class="font-bold">847</span>
394
+ </div>
395
+ <div class="flex justify-between items-center">
396
+ <span>Lignes de code:</span>
397
+ <span class="font-bold">2156</span>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ <div class="flex justify-center space-x-4">
402
+ <button class="bg-blue-600 hover:bg-blue-700 transition px-6 py-3 rounded-full font-bold">
403
+ Personnaliser <i class="fas fa-paint-brush ml-2"></i>
404
+ </button>
405
+ <button class="bg-green-600 hover:bg-green-700 transition px-6 py-3 rounded-full font-bold">
406
+ Déployer maintenant <i class="fas fa-rocket ml-2"></i>
407
+ </button>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </section>
415
+
416
+ <!-- Pricing Section -->
417
+ <section id="pricing" class="py-20 bg-gray-800">
418
+ <div class="container mx-auto px-4">
419
+ <h2 class="text-4xl font-bold text-center mb-4">Nos <span class="text-blue-400">Offres</span></h2>
420
+ <p class="text-xl text-center mb-16 max-w-2xl mx-auto">Choisissez le plan qui correspond à vos besoins. Tous nos plans incluent la génération automatique de code, l'hébergement et la gestion complète.</p>
421
+
422
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
423
+ <!-- Basic Plan -->
424
+ <div class="bg-gray-900 rounded-2xl p-8 shadow-lg transform hover:scale-105 transition duration-300">
425
+ <div class="text-center mb-8">
426
+ <h3 class="text-2xl font-bold mb-2">Starter</h3>
427
+ <div class="text-4xl font-bold mb-2">19€<span class="text-lg text-gray-400">/mois</span></div>
428
+ <div class="text-gray-400">Parfait pour les petits projets</div>
429
+ </div>
430
+ <ul class="space-y-4 mb-8">
431
+ <li class="flex items-center">
432
+ <i class="fas fa-check text-green-500 mr-3"></i>
433
+ <span>Jusqu'à 500 lignes de code</span>
434
+ </li>
435
+ <li class="flex items-center">
436
+ <i class="fas fa-check text-green-500 mr-3"></i>
437
+ <span>5 pages maximum</span>
438
+ </li>
439
+ <li class="flex items-center">
440
+ <i class="fas fa-check text-green-500 mr-3"></i>
441
+ <span>Domaine personnalisé</span>
442
+ </li>
443
+ <li class="flex items-center">
444
+ <i class="fas fa-check text-green-500 mr-3"></i>
445
+ <span>SSL inclus</span>
446
+ </li>
447
+ <li class="flex items-center text-gray-500">
448
+ <i class="fas fa-times text-red-500 mr-3"></i>
449
+ <span>Pas de WordPress</span>
450
+ </li>
451
+ </ul>
452
+ <button class="w-full bg-blue-600 hover:bg-blue-700 transition py-3 rounded-full font-bold">
453
+ Commencer <i class="fas fa-arrow-right ml-2"></i>
454
+ </button>
455
+ </div>
456
+
457
+ <!-- Pro Plan (Featured) -->
458
+ <div class="bg-gradient-to-br from-blue-600 to-blue-800 rounded-2xl p-8 shadow-2xl transform hover:scale-105 transition duration-300 relative">
459
+ <div class="absolute -top-4 -right-4 bg-yellow-500 text-black px-3 py-1 rounded-full font-bold text-sm">
460
+ POPULAIRE
461
+ </div>
462
+ <div class="text-center mb-8">
463
+ <h3 class="text-2xl font-bold mb-2">Pro</h3>
464
+ <div class="text-4xl font-bold mb-2">49€<span class="text-lg text-blue-200">/mois</span></div>
465
+ <div class="text-blue-100">Pour les sites web professionnels</div>
466
+ </div>
467
+ <ul class="space-y-4 mb-8">
468
+ <li class="flex items-center">
469
+ <i class="fas fa-check text-yellow-300 mr-3"></i>
470
+ <span>Jusqu'à 2000 lignes de code</span>
471
+ </li>
472
+ <li class="flex items-center">
473
+ <i class="fas fa-check text-yellow-300 mr-3"></i>
474
+ <span>20 pages maximum</span>
475
+ </li>
476
+ <li class="flex items-center">
477
+ <i class="fas fa-check text-yellow-300 mr-3"></i>
478
+ <span>Domaine premium</span>
479
+ </li>
480
+ <li class="flex items-center">
481
+ <i class="fas fa-check text-yellow-300 mr-3"></i>
482
+ <span>SSL avancé</span>
483
+ </li>
484
+ <li class="flex items-center">
485
+ <i class="fas fa-check text-yellow-300 mr-3"></i>
486
+ <span>WordPress automatique</span>
487
+ </li>
488
+ </ul>
489
+ <button class="w-full bg-white text-blue-600 hover:bg-gray-100 transition py-3 rounded-full font-bold">
490
+ Choisir ce plan <i class="fas fa-crown ml-2"></i>
491
+ </button>
492
+ </div>
493
+
494
+ <!-- Enterprise Plan -->
495
+ <div class="bg-gray-900 rounded-2xl p-8 shadow-lg transform hover:scale-105 transition duration-300">
496
+ <div class="text-center mb-8">
497
+ <h3 class="text-2xl font-bold mb-2">Enterprise</h3>
498
+ <div class="text-4xl font-bold mb-2">99€<span class="text-lg text-gray-400">/mois</span></div>
499
+ <div class="text-gray-400">Pour les projets complexes</div>
500
+ </div>
501
+ <ul class="space-y-4 mb-8">
502
+ <li class="flex items-center">
503
+ <i class="fas fa-check text-green-500 mr-3"></i>
504
+ <span>Code illimité</span>
505
+ </li>
506
+ <li class="flex items-center">
507
+ <i class="fas fa-check text-green-500 mr-3"></i>
508
+ <span>Pages illimitées</span>
509
+ </li>
510
+ <li class="flex items-center">
511
+ <i class="fas fa-check text-green-500 mr-3"></i>
512
+ <span>Multi-domaines</span>
513
+ </li>
514
+ <li class="flex items-center">
515
+ <i class="fas fa-check text-green-500 mr-3"></i>
516
+ <span>SSL wildcard</span>
517
+ </li>
518
+ <li class="flex items-center">
519
+ <i class="fas fa-check text-green-500 mr-3"></i>
520
+ <span>WordPress multisite</span>
521
+ </li>
522
+ </ul>
523
+ <button class="w-full bg-blue-600 hover:bg-blue-700 transition py-3 rounded-full font-bold">
524
+ Contactez-nous <i class="fas fa-headset ml-2"></i>
525
+ </button>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </section>
530
+
531
+ <!-- Testimonials Section -->
532
+ <section id="testimonials" class="py-20 bg-gray-900">
533
+ <div class="container mx-auto px-4">
534
+ <h2 class="text-4xl font-bold text-center mb-16">Ce que nos clients <span class="text-blue-400">disent</span></h2>
535
+
536
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
537
+ <!-- Testimonial 1 -->
538
+ <div class="bg-gray-800 p-8 rounded-2xl shadow-lg">
539
+ <div class="flex items-center mb-6">
540
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-16 h-16 rounded-full mr-4">
541
+ <div>
542
+ <h4 class="font-bold">Sophie Martin</h4>
543
+ <div class="flex text-yellow-400">
544
+ <i class="fas fa-star"></i>
545
+ <i class="fas fa-star"></i>
546
+ <i class="fas fa-star"></i>
547
+ <i class="fas fa-star"></i>
548
+ <i class="fas fa-star"></i>
549
+ </div>
550
+ </div>
551
+ </div>
552
+ <p class="text-gray-300 italic">"En tant que photographe, je n'avais aucune compétence technique. L'IA Web Builder a créé un magnifique portfolio avec galerie et blog en moins d'une heure. Le résultat est bien meilleur que ce que j'aurais pu imaginer!"</p>
553
+ </div>
554
+
555
+ <!-- Testimonial 2 -->
556
+ <div class="bg-gray-800 p-8 rounded-2xl shadow-lg">
557
+ <div class="flex items-center mb-6">
558
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-16 h-16 rounded-full mr-4">
559
+ <div>
560
+ <h4 class="font-bold">Thomas Leroy</h4>
561
+ <div class="flex text-yellow-400">
562
+ <i class="fas fa-star"></i>
563
+ <i class="fas fa-star"></i>
564
+ <i class="fas fa-star"></i>
565
+ <i class="fas fa-star"></i>
566
+ <i class="fas fa-star"></i>
567
+ </div>
568
+ </div>
569
+ </div>
570
+ <p class="text-gray-300 italic">"J'ai lancé mon e-commerce d'artisanat en un week-end grâce à cette plateforme. La configuration automatique du paiement en ligne et la gestion des stocks m'ont fait gagner des semaines de développement. Vraiment impressionnant!"</p>
571
+ </div>
572
+
573
+ <!-- Testimonial 3 -->
574
+ <div class="bg-gray-800 p-8 rounded-2xl shadow-lg">
575
+ <div class="flex items-center mb-6">
576
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="w-16 h-16 rounded-full mr-4">
577
+ <div>
578
+ <h4 class="font-bold">Émilie Dubois</h4>
579
+ <div class="flex text-yellow-400">
580
+ <i class="fas fa-star"></i>
581
+ <i class="fas fa-star"></i>
582
+ <i class="fas fa-star"></i>
583
+ <i class="fas fa-star"></i>
584
+ <i class="fas fa-star-half-alt"></i>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ <p class="text-gray-300 italic">"Notre site corporate avec plus de 50 pages a été généré en 2 jours. L'IA a même suggéré une architecture que nous n'avions pas envisagée. Le support technique est réactif et compétent. Je recommande vivement!"</p>
589
+ </div>
590
+ </div>
591
+
592
+ <div class="text-center mt-16">
593
+ <button class="bg-blue-600 hover:bg-blue-700 transition px-8 py-4 rounded-full font-bold text-lg glow">
594
+ Commencez votre essai gratuit <i class="fas fa-arrow-right ml-2"></i>
595
+ </button>
596
+ </div>
597
+ </div>
598
+ </section>
599
+
600
+ <!-- FAQ Section -->
601
+ <section class="py-20 bg-gray-800">
602
+ <div class="container mx-auto px-4 max-w-4xl">
603
+ <h2 class="text-4xl font-bold text-center mb-16">Questions <span class="text-blue-400">Fréquentes</span></h2>
604
+
605
+ <div class="space-y-4">
606
+ <!-- FAQ Item 1 -->
607
+ <div class="bg-gray-900 rounded-xl overflow-hidden">
608
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
609
+ <span class="text-xl font-bold">Combien de temps faut-il pour générer un site web complet?</span>
610
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
611
+ </button>
612
+ <div class="faq-content hidden px-6 pb-6">
613
+ <p class="text-gray-300">Notre IA peut générer un site web de base en moins de 10 minutes. Pour des projets plus complexes avec plus de 2000 lignes de code, comptez entre 30 minutes et 2 heures selon la complexité. Le déploiement avec domaine et hébergement prend généralement moins de 24 heures.</p>
614
+ </div>
615
+ </div>
616
+
617
+ <!-- FAQ Item 2 -->
618
+ <div class="bg-gray-900 rounded-xl overflow-hidden">
619
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
620
+ <span class="text-xl font-bold">Puis-je personnaliser le site après la génération automatique?</span>
621
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
622
+ </button>
623
+ <div class="faq-content hidden px-6 pb-6">
624
+ <p class="text-gray-300">Absolument! Notre plateforme offre un éditeur visuel complet pour modifier chaque aspect de votre site. Vous pouvez également accéder au code source généré si vous souhaitez des ajustements techniques avancés. Toutes les modifications sont sauvegardées automatiquement.</p>
625
+ </div>
626
+ </div>
627
+
628
+ <!-- FAQ Item 3 -->
629
+ <div class="bg-gray-900 rounded-xl overflow-hidden">
630
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
631
+ <span class="text-xl font-bold">Comment fonctionne l'intégration de WordPress?</span>
632
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
633
+ </button>
634
+ <div class="faq-content hidden px-6 pb-6">
635
+ <p class="text-gray-300">Notre système installe automatiquement WordPress avec une configuration optimisée, incluant les thèmes et plugins nécessaires selon votre type de site. L'interface d'administration est simplifiée et vous recevez une formation en ligne pour gérer facilement votre contenu.</p>
636
+ </div>
637
+ </div>
638
+
639
+ <!-- FAQ Item 4 -->
640
+ <div class="bg-gray-900 rounded-xl overflow-hidden">
641
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
642
+ <span class="text-xl font-bold">Quelle est la qualité du code généré?</span>
643
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
644
+ </button>
645
+ <div class="faq-content hidden px-6 pb-6">
646
+ <p class="text-gray-300">Notre IA produit du code propre, bien documenté et conforme aux standards du web. Chaque projet passe des tests automatiques de performance, accessibilité et sécurité. Le code est optimisé pour le SEO et les temps de chargement, avec une note moyenne de 95/100 sur Google PageSpeed Insights.</p>
647
+ </div>
648
+ </div>
649
+
650
+ <!-- FAQ Item 5 -->
651
+ <div class="bg-gray-900 rounded-xl overflow-hidden">
652
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
653
+ <span class="text-xl font-bold">Puis-je migrer un site existant vers votre plateforme?</span>
654
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
655
+ </button>
656
+ <div class="faq-content hidden px-6 pb-6">
657
+ <p class="text-gray-300">Oui, nous offrons un service de migration assistée par IA. Notre système analyse votre site existant et propose une structure optimisée avant de générer le nouveau code. Nous prenons en charge la migration du contenu, des médias et des fonctionnalités principales.</p>
658
+ </div>
659
+ </div>
660
+ </div>
661
+ </div>
662
+ </section>
663
+
664
+ <!-- CTA Section -->
665
+ <section class="gradient-bg py-20">
666
+ <div class="container mx-auto px-4 text-center">
667
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">Prêt à créer votre site web <span class="text-yellow-300">en un clic</span>?</h2>
668
+ <p class="text-xl mb-10 max-w-2xl mx-auto">Rejoignez des milliers de professionnels qui font confiance à notre IA pour leurs projets web.</p>
669
+
670
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
671
+ <button class="bg-white text-blue-600 px-10 py-5 rounded-full font-bold text-lg hover:bg-gray-100 transition glow">
672
+ Commencer maintenant <i class="fas fa-magic ml-2"></i>
673
+ </button>
674
+ <button class="bg-transparent border-2 border-white px-10 py-5 rounded-full font-bold text-lg hover:bg-white hover:text-blue-600 transition">
675
+ Voir des exemples <i class="fas fa-images ml-2"></i>
676
+ </button>
677
+ </div>
678
+
679
+ <div class="mt-10 flex flex-wrap justify-center gap-6">
680
+ <div class="flex items-center">
681
+ <i class="fas fa-check-circle text-green-400 text-2xl mr-2"></i>
682
+ <span>Essai gratuit de 7 jours</span>
683
+ </div>
684
+ <div class="flex items-center">
685
+ <i class="fas fa-check-circle text-green-400 text-2xl mr-2"></i>
686
+ <span>Aucune carte de crédit requise</span>
687
+ </div>
688
+ <div class="flex items-center">
689
+ <i class="fas fa-check-circle text-green-400 text-2xl mr-2"></i>
690
+ <span>Support 24/7</span>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ </section>
695
+
696
+ <!-- Footer -->
697
+ <footer class="bg-gray-900 py-12">
698
+ <div class="container mx-auto px-4">
699
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
700
+ <div>
701
+ <div class="flex items-center space-x-2 mb-6">
702
+ <i class="fas fa-robot text-3xl text-blue-500"></i>
703
+ <span class="text-2xl font-bold">IA Web Builder</span>
704
+ </div>
705
+ <p class="text-gray-400">La puissance de l'intelligence artificielle au service de votre présence en ligne.</p>
706
+ <div class="flex space-x-4 mt-6">
707
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
708
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
709
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a>
710
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
711
+ </div>
712
+ </div>
713
+
714
+ <div>
715
+ <h4 class="text-xl font-bold mb-6">Produit</h4>
716
+ <ul class="space-y-3">
717
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Fonctionnalités</a></li>
718
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tarifs</a></li>
719
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Exemples</a></li>
720
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
721
+ </ul>
722
+ </div>
723
+
724
+ <div>
725
+ <h4 class="text-xl font-bold mb-6">Entreprise</h4>
726
+ <ul class="space-y-3">
727
+ <li><a href="#" class="text-gray-400 hover:text-white transition">À propos</a></li>
728
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Carrières</a></li>
729
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Presse</a></li>
730
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
731
+ </ul>
732
+ </div>
733
+
734
+ <div>
735
+ <h4 class="text-xl font-bold mb-6">Support</h4>
736
+ <ul class="space-y-3">
737
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Centre d'aide</a></li>
738
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
739
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Statut</a></li>
740
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a></li>
741
+ </ul>
742
+ </div>
743
+ </div>
744
+
745
+ <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
746
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 IA Web Builder. Tous droits réservés.</p>
747
+ <div class="flex space-x-6">
748
+ <a href="#" class="text-gray-400 hover:text-white transition">Conditions</a>
749
+ <a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a>
750
+ <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
751
+ </div>
752
+ </div>
753
+ </div>
754
+ </footer>
755
+
756
+ <!-- Floating Action Button -->
757
+ <div class="fixed bottom-8 right-8">
758
+ <button class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center shadow-xl hover:bg-blue-700 transition glow">
759
+ <i class="fas fa-comment-dots text-2xl"></i>
760
+ </button>
761
+ </div>
762
+
763
+ <script>
764
+ // Toggle FAQ items
765
+ document.querySelectorAll('.faq-toggle').forEach(button => {
766
+ button.addEventListener('click', () => {
767
+ const content = button.nextElementSibling;
768
+ const icon = button.querySelector('i');
769
+
770
+ content.classList.toggle('hidden');
771
+ icon.classList.toggle('rotate-180');
772
+ });
773
+ });
774
+
775
+ // Simulate generation process
776
+ document.getElementById('generateBtn').addEventListener('click', function() {
777
+ const generationResult = document.getElementById('generationResult');
778
+ generationResult.classList.remove('hidden');
779
+
780
+ // Simulate progress
781
+ let progress1 = 0;
782
+ let progress2 = 0;
783
+ let progress3 = 0;
784
+
785
+ const interval1 = setInterval(() => {
786
+ progress1 += Math.floor(Math.random() * 5) + 1;
787
+ if (progress1 >= 100) {
788
+ progress1 = 100;
789
+ clearInterval(interval1);
790
+
791
+ // Start second progress bar
792
+ const interval2 = setInterval(() => {
793
+ progress2 += Math.floor(Math.random() * 5) + 1;
794
+ if (progress2 >= 100) {
795
+ progress2 = 100;
796
+ clearInterval(interval2);
797
+
798
+ // Start third progress bar
799
+ const interval3 = setInterval(() => {
800
+ progress3 += Math.floor(Math.random() * 5) + 1;
801
+ if (progress3 >= 100) {
802
+ progress3 = 100;
803
+ clearInterval(interval3);
804
+
805
+ // Show result after all progress bars are complete
806
+ setTimeout(() => {
807
+ document.getElementById('resultPreview').classList.remove('hidden');
808
+ }, 500);
809
+ }
810
+ document.getElementById('progress3').textContent = progress3 + '%';
811
+ document.getElementById('progressBar3').style.width = progress3 + '%';
812
+ }, 100);
813
+ }
814
+ document.getElementById('progress2').textContent = progress2 + '%';
815
+ document.getElementById('progressBar2').style.width = progress2 + '%';
816
+ }, 100);
817
+ }
818
+ document.getElementById('progress1').textContent = progress1 + '%';
819
+ document.getElementById('progressBar1').style.width = progress1 + '%';
820
+ }, 100);
821
+ });
822
+
823
+ // Animate elements when they come into view
824
+ const observer = new IntersectionObserver((entries) => {
825
+ entries.forEach(entry => {
826
+ if (entry.isIntersecting) {
827
+ entry.target.classList.add('animate-fadeIn');
828
+ }
829
+ });
830
+ }, {threshold: 0.1});
831
+
832
+ document.querySelectorAll('.feature-card, .faq-toggle').forEach(el => {
833
+ observer.observe(el);
834
+ });
835
+ </script>
836
+ <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/ia-web-builder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
837
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ je veux un génerateur tres sofitiqué d'nteligence artificiel de 1298700 assitant ia génerateur de code et scrypt de site web que par description et visalisation etape par etape en automatique pour creer des site imense avec plus de 2000ligne en automatique avec domaine,ssl, serveur , wordpress enregistrement toute complet en automatique , avec une tres belle interface tres animé