Hugging Face's logo

Spaces:
ddakou
/
kudosia
Running

App Files Community
ddakou commited on
Commit
7bbfb1c
·
verified ·
1 Parent(s): fe5fc95

https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80 je veux les africains dans l'image - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +5 -3
  2. index.html +835 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Kudosia
3
- emoji: 📈
4
  colorFrom: pink
5
  colorTo: red
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: kudosia
3
+ emoji: 🐳
4
  colorFrom: pink
5
  colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,835 @@
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>Kudos IA - Plateforme intelligente pour bourses d'études</title>
7
+ <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style">
8
+ <link rel="preload" href="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" as="image">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ /* Loading spinner */
13
+ .loader {
14
+ border: 5px solid #f3f3f3;
15
+ border-top: 5px solid #3b82f6;
16
+ border-radius: 50%;
17
+ width: 50px;
18
+ height: 50px;
19
+ animation: spin 1s linear infinite;
20
+ position: fixed;
21
+ top: 50%;
22
+ left: 50%;
23
+ transform: translate(-50%, -50%);
24
+ z-index: 9999;
25
+ }
26
+ @keyframes spin {
27
+ 0% { transform: translate(-50%, -50%) rotate(0deg); }
28
+ 100% { transform: translate(-50%, -50%) rotate(360deg); }
29
+ }
30
+
31
+ .gradient-bg {
32
+ background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
33
+ transition: background 0.5s ease;
34
+ }
35
+ .gradient-bg:hover {
36
+ background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
37
+ }
38
+
39
+ .feature-card {
40
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
41
+ opacity: 0;
42
+ transform: translateY(20px);
43
+ will-change: transform, opacity;
44
+ }
45
+ .feature-card.animated {
46
+ opacity: 1;
47
+ transform: translateY(0);
48
+ }
49
+ .feature-card:hover {
50
+ transform: translateY(-10px) scale(1.02);
51
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
52
+ }
53
+
54
+ .pricing-card {
55
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
56
+ opacity: 0;
57
+ transform: scale(0.95);
58
+ }
59
+ .pricing-card.animated {
60
+ opacity: 1;
61
+ transform: scale(1);
62
+ }
63
+ .pricing-card:hover {
64
+ transform: scale(1.05);
65
+ }
66
+
67
+ .floating {
68
+ animation: floating 3s ease-in-out infinite;
69
+ }
70
+ @keyframes floating {
71
+ 0% { transform: translateY(0px); }
72
+ 50% { transform: translateY(-15px); }
73
+ 100% { transform: translateY(0px); }
74
+ }
75
+
76
+ @keyframes fadeIn {
77
+ from { opacity: 0; transform: translateY(20px); }
78
+ to { opacity: 1; transform: translateY(0); }
79
+ }
80
+ .animate-fadeIn {
81
+ animation: fadeIn 0.8s ease-out forwards;
82
+ }
83
+
84
+ .btn-hover {
85
+ transition: all 0.3s ease;
86
+ transform: perspective(1px) translateZ(0);
87
+ }
88
+ .btn-hover:hover {
89
+ transform: perspective(1px) translateZ(0) scale(1.05);
90
+ box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.2);
91
+ }
92
+
93
+ .text-gradient {
94
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
95
+ -webkit-background-clip: text;
96
+ background-clip: text;
97
+ color: transparent;
98
+ display: inline-block;
99
+ }
100
+ </style>
101
+ </head>
102
+ <body class="font-sans bg-gray-50">
103
+ <!-- Header -->
104
+ <header class="gradient-bg text-white">
105
+ <div class="container mx-auto px-4 py-8">
106
+ <div class="flex justify-between items-center">
107
+ <div class="flex items-center space-x-2">
108
+ <i class="fas fa-graduation-cap text-3xl"></i>
109
+ <h1 class="text-2xl font-bold">Kudos IA</h1>
110
+ </div>
111
+ <nav class="hidden md:block">
112
+ <ul class="flex space-x-8">
113
+ <li><a href="#features" class="hover:text-gray-200 transition">Fonctionnalités</a></li>
114
+ <li><a href="#formations" class="hover:text-gray-200 transition">Formations</a></li>
115
+ <li><a href="#pricing" class="hover:text-gray-200 transition">Abonnements</a></li>
116
+ <li><a href="#about" class="hover:text-gray-200 transition">À propos</a></li>
117
+ <li><a href="#contact" class="hover:text-gray-200 transition">Contact</a></li>
118
+ </ul>
119
+ </nav>
120
+ <button class="md:hidden text-2xl" id="menu-toggle">
121
+ <i class="fas fa-bars"></i>
122
+ </button>
123
+ </div>
124
+
125
+ <!-- Mobile Menu -->
126
+ <div id="mobile-menu" class="hidden md:hidden mt-4">
127
+ <ul class="space-y-4">
128
+ <li><a href="#features" class="block hover:text-gray-200 transition">Fonctionnalités</a></li>
129
+ <li><a href="#formations" class="block hover:text-gray-200 transition">Formations</a></li>
130
+ <li><a href="#pricing" class="block hover:text-gray-200 transition">Abonnements</a></li>
131
+ <li><a href="#about" class="block hover:text-gray-200 transition">À propos</a></li>
132
+ <li><a href="#contact" class="block hover:text-gray-200 transition">Contact</a></li>
133
+ </ul>
134
+ </div>
135
+
136
+ <!-- Hero Section -->
137
+ <div class="mt-16 md:mt-24 flex flex-col md:flex-row items-center">
138
+ <div class="md:w-1/2 mb-12 md:mb-0">
139
+ <h2 class="text-4xl md:text-5xl font-bold leading-tight mb-6 animate-on-scroll">
140
+ <span class="text-green-500">Votre plateforme intelligente</span> pour réussir les candidatures aux bourses
141
+ </h2>
142
+ <p class="text-xl mb-8 text-gray-200">
143
+ Mastercard Foundation et bien d'autres. Optimisez vos chances de réussite avec notre IA spécialisée.
144
+ </p>
145
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
146
+ <a href="#pricing" class="bg-white text-indigo-600 px-8 py-3 rounded-lg font-semibold text-center hover:bg-gray-100 transition">
147
+ Essai gratuit
148
+ </a>
149
+ <a href="#features" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold text-center hover:bg-white hover:text-indigo-600 transition">
150
+ En savoir plus
151
+ </a>
152
+ </div>
153
+ </div>
154
+ <div class="md:w-1/2 flex justify-center">
155
+ <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80"
156
+ alt="Étudiants africains"
157
+ class="rounded-xl shadow-2xl w-full max-w-md floating">
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </header>
162
+
163
+ <!-- Features Section -->
164
+ <section id="features" class="py-16 bg-white">
165
+ <div class="container mx-auto px-4">
166
+ <div class="text-center mb-16">
167
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">✨ Fonctionnalités Clés</h2>
168
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
169
+ Découvrez comment Kudos IA révolutionne votre processus de candidature
170
+ </p>
171
+ </div>
172
+
173
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
174
+ <!-- Feature 1 -->
175
+ <div class="feature-card bg-gray-50 p-6 rounded-xl transition duration-300">
176
+ <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center mb-4">
177
+ <i class="fas fa-search text-blue-600 text-2xl"></i>
178
+ </div>
179
+ <h3 class="text-xl font-semibold mb-3">Diagnostic Automatique</h3>
180
+ <p class="text-gray-600">
181
+ Évalue la compatibilité de votre profil avec les critères de la Mastercard Foundation et génère un feedback personnalisé.
182
+ </p>
183
+ </div>
184
+
185
+ <!-- Feature 2 -->
186
+ <div class="feature-card bg-gray-50 p-6 rounded-xl transition duration-300">
187
+ <div class="bg-green-100 w-14 h-14 rounded-full flex items-center justify-center mb-4">
188
+ <i class="fas fa-microphone text-green-600 text-2xl"></i>
189
+ </div>
190
+ <h3 class="text-xl font-semibold mb-3">Simulateur d'Entretien</h3>
191
+ <p class="text-gray-600">
192
+ Questions authentiques avec analyse des réponses orales ou écrites, détection de mots-clés et langage.
193
+ </p>
194
+ </div>
195
+
196
+ <!-- Feature 3 -->
197
+ <div class="feature-card bg-gray-50 p-6 rounded-xl transition duration-300">
198
+ <div class="bg-pink-100 w-14 h-14 rounded-full flex items-center justify-center mb-4">
199
+ <i class="fas fa-book-open text-pink-600 text-2xl"></i>
200
+ </div>
201
+ <h3 class="text-xl font-semibold mb-3">Bibliothèque de Ressources</h3>
202
+ <p class="text-gray-600">
203
+ Exemples de CV et lettres réels de boursiers admis, guides téléchargeables et webinaires exclusifs.
204
+ </p>
205
+ </div>
206
+
207
+ <!-- Feature 4 -->
208
+ <div class="feature-card bg-gray-50 p-6 rounded-xl transition duration-300">
209
+ <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center mb-4">
210
+ <i class="fas fa-users text-blue-600 text-2xl"></i>
211
+ </div>
212
+ <h3 class="text-xl font-semibold mb-3">Espace Collaboratif</h3>
213
+ <p class="text-gray-600">
214
+ Tableau de bord pour mentors avec annotation en temps réel et messagerie sécurisée intégrée.
215
+ </p>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </section>
220
+
221
+ <!-- Training Paths Section -->
222
+ <section class="py-16 bg-gray-50">
223
+ <div class="container mx-auto px-4">
224
+ <div class="text-center mb-16">
225
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">🎓 Nos Parcours de Formation</h2>
226
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
227
+ 3 programmes complets avec vidéos et certificats pour chaque étape
228
+ </p>
229
+ </div>
230
+
231
+ <div class="grid md:grid-cols-3 gap-8">
232
+ <!-- Path 1 -->
233
+ <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
234
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
235
+ <i class="fas fa-clipboard-check text-blue-600 text-2xl"></i>
236
+ </div>
237
+ <h3 class="text-xl font-bold text-center mb-4">Avant la candidature</h3>
238
+ <p class="text-gray-600 text-center mb-6">
239
+ Préparation optimale avant de postuler
240
+ </p>
241
+ <div class="text-center text-blue-600 font-medium mb-4">
242
+ <i class="fas fa-play-circle mr-1"></i> 12 vidéos + certificat
243
+ </div>
244
+ <ul class="space-y-3 text-gray-600">
245
+ <li class="flex items-start">
246
+ <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
247
+ <span>Préparation du dossier idéal</span>
248
+ </li>
249
+ <li class="flex items-start">
250
+ <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
251
+ <span>Identification des bourses pertinentes</span>
252
+ </li>
253
+ <li class="flex items-start">
254
+ <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
255
+ <span>Renforcement des compétences clés</span>
256
+ </li>
257
+ </ul>
258
+ </div>
259
+
260
+ <!-- Path 2 -->
261
+ <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
262
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
263
+ <i class="fas fa-edit text-purple-600 text-2xl"></i>
264
+ </div>
265
+ <h3 class="text-xl font-bold text-center mb-4">Pendant la candidature</h3>
266
+ <p class="text-gray-600 text-center mb-6">
267
+ Accompagnement pendant tout le processus
268
+ </p>
269
+ <div class="text-center text-purple-600 font-medium mb-4">
270
+ <i class="fas fa-play-circle mr-1"></i> 15 vidéos + certificat
271
+ </div>
272
+ <ul class="space-y-3 text-gray-600">
273
+ <li class="flex items-start">
274
+ <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
275
+ <span>Rédaction des documents percutants</span>
276
+ </li>
277
+ <li class="flex items-start">
278
+ <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
279
+ <span>Simulations d'entretien complètes</span>
280
+ </li>
281
+ <li class="flex items-start">
282
+ <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
283
+ <span>Gestion des délais et suivi</span>
284
+ </li>
285
+ </ul>
286
+ </div>
287
+
288
+ <!-- Path 3 -->
289
+ <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
290
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
291
+ <i class="fas fa-chart-line text-green-600 text-2xl"></i>
292
+ </div>
293
+ <h3 class="text-xl font-bold text-center mb-4">Après la réponse</h3>
294
+ <p class="text-gray-600 text-center mb-6">
295
+ Même en cas de refus
296
+ </p>
297
+ <div class="text-center text-green-600 font-medium mb-4">
298
+ <i class="fas fa-play-circle mr-1"></i> 8 vidéos + certificat
299
+ </div>
300
+ <ul class="space-y-3 text-gray-600">
301
+ <li class="flex items-start">
302
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
303
+ <span>Préparation à l'intégration (si accepté)</span>
304
+ </li>
305
+ <li class="flex items-start">
306
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
307
+ <span>Analyse des feedbacks (si refusé)</span>
308
+ </li>
309
+ <li class="flex items-start">
310
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
311
+ <span>Plan de reprise et alternatives</span>
312
+ </li>
313
+ </ul>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </section>
318
+
319
+ <!-- Formations Section -->
320
+ <section id="formations" class="py-16 bg-gray-50">
321
+ <div class="container mx-auto px-4">
322
+ <div class="text-center mb-16">
323
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">🎓 Parcours de Formation</h2>
324
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
325
+ 3 programmes complets avec vidéos et certificats pour chaque étape
326
+ </p>
327
+ </div>
328
+
329
+ <div class="grid md:grid-cols-3 gap-8">
330
+ <!-- Parcours 1 -->
331
+ <div class="bg-white p-8 rounded-xl shadow-lg transition duration-300 hover:shadow-xl">
332
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
333
+ <i class="fas fa-clipboard-check text-blue-600 text-2xl"></i>
334
+ </div>
335
+ <h3 class="text-xl font-bold text-center mb-4">Avant la candidature</h3>
336
+ <ul class="space-y-3 mb-6 text-gray-600">
337
+ <li class="flex items-start">
338
+ <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
339
+ <span>Préparation du dossier idéal</span>
340
+ </li>
341
+ <li class="flex items-start">
342
+ <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
343
+ <span>Identification des bourses pertinentes</span>
344
+ </li>
345
+ <li class="flex items-start">
346
+ <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
347
+ <span>Renforcement des compétences clés</span>
348
+ </li>
349
+ </ul>
350
+ <div class="text-center text-sm text-blue-600 font-medium">
351
+ <i class="fas fa-play-circle mr-1"></i> 12 vidéos + certificat
352
+ </div>
353
+ </div>
354
+
355
+ <!-- Parcours 2 -->
356
+ <div class="bg-white p-8 rounded-xl shadow-lg transition duration-300 hover:shadow-xl">
357
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
358
+ <i class="fas fa-edit text-purple-600 text-2xl"></i>
359
+ </div>
360
+ <h3 class="text-xl font-bold text-center mb-4">Pendant la candidature</h3>
361
+ <ul class="space-y-3 mb-6 text-gray-600">
362
+ <li class="flex items-start">
363
+ <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
364
+ <span>Rédaction des documents percutants</span>
365
+ </li>
366
+ <li class="flex items-start">
367
+ <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
368
+ <span>Simulations d'entretien complètes</span>
369
+ </li>
370
+ <li class="flex items-start">
371
+ <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
372
+ <span>Gestion des délais et suivi</span>
373
+ </li>
374
+ </ul>
375
+ <div class="text-center text-sm text-purple-600 font-medium">
376
+ <i class="fas fa-play-circle mr-1"></i> 15 vidéos + certificat
377
+ </div>
378
+ </div>
379
+
380
+ <!-- Parcours 3 -->
381
+ <div class="bg-white p-8 rounded-xl shadow-lg transition duration-300 hover:shadow-xl">
382
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
383
+ <i class="fas fa-chart-line text-green-600 text-2xl"></i>
384
+ </div>
385
+ <h3 class="text-xl font-bold text-center mb-4">Après la réponse</h3>
386
+ <ul class="space-y-3 mb-6 text-gray-600">
387
+ <li class="flex items-start">
388
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
389
+ <span>Préparation à l'intégration (si accepté)</span>
390
+ </li>
391
+ <li class="flex items-start">
392
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
393
+ <span>Analyse des feedbacks (si refusé)</span>
394
+ </li>
395
+ <li class="flex items-start">
396
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
397
+ <span>Plan de reprise et alternatives</span>
398
+ </li>
399
+ </ul>
400
+ <div class="text-center text-sm text-green-600 font-medium">
401
+ <i class="fas fa-play-circle mr-1"></i> 8 vidéos + certificat
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </section>
407
+
408
+ <!-- Pricing Section -->
409
+ <section id="pricing" class="py-16 bg-gray-50">
410
+ <div class="container mx-auto px-4">
411
+ <div class="text-center mb-16">
412
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">💼 Plans d'Abonnement</h2>
413
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
414
+ Choisissez le plan qui correspond à vos besoins
415
+ </p>
416
+ </div>
417
+
418
+ <div class="overflow-x-auto mb-8">
419
+ <table class="min-w-full bg-white rounded-lg overflow-hidden shadow-md">
420
+ <thead class="bg-gray-100">
421
+ <tr>
422
+ <th class="py-4 px-6 text-left">Fonctionnalité</th>
423
+ <th class="py-4 px-6 text-center">Gratuit</th>
424
+ <th class="py-4 px-6 text-center bg-blue-50">Standard<br><span class="text-lg font-semibold">25,99 $/mois</span></th>
425
+ <th class="py-4 px-6 text-center bg-green-50">Premium<br><span class="text-lg font-semibold">37,99 $/mois</span></th>
426
+ </tr>
427
+ </thead>
428
+ <tbody class="divide-y divide-gray-200">
429
+ <tr>
430
+ <td class="py-4 px-6">Analyse IA de la candidature</td>
431
+ <td class="py-4 px-6 text-center">1/mois (basique)</td>
432
+ <td class="py-4 px-6 text-center bg-indigo-50">Illimitée (détaillée)</td>
433
+ <td class="py-4 px-6 text-center bg-purple-50">Illimitée (priorité)</td>
434
+ </tr>
435
+ <tr>
436
+ <td class="py-4 px-6">Simulations d'entretien</td>
437
+ <td class="py-4 px-6 text-center">1 session (5 questions)</td>
438
+ <td class="py-4 px-6 text-center bg-indigo-50">5/mois + feedback</td>
439
+ <td class="py-4 px-6 text-center bg-purple-50">Illimitées + coaching</td>
440
+ </tr>
441
+ <tr>
442
+ <td class="py-4 px-6">Modèles de documents</td>
443
+ <td class="py-4 px-6 text-center">2 modèles de base</td>
444
+ <td class="py-4 px-6 text-center bg-indigo-50">20+ modèles</td>
445
+ <td class="py-4 px-6 text-center bg-purple-50">50+ modèles exclusifs</td>
446
+ </tr>
447
+ <tr>
448
+ <td class="py-4 px-6">Support utilisateur</td>
449
+ <td class="py-4 px-6 text-center">Email sous 72h</td>
450
+ <td class="py-4 px-6 text-center bg-indigo-50">Chat sous 24h</td>
451
+ <td class="py-4 px-6 text-center bg-purple-50">WhatsApp sous 1h</td>
452
+ </tr>
453
+ <tr>
454
+ <td class="py-4 px-6">Réduction (3 premiers mois)</td>
455
+ <td class="py-4 px-6 text-center">–</td>
456
+ <td class="py-4 px-6 text-center bg-indigo-50">-30% → 18,13 $</td>
457
+ <td class="py-4 px-6 text-center bg-purple-50">-30% → 26,59 $</td>
458
+ </tr>
459
+ </tbody>
460
+ </table>
461
+ </div>
462
+
463
+ <div class="grid md:grid-cols-3 gap-8">
464
+ <!-- Free Plan -->
465
+ <div class="pricing-card bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition duration-300">
466
+ <h3 class="text-2xl font-bold text-center mb-4">Gratuit</h3>
467
+ <p class="text-gray-500 text-center mb-6">Découvrez nos fonctionnalités de base</p>
468
+ <div class="text-center mb-6">
469
+ <span class="text-4xl font-bold">0$</span>
470
+ <span class="text-gray-500">/mois</span>
471
+ </div>
472
+ <ul class="space-y-3 mb-8">
473
+ <li class="flex items-center">
474
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
475
+ <span>1 analyse IA/mois</span>
476
+ </li>
477
+ <li class="flex items-center">
478
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
479
+ <span>1 session d'entretien</span>
480
+ </li>
481
+ <li class="flex items-center">
482
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
483
+ <span>2 modèles de documents</span>
484
+ </li>
485
+ </ul>
486
+ <button class="w-full bg-gray-200 text-gray-800 py-3 rounded-lg font-semibold hover:bg-gray-300 transition">
487
+ Commencer
488
+ </button>
489
+ </div>
490
+
491
+ <!-- Standard Plan -->
492
+ <div class="pricing-card bg-blue-50 p-8 rounded-xl shadow-lg border-2 border-blue-300 transform transition duration-300 relative">
493
+ <div class="absolute top-0 right-0 bg-blue-600 text-white px-3 py-1 text-xs font-bold rounded-bl-lg rounded-tr-lg">
494
+ POPULAIRE
495
+ </div>
496
+ <h3 class="text-2xl font-bold text-center mb-4">Standard</h3>
497
+ <p class="text-gray-700 text-center mb-6">Pour des candidatures optimisées</p>
498
+ <div class="text-center mb-6">
499
+ <span class="text-4xl font-bold">25,99$</span>
500
+ <span class="text-gray-600">/mois</span>
501
+ <p class="text-sm text-indigo-600 mt-1">18,13$ les 3 premiers mois</p>
502
+ </div>
503
+ <ul class="space-y-3 mb-8">
504
+ <li class="flex items-center">
505
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
506
+ <span>Analyses IA illimitées</span>
507
+ </li>
508
+ <li class="flex items-center">
509
+ <i class="fas fa-check-circle text-indigo-500 mr-2"></i>
510
+ <span>5 simulations/mois + feedback</span>
511
+ </li>
512
+ <li class="flex items-center">
513
+ <i class="fas fa-check-circle text-indigo-500 mr-2"></i>
514
+ <span>20+ modèles personnalisés</span>
515
+ </li>
516
+ <li class="flex items-center">
517
+ <i class="fas fa-check-circle text-indigo-500 mr-2"></i>
518
+ <span>Support chat sous 24h</span>
519
+ </li>
520
+ </ul>
521
+ <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
522
+ Essai gratuit
523
+ </button>
524
+ </div>
525
+
526
+ <!-- Premium Plan -->
527
+ <div class="pricing-card bg-green-50 p-8 rounded-xl shadow-lg border border-green-200 transition duration-300">
528
+ <h3 class="text-2xl font-bold text-center mb-4">Premium</h3>
529
+ <p class="text-gray-700 text-center mb-6">L'expérience complète</p>
530
+ <div class="text-center mb-6">
531
+ <span class="text-4xl font-bold">37,99$</span>
532
+ <span class="text-gray-600">/mois</span>
533
+ <p class="text-sm text-purple-600 mt-1">26,59$ les 3 premiers mois</p>
534
+ </div>
535
+ <ul class="space-y-3 mb-8">
536
+ <li class="flex items-center">
537
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
538
+ <span>Analyses IA prioritaires</span>
539
+ </li>
540
+ <li class="flex items-center">
541
+ <i class="fas fa-check-circle text-purple-500 mr-2"></i>
542
+ <span>Simulations illimitées + coaching</span>
543
+ </li>
544
+ <li class="flex items-center">
545
+ <i class="fas fa-check-circle text-purple-500 mr-2"></i>
546
+ <span>50+ modèles exclusifs</span>
547
+ </li>
548
+ <li class="flex items-center">
549
+ <i class="fas fa-check-circle text-purple-500 mr-2"></i>
550
+ <span>Support WhatsApp sous 1h</span>
551
+ </li>
552
+ <li class="flex items-center">
553
+ <i class="fas fa-check-circle text-purple-500 mr-2"></i>
554
+ <span>Accès aux webinaires</span>
555
+ </li>
556
+ </ul>
557
+ <button class="w-full bg-green-600 text-white py-3 rounded-lg font-semibold hover:bg-green-700 transition">
558
+ Essai gratuit
559
+ </button>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ </section>
564
+
565
+ <!-- About Section -->
566
+ <section id="about" class="py-16 bg-white">
567
+ <div class="container mx-auto px-4">
568
+ <div class="flex flex-col md:flex-row items-center">
569
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-8">
570
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">📱 Expérience Utilisateur Optimisée</h2>
571
+ <ul class="space-y-4 text-lg text-gray-600 mb-8">
572
+ <li class="flex items-start">
573
+ <i class="fas fa-mobile-alt text-indigo-500 mt-1 mr-3"></i>
574
+ <span>Pensée pour mobile, avec mode hors connexion</span>
575
+ </li>
576
+ <li class="flex items-start">
577
+ <i class="fas fa-language text-purple-500 mt-1 mr-3"></i>
578
+ <span>Interface disponible en français, anglais, et swahili (bientôt)</span>
579
+ </li>
580
+ <li class="flex items-start">
581
+ <i class="fas fa-bell text-pink-500 mt-1 mr-3"></i>
582
+ <span>Notifications : rappels de délais, conseils quotidiens, progression</span>
583
+ </li>
584
+ </ul>
585
+
586
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6 mt-12">🔐 Sécurité et Protection des Données</h2>
587
+ <ul class="space-y-4 text-lg text-gray-600">
588
+ <li class="flex items-start">
589
+ <i class="fas fa-lock text-blue-500 mt-1 mr-3"></i>
590
+ <span>Données encryptées, conforme aux normes RGPD</span>
591
+ </li>
592
+ <li class="flex items-start">
593
+ <i class="fas fa-credit-card text-green-500 mt-1 mr-3"></i>
594
+ <span>Paiements sécurisés via Stripe, Mobile Money, et Flutterwave</span>
595
+ </li>
596
+ </ul>
597
+ </div>
598
+ <div class="md:w-1/2">
599
+ <div class="bg-gray-50 p-8 rounded-xl shadow-lg">
600
+ <h3 class="text-2xl font-bold text-gray-800 mb-6">📈 Objectifs d'Impact (2025–2027)</h3>
601
+ <div class="mb-8">
602
+ <div class="flex justify-between mb-2">
603
+ <span class="font-medium">Taux de satisfaction</span>
604
+ <span class="font-bold text-indigo-600">90%</span>
605
+ </div>
606
+ <div class="w-full bg-gray-200 rounded-full h-4">
607
+ <div class="bg-indigo-600 h-4 rounded-full" style="width: 90%"></div>
608
+ </div>
609
+ </div>
610
+
611
+ <div class="space-y-6">
612
+ <div class="flex items-start">
613
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
614
+ <i class="fas fa-users text-indigo-600"></i>
615
+ </div>
616
+ <div>
617
+ <h4 class="font-bold text-lg">50,000+ utilisateurs</h4>
618
+ <p class="text-gray-600">Objectif d'utilisateurs actifs d'ici fin 2025</p>
619
+ </div>
620
+ </div>
621
+
622
+ <div class="flex items-start">
623
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
624
+ <i class="fas fa-graduation-cap text-purple-600"></i>
625
+ </div>
626
+ <div>
627
+ <h4 class="font-bold text-lg">75% de réussite</h4>
628
+ <p class="text-gray-600">Taux de candidatures réussies parmi nos utilisateurs</p>
629
+ </div>
630
+ </div>
631
+
632
+ <div class="flex items-start">
633
+ <div class="bg-pink-100 p-3 rounded-full mr-4">
634
+ <i class="fas fa-globe-africa text-pink-600"></i>
635
+ </div>
636
+ <div>
637
+ <h4 class="font-bold text-lg">10 pays africains</h4>
638
+ <p class="text-gray-600">Couverture géographique d'ici 2027</p>
639
+ </div>
640
+ </div>
641
+ </div>
642
+ </div>
643
+ </div>
644
+ </div>
645
+ </div>
646
+ </section>
647
+
648
+ <!-- Contact CTA -->
649
+ <section id="contact" class="py-16 gradient-bg text-white">
650
+ <div class="container mx-auto px-4 text-center">
651
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à booster vos candidatures ?</h2>
652
+ <p class="text-xl text-gray-200 mb-8 max-w-2xl mx-auto">
653
+ Rejoignez des milliers d'étudiants qui ont réussi grâce à Kudos IA
654
+ </p>
655
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
656
+ <a href="#pricing" class="bg-white text-indigo-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
657
+ Choisir un plan
658
+ </a>
659
+ <a href="#" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-indigo-600 transition">
660
+ Nous contacter
661
+ </a>
662
+ </div>
663
+ </div>
664
+ </section>
665
+
666
+ <!-- Footer -->
667
+ <footer class="bg-gray-900 text-white py-12">
668
+ <div class="container mx-auto px-4">
669
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
670
+ <div>
671
+ <div class="flex items-center space-x-2 mb-4">
672
+ <i class="fas fa-graduation-cap text-2xl"></i>
673
+ <h3 class="text-xl font-bold">Kudos IA</h3>
674
+ </div>
675
+ <p class="text-gray-400">
676
+ Votre plateforme intelligente pour réussir les candidatures aux bourses Mastercard Foundation et bien d'autres.
677
+ </p>
678
+ </div>
679
+
680
+ <div>
681
+ <h4 class="text-lg font-semibold mb-4">Liens rapides</h4>
682
+ <ul class="space-y-2">
683
+ <li><a href="#features" class="text-gray-400 hover:text-white transition">Fonctionnalités</a></li>
684
+ <li><a href="#pricing" class="text-gray-400 hover:text-white transition">Abonnements</a></li>
685
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">À propos</a></li>
686
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
687
+ </ul>
688
+ </div>
689
+
690
+ <div>
691
+ <h4 class="text-lg font-semibold mb-4">Support</h4>
692
+ <ul class="space-y-2">
693
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
694
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Centre d'aide</a></li>
695
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a></li>
696
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions</a></li>
697
+ </ul>
698
+ </div>
699
+
700
+ <div>
701
+ <h4 class="text-lg font-semibold mb-4">Nous suivre</h4>
702
+ <div class="flex space-x-4">
703
+ <a href="#" class="bg-gray-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-600 transition">
704
+ <i class="fab fa-facebook-f"></i>
705
+ </a>
706
+ <a href="#" class="bg-gray-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-400 transition">
707
+ <i class="fab fa-twitter"></i>
708
+ </a>
709
+ <a href="#" class="bg-gray-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-pink-600 transition">
710
+ <i class="fab fa-instagram"></i>
711
+ </a>
712
+ <a href="#" class="bg-gray-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-red-600 transition">
713
+ <i class="fab fa-youtube"></i>
714
+ </a>
715
+ </div>
716
+ <div class="mt-4">
717
+ <p class="text-gray-400">Disponible sur :</p>
718
+ <div class="flex space-x-2 mt-2">
719
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Download_on_the_App_Store_Badge.svg/1200px-Download_on_the_App_Store_Badge.svg.png"
720
+ alt="App Store" class="h-10">
721
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Google_Play_Store_badge_EN.svg/1200px-Google_Play_Store_badge_EN.svg.png"
722
+ alt="Play Store" class="h-10">
723
+ </div>
724
+ </div>
725
+ </div>
726
+ </div>
727
+
728
+ <div class="border-t border-gray-800 pt-8 text-center text-gray-400">
729
+ <p>&copy; 2025 Kudos IA. Tous droits réservés.</p>
730
+ </div>
731
+ </div>
732
+ </footer>
733
+
734
+ <!-- Back to top button -->
735
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-indigo-600 text-white w-12 h-12 rounded-full shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-indigo-700">
736
+ <i class="fas fa-arrow-up"></i>
737
+ </button>
738
+
739
+ <script>
740
+ // Back to top button
741
+ const backToTopButton = document.getElementById('back-to-top');
742
+ window.addEventListener('scroll', () => {
743
+ if (window.pageYOffset > 300) {
744
+ backToTopButton.classList.remove('opacity-0', 'invisible');
745
+ backToTopButton.classList.add('opacity-100', 'visible');
746
+ } else {
747
+ backToTopButton.classList.remove('opacity-100', 'visible');
748
+ backToTopButton.classList.add('opacity-0', 'invisible');
749
+ }
750
+ });
751
+ backToTopButton.addEventListener('click', () => {
752
+ window.scrollTo({
753
+ top: 0,
754
+ behavior: 'smooth'
755
+ });
756
+ });
757
+ // Mobile menu toggle with animation
758
+ document.getElementById('menu-toggle').addEventListener('click', function() {
759
+ const menu = document.getElementById('mobile-menu');
760
+ menu.classList.toggle('hidden');
761
+ menu.classList.toggle('animate-fadeIn');
762
+ });
763
+
764
+ // Smooth scrolling for anchor links with offset
765
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
766
+ anchor.addEventListener('click', function(e) {
767
+ e.preventDefault();
768
+
769
+ const targetId = this.getAttribute('href');
770
+ const targetElement = document.querySelector(targetId);
771
+
772
+ if (targetElement) {
773
+ const offset = 80;
774
+ const elementPosition = targetElement.getBoundingClientRect().top;
775
+ const offsetPosition = elementPosition + window.pageYOffset - offset;
776
+
777
+ window.scrollTo({
778
+ top: offsetPosition,
779
+ behavior: 'smooth'
780
+ });
781
+
782
+ // Close mobile menu if open with animation
783
+ const mobileMenu = document.getElementById('mobile-menu');
784
+ if (!mobileMenu.classList.contains('hidden')) {
785
+ mobileMenu.classList.add('animate-fadeOut');
786
+ setTimeout(() => {
787
+ mobileMenu.classList.add('hidden');
788
+ mobileMenu.classList.remove('animate-fadeOut');
789
+ }, 300);
790
+ }
791
+ }
792
+ });
793
+ });
794
+
795
+ // Enhanced Intersection Observer for animations
796
+ const observerOptions = {
797
+ threshold: 0.1,
798
+ rootMargin: '0px 0px -100px 0px'
799
+ };
800
+
801
+ const observer = new IntersectionObserver((entries) => {
802
+ entries.forEach(entry => {
803
+ if (entry.isIntersecting) {
804
+ if (entry.target.classList.contains('feature-card') ||
805
+ entry.target.classList.contains('pricing-card')) {
806
+ entry.target.classList.add('animated');
807
+ } else {
808
+ entry.target.classList.add('animate-fadeIn');
809
+ }
810
+ observer.unobserve(entry.target);
811
+ }
812
+ });
813
+ }, observerOptions);
814
+
815
+ // Observe all animatable elements
816
+ document.querySelectorAll('.feature-card, .pricing-card, section, .animate-on-scroll').forEach(el => {
817
+ observer.observe(el);
818
+ });
819
+
820
+ // Parallax effect for hero image
821
+ window.addEventListener('scroll', function() {
822
+ const heroImg = document.querySelector('.floating');
823
+ if (heroImg) {
824
+ const scrollPosition = window.pageYOffset;
825
+ heroImg.style.transform = `translateY(${scrollPosition * 0.2}px)`;
826
+ }
827
+ });
828
+
829
+ // Add hover class to buttons
830
+ document.querySelectorAll('button, a[href^="#"]').forEach(btn => {
831
+ btn.classList.add('btn-hover');
832
+ });
833
+ </script>
834
+ <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=ddakou/kudosia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
835
+ </html>