<!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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<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);
    }

    .feature-card {
        transition: all 0.3s ease;
    }

    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    #features,
    #commands {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .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;
    }

    .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 */
    }

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

    .text-reveal-container {
        position: relative;
        display: inline-block;
        overflow: hidden;
        color: transparent; /* Maintient le texte transparent */
    }

    .text-reveal-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5) 50%, transparent); /* Utilise un dégradé plus subtil */
        transform: translateX(-100%);
        animation: revealText 3s ease forwards, sparkle 1.5s ease-in-out 0.5s infinite alternate;
    }

    @keyframes revealText {
        to {
            transform: translateX(100%);
        }
    }

    @keyframes sparkle {
        0%, 100% {
            background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5) 50%, transparent);
        }
        50% {
            background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8) 50%, transparent);
        }
    }

    .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 */
    }

    .footer-content {
        display: inline-flex;
        align-items: center;
        gap: 1rem; /* Espace entre le texte et l'icône */
    }

    .discord-icon {
        color: #7289da; /* Couleur de l'icône Discord */
        text-decoration: none; /* Supprime la décoration de lien par défaut */
    }

    .discord-icon:hover {
        color: #5865f2; /* Couleur de l'icône Discord au survol */
    }


</style>

<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" data-i18n="Accueil">Accueil</a>
            <a href="/bot/feathures" class="hover:text-primary transition-colors" data-i18n="Fonctionnalités">Fonctionnalités</a>
            <a href="/bot/commands" class="hover:text-primary transition-colors" data-i18n="Commandes">Commandes</a>
        </nav>
        <select id="languageSelector" class="bg-gray-700 text-white px-2 py-1 rounded">
            <option value="fr">Français</option>
            <option value="en">English</option>
        </select>
        <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-reveal-container text-5xl font-bold mb-6 gradient-text" data-i18n="Raphael, votre bot Discord polyvalent">Raphael,
            votre bot Discord polyvalent</h1>
        <p class="text-xl mb-10 max-w-2xl mx-auto"
           data-i18n="Gérez et modérez votre serveur Discord avec des commandes administratives puissantes">Gérez et
            modérez votre serveur Discord avec des commandes administratives puissantes</p>
        <a href="https://discord.com/oauth2/authorize?client_id=1232794371213230201" class="discord-button inline-block"
           data-i18n="Inviter Raphael">
            Inviter Raphael
        </a>
    </div>
</section>

<section id="features" class="featurepage py-24 px-4 bg-gray-900">
    <div class="container mx-auto">
        <h2 class="text-4xl font-bold mb-12 text-center gradient-text" data-i18n="Fonctionnalités de Raphael">Fonctionnalités
            de Raphael</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="glass p-6 rounded-lg shadow-lg feature-card">
                <div class="text-4xl mb-4">🛠️</div>
                <h3 class="text-xl font-semibold mb-2" data-i18n="Modération avancée">Modération avancée</h3>
                <p data-i18n="Bannissez, expulsez, et gérez efficacement votre serveur.">Bannissez, expulsez, et gérez
                    efficacement votre serveur.</p>
            </div>
            <div class="glass p-6 rounded-lg shadow-lg feature-card">
                <div class="text-4xl mb-4">📊</div>
                <h3 class="text-xl font-semibold mb-2" data-i18n="Statistiques détaillées">Statistiques détaillées</h3>
                <p data-i18n="Obtenez des informations précises sur votre bot et vos utilisateurs.">Obtenez des
                    informations précises sur votre bot et vos utilisateurs.</p>
            </div>
            <div class="glass p-6 rounded-lg shadow-lg feature-card">
                <div class="text-4xl mb-4">🪄</div>
                <h3 class="text-xl font-semibold mb-2" data-i18n="Outils pratiques">Outils pratiques</h3>
                <p data-i18n="Nettoyez les messages, gérez les invitations, et bien plus encore.">Nettoyez les
                    messages, gérez les invitations, et bien plus encore.</p>
            </div>
        </div>
        <div class="text-center mt-10">
            <button id="showAllFeatures" class="text-primary hover:underline" data-i18n="Voir toutes les fonctionnalités">Voir toutes les fonctionnalités</button>
        </div>
    </div>
</section>

<section id="commands" class="py-24 px-4 bg-gray-800">
    <div class="container mx-auto">
        <h2 class="text-4xl font-bold mb-12 text-center gradient-text" data-i18n="Commandes principales">Commandes
            principales</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">ban</span>: 🛠️ <span data-i18n="Bannir un membre">Bannir un membre</span>
            </div>
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">kick</span>: 🚪 <span data-i18n="Expulser un membre">Expulser un membre</span>
            </div>
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">purge</span>: 🧹 <span data-i18n="Nettoyer le chat">Nettoyer le chat</span>
            </div>
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">stats</span>: 📊 <span data-i18n="Voir les statistiques du bot">Voir les
                        statistiques du bot</span>
            </div>
            <div class="glass p-4 rounded-lg hover:bg-gray-700 transition-all">
                <span class="font-bold">invite</span>: 🪄 <span data-i18n="Obtenir le lien d'invitation du bot">Obtenir
                        le lien d'invitation du bot</span>
            </div>
        </div>
        <div class="text-center mt-10">
            <button id="showAllCommands" class="text-primary hover:underline" data-i18n="Voir toutes les commandes">Voir toutes les commandes</button>
        </div>
    </div>
</section>

<footer class="py-12 px-4 bg-gray-900 text-center">
    <p data-i18n="© 2024 Myaxrin Labs. Tous droits réservés.">&copy; 2024 Myaxrin Labs. Tous droits réservés.</p><br>
    <div class="footer-content">
        <a href="/legal" class="discord-button inline-block" data-i18n="Documents légaux">
            Documents légaux
        </a>
        <a href="https://discord.gg/k6r96Tmtgx" class="discord-icon" target="_blank">
            <i class="fab fa-discord fa-2x" aria-hidden="true"></i>
        </a>
    </div>
</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);

    document.getElementById('showAllFeatures').addEventListener('click', function () {
        window.location.href = '/bot/feathures';
    });

    document.getElementById('showAllCommands').addEventListener('click', function () {
        window.location.href = '/bot/commands';
    });

    gsap.registerPlugin(ScrollTrigger);

    gsap.from(".feature-card", {
        opacity: 0,
        y: 100,
        stagger: 0.2,
        duration: 1,
        scrollTrigger: {
            trigger: ".feature-section", // Utilisez la section englobante comme déclencheur au lieu d'une carte individuelle
            start: "top center", // Ajustez ces valeurs pour déclencher l'animation plus tôt ou plus tard
            end: "bottom 100%",
            scrub: true,
        }
    });

    const translations = {
        "fr": {
            "Julianum - Présentation de Raphael": "Julianum - Présentation de Raphael",
            "Accueil": "Accueil",
            "Fonctionnalités": "Fonctionnalités",
            "Commandes": "Commandes",
            "Raphael, votre bot Discord polyvalent": "Raphael, votre bot Discord polyvalent",
            "Gérez et modérez votre serveur Discord avec des commandes administratives puissantes": "Gérez et modérez votre serveur Discord avec des commandes administratives puissantes",
            "Inviter Raphael": "Inviter Raphael",
            "Fonctionnalités de Raphael": "Fonctionnalités de Raphael",
            "Modération avancée": "Modération avancée",
            "Bannissez, expulsez, et gérez efficacement votre serveur.": "Bannissez, expulsez, et gérez efficacement votre serveur.",
            "Statistiques détaillées": "Statistiques détaillées",
            "Obtenez des informations précises sur votre bot et vos utilisateurs.": "Obtenez des informations précises sur votre bot et vos utilisateurs.",
            "Outils pratiques": "Outils pratiques",
            "Nettoyez les messages, gérez les invitations, et bien plus encore.": "Nettoyez les messages, gérez les invitations, et bien plus encore.",
            "Voir toutes les fonctionnalités": "Voir toutes les fonctionnalités",
            "Commandes principales": "Commandes principales",
            "Bannir un membre": "Bannir un membre",
            "Expulser un membre": "Expulser un membre",
            "Nettoyer le chat": "Nettoyer le chat",
            "Voir les statistiques du bot": "Voir les statistiques du bot",
            "Obtenir le lien d'invitation du bot": "Obtenir le lien d'invitation du bot",
            "Voir toutes les commandes": "Voir toutes les commandes",
            "© 2024 Myaxrin Labs. Tous droits réservés.": "© 2024 Myaxrin Labs. Tous droits réservés.",
            "Documents légaux": "Documents légaux"
        },
        "en": {
            "Julianum - Présentation de Raphael": "Julianum - Introduction to Raphael",
            "Accueil": "Home",
            "Fonctionnalités": "Features",
            "Commandes": "Commands",
            "Raphael, votre bot Discord polyvalent": "Raphael, your versatile Discord bot",
            "Gérez et modérez votre serveur Discord avec des commandes administratives puissantes": "Manage and moderate your Discord server with powerful administrative commands",
            "Inviter Raphael": "Invite Raphael",
            "Fonctionnalités de Raphael": "Raphael's Features",
            "Modération avancée": "Advanced Moderation",
            "Bannissez, expulsez, et gérez efficacement votre serveur.": "Ban, kick, and manage your server efficiently.",
            "Statistiques détaillées": "Detailed Statistics",
            "Obtenez des informations précises sur votre bot et vos utilisateurs.": "Get precise information about your bot and users.",
            "Outils pratiques": "Useful Tools",
            "Nettoyez les messages, gérez les invitations, et bien plus encore.": "Clean messages, manage invites, and much more.",
            "Voir toutes les fonctionnalités": "See all features",
            "Commandes principales": "Main Commands",
            "Bannir un membre": "Ban a member",
            "Expulser un membre": "Kick a member",
            "Nettoyer le chat": "Purge the chat",
            "Voir les statistiques du bot": "See bot statistics",
            "Obtenir le lien d'invitation du bot": "Get the bot invite link",
            "Voir toutes les commandes": "See all commands",
            "© 2024 Myaxrin Labs. Tous droits réservés.": "© 2024 Myaxrin Labs. All rights reserved.",
            "Documents légaux": "Legal Documents"
        }
    };

    const languageSelector = document.getElementById('languageSelector');
    const elementsToTranslate = document.querySelectorAll('[data-i18n]');

    // Function to apply translations
    function applyTranslations(selectedLanguage) {
        elementsToTranslate.forEach(el => {
            const translationKey = el.getAttribute('data-i18n');
            el.textContent = translations[selectedLanguage][translationKey];
        });
        document.title = translations[selectedLanguage][document.title];
    }

    // Check for stored language preference on page load
    document.addEventListener('DOMContentLoaded', () => {
        const storedLanguage = localStorage.getItem('language') || 'fr'; // Default to French if no preference
        languageSelector.value = storedLanguage;
        applyTranslations(storedLanguage);
    });

    // Update language preference and translations on language selector change
    languageSelector.addEventListener('change', (e) => {
        const selectedLanguage = e.target.value;
        localStorage.setItem('language', selectedLanguage); // Store language preference
        applyTranslations(selectedLanguage);
    });
    
        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>
