Hugging Face's logo

Spaces:
zama1
/
ai-tools-comparateur
Running

App Files Community
zama1 commited on
Commit
98182c8
·
verified ·
1 Parent(s): 5c9d5e9

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +532 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Tools Comparateur
3
- emoji: 💻
4
- colorFrom: red
5
- colorTo: purple
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: ai-tools-comparateur
3
+ emoji: 🐳
4
+ colorFrom: pink
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,532 @@
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>AI Tools Comparateur - Comparez les meilleurs outils d'IA</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
12
+ }
13
+ .tool-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .feature-icon {
18
+ width: 40px;
19
+ height: 40px;
20
+ display: flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ border-radius: 50%;
24
+ margin-right: 12px;
25
+ }
26
+ .newsletter-input:focus {
27
+ outline: none;
28
+ box-shadow: 0 0 0 3px rgba(167, 119, 227, 0.3);
29
+ }
30
+ .tab-active {
31
+ border-bottom: 3px solid #a777e3;
32
+ color: #a777e3;
33
+ font-weight: 600;
34
+ }
35
+ .price-tag {
36
+ position: absolute;
37
+ top: -10px;
38
+ right: 20px;
39
+ background: #6e8efb;
40
+ color: white;
41
+ padding: 4px 12px;
42
+ border-radius: 20px;
43
+ font-size: 0.8rem;
44
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-50 font-sans">
49
+ <!-- Header -->
50
+ <header class="gradient-bg text-white">
51
+ <div class="container mx-auto px-4 py-6">
52
+ <div class="flex justify-between items-center">
53
+ <div class="flex items-center space-x-2">
54
+ <i class="fas fa-robot text-3xl"></i>
55
+ <h1 class="text-2xl font-bold">AI Tools Comparateur</h1>
56
+ </div>
57
+ <nav class="hidden md:flex space-x-8">
58
+ <a href="#" class="hover:text-gray-200 font-medium">Accueil</a>
59
+ <a href="#comparateur" class="hover:text-gray-200 font-medium">Comparateur</a>
60
+ <a href="#categories" class="hover:text-gray-200 font-medium">Catégories</a>
61
+ <a href="#newsletter" class="hover:text-gray-200 font-medium">Newsletter</a>
62
+ </nav>
63
+ <button class="md:hidden text-2xl">
64
+ <i class="fas fa-bars"></i>
65
+ </button>
66
+ </div>
67
+ <div class="mt-16 mb-20 text-center">
68
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">Trouvez l'outil IA parfait pour vos besoins</h2>
69
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Comparez des centaines d'outils d'intelligence artificielle et choisissez celui qui vous convient le mieux</p>
70
+ <div class="flex justify-center">
71
+ <a href="#comparateur" class="bg-white text-purple-600 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300">Explorer les outils</a>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </header>
76
+
77
+ <!-- Main Content -->
78
+ <main class="container mx-auto px-4 py-12">
79
+ <!-- Features -->
80
+ <section class="mb-20">
81
+ <div class="text-center mb-12">
82
+ <h2 class="text-3xl font-bold mb-4">Pourquoi utiliser notre comparateur ?</h2>
83
+ <p class="text-gray-600 max-w-2xl mx-auto">Nous analysons en profondeur chaque outil pour vous fournir des comparaisons objectives et des recommandations personnalisées.</p>
84
+ </div>
85
+ <div class="grid md:grid-cols-3 gap-8">
86
+ <div class="bg-white p-6 rounded-xl shadow-md flex items-start">
87
+ <div class="feature-icon bg-purple-100 text-purple-600">
88
+ <i class="fas fa-chart-line"></i>
89
+ </div>
90
+ <div>
91
+ <h3 class="font-bold text-lg mb-2">Comparaisons détaillées</h3>
92
+ <p class="text-gray-600">Données techniques, performances et prix comparés objectivement.</p>
93
+ </div>
94
+ </div>
95
+ <div class="bg-white p-6 rounded-xl shadow-md flex items-start">
96
+ <div class="feature-icon bg-blue-100 text-blue-600">
97
+ <i class="fas fa-tags"></i>
98
+ </div>
99
+ <div>
100
+ <h3 class="font-bold text-lg mb-2">Offres exclusives</h3>
101
+ <p class="text-gray-600">Accès à des remises et offres spéciales via nos liens d'affiliation.</p>
102
+ </div>
103
+ </div>
104
+ <div class="bg-white p-6 rounded-xl shadow-md flex items-start">
105
+ <div class="feature-icon bg-green-100 text-green-600">
106
+ <i class="fas fa-bell"></i>
107
+ </div>
108
+ <div>
109
+ <h3 class="font-bold text-lg mb-2">Mises à jour en temps réel</h3>
110
+ <p class="text-gray-600">Restez informé des dernières nouveautés dans le monde de l'IA.</p>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </section>
115
+
116
+ <!-- Categories -->
117
+ <section id="categories" class="mb-20">
118
+ <div class="text-center mb-12">
119
+ <h2 class="text-3xl font-bold mb-4">Catégories d'outils IA</h2>
120
+ <p class="text-gray-600 max-w-2xl mx-auto">Découvrez les différentes catégories d'outils d'intelligence artificielle que nous comparons.</p>
121
+ </div>
122
+ <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
123
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">
124
+ <div class="h-40 bg-purple-100 flex items-center justify-center">
125
+ <i class="fas fa-font text-5xl text-purple-600"></i>
126
+ </div>
127
+ <div class="p-6">
128
+ <h3 class="font-bold text-lg mb-2">Génération de texte</h3>
129
+ <p class="text-gray-600 mb-4">Chatbots, rédaction automatique, correction grammaticale...</p>
130
+ <a href="#" class="text-purple-600 font-medium flex items-center">
131
+ Voir les outils <i class="fas fa-arrow-right ml-2"></i>
132
+ </a>
133
+ </div>
134
+ </div>
135
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">
136
+ <div class="h-40 bg-blue-100 flex items-center justify-center">
137
+ <i class="fas fa-image text-5xl text-blue-600"></i>
138
+ </div>
139
+ <div class="p-6">
140
+ <h3 class="font-bold text-lg mb-2">Génération d'images</h3>
141
+ <p class="text-gray-600 mb-4">Art IA, design, photoréalisme, édition d'images...</p>
142
+ <a href="#" class="text-blue-600 font-medium flex items-center">
143
+ Voir les outils <i class="fas fa-arrow-right ml-2"></i>
144
+ </a>
145
+ </div>
146
+ </div>
147
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">
148
+ <div class="h-40 bg-green-100 flex items-center justify-center">
149
+ <i class="fas fa-music text-5xl text-green-600"></i>
150
+ </div>
151
+ <div class="p-6">
152
+ <h3 class="font-bold text-lg mb-2">Audio & Musique</h3>
153
+ <p class="text-gray-600 mb-4">Synthèse vocale, génération musicale, podcasts IA...</p>
154
+ <a href="#" class="text-green-600 font-medium flex items-center">
155
+ Voir les outils <i class="fas fa-arrow-right ml-2"></i>
156
+ </a>
157
+ </div>
158
+ </div>
159
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">
160
+ <div class="h-40 bg-yellow-100 flex items-center justify-center">
161
+ <i class="fas fa-video text-5xl text-yellow-600"></i>
162
+ </div>
163
+ <div class="p-6">
164
+ <h3 class="font-bold text-lg mb-2">Vidéo & Animation</h3>
165
+ <p class="text-gray-600 mb-4">Génération de vidéos, deepfakes, animation automatique...</p>
166
+ <a href="#" class="text-yellow-600 font-medium flex items-center">
167
+ Voir les outils <i class="fas fa-arrow-right ml-2"></i>
168
+ </a>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </section>
173
+
174
+ <!-- Tool Comparator -->
175
+ <section id="comparateur" class="mb-20">
176
+ <div class="text-center mb-12">
177
+ <h2 class="text-3xl font-bold mb-4">Comparateur d'outils IA</h2>
178
+ <p class="text-gray-600 max-w-2xl mx-auto">Comparez les fonctionnalités, prix et performances des meilleurs outils du marché.</p>
179
+ </div>
180
+
181
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
182
+ <div class="border-b border-gray-200">
183
+ <div class="flex space-x-8 px-6">
184
+ <button class="py-4 px-1 tab-active">Génération de texte</button>
185
+ <button class="py-4 px-1 hover:text-purple-600">Génération d'images</button>
186
+ <button class="py-4 px-1 hover:text-purple-600">Audio & Musique</button>
187
+ <button class="py-4 px-1 hover:text-purple-600">Vidéo & Animation</button>
188
+ </div>
189
+ </div>
190
+
191
+ <div class="p-6">
192
+ <div class="flex justify-between items-center mb-6">
193
+ <div class="flex items-center space-x-4">
194
+ <div class="relative">
195
+ <select class="appearance-none bg-gray-100 border-0 pl-4 pr-10 py-2 rounded-full focus:outline-none">
196
+ <option>Trier par : Pertinence</option>
197
+ <option>Trier par : Prix croissant</option>
198
+ <option>Trier par : Prix décroissant</option>
199
+ <option>Trier par : Notes</option>
200
+ </select>
201
+ <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-500"></i>
202
+ </div>
203
+ <div class="relative">
204
+ <select class="appearance-none bg-gray-100 border-0 pl-4 pr-10 py-2 rounded-full focus:outline-none">
205
+ <option>Filtrer par : Tous</option>
206
+ <option>Gratuit</option>
207
+ <option>Payant</option>
208
+ <option>Essai gratuit</option>
209
+ </select>
210
+ <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-500"></i>
211
+ </div>
212
+ </div>
213
+ <div class="hidden md:block">
214
+ <div class="relative">
215
+ <input type="text" placeholder="Rechercher un outil..." class="bg-gray-100 border-0 pl-4 pr-10 py-2 rounded-full focus:outline-none w-64">
216
+ <i class="fas fa-search absolute right-3 top-3 text-gray-500"></i>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <div class="grid md:grid-cols-3 gap-6">
222
+ <!-- Tool Card 1 -->
223
+ <div class="bg-white rounded-xl shadow-md tool-card transition duration-300 relative">
224
+ <div class="price-tag">POPULAIRE</div>
225
+ <div class="p-6">
226
+ <div class="flex items-center mb-4">
227
+ <img src="https://via.placeholder.com/50" alt="ChatGPT" class="w-12 h-12 rounded-full mr-4">
228
+ <div>
229
+ <h3 class="font-bold text-lg">ChatGPT Plus</h3>
230
+ <div class="flex items-center">
231
+ <div class="flex text-yellow-400">
232
+ <i class="fas fa-star"></i>
233
+ <i class="fas fa-star"></i>
234
+ <i class="fas fa-star"></i>
235
+ <i class="fas fa-star"></i>
236
+ <i class="fas fa-star-half-alt"></i>
237
+ </div>
238
+ <span class="text-gray-500 ml-2">4.7</span>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ <p class="text-gray-600 mb-4">Assistant conversationnel avancé avec accès prioritaire et fonctionnalités étendues.</p>
243
+ <div class="mb-4">
244
+ <div class="flex justify-between text-sm mb-1">
245
+ <span class="text-gray-500">Prix mensuel</span>
246
+ <span class="font-bold">$20</span>
247
+ </div>
248
+ <div class="flex justify-between text-sm mb-1">
249
+ <span class="text-gray-500">Essai gratuit</span>
250
+ <span>Non</span>
251
+ </div>
252
+ <div class="flex justify-between text-sm">
253
+ <span class="text-gray-500">Limite d'utilisation</span>
254
+ <span>Élevée</span>
255
+ </div>
256
+ </div>
257
+ <div class="flex space-x-2 mb-4">
258
+ <span class="bg-purple-100 text-purple-600 px-2 py-1 rounded-full text-xs">Texte</span>
259
+ <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded-full text-xs">Code</span>
260
+ </div>
261
+ <div class="flex space-x-3">
262
+ <a href="#" class="gradient-bg text-white px-4 py-2 rounded-lg font-medium flex-1 text-center hover:opacity-90 transition">Essayer</a>
263
+ <a href="#" class="border border-purple-600 text-purple-600 px-4 py-2 rounded-lg font-medium hover:bg-purple-50 transition">Comparer</a>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Tool Card 2 -->
269
+ <div class="bg-white rounded-xl shadow-md tool-card transition duration-300">
270
+ <div class="p-6">
271
+ <div class="flex items-center mb-4">
272
+ <img src="https://via.placeholder.com/50" alt="Midjourney" class="w-12 h-12 rounded-full mr-4">
273
+ <div>
274
+ <h3 class="font-bold text-lg">Midjourney</h3>
275
+ <div class="flex items-center">
276
+ <div class="flex text-yellow-400">
277
+ <i class="fas fa-star"></i>
278
+ <i class="fas fa-star"></i>
279
+ <i class="fas fa-star"></i>
280
+ <i class="fas fa-star"></i>
281
+ <i class="far fa-star"></i>
282
+ </div>
283
+ <span class="text-gray-500 ml-2">4.2</span>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ <p class="text-gray-600 mb-4">Générateur d'images artistiques à partir de descriptions textuelles.</p>
288
+ <div class="mb-4">
289
+ <div class="flex justify-between text-sm mb-1">
290
+ <span class="text-gray-500">Prix mensuel</span>
291
+ <span class="font-bold">$10-$30</span>
292
+ </div>
293
+ <div class="flex justify-between text-sm mb-1">
294
+ <span class="text-gray-500">Essai gratuit</span>
295
+ <span>25 images</span>
296
+ </div>
297
+ <div class="flex justify-between text-sm">
298
+ <span class="text-gray-500">Limite d'utilisation</span>
299
+ <span>Variable</span>
300
+ </div>
301
+ </div>
302
+ <div class="flex space-x-2 mb-4">
303
+ <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded-full text-xs">Images</span>
304
+ <span class="bg-purple-100 text-purple-600 px-2 py-1 rounded-full text-xs">Art</span>
305
+ </div>
306
+ <div class="flex space-x-3">
307
+ <a href="#" class="gradient-bg text-white px-4 py-2 rounded-lg font-medium flex-1 text-center hover:opacity-90 transition">Essayer</a>
308
+ <a href="#" class="border border-purple-600 text-purple-600 px-4 py-2 rounded-lg font-medium hover:bg-purple-50 transition">Comparer</a>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Tool Card 3 -->
314
+ <div class="bg-white rounded-xl shadow-md tool-card transition duration-300">
315
+ <div class="p-6">
316
+ <div class="flex items-center mb-4">
317
+ <img src="https://via.placeholder.com/50" alt="Descript" class="w-12 h-12 rounded-full mr-4">
318
+ <div>
319
+ <h3 class="font-bold text-lg">Descript</h3>
320
+ <div class="flex items-center">
321
+ <div class="flex text-yellow-400">
322
+ <i class="fas fa-star"></i>
323
+ <i class="fas fa-star"></i>
324
+ <i class="fas fa-star"></i>
325
+ <i class="fas fa-star"></i>
326
+ <i class="fas fa-star"></i>
327
+ </div>
328
+ <span class="text-gray-500 ml-2">4.9</span>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ <p class="text-gray-600 mb-4">Éditeur audio/vidéo avec synthèse vocale et correction automatique.</p>
333
+ <div class="mb-4">
334
+ <div class="flex justify-between text-sm mb-1">
335
+ <span class="text-gray-500">Prix mensuel</span>
336
+ <span class="font-bold">$12-$36</span>
337
+ </div>
338
+ <div class="flex justify-between text-sm mb-1">
339
+ <span class="text-gray-500">Essai gratuit</span>
340
+ <span>3h d'audio</span>
341
+ </div>
342
+ <div class="flex justify-between text-sm">
343
+ <span class="text-gray-500">Limite d'utilisation</span>
344
+ <span>Moyenne</span>
345
+ </div>
346
+ </div>
347
+ <div class="flex space-x-2 mb-4">
348
+ <span class="bg-green-100 text-green-600 px-2 py-1 rounded-full text-xs">Audio</span>
349
+ <span class="bg-yellow-100 text-yellow-600 px-2 py-1 rounded-full text-xs">Vidéo</span>
350
+ </div>
351
+ <div class="flex space-x-3">
352
+ <a href="#" class="gradient-bg text-white px-4 py-2 rounded-lg font-medium flex-1 text-center hover:opacity-90 transition">Essayer</a>
353
+ <a href="#" class="border border-purple-600 text-purple-600 px-4 py-2 rounded-lg font-medium hover:bg-purple-50 transition">Comparer</a>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <div class="mt-8 text-center">
360
+ <button class="border border-purple-600 text-purple-600 px-6 py-2 rounded-lg font-medium hover:bg-purple-50 transition">
361
+ Voir plus d'outils <i class="fas fa-arrow-down ml-2"></i>
362
+ </button>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <div class="bg-white rounded-xl shadow-md p-6">
368
+ <h3 class="font-bold text-xl mb-4">Comment comparer les outils ?</h3>
369
+ <div class="grid md:grid-cols-3 gap-6">
370
+ <div class="flex items-start">
371
+ <div class="bg-purple-100 text-purple-600 rounded-full w-10 h-10 flex items-center justify-center mr-4 mt-1">
372
+ <span class="font-bold">1</span>
373
+ </div>
374
+ <div>
375
+ <h4 class="font-bold mb-2">Sélectionnez une catégorie</h4>
376
+ <p class="text-gray-600">Choisissez le type d'outil IA que vous recherchez (texte, images, audio, etc.)</p>
377
+ </div>
378
+ </div>
379
+ <div class="flex items-start">
380
+ <div class="bg-purple-100 text-purple-600 rounded-full w-10 h-10 flex items-center justify-center mr-4 mt-1">
381
+ <span class="font-bold">2</span>
382
+ </div>
383
+ <div>
384
+ <h4 class="font-bold mb-2">Filtrez les résultats</h4>
385
+ <p class="text-gray-600">Utilisez nos filtres pour affiner votre recherche selon vos besoins spécifiques</p>
386
+ </div>
387
+ </div>
388
+ <div class="flex items-start">
389
+ <div class="bg-purple-100 text-purple-600 rounded-full w-10 h-10 flex items-center justify-center mr-4 mt-1">
390
+ <span class="font-bold">3</span>
391
+ </div>
392
+ <div>
393
+ <h4 class="font-bold mb-2">Comparez et choisissez</h4>
394
+ <p class="text-gray-600">Consultez les comparaisons détaillées et sélectionnez l'outil idéal</p>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </section>
400
+
401
+ <!-- Newsletter -->
402
+ <section id="newsletter" class="gradient-bg text-white rounded-xl shadow-lg p-8 mb-20">
403
+ <div class="max-w-4xl mx-auto">
404
+ <div class="md:flex items-center">
405
+ <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8">
406
+ <h2 class="text-2xl font-bold mb-3">Restez informé des dernières IA</h2>
407
+ <p class="mb-4">Abonnez-vous à notre newsletter pour recevoir chaque semaine les nouveautés, tests et offres exclusives sur les outils d'intelligence artificielle.</p>
408
+ <div class="flex space-x-4">
409
+ <div class="flex items-center">
410
+ <i class="fas fa-check-circle mr-2 text-green-300"></i>
411
+ <span class="text-sm">Sans spam</span>
412
+ </div>
413
+ <div class="flex items-center">
414
+ <i class="fas fa-check-circle mr-2 text-green-300"></i>
415
+ <span class="text-sm">Désabonnement facile</span>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ <div class="md:w-1/2">
420
+ <form class="bg-white rounded-lg overflow-hidden">
421
+ <div class="p-4">
422
+ <input type="email" placeholder="Votre adresse email" class="w-full px-4 py-3 newsletter-input border-0 focus:ring-0">
423
+ </div>
424
+ <div class="bg-gray-100 px-4 py-3 flex justify-between items-center">
425
+ <div class="flex items-center">
426
+ <input type="checkbox" id="consent" class="mr-2">
427
+ <label for="consent" class="text-gray-600 text-sm">J'accepte de recevoir des emails</label>
428
+ </div>
429
+ <button type="submit" class="gradient-bg text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition">
430
+ S'abonner <i class="fas fa-paper-plane ml-2"></i>
431
+ </button>
432
+ </div>
433
+ </form>
434
+ <p class="text-purple-200 text-xs mt-2 text-center">Nous ne partagerons jamais votre email avec des tiers.</p>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </section>
439
+
440
+ <!-- Affiliate Disclosure -->
441
+ <section class="bg-gray-100 rounded-xl p-6 mb-12">
442
+ <h3 class="font-bold text-lg mb-3">Transparence sur les affiliations</h3>
443
+ <p class="text-gray-600">Certains liens sur ce site sont des liens d'affiliation. Cela signifie que si vous cliquez sur le lien et effectuez un achat, nous pouvons recevoir une commission sans frais supplémentaires pour vous. Ces commissions nous aident à maintenir ce comparateur et à continuer à fournir des analyses objectives des outils IA.</p>
444
+ </section>
445
+ </main>
446
+
447
+ <!-- Footer -->
448
+ <footer class="bg-gray-900 text-white py-12">
449
+ <div class="container mx-auto px-4">
450
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
451
+ <div>
452
+ <div class="flex items-center space-x-2 mb-4">
453
+ <i class="fas fa-robot text-2xl"></i>
454
+ <h3 class="text-xl font-bold">AI Tools Comparateur</h3>
455
+ </div>
456
+ <p class="text-gray-400">Le guide ultime pour choisir les meilleurs outils d'intelligence artificielle en 2023.</p>
457
+ <div class="flex space-x-4 mt-4">
458
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
459
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
460
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a>
461
+ </div>
462
+ </div>
463
+ <div>
464
+ <h4 class="font-bold text-lg mb-4">Catégories</h4>
465
+ <ul class="space-y-2">
466
+ <li><a href="#" class="text-gray-400 hover:text-white">Génération de texte</a></li>
467
+ <li><a href="#" class="text-gray-400 hover:text-white">Génération d'images</a></li>
468
+ <li><a href="#" class="text-gray-400 hover:text-white">Audio & Musique</a></li>
469
+ <li><a href="#" class="text-gray-400 hover:text-white">Vidéo & Animation</a></li>
470
+ <li><a href="#" class="text-gray-400 hover:text-white">Outils de productivité</a></li>
471
+ </ul>
472
+ </div>
473
+ <div>
474
+ <h4 class="font-bold text-lg mb-4">Entreprise</h4>
475
+ <ul class="space-y-2">
476
+ <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li>
477
+ <li><a href="#" class="text-gray-400 hover:text-white">Méthodologie</a></li>
478
+ <li><a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a></li>
479
+ <li><a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a></li>
480
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
481
+ </ul>
482
+ </div>
483
+ <div>
484
+ <h4 class="font-bold text-lg mb-4">Ressources</h4>
485
+ <ul class="space-y-2">
486
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
487
+ <li><a href="#" class="text-gray-400 hover:text-white">Guides</a></li>
488
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
489
+ <li><a href="#" class="text-gray-400 hover:text-white">Glossaire IA</a></li>
490
+ <li><a href="#" class="text-gray-400 hover:text-white">Nouveautés</a></li>
491
+ </ul>
492
+ </div>
493
+ </div>
494
+ <div class="border-t border-gray-800 pt-8 text-center text-gray-400">
495
+ <p>© 2023 AI Tools Comparateur. Tous droits réservés.</p>
496
+ </div>
497
+ </div>
498
+ </footer>
499
+
500
+ <script>
501
+ // Simple script for tab switching
502
+ document.addEventListener('DOMContentLoaded', function() {
503
+ const tabs = document.querySelectorAll('.flex button');
504
+
505
+ tabs.forEach(tab => {
506
+ tab.addEventListener('click', function() {
507
+ // Remove active class from all tabs
508
+ tabs.forEach(t => t.classList.remove('tab-active'));
509
+ // Add active class to clicked tab
510
+ this.classList.add('tab-active');
511
+
512
+ // Here you would typically load different content based on the tab
513
+ // For this example, we're just changing the UI
514
+ });
515
+ });
516
+
517
+ // Newsletter form submission
518
+ const newsletterForm = document.querySelector('form');
519
+ if(newsletterForm) {
520
+ newsletterForm.addEventListener('submit', function(e) {
521
+ e.preventDefault();
522
+ const email = this.querySelector('input[type="email"]').value;
523
+ if(email) {
524
+ alert(`Merci pour votre inscription avec l'email: ${email}. Vous recevrez bientôt nos actualités sur les outils IA!`);
525
+ this.querySelector('input[type="email"]').value = '';
526
+ }
527
+ });
528
+ }
529
+ });
530
+ </script>
531
+ <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=zama1/ai-tools-comparateur" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
532
+ </html>