Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EduAfrika - Plateforme d'apprentissage africaine</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .africa-pattern { | |
| background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgwLDAsMCwwLjAzKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPjwvc3ZnPg=='); | |
| opacity: 0.3; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-globe-africa text-3xl text-green-600 mr-2"></i> | |
| <span class="text-xl font-bold text-gray-800">Edu<span class="text-green-600">Afrika</span></span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <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> | |
| <button class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-md text-sm font-medium">S'inscrire</button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <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"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="sm:hidden hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <div class="mt-4 px-4"> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="relative gradient-bg overflow-hidden"> | |
| <div class="absolute inset-0 africa-pattern"></div> | |
| <div class="max-w-7xl mx-auto"> | |
| <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"> | |
| <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"> | |
| <div class="sm:text-center lg:text-left"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl"> | |
| <span class="block">Apprentissage en ligne</span> | |
| <span class="block text-green-600">100% Africain</span> | |
| </h1> | |
| <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"> | |
| 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. | |
| </p> | |
| <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> | |
| <div class="rounded-md shadow"> | |
| <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"> | |
| Commencer maintenant | |
| </a> | |
| </div> | |
| <div class="mt-3 sm:mt-0 sm:ml-3"> | |
| <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"> | |
| Voir les cours | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> | |
| <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"> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-green-600 font-semibold tracking-wide uppercase">Fonctionnalités</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Une meilleure façon d'apprendre | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| EduAfrika combine les meilleures pratiques pédagogiques avec les technologies modernes. | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"> | |
| <i class="fas fa-user-graduate text-xl"></i> | |
| </div> | |
| <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Apprentissage personnalisé</p> | |
| <p class="mt-2 ml-16 text-base text-gray-500"> | |
| Des parcours d'apprentissage adaptés à votre niveau et à vos objectifs, avec un suivi personnalisé. | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"> | |
| <i class="fas fa-chalkboard-teacher text-xl"></i> | |
| </div> | |
| <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Mentors qualifiés</p> | |
| <p class="mt-2 ml-16 text-base text-gray-500"> | |
| Connectez-vous avec des mentors africains expérimentés dans divers domaines pour un accompagnement sur mesure. | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"> | |
| <i class="fas fa-comments text-xl"></i> | |
| </div> | |
| <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Forum de questions</p> | |
| <p class="mt-2 ml-16 text-base text-gray-500"> | |
| Posez toutes vos questions et obtenez des réponses de la communauté et des experts. | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"> | |
| <i class="fas fa-poll text-xl"></i> | |
| </div> | |
| <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Sondages interactifs</p> | |
| <p class="mt-2 ml-16 text-base text-gray-500"> | |
| Participez à des sondages pour partager votre opinion et voir ce que pensent les autres apprenants. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Popular Courses --> | |
| <div class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-green-600 font-semibold tracking-wide uppercase">Cours populaires</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Développez vos compétences | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Course 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition duration-300 ease-in-out"> | |
| <div class="relative pb-48 overflow-hidden"> | |
| <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"> | |
| <div class="absolute top-4 right-4 bg-green-600 text-white text-xs font-bold px-2 py-1 rounded-full">Nouveau</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <span class="text-yellow-500"><i class="fas fa-star"></i></span> | |
| <span class="text-yellow-500"><i class="fas fa-star"></i></span> | |
| <span class="text-yellow-500"><i class="fas fa-star"></i></span> | |
| <span class="text-yellow-500"><i class="fas fa-star"></i></span> | |
| <span class="text-yellow-500"><i class="fas fa-star-half-alt"></i></span> | |
| <span class="text-gray-600 text-xs ml-2">(128)</span> | |
| </div> | |
| <h3 class="mt-2 text-xl font-semibold text-gray-900">Programmation Web Moderne</h3> | |
| <p class="mt-2 text-gray-600">Apprenez à créer des sites web modernes avec HTML, CSS, JavaScript et les frameworks populaires.</p> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mentor"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Mamadou Diallo</p> | |
| <p class="text-sm text-gray-500">Développeur Fullstack</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex items-center justify-between"> | |
| <span class="text-green-600 font-bold">49 000 FCFA</span> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition duration-300 ease-in-out"> | |
| <div class="relative pb-48 overflow-hidden"> | |
| <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"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <span class="text-yellow-500"><i class="fas fa-star"></i></span> | |
| <span class="text-yellow-500"><i class="fas fa-star"></i></span> | |
| <span class="text-yellow-500"><i class="fas fa-star"></i></span> | |
| <span class="text-yellow-500"><i class="fas fa-star"></i></span> | |
| <span class="text-yellow-500"><i class="far fa-star"></i></span> | |
| <span class="text-gray-600 text-xs ml-2">(95)</span> | |
| </div> | |
| <h3 class="mt-2 text-xl font-semibold text-gray-900">Entrepreneuriat Africain</h3> | |
| <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> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Mentor"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Aminata Bâ</p> | |
| <p class="text-sm text-gray-500">Fondatrice de 3 startups</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex items-center justify-between"> | |
| <span class="text-green-600 font-bold">35 000 FCFA</span> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition duration-300 ease-in-out"> | |
| <div class="relative pb-48 overflow-hidden"> | |
| <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"> | |
| <div class="absolute top-4 right-4 bg-green-600 text-white text-xs font-bold px-2 py-1 rounded-full">Populaire</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <span class="text-yellow-500"><i class="fas fa-star"></i></span> | |
| <span class="text-yellow-500"><i class="fas fa-star"></i></span> | |
| <span class="text-yellow-500"><i class="fas fa-star"></i></span> | |
| <span class="text-yellow-500"><i class="fas fa-star"></i></span> | |
| <span class="text-yellow-500"><i class="fas fa-star"></i></span> | |
| <span class="text-gray-600 text-xs ml-2">(214)</span> | |
| </div> | |
| <h3 class="mt-2 text-xl font-semibold text-gray-900">Marketing Digital en Afrique</h3> | |
| <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> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Mentor"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Koffi Mensah</p> | |
| <p class="text-sm text-gray-500">Expert en Growth Marketing</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex items-center justify-between"> | |
| <span class="text-green-600 font-bold">42 000 FCFA</span> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <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"> | |
| Voir tous les cours | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mentors Section --> | |
| <div class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-green-600 font-semibold tracking-wide uppercase">Nos mentors</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Apprenez des meilleurs experts | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Nos mentors sont des professionnels africains expérimentés, prêts à partager leurs connaissances avec vous. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4"> | |
| <!-- Mentor 1 --> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md text-center p-6 card-hover transition duration-300 ease-in-out"> | |
| <div class="relative mx-auto h-32 w-32 rounded-full overflow-hidden border-4 border-green-100"> | |
| <img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/women/63.jpg" alt="Mentor"> | |
| <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"> | |
| <a href="#" class="text-white"><i class="fas fa-envelope text-2xl"></i></a> | |
| </div> | |
| </div> | |
| <h3 class="mt-4 text-xl font-semibold text-gray-900">Fatou Ndiaye</h3> | |
| <p class="text-green-600">Ingénieure Logiciel</p> | |
| <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> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-green-600"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-green-600"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-green-600"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| <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> | |
| </div> | |
| <!-- Mentor 2 --> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md text-center p-6 card-hover transition duration-300 ease-in-out"> | |
| <div class="relative mx-auto h-32 w-32 rounded-full overflow-hidden border-4 border-green-100"> | |
| <img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/men/82.jpg" alt="Mentor"> | |
| <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"> | |
| <a href="#" class="text-white"><i class="fas fa-envelope text-2xl"></i></a> | |
| </div> | |
| </div> | |
| <h3 class="mt-4 text-xl font-semibold text-gray-900">Mohamed Keita</h3> | |
| <p class="text-green-600">Expert Financier</p> | |
| <p class="mt-2 text-gray-600 text-sm">Ancien directeur financier de plusieurs banques panafricaines, spécialiste en gestion de patrimoine.</p> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-green-600"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-green-600"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| <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> | |
| </div> | |
| <!-- Mentor 3 --> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md text-center p-6 card-hover transition duration-300 ease-in-out"> | |
| <div class="relative mx-auto h-32 w-32 rounded-full overflow-hidden border-4 border-green-100"> | |
| <img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/women/28.jpg" alt="Mentor"> | |
| <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"> | |
| <a href="#" class="text-white"><i class="fas fa-envelope text-2xl"></i></a> | |
| </div> | |
| </div> | |
| <h3 class="mt-4 text-xl font-semibold text-gray-900">Aïssatou Diop</h3> | |
| <p class="text-green-600">Designer UX/UI</p> | |
| <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> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-green-600"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-green-600"> | |
| <i class="fab fa-behance"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-green-600"> | |
| <i class="fab fa-dribbble"></i> | |
| </a> | |
| </div> | |
| <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> | |
| </div> | |
| <!-- Mentor 4 --> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md text-center p-6 card-hover transition duration-300 ease-in-out"> | |
| <div class="relative mx-auto h-32 w-32 rounded-full overflow-hidden border-4 border-green-100"> | |
| <img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Mentor"> | |
| <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"> | |
| <a href="#" class="text-white"><i class="fas fa-envelope text-2xl"></i></a> | |
| </div> | |
| </div> | |
| <h3 class="mt-4 text-xl font-semibold text-gray-900">Yannick Kouamé</h3> | |
| <p class="text-green-600">Expert en Agriculture</p> | |
| <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> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-green-600"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-green-600"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <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"> | |
| Voir tous les mentors | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Forum & Polls Section --> | |
| <div class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-green-600 font-semibold tracking-wide uppercase">Communauté</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Posez vos questions et participez | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-8 lg:grid-cols-2"> | |
| <!-- Forum Questions --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="bg-green-600 px-6 py-4"> | |
| <h3 class="text-lg font-medium text-white flex items-center"> | |
| <i class="fas fa-comments mr-2"></i> Dernières questions du forum | |
| </h3> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <!-- Question 1 --> | |
| <div class="p-6 hover:bg-gray-50 transition duration-150 ease-in-out"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-green-100 rounded-md p-2"> | |
| <i class="fas fa-question text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-base font-medium text-gray-900">Comment optimiser son site pour le mobile en Afrique ?</h4> | |
| <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> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <span class="mr-3"><i class="fas fa-reply mr-1"></i> 5 réponses</span> | |
| <span><i class="fas fa-eye mr-1"></i> 32 vues</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Question 2 --> | |
| <div class="p-6 hover:bg-gray-50 transition duration-150 ease-in-out"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-green-100 rounded-md p-2"> | |
| <i class="fas fa-question text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-base font-medium text-gray-900">Quelles sont les meilleures pratiques pour le marketing digital en Afrique francophone ?</h4> | |
| <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> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <span class="mr-3"><i class="fas fa-reply mr-1"></i> 3 réponses</span> | |
| <span><i class="fas fa-eye mr-1"></i> 45 vues</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Question 3 --> | |
| <div class="p-6 hover:bg-gray-50 transition duration-150 ease-in-out"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-green-100 rounded-md p-2"> | |
| <i class="fas fa-question text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-base font-medium text-gray-900">Quel framework JavaScript recommandez-vous pour un débutant ?</h4> | |
| <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> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <span class="mr-3"><i class="fas fa-reply mr-1"></i> 12 réponses</span> | |
| <span><i class="fas fa-eye mr-1"></i> 78 vues</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Question 4 --> | |
| <div class="p-6 hover:bg-gray-50 transition duration-150 ease-in-out"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-green-100 rounded-md p-2"> | |
| <i class="fas fa-question text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <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> | |
| <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> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <span class="mr-3"><i class="fas fa-reply mr-1"></i> 8 réponses</span> | |
| <span><i class="fas fa-eye mr-1"></i> 64 vues</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-4 text-right"> | |
| <a href="#" class="text-sm font-medium text-green-600 hover:text-green-500"> | |
| Voir toutes les questions <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Polls --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="bg-green-600 px-6 py-4"> | |
| <h3 class="text-lg font-medium text-white flex items-center"> | |
| <i class="fas fa-poll mr-2"></i> Sondages récents | |
| </h3> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <!-- Poll 1 --> | |
| <div class="p-6"> | |
| <h4 class="text-base font-medium text-gray-900">Quel est le plus grand défi pour les startups en Afrique aujourd'hui ?</h4> | |
| <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> | |
| <div class="mt-4 space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Accès au financement</span> | |
| <span>42%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Infrastructures inadéquates</span> | |
| <span>28%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 28%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Talent et compétences</span> | |
| <span>18%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 18%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Réglementation</span> | |
| <span>12%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 12%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm text-gray-500"> | |
| <i class="fas fa-users mr-1"></i> 156 participants | |
| </div> | |
| </div> | |
| <!-- Poll 2 --> | |
| <div class="p-6"> | |
| <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> | |
| <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> | |
| <div class="mt-4 space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Mobile Money</span> | |
| <span>35%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 35%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>IA et Machine Learning</span> | |
| <span>25%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 25%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Blockchain</span> | |
| <span>20%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 20%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Énergie solaire</span> | |
| <span>20%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 20%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm text-gray-500"> | |
| <i class="fas fa-users mr-1"></i> 203 participants | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-4 text-right"> | |
| <a href="#" class="text-sm font-medium text-green-600 hover:text-green-500"> | |
| Voir tous les sondages <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-green-600 font-semibold tracking-wide uppercase">Témoignages</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Ce que disent nos apprenants | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Testimonial"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Aminata Diallo</h4> | |
| <p class="text-green-600">Étudiante en Développement Web</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600"> | |
| "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." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt="Testimonial"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Jean Bosco</h4> | |
| <p class="text-green-600">Entrepreneur Agricole</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600"> | |
| "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." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Testimonial"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Fatima Ouedraogo</h4> | |
| <p class="text-green-600">Designer Freelance</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600"> | |
| "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." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-green-700"> | |
| <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| <span class="block">Prêt à développer vos compétences ?</span> | |
| <span class="block">Rejoignez EduAfrika dès aujourd'hui.</span> | |
| </h2> | |
| <p class="mt-4 text-lg leading-6 text-green-200"> | |
| Des milliers d'apprenants africains ont déjà transformé leur carrière grâce à notre plateforme. | |
| </p> | |
| <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"> | |
| Commencer maintenant | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold tracking-wider uppercase">EduAfrika</h3> | |
| <p class="mt-4 text-gray-400 text-sm"> | |
| La première plateforme d'apprentissage en ligne conçue spécifiquement pour le contexte africain. | |
| </p> | |
| <div class="mt-4 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Navigation</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Accueil</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Cours</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Mentors</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Forum</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Sondages</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Support</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Centre d'aide</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Nous contacter</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Politique de confidentialité</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Conditions d'utilisation</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Newsletter</h3> | |
| <p class="mt-4 text-gray-400 text-sm"> | |
| Abonnez-vous à notre newsletter pour recevoir les dernières actualités et offres spéciales. | |
| </p> | |
| <div class="mt-4"> | |
| <form class="flex"> | |
| <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l-md text-sm w-full focus:outline-none"> | |
| <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-r-md text-sm"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between"> | |
| <p class="text-gray-400 text-sm"> | |
| © 2023 EduAfrika. Tous droits réservés. | |
| </p> | |
| <div class="mt-4 md:mt-0"> | |
| <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"> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| const expanded = this.getAttribute('aria-expanded') === 'true'; | |
| this.setAttribute('aria-expanded', !expanded); | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Poll animation | |
| const pollBars = document.querySelectorAll('[style*="width:"]'); | |
| pollBars.forEach(bar => { | |
| const width = bar.style.width; | |
| bar.style.width = '0'; | |
| setTimeout(() => { | |
| bar.style.width = width; | |
| }, 100); | |
| }); | |
| }); | |
| </script> | |
| <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> | |
| </html> |