Spaces:

ounkounane
/

https-huggingface-co-ounkounane

Running

App Files Files Community

ounkounane commited on Apr 26, 2025

Commit

efbd2f9

verified ·

1 Parent(s): e2aeb57

Add 2 files

Browse files

Files changed (2) hide show

index.html +279 -21
prompts.txt +4 -0

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>KABUKA - Menu Interactif</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>
@@ -18,6 +18,35 @@
             font-weight: bold;
             border-bottom: 2px solid #b45309;
         }
     </style>
 </head>
 <body class="bg-amber-50">
@@ -33,6 +62,7 @@
                 <!-- Menu Desktop -->
                 <nav class="hidden md:flex space-x-6">
                     <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>
@@ -49,6 +79,7 @@
             <!-- Menu Mobile -->
             <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4">
                 <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>
@@ -60,9 +91,173 @@
     </header>
     <!-- Contenu des pages -->
-    <main class="container mx-auto px-4 py-8">
         <!-- Page Actualités -->
-        <div id="news" class="page active-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">
@@ -73,7 +268,7 @@
                         <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="#" class="text-amber-700 font-medium">Lire plus →</a>
                     </div>
                 </div>
@@ -84,7 +279,7 @@
                         <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="#" class="text-amber-700 font-medium">Lire plus →</a>
                     </div>
                 </div>
@@ -95,7 +290,7 @@
                         <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="#" class="text-amber-700 font-medium">Lire plus →</a>
                     </div>
                 </div>
             </div>
@@ -112,7 +307,25 @@
                 <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">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>
@@ -159,17 +372,17 @@
                         </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="#" class="text-amber-700 text-sm">Télécharger →</a>
                     </div>
                     <!-- Document 2 -->
                     <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-file-alt text-4xl text-amber-600"></i>
                         </div>
-                        <h3 class="font-bold mb-1">Histoire des Mancagnes</h3>
-                        <p class="text-sm text-gray-600 mb-2">Étude anthropologique</p>
-                        <a href="#" class="text-amber-700 text-sm">Télécharger →</a>
                     </div>
                     <!-- Document 3 -->
@@ -177,9 +390,9 @@
                         <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">Danses Traditionnelles</h3>
-                        <p class="text-sm text-gray-600 mb-2">Documentaire vidéo</p>
-                        <a href="#" class="text-amber-700 text-sm">Regarder →</a>
                     </div>
                 </div>
             </div>
@@ -201,7 +414,21 @@
                         <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="#" class="inline-block bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded">Plus d'informations</a>
                 </div>
                 <h3 class="text-xl font-bold mb-4 text-amber-800">Prochains Événements</h3>
@@ -255,7 +482,25 @@
                     </div>
                 </div>
-                <h2 class="text-2xl font-bold mb-4 text-amber-800">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>
@@ -268,7 +513,7 @@
                     <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>
-                    </a>
                 </div>
             </div>
         </div>
@@ -385,7 +630,7 @@
             </div>
             <div class="border-t border-amber-800 mt-8 pt-6 text-center">
-                <p>&copy; 2023 KABUKA. Tous droits réservés.</p>
             </div>
         </div>
     </footer>
@@ -423,6 +668,9 @@
             // Fermer le menu mobile si ouvert
             mobileMenu.classList.add('hidden');
         }
         // Ajouter les événements aux liens du menu
@@ -433,8 +681,18 @@
             });
         });
-        // Afficher la première page par défaut
-        showPage('news');
     </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>

 <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>
             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; }
+        }
     </style>
 </head>
 <body class="bg-amber-50">
                 <!-- Menu Desktop -->
                 <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>
             <!-- Menu Mobile -->
             <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>
     </header>
     <!-- Contenu des pages -->
+    <main class="container mx-auto px-4">
+        <!-- Page Accueil -->
+        <div id="home" class="page active-page">
+            <!-- Hero Section -->
+            <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>
+            <!-- Live Events 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="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- Live YouTube -->
+                    <div class="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>
+                    <!-- Live Facebook -->
+                    <div class="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/So4OwGHN1S8" frameborder="0" allowfullscreen></iframe>
+                        </div>
+                        <div class="p-4">
+                            <h3 class="text-xl font-bold mb-2">Réunion Communautaire</h3>
+                            <p class="text-gray-600 mb-2">Échanges avec les membres de KABUKA</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>
+                    <!-- Upcoming Live -->
+                    <div class="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>
+            </section>
+            <!-- Features 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">
+                    <!-- Feature 1 -->
+                    <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>
+                    <!-- Feature 2 -->
+                    <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>
+                    <!-- Feature 3 -->
+                    <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>
+            <!-- Actualités 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">
+                    <!-- Article 1 -->
+                    <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>
+                    <!-- Article 2 -->
+                    <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>
+                    <!-- Article 3 -->
+                    <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>
+            <!-- CTA 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>
         <!-- Page Actualités -->
+        <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">
                         <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>
                         <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>
                         <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>
                 <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>
                         </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>
                     <!-- Document 2 -->
                     <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>
                     <!-- Document 3 -->
                         <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>
                         <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>
                 </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>
                     <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>
             <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>
             // Fermer le menu mobile si ouvert
             mobileMenu.classList.add('hidden');
+            // Scroll vers le haut
+            window.scrollTo(0, 0);
         }
         // Ajouter les événements aux liens du menu
             });
         });
+        // Ajouter les événements aux liens CTA de la page d'accueil
+        document.querySelectorAll('[data-page]').forEach(link => {
+            if (link.dataset.page && link.tagName === 'A') {
+                link.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    showPage(link.dataset.page);
+                });
+            }
+        });
+        // Afficher la page d'accueil par défaut
+        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>

prompts.txt CHANGED Viewed

	@@ -0,0 +1,4 @@

+ajoute la page d'accueil avec les sections principales tout en évitant qu'elle soit longue et lourde
+ajoute la page d'accueil avec les sections principales tout en évitant qu'elle soit longue et lourde
+crée sur la page d'accueil  la la section "Événements en Direct" pour le live Youtube, Live Facebook, pour les séminaires , réunions en live , et place cette section juste avant "Nos Principales Activités"  modifie au footer en ajoutant cecci " Powered By Jean Bandiaky (SOPANACOM) © 2025 KABUKA - Association pour la Vulgarisation de la Culture ManKagne. Tous droits réservés." au lieu de © 2023 KABUKA.
+ajoute les Les liens :  https://www.youtube.com/watch?v=Dte9L0f512M https://www.youtube.com/watch?v=So4OwGHN1S8  Liens pour parler de la culture Bahuula (Mankagne) https://www.kafunel.com/wp-content/uploads/2019/11/Mancagnes.pdf?srsltid=AfmBOopVcknyZXcBZF86afy6MJ8M4WQQQG_GxfaMoKnBViuE_Qumbo0P  Message de Paix CHOC du Roi des Mancagnes, Joan Marius Mancabou, aux Sénégalais ! 🕊️ https://www.youtube.com/watch?v=hHOWwm11wak  La Danse Funéraire des Mankagnes : Le Kamboumbloung https://www.youtube.com/watch?v=l_KS1oEKA1I  Evénement Sargal Olivier Boucal du 2 novembre 2024 au Musée des Civilisations Négres   Discours de Madame Boucal, Représentant M Oliver BOUCAL, Ministre de la Fonction https://www.youtube.com/watch?v=He_XLpXhkqM   Danse Belaata (ou Kwaath) : La Danse Populaire des Mankagnes https://www.youtube.com/watch?v=ca7KEAdgx-0  Message Joan Marius Mancabou, Roi de Bahuula "Mankagnes" "Dépenses exorbitantes lors des cérémonies" https://www.youtube.com/watch?v=wNORlz5tQSg  Dépenses exorbitantes lors des cérémonies : Le Message CHOC du Roi Joan Marius Mancabou 👑🔥 https://www.youtube.com/watch?v=XQuCvmvwoVI , et replace dans leur espace en focntion de la thématique