Hugging Face's logo

Spaces:
docto41
/
cours-ai
Running

App Files Community
docto41 commited on
Commit
f7bdbf1
·
verified ·
1 Parent(s): f81aea7

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +926 -19
  3. prompts.txt +6 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cours Ai
3
- emoji: 🐢
4
  colorFrom: yellow
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cours-ai
3
+ emoji: 🐳
4
  colorFrom: yellow
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,926 @@
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>EduGenAI - Plateforme Automatique de Sites de Cours</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes float {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-10px); }
13
+ }
14
+ @keyframes fadeIn {
15
+ from { opacity: 0; transform: translateY(20px); }
16
+ to { opacity: 1; transform: translateY(0); }
17
+ }
18
+ @keyframes gradient {
19
+ 0% { background-position: 0% 50%; }
20
+ 50% { background-position: 100% 50%; }
21
+ 100% { background-position: 0% 50%; }
22
+ }
23
+ .floating { animation: float 6s ease-in-out infinite; }
24
+ .fade-in { animation: fadeIn 1s ease-out forwards; }
25
+ .gradient-bg {
26
+ background: linear-gradient(-45deg, #3b82f6, #8b5cf6, #10b981, #06b6d4);
27
+ background-size: 400% 400%;
28
+ animation: gradient 15s ease infinite;
29
+ }
30
+ .card-hover {
31
+ transition: all 0.3s ease;
32
+ }
33
+ .card-hover: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
+ .knowledge-graph {
38
+ background-image: radial-gradient(circle, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
39
+ background-size: 20px 20px;
40
+ }
41
+ .generator-preview {
42
+ background-image: linear-gradient(45deg, #f3f4f6 25%, transparent 25%), linear-gradient(-45deg, #f3f4f6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f3f4f6 75%), linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
43
+ background-size: 20px 20px;
44
+ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
45
+ }
46
+ .ai-processing::after {
47
+ content: '';
48
+ position: absolute;
49
+ top: 0;
50
+ left: -100%;
51
+ width: 100%;
52
+ height: 100%;
53
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
54
+ animation: shine 2s infinite;
55
+ }
56
+ @keyframes shine {
57
+ 100% { left: 100%; }
58
+ }
59
+ </style>
60
+ </head>
61
+ <body class="font-sans bg-gray-50 text-gray-900 min-h-screen">
62
+ <!-- Navigation -->
63
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
64
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
65
+ <div class="flex justify-between h-16 items-center">
66
+ <div class="flex items-center">
67
+ <div class="flex-shrink-0 flex items-center">
68
+ <div class="relative">
69
+ <div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-emerald-500 rounded-lg blur opacity-75"></div>
70
+ <div class="relative px-3 py-2 bg-white rounded-lg flex items-center">
71
+ <i class="fas fa-graduation-cap text-blue-500 text-xl mr-2"></i>
72
+ <span class="text-xl font-bold bg-gradient-to-r from-blue-500 to-emerald-500 bg-clip-text text-transparent">EduGenAI</span>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
77
+ <a href="#" class="border-blue-500 text-gray-900 px-1 pt-1 border-b-2 text-sm font-medium">Accueil</a>
78
+ <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-1 pt-1 border-b-2 text-sm font-medium">Générateur</a>
79
+ <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-1 pt-1 border-b-2 text-sm font-medium">Modèles</a>
80
+ <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-1 pt-1 border-b-2 text-sm font-medium">Ressources</a>
81
+ <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-1 pt-1 border-b-2 text-sm font-medium">Tarifs</a>
82
+ </div>
83
+ </div>
84
+ <div class="hidden md:ml-6 md:flex md:items-center space-x-4">
85
+ <button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-blue-500 to-emerald-500 hover:from-blue-600 hover:to-emerald-600 shadow-lg transition-all transform hover:scale-105">
86
+ <i class="fas fa-sign-in-alt mr-2"></i> Connexion
87
+ </button>
88
+ </div>
89
+ <div class="-mr-2 flex items-center md:hidden">
90
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
91
+ <span class="sr-only">Menu</span>
92
+ <i class="fas fa-bars"></i>
93
+ </button>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </nav>
98
+
99
+ <!-- Hero Section -->
100
+ <div class="relative overflow-hidden bg-white">
101
+ <div class="max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8 relative z-10">
102
+ <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
103
+ <div class="mb-12 lg:mb-0">
104
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
105
+ <span class="block bg-gradient-to-r from-blue-500 to-emerald-500 bg-clip-text text-transparent">Créez votre plateforme</span>
106
+ <span class="block text-gray-900">de cours en ligne automatiquement</span>
107
+ </h1>
108
+ <p class="mt-6 max-w-lg text-xl text-gray-500">
109
+ EduGenAI révolutionne l'éducation en ligne avec une génération automatique de sites de cours complets, personnalisés et optimisés pour l'apprentissage.
110
+ </p>
111
+ <div class="mt-10 flex flex-wrap gap-4">
112
+ <a href="#generator" class="relative group inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-blue-500 to-emerald-500 shadow-lg hover:from-blue-600 hover:to-emerald-600 transition-all transform hover:scale-105">
113
+ <span class="relative z-10">Essayer maintenant</span>
114
+ <span class="absolute inset-0 bg-gradient-to-r from-blue-600 to-emerald-600 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
115
+ </a>
116
+ <a href="#" class="relative group inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-gray-700 bg-gray-100 hover:bg-gray-200 border-gray-300 shadow-lg transition-all transform hover:scale-105">
117
+ <span class="relative z-10"><i class="fas fa-play-circle mr-2"></i> Voir la démo</span>
118
+ <span class="absolute inset-0 bg-gray-200 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
119
+ </a>
120
+ </div>
121
+ <div class="mt-8 flex items-center space-x-4">
122
+ <div class="flex -space-x-2">
123
+ <img class="h-10 w-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Utilisatrice 1">
124
+ <img class="h-10 w-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Utilisateur 2">
125
+ <img class="h-10 w-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Utilisatrice 3">
126
+ </div>
127
+ <p class="text-sm text-gray-500">
128
+ <span class="font-medium text-gray-700">+5,000</span> plateformes créées
129
+ </p>
130
+ </div>
131
+ </div>
132
+ <div class="relative">
133
+ <div class="relative rounded-2xl overflow-hidden shadow-2xl floating">
134
+ <div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 via-emerald-500/20 to-purple-500/20"></div>
135
+ <img class="w-full h-auto" src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80" alt="Plateforme de cours en ligne">
136
+ </div>
137
+ <div class="absolute -bottom-8 -left-8 w-32 h-32 bg-emerald-500 rounded-full filter blur-3xl opacity-20"></div>
138
+ <div class="absolute -top-8 -right-8 w-32 h-32 bg-blue-500 rounded-full filter blur-3xl opacity-20"></div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Generator Section -->
145
+ <div id="generator" class="py-16 bg-gray-50">
146
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
147
+ <div class="text-center mb-16">
148
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
149
+ <span class="bg-gradient-to-r from-blue-500 to-emerald-500 bg-clip-text text-transparent">Générateur Automatique</span> de Plateformes
150
+ </h2>
151
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
152
+ Créez votre site de cours complet en quelques minutes avec notre outil puissant
153
+ </p>
154
+ </div>
155
+
156
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden">
157
+ <div class="grid grid-cols-1 lg:grid-cols-2">
158
+ <!-- Generator Form -->
159
+ <div class="p-8">
160
+ <div class="space-y-6">
161
+ <div>
162
+ <label for="course-name" class="block text-sm font-medium text-gray-700">Nom de votre plateforme</label>
163
+ <input type="text" id="course-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: Ma Formation en Marketing Digital">
164
+ </div>
165
+
166
+ <div>
167
+ <label for="course-domain" class="block text-sm font-medium text-gray-700">Domaine personnalisé</label>
168
+ <div class="mt-1 flex rounded-md shadow-sm">
169
+ <input type="text" id="course-domain" class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-l-md border-gray-300 focus:ring-blue-500 focus:border-blue-500" placeholder="votredomaine">
170
+ <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">.edugenai.com</span>
171
+ </div>
172
+ </div>
173
+
174
+ <div>
175
+ <label for="course-category" class="block text-sm font-medium text-gray-700">Catégorie principale</label>
176
+ <select id="course-category" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
177
+ <option>Business & Entrepreneuriat</option>
178
+ <option>Technologie & Programmation</option>
179
+ <option>Design & Créativité</option>
180
+ <option>Marketing Digital</option>
181
+ <option>Développement Personnel</option>
182
+ <option>Langues</option>
183
+ <option>Santé & Bien-être</option>
184
+ <option>Autre</option>
185
+ </select>
186
+ </div>
187
+
188
+ <div>
189
+ <label for="course-description" class="block text-sm font-medium text-gray-700">Description</label>
190
+ <textarea id="course-description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Décrivez brièvement votre plateforme de cours"></textarea>
191
+ </div>
192
+
193
+ <div>
194
+ <label class="block text-sm font-medium text-gray-700">Fonctionnalités souhaitées</label>
195
+ <div class="mt-2 space-y-2">
196
+ <div class="flex items-start">
197
+ <div class="flex items-center h-5">
198
+ <input id="feature-video" name="feature-video" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
199
+ </div>
200
+ <div class="ml-3 text-sm">
201
+ <label for="feature-video" class="font-medium text-gray-700">Vidéos de cours</label>
202
+ </div>
203
+ </div>
204
+ <div class="flex items-start">
205
+ <div class="flex items-center h-5">
206
+ <input id="feature-quiz" name="feature-quiz" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
207
+ </div>
208
+ <div class="ml-3 text-sm">
209
+ <label for="feature-quiz" class="font-medium text-gray-700">Quiz & Évaluations</label>
210
+ </div>
211
+ </div>
212
+ <div class="flex items-start">
213
+ <div class="flex items-center h-5">
214
+ <input id="feature-certificate" name="feature-certificate" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
215
+ </div>
216
+ <div class="ml-3 text-sm">
217
+ <label for="feature-certificate" class="font-medium text-gray-700">Certificats de complétion</label>
218
+ </div>
219
+ </div>
220
+ <div class="flex items-start">
221
+ <div class="flex items-center h-5">
222
+ <input id="feature-community" name="feature-community" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
223
+ </div>
224
+ <div class="ml-3 text-sm">
225
+ <label for="feature-community" class="font-medium text-gray-700">Espace communauté</label>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <div>
232
+ <label for="course-style" class="block text-sm font-medium text-gray-700">Style visuel</label>
233
+ <div class="mt-2 flex space-x-4">
234
+ <button class="w-10 h-10 rounded-full bg-blue-500 border-2 border-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"></button>
235
+ <button class="w-10 h-10 rounded-full bg-purple-500 border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"></button>
236
+ <button class="w-10 h-10 rounded-full bg-emerald-500 border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500"></button>
237
+ <button class="w-10 h-10 rounded-full bg-red-500 border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"></button>
238
+ <button class="w-10 h-10 rounded-full bg-amber-500 border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500"></button>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="pt-4">
243
+ <button class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-blue-500 to-emerald-500 hover:from-blue-600 hover:to-emerald-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all transform hover:scale-105">
244
+ <i class="fas fa-magic mr-2"></i> Générer ma plateforme
245
+ </button>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Preview -->
251
+ <div class="bg-gray-50 p-8 border-l border-gray-200">
252
+ <div class="text-center mb-4">
253
+ <h3 class="text-lg font-medium text-gray-900">Aperçu de votre plateforme</h3>
254
+ <p class="text-sm text-gray-500">Personnalisez en temps réel</p>
255
+ </div>
256
+ <div class="generator-preview rounded-lg overflow-hidden shadow-lg border border-gray-200">
257
+ <div class="bg-white">
258
+ <!-- Header -->
259
+ <div class="bg-blue-500 px-4 py-3 flex justify-between items-center">
260
+ <div class="text-white font-bold">Ma Formation en Marketing Digital</div>
261
+ <div class="flex space-x-2">
262
+ <div class="h-3 w-3 rounded-full bg-white opacity-30"></div>
263
+ <div class="h-3 w-3 rounded-full bg-white opacity-30"></div>
264
+ <div class="h-3 w-3 rounded-full bg-white opacity-30"></div>
265
+ </div>
266
+ </div>
267
+ <!-- Nav -->
268
+ <div class="bg-blue-600 px-4 py-2 flex space-x-6">
269
+ <div class="text-white text-sm font-medium">Accueil</div>
270
+ <div class="text-white text-sm font-medium">Cours</div>
271
+ <div class="text-white text-sm font-medium">Formateurs</div>
272
+ <div class="text-white text-sm font-medium">Prix</div>
273
+ <div class="text-white text-sm font-medium">Contact</div>
274
+ </div>
275
+ <!-- Hero -->
276
+ <div class="px-6 py-8 text-center">
277
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Apprenez le Marketing Digital</h2>
278
+ <p class="text-gray-600 mb-6">Formation complète pour maîtriser les stratégies digitales</p>
279
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-md text-sm font-medium">Commencer maintenant</button>
280
+ </div>
281
+ <!-- Course grid -->
282
+ <div class="px-4 pb-6">
283
+ <div class="grid grid-cols-2 gap-4">
284
+ <div class="bg-gray-50 p-3 rounded border border-gray-200">
285
+ <div class="h-24 bg-gray-200 rounded mb-2"></div>
286
+ <h3 class="text-sm font-medium text-gray-800">Introduction</h3>
287
+ <p class="text-xs text-gray-500">3 leçons</p>
288
+ </div>
289
+ <div class="bg-gray-50 p-3 rounded border border-gray-200">
290
+ <div class="h-24 bg-gray-200 rounded mb-2"></div>
291
+ <h3 class="text-sm font-medium text-gray-800">SEO</h3>
292
+ <p class="text-xs text-gray-500">5 leçons</p>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- AI Features Section -->
305
+ <div class="py-16 bg-white">
306
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
307
+ <div class="text-center mb-16">
308
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
309
+ <span class="bg-gradient-to-r from-blue-500 to-emerald-500 bg-clip-text text-transparent">Technologie AI</span> Intégrée
310
+ </h2>
311
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
312
+ Notre intelligence artificielle optimise automatiquement votre plateforme pour l'apprentissage
313
+ </p>
314
+ </div>
315
+
316
+ <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
317
+ <!-- Feature 1 -->
318
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 fade-in" style="animation-delay: 0.1s;">
319
+ <div class="flex items-center justify-center h-14 w-14 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 text-white text-xl mb-4">
320
+ <i class="fas fa-brain"></i>
321
+ </div>
322
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Génération Automatique de Contenu</h3>
323
+ <p class="text-gray-500">
324
+ Notre AI crée automatiquement des structures de cours, des descriptions et des ressources pédagogiques basées sur votre sujet.
325
+ </p>
326
+ </div>
327
+
328
+ <!-- Feature 2 -->
329
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 fade-in" style="animation-delay: 0.2s;">
330
+ <div class="flex items-center justify-center h-14 w-14 rounded-full bg-gradient-to-br from-purple-500 to-purple-600 text-white text-xl mb-4">
331
+ <i class="fas fa-robot"></i>
332
+ </div>
333
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Optimisation Pédagogique</h3>
334
+ <p class="text-gray-500">
335
+ L'AI analyse et suggère les meilleures méthodes d'enseignement pour votre public cible.
336
+ </p>
337
+ </div>
338
+
339
+ <!-- Feature 3 -->
340
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 fade-in" style="animation-delay: 0.3s;">
341
+ <div class="flex items-center justify-center h-14 w-14 rounded-full bg-gradient-to-br from-emerald-500 to-emerald-600 text-white text-xl mb-4">
342
+ <i class="fas fa-project-diagram"></i>
343
+ </div>
344
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Structure Intelligente</h3>
345
+ <p class="text-gray-500">
346
+ Organisation automatique des modules et leçons pour un parcours d'apprentissage optimal.
347
+ </p>
348
+ </div>
349
+
350
+ <!-- Feature 4 -->
351
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 fade-in" style="animation-delay: 0.4s;">
352
+ <div class="flex items-center justify-center h-14 w-14 rounded-full bg-gradient-to-br from-amber-500 to-amber-600 text-white text-xl mb-4">
353
+ <i class="fas fa-chart-line"></i>
354
+ </div>
355
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Analytiques Avancées</h3>
356
+ <p class="text-gray-500">
357
+ Suivi des performances des étudiants et suggestions d'amélioration pour vos cours.
358
+ </p>
359
+ </div>
360
+
361
+ <!-- Feature 5 -->
362
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 fade-in" style="animation-delay: 0.5s;">
363
+ <div class="flex items-center justify-center h-14 w-14 rounded-full bg-gradient-to-br from-cyan-500 to-cyan-600 text-white text-xl mb-4">
364
+ <i class="fas fa-language"></i>
365
+ </div>
366
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Traduction Automatique</h3>
367
+ <p class="text-gray-500">
368
+ Proposez vos cours en plusieurs langues avec notre système de traduction intégré.
369
+ </p>
370
+ </div>
371
+
372
+ <!-- Feature 6 -->
373
+ <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden p-6 fade-in" style="animation-delay: 0.6s;">
374
+ <div class="flex items-center justify-center h-14 w-14 rounded-full bg-gradient-to-br from-indigo-500 to-indigo-600 text-white text-xl mb-4">
375
+ <i class="fas fa-graduation-cap"></i>
376
+ </div>
377
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Tutorat AI</h3>
378
+ <p class="text-gray-500">
379
+ Un assistant pédagogique virtuel pour répondre aux questions de vos étudiants 24/7.
380
+ </p>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <!-- Templates Section -->
387
+ <div class="py-16 bg-gradient-to-br from-blue-50 to-emerald-50">
388
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
389
+ <div class="text-center mb-16">
390
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
391
+ <span class="bg-gradient-to-r from-blue-500 to-emerald-500 bg-clip-text text-transparent">Modèles Professionnels</span> Préconçus
392
+ </h2>
393
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
394
+ Choisissez parmi nos templates optimisés pour différents types de formations
395
+ </p>
396
+ </div>
397
+
398
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
399
+ <!-- Template 1 -->
400
+ <div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden fade-in" style="animation-delay: 0.1s;">
401
+ <div class="h-48 bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center">
402
+ <i class="fas fa-laptop-code text-white text-6xl"></i>
403
+ </div>
404
+ <div class="p-6">
405
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Formation Technique</h3>
406
+ <p class="text-gray-500 text-sm mb-4">Parfait pour les cours de programmation, data science et technologies</p>
407
+ <button class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
408
+ Utiliser ce modèle
409
+ </button>
410
+ </div>
411
+ </div>
412
+
413
+ <!-- Template 2 -->
414
+ <div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden fade-in" style="animation-delay: 0.2s;">
415
+ <div class="h-48 bg-gradient-to-r from-purple-400 to-purple-600 flex items-center justify-center">
416
+ <i class="fas fa-briefcase text-white text-6xl"></i>
417
+ </div>
418
+ <div class="p-6">
419
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Business & Entrepreneuriat</h3>
420
+ <p class="text-gray-500 text-sm mb-4">Optimisé pour les formations en management, marketing et finance</p>
421
+ <button class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-500 hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
422
+ Utiliser ce modèle
423
+ </button>
424
+ </div>
425
+ </div>
426
+
427
+ <!-- Template 3 -->
428
+ <div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden fade-in" style="animation-delay: 0.3s;">
429
+ <div class="h-48 bg-gradient-to-r from-emerald-400 to-emerald-600 flex items-center justify-center">
430
+ <i class="fas fa-paint-brush text-white text-6xl"></i>
431
+ </div>
432
+ <div class="p-6">
433
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Design & Créativité</h3>
434
+ <p class="text-gray-500 text-sm mb-4">Idéal pour les cours de design, photographie et arts créatifs</p>
435
+ <button class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-500 hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
436
+ Utiliser ce modèle
437
+ </button>
438
+ </div>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="mt-12 text-center">
443
+ <button class="px-6 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white shadow-lg hover:bg-gray-50 transition-all transform hover:scale-105">
444
+ <i class="fas fa-ellipsis-h mr-2"></i> Voir tous les modèles (12+)
445
+ </button>
446
+ </div>
447
+ </div>
448
+ </div>
449
+
450
+ <!-- Integration Section -->
451
+ <div class="py-16 bg-white">
452
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
453
+ <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
454
+ <div class="mb-12 lg:mb-0">
455
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
456
+ <span class="bg-gradient-to-r from-blue-500 to-emerald-500 bg-clip-text text-transparent">Intégrations</span> Puissantes
457
+ </h2>
458
+ <p class="mt-4 text-lg text-gray-500">
459
+ Connectez votre plateforme aux outils que vous utilisez déjà
460
+ </p>
461
+ <div class="mt-8 space-y-6">
462
+ <div class="flex items-start">
463
+ <div class="flex-shrink-0">
464
+ <div class="flex items-center justify-center h-8 w-8 rounded-full bg-blue-100 text-blue-600">
465
+ <i class="fab fa-google"></i>
466
+ </div>
467
+ </div>
468
+ <div class="ml-4">
469
+ <p class="text-base font-medium text-gray-900">Google Classroom</p>
470
+ <p class="mt-1 text-sm text-gray-500">Synchronisez vos cours avec Google Classroom</p>
471
+ </div>
472
+ </div>
473
+ <div class="flex items-start">
474
+ <div class="flex-shrink-0">
475
+ <div class="flex items-center justify-center h-8 w-8 rounded-full bg-blue-100 text-blue-600">
476
+ <i class="fab fa-youtube"></i>
477
+ </div>
478
+ </div>
479
+ <div class="ml-4">
480
+ <p class="text-base font-medium text-gray-900">YouTube & Vimeo</p>
481
+ <p class="mt-1 text-sm text-gray-500">Intégrez facilement vos vidéos existantes</p>
482
+ </div>
483
+ </div>
484
+ <div class="flex items-start">
485
+ <div class="flex-shrink-0">
486
+ <div class="flex items-center justify-center h-8 w-8 rounded-full bg-blue-100 text-blue-600">
487
+ <i class="fab fa-stripe"></i>
488
+ </div>
489
+ </div>
490
+ <div class="ml-4">
491
+ <p class="text-base font-medium text-gray-900">Stripe & PayPal</p>
492
+ <p class="mt-1 text-sm text-gray-500">Système de paiement intégré pour monétiser vos cours</p>
493
+ </div>
494
+ </div>
495
+ <div class="flex items-start">
496
+ <div class="flex-shrink-0">
497
+ <div class="flex items-center justify-center h-8 w-8 rounded-full bg-blue-100 text-blue-600">
498
+ <i class="fas fa-envelope"></i>
499
+ </div>
500
+ </div>
501
+ <div class="ml-4">
502
+ <p class="text-base font-medium text-gray-900">Mailchimp & SendGrid</p>
503
+ <p class="mt-1 text-sm text-gray-500">Automatisez vos emails marketing</p>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ <div class="relative">
509
+ <div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden p-6">
510
+ <div class="flex flex-wrap gap-4">
511
+ <div class="flex items-center justify-center h-16 w-16 rounded-lg bg-white shadow-sm border border-gray-200">
512
+ <i class="fab fa-google text-2xl text-blue-500"></i>
513
+ </div>
514
+ <div class="flex items-center justify-center h-16 w-16 rounded-lg bg-white shadow-sm border border-gray-200">
515
+ <i class="fab fa-youtube text-2xl text-red-500"></i>
516
+ </div>
517
+ <div class="flex items-center justify-center h-16 w-16 rounded-lg bg-white shadow-sm border border-gray-200">
518
+ <i class="fab fa-stripe text-2xl text-purple-500"></i>
519
+ </div>
520
+ <div class="flex items-center justify-center h-16 w-16 rounded-lg bg-white shadow-sm border border-gray-200">
521
+ <i class="fab fa-paypal text-2xl text-blue-700"></i>
522
+ </div>
523
+ <div class="flex items-center justify-center h-16 w-16 rounded-lg bg-white shadow-sm border border-gray-200">
524
+ <i class="fab fa-mailchimp text-2xl text-amber-500"></i>
525
+ </div>
526
+ <div class="flex items-center justify-center h-16 w-16 rounded-lg bg-white shadow-sm border border-gray-200">
527
+ <i class="fab fa-slack text-2xl text-purple-400"></i>
528
+ </div>
529
+ <div class="flex items-center justify-center h-16 w-16 rounded-lg bg-white shadow-sm border border-gray-200">
530
+ <i class="fab fa-zoom text-2xl text-blue-400"></i>
531
+ </div>
532
+ <div class="flex items-center justify-center h-16 w-16 rounded-lg bg-white shadow-sm border border-gray-200">
533
+ <i class="fas fa-plus text-2xl text-gray-400"></i>
534
+ </div>
535
+ </div>
536
+ <div class="mt-8 bg-white rounded-lg shadow-sm border border-gray-200 p-4">
537
+ <div class="flex items-center">
538
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500">
539
+ <i class="fas fa-plug"></i>
540
+ </div>
541
+ <div class="ml-4">
542
+ <h3 class="text-lg font-medium text-gray-900">API Personnalisée</h3>
543
+ <p class="text-sm text-gray-500">Connectez vos propres outils via notre API complète</p>
544
+ </div>
545
+ </div>
546
+ <div class="mt-4">
547
+ <button class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
548
+ <i class="fas fa-code mr-2"></i> Documentation API
549
+ </button>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </div>
557
+
558
+ <!-- Pricing Section -->
559
+ <div class="py-16 bg-gray-50">
560
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
561
+ <div class="text-center mb-16">
562
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
563
+ <span class="bg-gradient-to-r from-blue-500 to-emerald-500 bg-clip-text text-transparent">Tarifs Simples</span> et Transparents
564
+ </h2>
565
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
566
+ Choisissez le plan qui correspond à vos besoins
567
+ </p>
568
+ </div>
569
+
570
+ <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
571
+ <!-- Basic Plan -->
572
+ <div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden fade-in" style="animation-delay: 0.1s;">
573
+ <div class="px-6 py-8">
574
+ <h3 class="text-lg font-medium text-gray-900">Starter</h3>
575
+ <div class="mt-4 flex items-baseline">
576
+ <span class="text-4xl font-extrabold text-gray-900">€19</span>
577
+ <span class="ml-1 text-lg font-medium text-gray-500">/mois</span>
578
+ </div>
579
+ <p class="mt-4 text-sm text-gray-500">
580
+ Parfait pour commencer avec une seule plateforme
581
+ </p>
582
+ <div class="mt-6">
583
+ <ul class="space-y-3">
584
+ <li class="flex items-center">
585
+ <i class="fas fa-check text-green-500 mr-2"></i>
586
+ <span class="text-sm text-gray-700">1 plateforme de cours</span>
587
+ </li>
588
+ <li class="flex items-center">
589
+ <i class="fas fa-check text-green-500 mr-2"></i>
590
+ <span class="text-sm text-gray-700">Jusqu'à 50 étudiants</span>
591
+ </li>
592
+ <li class="flex items-center">
593
+ <i class="fas fa-check text-green-500 mr-2"></i>
594
+ <span class="text-sm text-gray-700">10 Go de stockage</span>
595
+ </li>
596
+ <li class="flex items-center">
597
+ <i class="fas fa-check text-green-500 mr-2"></i>
598
+ <span class="text-sm text-gray-700">Support de base</span>
599
+ </li>
600
+ </ul>
601
+ </div>
602
+ <div class="mt-8">
603
+ <button class="w-full py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
604
+ Choisir ce plan
605
+ </button>
606
+ </div>
607
+ </div>
608
+ </div>
609
+
610
+ <!-- Pro Plan (Featured) -->
611
+ <div class="card-hover bg-white rounded-xl shadow-xl overflow-hidden transform scale-105 relative fade-in" style="animation-delay: 0.2s;">
612
+ <div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
613
+ Le plus populaire
614
+ </div>
615
+ <div class="px-6 py-8">
616
+ <h3 class="text-lg font-medium text-gray-900">Pro</h3>
617
+ <div class="mt-4 flex items-baseline">
618
+ <span class="text-4xl font-extrabold text-gray-900">€49</span>
619
+ <span class="ml-1 text-lg font-medium text-gray-500">/mois</span>
620
+ </div>
621
+ <p class="mt-4 text-sm text-gray-500">
622
+ Idéal pour les formateurs et petites entreprises
623
+ </p>
624
+ <div class="mt-6">
625
+ <ul class="space-y-3">
626
+ <li class="flex items-center">
627
+ <i class="fas fa-check text-green-500 mr-2"></i>
628
+ <span class="text-sm text-gray-700">3 plateformes de cours</span>
629
+ </li>
630
+ <li class="flex items-center">
631
+ <i class="fas fa-check text-green-500 mr-2"></i>
632
+ <span class="text-sm text-gray-700">Jusqu'à 500 étudiants</span>
633
+ </li>
634
+ <li class="flex items-center">
635
+ <i class="fas fa-check text-green-500 mr-2"></i>
636
+ <span class="text-sm text-gray-700">50 Go de stockage</span>
637
+ </li>
638
+ <li class="flex items-center">
639
+ <i class="fas fa-check text-green-500 mr-2"></i>
640
+ <span class="text-sm text-gray-700">Support prioritaire</span>
641
+ </li>
642
+ <li class="flex items-center">
643
+ <i class="fas fa-check text-green-500 mr-2"></i>
644
+ <span class="text-sm text-gray-700">Certificats personnalisés</span>
645
+ </li>
646
+ </ul>
647
+ </div>
648
+ <div class="mt-8">
649
+ <button class="w-full py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-blue-500 to-emerald-500 hover:from-blue-600 hover:to-emerald-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
650
+ Choisir ce plan
651
+ </button>
652
+ </div>
653
+ </div>
654
+ </div>
655
+
656
+ <!-- Enterprise Plan -->
657
+ <div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden fade-in" style="animation-delay: 0.3s;">
658
+ <div class="px-6 py-8">
659
+ <h3 class="text-lg font-medium text-gray-900">Enterprise</h3>
660
+ <div class="mt-4 flex items-baseline">
661
+ <span class="text-4xl font-extrabold text-gray-900">€149</span>
662
+ <span class="ml-1 text-lg font-medium text-gray-500">/mois</span>
663
+ </div>
664
+ <p class="mt-4 text-sm text-gray-500">
665
+ Solution complète pour les grandes organisations
666
+ </p>
667
+ <div class="mt-6">
668
+ <ul class="space-y-3">
669
+ <li class="flex items-center">
670
+ <i class="fas fa-check text-green-500 mr-2"></i>
671
+ <span class="text-sm text-gray-700">Plateformes illimitées</span>
672
+ </li>
673
+ <li class="flex items-center">
674
+ <i class="fas fa-check text-green-500 mr-2"></i>
675
+ <span class="text-sm text-gray-700">Étudiants illimités</span>
676
+ </li>
677
+ <li class="flex items-center">
678
+ <i class="fas fa-check text-green-500 mr-2"></i>
679
+ <span class="text-sm text-gray-700">200 Go de stockage</span>
680
+ </li>
681
+ <li class="flex items-center">
682
+ <i class="fas fa-check text-green-500 mr-2"></i>
683
+ <span class="text-sm text-gray-700">Support 24/7</span>
684
+ </li>
685
+ <li class="flex items-center">
686
+ <i class="fas fa-check text-green-500 mr-2"></i>
687
+ <span class="text-sm text-gray-700">SSO & API complète</span>
688
+ </li>
689
+ </ul>
690
+ </div>
691
+ <div class="mt-8">
692
+ <button class="w-full py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
693
+ Choisir ce plan
694
+ </button>
695
+ </div>
696
+ </div>
697
+ </div>
698
+ </div>
699
+
700
+ <div class="mt-12 text-center">
701
+ <p class="text-gray-500">
702
+ Vous avez des besoins spécifiques ? <a href="#" class="text-blue-500 hover:text-blue-600 font-medium">Contactez notre équipe</a> pour une solution personnalisée.
703
+ </p>
704
+ </div>
705
+ </div>
706
+ </div>
707
+
708
+ <!-- Testimonials Section -->
709
+ <div class="py-16 bg-white">
710
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
711
+ <div class="text-center mb-16">
712
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
713
+ Ils utilisent déjà <span class="bg-gradient-to-r from-blue-500 to-emerald-500 bg-clip-text text-transparent">EduGenAI</span>
714
+ </h2>
715
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
716
+ Découvrez ce que nos clients disent de notre plateforme
717
+ </p>
718
+ </div>
719
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
720
+ <!-- Testimonial 1 -->
721
+ <div class="card-hover bg-gray-50 rounded-xl shadow-md overflow-hidden p-6 fade-in" style="animation-delay: 0.1s;">
722
+ <div class="flex items-center mb-4">
723
+ <div class="flex-shrink-0">
724
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J.">
725
+ </div>
726
+ <div class="ml-4">
727
+ <h4 class="text-sm font-medium text-gray-900">Marie L.</h4>
728
+ <p class="text-xs text-gray-500">Formatrice en Design</p>
729
+ </div>
730
+ </div>
731
+ <p class="text-gray-600 text-sm">
732
+ "J'ai pu créer ma plateforme de cours en moins d'une heure sans aucune connaissance technique. Les étudiants adorent l'interface moderne et intuitive."
733
+ </p>
734
+ <div class="mt-4 pt-4 border-t border-gray-200">
735
+ <div class="flex text-yellow-400 text-xs">
736
+ <i class="fas fa-star"></i>
737
+ <i class="fas fa-star"></i>
738
+ <i class="fas fa-star"></i>
739
+ <i class="fas fa-star"></i>
740
+ <i class="fas fa-star"></i>
741
+ </div>
742
+ </div>
743
+ </div>
744
+
745
+ <!-- Testimonial 2 -->
746
+ <div class="card-hover bg-gray-50 rounded-xl shadow-md overflow-hidden p-6 fade-in" style="animation-delay: 0.2s;">
747
+ <div class="flex items-center mb-4">
748
+ <div class="flex-shrink-0">
749
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt="Michael T.">
750
+ </div>
751
+ <div class="ml-4">
752
+ <h4 class="text-sm font-medium text-gray-900">Thomas D.</h4>
753
+ <p class="text-xs text-gray-500">Centre de Formation</p>
754
+ </div>
755
+ </div>
756
+ <p class="text-gray-600 text-sm">
757
+ "Nous avons migré toutes nos formations vers EduGenAI. L'économie de temps et d'argent est considérable, et nos taux de complétion ont augmenté de 30%."
758
+ </p>
759
+ <div class="mt-4 pt-4 border-t border-gray-200">
760
+ <div class="flex text-yellow-400 text-xs">
761
+ <i class="fas fa-star"></i>
762
+ <i class="fas fa-star"></i>
763
+ <i class="fas fa-star"></i>
764
+ <i class="fas fa-star"></i>
765
+ <i class="fas fa-star"></i>
766
+ </div>
767
+ </div>
768
+ </div>
769
+
770
+ <!-- Testimonial 3 -->
771
+ <div class="card-hover bg-gray-50 rounded-xl shadow-md overflow-hidden p-6 fade-in" style="animation-delay: 0.3s;">
772
+ <div class="flex items-center mb-4">
773
+ <div class="flex-shrink-0">
774
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya K.">
775
+ </div>
776
+ <div class="ml-4">
777
+ <h4 class="text-sm font-medium text-gray-900">Sophie M.</h4>
778
+ <p class="text-xs text-gray-500">Université</p>
779
+ </div>
780
+ </div>
781
+ <p class="text-gray-600 text-sm">
782
+ "L'outil de génération automatique de contenu est révolutionnaire. Nous avons pu créer des centaines de cours en ligne en quelques semaines seulement."
783
+ </p>
784
+ <div class="mt-4 pt-4 border-t border-gray-200">
785
+ <div class="flex text-yellow-400 text-xs">
786
+ <i class="fas fa-star"></i>
787
+ <i class="fas fa-star"></i>
788
+ <i class="fas fa-star"></i>
789
+ <i class="fas fa-star"></i>
790
+ <i class="fas fa-star-half-alt"></i>
791
+ </div>
792
+ </div>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ </div>
797
+
798
+ <!-- CTA Section -->
799
+ <div class="gradient-bg">
800
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center">
801
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
802
+ <span class="block">Prêt à lancer votre plateforme</span>
803
+ <span class="block">de cours en ligne ?</span>
804
+ </h2>
805
+ <p class="mt-6 max-w-2xl text-xl text-blue-100 mx-auto">
806
+ Essayez EduGenAI gratuitement pendant 14 jours. Aucune carte de crédit requise.
807
+ </p>
808
+ <div class="mt-10 flex justify-center space-x-4">
809
+ <a href="#generator" class="relative group inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white shadow-lg hover:bg-blue-50 transition-all transform hover:scale-105">
810
+ <span class="relative z-10">Commencer gratuitement</span>
811
+ <span class="absolute inset-0 bg-blue-50 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
812
+ </a>
813
+ <a href="#" class="relative group inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 bg-opacity-80 hover:bg-opacity-90 shadow-lg transition-all transform hover:scale-105">
814
+ <span class="relative z-10"><i class="fas fa-envelope mr-2"></i> Nous contacter</span>
815
+ <span class="absolute inset-0 bg-blue-700 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
816
+ </a>
817
+ </div>
818
+ </div>
819
+ </div>
820
+
821
+ <!-- Footer -->
822
+ <footer class="bg-gray-800">
823
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
824
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
825
+ <div>
826
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">EduGenAI</h3>
827
+ <ul class="mt-4 space-y-4">
828
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">À propos</a></li>
829
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">Carrières</a></li>
830
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">Blog</a></li>
831
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">Presse</a></li>
832
+ </ul>
833
+ </div>
834
+ <div>
835
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Produits</h3>
836
+ <ul class="mt-4 space-y-4">
837
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">Générateur</a></li>
838
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">Modèles</a></li>
839
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">AI Tutor</a></li>
840
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">Entreprise</a></li>
841
+ </ul>
842
+ </div>
843
+ <div>
844
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Ressources</h3>
845
+ <ul class="mt-4 space-y-4">
846
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">Documentation</a></li>
847
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">Guides</a></li>
848
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">Webinaires</a></li>
849
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">Centre d'aide</a></li>
850
+ </ul>
851
+ </div>
852
+ <div>
853
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Légal</h3>
854
+ <ul class="mt-4 space-y-4">
855
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">Confidentialité</a></li>
856
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">Conditions</a></li>
857
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">Sécurité</a></li>
858
+ <li><a href="#" class="text-base text-gray-300 hover:text-white transition-colors">Cookies</a></li>
859
+ </ul>
860
+ </div>
861
+ </div>
862
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
863
+ <div class="flex space-x-6 md:order-2">
864
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
865
+ <span class="sr-only">Facebook</span>
866
+ <i class="fab fa-facebook-f"></i>
867
+ </a>
868
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
869
+ <span class="sr-only">Twitter</span>
870
+ <i class="fab fa-twitter"></i>
871
+ </a>
872
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
873
+ <span class="sr-only">Instagram</span>
874
+ <i class="fab fa-instagram"></i>
875
+ </a>
876
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
877
+ <span class="sr-only">LinkedIn</span>
878
+ <i class="fab fa-linkedin-in"></i>
879
+ </a>
880
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
881
+ <span class="sr-only">YouTube</span>
882
+ <i class="fab fa-youtube"></i>
883
+ </a>
884
+ </div>
885
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
886
+ &copy; 2023 EduGenAI. Tous droits réservés.
887
+ </p>
888
+ </div>
889
+ </div>
890
+ </footer>
891
+
892
+ <!-- Floating action button -->
893
+ <div class="fixed bottom-8 right-8 z-50">
894
+ <button class="floating bg-gradient-to-br from-blue-500 to-emerald-500 hover:from-blue-600 hover:to-emerald-600 text-white rounded-full p-4 shadow-2xl transition-all transform hover:scale-110">
895
+ <i class="fas fa-comment-dots text-xl"></i>
896
+ </button>
897
+ </div>
898
+
899
+ <script>
900
+ // Animate elements when they come into view
901
+ document.addEventListener('DOMContentLoaded', function() {
902
+ const observer = new IntersectionObserver((entries) => {
903
+ entries.forEach(entry => {
904
+ if (entry.isIntersecting) {
905
+ entry.target.classList.add('fade-in');
906
+ }
907
+ });
908
+ }, {threshold: 0.1});
909
+
910
+ document.querySelectorAll('.fade-in').forEach(element => {
911
+ observer.observe(element);
912
+ });
913
+
914
+ // Simple form interaction for the generator
915
+ const courseNameInput = document.getElementById('course-name');
916
+ const previewTitle = document.querySelector('.generator-preview .text-2xl');
917
+
918
+ courseNameInput.addEventListener('input', function() {
919
+ if (previewTitle && this.value) {
920
+ previewTitle.textContent = this.value;
921
+ }
922
+ });
923
+ });
924
+ </script>
925
+ <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/cours-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
926
+ </html>
prompts.txt ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
 
1
+ Créateur de sites Web Créez rapidement des sites Web d’entreprise. Personnalisez la conception par glisser-déposer. Lancez facilement des boutiques en ligne. avec une tres belle interface animé
2
+ creer moi un market place tout services avec tres belle interface animé
3
+ creer moi un generateur de market place tout service alimenté automatique par plussieur assistant IA AVEC UNE INTERFACE TRES BELLE ET TRES ANIME
4
+ https://huggingface.co/spaces/docto41/edugenai
5
+ https://huggingface.co/spaces/docto41/edugenai
6
+ CREER LE PLUS GROS PLATE FORME DE SITE DE GENERATEUR DES SITE DE COURS COMPLET EN LIGNE EN AUTOMATIQUE