Hugging Face's logo

Spaces:
docto41
/
conai
Running

App Files Community
docto41 commited on
Commit
64b8065
·
verified ·
1 Parent(s): a77e5e0

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +140 -948
  2. prompts.txt +2 -1
index.html CHANGED
@@ -13,57 +13,6 @@
13
  .dark-gradient-bg {
14
  background: linear-gradient(135deg, #1e3a8a 0%, #5b21b6 100%);
15
  }
16
- .preview-container {
17
- border: 2px dashed #cbd5e1;
18
- min-height: 400px;
19
- transition: all 0.3s ease;
20
- }
21
- .preview-container.live {
22
- border-color: #10b981;
23
- box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
24
- }
25
- .progress-step.active {
26
- background-color: #2563eb;
27
- color: white;
28
- }
29
- .progress-step.completed {
30
- background-color: #10b981;
31
- color: white;
32
- }
33
- .ai-card:hover {
34
- transform: translateY(-5px);
35
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
36
- }
37
- @keyframes pulse {
38
- 0%, 100% { opacity: 1; }
39
- 50% { opacity: 0.5; }
40
- }
41
- .pulse-animation {
42
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
43
- }
44
- .modal {
45
- display: none;
46
- position: fixed;
47
- z-index: 100;
48
- left: 0;
49
- top: 0;
50
- width: 100%;
51
- height: 100%;
52
- background-color: rgba(0,0,0,0.7);
53
- }
54
- .modal-content {
55
- background-color: white;
56
- margin: 10% auto;
57
- padding: 20px;
58
- border-radius: 8px;
59
- width: 80%;
60
- max-width: 600px;
61
- animation: modalopen 0.5s;
62
- }
63
- @keyframes modalopen {
64
- from {opacity: 0; transform: translateY(-50px);}
65
- to {opacity: 1; transform: translateY(0);}
66
- }
67
  </style>
68
  </head>
69
  <body class="bg-gray-50 font-sans">
@@ -79,976 +28,219 @@
79
  <p class="text-sm opacity-80">Plateforme Professionnelle de Création de Sites</p>
80
  </div>
81
  </div>
82
- <div class="hidden md:flex items-center space-x-6">
83
- <a href="#home" class="hover:text-blue-300 transition">Accueil</a>
84
- <a href="#features" class="hover:text-blue-300 transition">Fonctionnalités</a>
85
- <a href="#pricing" class="hover:text-blue-300 transition">Tarifs</a>
86
- <a href="#resources" class="hover:text-blue-300 transition">Ressources</a>
87
- <button id="free-trial-btn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition">
88
- <i class="fas fa-rocket mr-2"></i> Essai Gratuit
89
- </button>
90
- </div>
91
- <button id="mobile-menu-btn" class="md:hidden text-2xl">
92
- <i class="fas fa-bars"></i>
93
- </button>
94
- </div>
95
- <!-- Mobile Menu -->
96
- <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4">
97
- <div class="flex flex-col space-y-3">
98
- <a href="#home" class="hover:text-blue-300 transition">Accueil</a>
99
- <a href="#features" class="hover:text-blue-300 transition">Fonctionnalités</a>
100
- <a href="#pricing" class="hover:text-blue-300 transition">Tarifs</a>
101
- <a href="#resources" class="hover:text-blue-300 transition">Ressources</a>
102
- <button id="mobile-free-trial-btn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition w-full">
103
- <i class="fas fa-rocket mr-2"></i> Essai Gratuit
104
- </button>
105
- </div>
106
  </div>
107
  </div>
108
  </header>
109
 
110
- <!-- Hero Section -->
111
- <section id="home" class="gradient-bg text-white py-16">
112
- <div class="container mx-auto px-4">
113
- <div class="flex flex-col md:flex-row items-center">
114
- <div class="md:w-1/2 mb-10 md:mb-0">
115
- <h1 class="text-4xl md:text-5xl font-bold mb-6">Créez des sites professionnels <span class="text-blue-200">en quelques minutes</span></h1>
116
- <p class="text-xl mb-8 opacity-90">Notre plateforme alimentée par 1000+ IA génère des sites haut de gamme avec domaine et SSL intégrés automatiquement.</p>
117
- <div class="flex flex-col sm:flex-row gap-4">
118
- <button id="demo-video-btn" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-semibold transition">
119
- <i class="fas fa-play-circle mr-2"></i> Démo Vidéo
120
- </button>
121
- <button id="start-now-btn" class="bg-blue-800 hover:bg-blue-900 px-6 py-3 rounded-lg font-semibold transition">
122
- <i class="fas fa-bolt mr-2"></i> Commencer Maintenant
123
- </button>
124
- </div>
125
- </div>
126
- <div class="md:w-1/2 relative">
127
- <div class="bg-white/10 backdrop-blur-md rounded-xl p-2 border border-white/20">
128
- <div class="bg-gray-900 rounded-lg overflow-hidden">
129
- <div class="bg-gray-800 p-3 flex items-center">
130
- <div class="flex space-x-2 mr-4">
131
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
132
- <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
133
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
134
- </div>
135
- <div class="text-sm text-gray-400">www.votresite.com</div>
136
- </div>
137
- <div class="p-4">
138
- <div class="grid grid-cols-3 gap-4 mb-4">
139
- <div class="bg-blue-900/50 h-20 rounded-lg"></div>
140
- <div class="bg-blue-900/50 h-20 rounded-lg"></div>
141
- <div class="bg-blue-900/50 h-20 rounded-lg"></div>
142
- </div>
143
- <div class="bg-blue-900/50 h-40 rounded-lg mb-4"></div>
144
- <div class="grid grid-cols-4 gap-4">
145
- <div class="bg-blue-900/50 h-12 rounded-lg"></div>
146
- <div class="bg-blue-900/50 h-12 rounded-lg"></div>
147
- <div class="bg-blue-900/50 h-12 rounded-lg"></div>
148
- <div class="bg-blue-900/50 h-12 rounded-lg"></div>
149
- </div>
150
- </div>
151
- </div>
152
- </div>
153
- <div class="absolute -bottom-6 -right-6 bg-yellow-500 text-gray-900 px-4 py-2 rounded-lg font-bold shadow-lg">
154
- <i class="fas fa-bolt mr-2"></i> SSL Automatique
155
- </div>
156
- </div>
157
- </div>
158
- </div>
159
- </section>
160
-
161
  <!-- Main Content -->
162
  <main class="flex-grow container mx-auto px-4 py-12">
163
- <!-- Creation Steps -->
164
  <section class="mb-20">
165
- <h2 class="text-3xl font-bold text-center mb-4">Créez votre site en 4 étapes simples</h2>
166
- <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Notre processus guidé vous permet de créer un site professionnel en quelques minutes seulement.</p>
167
-
168
- <div class="flex flex-col md:flex-row justify-between mb-12">
169
- <div class="flex flex-col items-center mb-8 md:mb-0">
170
- <div id="step-1" class="progress-step active w-12 h-12 rounded-full flex items-center justify-center font-bold mb-2">1</div>
171
- <span class="font-medium">Configuration</span>
172
- </div>
173
- <div class="flex flex-col items-center mb-8 md:mb-0">
174
- <div id="step-2" class="progress-step w-12 h-12 rounded-full flex items-center justify-center font-bold mb-2 bg-gray-200">2</div>
175
- <span class="font-medium text-gray-500">Personnalisation</span>
176
- </div>
177
- <div class="flex flex-col items-center mb-8 md:mb-0">
178
- <div id="step-3" class="progress-step w-12 h-12 rounded-full flex items-center justify-center font-bold mb-2 bg-gray-200">3</div>
179
- <span class="font-medium text-gray-500">Contenu</span>
180
- </div>
181
- <div class="flex flex-col items-center">
182
- <div id="step-4" class="progress-step w-12 h-12 rounded-full flex items-center justify-center font-bold mb-2 bg-gray-200">4</div>
183
- <span class="font-medium text-gray-500">Publication</span>
184
- </div>
185
- </div>
186
-
187
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
188
- <!-- Configuration Panel -->
189
- <div class="lg:col-span-1 bg-white rounded-xl shadow-lg p-6">
190
- <h3 class="text-xl font-semibold mb-4">Configuration Initiale</h3>
191
-
192
- <div class="space-y-4">
193
- <div>
194
- <label class="block text-sm font-medium text-gray-700 mb-1">Type de Site</label>
195
- <select id="site-type" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
196
- <option value="">Sélectionnez...</option>
197
- <option value="vitrine">Site Vitrine</option>
198
- <option value="ecommerce">E-commerce</option>
199
- <option value="portfolio">Portfolio</option>
200
- <option value="blog">Blog</option>
201
- <option value="entreprise">Entreprise</option>
202
- </select>
203
- </div>
204
-
205
- <div>
206
- <label class="block text-sm font-medium text-gray-700 mb-1">Nom du Site</label>
207
- <input id="site-name" type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Ma Super Entreprise">
208
- </div>
209
-
210
- <div>
211
- <label class="block text-sm font-medium text-gray-700 mb-1">Domaine</label>
212
- <div class="flex">
213
- <input id="domain-input" type="text" class="flex-grow px-4 py-2 border rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="nomdevotresite">
214
- <select id="domain-extension" class="w-24 px-2 py-2 border-t border-b border-r rounded-r-lg bg-gray-50">
215
- <option>.com</option>
216
- <option>.fr</option>
217
- <option>.net</option>
218
- <option>.io</option>
219
- <option>.shop</option>
220
- </select>
221
- </div>
222
- <div id="domain-check" class="mt-2 text-sm hidden">
223
- <i class="fas fa-spinner fa-spin mr-1"></i> Vérification...
224
  </div>
 
225
  </div>
226
-
227
- <div>
228
- <label class="block text-sm font-medium text-gray-700 mb-1">Secteur d'activité</label>
229
- <select id="industry" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
230
- <option value="">Sélectionnez...</option>
231
- <option value="restaurant">Restaurant</option>
232
- <option value="sante">Santé & Bien-être</option>
233
- <option value="tech">Technologie</option>
234
- <option value="mode">Mode</option>
235
- <option value="immobilier">Immobilier</option>
236
- <option value="education">Éducation</option>
237
- </select>
238
  </div>
239
-
240
- <button id="generate-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-semibold transition mt-4">
241
- <i class="fas fa-magic mr-2"></i> Générer les Options
242
- </button>
243
  </div>
244
- </div>
245
-
246
- <!-- Live Preview -->
247
- <div class="lg:col-span-2">
248
- <div class="bg-white rounded-xl shadow-lg overflow-hidden">
249
- <div class="border-b p-4 flex justify-between items-center">
250
- <h3 class="font-semibold">Aperçu en Direct</h3>
251
- <div class="flex items-center space-x-2">
252
- <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full flex items-center">
253
- <span class="w-2 h-2 bg-green-500 rounded-full mr-1"></span>
254
- En direct
255
- </span>
256
- <div class="flex space-x-1">
257
- <button id="mobile-preview-btn" class="w-8 h-8 flex items-center justify-center border rounded">
258
- <i class="fas fa-mobile-alt text-sm"></i>
259
- </button>
260
- <button id="desktop-preview-btn" class="w-8 h-8 flex items-center justify-center border rounded bg-blue-50">
261
- <i class="fas fa-desktop text-sm"></i>
262
- </button>
263
- <button id="tablet-preview-btn" class="w-8 h-8 flex items-center justify-center border rounded">
264
- <i class="fas fa-tablet-alt text-sm"></i>
265
- </button>
266
- </div>
267
  </div>
 
268
  </div>
269
-
270
- <div id="preview-container" class="preview-container live p-4">
271
- <div class="flex justify-center items-center h-full">
272
- <div class="text-center max-w-md">
273
- <div class="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
274
- <i class="fas fa-cog text-blue-600 text-2xl"></i>
275
- </div>
276
- <h3 class="text-xl font-semibold mb-2">Configuration Initiale</h3>
277
- <p class="text-gray-600 mb-6">Remplissez le formulaire de configuration pour voir votre site prendre vie en temps réel.</p>
278
- <div class="flex justify-center space-x-2">
279
- <div class="w-3 h-3 bg-blue-600 rounded-full"></div>
280
- <div class="w-3 h-3 bg-gray-300 rounded-full"></div>
281
- <div class="w-3 h-3 bg-gray-300 rounded-full"></div>
282
- <div class="w-3 h-3 bg-gray-300 rounded-full"></div>
283
- </div>
284
- </div>
285
  </div>
 
286
  </div>
 
 
 
287
  </div>
288
  </div>
289
  </div>
290
  </section>
291
 
292
  <!-- AI Power Section -->
293
- <section id="features" class="mb-20">
294
  <div class="text-center mb-12">
295
- <h2 class="text-3xl font-bold mb-4">Alimenté par plus de 1000 IA Spécialisées</h2>
296
- <p class="text-gray-600 max-w-3xl mx-auto">Notre réseau d'intelligences artificielles travaille en synergie pour créer le site parfait adapté à vos besoins.</p>
297
  </div>
298
 
299
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
300
- <div class="ai-card bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg cursor-pointer" onclick="showAIDetails('design')">
301
  <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
302
  <i class="fas fa-paint-brush text-xl"></i>
303
  </div>
304
  <h3 class="font-semibold text-lg mb-2">Design IA</h3>
305
- <p class="text-gray-600">Génère des designs uniques et modernes adaptés à votre secteur.</p>
306
- <div class="mt-4 flex items-center text-sm text-blue-600">
307
- <span>12 IA spécialisées</span>
308
- <i class="fas fa-arrow-right ml-2"></i>
309
- </div>
310
  </div>
311
 
312
- <div class="ai-card bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg cursor-pointer" onclick="showAIDetails('dev')">
313
  <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
314
  <i class="fas fa-code text-xl"></i>
315
  </div>
316
  <h3 class="font-semibold text-lg mb-2">Développement IA</h3>
317
- <p class="text-gray-600">Code optimisé et sécurisé généré automatiquement.</p>
318
- <div class="mt-4 flex items-center text-sm text-blue-600">
319
- <span>28 IA spécialisées</span>
320
- <i class="fas fa-arrow-right ml-2"></i>
321
- </div>
322
  </div>
323
 
324
- <div class="ai-card bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg cursor-pointer" onclick="showAIDetails('content')">
325
  <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
326
  <i class="fas fa-font text-xl"></i>
327
  </div>
328
  <h3 class="font-semibold text-lg mb-2">Rédaction IA</h3>
329
- <p class="text-gray-600">Contenu SEO optimisé et personnalisé pour votre activité.</p>
330
- <div class="mt-4 flex items-center text-sm text-blue-600">
331
- <span>15 IA spécialisées</span>
332
- <i class="fas fa-arrow-right ml-2"></i>
333
- </div>
334
  </div>
335
 
336
- <div class="ai-card bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg cursor-pointer" onclick="showAIDetails('optimization')">
337
  <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
338
  <i class="fas fa-chart-line text-xl"></i>
339
  </div>
340
  <h3 class="font-semibold text-lg mb-2">Optimisation IA</h3>
341
- <p class="text-gray-600">Analyse et améliore continuellement les performances.</p>
342
- <div class="mt-4 flex items-center text-sm text-blue-600">
343
- <span>9 IA spécialisées</span>
344
- <i class="fas fa-arrow-right ml-2"></i>
345
- </div>
346
- </div>
347
- </div>
348
-
349
- <div class="mt-10 bg-blue-50 rounded-xl p-6">
350
- <div class="flex flex-col md:flex-row items-center">
351
- <div class="md:w-2/3 mb-6 md:mb-0">
352
- <h3 class="text-xl font-semibold mb-2">Déployez la puissance de l'IA</h3>
353
- <p class="text-gray-700">Notre réseau de plus de 1000 IA travaille en temps réel pour créer le site parfait pour votre entreprise.</p>
354
- </div>
355
- <div class="md:w-1/3 flex justify-center md:justify-end">
356
- <button id="all-ai-btn" class="gradient-bg hover:opacity-90 text-white px-6 py-3 rounded-lg font-semibold transition">
357
- <i class="fas fa-bolt mr-2"></i> Voir toutes les IA
358
- </button>
359
- </div>
360
- </div>
361
- </div>
362
- </section>
363
-
364
- <!-- Features Section -->
365
- <section class="mb-20">
366
- <div class="text-center mb-12">
367
- <h2 class="text-3xl font-bold mb-4">Fonctionnalités Professionnelles</h2>
368
- <p class="text-gray-600 max-w-3xl mx-auto">Tout ce dont vous avez besoin pour créer un site à fort trafic et haute performance.</p>
369
- </div>
370
-
371
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
372
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
373
- <div class="h-2 bg-blue-600"></div>
374
- <div class="p-6">
375
- <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
376
- <i class="fas fa-globe text-blue-600"></i>
377
- </div>
378
- <h3 class="font-semibold text-lg mb-2">Domaine & SSL Gratuit</h3>
379
- <p class="text-gray-600 mb-4">Obtenez un domaine personnalisé et un certificat SSL inclus automatiquement pour chaque site.</p>
380
- <ul class="space-y-2 text-sm">
381
- <li class="flex items-center">
382
- <i class="fas fa-check text-green-500 mr-2"></i> Enregistrement de domaine instantané
383
- </li>
384
- <li class="flex items-center">
385
- <i class="fas fa-check text-green-500 mr-2"></i> SSL auto-renouvelable
386
- </li>
387
- <li class="flex items-center">
388
- <i class="fas fa-check text-green-500 mr-2"></i> Protection contre le phishing
389
- </li>
390
- </ul>
391
- </div>
392
- </div>
393
-
394
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
395
- <div class="h-2 bg-purple-600"></div>
396
- <div class="p-6">
397
- <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
398
- <i class="fas fa-tachometer-alt text-purple-600"></i>
399
- </div>
400
- <h3 class="font-semibold text-lg mb-2">Hébergement Haute Performance</h3>
401
- <p class="text-gray-600 mb-4">Infrastructure optimisée pour des temps de chargement ultra-rapides et une disponibilité de 99.9%.</p>
402
- <ul class="space-y-2 text-sm">
403
- <li class="flex items-center">
404
- <i class="fas fa-check text-green-500 mr-2"></i> Serveurs worldwide CDN
405
- </li>
406
- <li class="flex items-center">
407
- <i class="fas fa-check text-green-500 mr-2"></i> Cache intelligent
408
- </li>
409
- <li class="flex items-center">
410
- <i class="fas fa-check text-green-500 mr-2"></i> Protection DDoS intégrée
411
- </li>
412
- </ul>
413
- </div>
414
- </div>
415
-
416
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
417
- <div class="h-2 bg-green-600"></div>
418
- <div class="p-6">
419
- <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
420
- <i class="fas fa-chart-bar text-green-600"></i>
421
- </div>
422
- <h3 class="font-semibold text-lg mb-2">Analytiques Avancées</h3>
423
- <p class="text-gray-600 mb-4">Suivez les performances de votre site avec des outils d'analyse puissants intégrés.</p>
424
- <ul class="space-y-2 text-sm">
425
- <li class="flex items-center">
426
- <i class="fas fa-check text-green-500 mr-2"></i> Tableaux de bord personnalisables
427
- </li>
428
- <li class="flex items-center">
429
- <i class="fas fa-check text-green-500 mr-2"></i> Analyse du comportement des visiteurs
430
- </li>
431
- <li class="flex items-center">
432
- <i class="fas fa-check text-green-500 mr-2"></i> Rapports automatiques
433
- </li>
434
- </ul>
435
- </div>
436
  </div>
437
  </div>
438
  </section>
439
 
440
- <!-- Testimonials -->
441
  <section class="mb-20">
442
  <div class="text-center mb-12">
443
- <h2 class="text-3xl font-bold mb-4">Ils nous font confiance</h2>
444
- <p class="text-gray-600 max-w-3xl mx-auto">Des milliers de professionnels utilisent notre plateforme pour leurs sites web.</p>
445
  </div>
446
 
447
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
448
- <div class="bg-white rounded-xl shadow-md p-6">
449
- <div class="flex items-center mb-4">
450
- <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold mr-4">JD</div>
451
- <div>
452
- <h4 class="font-semibold">Jean Dupont</h4>
453
- <p class="text-sm text-gray-500">Agence Web</p>
454
- </div>
 
455
  </div>
456
- <p class="text-gray-700 mb-4">"J'ai créé plus de 50 sites pour mes clients en quelques mois seulement. La qualité est professionnelle et mes clients sont ravis."</p>
457
- <div class="flex text-yellow-400">
458
- <i class="fas fa-star"></i>
459
- <i class="fas fa-star"></i>
460
- <i class="fas fa-star"></i>
461
- <i class="fas fa-star"></i>
462
- <i class="fas fa-star"></i>
 
463
  </div>
464
- </div>
465
-
466
- <div class="bg-white rounded-xl shadow-md p-6">
467
- <div class="flex items-center mb-4">
468
- <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4">SM</div>
469
- <div>
470
- <h4 class="font-semibold">Sarah Martin</h4>
471
- <p class="text-sm text-gray-500">Restaurant Gastronomique</p>
472
- </div>
473
  </div>
474
- <p class="text-gray-700 mb-4">"Mon site a été créé en 20 minutes et il est magnifique. Les réservations en ligne ont augmenté de 300% depuis sa mise en ligne."</p>
475
- <div class="flex text-yellow-400">
476
- <i class="fas fa-star"></i>
477
- <i class="fas fa-star"></i>
478
- <i class="fas fa-star"></i>
479
- <i class="fas fa-star"></i>
480
- <i class="fas fa-star"></i>
 
481
  </div>
482
- </div>
483
-
484
- <div class="bg-white rounded-xl shadow-md p-6">
485
- <div class="flex items-center mb-4">
486
- <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-bold mr-4">TP</div>
487
- <div>
488
- <h4 class="font-semibold">Thomas Petit</h4>
489
- <p class="text-sm text-gray-500">Consultant IT</p>
490
- </div>
491
  </div>
492
- <p class="text-gray-700 mb-4">"La puissance des IA intégrées est impressionnante. J'ai pu créer un site complexe avec des fonctionnalités avancées sans écrire une ligne de code."</p>
493
- <div class="flex text-yellow-400">
494
- <i class="fas fa-star"></i>
495
- <i class="fas fa-star"></i>
496
- <i class="fas fa-star"></i>
497
- <i class="fas fa-star"></i>
498
- <i class="fas fa-star-half-alt"></i>
 
499
  </div>
500
  </div>
501
  </div>
502
  </section>
503
-
504
- <!-- CTA Section -->
505
- <section id="pricing" class="gradient-bg rounded-2xl text-white p-12 text-center">
506
- <h2 class="text-3xl font-bold mb-4">Prêt à créer votre site professionnel ?</h2>
507
- <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto">Rejoignez des milliers de professionnels qui utilisent déjà notre plateforme.</p>
508
- <div class="flex flex-col sm:flex-row justify-center gap-4">
509
- <button id="demo-btn-2" class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-semibold text-lg transition">
510
- <i class="fas fa-play-circle mr-2"></i> Voir la démo
511
- </button>
512
- <button id="free-trial-btn-2" class="bg-blue-800 hover:bg-blue-900 px-8 py-4 rounded-lg font-semibold text-lg transition">
513
- <i class="fas fa-bolt mr-2"></i> Essai Gratuit 14 jours
514
- </button>
515
- </div>
516
- <p class="text-sm opacity-80 mt-4">Aucune carte de crédit requise</p>
517
- </section>
518
  </main>
519
 
520
  <!-- Footer -->
521
- <footer id="resources" class="bg-gray-900 text-white py-12">
522
  <div class="container mx-auto px-4">
523
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
524
- <div>
525
- <h3 class="text-lg font-semibold mb-4 flex items-center">
526
- <i class="fas fa-robot text-blue-400 mr-2"></i> MEGA IA
527
- </h3>
528
- <p class="text-gray-400">
529
- Plateforme professionnelle de création de sites alimentée par plus de 1000 IA spécialisées.
530
- </p>
531
- <div class="flex space-x-4 mt-4">
532
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 transition flex items-center justify-center">
533
- <i class="fab fa-facebook-f"></i>
534
- </a>
535
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 transition flex items-center justify-center">
536
- <i class="fab fa-twitter"></i>
537
- </a>
538
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 transition flex items-center justify-center">
539
- <i class="fab fa-linkedin-in"></i>
540
- </a>
541
- <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 transition flex items-center justify-center">
542
- <i class="fab fa-instagram"></i>
543
- </a>
544
- </div>
545
- </div>
546
-
547
- <div>
548
- <h3 class="text-lg font-semibold mb-4">Produit</h3>
549
- <ul class="space-y-2">
550
- <li><a href="#features" class="text-gray-400 hover:text-white transition">Fonctionnalités</a></li>
551
- <li><a href="#pricing" class="text-gray-400 hover:text-white transition">Tarifs</a></li>
552
- <li><a href="#" class="text-gray-400 hover:text-white transition">Intégrations</a></li>
553
- <li><a href="#" class="text-gray-400 hover:text-white transition">Mises à jour</a></li>
554
- <li><a href="#" class="text-gray-400 hover:text-white transition">Roadmap</a></li>
555
- </ul>
556
- </div>
557
-
558
- <div>
559
- <h3 class="text-lg font-semibold mb-4">Ressources</h3>
560
- <ul class="space-y-2">
561
- <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
562
- <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
563
- <li><a href="#" class="text-gray-400 hover:text-white transition">Guides</a></li>
564
- <li><a href="#" class="text-gray-400 hover:text-white transition">Support</a></li>
565
- <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li>
566
- </ul>
567
- </div>
568
-
569
- <div>
570
- <h3 class="text-lg font-semibold mb-4">Entreprise</h3>
571
- <ul class="space-y-2">
572
- <li><a href="#" class="text-gray-400 hover:text-white transition">À propos</a></li>
573
- <li><a href="#" class="text-gray-400 hover:text-white transition">Carrières</a></li>
574
- <li><a href="#" class="text-gray-400 hover:text-white transition">Presse</a></li>
575
- <li><a href="#" class="text-gray-400 hover:text-white transition">Partenaires</a></li>
576
- <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
577
- </ul>
578
  </div>
579
  </div>
580
 
581
- <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
582
- <p class="text-gray-400 mb-4 md:mb-0">© 2023 MEGA IA. Tous droits réservés.</p>
583
- <div class="flex space-x-6">
584
- <a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a>
585
- <a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a>
586
- <a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation</a>
587
- </div>
588
  </div>
589
  </div>
590
  </footer>
591
  </div>
592
-
593
- <!-- Modals -->
594
- <div id="demo-modal" class="modal">
595
- <div class="modal-content">
596
- <div class="flex justify-between items-center mb-4">
597
- <h3 class="text-xl font-bold">Démonstration Vidéo</h3>
598
- <button id="close-demo-modal" class="text-gray-500 hover:text-gray-700">
599
- <i class="fas fa-times"></i>
600
- </button>
601
- </div>
602
- <div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg flex items-center justify-center">
603
- <i class="fas fa-play-circle text-5xl text-blue-600"></i>
604
- </div>
605
- <p class="mt-4 text-gray-700">Découvrez comment créer un site professionnel en quelques minutes avec notre plateforme MEGA IA.</p>
606
- <div class="mt-6 flex justify-end">
607
- <button id="start-after-demo" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
608
- Commencer maintenant
609
- </button>
610
- </div>
611
- </div>
612
- </div>
613
-
614
- <div id="trial-modal" class="modal">
615
- <div class="modal-content">
616
- <div class="flex justify-between items-center mb-4">
617
- <h3 class="text-xl font-bold">Essai Gratuit</h3>
618
- <button id="close-trial-modal" class="text-gray-500 hover:text-gray-700">
619
- <i class="fas fa-times"></i>
620
- </button>
621
- </div>
622
- <div class="space-y-4">
623
- <div>
624
- <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
625
- <input type="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="votre@email.com">
626
- </div>
627
- <div>
628
- <label class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
629
- <input type="password" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Créez un mot de passe">
630
- </div>
631
- <div class="flex items-center">
632
- <input type="checkbox" id="terms" class="mr-2">
633
- <label for="terms" class="text-sm text-gray-700">J'accepte les <a href="#" class="text-blue-600 hover:underline">conditions d'utilisation</a></label>
634
- </div>
635
- </div>
636
- <div class="mt-6 flex flex-col sm:flex-row justify-between gap-4">
637
- <button id="start-trial" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold">
638
- <i class="fas fa-bolt mr-2"></i> Commencer l'essai
639
- </button>
640
- <button id="google-signup" class="bg-white border hover:bg-gray-50 text-gray-700 px-6 py-3 rounded-lg font-semibold flex items-center justify-center">
641
- <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google" class="w-4 h-4 mr-2">
642
- S'inscrire avec Google
643
- </button>
644
- </div>
645
- <p class="text-sm text-gray-500 mt-4 text-center">Aucune carte de crédit requise • Essai de 14 jours</p>
646
- </div>
647
- </div>
648
-
649
- <div id="ai-details-modal" class="modal">
650
- <div class="modal-content">
651
- <div class="flex justify-between items-center mb-4">
652
- <h3 id="ai-modal-title" class="text-xl font-bold">Détails des IA</h3>
653
- <button id="close-ai-modal" class="text-gray-500 hover:text-gray-700">
654
- <i class="fas fa-times"></i>
655
- </button>
656
- </div>
657
- <div id="ai-modal-content">
658
- <!-- Content will be loaded dynamically -->
659
- </div>
660
- </div>
661
- </div>
662
-
663
- <script>
664
- // Mobile menu toggle
665
- document.getElementById('mobile-menu-btn').addEventListener('click', function() {
666
- const menu = document.getElementById('mobile-menu');
667
- menu.classList.toggle('hidden');
668
- });
669
-
670
- // Demo video buttons
671
- const demoButtons = ['demo-video-btn', 'demo-btn-2'];
672
- demoButtons.forEach(id => {
673
- document.getElementById(id).addEventListener('click', function() {
674
- document.getElementById('demo-modal').style.display = 'block';
675
- });
676
- });
677
-
678
- // Free trial buttons
679
- const trialButtons = ['free-trial-btn', 'free-trial-btn-2', 'mobile-free-trial-btn', 'start-now-btn'];
680
- trialButtons.forEach(id => {
681
- document.getElementById(id)?.addEventListener('click', function() {
682
- document.getElementById('trial-modal').style.display = 'block';
683
- });
684
- });
685
-
686
- // Close modals
687
- document.getElementById('close-demo-modal').addEventListener('click', function() {
688
- document.getElementById('demo-modal').style.display = 'none';
689
- });
690
-
691
- document.getElementById('close-trial-modal').addEventListener('click', function() {
692
- document.getElementById('trial-modal').style.display = 'none';
693
- });
694
-
695
- document.getElementById('close-ai-modal').addEventListener('click', function() {
696
- document.getElementById('ai-details-modal').style.display = 'none';
697
- });
698
-
699
- // Start trial button
700
- document.getElementById('start-trial').addEventListener('click', function() {
701
- alert('Essai gratuit démarré! Redirection vers le tableau de bord...');
702
- document.getElementById('trial-modal').style.display = 'none';
703
- });
704
-
705
- // Start after demo button
706
- document.getElementById('start-after-demo').addEventListener('click', function() {
707
- document.getElementById('demo-modal').style.display = 'none';
708
- document.getElementById('trial-modal').style.display = 'block';
709
- });
710
-
711
- // Google signup button
712
- document.getElementById('google-signup').addEventListener('click', function() {
713
- alert('Connexion avec Google en cours...');
714
- });
715
-
716
- // All AI button
717
- document.getElementById('all-ai-btn').addEventListener('click', function() {
718
- showAIDetails('all');
719
- });
720
-
721
- // Preview device buttons
722
- document.getElementById('mobile-preview-btn').addEventListener('click', function() {
723
- this.classList.add('bg-blue-50');
724
- document.getElementById('desktop-preview-btn').classList.remove('bg-blue-50');
725
- document.getElementById('tablet-preview-btn').classList.remove('bg-blue-50');
726
- document.getElementById('preview-container').classList.add('max-w-sm', 'mx-auto');
727
- });
728
-
729
- document.getElementById('desktop-preview-btn').addEventListener('click', function() {
730
- this.classList.add('bg-blue-50');
731
- document.getElementById('mobile-preview-btn').classList.remove('bg-blue-50');
732
- document.getElementById('tablet-preview-btn').classList.remove('bg-blue-50');
733
- document.getElementById('preview-container').classList.remove('max-w-sm', 'mx-auto');
734
- });
735
-
736
- document.getElementById('tablet-preview-btn').addEventListener('click', function() {
737
- this.classList.add('bg-blue-50');
738
- document.getElementById('mobile-preview-btn').classList.remove('bg-blue-50');
739
- document.getElementById('desktop-preview-btn').classList.remove('bg-blue-50');
740
- document.getElementById('preview-container').classList.add('max-w-md', 'mx-auto');
741
- });
742
-
743
- // Domain availability check
744
- document.getElementById('domain-input').addEventListener('input', function() {
745
- const domainCheck = document.getElementById('domain-check');
746
- if (this.value.length > 3) {
747
- domainCheck.classList.remove('hidden');
748
- domainCheck.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Vérification...';
749
-
750
- // Simulate domain check
751
- setTimeout(() => {
752
- const isAvailable = Math.random() > 0.3; // 70% chance of being available
753
- if (isAvailable) {
754
- domainCheck.innerHTML = '<i class="fas fa-check-circle mr-1 text-green-600"></i> Domaine disponible';
755
- } else {
756
- domainCheck.innerHTML = '<i class="fas fa-times-circle mr-1 text-red-600"></i> Domaine indisponible';
757
- }
758
- }, 1000);
759
- } else {
760
- domainCheck.classList.add('hidden');
761
- }
762
- });
763
-
764
- // Site generation process
765
- document.getElementById('generate-btn').addEventListener('click', function() {
766
- const siteName = document.getElementById('site-name').value;
767
- const siteType = document.getElementById('site-type').value;
768
- const industry = document.getElementById('industry').value;
769
-
770
- if (!siteName || !siteType || !industry) {
771
- alert('Veuillez remplir tous les champs requis');
772
- return;
773
- }
774
-
775
- // Disable button during generation
776
- this.disabled = true;
777
- this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Génération en cours...';
778
-
779
- // Update progress steps
780
- const steps = ['step-1', 'step-2', 'step-3', 'step-4'];
781
- let currentStep = 0;
782
-
783
- const processInterval = setInterval(() => {
784
- if (currentStep > 0) {
785
- document.getElementById(steps[currentStep - 1]).classList.remove('bg-blue-600');
786
- document.getElementById(steps[currentStep - 1]).classList.add('completed');
787
- }
788
-
789
- if (currentStep < steps.length) {
790
- document.getElementById(steps[currentStep]).classList.remove('bg-gray-200');
791
- document.getElementById(steps[currentStep]).classList.add('active');
792
-
793
- // Update preview based on step
794
- updatePreview(currentStep + 1, siteName, siteType, industry);
795
-
796
- currentStep++;
797
- } else {
798
- clearInterval(processInterval);
799
- // Show completion state
800
- document.getElementById('preview-container').innerHTML = `
801
- <div class="flex justify-center items-center h-full">
802
- <div class="text-center max-w-md">
803
- <div class="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
804
- <i class="fas fa-check text-green-600 text-2xl"></i>
805
- </div>
806
- <h3 class="text-xl font-semibold mb-2">Votre site est prêt !</h3>
807
- <p class="text-gray-600 mb-6">Félicitations ! Votre site professionnel a été généré avec succès.</p>
808
- <button id="view-site-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold transition">
809
- <i class="fas fa-eye mr-2"></i> Voir le site
810
- </button>
811
- </div>
812
- </div>
813
- `;
814
-
815
- // Re-enable generate button
816
- document.getElementById('generate-btn').disabled = false;
817
- document.getElementById('generate-btn').innerHTML = '<i class="fas fa-magic mr-2"></i> Générer les Options';
818
-
819
- // Add event to view site button
820
- document.getElementById('view-site-btn')?.addEventListener('click', function() {
821
- alert('Redirection vers votre nouveau site...');
822
- });
823
- }
824
- }, 1500);
825
- });
826
-
827
- function updatePreview(step, siteName, siteType, industry) {
828
- const preview = document.getElementById('preview-container');
829
- let content = '';
830
-
831
- switch(step) {
832
- case 1:
833
- content = `
834
- <div class="flex justify-center items-center h-full">
835
- <div class="text-center max-w-md">
836
- <div class="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
837
- <i class="fas fa-cog text-blue-600 text-2xl"></i>
838
- </div>
839
- <h3 class="text-xl font-semibold mb-2">Configuration Initiale</h3>
840
- <p class="text-gray-600 mb-6">Analyse de vos besoins pour ${siteName} (${siteType}) dans le secteur ${industry}.</p>
841
- <div class="flex justify-center space-x-2">
842
- <div class="w-3 h-3 bg-blue-600 rounded-full"></div>
843
- <div class="w-3 h-3 bg-gray-300 rounded-full"></div>
844
- <div class="w-3 h-3 bg-gray-300 rounded-full"></div>
845
- <div class="w-3 h-3 bg-gray-300 rounded-full"></div>
846
- </div>
847
- </div>
848
- </div>
849
- `;
850
- break;
851
- case 2:
852
- content = `
853
- <div class="flex justify-center items-center h-full">
854
- <div class="text-center max-w-md">
855
- <div class="mx-auto w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
856
- <i class="fas fa-paint-brush text-purple-600 text-2xl"></i>
857
- </div>
858
- <h3 class="text-xl font-semibold mb-2">Personnalisation du Design</h3>
859
- <p class="text-gray-600 mb-6">Création d'un design unique pour ${siteName} adapté au secteur ${industry}.</p>
860
- <div class="flex justify-center space-x-2">
861
- <div class="w-3 h-3 bg-green-500 rounded-full"></div>
862
- <div class="w-3 h-3 bg-blue-600 rounded-full"></div>
863
- <div class="w-3 h-3 bg-gray-300 rounded-full"></div>
864
- <div class="w-3 h-3 bg-gray-300 rounded-full"></div>
865
- </div>
866
- </div>
867
- </div>
868
- `;
869
- break;
870
- case 3:
871
- content = `
872
- <div class="flex justify-center items-center h-full">
873
- <div class="text-center max-w-md">
874
- <div class="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
875
- <i class="fas fa-font text-green-600 text-2xl"></i>
876
- </div>
877
- <h3 class="text-xl font-semibold mb-2">Génération du Contenu</h3>
878
- <p class="text-gray-600 mb-6">Rédaction de contenu optimisé SEO pour votre site de type ${siteType}.</p>
879
- <div class="flex justify-center space-x-2">
880
- <div class="w-3 h-3 bg-green-500 rounded-full"></div>
881
- <div class="w-3 h-3 bg-green-500 rounded-full"></div>
882
- <div class="w-3 h-3 bg-blue-600 rounded-full"></div>
883
- <div class="w-3 h-3 bg-gray-300 rounded-full"></div>
884
- </div>
885
- </div>
886
- </div>
887
- `;
888
- break;
889
- case 4:
890
- content = `
891
- <div class="flex justify-center items-center h-full">
892
- <div class="text-center max-w-md">
893
- <div class="mx-auto w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-4">
894
- <i class="fas fa-rocket text-yellow-600 text-2xl"></i>
895
- </div>
896
- <h3 class="text-xl font-semibold mb-2">Finalisation</h3>
897
- <p class="text-gray-600 mb-6">Optimisation des performances et préparation à la publication.</p>
898
- <div class="flex justify-center space-x-2">
899
- <div class="w-3 h-3 bg-green-500 rounded-full"></div>
900
- <div class="w-3 h-3 bg-green-500 rounded-full"></div>
901
- <div class="w-3 h-3 bg-green-500 rounded-full"></div>
902
- <div class="w-3 h-3 bg-blue-600 rounded-full"></div>
903
- </div>
904
- </div>
905
- </div>
906
- `;
907
- break;
908
- }
909
-
910
- preview.innerHTML = content;
911
- }
912
-
913
- function showAIDetails(type) {
914
- const modal = document.getElementById('ai-details-modal');
915
- const title = document.getElementById('ai-modal-title');
916
- const content = document.getElementById('ai-modal-content');
917
-
918
- let aiDetails = '';
919
-
920
- switch(type) {
921
- case 'design':
922
- title.textContent = 'Design IA';
923
- aiDetails = `
924
- <div class="space-y-4">
925
- <div class="p-4 bg-blue-50 rounded-lg">
926
- <h4 class="font-semibold mb-2">IA Design Principal</h4>
927
- <p class="text-gray-700">Génère des maquettes modernes et responsives adaptées à votre secteur.</p>
928
- <div class="mt-2 flex items-center text-sm text-blue-600">
929
- <span>Capacités :</span>
930
- <span class="ml-2 bg-blue-100 px-2 py-1 rounded">Responsive</span>
931
- <span class="ml-2 bg-blue-100 px-2 py-1 rounded">Moderne</span>
932
- </div>
933
- </div>
934
- <div class="p-4 bg-blue-50 rounded-lg">
935
- <h4 class="font-semibold mb-2">IA Couleurs</h4>
936
- <p class="text-gray-700">Analyse votre secteur et suggère des palettes de couleurs optimales.</p>
937
- </div>
938
- <div class="p-4 bg-blue-50 rounded-lg">
939
- <h4 class="font-semibold mb-2">IA Typographie</h4>
940
- <p class="text-gray-700">Sélectionne les meilleures combinaisons de polices pour votre marque.</p>
941
- </div>
942
- </div>
943
- `;
944
- break;
945
- case 'dev':
946
- title.textContent = 'Développement IA';
947
- aiDetails = `
948
- <div class="space-y-4">
949
- <div class="p-4 bg-purple-50 rounded-lg">
950
- <h4 class="font-semibold mb-2">IA Code Principal</h4>
951
- <p class="text-gray-700">Génère du code HTML, CSS et JavaScript optimisé et sécurisé.</p>
952
- </div>
953
- <div class="p-4 bg-purple-50 rounded-lg">
954
- <h4 class="font-semibold mb-2">IA Performance</h4>
955
- <p class="text-gray-700">Optimise le code pour des temps de chargement ultra-rapides.</p>
956
- </div>
957
- <div class="p-4 bg-purple-50 rounded-lg">
958
- <h4 class="font-semibold mb-2">IA Sécurité</h4>
959
- <p class="text-gray-700">Implémente automatiquement les meilleures pratiques de sécurité.</p>
960
- </div>
961
- </div>
962
- `;
963
- break;
964
- case 'content':
965
- title.textContent = 'Rédaction IA';
966
- aiDetails = `
967
- <div class="space-y-4">
968
- <div class="p-4 bg-green-50 rounded-lg">
969
- <h4 class="font-semibold mb-2">IA Rédaction Principal</h4>
970
- <p class="text-gray-700">Crée du contenu original et optimisé pour le référencement.</p>
971
- </div>
972
- <div class="p-4 bg-green-50 rounded-lg">
973
- <h4 class="font-semibold mb-2">IA SEO</h4>
974
- <p class="text-gray-700">Optimise le contenu pour les moteurs de recherche.</p>
975
- </div>
976
- <div class="p-4 bg-green-50 rounded-lg">
977
- <h4 class="font-semibold mb-2">IA Traduction</h4>
978
- <p class="text-gray-700">Traduit votre contenu dans plus de 50 langues.</p>
979
- </div>
980
- </div>
981
- `;
982
- break;
983
- case 'optimization':
984
- title.textContent = 'Optimisation IA';
985
- aiDetails = `
986
- <div class="space-y-4">
987
- <div class="p-4 bg-yellow-50 rounded-lg">
988
- <h4 class="font-semibold mb-2">IA Analytics</h4>
989
- <p class="text-gray-700">Analyse le comportement des visiteurs en temps réel.</p>
990
- </div>
991
- <div class="p-4 bg-yellow-50 rounded-lg">
992
- <h4 class="font-semibold mb-2">IA A/B Testing</h4>
993
- <p class="text-gray-700">Teste automatiquement différentes versions de votre site.</p>
994
- </div>
995
- <div class="p-4 bg-yellow-50 rounded-lg">
996
- <h4 class="font-semibold mb-2">IA Conversion</h4>
997
- <p class="text-gray-700">Optimise les parcours utilisateur pour maximiser les conversions.</p>
998
- </div>
999
- </div>
1000
- `;
1001
- break;
1002
- case 'all':
1003
- title.textContent = 'Toutes nos IA (1000+)';
1004
- aiDetails = `
1005
- <div class="space-y-4">
1006
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
1007
- <div class="p-4 bg-blue-50 rounded-lg">
1008
- <h4 class="font-semibold mb-2">Design (12 IA)</h4>
1009
- <p class="text-gray-700">Maquettes, couleurs, typographie, animations, etc.</p>
1010
- </div>
1011
- <div class="p-4 bg-purple-50 rounded-lg">
1012
- <h4 class="font-semibold mb-2">Développement (28 IA)</h4>
1013
- <p class="text-gray-700">Code, sécurité, performance, intégrations, etc.</p>
1014
- </div>
1015
- <div class="p-4 bg-green-50 rounded-lg">
1016
- <h4 class="font-semibold mb-2">Contenu (15 IA)</h4>
1017
- <p class="text-gray-700">Rédaction, SEO, traduction, voix, etc.</p>
1018
- </div>
1019
- <div class="p-4 bg-yellow-50 rounded-lg">
1020
- <h4 class="font-semibold mb-2">Optimisation (9 IA)</h4>
1021
- <p class="text-gray-700">Analytics, A/B testing, conversion, etc.</p>
1022
- </div>
1023
- </div>
1024
- <div class="p-4 bg-gray-50 rounded-lg">
1025
- <h4 class="font-semibold mb-2">Et plus de 900 IA spécialisées</h4>
1026
- <p class="text-gray-700">Notre réseau comprend des IA pour chaque besoin spécifique.</p>
1027
- </div>
1028
- </div>
1029
- <div class="mt-6">
1030
- <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-semibold">
1031
- <i class="fas fa-bolt mr-2"></i> Découvrir toutes les IA
1032
- </button>
1033
- </div>
1034
- `;
1035
- break;
1036
- }
1037
-
1038
- content.innerHTML = aiDetails;
1039
- modal.style.display = 'block';
1040
- }
1041
-
1042
- // Close modal when clicking outside
1043
- window.onclick = function(event) {
1044
- const modals = ['demo-modal', 'trial-modal', 'ai-details-modal'];
1045
- modals.forEach(id => {
1046
- const modal = document.getElementById(id);
1047
- if (event.target == modal) {
1048
- modal.style.display = 'none';
1049
- }
1050
- });
1051
- }
1052
- </script>
1053
  <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/conai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1054
  </html>
 
13
  .dark-gradient-bg {
14
  background: linear-gradient(135deg, #1e3a8a 0%, #5b21b6 100%);
15
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  </style>
17
  </head>
18
  <body class="bg-gray-50 font-sans">
 
28
  <p class="text-sm opacity-80">Plateforme Professionnelle de Création de Sites</p>
29
  </div>
30
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  </div>
32
  </div>
33
  </header>
34
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  <!-- Main Content -->
36
  <main class="flex-grow container mx-auto px-4 py-12">
37
+ <!-- Description Section -->
38
  <section class="mb-20">
39
+ <div class="text-center mb-12">
40
+ <h2 class="text-3xl font-bold mb-4">MEGA IA - Plateforme de Création de Sites</h2>
41
+ <p class="text-gray-600 max-w-3xl mx-auto">Solution tout-en-un pour créer des sites web professionnels en quelques minutes</p>
42
+ </div>
43
+
44
+ <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
45
+ <h3 class="text-2xl font-semibold mb-6 text-blue-600">Description du Service</h3>
46
+ <p class="text-gray-700 mb-6">
47
+ MEGA IA est une plateforme révolutionnaire qui permet aux professionnels de créer des sites web haut de gamme en quelques minutes seulement, sans aucune compétence technique requise.
48
+ </p>
49
+ <p class="text-gray-700 mb-6">
50
+ Notre système utilise un réseau de plus de 1000 intelligences artificielles spécialisées qui travaillent en synergie pour générer automatiquement des designs uniques, du code optimisé, du contenu pertinent et des fonctionnalités avancées.
51
+ </p>
52
+ <p class="text-gray-700">
53
+ La plateforme inclut automatiquement un nom de domaine personnalisé, un certificat SSL, un hébergement haute performance et des outils d'analyse intégrés.
54
+ </p>
55
+ </div>
56
+
57
+ <!-- Features Section -->
58
+ <div class="bg-white rounded-xl shadow-lg p-8">
59
+ <h3 class="text-2xl font-semibold mb-6 text-blue-600">Fonctionnalités Principales</h3>
60
+
61
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
62
+ <div class="bg-blue-50 p-6 rounded-lg">
63
+ <div class="flex items-center mb-3">
64
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
65
+ <i class="fas fa-magic text-blue-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  </div>
67
+ <h4 class="font-semibold text-lg">Génération Automatique</h4>
68
  </div>
69
+ <p class="text-gray-700">
70
+ Créez un site complet en répondant à quelques questions simples. Notre IA génère automatiquement le design, la structure et le contenu.
71
+ </p>
72
+ </div>
73
+
74
+ <div class="bg-purple-50 p-6 rounded-lg">
75
+ <div class="flex items-center mb-3">
76
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-4">
77
+ <i class="fas fa-globe text-purple-600"></i>
78
+ </div>
79
+ <h4 class="font-semibold text-lg">Domaine & SSL Inclus</h4>
 
80
  </div>
81
+ <p class="text-gray-700">
82
+ Obtenez un nom de domaine personnalisé et un certificat SSL inclus automatiquement pour chaque site créé.
83
+ </p>
 
84
  </div>
85
+
86
+ <div class="bg-green-50 p-6 rounded-lg">
87
+ <div class="flex items-center mb-3">
88
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4">
89
+ <i class="fas fa-tachometer-alt text-green-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  </div>
91
+ <h4 class="font-semibold text-lg">Hébergement Haute Performance</h4>
92
  </div>
93
+ <p class="text-gray-700">
94
+ Infrastructure optimisée avec CDN mondial pour des temps de chargement ultra-rapides et une disponibilité de 99.9%.
95
+ </p>
96
+ </div>
97
+
98
+ <div class="bg-yellow-50 p-6 rounded-lg">
99
+ <div class="flex items-center mb-3">
100
+ <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-4">
101
+ <i class="fas fa-chart-line text-yellow-600"></i>
 
 
 
 
 
 
 
102
  </div>
103
+ <h4 class="font-semibold text-lg">Analytiques Intégrées</h4>
104
  </div>
105
+ <p class="text-gray-700">
106
+ Suivez les performances de votre site avec des outils d'analyse puissants intégrés directement dans la plateforme.
107
+ </p>
108
  </div>
109
  </div>
110
  </div>
111
  </section>
112
 
113
  <!-- AI Power Section -->
114
+ <section class="mb-20">
115
  <div class="text-center mb-12">
116
+ <h2 class="text-3xl font-bold mb-4">Technologie IA Avancée</h2>
117
+ <p class="text-gray-600 max-w-3xl mx-auto">Notre réseau de plus de 1000 IA spécialisées couvre tous les aspects de la création web</p>
118
  </div>
119
 
120
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
121
+ <div class="bg-white rounded-xl shadow-md p-6">
122
  <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
123
  <i class="fas fa-paint-brush text-xl"></i>
124
  </div>
125
  <h3 class="font-semibold text-lg mb-2">Design IA</h3>
126
+ <p class="text-gray-600">12 IA spécialisées dans la création de designs uniques et modernes</p>
 
 
 
 
127
  </div>
128
 
129
+ <div class="bg-white rounded-xl shadow-md p-6">
130
  <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
131
  <i class="fas fa-code text-xl"></i>
132
  </div>
133
  <h3 class="font-semibold text-lg mb-2">Développement IA</h3>
134
+ <p class="text-gray-600">28 IA pour générer du code optimisé et sécurisé</p>
 
 
 
 
135
  </div>
136
 
137
+ <div class="bg-white rounded-xl shadow-md p-6">
138
  <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
139
  <i class="fas fa-font text-xl"></i>
140
  </div>
141
  <h3 class="font-semibold text-lg mb-2">Rédaction IA</h3>
142
+ <p class="text-gray-600">15 IA pour créer du contenu SEO optimisé</p>
 
 
 
 
143
  </div>
144
 
145
+ <div class="bg-white rounded-xl shadow-md p-6">
146
  <div class="w-12 h-12 gradient-bg rounded-lg flex items-center justify-center text-white mb-4">
147
  <i class="fas fa-chart-line text-xl"></i>
148
  </div>
149
  <h3 class="font-semibold text-lg mb-2">Optimisation IA</h3>
150
+ <p class="text-gray-600">9 IA pour analyser et améliorer les performances</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
151
  </div>
152
  </div>
153
  </section>
154
 
155
+ <!-- Benefits Section -->
156
  <section class="mb-20">
157
  <div class="text-center mb-12">
158
+ <h2 class="text-3xl font-bold mb-4">Avantages Clés</h2>
159
+ <p class="text-gray-600 max-w-3xl mx-auto">Pourquoi choisir MEGA IA pour votre site web</p>
160
  </div>
161
 
162
+ <div class="bg-white rounded-xl shadow-lg p-8">
163
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
164
+ <div>
165
+ <h3 class="text-xl font-semibold mb-4 flex items-center">
166
+ <i class="fas fa-clock text-blue-500 mr-3"></i> Rapidité
167
+ </h3>
168
+ <p class="text-gray-700">
169
+ Créez un site professionnel en quelques minutes au lieu de semaines. Notre processus automatisé élimine les étapes complexes.
170
+ </p>
171
  </div>
172
+
173
+ <div>
174
+ <h3 class="text-xl font-semibold mb-4 flex items-center">
175
+ <i class="fas fa-euro-sign text-green-500 mr-3"></i> Économie
176
+ </h3>
177
+ <p class="text-gray-700">
178
+ Évitez les coûts élevés des agences web et des développeurs. Tout est inclus dans un abonnement mensuel abordable.
179
+ </p>
180
  </div>
181
+
182
+ <div>
183
+ <h3 class="text-xl font-semibold mb-4 flex items-center">
184
+ <i class="fas fa-shield-alt text-purple-500 mr-3"></i> Sécurité
185
+ </h3>
186
+ <p class="text-gray-700">
187
+ Bénéficiez de mises à jour automatiques, de sauvegardes régulières et de protections avancées contre les cyberattaques.
188
+ </p>
 
189
  </div>
190
+
191
+ <div>
192
+ <h3 class="text-xl font-semibold mb-4 flex items-center">
193
+ <i class="fas fa-mobile-alt text-yellow-500 mr-3"></i> Responsive
194
+ </h3>
195
+ <p class="text-gray-700">
196
+ Tous les sites sont optimisés pour mobile, tablette et desktop dès leur création.
197
+ </p>
198
  </div>
199
+
200
+ <div>
201
+ <h3 class="text-xl font-semibold mb-4 flex items-center">
202
+ <i class="fas fa-search text-blue-400 mr-3"></i> SEO Intégré
203
+ </h3>
204
+ <p class="text-gray-700">
205
+ Optimisation automatique pour les moteurs de recherche avec suivi des performances.
206
+ </p>
 
207
  </div>
208
+
209
+ <div>
210
+ <h3 class="text-xl font-semibold mb-4 flex items-center">
211
+ <i class="fas fa-sync-alt text-green-400 mr-3"></i> Mises à Jour
212
+ </h3>
213
+ <p class="text-gray-700">
214
+ Accès permanent aux dernières fonctionnalités sans travail supplémentaire de votre part.
215
+ </p>
216
  </div>
217
  </div>
218
  </div>
219
  </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
220
  </main>
221
 
222
  <!-- Footer -->
223
+ <footer class="bg-gray-900 text-white py-12">
224
  <div class="container mx-auto px-4">
225
+ <div class="text-center">
226
+ <h3 class="text-xl font-semibold mb-4 flex items-center justify-center">
227
+ <i class="fas fa-robot text-blue-400 mr-2"></i> MEGA IA
228
+ </h3>
229
+ <p class="text-gray-400 max-w-2xl mx-auto">
230
+ Plateforme professionnelle de création de sites alimentée par plus de 1000 IA spécialisées.
231
+ </p>
232
+ <div class="mt-6">
233
+ <button class="gradient-bg hover:opacity-90 text-white px-6 py-3 rounded-lg font-semibold transition">
234
+ <i class="fas fa-envelope mr-2"></i> Contactez-nous
235
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
236
  </div>
237
  </div>
238
 
239
+ <div class="border-t border-gray-800 pt-8 mt-8 text-center">
240
+ <p class="text-gray-400">© 2023 MEGA IA. Tous droits réservés.</p>
 
 
 
 
 
241
  </div>
242
  </div>
243
  </footer>
244
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
245
  <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/conai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
246
  </html>
prompts.txt CHANGED
@@ -1,3 +1,4 @@
1
  corrige le site :https://huggingface.co/spaces/doctorblog/conai
2
  MODIFIER LE SITE je veux une tres puissant plateforme tres puissant de plus de 1000 IA pour générer des sites de gros volume tres puissant professionnel jusqua 1000 ligne avec domain et ssl intgrer en automatique , je veux visuel de la creation du site en direct live tape par étape
3
- toutes les boutons ne sont pas cliquable et ne fonctionne pas veuillez reconfigurer tout faire une mise a joutrs afin toutes les fonction fonctionne
 
 
1
  corrige le site :https://huggingface.co/spaces/doctorblog/conai
2
  MODIFIER LE SITE je veux une tres puissant plateforme tres puissant de plus de 1000 IA pour générer des sites de gros volume tres puissant professionnel jusqua 1000 ligne avec domain et ssl intgrer en automatique , je veux visuel de la creation du site en direct live tape par étape
3
+ toutes les boutons ne sont pas cliquable et ne fonctionne pas veuillez reconfigurer tout faire une mise a joutrs afin toutes les fonction fonctionne
4
+ je veux pas de site vitrine , je veux juste par description du site