chore: Update Google Fonts import in legal.ejs and feathures.ejs

2024-07-07 03:09:00 +02:00
parent 597a0fa739
commit 9345f2c8ec
5 changed files with 465 additions and 274 deletions
--- a/public/src/photo-1714548213565-9d241b6809d6.png
+++ b/public/src/photo-1714548213565-9d241b6809d6.png
--- a/views/commands.ejs
+++ b/views/commands.ejs
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="fr">
+
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -20,7 +21,7 @@
        }
    </script>
    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
+        @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;
@@ -108,9 +109,17 @@
        }

        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.1); }
-            100% { transform: scale(1); }
+            0% {
+                transform: scale(1);
+            }
+
+            50% {
+                transform: scale(1.1);
+            }
+
+            100% {
+                transform: scale(1);
+            }
        }

        .success-message {
@@ -130,13 +139,23 @@
        }

        @keyframes fadeIn {
-            from {opacity: 0;}
-            to {opacity: 1;}
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
        }

        @keyframes fadeOut {
-            from {opacity: 1;}
-            to {opacity: 0;}
+            from {
+                opacity: 1;
+            }
+
+            to {
+                opacity: 0;
+            }
        }

        .category-button {
@@ -214,8 +233,9 @@
            bottom: 0;
            left: 0;
            right: 0;
-            background-color: rgba(88, 101, 242, 0.3); /* Less aggressive color */
-            font-size: 0.8rem; /* Reduced size */            color: white;
+            background-color: rgba(88, 101, 242, 0.3);
+            font-size: 0.8rem;
+            color: white;
            padding: 0.5rem;
            text-align: center;
            opacity: 0;
@@ -227,6 +247,7 @@
        }
    </style>
 </head>
+
 <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">
@@ -237,8 +258,10 @@
                <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 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>
@@ -259,8 +282,10 @@
    <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">
+            <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>
@@ -270,14 +295,17 @@
        <div class="container mx-auto">
            <h2 class="text-4xl font-bold mb-12 text-center gradient-text">Commandes</h2>
            <div class="mb-8">
-            <input type="text" id="searchInput" placeholder="Rechercher une commande..." class="w-full p-2 rounded bg-gray-700 text-white">
+                <input type="text" id="searchInput" placeholder="Rechercher une commande..."
+                    class="w-full p-2 rounded bg-gray-700 text-white">
            </div>
            <div class="mb-8 flex flex-wrap justify-center gap-4">
                <button class="category-button glass px-4 py-2 rounded-full active" data-category="all">🔍 Toutes</button>
-            <button class="category-button glass px-4 py-2 rounded-full" data-category="moderation">🛡️ Modération</button>
+                <button class="category-button glass px-4 py-2 rounded-full" data-category="moderation">🛡️
+                    Modération</button>
                <button class="category-button glass px-4 py-2 rounded-full" data-category="utility">🔧 Utilitaire</button>
                <button class="category-button glass px-4 py-2 rounded-full" data-category="fun">🎉 Fun</button>
-            <button class="category-button glass px-4 py-2 rounded-full" data-category="admin">👑 Administration</button>
+                <button class="category-button glass px-4 py-2 rounded-full" data-category="admin">👑
+                    Administration</button>
            </div>
            <div id="commandList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            </div>
@@ -304,26 +332,6 @@
        <p>&copy; 2024 Julianum. Tous droits réservés.</p>
    </footer>
    <script>
-    function saveSelectedCategory(category) {
-        localStorage.setItem('selectedCategory', category);
-    }
-
-    function getSelectedCategory() {
-        return localStorage.getItem('selectedCategory') || 'all';
-    }
-
-    function applySelectedCategory() {
-        const savedCategory = getSelectedCategory();
-        categoryButtons.forEach(button => {
-            if (button.dataset.category === savedCategory) {
-                button.classList.add('active');
-            } else {
-                button.classList.remove('active');
-            }
-        });
-        filterCommands();
-    }
-
        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" },
@@ -434,6 +442,26 @@
            });
        });

+        function saveSelectedCategory(category) {
+            localStorage.setItem('selectedCategory', category);
+        }
+
+        function getSelectedCategory() {
+            return localStorage.getItem('selectedCategory') || 'all';
+        }
+
+        function applySelectedCategory() {
+            const savedCategory = getSelectedCategory();
+            categoryButtons.forEach(button => {
+                if (button.dataset.category === savedCategory) {
+                    button.classList.add('active');
+                } else {
+                    button.classList.remove('active');
+                }
+            });
+            filterCommands();
+        }
+
        document.addEventListener('DOMContentLoaded', applySelectedCategory);

        displayCommands(commands);
@@ -460,4 +488,6 @@
        });
    </script>
 </body>
+
 </html>
+
--- a/views/feathures.ejs
+++ b/views/feathures.ejs
@@ -23,7 +23,7 @@
        }
    </script>
    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
+        @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;
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -23,7 +23,7 @@
        }
    </script>
    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
+        @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;
@@ -69,13 +69,13 @@
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

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

-        /* Styles pour le drawer */
        .drawer {
            position: fixed;
            top: 0;
@@ -126,6 +126,69 @@
            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);
+            }
+        }
    </style>
 </head>

@@ -134,13 +197,19 @@
    <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>
+            <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 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>
@@ -158,71 +227,82 @@
    </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>
-        <a href="https://discord.com/oauth2/authorize?client_id=1232794371213230201" class="discord-button inline-block">
+        <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="py-24 px-4 bg-gray-900">
+<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">Fonctionnalités de Raphael</h2>
+        <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">Modération avancée</h3>
-                <p>Bannissez, expulsez, et gérez efficacement votre serveur.</p>
+                <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">Statistiques détaillées</h3>
-                <p>Obtenez des informations précises sur votre bot et vos utilisateurs.</p>
+                <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">Outils pratiques</h3>
-                <p>Nettoyez les messages, gérez les invitations, et bien plus encore.</p>
+                <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">Voir toutes les fonctionnalités</button>
+            <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">
+<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">Commandes principales</h2>
+        <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>: 🛠️ Bannir un membre
+                <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>: 🚪 Expulser un membre
+                <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>: 🧹 Nettoyer le chat
+                <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>: 📊 Voir les statistiques du bot
+                <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>: 🪄 Obtenir le lien d'invitation du bot
+                <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">Voir toutes les commandes</button>
+            <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>&copy; 2024 Myaxrin Labs. Tous droits réservés.</p><br>
-    <a href="/legal" class="discord-button inline-block">
+    <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>
 </footer>
@@ -249,7 +329,7 @@
    document.getElementById('showAllCommands').addEventListener('click', function () {
        window.location.href = '/bot/commands';
    });
-    // JavaScript pour l'animation GSAP
+
    gsap.registerPlugin(ScrollTrigger);

    gsap.from(".feature-card", {
@@ -258,12 +338,93 @@
        stagger: 0.2,
        duration: 1,
        scrollTrigger: {
-            trigger: ".feature-card",
-            start: "top 80%",
-            end: "bottom 60%",
-            scrub: true
+            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);
+    });
 </script>
 </body>

--- a/views/legal.ejs
+++ b/views/legal.ejs
@@ -23,7 +23,7 @@
        }
    </script>
    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
+        @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;