<?php
session_start();
include 'navbar.php';
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Grand Unveiling | SaniBook Volume 01</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: {
                            dark: '#023047', // Deep Ocean Blue
                            teal: '#219EBC', // Bright Ocean Blue
                            gold: '#D4AF37',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        display: ['Space Grotesk', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #f8fafc;
            color: #0f172a;
        }

        html {
            scroll-behavior: smooth;
        }

        .fade-up {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .glass-panel {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(203, 213, 225, 0.4);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .text-gold {
            color: #b45309;
        }

        .bg-gold {
            background-color: #D4AF37;
        }

        .border-gold {
            border-color: #D4AF37;
        }

        .text-teal {
            color: #008080;
        }

        .bg-teal {
            background-color: #008080;
        }
    </style>
</head>

<body class="antialiased min-h-screen flex flex-col relative overflow-x-hidden">
    <!-- Background Effects -->
    <div
        class="fixed top-0 right-0 w-[800px] h-[800px] bg-brand-teal/10 rounded-full blur-[150px] pointer-events-none -z-10">
    </div>
    <div
        class="fixed bottom-0 left-0 w-[800px] h-[800px] bg-brand-gold/5 rounded-full blur-[150px] pointer-events-none -z-10">
    </div>

    <main class="flex-grow pt-32 pb-20">
        <!-- Hero Section -->
        <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-16 fade-up">
            <div
                class="inline-flex items-center gap-3 px-6 py-3 bg-brand-teal/10 border border-brand-teal/20 rounded-full mb-8">
                <span class="w-3 h-3 bg-brand-teal rounded-full"></span>
                <span class="text-base font-bold uppercase tracking-widest text-brand-teal">SaniBook Kenya: Formalizing
                    the Future of Sanitation</span>
            </div>
            <h1 class="text-3xl md:text-4xl font-display font-bold mb-8 tracking-tight">
                The Vision: <br />
                <span
                    class="text-transparent bg-clip-text bg-gradient-to-r from-brand-teal via-brand-dark to-brand-gold">From
                    Invisible to Undeniable</span>
            </h1>
            <p class="text-xl md:text-2xl text-slate-700 max-w-5xl mx-auto leading-relaxed mb-10 font-medium">
                SaniBook was launched as the definitive knowledge-management platform for the sanitation sector,
                bridging the gap between isolated pilots and national-scale solutions. We are turning data into dignity,
                ensuring that every investment and every effort across the value chain is visible, validated, and
                impactful.
            </p>

            <!-- Why SaniBook Matters (Grid) -->
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 text-left mb-16">
                <div
                    class="bg-white p-8 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl transition-all border-t-4 border-t-brand-teal">
                    <div
                        class="w-12 h-12 bg-brand-teal/10 text-brand-teal rounded-xl flex items-center justify-center mb-6 text-2xl">
                        <i class="fa-solid fa-brain"></i>
                    </div>
                    <h4 class="font-bold text-lg text-slate-900 mb-3">Centralized Intelligence</h4>
                    <p class="text-slate-600 text-sm leading-relaxed">We eliminate the need to "reinvent the wheel" by
                        documenting proven technologies and successful models, preserving vital institutional memory.
                    </p>
                </div>
                <div
                    class="bg-white p-8 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl transition-all border-t-4 border-t-brand-gold">
                    <div
                        class="w-12 h-12 bg-brand-gold/10 text-brand-gold rounded-xl flex items-center justify-center mb-6 text-2xl">
                        <i class="fa-solid fa-hand-holding-dollar"></i>
                    </div>
                    <h4 class="font-bold text-lg text-slate-900 mb-3">Investment Readiness</h4>
                    <p class="text-slate-600 text-sm leading-relaxed">By providing transparent, evidence-based data, we
                        de-risk the sector and unlock private capital for critical sanitation infrastructure.</p>
                </div>
                <div
                    class="bg-white p-8 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl transition-all border-t-4 border-t-brand-dark">
                    <div
                        class="w-12 h-12 bg-brand-dark/10 text-brand-dark rounded-xl flex items-center justify-center mb-6 text-2xl">
                        <i class="fa-solid fa-scale-balanced"></i>
                    </div>
                    <h4 class="font-bold text-lg text-slate-900 mb-3">Accountability & Standards</h4>
                    <p class="text-slate-600 text-sm leading-relaxed">We bring government bodies, utilities, and private
                        providers together, aligning every action with National Public Health and Environmental
                        standards.</p>
                </div>
                <div
                    class="bg-white p-8 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl transition-all border-t-4 border-t-brand-teal">
                    <div
                        class="w-12 h-12 bg-brand-teal/10 text-brand-teal rounded-xl flex items-center justify-center mb-6 text-2xl">
                        <i class="fa-solid fa-cloud-sun"></i>
                    </div>
                    <h4 class="font-bold text-lg text-slate-900 mb-3">Climate Resilience</h4>
                    <p class="text-slate-600 text-sm leading-relaxed">We integrate sanitation into the climate
                        conversation, tracking how modern waste management contributes to a healthier, greener Kenya.
                    </p>
                </div>
            </div>

            <!-- A Landmark Partnership -->
            <div
                class="max-w-4xl mx-auto bg-slate-900 rounded-[2.5rem] p-10 md:p-14 mb-16 relative overflow-hidden shadow-2xl text-left text-white border-2 border-brand-gold/20">
                <div class="absolute top-0 right-0 w-64 h-64 bg-brand-gold/10 blur-[80px] -z-0"></div>

                <div class="relative z-10">
                    <h3 class="font-display font-bold text-3xl mb-8 text-brand-gold uppercase tracking-wider">A Landmark
                        Partnership</h3>
                    <p class="text-lg md:text-xl text-slate-300 mb-8 leading-relaxed">
                        The SaniBook movement is endorsed and validated by the highest levels of Kenyan leadership,
                        ensuring our strategy is woven into the fabric of national policy:
                    </p>
                    <div class="grid sm:grid-cols-2 gap-6 mb-10">
                        <div class="flex items-center gap-4">
                            <div class="w-1.5 h-12 bg-brand-teal"></div>
                            <div>
                                <p class="font-bold text-white leading-tight">Eng. Dr. Festus Ng'eno</p>
                                <p class="text-sm text-slate-400">P.S., State Dept for Environment & Climate Change</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-4">
                            <div class="w-1.5 h-12 bg-brand-gold"></div>
                            <div>
                                <p class="font-bold text-white leading-tight">Mary Muthoni Muriuki, HSC</p>
                                <p class="text-sm text-slate-400">P.S., State Dept for Public Health & Stds</p>
                            </div>
                        </div>
                    </div>

                    <blockquote
                        class="border-l-4 border-brand-teal pl-6 italic text-xl text-slate-100 bg-white/5 py-6 pr-6 rounded-r-2xl">
                        "With this digital tool, we are now able to track, correct, and scale. We are moving from trial
                        and error toward a trajectory of evidence-based knowledge."
                    </blockquote>
                </div>
            </div>

            <!-- Join the Revolution -->
            <div class="max-w-2xl mx-auto">
                <h3 class="text-3xl font-display font-bold text-slate-900 mb-6">Join the Revolution</h3>
                <p class="text-lg text-slate-600 mb-10 leading-relaxed">
                    SaniBook is more than a platform; it is a commitment to SDG 6.2—universal access to safe sanitation.
                    Whether you are a policymaker, investor, service provider, or community advocate, SaniBook provides
                    the evidence needed to make decisions that save lives, protect the environment, and grow the
                    economy.
                </p>
                <div class="flex flex-wrap justify-center gap-4">
                    <a href="submitted.php"
                        class="px-8 py-4 bg-brand-teal text-white font-bold rounded-xl shadow-lg hover:shadow-teal-500/25 transition-all flex items-center gap-2">
                        <i class="fa-solid fa-compass"></i> Explore the Platform
                    </a>
                    <a href="<?php echo isset($_SESSION['user_id']) ? 'submit-data.php' : 'signup.php?redirect=submit-data.php'; ?>"
                        class="px-8 py-4 bg-brand-dark text-white font-bold rounded-xl shadow-lg hover:bg-slate-800 transition-all flex items-center gap-2">
                        <i class="fa-solid fa-handshake"></i> Partner With Us
                    </a>
                    <a href="SaniBook_Synopsis_2025.pdf"
                        class="px-8 py-4 bg-white border-2 border-slate-200 text-slate-900 font-bold rounded-xl hover:bg-slate-50 transition-all flex items-center gap-2">
                        <i class="fa-solid fa-file-pdf text-brand-red"></i> Read the Launch Report
                    </a>
                </div>
            </div>
        </section>

        <!-- Visionary Leadership Section -->
        <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24 fade-up">
            <h2 class="text-3xl font-display font-bold mb-12 text-center">Visionary Leadership: <span
                    class="text-brand-teal">The 3 Voices</span></h2>
            <div class="grid md:grid-cols-3 gap-6">
                <!-- Elizabeth Wambui Mwangi -->
                <div class="glass-panel rounded-2xl hover:bg-white transition-colors group overflow-hidden">
                    <div class="h-80 overflow-hidden">
                        <img src="images/Launch Gallery/Elizabeth Wambui Mwangi.jpg" alt="Elizabeth Wambui Mwangi"
                            class="w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-105">
                    </div>
                    <div class="p-6">
                        <div class="mb-4 border-b border-slate-200 pb-4">
                            <h3 class="text-xl font-bold text-slate-900 group-hover:text-brand-teal transition-colors">
                                Elizabeth Wambui Mwangi</h3>
                            <p class="text-xs text-slate-500 mt-1">Founding Architect</p>
                        </div>
                        <p class="text-slate-600 text-sm leading-relaxed mb-4 font-semibold">
                            "SaniBook is not just a book; it is a ladder to SDG 6.2."
                        </p>
                        <p class="text-slate-500 text-sm">
                            Elizabeth presented the SaniBook as the structural solution to the sector's fragmentation.
                            She framed the directory as the missing link that moves the sector from scattered pilots to
                            a
                            unified national strategy.
                        </p>
                    </div>
                </div>

                <!-- PS Mary Muthoni -->
                <div class="glass-panel rounded-2xl hover:bg-white transition-colors group overflow-hidden">
                    <div class="h-80 overflow-hidden">
                        <img src="images/Launch Gallery/PS Dr. Mary Muthoni Muriuki.jpg" alt="PS Mary Muthoni Muriuki"
                            class="w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-105">
                    </div>
                    <div class="p-6">
                        <div class="mb-4 border-b border-slate-200 pb-4">
                            <h3 class="text-xl font-bold text-slate-900 group-hover:text-brand-teal transition-colors">
                                PS Mary Muthoni Muriuki, CBS</h3>
                            <p class="text-xs text-slate-500 mt-1">State Department for Public Health & Professional
                                Standards</p>
                        </div>
                        <p class="text-slate-600 text-sm leading-relaxed mb-4 font-semibold">
                            "When you equip us with this high-quality data, I am empowered to serve as your strongest
                            advocate at the decision-making table. Objective evidence is the cornerstone of our
                            strategy; it provides the necessary leverage to successfully secure the resources and
                            investments your communities rightfully deserve."
                        </p>
                    </div>
                </div>

                <!-- PS Eng. Festus Ng'eno -->
                <div class="glass-panel rounded-2xl hover:bg-white transition-colors group overflow-hidden">
                    <div class="h-80 overflow-hidden">
                        <img src="images/Launch Gallery/Dr. Eng. Festus K. Ng'eno.jpg" alt="Dr. Eng. Festus K. Ng'eno"
                            class="w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-105">
                    </div>
                    <div class="p-6">
                        <div class="mb-4 border-b border-slate-200 pb-4">
                            <h3 class="text-xl font-bold text-slate-900 group-hover:text-brand-teal transition-colors">
                                Dr. Eng. Festus K. Ng'eno, MIEK, CBS</h3>
                            <p class="text-xs text-slate-500 mt-1">State Department for Environment & Climate Change</p>
                        </div>
                        <p class="text-slate-600 text-sm leading-relaxed mb-4 font-semibold">
                            "We must turn the lights on. Innovation without visibility cannot solve our climate crisis.
                            The primary barrier identified in this report is 'Data Darkness'—a void that obscures our
                            progress and inhibits our impact. I want to be clear: our sector does not suffer from a lack
                            of innovation, but from a critical lack of visibility. By endorsing SaniBook, we are finally
                            linking sanitation directly to Climate Action, ensuring that every solution is seen,
                            measured, and scaled."
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Unveiling Moment Section -->
        <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24 fade-up">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div class="order-2 md:order-1">
                    <h2 class="text-3xl md:text-4xl font-display font-bold mb-6 text-slate-900">Symbolism of the
                        <span class="text-brand-gold">Unveiling</span>
                    </h2>
                    <p class="text-slate-600 text-lg leading-relaxed mb-6">
                        The joint presence of the Principal Secretaries for Climate Change and Public Health at the
                        SaniBook unveiling serves as a definitive signal that Kenya has elevated sanitation from a
                        siloed service to a national strategic priority, harmonizing environmental resilience with human
                        dignity to drive a climate-smart, health-first political agenda.
                    </p>
                </div>
                <div class="order-1 md:order-2">
                    <div class="rounded-2xl overflow-hidden border border-white/10 shadow-2xl relative group">
                        <div
                            class="absolute inset-0 bg-brand-gold/20 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity z-10">
                        </div>
                        <img src="images/Launch Gallery/launch_01.jpg" alt="The Unveiling Moment"
                            class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700">
                    </div>
                </div>
            </div>
        </section>

        <!-- The Path Forward: Digital Nexus Section -->
        <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-32 fade-up">
            <div
                class="bg-gradient-to-br from-brand-dark to-brand-teal p-8 md:p-12 rounded-3xl relative overflow-hidden shadow-2xl border border-white/10">
                <div
                    class="absolute top-0 right-0 w-64 h-64 bg-brand-gold/10 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2">
                </div>
                <h2 class="text-4xl font-display font-bold mb-8 text-white text-center">The Path Forward: <span
                        class="text-brand-gold">The
                        Digital Pivot</span></h2>
                <div class="max-w-4xl mx-auto text-center">
                    <h3 class="text-3xl font-bold text-white mb-6">From Page-Based to Content-Based</h3>
                    <p class="text-blue-100 leading-relaxed mb-12 text-xl mx-auto max-w-3xl">
                        SaniBook is evolving from a static report ("Page-Based") to a dynamic, living National
                        Digital Directory ("Content-Based").
                        This shift ensures that the platform remains a living "Source of Truth," where data is
                        updated in real-time.
                    </p>
                    <ul class="grid sm:grid-cols-3 gap-6 text-blue-200 text-lg">
                        <li
                            class="flex flex-col items-center gap-4 bg-white/5 p-6 rounded-2xl border border-white/10 hover:bg-white/10 transition-colors">
                            <div class="w-12 h-12 bg-brand-gold/20 rounded-full flex items-center justify-center">
                                <i class="fa-solid fa-check text-brand-gold"></i>
                            </div>
                            <span class="font-medium">Real-time project tracking</span>
                        </li>
                        <li
                            class="flex flex-col items-center gap-4 bg-white/5 p-6 rounded-2xl border border-white/10 hover:bg-white/10 transition-colors">
                            <div class="w-12 h-12 bg-brand-gold/20 rounded-full flex items-center justify-center">
                                <i class="fa-solid fa-check text-brand-gold"></i>
                            </div>
                            <span class="font-medium">Market intelligence vs. historical snapshots</span>
                        </li>
                        <li
                            class="flex flex-col items-center gap-4 bg-white/5 p-6 rounded-2xl border border-white/10 hover:bg-white/10 transition-colors">
                            <div class="w-12 h-12 bg-brand-gold/20 rounded-full flex items-center justify-center">
                                <i class="fa-solid fa-check text-brand-gold"></i>
                            </div>
                            <span class="font-medium">Unified data repository</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Gallery Section -->
        <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24 fade-up">
            <h2 class="text-3xl font-display font-bold mb-12 text-center">The Launch <span
                    class="text-brand-gold">Gallery</span></h2>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-12">
                <!-- Gallery Item 1 -->
                <div class="aspect-square rounded-xl overflow-hidden cursor-pointer group relative">
                    <img src="images/Launch Gallery/launch_01.jpg" alt="Launch Event Photo"
                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div
                        class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                        <i class="fa-solid fa-expand text-white text-2xl"></i>
                    </div>
                </div>
                <!-- Gallery Item 2 -->
                <div class="aspect-square rounded-xl overflow-hidden cursor-pointer group relative">
                    <img src="images/Launch Gallery/launch_02.jpg" alt="Launch Event Photo"
                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div
                        class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                        <i class="fa-solid fa-expand text-white text-2xl"></i>
                    </div>
                </div>
                <!-- Gallery Item 3 -->
                <div class="aspect-square rounded-xl overflow-hidden cursor-pointer group relative">
                    <img src="images/Launch Gallery/launch_03.jpg" alt="Launch Event Photo"
                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div
                        class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                        <i class="fa-solid fa-expand text-white text-2xl"></i>
                    </div>
                </div>
                <!-- Gallery Item 4 -->
                <div class="aspect-square rounded-xl overflow-hidden cursor-pointer group relative">
                    <img src="images/Launch Gallery/launch_04.jpg" alt="Launch Event Photo"
                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div
                        class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                        <i class="fa-solid fa-expand text-white text-2xl"></i>
                    </div>
                </div>
                <!-- Gallery Item 5 -->
                <div class="aspect-square rounded-xl overflow-hidden cursor-pointer group relative">
                    <img src="images/Launch Gallery/launch_05.jpg" alt="Launch Event Photo"
                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div
                        class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                        <i class="fa-solid fa-expand text-white text-2xl"></i>
                    </div>
                </div>
                <!-- Gallery Item 6 -->
                <div class="aspect-square rounded-xl overflow-hidden cursor-pointer group relative">
                    <img src="images/Launch Gallery/launch_06.jpg" alt="Launch Event Photo"
                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div
                        class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                        <i class="fa-solid fa-expand text-white text-2xl"></i>
                    </div>
                </div>
                <!-- Gallery Item 7 -->
                <div class="aspect-square rounded-xl overflow-hidden cursor-pointer group relative">
                    <img src="images/Launch Gallery/launch_07.jpg" alt="Launch Event Photo"
                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div
                        class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                        <i class="fa-solid fa-expand text-white text-2xl"></i>
                    </div>
                </div>
                <!-- Gallery Item 8 -->
                <div class="aspect-square rounded-xl overflow-hidden cursor-pointer group relative">
                    <img src="images/Launch Gallery/launch_08.jpg" alt="Launch Event Photo"
                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div
                        class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                        <i class="fa-solid fa-expand text-white text-2xl"></i>
                    </div>
                </div>
                <!-- Gallery Item 9 -->
                <div
                    class="aspect-video col-span-2 md:col-span-1 md:aspect-square rounded-xl overflow-hidden cursor-pointer group relative">
                    <img src="images/Launch Gallery/launch_09.jpg" alt="Launch Event Photo"
                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div
                        class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                        <i class="fa-solid fa-expand text-white text-2xl"></i>
                    </div>
                </div>
            </div>
            <div class="text-center"><a href="https://bit.ly/sanibook-launch-pictures" target="_blank"
                    class="inline-flex items-center gap-3 px-8 py-4 bg-brand-dark hover:bg-slate-800 text-white font-bold rounded-full transition-all group shadow-lg"><i
                        class="fa-brands fa-google text-brand-gold"></i><span>View Launch Album</span><i
                        class="fa-solid fa-arrow-up-right-from-square text-xs text-slate-300 group-hover:text-brand-gold opacity-70 group-hover:opacity-100 transition-all"></i></a>
            </div>
        </section>

        <!-- Final CTA -->
        <section class="max-w-xl mx-auto px-4 text-center pb-20 fade-up">
            <h3 class="text-2xl font-display font-bold mb-6">Be Part of the Solution</h3>
            <div class="flex flex-col gap-4">

                <a href="category.php?id=9"
                    class="w-full py-4 bg-brand-gold hover:bg-yellow-600 text-brand-dark font-bold rounded-xl uppercase tracking-widest shadow-lg transition-all flex items-center justify-center gap-3"><i
                        class="fa-solid fa-plus"></i>Submit Your Data </a>
            </div>
        </section>
    </main>

    <?php include 'footer.php'; ?>

    <script>
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) entry.target.classList.add('visible');
            });
        }, {
            threshold: 0.1
        });
        document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
    </script>
</body>

</html>