From 87b5f583fa74f12ba0813a918cb32d5e89f4e9b5 Mon Sep 17 00:00:00 2001
From: Dinawo <hello@dinawo.fr>
Date: Sun, 7 Jul 2024 14:20:06 +0200
Subject: [PATCH] new ui header and video add to modal

---
 views/commands.ejs  | 202 ++++++++++++++++-----
 views/feathures.ejs |  79 ++++++--
 views/index.ejs     | 433 ++++++++++++++++++++++++--------------------
 views/legal.ejs     |  24 ++-
 4 files changed, 484 insertions(+), 254 deletions(-)

diff --git a/views/commands.ejs b/views/commands.ejs
index 35589e4..59356ad 100644
--- a/views/commands.ejs
+++ b/views/commands.ejs
@@ -247,27 +247,104 @@
         }
 
         .header-scrolled {
-            background-color: #1f2937; /* bg-gray-900 */
-            padding: 1rem; /* p-4 */
-            position: sticky;
-            top: 0; /* Collé en haut de la page */
-            z-index: 50; /* z-50 */
-            max-width: 40rem; /* max-w-xl */
-            border-radius: 9999px; /* rounded-full */
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-xl */
-            transition: transform 0.3s ease, padding 0.3s ease; /* Transition douce pour la transformation et le padding */
-            transform: scale(0.8); /* Réduction de la taille */
-            left: 50%; /* Alignement horizontal au milieu */
+            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); /* Agrandissement au survol */
-            padding: 2rem; /* Agrandissement du padding au survol */
+            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 */
+        }
+
+        .modal-content {
+            margin: 5% auto;
+            padding: 20px;
+            width: 90%;
+            max-width: 56rem; /* équivalent à max-w-4xl en Tailwind */
+        }
+
+        .video-container {
+            position: relative;
+            padding-bottom: 56.25%; /* ratio 16:9 */
+            height: 0;
+            overflow: hidden;
+        }
+
+        .video-container video,
+        .video-container iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        @media (max-width: 640px) {
+            .modal-content {
+                width: 95%;
+                margin: 2% auto;
+            }
         }
     </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">
@@ -299,17 +376,18 @@
         </div>
     </div>
 
-    <section id="home" class="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 polyvalent</h1>
-            <p class="text-xl mb-10 max-w-2xl mx-auto">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">
-                Inviter Raphael
-            </a>
-        </div>
-    </section>
+<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><br>
+        <h1 class="text-5xl font-bold mb-6 gradient-text">Les commandes de Raphael</h1>
+        <p class="text-xl mb-10 max-w-2xl mx-auto">Ici, vous trouverez des détails sur toutes les commandes disponibles.</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">
@@ -333,11 +411,18 @@
     </section>
 
     <div id="commandModal" class="modal">
-        <div class="modal-content">
+        <div class="modal-content max-w-4xl w-full">
             <span class="close">&times;</span>
             <h2 id="modalTitle" class="text-2xl font-bold mb-4"></h2>
             <p id="modalDescription" class="mb-4"></p>
             <p id="modalUsage" class="mb-4"></p>
+            <div class="video-container aspect-video mb-4">
+                <video id="modalVideo" class="w-full h-full object-cover" controls style="display: none;">
+                    <source src="" type="video/mp4">
+                    Votre navigateur ne supporte pas la balise vidéo.
+                </video>
+                <iframe id="youtubeVideo" class="w-full h-full" style="display: none;" frameborder="0" allowfullscreen></iframe>
+            </div>
             <button id="copyCommand" class="bg-blurple hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
                 Copier la commande
             </button>
@@ -353,26 +438,26 @@
     </footer>
     <script>
         const commands = [
-            { name: "about", description: "En savoir plus sur le bot et ses créateurs", usage: "/about", category: "utility" },
-            { name: "avatar", description: "Afficher l'avatar d'un utilisateur", usage: "/avatar @utilisateur", category: "utility" },
-            { name: "ban", description: "Bannir un membre", usage: "/ban @utilisateur raison", category: "moderation" },
-            { name: "clear", description: "Effacer un nombre spécifié de messages", usage: "/clear nombre", category: "moderation" },
-            { name: "config", description: "Configurer votre serveur", usage: "/config option valeur", category: "admin" },
-            { name: "embed", description: "Gérer les embeds", usage: "/embed action", category: "utility" },
-            { name: "emojiid", description: "Obtenir l'ID d'un emoji personnalisé", usage: "/emojiid :emoji:", category: "utility" },
-            { name: "help", description: "Afficher les commandes disponibles", usage: "/help [commande]", category: "utility" },
-            { name: "interaction", description: "Interagir avec quelqu'un en utilisant diverses actions", usage: "/interaction @utilisateur action", category: "fun" },
-            { name: "invite", description: "Obtenir le lien d'invitation du bot", usage: "/invite", category: "utility" },
-            { name: "joke", description: "Obtenir une blague aléatoire", usage: "/joke", category: "fun" },
-            { name: "kick", description: "Expulser un membre", usage: "/kick @utilisateur raison", category: "moderation" },
-            { name: "mute", description: "Mettre un membre en sourdine", usage: "/mute @utilisateur durée raison", category: "moderation" },
-            { name: "ping", description: "Afficher la latence du bot", usage: "/ping", category: "utility" },
-            { name: "roleinfo", description: "Afficher les informations d'un rôle", usage: "/roleinfo @rôle", category: "utility" },
-            { name: "serverinfo", description: "Afficher les informations du serveur", usage: "/serverinfo", category: "utility" },
-            { name: "ticket", description: "Création de ticket", usage: "/ticket action", category: "utility" },
-            { name: "user", description: "Afficher l'avatar et les informations d'un utilisateur", usage: "/user @utilisateur", category: "utility" },
-            { name: "userinfo", description: "Afficher les informations d'un utilisateur", usage: "/userinfo @utilisateur", category: "utility" },
-            { name: "warn", description: "Gérer les avertissements", usage: "/warn @utilisateur raison", category: "moderation" }
+            { name: "about", description: "En savoir plus sur le bot et ses créateurs", usage: "/about", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
+            { name: "avatar", description: "Afficher l'avatar d'un utilisateur", usage: "/avatar @utilisateur", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
+            { name: "ban", description: "Bannir un membre", usage: "/ban @utilisateur raison", category: "moderation", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
+            { name: "clear", description: "Effacer un nombre spécifié de messages", usage: "/clear nombre", category: "moderation", video: "https://youtu.be/dQw4w9WgXcQ" },
+            { name: "config", description: "Configurer votre serveur", usage: "/config option valeur", category: "admin", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
+            { name: "embed", description: "Gérer les embeds", usage: "/embed action", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
+            { name: "emojiid", description: "Obtenir l'ID d'un emoji personnalisé", usage: "/emojiid :emoji:", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
+            { name: "help", description: "Afficher les commandes disponibles", usage: "/help [commande]", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
+            { name: "interaction", description: "Interagir avec quelqu'un en utilisant diverses actions", usage: "/interaction @utilisateur action", category: "fun", video: "https://youtu.be/dQw4w9WgXcQ" },
+            { name: "invite", description: "Obtenir le lien d'invitation du bot", usage: "/invite", category: "utility", video: "https://youtu.be/dQw4w9WgXcQ" },
+            { name: "joke", description: "Obtenir une blague aléatoire", usage: "/joke", category: "fun", video: "https://exemple.com/videos/joke.mp4" },
+            { name: "kick", description: "Expulser un membre", usage: "/kick @utilisateur raison", category: "moderation", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
+            { name: "mute", description: "Mettre un membre en sourdine", usage: "/mute @utilisateur durée raison", category: "moderation", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
+            { name: "ping", description: "Afficher la latence du bot", usage: "/ping", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
+            { name: "roleinfo", description: "Afficher les informations d'un rôle", usage: "/roleinfo @rôle", category: "utility", video: "https://youtu.be/dQw4w9WgXcQ" },
+            { name: "serverinfo", description: "Afficher les informations du serveur", usage: "/serverinfo", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
+            { name: "ticket", description: "Création de ticket", usage: "/ticket action", category: "utility", video: "https://exemple.com/videos/ticket.mp4" },
+            { name: "user", description: "Afficher l'avatar et les informations d'un utilisateur", usage: "/user @utilisateur", category: "utility", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" },
+            { name: "userinfo", description: "Afficher les informations d'un utilisateur", usage: "/userinfo @utilisateur", category: "utility", video: "https://youtu.be/dQw4w9WgXcQ" },
+            { name: "warn", description: "Gérer les avertissements", usage: "/warn @utilisateur raison", category: "moderation", video: "https://www.youtube.com/watch?v=jeg_TJvkSjg" }
         ];
 
         function displayCommands(filteredCommands) {
@@ -405,10 +490,31 @@
             const modalDescription = document.getElementById('modalDescription');
             const modalUsage = document.getElementById('modalUsage');
             const copyButton = document.getElementById('copyCommand');
+            const videoElement = document.getElementById('modalVideo');
+            const youtubeElement = document.getElementById('youtubeVideo');
 
             modalTitle.textContent = command.name;
             modalDescription.textContent = command.description;
             modalUsage.textContent = `Usage: ${command.usage}`;
+
+            if (command.video) {
+                if (command.video.includes('youtube.com') || command.video.includes('youtu.be')) {
+                    // Vidéo YouTube
+                    videoElement.style.display = 'none';
+                    youtubeElement.style.display = 'block';
+                    youtubeElement.src = `https://www.youtube.com/embed/${getYouTubeId(command.video)}`;
+                } else {
+                    // Vidéo locale ou autre
+                    youtubeElement.style.display = 'none';
+                    videoElement.style.display = 'block';
+                    videoElement.querySelector('source').src = command.video;
+                    videoElement.load();
+                }
+            } else {
+                videoElement.style.display = 'none';
+                youtubeElement.style.display = 'none';
+            }
+
             modal.style.display = 'block';
 
             copyButton.onclick = () => {
@@ -419,6 +525,12 @@
             };
         }
 
+        function getYouTubeId(url) {
+            const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
+            const match = url.match(regExp);
+            return (match && match[2].length === 11) ? match[2] : null;
+        }
+
         function showSuccessMessage() {
             const successMessage = document.getElementById('successMessage');
             successMessage.classList.add('show');
diff --git a/views/feathures.ejs b/views/feathures.ejs
index 8049921..9ce1ea6 100644
--- a/views/feathures.ejs
+++ b/views/feathures.ejs
@@ -113,27 +113,74 @@
         }
 
         .header-scrolled {
-            background-color: #1f2937; /* bg-gray-900 */
-            padding: 1rem; /* p-4 */
-            position: sticky;
-            top: 0; /* Collé en haut de la page */
-            z-index: 50; /* z-50 */
-            max-width: 40rem; /* max-w-xl */
-            border-radius: 9999px; /* rounded-full */
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-xl */
-            transition: transform 0.3s ease, padding 0.3s ease; /* Transition douce pour la transformation et le padding */
-            transform: scale(0.8); /* Réduction de la taille */
-            left: 50%; /* Alignement horizontal au milieu */
+            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); /* Agrandissement au survol */
-            padding: 2rem; /* Agrandissement du padding au survol */
+            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">
@@ -162,10 +209,10 @@
         </nav>
     </div>
 </div>
-<section id="home" class="py-24 px-4">
+<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 polyvalent</h1>
-        <p class="text-xl mb-10 max-w-2xl mx-auto">Gérez et modérez votre serveur Discord avec des commandes administratives puissantes</p>
+        <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>
diff --git a/views/index.ejs b/views/index.ejs
index c145ae1..732ab1d 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -22,196 +22,239 @@
             }
         }
     </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);
-        }
-
-        .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: #1f2937; /* bg-gray-900 */
-            padding: 1rem; /* p-4 */
-            position: sticky;
-            top: 0; /* Collé en haut de la page */
-            z-index: 50; /* z-50 */
-            max-width: 40rem; /* max-w-xl */
-            border-radius: 9999px; /* rounded-full */
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-xl */
-            transition: transform 0.3s ease, padding 0.3s ease; /* Transition douce pour la transformation et le padding */
-            transform: scale(0.8); /* Réduction de la taille */
-            left: 50%; /* Alignement horizontal au milieu */
-            transform: translateX(-50%);
-        }
-
-        .header-scrolled:hover {
-            transform: translateX(-50%) scale(1); /* Agrandissement au survol */
-            padding: 2rem; /* Agrandissement du padding au survol */
-        }
-
-    </style>
+    <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">
@@ -236,6 +279,7 @@
     </div>
 </header>
 
+
 <div id="drawer-overlay" class="drawer-overlay"></div>
 <div id="drawer" class="drawer">
     <div class="drawer-content">
@@ -323,9 +367,14 @@
 
 <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>
-    <a href="/legal" class="discord-button inline-block" data-i18n="Documents légaux">
-        Documents légaux
-    </a>
+    <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>
diff --git a/views/legal.ejs b/views/legal.ejs
index 6e40a41..e01fea5 100644
--- a/views/legal.ejs
+++ b/views/legal.ejs
@@ -113,6 +113,27 @@
             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 */
+        }
     </style>
 </head>
 
@@ -145,7 +166,7 @@
     </div>
 </div>
 
-<section id="home" class="py-24 px-4">
+<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 polyvalent</h1>
         <p class="text-xl mb-10 max-w-2xl mx-auto">Nos différents documents légaux</p>
@@ -156,6 +177,7 @@
             Conditions générales d'utilisation
         </a>
     </div>
+    <iframe src="https://discord.com/widget?id=1197149888857784380&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
 </section>
 <script>