<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Julianum - Présentation de Raphael</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#7289DA',
                        secondary: '#99AAB5',
                        dark: '#23272A',
                        blurple: '#5865F2',
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Wittgenstein:ital,wght@0,400..900;1,400..900&display=swap');

        body {
            font-family: 'Poppins', sans-serif;
            background: rgb(2,0,36);
            color: #ffffff;
        }

        .gradient-text {
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            background-image: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
        }

        .glass {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .discord-button {
            background-color: #5865F2;
            color: white;
            padding: 10px 20px;
            border-radius: 28px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .discord-button:hover {
            background-color: #4752C4;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(88, 101, 242, 0.4);
        }

        /* Styles pour le drawer */
        .drawer {
            position: fixed;
            top: 0;
            right: -300px;
            width: 300px;
            height: 100vh;
            background-color: rgba(31, 41, 55, 0.95);
            transition: right 0.3s ease-in-out;
            z-index: 1000;
            overflow-y: auto;
        }

        .drawer.active {
            right: 0;
        }

        .drawer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 999;
        }

        .drawer-overlay.active {
            display: block;
        }

        .drawer-content {
            padding: 2rem;
        }

        .drawer-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 1.5rem;
            cursor: pointer;
        }

        .drawer a {
            display: block;
            padding: 0.5rem 0;
            color: white;
            text-decoration: none;
            font-size: 1.2rem;
        }

        .header-scrolled {
            background-color: rgba(31, 41, 55, 0.8); /* bg-gray-900 avec légère transparence */
            backdrop-filter: blur(10px);
            padding: 0.75rem 1.5rem; /* Ajustement du padding */
            position: fixed; /* fixed au lieu de sticky pour un meilleur contrôle */
            top: 1rem; /* Légèrement décollé du haut */
            left: 50%;
            transform: translateX(-50%);
            z-index: 50;
            max-width: 40rem;
            border-radius: 9999px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Transition avec effet de rebond */
            width: 100%; /* Initial width */
        }

        .header-scrolled:hover {
            transform: translateX(-50%) scale(1.05);
            padding: 1rem 2rem;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .header-scrolled.is-reducing {
            padding: 0.75rem 1.5rem; /* Ajoutez ici le padding réduit si différent */
            left: 50%; /* Placer au centre de la page */
            transform: translateX(-50%) scale(0.9); /* Réduction supplémentaire et centrage horizontal */
            transition: all 0.5s ease;
            width: 60%; /* Réduction de la largeur */
            max-width: none; /* Supprime la limite max-width */
            top: 1rem; /* Garder la position en haut */
            margin: 0 auto; /* Centre l'élément */
            position: fixed; /* Pour s'assurer que la position reste fixe */
        }

        .firstpage {
            position: relative; /* Nécessaire pour le positionnement du pseudo-élément */
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .firstpage::before {
            content: ""; /* Nécessaire pour que le pseudo-élément soit généré */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('/public/src/photo-1714548213565-9d241b6809d6.png');
            background-size: cover; /* Assure que l'image de fond couvre tout l'espace disponible */
            filter: brightness(50%); /* Applique le filtre uniquement à l'image de fond */
            z-index: -1; /* S'assure que le pseudo-élément reste en arrière-plan */
        }
    </style>
</head>

<script>
    window.addEventListener('scroll', function() {
        var header = document.querySelector('.header-scrolled');
        if (window.scrollY > 100) { // Ajustez cette valeur selon vos besoins
            header.classList.add('is-reducing');
        } else {
            header.classList.remove('is-reducing');
        }
    });

</script>

<body class="bg-dark text-gray-200">
<header class="bg-gray-900 p-4 sticky top-0 z-50 glass">
    <div class="container mx-auto flex justify-between items-center">
        <h1 class="text-2xl font-bold gradient-text">Julianum</h1>
        <nav class="hidden md:flex space-x-4">
            <a href="/" class="hover:text-primary transition-colors">Accueil</a>
            <a href="/bot/feathures" class="hover:text-primary transition-colors">Fonctionnalités</a>
            <a href="/bot/commands" class="hover:text-primary transition-colors">Commandes</a>
        </nav>
        <button id="drawer-button" class="md:hidden text-white focus:outline-none">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
            </svg>
        </button>
    </div>
</header>

<div id="drawer-overlay" class="drawer-overlay"></div>
<div id="drawer" class="drawer">
    <div class="drawer-content">
        <span id="drawer-close" class="drawer-close">&times;</span>
        <nav class="flex flex-col space-y-4">
            <a href="/" class="hover:text-primary transition-colors">Accueil</a>
            <a href="/bot/feathures" class="hover:text-primary transition-colors">Fonctionnalités</a>
            <a href="/bot/commands" class="hover:text-primary transition-colors">Commandes</a>
        </nav>
    </div>
</div>
<section id="home" class="firstpage py-24 px-4">
    <div class="container mx-auto text-center">
        <h1 class="text-5xl font-bold mb-6 gradient-text">Raphael, votre bot Discord avec des fonctionnalités avancées</h1>
        <p class="text-xl mb-10 max-w-2xl mx-auto">Découvrez les fonctionnalités avancées de Raphael pour gérer et modérer votre serveur Discord efficacement.</p>
        <a href="https://discord.com/oauth2/authorize?client_id=1232794371213230201" class="discord-button inline-block">
            Inviter Raphael
        </a>
    </div>
</section>

<section id="commands" class="py-24 px-4">
    <div class="container mx-auto">
        <h2 class="text-4xl font-bold mb-12 text-center gradient-text">Fonctionnalités</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">🛠️</span>: Bannir un membre
            </div>
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">📊</span>: Afficher les informations du bot
            </div>
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">🪄</span>: Effacer un nombre spécifié de messages
            </div>
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">🤖</span>: Obtenir l'image d'un emoji personnalisé
            </div>
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">⌨️</span>: Afficher les commandes disponibles
            </div>
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">👋</span>: Obtenir le lien d'invitation du bot
            </div>
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">🗡️</span>: Expulser un membre
            </div>
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">🛡️</span>: Mettre un membre en sourdine
            </div>
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">🗡️</span>: Gérer les notes de mise à jour
            </div>
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">⌨️</span>: Rechercher un utilisateur
            </div>
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">👨‍💻</span>: Afficher l'avatar et les informations d'un utilisateur
            </div>
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">📝</span>: Configurer le bot
            </div>
        </div>
    </div>
</section>



<footer class="py-12 px-4 bg-gray-900 text-center">
    <p>&copy; 2024 Julianum. Tous droits réservés.</p>
</footer>

<script>


    const drawerButton = document.getElementById('drawer-button');
    const drawer = document.getElementById('drawer');
    const drawerOverlay = document.getElementById('drawer-overlay');
    const drawerClose = document.getElementById('drawer-close');

    function toggleDrawer() {
        drawer.classList.toggle('active');
        drawerOverlay.classList.toggle('active');
    }

    drawerButton.addEventListener('click', toggleDrawer);
    drawerClose.addEventListener('click', toggleDrawer);
    drawerOverlay.addEventListener('click', toggleDrawer);

    window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 100) { // Commence à changer après 100px de défilement
                header.classList.add('header-scrolled');
            } else {
                header.classList.remove('header-scrolled');
            }
        });
</script>
</body>

</html>
