| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Kudos IA - Plateforme intelligente pour bourses d'études</title> |
| <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style"> |
| <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"> |
| <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> |
| |
| .loader { |
| border: 5px solid #f3f3f3; |
| border-top: 5px solid #3b82f6; |
| border-radius: 50%; |
| width: 50px; |
| height: 50px; |
| animation: spin 1s linear infinite; |
| position: fixed; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| z-index: 9999; |
| } |
| @keyframes spin { |
| 0% { transform: translate(-50%, -50%) rotate(0deg); } |
| 100% { transform: translate(-50%, -50%) rotate(360deg); } |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%); |
| transition: background 0.5s ease; |
| } |
| .gradient-bg:hover { |
| background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%); |
| } |
| |
| .feature-card { |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| opacity: 0; |
| transform: translateY(20px); |
| will-change: transform, opacity; |
| } |
| .feature-card.animated { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| .feature-card:hover { |
| transform: translateY(-10px) scale(1.02); |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); |
| } |
| |
| .pricing-card { |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| opacity: 0; |
| transform: scale(0.95); |
| } |
| .pricing-card.animated { |
| opacity: 1; |
| transform: scale(1); |
| } |
| .pricing-card:hover { |
| transform: scale(1.05); |
| } |
| |
| .floating { |
| animation: floating 3s ease-in-out infinite; |
| } |
| @keyframes floating { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-15px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .animate-fadeIn { |
| animation: fadeIn 0.8s ease-out forwards; |
| } |
| |
| .btn-hover { |
| transition: all 0.3s ease; |
| transform: perspective(1px) translateZ(0); |
| } |
| .btn-hover:hover { |
| transform: perspective(1px) translateZ(0) scale(1.05); |
| box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.2); |
| } |
| |
| .text-gradient { |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| display: inline-block; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50"> |
| |
| <header class="gradient-bg text-white"> |
| <div class="container mx-auto px-4 py-8"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-graduation-cap text-3xl"></i> |
| <h1 class="text-2xl font-bold">Kudos IA</h1> |
| </div> |
| <nav class="hidden md:block"> |
| <ul class="flex space-x-8 items-center"> |
| <li><a href="#features" class="hover:text-gray-200 transition">Fonctionnalités</a></li> |
| <li><a href="#formations" class="hover:text-gray-200 transition">Formations</a></li> |
| <li><a href="#pricing" class="hover:text-gray-200 transition">Abonnements</a></li> |
| <li><a href="#about" class="hover:text-gray-200 transition">À propos</a></li> |
| <li><a href="#contact" class="hover:text-gray-200 transition">Contact</a></li> |
| <li class="relative group"> |
| <button class="flex items-center hover:text-gray-200 transition"> |
| <i class="fas fa-globe mr-1"></i> |
| <span>FR</span> |
| <i class="fas fa-chevron-down ml-1 text-xs"></i> |
| </button> |
| <div class="absolute right-0 mt-2 w-20 bg-white rounded-md shadow-lg hidden group-hover:block"> |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">EN</a> |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">FR</a> |
| </div> |
| </li> |
| </ul> |
| </nav> |
| <button class="md:hidden text-2xl" id="menu-toggle"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| |
| |
| <div id="mobile-menu" class="hidden md:hidden mt-4"> |
| <ul class="space-y-4"> |
| <li><a href="#features" class="block hover:text-gray-200 transition">Fonctionnalités</a></li> |
| <li><a href="#formations" class="block hover:text-gray-200 transition">Formations</a></li> |
| <li><a href="#pricing" class="block hover:text-gray-200 transition">Abonnements</a></li> |
| <li><a href="#about" class="block hover:text-gray-200 transition">À propos</a></li> |
| <li><a href="#contact" class="block hover:text-gray-200 transition">Contact</a></li> |
| <li class="pt-4 border-t border-gray-700"> |
| <div class="flex items-center"> |
| <i class="fas fa-globe mr-2"></i> |
| <select class="bg-transparent border border-gray-300 rounded px-2 py-1 text-white"> |
| <option value="fr">Français</option> |
| <option value="en">English</option> |
| </select> |
| </div> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="mt-16 md:mt-24 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0"> |
| <h2 class="text-4xl md:text-5xl font-bold leading-tight mb-6 animate-on-scroll"> |
| <span class="text-green-500">Votre plateforme intelligente</span> pour réussir les candidatures aux bourses |
| </h2> |
| <p class="text-xl mb-8 text-gray-200"> |
| Mastercard Foundation et bien d'autres. Optimisez vos chances de réussite avec notre IA spécialisée. |
| </p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <a href="#pricing" class="bg-white text-indigo-600 px-8 py-3 rounded-lg font-semibold text-center hover:bg-gray-100 transition"> |
| Essai gratuit |
| </a> |
| <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"> |
| En savoir plus |
| </a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <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" |
| alt="Étudiants africains" |
| class="rounded-xl shadow-2xl w-full max-w-md floating"> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="features" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">✨ Fonctionnalités Clés</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| Découvrez comment Kudos IA révolutionne votre processus de candidature |
| </p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| |
| <div class="feature-card bg-gray-50 p-6 rounded-xl transition duration-300"> |
| <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-search text-blue-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Diagnostic Automatique</h3> |
| <p class="text-gray-600"> |
| Évalue la compatibilité de votre profil avec les critères de la Mastercard Foundation et génère un feedback personnalisé. |
| </p> |
| </div> |
| |
| |
| <div class="feature-card bg-gray-50 p-6 rounded-xl transition duration-300"> |
| <div class="bg-green-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-microphone text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Simulateur d'Entretien</h3> |
| <p class="text-gray-600"> |
| Questions authentiques avec analyse des réponses orales ou écrites, détection de mots-clés et langage. |
| </p> |
| </div> |
| |
| |
| <div class="feature-card bg-gray-50 p-6 rounded-xl transition duration-300"> |
| <div class="bg-pink-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-book-open text-pink-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Bibliothèque de Ressources</h3> |
| <p class="text-gray-600"> |
| Exemples de CV et lettres réels de boursiers admis, guides téléchargeables et webinaires exclusifs. |
| </p> |
| </div> |
| |
| |
| <div class="feature-card bg-gray-50 p-6 rounded-xl transition duration-300"> |
| <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-users text-blue-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Espace Collaboratif</h3> |
| <p class="text-gray-600"> |
| Tableau de bord pour mentors avec annotation en temps réel et messagerie sécurisée intégrée. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">🎓 Nos Parcours de Formation</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| 3 programmes complets avec vidéos et certificats pour chaque étape |
| </p> |
| </div> |
|
|
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300"> |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> |
| <i class="fas fa-clipboard-check text-blue-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-4">Avant la candidature</h3> |
| <p class="text-gray-600 text-center mb-6"> |
| Préparation optimale avant de postuler |
| </p> |
| <div class="text-center text-blue-600 font-medium mb-4"> |
| <i class="fas fa-play-circle mr-1"></i> 12 vidéos + certificat |
| </div> |
| <ul class="space-y-3 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> |
| <span>Préparation du dossier idéal</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> |
| <span>Identification des bourses pertinentes</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> |
| <span>Renforcement des compétences clés</span> |
| </li> |
| </ul> |
| </div> |
|
|
| |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300"> |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> |
| <i class="fas fa-edit text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-4">Pendant la candidature</h3> |
| <p class="text-gray-600 text-center mb-6"> |
| Accompagnement pendant tout le processus |
| </p> |
| <div class="text-center text-purple-600 font-medium mb-4"> |
| <i class="fas fa-play-circle mr-1"></i> 15 vidéos + certificat |
| </div> |
| <ul class="space-y-3 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> |
| <span>Rédaction des documents percutants</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> |
| <span>Simulations d'entretien complètes</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> |
| <span>Gestion des délais et suivi</span> |
| </li> |
| </ul> |
| </div> |
|
|
| |
| <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300"> |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> |
| <i class="fas fa-chart-line text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-4">Après la réponse</h3> |
| <p class="text-gray-600 text-center mb-6"> |
| Même en cas de refus |
| </p> |
| <div class="text-center text-green-600 font-medium mb-4"> |
| <i class="fas fa-play-circle mr-1"></i> 8 vidéos + certificat |
| </div> |
| <ul class="space-y-3 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Préparation à l'intégration (si accepté)</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Analyse des feedbacks (si refusé)</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Plan de reprise et alternatives</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="formations" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">🎓 Parcours de Formation</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| 3 programmes complets avec vidéos et certificats pour chaque étape |
| </p> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white p-8 rounded-xl shadow-lg transition duration-300 hover:shadow-xl"> |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> |
| <i class="fas fa-clipboard-check text-blue-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-4">Avant la candidature</h3> |
| <ul class="space-y-3 mb-6 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> |
| <span>Préparation du dossier idéal</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> |
| <span>Identification des bourses pertinentes</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> |
| <span>Renforcement des compétences clés</span> |
| </li> |
| </ul> |
| <div class="text-center text-sm text-blue-600 font-medium"> |
| <i class="fas fa-play-circle mr-1"></i> 12 vidéos + certificat |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-8 rounded-xl shadow-lg transition duration-300 hover:shadow-xl"> |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> |
| <i class="fas fa-edit text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-4">Pendant la candidature</h3> |
| <ul class="space-y-3 mb-6 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> |
| <span>Rédaction des documents percutants</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> |
| <span>Simulations d'entretien complètes</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-purple-500 mt-1 mr-2"></i> |
| <span>Gestion des délais et suivi</span> |
| </li> |
| </ul> |
| <div class="text-center text-sm text-purple-600 font-medium"> |
| <i class="fas fa-play-circle mr-1"></i> 15 vidéos + certificat |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-8 rounded-xl shadow-lg transition duration-300 hover:shadow-xl"> |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> |
| <i class="fas fa-chart-line text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-4">Après la réponse</h3> |
| <ul class="space-y-3 mb-6 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Préparation à l'intégration (si accepté)</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Analyse des feedbacks (si refusé)</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Plan de reprise et alternatives</span> |
| </li> |
| </ul> |
| <div class="text-center text-sm text-green-600 font-medium"> |
| <i class="fas fa-play-circle mr-1"></i> 8 vidéos + certificat |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="pricing" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">💼 Plans d'Abonnement</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| Choisissez le plan qui correspond à vos besoins |
| </p> |
| </div> |
| |
| <div class="overflow-x-auto mb-8"> |
| <table class="min-w-full bg-white rounded-lg overflow-hidden shadow-md"> |
| <thead class="bg-gray-100"> |
| <tr> |
| <th class="py-4 px-6 text-left">Fonctionnalité</th> |
| <th class="py-4 px-6 text-center">Gratuit</th> |
| <th class="py-4 px-6 text-center bg-blue-50">Standard<br><span class="text-lg font-semibold">25,99 $/mois</span></th> |
| <th class="py-4 px-6 text-center bg-green-50">Premium<br><span class="text-lg font-semibold">37,99 $/mois</span></th> |
| </tr> |
| </thead> |
| <tbody class="divide-y divide-gray-200"> |
| <tr> |
| <td class="py-4 px-6">Analyse IA de la candidature</td> |
| <td class="py-4 px-6 text-center">1/mois (basique)</td> |
| <td class="py-4 px-6 text-center bg-indigo-50">Illimitée (détaillée)</td> |
| <td class="py-4 px-6 text-center bg-purple-50">Illimitée (priorité)</td> |
| </tr> |
| <tr> |
| <td class="py-4 px-6">Simulations d'entretien</td> |
| <td class="py-4 px-6 text-center">1 session (5 questions)</td> |
| <td class="py-4 px-6 text-center bg-indigo-50">5/mois + feedback</td> |
| <td class="py-4 px-6 text-center bg-purple-50">Illimitées + coaching</td> |
| </tr> |
| <tr> |
| <td class="py-4 px-6">Modèles de documents</td> |
| <td class="py-4 px-6 text-center">2 modèles de base</td> |
| <td class="py-4 px-6 text-center bg-indigo-50">20+ modèles</td> |
| <td class="py-4 px-6 text-center bg-purple-50">50+ modèles exclusifs</td> |
| </tr> |
| <tr> |
| <td class="py-4 px-6">Support utilisateur</td> |
| <td class="py-4 px-6 text-center">Email sous 72h</td> |
| <td class="py-4 px-6 text-center bg-indigo-50">Chat sous 24h</td> |
| <td class="py-4 px-6 text-center bg-purple-50">WhatsApp sous 1h</td> |
| </tr> |
| <tr> |
| <td class="py-4 px-6">Réduction (3 premiers mois)</td> |
| <td class="py-4 px-6 text-center">–</td> |
| <td class="py-4 px-6 text-center bg-indigo-50">-30% → 18,13 $</td> |
| <td class="py-4 px-6 text-center bg-purple-50">-30% → 26,59 $</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="pricing-card bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition duration-300"> |
| <h3 class="text-2xl font-bold text-center mb-4">Gratuit</h3> |
| <p class="text-gray-500 text-center mb-6">Découvrez nos fonctionnalités de base</p> |
| <div class="text-center mb-6"> |
| <span class="text-4xl font-bold">0$</span> |
| <span class="text-gray-500">/mois</span> |
| </div> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>1 analyse IA/mois</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>1 session d'entretien</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>2 modèles de documents</span> |
| </li> |
| </ul> |
| <button class="w-full bg-gray-200 text-gray-800 py-3 rounded-lg font-semibold hover:bg-gray-300 transition"> |
| Commencer |
| </button> |
| </div> |
| |
| |
| <div class="pricing-card bg-blue-50 p-8 rounded-xl shadow-lg border-2 border-blue-300 transform transition duration-300 relative"> |
| <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"> |
| POPULAIRE |
| </div> |
| <h3 class="text-2xl font-bold text-center mb-4">Standard</h3> |
| <p class="text-gray-700 text-center mb-6">Pour des candidatures optimisées</p> |
| <div class="text-center mb-6"> |
| <span class="text-4xl font-bold">25,99$</span> |
| <span class="text-gray-600">/mois</span> |
| <p class="text-sm text-indigo-600 mt-1">18,13$ les 3 premiers mois</p> |
| </div> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| <span>Analyses IA illimitées</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-indigo-500 mr-2"></i> |
| <span>5 simulations/mois + feedback</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-indigo-500 mr-2"></i> |
| <span>20+ modèles personnalisés</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-indigo-500 mr-2"></i> |
| <span>Support chat sous 24h</span> |
| </li> |
| </ul> |
| <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition"> |
| Essai gratuit |
| </button> |
| </div> |
| |
| |
| <div class="pricing-card bg-green-50 p-8 rounded-xl shadow-lg border border-green-200 transition duration-300"> |
| <h3 class="text-2xl font-bold text-center mb-4">Premium</h3> |
| <p class="text-gray-700 text-center mb-6">L'expérience complète</p> |
| <div class="text-center mb-6"> |
| <span class="text-4xl font-bold">37,99$</span> |
| <span class="text-gray-600">/mois</span> |
| <p class="text-sm text-purple-600 mt-1">26,59$ les 3 premiers mois</p> |
| </div> |
| <ul class="space-y-3 mb-8"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>Analyses IA prioritaires</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-purple-500 mr-2"></i> |
| <span>Simulations illimitées + coaching</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-purple-500 mr-2"></i> |
| <span>50+ modèles exclusifs</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-purple-500 mr-2"></i> |
| <span>Support WhatsApp sous 1h</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-purple-500 mr-2"></i> |
| <span>Accès aux webinaires</span> |
| </li> |
| </ul> |
| <button class="w-full bg-green-600 text-white py-3 rounded-lg font-semibold hover:bg-green-700 transition"> |
| Essai gratuit |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-8"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">📱 Expérience Utilisateur Optimisée</h2> |
| <ul class="space-y-4 text-lg text-gray-600 mb-8"> |
| <li class="flex items-start"> |
| <i class="fas fa-mobile-alt text-indigo-500 mt-1 mr-3"></i> |
| <span>Pensée pour mobile, avec mode hors connexion</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-language text-purple-500 mt-1 mr-3"></i> |
| <span>Interface disponible en anglais et en français</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-bell text-pink-500 mt-1 mr-3"></i> |
| <span>Notifications : rappels de délais, conseils quotidiens, progression</span> |
| </li> |
| </ul> |
| |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6 mt-12">🔐 Sécurité et Protection des Données</h2> |
| <ul class="space-y-4 text-lg text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-lock text-blue-500 mt-1 mr-3"></i> |
| <span>Données encryptées, conforme aux normes RGPD</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-credit-card text-green-500 mt-1 mr-3"></i> |
| <span>Paiements sécurisés via Stripe, Mobile Money, et Flutterwave</span> |
| </li> |
| </ul> |
| </div> |
| <div class="md:w-1/2"> |
| <div class="bg-gray-50 p-8 rounded-xl shadow-lg"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">📈 Objectifs d'Impact (2025–2027)</h3> |
| <div class="mb-8"> |
| <div class="flex justify-between mb-2"> |
| <span class="font-medium">Taux de satisfaction</span> |
| <span class="font-bold text-indigo-600">90%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-4"> |
| <div class="bg-indigo-600 h-4 rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-users text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg">50,000+ utilisateurs</h4> |
| <p class="text-gray-600">Objectif d'utilisateurs actifs d'ici fin 2025</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-graduation-cap text-purple-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg">75% de réussite</h4> |
| <p class="text-gray-600">Taux de candidatures réussies parmi nos utilisateurs</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="bg-pink-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-globe-africa text-pink-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg">10 pays africains</h4> |
| <p class="text-gray-600">Couverture géographique d'ici 2027</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 gradient-bg text-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à booster vos candidatures ?</h2> |
| <p class="text-xl text-gray-200 mb-8 max-w-2xl mx-auto"> |
| Rejoignez des milliers d'étudiants qui ont réussi grâce à Kudos IA |
| </p> |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
| <a href="#pricing" class="bg-white text-indigo-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition"> |
| Choisir un plan |
| </a> |
| <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"> |
| Nous contacter |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <i class="fas fa-graduation-cap text-2xl"></i> |
| <h3 class="text-xl font-bold">Kudos IA</h3> |
| </div> |
| <p class="text-gray-400"> |
| Votre plateforme intelligente pour réussir les candidatures aux bourses Mastercard Foundation et bien d'autres. |
| </p> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Liens rapides</h4> |
| <ul class="space-y-2"> |
| <li><a href="#features" class="text-gray-400 hover:text-white transition">Fonctionnalités</a></li> |
| <li><a href="#pricing" class="text-gray-400 hover:text-white transition">Abonnements</a></li> |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">À propos</a></li> |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Support</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Centre d'aide</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Nous suivre</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="bg-gray-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-indigo-600 transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="bg-gray-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-400 transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="bg-gray-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-pink-600 transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="bg-gray-800 w-10 h-10 rounded-full flex items-center justify-center hover:bg-red-600 transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| <div class="mt-4"> |
| <p class="text-gray-400">Disponible sur :</p> |
| <div class="flex space-x-2 mt-2"> |
| <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" |
| alt="App Store" class="h-10"> |
| <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" |
| alt="Play Store" class="h-10"> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 pt-8 text-center text-gray-400"> |
| <p>© 2025 Kudos IA. Tous droits réservés.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <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"> |
| <i class="fas fa-arrow-up"></i> |
| </button> |
|
|
| <script> |
| |
| const backToTopButton = document.getElementById('back-to-top'); |
| window.addEventListener('scroll', () => { |
| if (window.pageYOffset > 300) { |
| backToTopButton.classList.remove('opacity-0', 'invisible'); |
| backToTopButton.classList.add('opacity-100', 'visible'); |
| } else { |
| backToTopButton.classList.remove('opacity-100', 'visible'); |
| backToTopButton.classList.add('opacity-0', 'invisible'); |
| } |
| }); |
| backToTopButton.addEventListener('click', () => { |
| window.scrollTo({ |
| top: 0, |
| behavior: 'smooth' |
| }); |
| }); |
| |
| document.getElementById('menu-toggle').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| menu.classList.toggle('animate-fadeIn'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| if (targetElement) { |
| const offset = 80; |
| const elementPosition = targetElement.getBoundingClientRect().top; |
| const offsetPosition = elementPosition + window.pageYOffset - offset; |
| |
| window.scrollTo({ |
| top: offsetPosition, |
| behavior: 'smooth' |
| }); |
| |
| |
| const mobileMenu = document.getElementById('mobile-menu'); |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('animate-fadeOut'); |
| setTimeout(() => { |
| mobileMenu.classList.add('hidden'); |
| mobileMenu.classList.remove('animate-fadeOut'); |
| }, 300); |
| } |
| } |
| }); |
| }); |
| |
| |
| const observerOptions = { |
| threshold: 0.1, |
| rootMargin: '0px 0px -100px 0px' |
| }; |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| if (entry.target.classList.contains('feature-card') || |
| entry.target.classList.contains('pricing-card')) { |
| entry.target.classList.add('animated'); |
| } else { |
| entry.target.classList.add('animate-fadeIn'); |
| } |
| observer.unobserve(entry.target); |
| } |
| }); |
| }, observerOptions); |
| |
| |
| document.querySelectorAll('.feature-card, .pricing-card, section, .animate-on-scroll').forEach(el => { |
| observer.observe(el); |
| }); |
| |
| |
| window.addEventListener('scroll', function() { |
| const heroImg = document.querySelector('.floating'); |
| if (heroImg) { |
| const scrollPosition = window.pageYOffset; |
| heroImg.style.transform = `translateY(${scrollPosition * 0.2}px)`; |
| } |
| }); |
| |
| |
| document.querySelectorAll('button, a[href^="#"]').forEach(btn => { |
| btn.classList.add('btn-hover'); |
| }); |
| |
| |
| document.querySelectorAll('.language-switcher').forEach(switcher => { |
| switcher.addEventListener('change', function() { |
| const lang = this.value; |
| |
| |
| |
| |
| localStorage.setItem('preferredLanguage', lang); |
| alert('Language changed to ' + lang + '. This would reload the page with translated content in a real implementation.'); |
| }); |
| }); |
| </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=ddakou/kudosia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
