Spaces:
Running
Running
| <html lang="fr" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Knowledge for All | Démocratiser le savoir par l'IA</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| .card-transition { transition: all 0.3s ease; } | |
| .toast { transition: opacity 0.3s ease-in-out; } | |
| </style> | |
| </head> | |
| <body class="bg-slate-50 text-slate-900 font-sans antialiased"> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <nav class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between"> | |
| <h1 class="text-xl font-bold text-blue-900">Knowledge for All</h1> | |
| <a href="#contact" class="px-4 py-2 bg-blue-600 text-white rounded-full text-sm font-semibold hover:bg-blue-700 transition">Contact</a> | |
| </nav> | |
| </header> | |
| <main class="max-w-6xl mx-auto px-6 py-16 md:py-24"> | |
| <section class="text-center mb-24"> | |
| <h2 class="text-4xl md:text-6xl font-extrabold text-slate-900 mb-6">La connaissance est un <span class="text-emerald-600">droit fondamental</span>, pas un privilège.</h2> | |
| <p class="text-lg md:text-xl text-slate-600 max-w-2xl mx-auto">Nous sommes une organisation à but non lucratif dédiée à la démocratisation de l'accès à l'information et à l'éducation grâce à l'intelligence artificielle.</p> | |
| </section> | |
| <!-- Nouvelle section Histoire --> | |
| <section class="mb-24 bg-blue-50 p-10 rounded-3xl border border-blue-100"> | |
| <h3 class="text-3xl font-bold text-blue-900 mb-6 text-center">Une initiative portée par la passion</h3> | |
| <p class="text-lg text-slate-700 max-w-3xl mx-auto leading-relaxed text-center"> | |
| Knowledge for All est une initiative née au Cameroun, portée par un jeune élève de première passionné par les technologies de pointe et les sciences fondamentales. Convaincu que l'IA est le levier majeur de notre siècle pour réduire les inégalités, j'invite tout le monde — développeurs, chercheurs et esprits curieux — à rejoindre cette mission pour rendre le savoir universellement accessible. | |
| </p> | |
| </section> | |
| <section class="mb-24"> | |
| <h3 class="text-3xl font-bold text-center mb-12">Nos Piliers d'action</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 card-transition hover:shadow-xl hover:-translate-y-1"> | |
| <div class="text-emerald-500 mb-4 text-2xl">🌐</div> | |
| <h4 class="text-xl font-bold mb-3">Accessibilité</h4> | |
| <p class="text-slate-600">Développer des modèles légers et efficaces pour fonctionner sur du matériel accessible partout dans le monde.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 card-transition hover:shadow-xl hover:-translate-y-1"> | |
| <div class="text-blue-500 mb-4 text-2xl">🗣️</div> | |
| <h4 class="text-xl font-bold mb-3">Inclusivité Linguistique</h4> | |
| <p class="text-slate-600">Créer des datasets et modèles multilingues pour briser les barrières de la langue.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 card-transition hover:shadow-xl hover:-translate-y-1"> | |
| <div class="text-amber-500 mb-4 text-2xl">📚</div> | |
| <h4 class="text-xl font-bold mb-3">Éducation par l'IA</h4> | |
| <p class="text-slate-600">Construire des outils facilitant l'apprentissage autonome et l'accès aux ressources académiques.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 card-transition hover:shadow-xl hover:-translate-y-1"> | |
| <div class="text-indigo-500 mb-4 text-2xl">🔬</div> | |
| <h4 class="text-xl font-bold mb-3">Open Science</h4> | |
| <p class="text-slate-600">Partager ouvertement nos méthodologies pour favoriser une collaboration mondiale et transparente.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contact" class="bg-blue-900 rounded-3xl p-12 text-center text-white"> | |
| <h3 class="text-3xl font-bold mb-6">Tu souhaites contribuer ?</h3> | |
| <p class="text-blue-200 mb-8 max-w-lg mx-auto">Le savoir doit circuler librement. Que tu sois développeur, chercheur ou pédagogue, rejoins l'aventure.</p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button onclick="copyEmail()" class="px-8 py-3 bg-emerald-500 rounded-full font-bold hover:bg-emerald-600 transition">Nous contacter</button> | |
| <a href="https://huggingface.co/organizations/knowledge-for-all/repositories" target="_blank" class="px-8 py-3 bg-white/10 rounded-full font-bold hover:bg-white/20 transition">Voir nos projets</a> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="text-center py-12 text-slate-500 text-sm"> | |
| <p>© 2026 Knowledge for All - Democratizing intelligence for humanity.</p> | |
| </footer> | |
| <div id="toast" class="fixed bottom-5 right-5 bg-slate-900 text-white px-6 py-3 rounded-lg shadow-lg opacity-0 pointer-events-none toast"> | |
| Email copié ! | |
| </div> | |
| <script> | |
| function copyEmail() { | |
| const email = "contact@knowledge-for-all.org"; | |
| const textarea = document.createElement("textarea"); | |
| textarea.value = email; | |
| document.body.appendChild(textarea); | |
| textarea.select(); | |
| document.execCommand("copy"); | |
| document.body.removeChild(textarea); | |
| const toast = document.getElementById("toast"); | |
| toast.style.opacity = "1"; | |
| setTimeout(() => { toast.style.opacity = "0"; }, 2000); | |
| } | |
| </script> | |
| </body> | |
| </html> |