Hugging Face's logo

Spaces:
docto41
/
web-gen-ai
Running

App Files Community
1
docto41 commited on
Commit
0962ad1
·
verified ·
1 Parent(s): b2b6176

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1212 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Web Gen Ai
3
- emoji: 🏃
4
- colorFrom: indigo
5
- colorTo: pink
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: web-gen-ai
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: yellow
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,1212 @@
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>WebGen AI - Générateur de sites web intelligents</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, #3b82f6 0%, #8b5cf6 100%);
12
+ }
13
+ .card-hover {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .card-hover:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .input-focus:focus {
21
+ border-color: #8b5cf6;
22
+ box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
23
+ }
24
+ .wave-bg {
25
+ position: absolute;
26
+ bottom: 0;
27
+ left: 0;
28
+ width: 100%;
29
+ overflow: hidden;
30
+ line-height: 0;
31
+ }
32
+ .wave-bg svg {
33
+ position: relative;
34
+ display: block;
35
+ width: calc(100% + 1.3px);
36
+ height: 150px;
37
+ }
38
+ .wave-bg .shape-fill {
39
+ fill: #FFFFFF;
40
+ }
41
+ .loading-dots {
42
+ display: inline-flex;
43
+ align-items: center;
44
+ }
45
+ .loading-dots span {
46
+ width: 8px;
47
+ height: 8px;
48
+ margin: 0 3px;
49
+ background-color: #3b82f6;
50
+ border-radius: 50%;
51
+ display: inline-block;
52
+ animation: bounce 1.4s infinite ease-in-out both;
53
+ }
54
+ .loading-dots span:nth-child(1) {
55
+ animation-delay: -0.32s;
56
+ }
57
+ .loading-dots span:nth-child(2) {
58
+ animation-delay: -0.16s;
59
+ }
60
+ @keyframes bounce {
61
+ 0%, 80%, 100% {
62
+ transform: scale(0);
63
+ } 40% {
64
+ transform: scale(1);
65
+ }
66
+ }
67
+ .site-preview {
68
+ transition: all 0.5s ease;
69
+ }
70
+ .tab-active {
71
+ border-bottom: 3px solid #3b82f6;
72
+ color: #3b82f6;
73
+ font-weight: 600;
74
+ }
75
+ </style>
76
+ </head>
77
+ <body class="font-sans antialiased text-gray-800">
78
+ <!-- Header -->
79
+ <header class="gradient-bg text-white relative overflow-hidden">
80
+ <div class="container mx-auto px-6 py-12">
81
+ <nav class="flex items-center justify-between">
82
+ <div class="flex items-center space-x-2">
83
+ <i class="fas fa-code text-2xl"></i>
84
+ <span class="text-xl font-bold">WebGen AI</span>
85
+ </div>
86
+ <div class="hidden md:flex items-center space-x-8">
87
+ <a href="#types" class="hover:text-gray-200">Types de sites</a>
88
+ <a href="#features" class="hover:text-gray-200">Fonctionnalités</a>
89
+ <a href="#examples" class="hover:text-gray-200">Exemples</a>
90
+ <a href="#pricing" class="hover:text-gray-200">Tarifs</a>
91
+ </div>
92
+ <button class="md:hidden text-xl">
93
+ <i class="fas fa-bars"></i>
94
+ </button>
95
+ </nav>
96
+
97
+ <div class="mt-16 md:mt-24 text-center">
98
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Créez n'importe quel type <br>de site web en minutes</h1>
99
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">L'IA la plus avancée pour générer des sites web professionnels adaptés à tous vos besoins</p>
100
+ <div class="flex justify-center space-x-4">
101
+ <button class="bg-white text-blue-600 font-bold px-8 py-4 rounded-full hover:bg-gray-100 transition duration-300 shadow-lg">
102
+ Essayer gratuitement
103
+ </button>
104
+ <button class="border border-white text-white font-bold px-8 py-4 rounded-full hover:bg-white hover:text-blue-600 transition duration-300">
105
+ Voir des exemples
106
+ </button>
107
+ </div>
108
+ </div>
109
+
110
+ <div class="mt-20 relative">
111
+ <div class="max-w-6xl mx-auto bg-white rounded-xl shadow-2xl overflow-hidden">
112
+ <div class="p-1 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500">
113
+ <div class="bg-white p-6">
114
+ <div class="flex items-center justify-between mb-4">
115
+ <div class="flex space-x-2">
116
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
117
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
118
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
119
+ </div>
120
+ <div class="text-sm text-gray-500">www.votresite.com</div>
121
+ </div>
122
+ <div class="border border-gray-200 rounded-lg p-4 h-64 flex items-center justify-center">
123
+ <p class="text-gray-500">Votre site web généré par IA apparaîtra ici</p>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ <div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 bg-white px-6 py-2 rounded-full shadow-md">
129
+ <span class="text-blue-600 font-medium">Exemple de rendu</span>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ <div class="wave-bg">
134
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
135
+ <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
136
+ </svg>
137
+ </div>
138
+ </header>
139
+
140
+ <!-- Site Types Section -->
141
+ <section id="types" class="py-20 bg-gray-50">
142
+ <div class="container mx-auto px-6">
143
+ <div class="text-center mb-16">
144
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Types de sites disponibles</h2>
145
+ <p class="text-gray-600 max-w-2xl mx-auto">Choisissez parmi nos nombreux modèles spécialisés</p>
146
+ </div>
147
+
148
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
149
+ <!-- E-commerce -->
150
+ <div class="bg-white p-6 rounded-xl shadow-md card-hover">
151
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
152
+ <i class="fas fa-shopping-cart text-2xl"></i>
153
+ </div>
154
+ <h3 class="text-xl font-bold mb-2">E-commerce</h3>
155
+ <p class="text-gray-600 mb-4">Boutique en ligne complète avec panier, paiement et gestion de produits</p>
156
+ <div class="flex flex-wrap gap-2">
157
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Produits</span>
158
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Panier</span>
159
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Paiement</span>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Blog -->
164
+ <div class="bg-white p-6 rounded-xl shadow-md card-hover">
165
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
166
+ <i class="fas fa-blog text-2xl"></i>
167
+ </div>
168
+ <h3 class="text-xl font-bold mb-2">Blog</h3>
169
+ <p class="text-gray-600 mb-4">Plateforme de publication avec catégories, commentaires et abonnements</p>
170
+ <div class="flex flex-wrap gap-2">
171
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Articles</span>
172
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Commentaires</span>
173
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Newsletter</span>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Portfolio -->
178
+ <div class="bg-white p-6 rounded-xl shadow-md card-hover">
179
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
180
+ <i class="fas fa-briefcase text-2xl"></i>
181
+ </div>
182
+ <h3 class="text-xl font-bold mb-2">Portfolio</h3>
183
+ <p class="text-gray-600 mb-4">Présentation professionnelle de vos travaux et compétences</p>
184
+ <div class="flex flex-wrap gap-2">
185
+ <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Galerie</span>
186
+ <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">CV</span>
187
+ <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Contact</span>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- SaaS -->
192
+ <div class="bg-white p-6 rounded-xl shadow-md card-hover">
193
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
194
+ <i class="fas fa-cloud text-2xl"></i>
195
+ </div>
196
+ <h3 class="text-xl font-bold mb-2">Application SaaS</h3>
197
+ <p class="text-gray-600 mb-4">Site pour votre logiciel avec espace client et documentation</p>
198
+ <div class="flex flex-wrap gap-2">
199
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Dashboard</span>
200
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Authentification</span>
201
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">API</span>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Communauté -->
206
+ <div class="bg-white p-6 rounded-xl shadow-md card-hover">
207
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
208
+ <i class="fas fa-users text-2xl"></i>
209
+ </div>
210
+ <h3 class="text-xl font-bold mb-2">Communauté</h3>
211
+ <p class="text-gray-600 mb-4">Plateforme sociale avec profils, forums et interactions</p>
212
+ <div class="flex flex-wrap gap-2">
213
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Profils</span>
214
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Forum</span>
215
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Messagerie</span>
216
+ </div>
217
+ </div>
218
+
219
+ <!-- Événements -->
220
+ <div class="bg-white p-6 rounded-xl shadow-md card-hover">
221
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
222
+ <i class="fas fa-calendar-alt text-2xl"></i>
223
+ </div>
224
+ <h3 class="text-xl font-bold mb-2">Événements</h3>
225
+ <p class="text-gray-600 mb-4">Site pour conférences, festivals ou rencontres professionnelles</p>
226
+ <div class="flex flex-wrap gap-2">
227
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Billetterie</span>
228
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Programme</span>
229
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Sponsors</span>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Éducation -->
234
+ <div class="bg-white p-6 rounded-xl shadow-md card-hover">
235
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
236
+ <i class="fas fa-graduation-cap text-2xl"></i>
237
+ </div>
238
+ <h3 class="text-xl font-bold mb-2">Éducation</h3>
239
+ <p class="text-gray-600 mb-4">Plateforme de cours en ligne avec leçons et évaluations</p>
240
+ <div class="flex flex-wrap gap-2">
241
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Cours</span>
242
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Quiz</span>
243
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Certificats</span>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- Autre -->
248
+ <div class="bg-white p-6 rounded-xl shadow-md card-hover">
249
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-4">
250
+ <i class="fas fa-lightbulb text-2xl"></i>
251
+ </div>
252
+ <h3 class="text-xl font-bold mb-2">Autre projet</h3>
253
+ <p class="text-gray-600 mb-4">Nous créons le site parfait pour votre besoin spécifique</p>
254
+ <div class="flex flex-wrap gap-2">
255
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Personnalisé</span>
256
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Unique</span>
257
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Sur mesure</span>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </section>
263
+
264
+ <!-- Generator Section -->
265
+ <section class="py-20 bg-white">
266
+ <div class="container mx-auto px-6">
267
+ <div class="text-center mb-16">
268
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Générateur de site IA</h2>
269
+ <p class="text-gray-600 max-w-2xl mx-auto">Décrivez votre projet et notre IA créera un site web personnalisé en temps réel.</p>
270
+ </div>
271
+
272
+ <div class="max-w-5xl mx-auto bg-gray-50 rounded-xl shadow-lg overflow-hidden">
273
+ <!-- Tabs -->
274
+ <div class="flex border-b border-gray-200">
275
+ <button class="tab-btn py-4 px-6 text-gray-600 font-medium hover:text-blue-600 transition duration-300" data-tab="standard">
276
+ <i class="fas fa-bolt mr-2"></i> Standard
277
+ </button>
278
+ <button class="tab-btn py-4 px-6 text-gray-600 font-medium hover:text-blue-600 transition duration-300" data-tab="advanced">
279
+ <i class="fas fa-cogs mr-2"></i> Avancé
280
+ </button>
281
+ <button class="tab-btn py-4 px-6 text-gray-600 font-medium hover:text-blue-600 transition duration-300" data-tab="import">
282
+ <i class="fas fa-file-import mr-2"></i> Importer
283
+ </button>
284
+ </div>
285
+
286
+ <!-- Tab Content -->
287
+ <div class="p-8">
288
+ <!-- Standard Tab -->
289
+ <div id="standard-tab" class="tab-content">
290
+ <div class="mb-6">
291
+ <label for="site-purpose" class="block text-sm font-medium text-gray-700 mb-2">Quel est le but principal de votre site ?</label>
292
+ <select id="site-purpose" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none">
293
+ <option value="">Sélectionnez...</option>
294
+ <option value="ecommerce">Vendre des produits/services</option>
295
+ <option value="blog">Publier du contenu/blog</option>
296
+ <option value="portfolio">Présenter mon travail</option>
297
+ <option value="community">Créer une communauté</option>
298
+ <option value="education">Enseigner/former</option>
299
+ <option value="event">Promouvoir un événement</option>
300
+ <option value="other">Autre</option>
301
+ </select>
302
+ </div>
303
+
304
+ <div class="mb-6">
305
+ <label for="site-description" class="block text-sm font-medium text-gray-700 mb-2">Décrivez votre site en quelques phrases</label>
306
+ <textarea id="site-description" rows="3" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none" placeholder="Ex: Je veux un site pour mon application de gestion de projets avec une page d'accueil explicative, un tableau de bord pour les utilisateurs et une page de tarification."></textarea>
307
+ </div>
308
+
309
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
310
+ <div>
311
+ <label for="site-style" class="block text-sm font-medium text-gray-700 mb-2">Style préféré</label>
312
+ <select id="site-style" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none">
313
+ <option value="">Sélectionnez...</option>
314
+ <option value="modern">Moderne et épuré</option>
315
+ <option value="creative">Créatif et coloré</option>
316
+ <option value="professional">Professionnel et sérieux</option>
317
+ <option value="minimal">Minimaliste</option>
318
+ <option value="bold">Audacieux et contrasté</option>
319
+ </select>
320
+ </div>
321
+ <div>
322
+ <label for="site-pages" class="block text-sm font-medium text-gray-700 mb-2">Pages nécessaires</label>
323
+ <select id="site-pages" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none">
324
+ <option value="basic">Accueil, À propos, Contact</option>
325
+ <option value="standard">+ Services/Produits, Blog</option>
326
+ <option value="advanced">+ Galerie, Équipe, FAQ</option>
327
+ <option value="custom">Je spécifierai</option>
328
+ </select>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <!-- Advanced Tab -->
334
+ <div id="advanced-tab" class="tab-content hidden">
335
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
336
+ <div>
337
+ <label for="primary-color" class="block text-sm font-medium text-gray-700 mb-2">Couleur principale</label>
338
+ <input type="color" id="primary-color" value="#3b82f6" class="w-full h-12 cursor-pointer">
339
+ </div>
340
+ <div>
341
+ <label for="font-family" class="block text-sm font-medium text-gray-700 mb-2">Police d'écriture</label>
342
+ <select id="font-family" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none">
343
+ <option value="sans">Sans-serif (moderne)</option>
344
+ <option value="serif">Serif (traditionnel)</option>
345
+ <option value="mono">Monospace (technique)</option>
346
+ <option value="custom">Personnalisée</option>
347
+ </select>
348
+ </div>
349
+ </div>
350
+
351
+ <div class="mb-6">
352
+ <label class="block text-sm font-medium text-gray-700 mb-2">Fonctionnalités avancées</label>
353
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
354
+ <div class="flex items-center">
355
+ <input id="multi-language" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
356
+ <label for="multi-language" class="ml-2 block text-sm text-gray-700">Multilingue</label>
357
+ </div>
358
+ <div class="flex items-center">
359
+ <input id="dark-mode" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
360
+ <label for="dark-mode" class="ml-2 block text-sm text-gray-700">Mode sombre</label>
361
+ </div>
362
+ <div class="flex items-center">
363
+ <input id="seo-optimized" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
364
+ <label for="seo-optimized" class="ml-2 block text-sm text-gray-700">Optimisé SEO</label>
365
+ </div>
366
+ <div class="flex items-center">
367
+ <input id="analytics" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
368
+ <label for="analytics" class="ml-2 block text-sm text-gray-700">Analytics intégré</label>
369
+ </div>
370
+ <div class="flex items-center">
371
+ <input id="membership" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
372
+ <label for="membership" class="ml-2 block text-sm text-gray-700">Espace membre</label>
373
+ </div>
374
+ <div class="flex items-center">
375
+ <input id="api-ready" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
376
+ <label for="api-ready" class="ml-2 block text-sm text-gray-700">Prêt pour API</label>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <div class="mb-6">
382
+ <label for="tech-stack" class="block text-sm font-medium text-gray-700 mb-2">Stack technique préférée</label>
383
+ <select id="tech-stack" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus focus:outline-none">
384
+ <option value="auto">Automatique (recommandé)</option>
385
+ <option value="react">React + Node.js</option>
386
+ <option value="vue">Vue.js + Laravel</option>
387
+ <option value="angular">Angular + .NET</option>
388
+ <option value="static">HTML/CSS/JS statique</option>
389
+ </select>
390
+ </div>
391
+ </div>
392
+
393
+ <!-- Import Tab -->
394
+ <div id="import-tab" class="tab-content hidden">
395
+ <div class="mb-6">
396
+ <label class="block text-sm font-medium text-gray-700 mb-2">Importer depuis</label>
397
+ <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
398
+ <button class="border border-gray-300 rounded-lg py-3 px-4 hover:bg-gray-100 transition duration-300 flex items-center justify-center">
399
+ <i class="fab fa-figma text-xl text-purple-600 mr-2"></i> Figma
400
+ </button>
401
+ <button class="border border-gray-300 rounded-lg py-3 px-4 hover:bg-gray-100 transition duration-300 flex items-center justify-center">
402
+ <i class="fab fa-wordpress text-xl text-blue-600 mr-2"></i> WordPress
403
+ </button>
404
+ <button class="border border-gray-300 rounded-lg py-3 px-4 hover:bg-gray-100 transition duration-300 flex items-center justify-center">
405
+ <i class="fas fa-file-upload text-xl text-green-600 mr-2"></i> Fichier ZIP
406
+ </button>
407
+ </div>
408
+ </div>
409
+
410
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
411
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
412
+ <p class="text-gray-600 mb-2">Glissez-déposez vos fichiers ici ou</p>
413
+ <button class="bg-blue-600 text-white font-medium px-6 py-2 rounded-lg hover:bg-blue-700 transition duration-300">
414
+ Parcourir les fichiers
415
+ </button>
416
+ <p class="text-xs text-gray-500 mt-4">Formats supportés: .fig, .zip, .wpress (max 50MB)</p>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
421
+ <button id="generate-btn" class="gradient-bg text-white font-bold px-8 py-3 rounded-lg hover:opacity-90 transition duration-300 flex items-center justify-center">
422
+ <i class="fas fa-magic mr-2"></i> Générer mon site
423
+ </button>
424
+ <button class="border border-blue-600 text-blue-600 font-bold px-8 py-3 rounded-lg hover:bg-blue-50 transition duration-300">
425
+ Voir des exemples
426
+ </button>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </section>
432
+
433
+ <!-- Features Section -->
434
+ <section id="features" class="py-20 bg-gray-50">
435
+ <div class="container mx-auto px-6">
436
+ <div class="text-center mb-16">
437
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Fonctionnalités puissantes</h2>
438
+ <p class="text-gray-600 max-w-2xl mx-auto">Tout ce dont vous avez besoin pour créer le site parfait</p>
439
+ </div>
440
+
441
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
442
+ <div class="bg-white p-8 rounded-xl shadow-md card-hover">
443
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-6">
444
+ <i class="fas fa-robot text-2xl"></i>
445
+ </div>
446
+ <h3 class="text-xl font-bold mb-3">IA avancée</h3>
447
+ <p class="text-gray-600">Notre intelligence artificielle comprend votre besoin et crée un site parfaitement adapté.</p>
448
+ </div>
449
+ <div class="bg-white p-8 rounded-xl shadow-md card-hover">
450
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-6">
451
+ <i class="fas fa-paint-brush text-2xl"></i>
452
+ </div>
453
+ <h3 class="text-xl font-bold mb-3">Design personnalisable</h3>
454
+ <p class="text-gray-600">Modifiez facilement les couleurs, polices et dispositions pour correspondre à votre marque.</p>
455
+ </div>
456
+ <div class="bg-white p-8 rounded-xl shadow-md card-hover">
457
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-6">
458
+ <i class="fas fa-mobile-alt text-2xl"></i>
459
+ </div>
460
+ <h3 class="text-xl font-bold mb-3">100% Responsive</h3>
461
+ <p class="text-gray-600">Des sites qui s'adaptent parfaitement à tous les appareils, des smartphones aux ordinateurs.</p>
462
+ </div>
463
+ <div class="bg-white p-8 rounded-xl shadow-md card-hover">
464
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-6">
465
+ <i class="fas fa-search-dollar text-2xl"></i>
466
+ </div>
467
+ <h3 class="text-xl font-bold mb-3">SEO intégré</h3>
468
+ <p class="text-gray-600">Structure optimisée pour le référencement dès la génération pour une meilleure visibilité.</p>
469
+ </div>
470
+ <div class="bg-white p-8 rounded-xl shadow-md card-hover">
471
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-6">
472
+ <i class="fas fa-server text-2xl"></i>
473
+ </div>
474
+ <h3 class="text-xl font-bold mb-3">Hébergement inclus</h3>
475
+ <p class="text-gray-600">Pas besoin de configurer un hébergeur, votre site est directement en ligne après génération.</p>
476
+ </div>
477
+ <div class="bg-white p-8 rounded-xl shadow-md card-hover">
478
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white mb-6">
479
+ <i class="fas fa-lock text-2xl"></i>
480
+ </div>
481
+ <h3 class="text-xl font-bold mb-3">Sécurité renforcée</h3>
482
+ <p class="text-gray-600">Protection contre les attaques, SSL inclus et mises à jour automatiques de sécurité.</p>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </section>
487
+
488
+ <!-- Examples Section -->
489
+ <section id="examples" class="py-20 bg-white">
490
+ <div class="container mx-auto px-6">
491
+ <div class="text-center mb-16">
492
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Exemples de sites générés</h2>
493
+ <p class="text-gray-600 max-w-2xl mx-auto">Découvrez ce que notre IA peut créer pour vous</p>
494
+ </div>
495
+
496
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
497
+ <!-- E-commerce Example -->
498
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
499
+ <div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center">
500
+ <i class="fas fa-shopping-cart text-white text-6xl"></i>
501
+ </div>
502
+ <div class="p-6">
503
+ <div class="flex justify-between items-start mb-4">
504
+ <h3 class="text-xl font-bold">Boutique en ligne</h3>
505
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">E-commerce</span>
506
+ </div>
507
+ <p class="text-gray-600 mb-4">Site complet avec catalogue produits, panier et paiement sécurisé.</p>
508
+ <div class="flex justify-between items-center">
509
+ <span class="text-sm text-gray-500">Généré en 2min</span>
510
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
511
+ Voir le démo <i class="fas fa-arrow-right ml-1"></i>
512
+ </button>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <!-- Blog Example -->
518
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
519
+ <div class="h-48 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center">
520
+ <i class="fas fa-blog text-white text-6xl"></i>
521
+ </div>
522
+ <div class="p-6">
523
+ <div class="flex justify-between items-start mb-4">
524
+ <h3 class="text-xl font-bold">Blog professionnel</h3>
525
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Publication</span>
526
+ </div>
527
+ <p class="text-gray-600 mb-4">Plateforme de blog avec système de commentaires et newsletter.</p>
528
+ <div class="flex justify-between items-center">
529
+ <span class="text-sm text-gray-500">Généré en 1min</span>
530
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
531
+ Voir le démo <i class="fas fa-arrow-right ml-1"></i>
532
+ </button>
533
+ </div>
534
+ </div>
535
+ </div>
536
+
537
+ <!-- Portfolio Example -->
538
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
539
+ <div class="h-48 bg-gradient-to-r from-pink-400 to-red-500 flex items-center justify-center">
540
+ <i class="fas fa-briefcase text-white text-6xl"></i>
541
+ </div>
542
+ <div class="p-6">
543
+ <div class="flex justify-between items-start mb-4">
544
+ <h3 class="text-xl font-bold">Portfolio créatif</h3>
545
+ <span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded-full">Présentation</span>
546
+ </div>
547
+ <p class="text-gray-600 mb-4">Galerie professionnelle pour montrer vos travaux et compétences.</p>
548
+ <div class="flex justify-between items-center">
549
+ <span class="text-sm text-gray-500">Généré en 1min</span>
550
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
551
+ Voir le démo <i class="fas fa-arrow-right ml-1"></i>
552
+ </button>
553
+ </div>
554
+ </div>
555
+ </div>
556
+
557
+ <!-- SaaS Example -->
558
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
559
+ <div class="h-48 bg-gradient-to-r from-red-400 to-orange-500 flex items-center justify-center">
560
+ <i class="fas fa-cloud text-white text-6xl"></i>
561
+ </div>
562
+ <div class="p-6">
563
+ <div class="flex justify-between items-start mb-4">
564
+ <h3 class="text-xl font-bold">Application SaaS</h3>
565
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Logiciel</span>
566
+ </div>
567
+ <p class="text-gray-600 mb-4">Site pour votre logiciel avec espace client et documentation.</p>
568
+ <div class="flex justify-between items-center">
569
+ <span class="text-sm text-gray-500">Généré en 3min</span>
570
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
571
+ Voir le démo <i class="fas fa-arrow-right ml-1"></i>
572
+ </button>
573
+ </div>
574
+ </div>
575
+ </div>
576
+
577
+ <!-- Community Example -->
578
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
579
+ <div class="h-48 bg-gradient-to-r from-orange-400 to-yellow-500 flex items-center justify-center">
580
+ <i class="fas fa-users text-white text-6xl"></i>
581
+ </div>
582
+ <div class="p-6">
583
+ <div class="flex justify-between items-start mb-4">
584
+ <h3 class="text-xl font-bold">Plateforme communautaire</h3>
585
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Social</span>
586
+ </div>
587
+ <p class="text-gray-600 mb-4">Réseau social avec profils, forums et messagerie privée.</p>
588
+ <div class="flex justify-between items-center">
589
+ <span class="text-sm text-gray-500">Généré en 4min</span>
590
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
591
+ Voir le démo <i class="fas fa-arrow-right ml-1"></i>
592
+ </button>
593
+ </div>
594
+ </div>
595
+ </div>
596
+
597
+ <!-- Event Example -->
598
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
599
+ <div class="h-48 bg-gradient-to-r from-yellow-400 to-green-500 flex items-center justify-center">
600
+ <i class="fas fa-calendar-alt text-white text-6xl"></i>
601
+ </div>
602
+ <div class="p-6">
603
+ <div class="flex justify-between items-start mb-4">
604
+ <h3 class="text-xl font-bold">Site événementiel</h3>
605
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Événement</span>
606
+ </div>
607
+ <p class="text-gray-600 mb-4">Site pour conférence avec billetterie, programme et sponsors.</p>
608
+ <div class="flex justify-between items-center">
609
+ <span class="text-sm text-gray-500">Généré en 2min</span>
610
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
611
+ Voir le démo <i class="fas fa-arrow-right ml-1"></i>
612
+ </button>
613
+ </div>
614
+ </div>
615
+ </div>
616
+ </div>
617
+
618
+ <div class="text-center mt-16">
619
+ <button class="gradient-bg text-white font-bold px-8 py-3 rounded-lg hover:opacity-90 transition duration-300 inline-flex items-center">
620
+ <i class="fas fa-eye mr-2"></i> Voir plus d'exemples
621
+ </button>
622
+ </div>
623
+ </div>
624
+ </section>
625
+
626
+ <!-- Pricing Section -->
627
+ <section id="pricing" class="py-20 bg-gray-50">
628
+ <div class="container mx-auto px-6">
629
+ <div class="text-center mb-16">
630
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Tarifs abordables</h2>
631
+ <p class="text-gray-600 max-w-2xl mx-auto">Choisissez le plan qui correspond à vos besoins</p>
632
+ </div>
633
+
634
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
635
+ <!-- Free Plan -->
636
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
637
+ <div class="p-6 border-b border-gray-200">
638
+ <h3 class="text-xl font-bold text-gray-800">Essai gratuit</h3>
639
+ <p class="text-gray-600">Parfait pour tester notre plateforme</p>
640
+ </div>
641
+ <div class="p-6">
642
+ <div class="mb-6">
643
+ <span class="text-4xl font-bold">0€</span>
644
+ <span class="text-gray-500">/mois</span>
645
+ </div>
646
+ <ul class="space-y-3 mb-8">
647
+ <li class="flex items-center">
648
+ <i class="fas fa-check text-green-500 mr-2"></i>
649
+ <span>1 site généré</span>
650
+ </li>
651
+ <li class="flex items-center">
652
+ <i class="fas fa-check text-green-500 mr-2"></i>
653
+ <span>Prévisualisation 7 jours</span>
654
+ </li>
655
+ <li class="flex items-center">
656
+ <i class="fas fa-check text-green-500 mr-2"></i>
657
+ <span>Types de sites limités</span>
658
+ </li>
659
+ <li class="flex items-center text-gray-400">
660
+ <i class="fas fa-times text-red-400 mr-2"></i>
661
+ <span>Pas d'hébergement</span>
662
+ </li>
663
+ <li class="flex items-center text-gray-400">
664
+ <i class="fas fa-times text-red-400 mr-2"></i>
665
+ <span>Pas de nom de domaine</span>
666
+ </li>
667
+ </ul>
668
+ <button class="w-full border border-blue-600 text-blue-600 font-bold py-3 rounded-lg hover:bg-blue-50 transition duration-300">
669
+ Commencer gratuitement
670
+ </button>
671
+ </div>
672
+ </div>
673
+
674
+ <!-- Pro Plan -->
675
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transform scale-105">
676
+ <div class="bg-blue-600 text-white p-2 text-center text-sm font-bold">
677
+ LE PLUS POPULAIRE
678
+ </div>
679
+ <div class="p-6 border-b border-gray-200">
680
+ <h3 class="text-xl font-bold text-gray-800">Professionnel</h3>
681
+ <p class="text-gray-600">Idéal pour freelances et petites entreprises</p>
682
+ </div>
683
+ <div class="p-6">
684
+ <div class="mb-6">
685
+ <span class="text-4xl font-bold">29€</span>
686
+ <span class="text-gray-500">/mois</span>
687
+ </div>
688
+ <ul class="space-y-3 mb-8">
689
+ <li class="flex items-center">
690
+ <i class="fas fa-check text-green-500 mr-2"></i>
691
+ <span>5 sites générés/mois</span>
692
+ </li>
693
+ <li class="flex items-center">
694
+ <i class="fas fa-check text-green-500 mr-2"></i>
695
+ <span>Hébergement inclus</span>
696
+ </li>
697
+ <li class="flex items-center">
698
+ <i class="fas fa-check text-green-500 mr-2"></i>
699
+ <span>Tous types de sites</span>
700
+ </li>
701
+ <li class="flex items-center">
702
+ <i class="fas fa-check text-green-500 mr-2"></i>
703
+ <span>Nom de domaine offert</span>
704
+ </li>
705
+ <li class="flex items-center">
706
+ <i class="fas fa-check text-green-500 mr-2"></i>
707
+ <span>Support prioritaire</span>
708
+ </li>
709
+ </ul>
710
+ <button class="w-full gradient-bg text-white font-bold py-3 rounded-lg hover:opacity-90 transition duration-300">
711
+ Choisir ce plan
712
+ </button>
713
+ </div>
714
+ </div>
715
+
716
+ <!-- Business Plan -->
717
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
718
+ <div class="p-6 border-b border-gray-200">
719
+ <h3 class="text-xl font-bold text-gray-800">Entreprise</h3>
720
+ <p class="text-gray-600">Pour les agences et grandes sociétés</p>
721
+ </div>
722
+ <div class="p-6">
723
+ <div class="mb-6">
724
+ <span class="text-4xl font-bold">99€</span>
725
+ <span class="text-gray-500">/mois</span>
726
+ </div>
727
+ <ul class="space-y-3 mb-8">
728
+ <li class="flex items-center">
729
+ <i class="fas fa-check text-green-500 mr-2"></i>
730
+ <span>Sites illimités</span>
731
+ </li>
732
+ <li class="flex items-center">
733
+ <i class="fas fa-check text-green-500 mr-2"></i>
734
+ <span>Hébergement premium</span>
735
+ </li>
736
+ <li class="flex items-center">
737
+ <i class="fas fa-check text-green-500 mr-2"></i>
738
+ <span>Fonctionnalités avancées</span>
739
+ </li>
740
+ <li class="flex items-center">
741
+ <i class="fas fa-check text-green-500 mr-2"></i>
742
+ <span>Noms de domaine illimités</span>
743
+ </li>
744
+ <li class="flex items-center">
745
+ <i class="fas fa-check text-green-500 mr-2"></i>
746
+ <span>Support 24/7</span>
747
+ </li>
748
+ </ul>
749
+ <button class="w-full border border-blue-600 text-blue-600 font-bold py-3 rounded-lg hover:bg-blue-50 transition duration-300">
750
+ Choisir ce plan
751
+ </button>
752
+ </div>
753
+ </div>
754
+ </div>
755
+
756
+ <div class="text-center mt-12">
757
+ <p class="text-gray-600">Vous avez besoin d'une solution personnalisée? <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">Contactez-nous</a></p>
758
+ </div>
759
+ </div>
760
+ </section>
761
+
762
+ <!-- CTA Section -->
763
+ <section class="gradient-bg text-white py-20">
764
+ <div class="container mx-auto px-6 text-center">
765
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à créer votre site web?</h2>
766
+ <p class="text-xl mb-10 max-w-2xl mx-auto">Essayez gratuitement WebGen AI et découvrez comment créer un site professionnel en quelques minutes.</p>
767
+ <button class="bg-white text-blue-600 font-bold px-8 py-4 rounded-full hover:bg-gray-100 transition duration-300 shadow-lg">
768
+ Commencer maintenant
769
+ </button>
770
+ </div>
771
+ </section>
772
+
773
+ <!-- Footer -->
774
+ <footer class="bg-gray-900 text-white py-12">
775
+ <div class="container mx-auto px-6">
776
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
777
+ <div>
778
+ <div class="flex items-center space-x-2 mb-4">
779
+ <i class="fas fa-code text-2xl"></i>
780
+ <span class="text-xl font-bold">WebGen AI</span>
781
+ </div>
782
+ <p class="text-gray-400">La solution intelligente pour créer des sites web professionnels sans effort.</p>
783
+ </div>
784
+ <div>
785
+ <h4 class="text-lg font-semibold mb-4">Produit</h4>
786
+ <ul class="space-y-2">
787
+ <li><a href="#" class="text-gray-400 hover:text-white">Fonctionnalités</a></li>
788
+ <li><a href="#" class="text-gray-400 hover:text-white">Tarifs</a></li>
789
+ <li><a href="#" class="text-gray-400 hover:text-white">Exemples</a></li>
790
+ <li><a href="#" class="text-gray-400 hover:text-white">API</a></li>
791
+ </ul>
792
+ </div>
793
+ <div>
794
+ <h4 class="text-lg font-semibold mb-4">Ressources</h4>
795
+ <ul class="space-y-2">
796
+ <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
797
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
798
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
799
+ <li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
800
+ </ul>
801
+ </div>
802
+ <div>
803
+ <h4 class="text-lg font-semibold mb-4">Contact</h4>
804
+ <ul class="space-y-2">
805
+ <li class="flex items-center">
806
+ <i class="fas fa-envelope mr-2 text-gray-400"></i>
807
+ <span class="text-gray-400">[email protected]</span>
808
+ </li>
809
+ <li class="flex items-center">
810
+ <i class="fas fa-phone mr-2 text-gray-400"></i>
811
+ <span class="text-gray-400">+33 1 23 45 67 89</span>
812
+ </li>
813
+ <li class="flex items-center">
814
+ <i class="fas fa-map-marker-alt mr-2 text-gray-400"></i>
815
+ <span class="text-gray-400">Paris, France</span>
816
+ </li>
817
+ </ul>
818
+ </div>
819
+ </div>
820
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
821
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 WebGen AI. Tous droits réservés.</p>
822
+ <div class="flex space-x-6">
823
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
824
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
825
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
826
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
827
+ </div>
828
+ </div>
829
+ </div>
830
+ </footer>
831
+
832
+ <!-- Results Modal -->
833
+ <div id="results-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
834
+ <div class="bg-white rounded-xl max-w-6xl w-full max-h-screen overflow-y-auto">
835
+ <div class="p-6 border-b border-gray-200 flex justify-between items-center sticky top-0 bg-white z-10">
836
+ <h3 class="text-xl font-bold">Votre site web généré</h3>
837
+ <button id="close-modal" class="text-gray-500 hover:text-gray-700">
838
+ <i class="fas fa-times"></i>
839
+ </button>
840
+ </div>
841
+ <div class="p-6">
842
+ <div class="mb-6">
843
+ <div class="flex items-center justify-between mb-4">
844
+ <div class="flex space-x-2">
845
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
846
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
847
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
848
+ </div>
849
+ <div class="text-sm text-gray-500">www.votresite.com</div>
850
+ </div>
851
+ <div class="border border-gray-200 rounded-lg p-4 h-96 overflow-auto bg-gray-50">
852
+ <div id="generated-site" class="bg-white p-4 rounded">
853
+ <div class="text-center py-8">
854
+ <div class="loading-dots">
855
+ <span></span>
856
+ <span></span>
857
+ <span></span>
858
+ </div>
859
+ <p class="mt-4 text-gray-600">Génération de votre site en cours...</p>
860
+ </div>
861
+ </div>
862
+ </div>
863
+ </div>
864
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
865
+ <div>
866
+ <label class="block text-sm font-medium text-gray-700 mb-2">Nom du site</label>
867
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg" value="Mon Site Professionnel">
868
+ </div>
869
+ <div>
870
+ <label class="block text-sm font-medium text-gray-700 mb-2">Domaine personnalisé</label>
871
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg" placeholder="ex: monsite.com">
872
+ </div>
873
+ </div>
874
+ <div class="flex flex-col sm:flex-row justify-end space-y-4 sm:space-y-0 sm:space-x-4">
875
+ <button class="border border-gray-300 text-gray-700 font-medium px-6 py-2 rounded-lg hover:bg-gray-50">
876
+ Modifier le design
877
+ </button>
878
+ <button class="gradient-bg text-white font-bold px-6 py-2 rounded-lg hover:opacity-90">
879
+ Publier mon site
880
+ </button>
881
+ </div>
882
+ </div>
883
+ </div>
884
+ </div>
885
+
886
+ <script>
887
+ document.addEventListener('DOMContentLoaded', function() {
888
+ // Tab functionality
889
+ const tabBtns = document.querySelectorAll('.tab-btn');
890
+ const tabContents = document.querySelectorAll('.tab-content');
891
+
892
+ tabBtns.forEach(btn => {
893
+ btn.addEventListener('click', function() {
894
+ const tabId = this.getAttribute('data-tab');
895
+
896
+ // Remove active class from all buttons
897
+ tabBtns.forEach(b => b.classList.remove('tab-active'));
898
+ // Add active class to clicked button
899
+ this.classList.add('tab-active');
900
+
901
+ // Hide all tab contents
902
+ tabContents.forEach(content => content.classList.add('hidden'));
903
+ // Show selected tab content
904
+ document.getElementById(`${tabId}-tab`).classList.remove('hidden');
905
+ });
906
+ });
907
+
908
+ // Set first tab as active by default
909
+ if (tabBtns.length > 0) {
910
+ tabBtns[0].classList.add('tab-active');
911
+ tabContents[0].classList.remove('hidden');
912
+ }
913
+
914
+ // Modal functionality
915
+ const generateBtn = document.getElementById('generate-btn');
916
+ const resultsModal = document.getElementById('results-modal');
917
+ const closeModal = document.getElementById('close-modal');
918
+ const generatedSite = document.getElementById('generated-site');
919
+
920
+ generateBtn.addEventListener('click', function() {
921
+ resultsModal.classList.remove('hidden');
922
+
923
+ // Simulate AI generation after 3 seconds
924
+ setTimeout(() => {
925
+ // Get selected site type
926
+ const siteType = document.getElementById('site-purpose').value || 'other';
927
+ let siteContent = '';
928
+
929
+ if (siteType === 'ecommerce') {
930
+ siteContent = generateEcommerceSite();
931
+ } else if (siteType === 'blog') {
932
+ siteContent = generateBlogSite();
933
+ } else if (siteType === 'portfolio') {
934
+ siteContent = generatePortfolioSite();
935
+ } else if (siteType === 'community') {
936
+ siteContent = generateCommunitySite();
937
+ } else if (siteType === 'education') {
938
+ siteContent = generateEducationSite();
939
+ } else if (siteType === 'event') {
940
+ siteContent = generateEventSite();
941
+ } else {
942
+ siteContent = generateGenericSite();
943
+ }
944
+
945
+ generatedSite.innerHTML = siteContent;
946
+ }, 3000);
947
+ });
948
+
949
+ closeModal.addEventListener('click', function() {
950
+ resultsModal.classList.add('hidden');
951
+ // Reset the generated site content
952
+ generatedSite.innerHTML = `
953
+ <div class="text-center py-8">
954
+ <div class="loading-dots">
955
+ <span></span>
956
+ <span></span>
957
+ <span></span>
958
+ </div>
959
+ <p class="mt-4 text-gray-600">Génération de votre site en cours...</p>
960
+ </div>
961
+ `;
962
+ });
963
+
964
+ // Site generation functions
965
+ function generateEcommerceSite() {
966
+ return `
967
+ <div class="max-w-6xl mx-auto">
968
+ <!-- Header -->
969
+ <header class="bg-white shadow-sm">
970
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
971
+ <div class="text-2xl font-bold text-blue-600">Ma Boutique en Ligne</div>
972
+ <nav class="hidden md:flex space-x-8">
973
+ <a href="#" class="text-gray-800 hover:text-blue-600">Accueil</a>
974
+ <a href="#" class="text-gray-800 hover:text-blue-600">Boutique</a>
975
+ <a href="#" class="text-gray-800 hover:text-blue-600">Nouveautés</a>
976
+ <a href="#" class="text-gray-800 hover:text-blue-600">Contact</a>
977
+ </nav>
978
+ <div class="flex items-center space-x-4">
979
+ <button class="text-gray-800 hover:text-blue-600">
980
+ <i class="fas fa-search"></i>
981
+ </button>
982
+ <button class="text-gray-800 hover:text-blue-600 relative">
983
+ <i class="fas fa-shopping-cart"></i>
984
+ <span class="absolute -top-2 -right-2 bg-blue-600 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full">3</span>
985
+ </button>
986
+ </div>
987
+ </div>
988
+ </header>
989
+
990
+ <!-- Hero Section -->
991
+ <section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-16">
992
+ <div class="container mx-auto px-6 text-center">
993
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Nouvelle Collection</h1>
994
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Découvrez nos produits exclusifs avec des réductions allant jusqu'à 30%</p>
995
+ <button class="bg-white text-blue-600 font-bold px-8 py-3 rounded-lg hover:bg-gray-100 transition duration-300">
996
+ Acheter maintenant
997
+ </button>
998
+ </div>
999
+ </section>
1000
+
1001
+ <!-- Featured Products -->
1002
+ <section class="py-16">
1003
+ <div class="container mx-auto px-6">
1004
+ <h2 class="text-3xl font-bold mb-12 text-center">Produits Populaires</h2>
1005
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
1006
+ <!-- Product 1 -->
1007
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
1008
+ <div class="bg-gray-100 h-48 flex items-center justify-center">
1009
+ <i class="fas fa-tshirt text-6xl text-gray-400"></i>
1010
+ </div>
1011
+ <div class="p-4">
1012
+ <h3 class="text-lg font-bold mb-2">T-shirt Premium</h3>
1013
+ <div class="flex justify-between items-center mb-2">
1014
+ <span class="text-blue-600 font-bold">29,99€</span>
1015
+ <span class="text-sm text-gray-500 line-through">39,99€</span>
1016
+ </div>
1017
+ <button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition duration-300">
1018
+ Ajouter au panier
1019
+ </button>
1020
+ </div>
1021
+ </div>
1022
+
1023
+ <!-- Product 2 -->
1024
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
1025
+ <div class="bg-gray-100 h-48 flex items-center justify-center">
1026
+ <i class="fas fa-headphones text-6xl text-gray-400"></i>
1027
+ </div>
1028
+ <div class="p-4">
1029
+ <h3 class="text-lg font-bold mb-2">Casque Audio</h3>
1030
+ <div class="flex justify-between items-center mb-2">
1031
+ <span class="text-blue-600 font-bold">89,99€</span>
1032
+ <span class="text-sm text-gray-500 line-through">109,99€</span>
1033
+ </div>
1034
+ <button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition duration-300">
1035
+ Ajouter au panier
1036
+ </button>
1037
+ </div>
1038
+ </div>
1039
+
1040
+ <!-- Product 3 -->
1041
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
1042
+ <div class="bg-gray-100 h-48 flex items-center justify-center">
1043
+ <i class="fas fa-laptop text-6xl text-gray-400"></i>
1044
+ </div>
1045
+ <div class="p-4">
1046
+ <h3 class="text-lg font-bold mb-2">Ordinateur Portable</h3>
1047
+ <div class="flex justify-between items-center mb-2">
1048
+ <span class="text-blue-600 font-bold">899,99€</span>
1049
+ <span class="text-sm text-gray-500 line-through">999,99€</span>
1050
+ </div>
1051
+ <button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition duration-300">
1052
+ Ajouter au panier
1053
+ </button>
1054
+ </div>
1055
+ </div>
1056
+
1057
+ <!-- Product 4 -->
1058
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
1059
+ <div class="bg-gray-100 h-48 flex items-center justify-center">
1060
+ <i class="fas fa-shoe-prints text-6xl text-gray-400"></i>
1061
+ </div>
1062
+ <div class="p-4">
1063
+ <h3 class="text-lg font-bold mb-2">Chaussures Sport</h3>
1064
+ <div class="flex justify-between items-center mb-2">
1065
+ <span class="text-blue-600 font-bold">59,99€</span>
1066
+ <span class="text-sm text-gray-500 line-through">79,99€</span>
1067
+ </div>
1068
+ <button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition duration-300">
1069
+ Ajouter au panier
1070
+ </button>
1071
+ </div>
1072
+ </div>
1073
+ </div>
1074
+ </div>
1075
+ </section>
1076
+
1077
+ <!-- Footer -->
1078
+ <footer class="bg-gray-800 text-white py-8">
1079
+ <div class="container mx-auto px-6">
1080
+ <div class="flex flex-col md:flex-row justify-between items-center">
1081
+ <div class="mb-4 md:mb-0">
1082
+ <div class="text-xl font-bold">Ma Boutique en Ligne</div>
1083
+ <p class="text-gray-400">Paris, France</p>
1084
+ </div>
1085
+ <div class="flex space-x-6">
1086
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
1087
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
1088
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
1089
+ </div>
1090
+ </div>
1091
+ <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
1092
+ © 2023 Ma Boutique en Ligne. Tous droits réservés.
1093
+ </div>
1094
+ </div>
1095
+ </footer>
1096
+ </div>
1097
+ `;
1098
+ }
1099
+
1100
+ function generateBlogSite() {
1101
+ return `
1102
+ <div class="max-w-6xl mx-auto">
1103
+ <!-- Header -->
1104
+ <header class="bg-white shadow-sm">
1105
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
1106
+ <div class="text-2xl font-bold text-purple-600">Mon Blog</div>
1107
+ <nav class="hidden md:flex space-x-8">
1108
+ <a href="#" class="text-gray-800 hover:text-purple-600">Accueil</a>
1109
+ <a href="#" class="text-gray-800 hover:text-purple-600">Catégories</a>
1110
+ <a href="#" class="text-gray-800 hover:text-purple-600">À propos</a>
1111
+ <a href="#" class="text-gray-800 hover:text-purple-600">Contact</a>
1112
+ </nav>
1113
+ <button class="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition duration-300">
1114
+ S'abonner
1115
+ </button>
1116
+ </div>
1117
+ </header>
1118
+
1119
+ <!-- Hero Section -->
1120
+ <section class="bg-gradient-to-r from-purple-500 to-pink-600 text-white py-16">
1121
+ <div class="container mx-auto px-6 text-center">
1122
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Découvrez mes dernières pensées</h1>
1123
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Partage d'idées, réflexions et conseils sur divers sujets</p>
1124
+ <div class="max-w-md mx-auto relative">
1125
+ <input type="text" placeholder="Rechercher des articles..." class="w-full px-4 py-3 rounded-lg text-gray-800">
1126
+ <button class="absolute right-2 top-2 text-purple-600">
1127
+ <i class="fas fa-search"></i>
1128
+ </button>
1129
+ </div>
1130
+ </div>
1131
+ </section>
1132
+
1133
+ <!-- Featured Posts -->
1134
+ <section class="py-16">
1135
+ <div class="container mx-auto px-6">
1136
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
1137
+ <!-- Featured Post -->
1138
+ <div class="lg:col-span-2 bg-white rounded-xl shadow-md overflow-hidden">
1139
+ <div class="h-64 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center">
1140
+ <i class="fas fa-feather-alt text-white text-6xl"></i>
1141
+ </div>
1142
+ <div class="p-6">
1143
+ <div class="flex items-center mb-4">
1144
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Technologie</span>
1145
+ <span class="text-gray-500 text-sm ml-4">15 mai 2023</span>
1146
+ </div>
1147
+ <h2 class="text-2xl font-bold mb-4">L'avenir de l'IA dans notre quotidien</h2>
1148
+ <p class="text-gray-600 mb-4">Comment l'intelligence artificielle transforme nos vies et ce à quoi nous pouvons nous attendre dans les prochaines années...</p>
1149
+ <a href="#" class="text-purple-600 hover:text-purple-800 font-medium">
1150
+ Lire l'article <i class="fas fa-arrow-right ml-1"></i>
1151
+ </a>
1152
+ </div>
1153
+ </div>
1154
+
1155
+ <!-- Side Post -->
1156
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
1157
+ <div class="h-32 bg-gradient-to-r from-blue-400 to-blue-500 flex items-center justify-center">
1158
+ <i class="fas fa-leaf text-white text-4xl"></i>
1159
+ </div>
1160
+ <div class="p-6">
1161
+ <div class="flex items-center mb-2">
1162
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Environnement</span>
1163
+ </div>
1164
+ <h2 class="text-xl font-bold mb-2">10 façons de réduire son empreinte carbone</h2>
1165
+ <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium">
1166
+ Lire l'article <i class="fas fa-arrow-right ml-1"></i>
1167
+ </a>
1168
+ </div>
1169
+ </div>
1170
+ </div>
1171
+
1172
+ <!-- Recent Posts -->
1173
+ <h2 class="text-3xl font-bold mb-8">Articles récents</h2>
1174
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
1175
+ <!-- Post 1 -->
1176
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
1177
+ <div class="h-40 bg-gradient-to-r from-green-400 to-green-500 flex items-center justify-center">
1178
+ <i class="fas fa-utensils text-white text-4xl"></i>
1179
+ </div>
1180
+ <div class="p-4">
1181
+ <div class="flex items-center mb-2">
1182
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Cuisine</span>
1183
+ </div>
1184
+ <h3 class="text-lg font-bold mb-2">Recettes végétariennes pour débutants</h3>
1185
+ <p class="text-gray-600 text-sm mb-3">Découvrez comment préparer des plats délicieux et sains sans viande...</p>
1186
+ <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium">
1187
+ Lire l'article <i class="fas fa-arrow-right ml-1"></i>
1188
+ </a>
1189
+ </div>
1190
+ </div>
1191
+
1192
+ <!-- Post 2 -->
1193
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
1194
+ <div class="h-40 bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
1195
+ <i class="fas fa-plane text-white text-4xl"></i>
1196
+ </div>
1197
+ <div class="p-4">
1198
+ <div class="flex items-center mb-2">
1199
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Voyage</span>
1200
+ </div>
1201
+ <h3 class="text-lg font-bold mb-2">Mes destinations coup de cœur en Asie</h3>
1202
+ <p class="text-gray-600 text-sm mb-3">Retour sur les endroits les plus marquants de mon dernier périple...</p>
1203
+ <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium">
1204
+ Lire l'article <i class="fas fa-arrow-right ml-1"></i>
1205
+ </a>
1206
+ </div>
1207
+ </div>
1208
+
1209
+ <!-- Post 3 -->
1210
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300">
1211
+ <div class
1212
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ creer moi un site générateur de site identique a DeepSite ai avec une belle interface
2
+ jje veux creer des vrait site pas de site vitrine