<!DOCTYPE html>

<html class="light" lang="fr">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>Assises Nationales des Daara - Sénégal</title>
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700;800;900&amp;display=swap"
        rel="stylesheet" />
    <link
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
        rel="stylesheet" />
    <link
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
        rel="stylesheet" />
    <script id="tailwind-config">
    tailwind.config = {
        darkMode: "class",
        theme: {
            extend: {
                colors: {
                    "primary": "#17cf17",
                    "background-light": "#f6f8f6",
                    "background-dark": "#112111",
                    "senegal-yellow": "#fdef42",
                    "senegal-red": "#e31b23",
                },
                fontFamily: {
                    "display": ["Public Sans", "sans-serif"]
                },
                borderRadius: {
                    "DEFAULT": "0.25rem",
                    "lg": "0.5rem",
                    "xl": "0.75rem",
                    "full": "9999px"
                },
            },
        },
    }
    </script>
    <style>
    body {
        font-family: "Public Sans", sans-serif;
    }

    .material-symbols-outlined {
        font-variation-settings: 'FILL'0, 'wght'400, 'GRAD'0, 'opsz'24;
    }
    </style>
</head>

<body class="bg-background-light dark:bg-background-dark text-[#0e1b0e] dark:text-white transition-colors duration-300">
    <!-- Top Navigation Bar -->
     <audio id="welcomeAudio" src="/assets/audio/daara.mp3"></audio>

    <header
        class="sticky top-0 z-50 bg-white/90 dark:bg-background-dark/90 backdrop-blur-md border-b border-[#e7f3e7] dark:border-white/10 px-4 md:px-40 py-3">
        <div class="max-w-[1200px] mx-auto flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="bg-primary p-1.5 rounded-lg text-white">
                    <span class="material-symbols-outlined text-2xl">mosque</span>
                </div>
                <div class="flex flex-col">
                    <h2 class="text-[#0e1b0e] dark:text-white text-lg font-extrabold leading-tight tracking-tight">
                        Assises Nationales des Daara</h2>
                    <span id="alternating-text"
                        class="text-xl md:text-2xl lg:text-3xl font-bold transition-opacity duration-1000"
                        style="color: #1d3d20;">
                        الجلسات الوطنية حول المدارس القرآنية
                    </span>
                    <span class="text-[10px] uppercase tracking-widest text-primary font-bold">Ministère Education
                        National</span>
                </div>
            </div>
            <div class="hidden md:flex flex-1 justify-end items-center gap-8">
                <nav class="flex items-center gap-8">
                    <a class="text-primary transition-colors text-sm font-bold border-b-2 border-primary"
                        href="/AssiseDaara">Accueil</a>
                    <a class="hover:text-primary transition-colors text-sm font-semibold"
                        href="/AssiseDaara/contribution">Contribution</a>
                    <a data-translate="nav-contribution"
                       class="hover:text-primary transition-colors text-sm font-semibold"                        
                       href="<?= site_url('AssiseDaara/statistique') ?>">Statistique</a>

                </nav>

            </div>
        </div>
    </header>
    <main class="max-w-[1200px] mx-auto">
        <!-- Hero Section -->

        <section class="p-4 md:p-10">
            <div class="@container">
                <div
                    class="relative overflow-hidden rounded-xl md:rounded-3xl bg-neutral-900 min-h-[520px] flex items-center">
                    <div class="absolute inset-0 opacity-50 bg-cover bg-center"
                        data-alt="Official modern building architectural background with green patterns"
                        style='background-image: linear-gradient(to right, rgba(249, 243, 243, 0) 30%, rgba(239, 232, 232, 0.01) 100%), url("<?= base_url('assets/img/Daara.png') ?>");'>
                    </div>
                    <!-- National Flag Accent Line -->
                    <div class="absolute top-0 left-0 w-full h-1.5 flex">
                        <div class="flex-1 bg-primary"></div>
                        <div class="flex-1 bg-senegal-yellow"></div>
                        <div class="flex-1 bg-senegal-red"></div>
                    </div>
                    <div class="relative z-10 px-6 md:px-16 max-w-4xl py-20 text-center ">
                        <span
                            class="inline-block px-3 py-1 bg-primary/20 text-primary border border-primary/30 rounded-full text-xs font-bold mb-6 uppercase tracking-widest">Événement
                            National Officiel</span>
                        <h1 class="text-white text-5xl md:text-6xl font-black leading-[1.1] mb-6 text-center">
                            Assises Nationales des Daara
                        </h1>
                        <p class="text-white/80 text-lg md:text-xl font-medium leading-relaxed mb-10 text-center">
                            Ensemble pour l'avenir de l'éducation coranique.
                        </p>
                        <div class="flex flex-col md:flex-row gap-4 justify-center relative z-10">
                         
                            <a href="https://wa.me/221784799696" target="_blank" rel="noopener noreferrer" class="bg-primary text-white font-black px-10 py-5 rounded-2xl text-xl
                                            hover:scale-105 transition-transform
                                            flex items-center justify-center gap-3">

                                <span class="material-symbols-outlined text-3xl">chat</span>
                                WhatsApp Citoyen
                            </a>
                            <a href="/AssiseDaara/contribution" class="w-64 flex justify-center gap-2
                                    bg-purple-600 hover:bg-purple-700
                                    text-white font-bold px-6 py-4 rounded-xl
                                    transition-all shadow-lg shadow-purple-500/20">
                                <span class="material-symbols-outlined">how_to_reg</span>
                                Participez
                            </a>
                        </div>
                    </div>
        </section>

        <!-- Presidential Message Section -->
        <section class="px-4 md:px-10 py-12">
            <div
                class="relative bg-white dark:bg-zinc-900 border border-[#e7f3e7] dark:border-white/5 rounded-2xl overflow-hidden shadow-xl shadow-black/5 group">
                <div class="flex flex-col md:flex-row items-stretch">
                    <div class="w-full md:w-1/3 min-h-[400px] bg-cover bg-top relative"
                        data-alt="Official portrait of President Bassirou Diomaye Faye"
                        style='background-image: url("<?= base_url('assets/img/president.png') ?>");'>
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent md:hidden"></div>
                    </div>
                    <div class="flex-1 p-8 md:p-14 flex flex-col justify-center">
                        <div class="flex items-center gap-4 mb-6">
                            <div class="w-12 h-0.5 bg-primary"></div>
                            <span class="text-primary font-bold tracking-widest uppercase text-xs">Message de la
                                Nation</span>
                        </div>
                        <blockquote class="relative">
                            <span class="absolute -top-6 -left-4 text-7xl text-primary/10 font-serif">"</span>
                            <p
                                class="text-2xl md:text-3xl font-medium italic text-[#0e1b0e] dark:text-zinc-100 leading-snug mb-8 relative z-10">
                                Nous lançons ces premières Assises pour une inclusion totale et durable. Le 28 novembre
                                2024 marquera un tournant historique pour l'avenir de nos enfants dans les Daara.
                            </p>
                        </blockquote>
                        <div>
                            <p class="text-xl font-extrabold text-[#0e1b0e] dark:text-white uppercase tracking-tight">
                                S.E.M. Bassirou DIOMAYE FAYE</p>
                            <p class="text-primary font-semibold text-sm">Président de la République du Sénégal</p>
                        </div>
                        <button
                            class="mt-10 flex items-center gap-2 text-primary font-bold hover:underline decoration-2 underline-offset-4">
                            Lire l'intégralité du discours
                            <span class="material-symbols-outlined text-sm">arrow_forward</span>
                        </button>
                    </div>
                </div>
            </div>
        </section>
        <!-- Information/Objectives Section -->
        <section class="px-4 md:px-10 py-16" id="objectifs">
            <div class="text-center max-w-2xl mx-auto mb-16">
                <h2 class="text-3xl md:text-4xl font-black mb-4">Nos Objectifs Stratégiques</h2>
                <div class="w-20 h-1.5 bg-senegal-yellow mx-auto mb-6"></div>
                <p class="text-[#4e974e] dark:text-zinc-400 font-medium">Une démarche structurée pour transformer le
                    paysage éducatif coranique par le dialogue et l'action.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Objective 1 -->
                <div
                    class="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-[#d0e7d0] dark:border-white/5 shadow-sm hover:shadow-xl transition-all duration-300 group">
                    <div
                        class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
                        <span class="material-symbols-outlined text-3xl">groups</span>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Participation Inclusive</h3>
                    <p class="text-zinc-600 dark:text-zinc-400 leading-relaxed">Donner la voix à tous les acteurs des
                        Daara à travers le pays via des outils numériques et physiques accessibles à tous.</p>
                </div>
                <!-- Objective 2 -->
                <div
                    class="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-[#d0e7d0] dark:border-white/5 shadow-sm hover:shadow-xl transition-all duration-300 group">
                    <div
                        class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
                        <span class="material-symbols-outlined text-3xl">inventory_2</span>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Centralisation &amp; Archivage</h3>
                    <p class="text-zinc-600 dark:text-zinc-400 leading-relaxed">Collecter, traiter et préserver les
                        contributions citoyennes pour éclairer les décisions publiques et les réformes législatives.</p>
                </div>
                <!-- Objective 3 -->
                <div
                    class="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-[#d0e7d0] dark:border-white/5 shadow-sm hover:shadow-xl transition-all duration-300 group">
                    <div
                        class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
                        <span class="material-symbols-outlined text-3xl">chat_bubble</span>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Permanence du Dialogue</h3>
                    <p class="text-zinc-600 dark:text-zinc-400 leading-relaxed">Établir un cadre d'échange continu entre
                        l'État, les maîtres coraniques et la communauté pour assurer le suivi des engagements.</p>
                </div>
            </div>
        </section>
        <div class="flex justify-center items-center gap-4">
            <button class="w-64 flex items-center justify-center gap-2
                    bg-green-600 hover:bg-green-700
                    text-white font-bold px-6 py-4 rounded-xl
                    transition-all shadow-lg shadow-green-500/20">
                <a class="hover:text-primary transition-colors text-sm font-semibold"
                    href="/AssiseDaara/infos"><span class="material-symbols-outlined">forum</span>En Savoir
                    Plus</a>


            </button>
        </div>
        <!-- Roadmap Section -->
        <section class="px-4 md:px-10 py-20 bg-primary/5 dark:bg-zinc-900/50 rounded-3xl mx-4 md:mx-10 mb-20"
            id="calendrier">
            <div class="mb-16">
                <h2 class="text-3xl font-black mb-2">Feuille de Route 2024-2026</h2>
                <p class="text-primary font-bold uppercase tracking-wider text-xs">Phases de mise en œuvre</p>
            </div>
            <div class="relative">
                <!-- Timeline Line -->
                <div class="absolute top-1/2 left-0 w-full h-0.5 bg-primary/20 -translate-y-1/2 hidden md:block"></div>
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10">
                    <!-- Phase 1 -->
                    <div class="flex flex-col items-center md:items-start text-center md:text-left">
                        <div
                            class="w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center font-bold text-lg mb-4 ring-8 ring-white dark:ring-zinc-900">
                            01</div>
                        <div
                            class="bg-white dark:bg-zinc-900 p-6 rounded-xl border border-primary shadow-lg shadow-primary/5 w-full">
                            <span
                                class="inline-block px-2 py-0.5 bg-primary text-white text-[10px] font-bold rounded mb-2 uppercase">Terminé</span>
                            <h4 class="font-black text-lg mb-1">Préparation</h4>
                            <p class="text-primary font-bold text-sm mb-3">Novembre 2024</p>
                            <p class="text-xs text-zinc-500 leading-relaxed">Lancement officiel et mise en place des
                                plateformes de collecte citoyenne.</p>
                        </div>
                    </div>
                    <!-- Phase 2 -->
                    <div class="flex flex-col items-center md:items-start text-center md:text-left">
                        <div
                            class="w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center font-bold text-lg mb-4 ring-8 ring-white dark:ring-zinc-900">
                            02</div>
                        <div
                            class="bg-white dark:bg-zinc-900 p-6 rounded-xl border border-primary shadow-lg shadow-primary/5 w-full">
                            <span
                                class="inline-block px-2 py-0.5 bg-senegal-yellow text-zinc-900 text-[10px] font-bold rounded mb-2 uppercase">En
                                Cours</span>
                            <h4 class="font-black text-lg mb-1">Concertations</h4>
                            <p class="text-primary font-bold text-sm mb-3">Décembre 2024</p>
                            <p class="text-xs text-zinc-500 leading-relaxed">Rencontres régionales et collecte massive
                                de témoignages via WhatsApp.</p>
                        </div>
                    </div>
                    <!-- Phase 3 -->
                    <div class="flex flex-col items-center md:items-start text-center md:text-left">
                        <div
                            class="w-12 h-12 rounded-full bg-zinc-200 dark:bg-zinc-800 text-zinc-500 flex items-center justify-center font-bold text-lg mb-4 ring-8 ring-white dark:ring-zinc-900">
                            03</div>
                        <div
                            class="bg-white/60 dark:bg-zinc-900/60 p-6 rounded-xl border border-zinc-200 dark:border-zinc-800 w-full">
                            <span
                                class="inline-block px-2 py-0.5 bg-zinc-200 dark:bg-zinc-800 text-zinc-500 text-[10px] font-bold rounded mb-2 uppercase">À
                                Venir</span>
                            <h4 class="font-black text-lg mb-1">Validation</h4>
                            <p class="text-zinc-500 font-bold text-sm mb-3">Janvier 2026</p>
                            <p class="text-xs text-zinc-500 leading-relaxed">Synthèse des contributions et présentation
                                du livre blanc national.</p>
                        </div>
                    </div>
                    <!-- Phase 4 -->
                    <div class="flex flex-col items-center md:items-start text-center md:text-left">
                        <div
                            class="w-12 h-12 rounded-full bg-zinc-200 dark:bg-zinc-800 text-zinc-500 flex items-center justify-center font-bold text-lg mb-4 ring-8 ring-white dark:ring-zinc-900">
                            04</div>
                        <div
                            class="bg-white/60 dark:bg-zinc-900/60 p-6 rounded-xl border border-zinc-200 dark:border-zinc-800 w-full">
                            <span
                                class="inline-block px-2 py-0.5 bg-zinc-200 dark:bg-zinc-800 text-zinc-500 text-[10px] font-bold rounded mb-2 uppercase">À
                                Venir</span>
                            <h4 class="font-black text-lg mb-1">Finalisation</h4>
                            <p class="text-zinc-500 font-bold text-sm mb-3">Février 2026</p>
                            <p class="text-xs text-zinc-500 leading-relaxed">Décret d'application des réformes et mise
                                en place du conseil de suivi.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Final CTA Section -->

    </main>
    <footer class="bg-white dark:bg-zinc-950 border-t border-[#e7f3e7] dark:border-white/10 pt-16 pb-12 px-4 md:px-40">
        <div class="max-w-[1200px] mx-auto">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
                <div class="space-y-4">
                    <div class="flex items-center gap-3">
                        <div class="bg-primary/10 p-2 rounded-lg text-primary">
                            <span class="material-symbols-outlined">account_balance</span>
                        </div>
                        <h3 class="font-bold text-lg">Sphère Ministère de l'Éducation nationale</h3>
                    </div>
                    <p class="text-sm text-zinc-500 leading-relaxed">
                        Sphère ministérielle de Diamniadio<br />
                        Dakar, Sénégal<br />
                        Tel: (+221) 33 849 54 54
                    </p>
                </div>
                <div>
                    <h3 class="font-bold text-lg mb-4">Liens Utiles</h3>
                    <ul class="space-y-2 text-sm text-zinc-500 font-medium">
                        <li><a class="hover:text-primary transition-colors" href="#">Programme des Assises</a></li>
                        <li><a class="hover:text-primary transition-colors" href="#">Documentation technique</a></li>
                        <li><a class="hover:text-primary transition-colors" href="#">FAQ</a></li>

                    </ul>
                </div>
                <div>
                    <h3 class="font-bold text-lg mb-4">Nous suivre</h3>
                    <div class="flex gap-4">
                        <!-- Facebook -->
                        <a href="https://www.facebook.com" target="_blank" rel="noopener"
                            class="w-10 h-10 bg-zinc-100 dark:bg-zinc-800 rounded-lg flex items-center justify-center text-blue-600 hover:bg-blue-600 hover:text-white transition-all">
                            <!-- Logo SVG Facebook -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
                                class="w-5 h-5">
                                <path
                                    d="M22 12c0-5.522-4.477-10-10-10S2 6.478 2 12c0 5 3.657 9.128 8.438 9.879v-6.987H7.898v-2.892h2.54V9.845c0-2.507 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562v1.875h2.773l-.443 2.892h-2.33v6.987C18.343 21.128 22 17 22 12z" />
                            </svg>
                        </a>

                        <!-- Twitter -->
                        <a href="https://www.twitter.com" target="_blank" rel="noopener"
                            class="w-10 h-10 bg-zinc-100 dark:bg-zinc-800 rounded-lg flex items-center justify-center text-sky-500 hover:bg-sky-500 hover:text-white transition-all">
                            <!-- Logo SVG Twitter -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
                                class="w-5 h-5">
                                <path
                                    d="M24 4.557a9.83 9.83 0 0 1-2.828.775 4.932 4.932 0 0 0 2.165-2.724 9.864 9.864 0 0 1-3.127 1.195 4.918 4.918 0 0 0-8.384 4.482A13.944 13.944 0 0 1 1.671 3.149 4.917 4.917 0 0 0 3.195 9.72a4.903 4.903 0 0 1-2.229-.616v.062a4.918 4.918 0 0 0 3.946 4.827 4.902 4.902 0 0 1-2.224.085 4.919 4.919 0 0 0 4.593 3.417 9.867 9.867 0 0 1-6.102 2.104c-.396 0-.788-.023-1.175-.069a13.945 13.945 0 0 0 7.548 2.212c9.057 0 14.01-7.512 14.01-14.01 0-.213-.004-.425-.014-.636A10.025 10.025 0 0 0 24 4.557z" />
                            </svg>
                        </a>

                        <!-- YouTube -->
                        <a href="https://www.youtube.com" target="_blank" rel="noopener"
                            class="w-10 h-10 bg-zinc-100 dark:bg-zinc-800 rounded-lg flex items-center justify-center text-red-600 hover:bg-red-600 hover:text-white transition-all">
                            <!-- Logo SVG YouTube -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
                                class="w-5 h-5">
                                <path
                                    d="M23.498 6.186a2.965 2.965 0 0 0-2.088-2.096C19.57 3.5 12 3.5 12 3.5s-7.57 0-9.41.59a2.965 2.965 0 0 0-2.088 2.096A30.05 30.05 0 0 0 0 12a30.05 30.05 0 0 0 .502 5.814 2.965 2.965 0 0 0 2.088 2.096c1.84.59 9.41.59 9.41.59s7.57 0 9.41-.59a2.965 2.965 0 0 0 2.088-2.096A30.05 30.05 0 0 0 24 12a30.05 30.05 0 0 0-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
                            </svg>
                        </a>
                    </div>


                </div>
            </div>
            <div
                class="border-t border-zinc-100 dark:border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <div class="flex items-center gap-4">
                    <div class="bg-primary/10 p-2 rounded-lg text-primary">
                        <span class="material-symbols-outlined text-sm">shield</span>
                    </div>
                    <p class="text-xs text-zinc-400 font-medium">© 2024 République du Sénégal - Ministère de l'Éducation
                        nationale</p>
                </div>
                <p class="text-[10px] uppercase tracking-[0.2em] font-bold text-zinc-300">Un Peuple • Un But • Une Foi
                </p>
            </div>
        </div>
    </footer>
</body>
</html>
