| | <!DOCTYPE html> |
| | <html lang="fr"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>KABUKA - Culture Mancagne</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> |
| | .page { |
| | display: none; |
| | } |
| | .active-page { |
| | display: block; |
| | } |
| | .active-menu { |
| | color: #b45309; |
| | font-weight: bold; |
| | border-bottom: 2px solid #b45309; |
| | } |
| | .hero-section { |
| | background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80'); |
| | background-size: cover; |
| | background-position: center; |
| | } |
| | .feature-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| | } |
| | .transition-all { |
| | transition: all 0.3s ease; |
| | } |
| | .live-badge { |
| | position: absolute; |
| | top: 10px; |
| | right: 10px; |
| | background-color: #ef4444; |
| | color: white; |
| | padding: 2px 8px; |
| | border-radius: 4px; |
| | font-size: 12px; |
| | font-weight: bold; |
| | animation: pulse 2s infinite; |
| | } |
| | @keyframes pulse { |
| | 0% { opacity: 1; } |
| | 50% { opacity: 0.7; } |
| | 100% { opacity: 1; } |
| | } |
| | .qr-code { |
| | width: 150px; |
| | height: 150px; |
| | background-color: #fff; |
| | padding: 10px; |
| | border-radius: 8px; |
| | margin: 0 auto; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | } |
| | .qr-code i { |
| | font-size: 100px; |
| | color: #000; |
| | } |
| | .tool-card { |
| | transition: all 0.3s ease; |
| | } |
| | .tool-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-amber-50"> |
| | |
| | <header class="bg-white shadow-md sticky top-0 z-50"> |
| | <div class="container mx-auto px-4 py-3"> |
| | <div class="flex justify-between items-center"> |
| | |
| | <div class="flex items-center space-x-2"> |
| | <div class="w-10 h-10 bg-amber-800 rounded-full flex items-center justify-center text-white font-bold text-lg">K</div> |
| | <span class="text-xl font-bold text-amber-900">KABUKA</span> |
| | </div> |
| | |
| | |
| | <nav class="hidden md:flex space-x-6"> |
| | <a href="#" class="menu-link py-2 px-1" data-page="home">Accueil</a> |
| | <a href="#" class="menu-link py-2 px-1" data-page="news">Actualités</a> |
| | <a href="#" class="menu-link py-2 px-1" data-page="about">À propos</a> |
| | <a href="#" class="menu-link py-2 px-1" data-page="library">Bibliothèque</a> |
| | <a href="#" class="menu-link py-2 px-1" data-page="agenda">Agenda</a> |
| | <a href="#" class="menu-link py-2 px-1" data-page="community">Communauté</a> |
| | <a href="#" class="menu-link py-2 px-1" data-page="membership">Adhésion</a> |
| | </nav> |
| | |
| | |
| | <button id="mobile-menu-button" class="md:hidden text-amber-900"> |
| | <i class="fas fa-bars text-xl"></i> |
| | </button> |
| | </div> |
| | |
| | |
| | <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4"> |
| | <a href="#" class="block menu-link py-2 px-1" data-page="home">Accueil</a> |
| | <a href="#" class="block menu-link py-2 px-1" data-page="news">Actualités</a> |
| | <a href="#" class="block menu-link py-2 px-1" data-page="about">À propos</a> |
| | <a href="#" class="block menu-link py-2 px-1" data-page="library">Bibliothèque</a> |
| | <a href="#" class="block menu-link py-2 px-1" data-page="agenda">Agenda</a> |
| | <a href="#" class="block menu-link py-2 px-1" data-page="community">Communauté</a> |
| | <a href="#" class="block menu-link py-2 px-1" data-page="membership">Adhésion</a> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | |
| | <main class="container mx-auto px-4"> |
| | |
| | <div id="home" class="page active-page"> |
| | |
| | <section class="hero-section text-white py-20 md:py-32 rounded-lg mb-12"> |
| | <div class="container mx-auto px-4 text-center"> |
| | <h1 class="text-4xl md:text-5xl font-bold mb-6">Découvrez la Culture Mancagne</h1> |
| | <p class="text-xl mb-8 max-w-2xl mx-auto">Préserver et promouvoir le riche héritage culturel des Mancagnes à travers le monde</p> |
| | <div class="flex flex-wrap justify-center gap-4"> |
| | <a href="#" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium transition-all" data-page="membership">Devenir Membre</a> |
| | <a href="#" class="bg-white hover:bg-gray-100 text-amber-800 px-6 py-3 rounded-lg font-medium transition-all" data-page="about">En savoir plus</a> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="mb-16"> |
| | <h2 class="text-3xl font-bold text-center text-amber-900 mb-8">Événements en Direct</h2> |
| | |
| | |
| | <div class="mb-8 bg-white rounded-xl shadow-md overflow-hidden transition-all hover:shadow-lg relative"> |
| | <div class="live-badge">EN DIRECT</div> |
| | <div class="relative pb-[56.25%] bg-gray-200"> |
| | <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/Dte9L0f512M" frameborder="0" allowfullscreen></iframe> |
| | </div> |
| | <div class="p-4"> |
| | <h3 class="text-xl font-bold mb-2">Séminaire Culturel</h3> |
| | <p class="text-gray-600 mb-2">Discussion sur les traditions mancagnes</p> |
| | <div class="flex items-center text-sm text-gray-500"> |
| | <i class="fab fa-youtube text-red-600 mr-2"></i> |
| | <span>YouTube Live</span> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="mb-8 bg-white rounded-xl shadow-md overflow-hidden transition-all hover:shadow-lg"> |
| | <div class="relative pb-[56.25%] bg-gray-200 flex items-center justify-center"> |
| | <div class="absolute text-center p-4"> |
| | <i class="fas fa-video text-4xl text-amber-600 mb-3"></i> |
| | <h3 class="text-xl font-bold">Prochain Direct</h3> |
| | <p class="text-gray-600">Atelier de langue mancagne</p> |
| | <div class="mt-4"> |
| | <div class="flex items-center justify-center text-sm text-gray-500"> |
| | <i class="fas fa-clock text-amber-600 mr-2"></i> |
| | <span>Demain à 15h00</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="p-4"> |
| | <a href="#" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded text-sm" data-page="agenda">Programmer un rappel</a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all hover:shadow-lg"> |
| | <div class="relative pb-[56.25%] bg-gray-200"> |
| | <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/So4OwGHN1S8" frameborder="0" allowfullscreen></iframe> |
| | </div> |
| | <div class="p-4"> |
| | <h3 class="text-lg font-bold mb-1">Réunion Communautaire</h3> |
| | <p class="text-sm text-gray-600 mb-1">Échanges avec les membres de KABUKA</p> |
| | <div class="flex items-center text-xs text-gray-500"> |
| | <i class="fab fa-youtube text-red-600 mr-1"></i> |
| | <span>YouTube Live</span> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all hover:shadow-lg"> |
| | <div class="relative pb-[56.25%] bg-gray-200"> |
| | <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/hHOWwm11wak" frameborder="0" allowfullscreen></iframe> |
| | </div> |
| | <div class="p-4"> |
| | <h3 class="text-lg font-bold mb-1">Message de Paix du Roi</h3> |
| | <p class="text-sm text-gray-600 mb-1">Message aux Sénégalais</p> |
| | <div class="flex items-center text-xs text-gray-500"> |
| | <i class="fab fa-youtube text-red-600 mr-1"></i> |
| | <span>YouTube</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="mb-16"> |
| | <h2 class="text-3xl font-bold text-center text-amber-900 mb-12">Nos Principales Activités</h2> |
| | <div class="grid md:grid-cols-3 gap-8"> |
| | |
| | <div class="bg-white rounded-xl shadow-md p-6 feature-card transition-all"> |
| | <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4"> |
| | <i class="fas fa-book-open text-2xl text-amber-600"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Bibliothèque Numérique</h3> |
| | <p class="text-gray-600">Accédez à notre collection unique de ressources sur la culture mancagne.</p> |
| | <a href="#" class="mt-4 inline-block text-amber-600 font-medium" data-page="library">Explorer →</a> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md p-6 feature-card transition-all"> |
| | <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4"> |
| | <i class="fas fa-calendar-alt text-2xl text-amber-600"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Événements Culturels</h3> |
| | <p class="text-gray-600">Découvrez nos prochains festivals, ateliers et conférences.</p> |
| | <a href="#" class="mt-4 inline-block text-amber-600 font-medium" data-page="agenda">Voir l'agenda →</a> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-md p-6 feature-card transition-all"> |
| | <div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-4"> |
| | <i class="fas fa-users text-2xl text-amber-600"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Communauté Active</h3> |
| | <p class="text-gray-600">Rejoignez notre réseau de passionnés de culture mancagne.</p> |
| | <a href="#" class="mt-4 inline-block text-amber-600 font-medium" data-page="community">Nous rejoindre →</a> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="mb-16"> |
| | <div class="flex justify-between items-center mb-8"> |
| | <h2 class="text-3xl font-bold text-amber-900">Dernières Actualités</h2> |
| | <a href="#" class="text-amber-700 font-medium" data-page="news">Voir tout →</a> |
| | </div> |
| | |
| | <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| | |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all hover:shadow-lg"> |
| | <img src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Actualité" class="w-full h-48 object-cover"> |
| | <div class="p-4"> |
| | <span class="text-xs text-amber-600">15 Juin 2023</span> |
| | <h3 class="text-xl font-bold my-2">Lancement du Festival Culturel</h3> |
| | <p class="text-gray-600 mb-4">Découvrez le programme complet du Festival Culturel International de Bula.</p> |
| | <a href="https://www.youtube.com/watch?v=He_XLpXhkqM" class="text-amber-700 font-medium">Voir le discours →</a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all hover:shadow-lg"> |
| | <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Actualité" class="w-full h-48 object-cover"> |
| | <div class="p-4"> |
| | <span class="text-xs text-amber-600">10 Juin 2023</span> |
| | <h3 class="text-xl font-bold my-2">Nouvelle Publication</h3> |
| | <p class="text-gray-600 mb-4">L'Encyclopédie de la Culture Mankagne est maintenant disponible.</p> |
| | <a href="https://www.kafunel.com/wp-content/uploads/2019/11/Mancagnes.pdf?srsltid=AfmBOopVcknyZXcBZF86afy6MJ8M4WQQQG_GxfaMoKnBViuE_Qumbo0P" class="text-amber-700 font-medium">Télécharger →</a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all hover:shadow-lg"> |
| | <img src="https://images.unsplash.com/photo-1511578314322-379afb476865?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" alt="Actualité" class="w-full h-48 object-cover"> |
| | <div class="p-4"> |
| | <span class="text-xs text-amber-600">5 Juin 2023</span> |
| | <h3 class="text-xl font-bold my-2">Atelier de Danse Traditionnelle</h3> |
| | <p class="text-gray-600 mb-4">Apprenez les pas de base des danses mancagnes avec nos experts.</p> |
| | <a href="https://www.youtube.com/watch?v=ca7KEAdgx-0" class="text-amber-700 font-medium">Voir la danse Belaata →</a> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="mb-16"> |
| | <h2 class="text-3xl font-bold text-center text-amber-900 mb-8">Restez Connecté</h2> |
| | |
| | <div class="grid md:grid-cols-3 gap-6 mb-8"> |
| | |
| | <div class="bg-white rounded-lg shadow-md p-6 text-center"> |
| | <h3 class="text-xl font-bold mb-4">Groupe Principal KABUKA</h3> |
| | <p class="text-gray-600 mb-4">Groupe principal pour tous les membres de KABUKA</p> |
| | |
| | <div class="qr-code mb-4"> |
| | <i class="fas fa-qrcode"></i> |
| | </div> |
| | |
| | <p class="text-sm text-gray-500 mb-4">Scannez ce code QR avec votre téléphone ou cliquez sur le bouton ci-dessous pour rejoindre le groupe.</p> |
| | |
| | <a href="#" class="inline-block bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg"> |
| | <i class="fab fa-whatsapp mr-2"></i> Rejoindre le groupe |
| | </a> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-lg shadow-md p-6 text-center"> |
| | <h3 class="text-xl font-bold mb-4">Commission Communication</h3> |
| | <p class="text-gray-600 mb-4">Groupe de travail pour la commission communication</p> |
| | |
| | <div class="qr-code mb-4"> |
| | <i class="fas fa-qrcode"></i> |
| | </div> |
| | |
| | <p class="text-sm text-gray-500 mb-4">Scannez ce code QR avec votre téléphone ou cliquez sur le bouton ci-dessous pour rejoindre le groupe.</p> |
| | |
| | <a href="#" class="inline-block bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg"> |
| | <i class="fab fa-whatsapp mr-2"></i> Rejoindre le groupe |
| | </a> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-lg shadow-md p-6 text-center"> |
| | <h3 class="text-xl font-bold mb-4">Événements Culturels</h3> |
| | <p class="text-gray-600 mb-4">Informations et discussions sur les événements culturels</p> |
| | |
| | <div class="qr-code mb-4"> |
| | <i class="fas fa-qrcode"></i> |
| | </div> |
| | |
| | <p class="text-sm text-gray-500 mb-4">Scannez ce code QR avec votre téléphone ou cliquez sur le bouton ci-dessous pour rejoindre le groupe.</p> |
| | |
| | <a href="#" class="inline-block bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg"> |
| | <i class="fab fa-whatsapp mr-2"></i> Rejoindre le groupe |
| | </a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-lg shadow-md p-6 mb-8"> |
| | <h3 class="text-2xl font-bold mb-6 text-amber-800">Plateformes de Réunion</h3> |
| | <p class="mb-6">Les outils que nous utilisons pour nos rencontres virtuelles</p> |
| | |
| | <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8"> |
| | <div class="bg-gray-100 p-4 rounded-lg text-center"> |
| | <i class="fab fa-google text-3xl text-blue-500 mb-2"></i> |
| | <h4 class="font-bold">Google Meet</h4> |
| | <p class="text-sm text-gray-600">Pour les assemblées générales et grandes réunions</p> |
| | </div> |
| | <div class="bg-gray-100 p-4 rounded-lg text-center"> |
| | <i class="fab fa-zoom text-3xl text-blue-400 mb-2"></i> |
| | <h4 class="font-bold">Zoom</h4> |
| | <p class="text-sm text-gray-600">Pour les réunions du bureau et les formations</p> |
| | </div> |
| | <div class="bg-gray-100 p-4 rounded-lg text-center"> |
| | <i class="fab fa-whatsapp text-3xl text-green-500 mb-2"></i> |
| | <h4 class="font-bold">WhatsApp Call</h4> |
| | <p class="text-sm text-gray-600">Pour les réunions rapides et informelles</p> |
| | </div> |
| | <div class="bg-gray-100 p-4 rounded-lg text-center"> |
| | <i class="fab fa-telegram text-3xl text-blue-300 mb-2"></i> |
| | <h4 class="font-bold">Telegram</h4> |
| | <p class="text-sm text-gray-600">Pour les discussions sécurisées et les grands groupes</p> |
| | </div> |
| | </div> |
| | |
| | <h3 class="text-2xl font-bold mb-6 text-amber-800">Types de Réunions</h3> |
| | <p class="mb-6">Les différentes rencontres organisées par KABUKA</p> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8"> |
| | <div class="bg-amber-50 p-4 rounded-lg border border-amber-200"> |
| | <h4 class="font-bold text-amber-800 mb-2">Assemblée Générale</h4> |
| | <p class="text-sm text-gray-600">Réunions trimestrielles ouvertes à tous les membres pour les décisions importantes.</p> |
| | </div> |
| | <div class="bg-amber-50 p-4 rounded-lg border border-amber-200"> |
| | <h4 class="font-bold text-amber-800 mb-2">Réunion du Bureau exécutif</h4> |
| | <p class="text-sm text-gray-600">Réunions mensuelles des membres du bureau pour la gestion de l'association.</p> |
| | </div> |
| | <div class="bg-amber-50 p-4 rounded-lg border border-amber-200"> |
| | <h4 class="font-bold text-amber-800 mb-2">Réunion extraordinaire</h4> |
| | <p class="text-sm text-gray-600">Convoquées pour des sujets urgents ou des décisions spéciales.</p> |
| | </div> |
| | </div> |
| | |
| | <h3 class="text-2xl font-bold mb-6 text-amber-800">Prochaines Réunions</h3> |
| | <p class="mb-6">Calendrier des réunions à venir</p> |
| | |
| | <div class="space-y-4 mb-8"> |
| | <div class="border-l-4 border-amber-500 pl-4 py-3 bg-white rounded-lg shadow-sm"> |
| | <h4 class="font-bold">Assemblée Générale</h4> |
| | <div class="text-sm text-gray-600 mb-2"> |
| | <span class="mr-3">15 Septembre 2024</span> |
| | <span>• 18:00 - 20:00 (GMT)</span> |
| | </div> |
| | <div class="text-sm mb-2"> |
| | <span class="mr-2"><i class="fab fa-zoom text-blue-400"></i> Via Zoom</span> |
| | </div> |
| | <a href="#" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded text-sm">S'inscrire</a> |
| | </div> |
| | |
| | <div class="border-l-4 border-amber-500 pl-4 py-3 bg-white rounded-lg shadow-sm"> |
| | <h4 class="font-bold">Réunion du Bureau</h4> |
| | <div class="text-sm text-gray-600 mb-2"> |
| | <span class="mr-3">30 Août 2024</span> |
| | <span>• 19:00 - 20:30 (GMT)</span> |
| | </div> |
| | <div class="text-sm mb-2"> |
| | <span class="mr-2"><i class="fab fa-google text-blue-500"></i> Via Google Meet</span> |
| | </div> |
| | <a href="#" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded text-sm">S'inscrire</a> |
| | </div> |
| | |
| | <div class="border-l-4 border-amber-500 pl-4 py-3 bg-white rounded-lg shadow-sm"> |
| | <h4 class="font-bold">Discussion sur le Festival 2025</h4> |
| | <div class="text-sm text-gray-600 mb-2"> |
| | <span class="mr-3">5 Octobre 2024</span> |
| | <span>• 17:30 - 19:00 (GMT)</span> |
| | </div> |
| | <div class="text-sm mb-2"> |
| | <span class="mr-2"><i class="fab fa-whatsapp text-green-500"></i> Via WhatsApp</span> |
| | </div> |
| | <a href="#" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-3 py-1 rounded text-sm">S'inscrire</a> |
| | </div> |
| | </div> |
| | |
| | <div class="flex justify-between items-center"> |
| | <a href="#" class="text-amber-700 font-medium">Voir tout le calendrier</a> |
| | <a href="#" class="text-amber-700 font-medium">Proposer une réunion</a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-amber-100 rounded-lg p-6 text-center"> |
| | <h3 class="text-xl font-bold mb-2">Besoin d'aide pour les réunions virtuelles ?</h3> |
| | <p class="mb-4">Notre équipe est disponible pour vous aider à vous connecter et participer aux réunions.</p> |
| | <a href="#" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded-lg">Contacter le support</a> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="mb-16"> |
| | <h2 class="text-3xl font-bold text-center text-amber-900 mb-8">Outils d'Intelligence Artificielle</h2> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
| | <div class="bg-white rounded-lg shadow-md p-6 text-center tool-card"> |
| | <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| | <i class="fas fa-comments text-2xl text-blue-600"></i> |
| | </div> |
| | <h3 class="text-lg font-bold mb-2">Dialogue & Tâches</h3> |
| | </div> |
| | <div class="bg-white rounded-lg shadow-md p-6 text-center tool-card"> |
| | <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| | <i class="fas fa-microphone-alt text-2xl text-purple-600"></i> |
| | </div> |
| | <h3 class="text-lg font-bold mb-2">Génération de Voix</h3> |
| | </div> |
| | <div class="bg-white rounded-lg shadow-md p-6 text-center tool-card"> |
| | <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| | <i class="fas fa-image text-2xl text-green-600"></i> |
| | </div> |
| | <h3 class="text-lg font-bold mb-2">Génération d'Images</h3> |
| | </div> |
| | <div class="bg-white rounded-lg shadow-md p-6 text-center tool-card"> |
| | <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| | <i class="fas fa-video text-2xl text-red-600"></i> |
| | </div> |
| | <h3 class="text-lg font-bold mb-2">Génération de Vidéo</h3> |
| | </div> |
| | </div> |
| | |
| | <div class="grid md:grid-cols-3 gap-6 mb-8"> |
| | <div class="bg-white rounded-lg shadow-md p-6 tool-card"> |
| | <div class="flex items-center mb-4"> |
| | <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-3"> |
| | <i class="fas fa-comment-dots text-xl text-blue-600"></i> |
| | </div> |
| | <h3 class="text-lg font-bold">ChatGPT</h3> |
| | </div> |
| | <p class="text-gray-600 mb-4">Assistant IA pour répondre à vos questions sur la culture mancagne.</p> |
| | <a href="#" class="inline-block bg-blue-100 hover:bg-blue-200 text-blue-800 px-4 py-2 rounded text-sm">Explorer cet outil</a> |
| | </div> |
| | <div class="bg-white rounded-lg shadow-md p-6 tool-card"> |
| | <div class="flex items-center mb-4"> |
| | <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-3"> |
| | <i class="fas fa-search text-xl text-green-600"></i> |
| | </div> |
| | <h3 class="text-lg font-bold">DeepSeek</h3> |
| | </div> |
| | <p class="text-gray-600 mb-4">Analyse approfondie des sujets culturels et historiques.</p> |
| | <a href="#" class="inline-block bg-green-100 hover:bg-green-200 text-green-800 px-4 py-2 rounded text-sm">Explorer cet outil</a> |
| | </div> |
| | <div class="bg-white rounded-lg shadow-md p-6 tool-card"> |
| | <div class="flex items-center mb-4"> |
| | <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-3"> |
| | <i class="fas fa-file-alt text-xl text-purple-600"></i> |
| | </div> |
| | <h3 class="text-lg font-bold">Claude</h3> |
| | </div> |
| | <p class="text-gray-600 mb-4">Assistant pour la recherche et la documentation culturelle.</p> |
| | <a href="#" class="inline-block bg-purple-100 hover:bg-purple-200 text-purple-800 px-4 py-2 rounded text-sm">Explorer cet outil</a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-lg shadow-md p-6"> |
| | <h3 class="text-xl font-bold mb-4 text-center">Essayez l'IA conversationnelle</h3> |
| | |
| | <div class="bg-gray-100 rounded-lg p-4 mb-4"> |
| | <div class="flex items-start mb-3"> |
| | <div class="w-8 h-8 bg-amber-600 rounded-full flex items-center justify-center text-white mr-3"> |
| | <i class="fas fa-robot"></i> |
| | </div> |
| | <div> |
| | <p class="font-medium">IA KABUKA</p> |
| | <p class="text-gray-700">Bonjour ! Je suis l'IA culturelle de KABUKA. Comment puis-je vous aider à découvrir la culture mancagne aujourd'hui ?</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="flex"> |
| | <input type="text" placeholder="Posez une question sur la culture mancagne..." class="flex-grow border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-amber-500"> |
| | <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-r-lg"> |
| | <i class="fas fa-paper-plane"></i> Envoyer |
| | </button> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="bg-amber-800 text-white rounded-xl p-8 md:p-12 mb-16"> |
| | <div class="max-w-4xl mx-auto text-center"> |
| | <h2 class="text-3xl font-bold mb-4">Prêt à nous rejoindre ?</h2> |
| | <p class="text-xl mb-8">Devenez membre de KABUKA et contribuez à la préservation de notre culture.</p> |
| | <div class="flex flex-wrap justify-center gap-4"> |
| | <a href="#" class="bg-white hover:bg-gray-100 text-amber-800 px-6 py-3 rounded-lg font-medium transition-all" data-page="membership">Adhérer maintenant</a> |
| | <a href="#" class="bg-transparent hover:bg-amber-700 border border-white text-white px-6 py-3 rounded-lg font-medium transition-all" data-page="about">Découvrir nos actions</a> |
| | </div> |
| | </div> |
| | </section> |
| | </div> |
| |
|
| | |
| | <div id="news" class="page"> |
| | <h1 class="text-3xl font-bold text-amber-900 mb-6">Actualités de KABUKA</h1> |
| | |
| | <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| | |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| | <img src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Actualité" class="w-full h-48 object-cover"> |
| | <div class="p-4"> |
| | <span class="text-xs text-amber-600">15 Juin 2023</span> |
| | <h2 class="text-xl font-bold my-2">Lancement du Festival Culturel</h2> |
| | <p class="text-gray-600 mb-4">Découvrez le programme complet du Festival Culturel International de Bula.</p> |
| | <a href="https://www.youtube.com/watch?v=He_XLpXhkqM" class="text-amber-700 font-medium">Voir le discours →</a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| | <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Actualité" class="w-full h-48 object-cover"> |
| | <div class="p-4"> |
| | <span class="text-xs text-amber-600">10 Juin 2023</span> |
| | <h2 class="text-xl font-bold my-2">Nouvelle Publication</h2> |
| | <p class="text-gray-600 mb-4">L'Encyclopédie de la Culture Mankagne est maintenant disponible.</p> |
| | <a href="https://www.kafunel.com/wp-content/uploads/2019/11/Mancagnes.pdf?srsltid=AfmBOopVcknyZXcBZF86afy6MJ8M4WQQQG_GxfaMoKnBViuE_Qumbo0P" class="text-amber-700 font-medium">Télécharger →</a> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| | <img src="https://images.unsplash.com/photo-1511578314322-379afb476865?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" alt="Actualité" class="w-full h-48 object-cover"> |
| | <div class="p-4"> |
| | <span class="text-xs text-amber-600">5 Juin 2023</span> |
| | <h2 class="text-xl font-bold my-2">Atelier de Danse Traditionnelle</h2> |
| | <p class="text-gray-600 mb-4">Apprenez les pas de base des danses mancagnes avec nos experts.</p> |
| | <a href="https://www.youtube.com/watch?v=ca7KEAdgx-0" class="text-amber-700 font-medium">Voir la danse Belaata →</a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="about" class="page"> |
| | <h1 class="text-3xl font-bold text-amber-900 mb-6">À propos de KABUKA</h1> |
| | |
| | <div class="bg-white rounded-lg shadow-md p-6 mb-8"> |
| | <h2 class="text-2xl font-bold mb-4 text-amber-800">Notre Mission</h2> |
| | <p class="mb-6">KABUKA est une association dédiée à la promotion et à la préservation de la culture mancagne à travers des initiatives éducatives, culturelles et sociales.</p> |
| | |
| | <h2 class="text-2xl font-bold mb-4 text-amber-800">Notre Histoire</h2> |
| | <p class="mb-6">Fondée en 2010 par un groupe d'intellectuels et d'artistes mancagnes, KABUKA a pour objectif de rassembler la diaspora mancagne autour de projets culturels communs.</p> |
| | |
| | <h2 class="text-2xl font-bold mb-4 text-amber-800">Messages du Roi des Mancagnes</h2> |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| | <div class="border border-gray-200 rounded-lg p-4"> |
| | <div class="relative pb-[56.25%] bg-gray-200 mb-3"> |
| | <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/hHOWwm11wak" frameborder="0" allowfullscreen></iframe> |
| | </div> |
| | <h3 class="font-bold mb-1">Message de Paix du Roi Joan Marius Mancabou</h3> |
| | <p class="text-sm text-gray-600 mb-2">Message aux Sénégalais</p> |
| | </div> |
| | <div class="border border-gray-200 rounded-lg p-4"> |
| | <div class="relative pb-[56.25%] bg-gray-200 mb-3"> |
| | <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/XQuCvmvwoVI" frameborder="0" allowfullscreen></iframe> |
| | </div> |
| | <h3 class="font-bold mb-1">Dépenses exorbitantes lors des cérémonies</h3> |
| | <p class="text-sm text-gray-600 mb-2">Message CHOC du Roi Joan Marius Mancabou</p> |
| | </div> |
| | </div> |
| | |
| | <h2 class="text-2xl font-bold mb-4 text-amber-800 mt-8">Notre Équipe</h2> |
| | <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| | <div class="text-center"> |
| | <div class="w-20 h-20 bg-gray-300 rounded-full mx-auto mb-2"></div> |
| | <h3 class="font-bold">Georges BAYEPAR</h3> |
| | <p class="text-sm">Président</p> |
| | </div> |
| | <div class="text-center"> |
| | <div class="w-20 h-20 bg-gray-300 rounded-full mx-auto mb-2"></div> |
| | <h3 class="font-bold">Helene DANFA</h3> |
| | <p class="text-sm">Vice-Présidente</p> |
| | </div> |
| | <div class="text-center"> |
| | <div class="w-20 h-20 bg-gray-300 rounded-full mx-auto mb-2"></div> |
| | <h3 class="font-bold">Mangou NENAN</h3> |
| | <p class="text-sm">Secrétaire Général</p> |
| | </div> |
| | <div class="text-center"> |
| | <div class="w-20 h-20 bg-gray-300 rounded-full mx-auto mb-2"></div> |
| | <h3 class="font-bold">Felix NDECKY</h3> |
| | <p class="text-sm">Trésorier</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="library" class="page"> |
| | <h1 class="text-3xl font-bold text-amber-900 mb-6">Bibliothèque Numérique</h1> |
| | |
| | <div class="bg-white rounded-lg shadow-md p-6 mb-8"> |
| | <div class="flex flex-wrap gap-4 mb-6"> |
| | <button class="bg-amber-700 text-white px-4 py-2 rounded">Tous</button> |
| | <button class="bg-amber-100 text-amber-800 px-4 py-2 rounded">Articles</button> |
| | <button class="bg-amber-100 text-amber-800 px-4 py-2 rounded">Livres</button> |
| | <button class="bg-amber-100 text-amber-800 px-4 py-2 rounded">Vidéos</button> |
| | <button class="bg-amber-100 text-amber-800 px-4 py-2 rounded">Audio</button> |
| | </div> |
| | |
| | <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| | |
| | <div class="border border-gray-200 rounded-lg p-4"> |
| | <div class="bg-gray-100 h-32 flex items-center justify-center mb-3"> |
| | <i class="fas fa-book text-4xl text-amber-600"></i> |
| | </div> |
| | <h3 class="font-bold mb-1">Contes Traditionnels Mancagnes</h3> |
| | <p class="text-sm text-gray-600 mb-2">Collection de 25 contes</p> |
| | <a href="https://www.kafunel.com/wp-content/uploads/2019/11/Mancagnes.pdf?srsltid=AfmBOopVcknyZXcBZF86afy6MJ8M4WQQQG_GxfaMoKnBViuE_Qumbo0P" class="text-amber-700 text-sm">Télécharger →</a> |
| | </div> |
| | |
| | |
| | <div class="border border-gray-200 rounded-lg p-4"> |
| | <div class="bg-gray-100 h-32 flex items-center justify-center mb-3"> |
| | <i class="fas fa-film text-4xl text-amber-600"></i> |
| | </div> |
| | <h3 class="font-bold mb-1">Danse Funéraire des Mankagnes</h3> |
| | <p class="text-sm text-gray-600 mb-2">Le Kamboumbloung</p> |
| | <a href="https://www.youtube.com/watch?v=l_KS1oEKA1I" class="text-amber-700 text-sm">Regarder →</a> |
| | </div> |
| | |
| | |
| | <div class="border border-gray-200 rounded-lg p-4"> |
| | <div class="bg-gray-100 h-32 flex items-center justify-center mb-3"> |
| | <i class="fas fa-film text-4xl text-amber-600"></i> |
| | </div> |
| | <h3 class="font-bold mb-1">Danse Belaata (ou Kwaath)</h3> |
| | <p class="text-sm text-gray-600 mb-2">La Danse Populaire des Mankagnes</p> |
| | <a href="https://www.youtube.com/watch?v=ca7KEAdgx-0" class="text-amber-700 text-sm">Regarder →</a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="agenda" class="page"> |
| | <h1 class="text-3xl font-bold text-amber-900 mb-6">Agenda Culturel</h1> |
| | |
| | <div class="bg-white rounded-lg shadow-md p-6 mb-8"> |
| | <div class="mb-6"> |
| | <h2 class="text-2xl font-bold mb-4 text-amber-800">Festival Culturel International de Bula</h2> |
| | <div class="flex items-center mb-2"> |
| | <i class="fas fa-calendar-alt text-amber-600 mr-2"></i> |
| | <span>17-19 Mai 2024</span> |
| | </div> |
| | <div class="flex items-center mb-4"> |
| | <i class="fas fa-map-marker-alt text-amber-600 mr-2"></i> |
| | <span>Bula, Guinée-Bissau</span> |
| | </div> |
| | <p class="mb-4">Un événement marquant pour les retrouvailles, la communion fraternelle et la réflexion sur les fondements de la culture mancagne.</p> |
| | <a href="https://www.youtube.com/watch?v=Dte9L0f512M" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded">Voir le séminaire →</a> |
| | </div> |
| | |
| | <div class="mb-6"> |
| | <h2 class="text-2xl font-bold mb-4 text-amber-800">Événement Sargal Olivier Boucal</h2> |
| | <div class="flex items-center mb-2"> |
| | <i class="fas fa-calendar-alt text-amber-600 mr-2"></i> |
| | <span>2 Novembre 2024</span> |
| | </div> |
| | <div class="flex items-center mb-4"> |
| | <i class="fas fa-map-marker-alt text-amber-600 mr-2"></i> |
| | <span>Musée des Civilisations Négres</span> |
| | </div> |
| | <p class="mb-4">Discours de Madame Boucal, Représentant M Oliver BOUCAL, Ministre de la Fonction.</p> |
| | <a href="https://www.youtube.com/watch?v=He_XLpXhkqM" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded">Voir le discours →</a> |
| | </div> |
| | |
| | <h3 class="text-xl font-bold mb-4 text-amber-800">Prochains Événements</h3> |
| | <div class="space-y-4"> |
| | |
| | <div class="border-l-4 border-amber-500 pl-4 py-2"> |
| | <h4 class="font-bold">Conférence sur l'Art Mancagne</h4> |
| | <div class="text-sm text-gray-600"> |
| | <span class="mr-3"><i class="fas fa-calendar-alt mr-1"></i> 15 Juillet 2023</span> |
| | <span><i class="fas fa-clock mr-1"></i> 18h00</span> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="border-l-4 border-amber-500 pl-4 py-2"> |
| | <h4 class="font-bold">Atelier de Cuisine Traditionnelle</h4> |
| | <div class="text-sm text-gray-600"> |
| | <span class="mr-3"><i class="fas fa-calendar-alt mr-1"></i> 22 Juillet 2023</span> |
| | <span><i class="fas fa-clock mr-1"></i> 15h00</span> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="border-l-4 border-amber-500 pl-4 py-2"> |
| | <h4 class="font-bold">Exposition d'Art Contemporain</h4> |
| | <div class="text-sm text-gray-600"> |
| | <span class="mr-3"><i class="fas fa-calendar-alt mr-1"></i> 5 Août 2023</span> |
| | <span><i class="fas fa-clock mr-1"></i> 10h00-18h00</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="community" class="page"> |
| | <h1 class="text-3xl font-bold text-amber-900 mb-6">Espace Communautaire</h1> |
| | |
| | <div class="bg-white rounded-lg shadow-md p-6 mb-8"> |
| | <div class="grid md:grid-cols-2 gap-6 mb-8"> |
| | <div> |
| | <h2 class="text-2xl font-bold mb-4 text-amber-800">Forum de Discussion</h2> |
| | <p class="mb-4">Rejoignez les conversations sur divers sujets liés à la culture mancagne.</p> |
| | <a href="#" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded">Accéder au forum</a> |
| | </div> |
| | |
| | <div> |
| | <h2 class="text-2xl font-bold mb-4 text-amber-800">Galerie Communautaire</h2> |
| | <p class="mb-4">Partagez vos photos et vidéos de la culture mancagne.</p> |
| | <a href="#" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded">Voir la galerie</a> |
| | </div> |
| | </div> |
| | |
| | <h2 class="text-2xl font-bold mb-4 text-amber-800">Vidéos Communautaires</h2> |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| | <div class="border border-gray-200 rounded-lg p-4"> |
| | <div class="relative pb-[56.25%] bg-gray-200 mb-3"> |
| | <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/wNORlz5tQSg" frameborder="0" allowfullscreen></iframe> |
| | </div> |
| | <h3 class="font-bold mb-1">Message du Roi Joan Marius Mancabou</h3> |
| | <p class="text-sm text-gray-600 mb-2">Dépenses exorbitantes lors des cérémonies</p> |
| | </div> |
| | <div class="border border-gray-200 rounded-lg p-4"> |
| | <div class="relative pb-[56.25%] bg-gray-200 mb-3"> |
| | <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/So4OwGHN1S8" frameborder="0" allowfullscreen></iframe> |
| | </div> |
| | <h3 class="font-bold mb-1">Culture Bahuula (Mankagne)</h3> |
| | <p class="text-sm text-gray-600 mb-2">Présentation de la culture</p> |
| | </div> |
| | </div> |
| | |
| | <h2 class="text-2xl font-bold mb-4 text-amber-800 mt-8">Groupes WhatsApp</h2> |
| | <div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> |
| | <a href="#" class="bg-green-600 hover:bg-green-700 text-white p-4 rounded-lg flex items-center"> |
| | <i class="fab fa-whatsapp text-2xl mr-3"></i> |
| | <span>Groupe Général</span> |
| | </a> |
| | <a href="#" class="bg-green-600 hover:bg-green-700 text-white p-4 rounded-lg flex items-center"> |
| | <i class="fab fa-whatsapp text-2xl mr-3"></i> |
| | <span>Groupe Culture</span> |
| | </a> |
| | <a href="#" class="bg-green-600 hover:bg-green-700 text-white p-4 rounded-lg flex items-center"> |
| | <i class="fab fa-whatsapp text-2xl mr-3"></i> |
| | <span>Groupe Événements</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="membership" class="page"> |
| | <h1 class="text-3xl font-bold text-amber-900 mb-6">Adhésion à KABUKA</h1> |
| | |
| | <div class="bg-white rounded-lg shadow-md p-6 mb-8"> |
| | <div class="grid md:grid-cols-3 gap-6 mb-8"> |
| | |
| | <div class="border border-amber-200 rounded-lg p-6 text-center"> |
| | <h3 class="text-xl font-bold mb-4">Gratuite</h3> |
| | <div class="text-3xl font-bold mb-4">0 XOF</div> |
| | <ul class="space-y-2 mb-6 text-left"> |
| | <li class="flex items-start"> |
| | <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| | <span>Accès aux événements gratuits</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| | <span>Newsletter mensuelle</span> |
| | </li> |
| | </ul> |
| | <a href="#" class="inline-block bg-amber-100 hover:bg-amber-200 text-amber-800 px-6 py-2 rounded">S'inscrire</a> |
| | </div> |
| | |
| | |
| | <div class="border-2 border-amber-500 rounded-lg p-6 text-center bg-amber-50"> |
| | <h3 class="text-xl font-bold mb-4">Standard</h3> |
| | <div class="text-3xl font-bold mb-4">25,000 XOF</div> |
| | <ul class="space-y-2 mb-6 text-left"> |
| | <li class="flex items-start"> |
| | <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| | <span>Tous les avantages gratuits</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| | <span>Accès complet à la bibliothèque</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| | <span>Réduction sur les événements</span> |
| | </li> |
| | </ul> |
| | <a href="#" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded">S'inscrire</a> |
| | </div> |
| | |
| | |
| | <div class="border border-amber-200 rounded-lg p-6 text-center"> |
| | <h3 class="text-xl font-bold mb-4">Premium</h3> |
| | <div class="text-3xl font-bold mb-4">50,000 XOF</div> |
| | <ul class="space-y-2 mb-6 text-left"> |
| | <li class="flex items-start"> |
| | <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| | <span>Tous les avantages standard</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| | <span>Accès VIP aux événements</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <i class="fas fa-check text-green-500 mr-2 mt-1"></i> |
| | <span>Rencontres avec experts</span> |
| | </li> |
| | </ul> |
| | <a href="#" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-6 py-2 rounded">S'inscrire</a> |
| | </div> |
| | </div> |
| | |
| | <h2 class="text-2xl font-bold mb-4 text-amber-800">Modes de Paiement</h2> |
| | <div class="flex flex-wrap gap-4"> |
| | <div class="bg-gray-100 p-3 rounded-lg flex items-center"> |
| | <i class="fab fa-cc-visa text-2xl text-blue-800 mr-2"></i> |
| | <span>Carte Bancaire</span> |
| | </div> |
| | <div class="bg-gray-100 p-3 rounded-lg flex items-center"> |
| | <i class="fas fa-mobile-alt text-2xl text-orange-500 mr-2"></i> |
| | <span>Orange Money</span> |
| | </div> |
| | <div class="bg-gray-100 p-3 rounded-lg flex items-center"> |
| | <i class="fab fa-paypal text-2xl text-blue-500 mr-2"></i> |
| | <span>PayPal</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| |
|
| | |
| | <footer class="bg-amber-900 text-white py-8"> |
| | <div class="container mx-auto px-4"> |
| | <div class="grid md:grid-cols-3 gap-8"> |
| | <div> |
| | <h3 class="text-xl font-bold mb-4">KABUKA</h3> |
| | <p>Association pour la Vulgarisation de la Culture Mancagne</p> |
| | </div> |
| | |
| | <div> |
| | <h3 class="text-xl font-bold mb-4">Contact</h3> |
| | <p class="mb-2"><i class="fas fa-phone-alt mr-2"></i> +221 77 541 23 31</p> |
| | <p><i class="fas fa-envelope mr-2"></i> contact@kabuka.org</p> |
| | </div> |
| | |
| | <div> |
| | <h3 class="text-xl font-bold mb-4">Réseaux Sociaux</h3> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="text-2xl"><i class="fab fa-facebook"></i></a> |
| | <a href="#" class="text-2xl"><i class="fab fa-twitter"></i></a> |
| | <a href="#" class="text-2xl"><i class="fab fa-instagram"></i></a> |
| | <a href="#" class="text-2xl"><i class="fab fa-youtube"></i></a> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="border-t border-amber-800 mt-8 pt-6 text-center"> |
| | <p>Powered By Jean Bandiaky (SOPANACOM) © 2025 KABUKA - Association pour la Vulgarisation de la Culture ManKagne. Tous droits réservés.</p> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | |
| | const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| | const mobileMenu = document.getElementById('mobile-menu'); |
| | |
| | mobileMenuButton.addEventListener('click', () => { |
| | mobileMenu.classList.toggle('hidden'); |
| | }); |
| | |
| | |
| | const menuLinks = document.querySelectorAll('.menu-link'); |
| | const pages = document.querySelectorAll('.page'); |
| | |
| | |
| | function showPage(pageId) { |
| | |
| | pages.forEach(page => { |
| | page.classList.remove('active-page'); |
| | }); |
| | |
| | |
| | document.getElementById(pageId).classList.add('active-page'); |
| | |
| | |
| | menuLinks.forEach(link => { |
| | link.classList.remove('active-menu'); |
| | if (link.dataset.page === pageId) { |
| | link.classList.add('active-menu'); |
| | } |
| | }); |
| | |
| | |
| | mobileMenu.classList.add('hidden'); |
| | |
| | |
| | window.scrollTo(0, 0); |
| | } |
| | |
| | |
| | menuLinks.forEach(link => { |
| | link.addEventListener('click', (e) => { |
| | e.preventDefault(); |
| | showPage(link.dataset.page); |
| | }); |
| | }); |
| | |
| | |
| | document.querySelectorAll('[data-page]').forEach(link => { |
| | if (link.dataset.page && link.tagName === 'A') { |
| | link.addEventListener('click', (e) => { |
| | e.preventDefault(); |
| | showPage(link.dataset.page); |
| | }); |
| | } |
| | }); |
| | |
| | |
| | showPage('home'); |
| | </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=ounkounane/https-huggingface-co-ounkounane" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
