Hugging Face's logo

Spaces:
Houdo12
/
e-learning
Running

App Files Community
Houdo12 commited on
Commit
39889ef
·
verified ·
1 Parent(s): 7c899da

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +816 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: E Learning
3
- emoji: 🌍
4
- colorFrom: green
5
- colorTo: green
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: e-learning
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: pink
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,816 @@
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>EduAfrika - Plateforme d'apprentissage africaine</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, #f5f7fa 0%, #c3cfe2 100%);
12
+ }
13
+ .africa-pattern {
14
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgwLDAsMCwwLjAzKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPjwvc3ZnPg==');
15
+ opacity: 0.3;
16
+ }
17
+ .card-hover:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .animate-pulse-slow {
22
+ animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
23
+ }
24
+ @keyframes pulse {
25
+ 0%, 100% { opacity: 1; }
26
+ 50% { opacity: 0.5; }
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="font-sans bg-gray-50">
31
+ <!-- Navigation -->
32
+ <nav class="bg-white shadow-md">
33
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
34
+ <div class="flex justify-between h-16">
35
+ <div class="flex items-center">
36
+ <div class="flex-shrink-0 flex items-center">
37
+ <i class="fas fa-globe-africa text-3xl text-green-600 mr-2"></i>
38
+ <span class="text-xl font-bold text-gray-800">Edu<span class="text-green-600">Afrika</span></span>
39
+ </div>
40
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
41
+ <a href="#" class="border-green-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Accueil</a>
42
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Cours</a>
43
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Mentors</a>
44
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Forum</a>
45
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Sondages</a>
46
+ </div>
47
+ </div>
48
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
49
+ <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium mr-4">Se connecter</button>
50
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-md text-sm font-medium">S'inscrire</button>
51
+ </div>
52
+ <div class="-mr-2 flex items-center sm:hidden">
53
+ <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-inset focus:ring-green-500" aria-controls="mobile-menu" aria-expanded="false">
54
+ <span class="sr-only">Open main menu</span>
55
+ <i class="fas fa-bars"></i>
56
+ </button>
57
+ </div>
58
+ </div>
59
+ </div>
60
+
61
+ <!-- Mobile menu -->
62
+ <div class="sm:hidden hidden" id="mobile-menu">
63
+ <div class="pt-2 pb-3 space-y-1">
64
+ <a href="#" class="bg-green-50 border-green-500 text-green-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Accueil</a>
65
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Cours</a>
66
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Mentors</a>
67
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Forum</a>
68
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Sondages</a>
69
+ <div class="mt-4 px-4">
70
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium mb-2">Se connecter</button>
71
+ <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-md text-sm font-medium">S'inscrire</button>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </nav>
76
+
77
+ <!-- Hero Section -->
78
+ <div class="relative gradient-bg overflow-hidden">
79
+ <div class="absolute inset-0 africa-pattern"></div>
80
+ <div class="max-w-7xl mx-auto">
81
+ <div class="relative z-10 pb-8 bg-transparent sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
82
+ <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
83
+ <div class="sm:text-center lg:text-left">
84
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
85
+ <span class="block">Apprentissage en ligne</span>
86
+ <span class="block text-green-600">100% Africain</span>
87
+ </h1>
88
+ <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
89
+ Connectez-vous avec des mentors qualifiés, posez vos questions, participez à des sondages et développez vos compétences dans un environnement adapté à notre contexte africain.
90
+ </p>
91
+ <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
92
+ <div class="rounded-md shadow">
93
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-600 hover:bg-green-700 md:py-4 md:text-lg md:px-10">
94
+ Commencer maintenant
95
+ </a>
96
+ </div>
97
+ <div class="mt-3 sm:mt-0 sm:ml-3">
98
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-green-700 bg-green-100 hover:bg-green-200 md:py-4 md:text-lg md:px-10">
99
+ Voir les cours
100
+ </a>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </main>
105
+ </div>
106
+ </div>
107
+ <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
108
+ <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1523050854058-8df9012c9eee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Étudiants africains">
109
+ </div>
110
+ </div>
111
+
112
+ <!-- Features Section -->
113
+ <div class="py-12 bg-white">
114
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
115
+ <div class="lg:text-center">
116
+ <h2 class="text-base text-green-600 font-semibold tracking-wide uppercase">Fonctionnalités</h2>
117
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
118
+ Une meilleure façon d'apprendre
119
+ </p>
120
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
121
+ EduAfrika combine les meilleures pratiques pédagogiques avec les technologies modernes.
122
+ </p>
123
+ </div>
124
+
125
+ <div class="mt-10">
126
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
127
+ <div class="relative">
128
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
129
+ <i class="fas fa-user-graduate text-xl"></i>
130
+ </div>
131
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Apprentissage personnalisé</p>
132
+ <p class="mt-2 ml-16 text-base text-gray-500">
133
+ Des parcours d'apprentissage adaptés à votre niveau et à vos objectifs, avec un suivi personnalisé.
134
+ </p>
135
+ </div>
136
+
137
+ <div class="relative">
138
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
139
+ <i class="fas fa-chalkboard-teacher text-xl"></i>
140
+ </div>
141
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Mentors qualifiés</p>
142
+ <p class="mt-2 ml-16 text-base text-gray-500">
143
+ Connectez-vous avec des mentors africains expérimentés dans divers domaines pour un accompagnement sur mesure.
144
+ </p>
145
+ </div>
146
+
147
+ <div class="relative">
148
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
149
+ <i class="fas fa-comments text-xl"></i>
150
+ </div>
151
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Forum de questions</p>
152
+ <p class="mt-2 ml-16 text-base text-gray-500">
153
+ Posez toutes vos questions et obtenez des réponses de la communauté et des experts.
154
+ </p>
155
+ </div>
156
+
157
+ <div class="relative">
158
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
159
+ <i class="fas fa-poll text-xl"></i>
160
+ </div>
161
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Sondages interactifs</p>
162
+ <p class="mt-2 ml-16 text-base text-gray-500">
163
+ Participez à des sondages pour partager votre opinion et voir ce que pensent les autres apprenants.
164
+ </p>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Popular Courses -->
172
+ <div class="py-12 bg-gray-50">
173
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
174
+ <div class="lg:text-center mb-12">
175
+ <h2 class="text-base text-green-600 font-semibold tracking-wide uppercase">Cours populaires</h2>
176
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
177
+ Développez vos compétences
178
+ </p>
179
+ </div>
180
+
181
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
182
+ <!-- Course 1 -->
183
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition duration-300 ease-in-out">
184
+ <div class="relative pb-48 overflow-hidden">
185
+ <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Programmation">
186
+ <div class="absolute top-4 right-4 bg-green-600 text-white text-xs font-bold px-2 py-1 rounded-full">Nouveau</div>
187
+ </div>
188
+ <div class="p-6">
189
+ <div class="flex items-center">
190
+ <span class="text-yellow-500"><i class="fas fa-star"></i></span>
191
+ <span class="text-yellow-500"><i class="fas fa-star"></i></span>
192
+ <span class="text-yellow-500"><i class="fas fa-star"></i></span>
193
+ <span class="text-yellow-500"><i class="fas fa-star"></i></span>
194
+ <span class="text-yellow-500"><i class="fas fa-star-half-alt"></i></span>
195
+ <span class="text-gray-600 text-xs ml-2">(128)</span>
196
+ </div>
197
+ <h3 class="mt-2 text-xl font-semibold text-gray-900">Programmation Web Moderne</h3>
198
+ <p class="mt-2 text-gray-600">Apprenez à créer des sites web modernes avec HTML, CSS, JavaScript et les frameworks populaires.</p>
199
+ <div class="mt-4 flex items-center">
200
+ <div class="flex-shrink-0">
201
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mentor">
202
+ </div>
203
+ <div class="ml-3">
204
+ <p class="text-sm font-medium text-gray-900">Mamadou Diallo</p>
205
+ <p class="text-sm text-gray-500">Développeur Fullstack</p>
206
+ </div>
207
+ </div>
208
+ <div class="mt-6 flex items-center justify-between">
209
+ <span class="text-green-600 font-bold">49 000 FCFA</span>
210
+ <button class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700">Voir le cours</button>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Course 2 -->
216
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition duration-300 ease-in-out">
217
+ <div class="relative pb-48 overflow-hidden">
218
+ <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Entrepreneuriat">
219
+ </div>
220
+ <div class="p-6">
221
+ <div class="flex items-center">
222
+ <span class="text-yellow-500"><i class="fas fa-star"></i></span>
223
+ <span class="text-yellow-500"><i class="fas fa-star"></i></span>
224
+ <span class="text-yellow-500"><i class="fas fa-star"></i></span>
225
+ <span class="text-yellow-500"><i class="fas fa-star"></i></span>
226
+ <span class="text-yellow-500"><i class="far fa-star"></i></span>
227
+ <span class="text-gray-600 text-xs ml-2">(95)</span>
228
+ </div>
229
+ <h3 class="mt-2 text-xl font-semibold text-gray-900">Entrepreneuriat Africain</h3>
230
+ <p class="mt-2 text-gray-600">Découvrez les secrets pour lancer et développer une entreprise prospère dans le contexte africain.</p>
231
+ <div class="mt-4 flex items-center">
232
+ <div class="flex-shrink-0">
233
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Mentor">
234
+ </div>
235
+ <div class="ml-3">
236
+ <p class="text-sm font-medium text-gray-900">Aminata Bâ</p>
237
+ <p class="text-sm text-gray-500">Fondatrice de 3 startups</p>
238
+ </div>
239
+ </div>
240
+ <div class="mt-6 flex items-center justify-between">
241
+ <span class="text-green-600 font-bold">35 000 FCFA</span>
242
+ <button class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700">Voir le cours</button>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- Course 3 -->
248
+ <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition duration-300 ease-in-out">
249
+ <div class="relative pb-48 overflow-hidden">
250
+ <img class="absolute inset-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Marketing Digital">
251
+ <div class="absolute top-4 right-4 bg-green-600 text-white text-xs font-bold px-2 py-1 rounded-full">Populaire</div>
252
+ </div>
253
+ <div class="p-6">
254
+ <div class="flex items-center">
255
+ <span class="text-yellow-500"><i class="fas fa-star"></i></span>
256
+ <span class="text-yellow-500"><i class="fas fa-star"></i></span>
257
+ <span class="text-yellow-500"><i class="fas fa-star"></i></span>
258
+ <span class="text-yellow-500"><i class="fas fa-star"></i></span>
259
+ <span class="text-yellow-500"><i class="fas fa-star"></i></span>
260
+ <span class="text-gray-600 text-xs ml-2">(214)</span>
261
+ </div>
262
+ <h3 class="mt-2 text-xl font-semibold text-gray-900">Marketing Digital en Afrique</h3>
263
+ <p class="mt-2 text-gray-600">Maîtrisez les techniques de marketing digital adaptées au marché africain et à ses spécificités.</p>
264
+ <div class="mt-4 flex items-center">
265
+ <div class="flex-shrink-0">
266
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Mentor">
267
+ </div>
268
+ <div class="ml-3">
269
+ <p class="text-sm font-medium text-gray-900">Koffi Mensah</p>
270
+ <p class="text-sm text-gray-500">Expert en Growth Marketing</p>
271
+ </div>
272
+ </div>
273
+ <div class="mt-6 flex items-center justify-between">
274
+ <span class="text-green-600 font-bold">42 000 FCFA</span>
275
+ <button class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700">Voir le cours</button>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <div class="mt-12 text-center">
282
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700">
283
+ Voir tous les cours
284
+ <i class="fas fa-arrow-right ml-2"></i>
285
+ </a>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Mentors Section -->
291
+ <div class="py-12 bg-white">
292
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
293
+ <div class="lg:text-center mb-12">
294
+ <h2 class="text-base text-green-600 font-semibold tracking-wide uppercase">Nos mentors</h2>
295
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
296
+ Apprenez des meilleurs experts
297
+ </p>
298
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
299
+ Nos mentors sont des professionnels africains expérimentés, prêts à partager leurs connaissances avec vous.
300
+ </p>
301
+ </div>
302
+
303
+ <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
304
+ <!-- Mentor 1 -->
305
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md text-center p-6 card-hover transition duration-300 ease-in-out">
306
+ <div class="relative mx-auto h-32 w-32 rounded-full overflow-hidden border-4 border-green-100">
307
+ <img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/women/63.jpg" alt="Mentor">
308
+ <div class="absolute inset-0 bg-green-600 bg-opacity-75 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300 ease-in-out">
309
+ <a href="#" class="text-white"><i class="fas fa-envelope text-2xl"></i></a>
310
+ </div>
311
+ </div>
312
+ <h3 class="mt-4 text-xl font-semibold text-gray-900">Fatou Ndiaye</h3>
313
+ <p class="text-green-600">Ingénieure Logiciel</p>
314
+ <p class="mt-2 text-gray-600 text-sm">Spécialiste en intelligence artificielle avec 8 ans d'expérience chez Google et plusieurs startups africaines.</p>
315
+ <div class="mt-4 flex justify-center space-x-4">
316
+ <a href="#" class="text-gray-400 hover:text-green-600">
317
+ <i class="fab fa-linkedin"></i>
318
+ </a>
319
+ <a href="#" class="text-gray-400 hover:text-green-600">
320
+ <i class="fab fa-twitter"></i>
321
+ </a>
322
+ <a href="#" class="text-gray-400 hover:text-green-600">
323
+ <i class="fab fa-github"></i>
324
+ </a>
325
+ </div>
326
+ <button class="mt-4 px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700">Voir le profil</button>
327
+ </div>
328
+
329
+ <!-- Mentor 2 -->
330
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md text-center p-6 card-hover transition duration-300 ease-in-out">
331
+ <div class="relative mx-auto h-32 w-32 rounded-full overflow-hidden border-4 border-green-100">
332
+ <img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/men/82.jpg" alt="Mentor">
333
+ <div class="absolute inset-0 bg-green-600 bg-opacity-75 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300 ease-in-out">
334
+ <a href="#" class="text-white"><i class="fas fa-envelope text-2xl"></i></a>
335
+ </div>
336
+ </div>
337
+ <h3 class="mt-4 text-xl font-semibold text-gray-900">Mohamed Keita</h3>
338
+ <p class="text-green-600">Expert Financier</p>
339
+ <p class="mt-2 text-gray-600 text-sm">Ancien directeur financier de plusieurs banques panafricaines, spécialiste en gestion de patrimoine.</p>
340
+ <div class="mt-4 flex justify-center space-x-4">
341
+ <a href="#" class="text-gray-400 hover:text-green-600">
342
+ <i class="fab fa-linkedin"></i>
343
+ </a>
344
+ <a href="#" class="text-gray-400 hover:text-green-600">
345
+ <i class="fab fa-twitter"></i>
346
+ </a>
347
+ </div>
348
+ <button class="mt-4 px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700">Voir le profil</button>
349
+ </div>
350
+
351
+ <!-- Mentor 3 -->
352
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md text-center p-6 card-hover transition duration-300 ease-in-out">
353
+ <div class="relative mx-auto h-32 w-32 rounded-full overflow-hidden border-4 border-green-100">
354
+ <img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/women/28.jpg" alt="Mentor">
355
+ <div class="absolute inset-0 bg-green-600 bg-opacity-75 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300 ease-in-out">
356
+ <a href="#" class="text-white"><i class="fas fa-envelope text-2xl"></i></a>
357
+ </div>
358
+ </div>
359
+ <h3 class="mt-4 text-xl font-semibold text-gray-900">Aïssatou Diop</h3>
360
+ <p class="text-green-600">Designer UX/UI</p>
361
+ <p class="mt-2 text-gray-600 text-sm">Designer primée avec une expérience internationale, fondatrice d'une agence de design à Dakar.</p>
362
+ <div class="mt-4 flex justify-center space-x-4">
363
+ <a href="#" class="text-gray-400 hover:text-green-600">
364
+ <i class="fab fa-linkedin"></i>
365
+ </a>
366
+ <a href="#" class="text-gray-400 hover:text-green-600">
367
+ <i class="fab fa-behance"></i>
368
+ </a>
369
+ <a href="#" class="text-gray-400 hover:text-green-600">
370
+ <i class="fab fa-dribbble"></i>
371
+ </a>
372
+ </div>
373
+ <button class="mt-4 px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700">Voir le profil</button>
374
+ </div>
375
+
376
+ <!-- Mentor 4 -->
377
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md text-center p-6 card-hover transition duration-300 ease-in-out">
378
+ <div class="relative mx-auto h-32 w-32 rounded-full overflow-hidden border-4 border-green-100">
379
+ <img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Mentor">
380
+ <div class="absolute inset-0 bg-green-600 bg-opacity-75 flex items-center justify-center opacity-0 hover:opacity-100 transition duration-300 ease-in-out">
381
+ <a href="#" class="text-white"><i class="fas fa-envelope text-2xl"></i></a>
382
+ </div>
383
+ </div>
384
+ <h3 class="mt-4 text-xl font-semibold text-gray-900">Yannick Kouamé</h3>
385
+ <p class="text-green-600">Expert en Agriculture</p>
386
+ <p class="mt-2 text-gray-600 text-sm">Ingénieur agronome spécialisé dans les techniques agricoles modernes adaptées au climat africain.</p>
387
+ <div class="mt-4 flex justify-center space-x-4">
388
+ <a href="#" class="text-gray-400 hover:text-green-600">
389
+ <i class="fab fa-linkedin"></i>
390
+ </a>
391
+ <a href="#" class="text-gray-400 hover:text-green-600">
392
+ <i class="fab fa-youtube"></i>
393
+ </a>
394
+ </div>
395
+ <button class="mt-4 px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700">Voir le profil</button>
396
+ </div>
397
+ </div>
398
+
399
+ <div class="mt-12 text-center">
400
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700">
401
+ Voir tous les mentors
402
+ <i class="fas fa-arrow-right ml-2"></i>
403
+ </a>
404
+ </div>
405
+ </div>
406
+ </div>
407
+
408
+ <!-- Forum & Polls Section -->
409
+ <div class="py-12 bg-gray-50">
410
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
411
+ <div class="lg:text-center mb-12">
412
+ <h2 class="text-base text-green-600 font-semibold tracking-wide uppercase">Communauté</h2>
413
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
414
+ Posez vos questions et participez
415
+ </p>
416
+ </div>
417
+
418
+ <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
419
+ <!-- Forum Questions -->
420
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
421
+ <div class="bg-green-600 px-6 py-4">
422
+ <h3 class="text-lg font-medium text-white flex items-center">
423
+ <i class="fas fa-comments mr-2"></i> Dernières questions du forum
424
+ </h3>
425
+ </div>
426
+ <div class="divide-y divide-gray-200">
427
+ <!-- Question 1 -->
428
+ <div class="p-6 hover:bg-gray-50 transition duration-150 ease-in-out">
429
+ <div class="flex items-start">
430
+ <div class="flex-shrink-0 bg-green-100 rounded-md p-2">
431
+ <i class="fas fa-question text-green-600"></i>
432
+ </div>
433
+ <div class="ml-4">
434
+ <h4 class="text-base font-medium text-gray-900">Comment optimiser son site pour le mobile en Afrique ?</h4>
435
+ <p class="mt-1 text-sm text-gray-500">Posté par <a href="#" class="text-green-600 hover:underline">Oumar D.</a> il y a 2 heures</p>
436
+ <div class="mt-2 flex items-center text-sm text-gray-500">
437
+ <span class="mr-3"><i class="fas fa-reply mr-1"></i> 5 réponses</span>
438
+ <span><i class="fas fa-eye mr-1"></i> 32 vues</span>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+ <!-- Question 2 -->
445
+ <div class="p-6 hover:bg-gray-50 transition duration-150 ease-in-out">
446
+ <div class="flex items-start">
447
+ <div class="flex-shrink-0 bg-green-100 rounded-md p-2">
448
+ <i class="fas fa-question text-green-600"></i>
449
+ </div>
450
+ <div class="ml-4">
451
+ <h4 class="text-base font-medium text-gray-900">Quelles sont les meilleures pratiques pour le marketing digital en Afrique francophone ?</h4>
452
+ <p class="mt-1 text-sm text-gray-500">Posté par <a href="#" class="text-green-600 hover:underline">Aïcha K.</a> il y a 5 heures</p>
453
+ <div class="mt-2 flex items-center text-sm text-gray-500">
454
+ <span class="mr-3"><i class="fas fa-reply mr-1"></i> 3 réponses</span>
455
+ <span><i class="fas fa-eye mr-1"></i> 45 vues</span>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+
461
+ <!-- Question 3 -->
462
+ <div class="p-6 hover:bg-gray-50 transition duration-150 ease-in-out">
463
+ <div class="flex items-start">
464
+ <div class="flex-shrink-0 bg-green-100 rounded-md p-2">
465
+ <i class="fas fa-question text-green-600"></i>
466
+ </div>
467
+ <div class="ml-4">
468
+ <h4 class="text-base font-medium text-gray-900">Quel framework JavaScript recommandez-vous pour un débutant ?</h4>
469
+ <p class="mt-1 text-sm text-gray-500">Posté par <a href="#" class="text-green-600 hover:underline">Moussa T.</a> il y a 1 jour</p>
470
+ <div class="mt-2 flex items-center text-sm text-gray-500">
471
+ <span class="mr-3"><i class="fas fa-reply mr-1"></i> 12 réponses</span>
472
+ <span><i class="fas fa-eye mr-1"></i> 78 vues</span>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+
478
+ <!-- Question 4 -->
479
+ <div class="p-6 hover:bg-gray-50 transition duration-150 ease-in-out">
480
+ <div class="flex items-start">
481
+ <div class="flex-shrink-0 bg-green-100 rounded-md p-2">
482
+ <i class="fas fa-question text-green-600"></i>
483
+ </div>
484
+ <div class="ml-4">
485
+ <h4 class="text-base font-medium text-gray-900">Comment gérer les paiements en ligne pour une entreprise en Côte d'Ivoire ?</h4>
486
+ <p class="mt-1 text-sm text-gray-500">Posté par <a href="#" class="text-green-600 hover:underline">Koffi A.</a> il y a 2 jours</p>
487
+ <div class="mt-2 flex items-center text-sm text-gray-500">
488
+ <span class="mr-3"><i class="fas fa-reply mr-1"></i> 8 réponses</span>
489
+ <span><i class="fas fa-eye mr-1"></i> 64 vues</span>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ <div class="bg-gray-50 px-6 py-4 text-right">
496
+ <a href="#" class="text-sm font-medium text-green-600 hover:text-green-500">
497
+ Voir toutes les questions <i class="fas fa-arrow-right ml-1"></i>
498
+ </a>
499
+ </div>
500
+ </div>
501
+
502
+ <!-- Polls -->
503
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
504
+ <div class="bg-green-600 px-6 py-4">
505
+ <h3 class="text-lg font-medium text-white flex items-center">
506
+ <i class="fas fa-poll mr-2"></i> Sondages récents
507
+ </h3>
508
+ </div>
509
+ <div class="divide-y divide-gray-200">
510
+ <!-- Poll 1 -->
511
+ <div class="p-6">
512
+ <h4 class="text-base font-medium text-gray-900">Quel est le plus grand défi pour les startups en Afrique aujourd'hui ?</h4>
513
+ <p class="mt-1 text-sm text-gray-500">Posté par <a href="#" class="text-green-600 hover:underline">EduAfrika Team</a> il y a 3 jours</p>
514
+
515
+ <div class="mt-4 space-y-3">
516
+ <div>
517
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
518
+ <span>Accès au financement</span>
519
+ <span>42%</span>
520
+ </div>
521
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
522
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 42%"></div>
523
+ </div>
524
+ </div>
525
+ <div>
526
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
527
+ <span>Infrastructures inadéquates</span>
528
+ <span>28%</span>
529
+ </div>
530
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
531
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 28%"></div>
532
+ </div>
533
+ </div>
534
+ <div>
535
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
536
+ <span>Talent et compétences</span>
537
+ <span>18%</span>
538
+ </div>
539
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
540
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 18%"></div>
541
+ </div>
542
+ </div>
543
+ <div>
544
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
545
+ <span>Réglementation</span>
546
+ <span>12%</span>
547
+ </div>
548
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
549
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 12%"></div>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ <div class="mt-3 text-sm text-gray-500">
554
+ <i class="fas fa-users mr-1"></i> 156 participants
555
+ </div>
556
+ </div>
557
+
558
+ <!-- Poll 2 -->
559
+ <div class="p-6">
560
+ <h4 class="text-base font-medium text-gray-900">Quelle technologie aura le plus d'impact en Afrique dans les 5 prochaines années ?</h4>
561
+ <p class="mt-1 text-sm text-gray-500">Posté par <a href="#" class="text-green-600 hover:underline">Mentor Tech</a> il y a 1 semaine</p>
562
+
563
+ <div class="mt-4 space-y-3">
564
+ <div>
565
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
566
+ <span>Mobile Money</span>
567
+ <span>35%</span>
568
+ </div>
569
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
570
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 35%"></div>
571
+ </div>
572
+ </div>
573
+ <div>
574
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
575
+ <span>IA et Machine Learning</span>
576
+ <span>25%</span>
577
+ </div>
578
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
579
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 25%"></div>
580
+ </div>
581
+ </div>
582
+ <div>
583
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
584
+ <span>Blockchain</span>
585
+ <span>20%</span>
586
+ </div>
587
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
588
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 20%"></div>
589
+ </div>
590
+ </div>
591
+ <div>
592
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
593
+ <span>Énergie solaire</span>
594
+ <span>20%</span>
595
+ </div>
596
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
597
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 20%"></div>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ <div class="mt-3 text-sm text-gray-500">
602
+ <i class="fas fa-users mr-1"></i> 203 participants
603
+ </div>
604
+ </div>
605
+ </div>
606
+ <div class="bg-gray-50 px-6 py-4 text-right">
607
+ <a href="#" class="text-sm font-medium text-green-600 hover:text-green-500">
608
+ Voir tous les sondages <i class="fas fa-arrow-right ml-1"></i>
609
+ </a>
610
+ </div>
611
+ </div>
612
+ </div>
613
+ </div>
614
+ </div>
615
+
616
+ <!-- Testimonials -->
617
+ <div class="py-12 bg-white">
618
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
619
+ <div class="lg:text-center mb-12">
620
+ <h2 class="text-base text-green-600 font-semibold tracking-wide uppercase">Témoignages</h2>
621
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
622
+ Ce que disent nos apprenants
623
+ </p>
624
+ </div>
625
+
626
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
627
+ <!-- Testimonial 1 -->
628
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
629
+ <div class="flex items-center">
630
+ <div class="flex-shrink-0">
631
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Testimonial">
632
+ </div>
633
+ <div class="ml-4">
634
+ <h4 class="text-lg font-medium text-gray-900">Aminata Diallo</h4>
635
+ <p class="text-green-600">Étudiante en Développement Web</p>
636
+ </div>
637
+ </div>
638
+ <div class="mt-4">
639
+ <p class="text-gray-600">
640
+ "Grâce à EduAfrika, j'ai pu apprendre à coder tout en continuant mes études. Les mentors sont très disponibles et les cours sont adaptés à notre contexte africain."
641
+ </p>
642
+ <div class="mt-4 flex text-yellow-400">
643
+ <i class="fas fa-star"></i>
644
+ <i class="fas fa-star"></i>
645
+ <i class="fas fa-star"></i>
646
+ <i class="fas fa-star"></i>
647
+ <i class="fas fa-star"></i>
648
+ </div>
649
+ </div>
650
+ </div>
651
+
652
+ <!-- Testimonial 2 -->
653
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
654
+ <div class="flex items-center">
655
+ <div class="flex-shrink-0">
656
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt="Testimonial">
657
+ </div>
658
+ <div class="ml-4">
659
+ <h4 class="text-lg font-medium text-gray-900">Jean Bosco</h4>
660
+ <p class="text-green-600">Entrepreneur Agricole</p>
661
+ </div>
662
+ </div>
663
+ <div class="mt-4">
664
+ <p class="text-gray-600">
665
+ "Le cours sur l'agriculture moderne m'a permis de doubler mes rendements. J'ai aussi pu poser des questions spécifiques à mon exploitation et obtenir des réponses personnalisées."
666
+ </p>
667
+ <div class="mt-4 flex text-yellow-400">
668
+ <i class="fas fa-star"></i>
669
+ <i class="fas fa-star"></i>
670
+ <i class="fas fa-star"></i>
671
+ <i class="fas fa-star"></i>
672
+ <i class="fas fa-star-half-alt"></i>
673
+ </div>
674
+ </div>
675
+ </div>
676
+
677
+ <!-- Testimonial 3 -->
678
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
679
+ <div class="flex items-center">
680
+ <div class="flex-shrink-0">
681
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Testimonial">
682
+ </div>
683
+ <div class="ml-4">
684
+ <h4 class="text-lg font-medium text-gray-900">Fatima Ouedraogo</h4>
685
+ <p class="text-green-600">Designer Freelance</p>
686
+ </div>
687
+ </div>
688
+ <div class="mt-4">
689
+ <p class="text-gray-600">
690
+ "En tant que mentor sur EduAfrika, je peux partager mon expérience avec la nouvelle génération. C'est très gratifiant de voir mes élèves progresser et réussir."
691
+ </p>
692
+ <div class="mt-4 flex text-yellow-400">
693
+ <i class="fas fa-star"></i>
694
+ <i class="fas fa-star"></i>
695
+ <i class="fas fa-star"></i>
696
+ <i class="fas fa-star"></i>
697
+ <i class="far fa-star"></i>
698
+ </div>
699
+ </div>
700
+ </div>
701
+ </div>
702
+ </div>
703
+ </div>
704
+
705
+ <!-- CTA Section -->
706
+ <div class="bg-green-700">
707
+ <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
708
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
709
+ <span class="block">Prêt à développer vos compétences ?</span>
710
+ <span class="block">Rejoignez EduAfrika dès aujourd'hui.</span>
711
+ </h2>
712
+ <p class="mt-4 text-lg leading-6 text-green-200">
713
+ Des milliers d'apprenants africains ont déjà transformé leur carrière grâce à notre plateforme.
714
+ </p>
715
+ <a href="#" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-green-600 bg-white hover:bg-green-50 sm:w-auto">
716
+ Commencer maintenant
717
+ <i class="fas fa-arrow-right ml-2"></i>
718
+ </a>
719
+ </div>
720
+ </div>
721
+
722
+ <!-- Footer -->
723
+ <footer class="bg-gray-800">
724
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
725
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
726
+ <div>
727
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">EduAfrika</h3>
728
+ <p class="mt-4 text-gray-400 text-sm">
729
+ La première plateforme d'apprentissage en ligne conçue spécifiquement pour le contexte africain.
730
+ </p>
731
+ <div class="mt-4 flex space-x-6">
732
+ <a href="#" class="text-gray-400 hover:text-white">
733
+ <i class="fab fa-facebook-f"></i>
734
+ </a>
735
+ <a href="#" class="text-gray-400 hover:text-white">
736
+ <i class="fab fa-twitter"></i>
737
+ </a>
738
+ <a href="#" class="text-gray-400 hover:text-white">
739
+ <i class="fab fa-linkedin-in"></i>
740
+ </a>
741
+ <a href="#" class="text-gray-400 hover:text-white">
742
+ <i class="fab fa-youtube"></i>
743
+ </a>
744
+ </div>
745
+ </div>
746
+ <div>
747
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Navigation</h3>
748
+ <ul class="mt-4 space-y-4">
749
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Accueil</a></li>
750
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Cours</a></li>
751
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Mentors</a></li>
752
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Forum</a></li>
753
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Sondages</a></li>
754
+ </ul>
755
+ </div>
756
+ <div>
757
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Support</h3>
758
+ <ul class="mt-4 space-y-4">
759
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Centre d'aide</a></li>
760
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">FAQ</a></li>
761
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Nous contacter</a></li>
762
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Politique de confidentialité</a></li>
763
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Conditions d'utilisation</a></li>
764
+ </ul>
765
+ </div>
766
+ <div>
767
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Newsletter</h3>
768
+ <p class="mt-4 text-gray-400 text-sm">
769
+ Abonnez-vous à notre newsletter pour recevoir les dernières actualités et offres spéciales.
770
+ </p>
771
+ <div class="mt-4">
772
+ <form class="flex">
773
+ <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l-md text-sm w-full focus:outline-none">
774
+ <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-r-md text-sm">
775
+ <i class="fas fa-paper-plane"></i>
776
+ </button>
777
+ </form>
778
+ </div>
779
+ </div>
780
+ </div>
781
+ <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between">
782
+ <p class="text-gray-400 text-sm">
783
+ &copy; 2023 EduAfrika. Tous droits réservés.
784
+ </p>
785
+ <div class="mt-4 md:mt-0">
786
+ <img class="h-8" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Africa_%28orthographic_projection%29.svg/1200px-Africa_%28orthographic_projection%29.svg.png" alt="Afrique">
787
+ </div>
788
+ </div>
789
+ </div>
790
+ </footer>
791
+
792
+ <script>
793
+ // Mobile menu toggle
794
+ document.addEventListener('DOMContentLoaded', function() {
795
+ const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]');
796
+ const mobileMenu = document.getElementById('mobile-menu');
797
+
798
+ mobileMenuButton.addEventListener('click', function() {
799
+ const expanded = this.getAttribute('aria-expanded') === 'true';
800
+ this.setAttribute('aria-expanded', !expanded);
801
+ mobileMenu.classList.toggle('hidden');
802
+ });
803
+
804
+ // Poll animation
805
+ const pollBars = document.querySelectorAll('[style*="width:"]');
806
+ pollBars.forEach(bar => {
807
+ const width = bar.style.width;
808
+ bar.style.width = '0';
809
+ setTimeout(() => {
810
+ bar.style.width = width;
811
+ }, 100);
812
+ });
813
+ });
814
+ </script>
815
+ <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=Houdo12/e-learning" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
816
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ UN APPLICATION ARICAIN QUI PERMET AU ELEVE ET AU MENTORE DAPPRENDRE EN LIGNE ET SE POSER TOUT LES QUESTION ET FAIT DES SONDAGE