From 0da562734806de2851b83c955af4fc34616ec0d8 Mon Sep 17 00:00:00 2001
From: SimolZimol <70102430+SimolZimol@users.noreply.github.com>
Date: Tue, 19 Aug 2025 00:02:29 +0200
Subject: [PATCH] 	modified:   templates/about.html 	modified:  
 templates/contact.html 	modified:   templates/faq.html 	modified:  
 templates/help.html 	modified:   templates/landing.html

---
 templates/about.html   | 207 ++++++++++++++++++++++++-
 templates/contact.html | 275 +++++++++++++++++++++++++++++++--
 templates/faq.html     | 286 ++++++++++++++++++++++++++++++++--
 templates/help.html    | 338 +++++++++++++++++++++++++++++++++++++++--
 templates/landing.html |   2 +-
 5 files changed, 1055 insertions(+), 53 deletions(-)
diff --git a/templates/about.html b/templates/about.html
index 7717cbc..7094e2a 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -3,20 +3,213 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>About Us</title>
+    <title>About Multus Bot</title>
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         body {
-            background-color: #f7f7f7;
+            background: linear-gradient(135deg, #0c1426 0%, #1a1f2e 25%, #2d3748 75%, #0c1426 100%);
+            min-height: 100vh;
+            color: #e2e8f0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
+
         .hero {
-            background-color: #007bff;
+            background: linear-gradient(135deg, rgba(56, 178, 172, 0.9) 0%, rgba(49, 151, 149, 0.8) 100%);
+            backdrop-filter: blur(10px);
             color: white;
-            padding: 50px 0;
+            padding: 4rem 0;
             text-align: center;
+            position: relative;
+            overflow: hidden;
         }
-        .content {
-            margin: 50px 0;
+
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
+            animation: float 6s ease-in-out infinite;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+        }
+
+        .hero h1 {
+            font-size: 3rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
+            position: relative;
+            z-index: 1;
+        }
+
+        .hero .lead {
+            font-size: 1.3rem;
+            font-weight: 400;
+            position: relative;
+            z-index: 1;
+        }
+
+        .content-container {
+            background: rgba(26, 31, 46, 0.8);
+            backdrop-filter: blur(15px);
+            border: 1px solid rgba(102, 126, 234, 0.2);
+            border-radius: 20px;
+            padding: 2rem;
+            margin: 3rem auto;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+
+        .section-card {
+            background: rgba(45, 55, 72, 0.6);
+            border: 1px solid rgba(102, 126, 234, 0.2);
+            border-radius: 15px;
+            padding: 2rem;
+            margin-bottom: 2rem;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .section-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #38b2ac, #319795);
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+        }
+
+        .section-card:hover::before {
+            transform: scaleX(1);
+        }
+
+        .section-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 30px rgba(56, 178, 172, 0.1);
+            border-color: rgba(56, 178, 172, 0.4);
+        }
+
+        .section-title {
+            color: #e2e8f0;
+            font-weight: 700;
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+
+        .section-icon {
+            color: #38b2ac;
+            font-size: 1.5rem;
+        }
+
+        .section-content {
+            color: #a0aec0;
+            line-height: 1.7;
+            font-size: 1rem;
+        }
+
+        .highlight {
+            color: #38b2ac;
+            font-weight: 600;
+        }
+
+        .feature-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1.5rem;
+            margin-top: 2rem;
+        }
+
+        .feature-item {
+            background: rgba(45, 55, 72, 0.4);
+            border: 1px solid rgba(56, 178, 172, 0.2);
+            border-radius: 10px;
+            padding: 1.5rem;
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+
+        .feature-item:hover {
+            transform: translateY(-3px);
+            border-color: rgba(56, 178, 172, 0.5);
+            box-shadow: 0 8px 20px rgba(56, 178, 172, 0.1);
+        }
+
+        .feature-icon {
+            font-size: 2.5rem;
+            color: #38b2ac;
+            margin-bottom: 1rem;
+        }
+
+        .feature-title {
+            color: #e2e8f0;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+
+        .feature-description {
+            color: #a0aec0;
+            font-size: 0.9rem;
+        }
+
+        .footer {
+            background: linear-gradient(135deg, #0c1426 0%, #1a1f2e 100%);
+            color: #a0aec0;
+            padding: 2rem 0;
+            text-align: center;
+            border-top: 1px solid rgba(102, 126, 234, 0.1);
+            margin-top: 3rem;
+        }
+
+        .footer p {
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+        }
+
+        .footer-icon {
+            color: #38b2ac;
+        }
+
+        .container {
+            max-width: 1000px;
+        }
+
+        @media (max-width: 768px) {
+            .hero h1 {
+                font-size: 2.5rem;
+            }
+
+            .hero .lead {
+                font-size: 1.1rem;
+            }
+
+            .content-container {
+                margin: 2rem 1rem;
+                padding: 1.5rem;
+            }
+
+            .section-card {
+                padding: 1.5rem;
+            }
+
+            .feature-grid {
+                grid-template-columns: 1fr;
+            }
         }
     </style>
 </head>
@@ -42,7 +235,7 @@
     </div>
 
     <footer class="text-center py-3">
-        <p>&copy; 2024 Multus Bot. Exclusively available on Ludi et Historia.</p>
+        <p>&copy; 2025 Multus Bot. Exclusively available on Ludi et Historia.</p>
     </footer>
 
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
diff --git a/templates/contact.html b/templates/contact.html
index 746acbb..d035f3e 100644
--- a/templates/contact.html
+++ b/templates/contact.html
@@ -3,20 +3,234 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Contact Us</title>
+    <title>Contact Us - Multus Bot</title>
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         body {
-            background-color: #f7f7f7;
+            background: linear-gradient(135deg, #0c1426 0%, #1a1f2e 25%, #2d3748 75%, #0c1426 100%);
+            min-height: 100vh;
+            color: #e2e8f0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
+
         .hero {
-            background-color: #28a745;
+            background: linear-gradient(135deg, rgba(72, 187, 120, 0.9) 0%, rgba(56, 161, 105, 0.8) 100%);
+            backdrop-filter: blur(10px);
             color: white;
-            padding: 50px 0;
+            padding: 4rem 0;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
+            animation: float 8s ease-in-out infinite;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0px) rotate(0deg); }
+            50% { transform: translateY(-15px) rotate(180deg); }
+        }
+
+        .hero h1 {
+            font-size: 3rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
+            position: relative;
+            z-index: 1;
+        }
+
+        .hero .lead {
+            font-size: 1.3rem;
+            font-weight: 400;
+            position: relative;
+            z-index: 1;
+        }
+
+        .contact-container {
+            background: rgba(26, 31, 46, 0.8);
+            backdrop-filter: blur(15px);
+            border: 1px solid rgba(102, 126, 234, 0.2);
+            border-radius: 20px;
+            padding: 3rem;
+            margin: 3rem auto;
+            max-width: 800px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
             text-align: center;
         }
-        .contact-details {
-            margin: 50px 0;
+
+        .contact-header {
+            margin-bottom: 2rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid rgba(102, 126, 234, 0.1);
+        }
+
+        .contact-title {
+            color: #e2e8f0;
+            font-weight: 700;
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.75rem;
+        }
+
+        .contact-subtitle {
+            color: #a0aec0;
+            font-size: 1.1rem;
+        }
+
+        .contact-card {
+            background: rgba(45, 55, 72, 0.8);
+            border: 1px solid rgba(72, 187, 120, 0.3);
+            border-radius: 15px;
+            padding: 2rem;
+            margin: 1.5rem 0;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .contact-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #48bb78, #38a169);
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+        }
+
+        .contact-card:hover::before {
+            transform: scaleX(1);
+        }
+
+        .contact-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 30px rgba(72, 187, 120, 0.2);
+            border-color: rgba(72, 187, 120, 0.5);
+        }
+
+        .discord-icon {
+            font-size: 4rem;
+            color: #5865f2;
+            margin-bottom: 1.5rem;
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+        }
+
+        .contact-method {
+            color: #e2e8f0;
+            font-size: 1.2rem;
+            margin-bottom: 1rem;
+        }
+
+        .contact-username {
+            background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
+            color: white;
+            padding: 0.75rem 1.5rem;
+            border-radius: 50px;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-weight: 600;
+            font-size: 1.1rem;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
+        }
+
+        .contact-username:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(88, 101, 242, 0.4);
+            color: white;
+            text-decoration: none;
+        }
+
+        .contact-info {
+            background: rgba(45, 55, 72, 0.6);
+            border: 1px solid rgba(102, 126, 234, 0.2);
+            border-radius: 10px;
+            padding: 1.5rem;
+            margin-top: 2rem;
+        }
+
+        .info-item {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.75rem;
+            margin-bottom: 1rem;
+            color: #a0aec0;
+        }
+
+        .info-item:last-child {
+            margin-bottom: 0;
+        }
+
+        .info-icon {
+            color: #48bb78;
+            font-size: 1.2rem;
+        }
+
+        .footer {
+            background: linear-gradient(135deg, #0c1426 0%, #1a1f2e 100%);
+            color: #a0aec0;
+            padding: 2rem 0;
+            text-align: center;
+            border-top: 1px solid rgba(102, 126, 234, 0.1);
+            margin-top: 3rem;
+        }
+
+        .footer p {
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+        }
+
+        .footer-icon {
+            color: #48bb78;
+        }
+
+        @media (max-width: 768px) {
+            .hero h1 {
+                font-size: 2.5rem;
+            }
+
+            .hero .lead {
+                font-size: 1.1rem;
+            }
+
+            .contact-container {
+                margin: 2rem 1rem;
+                padding: 2rem;
+            }
+
+            .contact-title {
+                font-size: 1.5rem;
+            }
+
+            .discord-icon {
+                font-size: 3rem;
+            }
         }
     </style>
 </head>
@@ -25,19 +239,54 @@
 
     <section class="hero">
         <div class="container">
-            <h1>Contact Us</h1>
+            <h1>
+                <i class="fas fa-envelope"></i> Contact Us
+            </h1>
             <p class="lead">Need help? Reach out to SimolZimol on Discord.</p>
         </div>
     </section>
 
-    <div class="container contact-details text-center">
-        <h2>Get in Touch</h2>
-        <p>If you have any questions or need support, you can contact <strong>SimolZimol</strong> on Discord:</p>
-        <p><strong>Username:</strong> <a href="https://discordapp.com/users/@simolzimol">@simolzimol</a></p>
+    <div class="container">
+        <div class="contact-container">
+            <div class="contact-header">
+                <h2 class="contact-title">
+                    <i class="fas fa-headset"></i> Get in Touch
+                </h2>
+                <p class="contact-subtitle">We're here to help with any questions or support you need</p>
+            </div>
+
+            <div class="contact-card">
+                <i class="fab fa-discord discord-icon"></i>
+                <p class="contact-method">Contact SimolZimol directly on Discord:</p>
+                <a href="https://discordapp.com/users/@simolzimol" class="contact-username">
+                    <i class="fab fa-discord"></i> @simolzimol
+                </a>
+
+                <div class="contact-info">
+                    <div class="info-item">
+                        <i class="fas fa-clock info-icon"></i>
+                        <span>Usually responds within 24 hours</span>
+                    </div>
+                    <div class="info-item">
+                        <i class="fas fa-language info-icon"></i>
+                        <span>Support available in English and German</span>
+                    </div>
+                    <div class="info-item">
+                        <i class="fas fa-server info-icon"></i>
+                        <span>Best reached on the Ludi et Historia server</span>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
-    <footer class="text-center py-3">
-        <p>&copy; 2024 Multus Bot. Reach out to us for any questions or support.</p>
+    <footer class="footer">
+        <div class="container">
+            <p>
+                <i class="fas fa-heart footer-icon"></i>
+                &copy; 2025 Multus Bot. Reach out to us for any questions or support. | Built with ❤️ by SimolZimol
+            </p>
+        </div>
     </footer>
 
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
diff --git a/templates/faq.html b/templates/faq.html
index c0c2aaf..bdb18e7 100644
--- a/templates/faq.html
+++ b/templates/faq.html
@@ -3,20 +3,193 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FAQ</title>
+    <title>FAQ - Multus Bot</title>
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         body {
-            background-color: #f7f7f7;
+            background: linear-gradient(135deg, #0c1426 0%, #1a1f2e 25%, #2d3748 75%, #0c1426 100%);
+            min-height: 100vh;
+            color: #e2e8f0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
+
         .hero {
-            background-color: #ffc107;
+            background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(139, 92, 246, 0.8) 100%);
+            backdrop-filter: blur(10px);
             color: white;
-            padding: 50px 0;
+            padding: 4rem 0;
             text-align: center;
+            position: relative;
+            overflow: hidden;
         }
-        .faq-list {
-            margin: 50px 0;
+
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
+            animation: shimmer 3s linear infinite;
+        }
+
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+
+        .hero h1 {
+            font-size: 3rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
+            position: relative;
+            z-index: 1;
+        }
+
+        .hero .lead {
+            font-size: 1.3rem;
+            font-weight: 400;
+            position: relative;
+            z-index: 1;
+        }
+
+        .faq-container {
+            background: rgba(26, 31, 46, 0.8);
+            backdrop-filter: blur(15px);
+            border: 1px solid rgba(102, 126, 234, 0.2);
+            border-radius: 20px;
+            padding: 2rem;
+            margin: 3rem auto;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+
+        .faq-header {
+            text-align: center;
+            margin-bottom: 2rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid rgba(102, 126, 234, 0.1);
+        }
+
+        .faq-title {
+            color: #e2e8f0;
+            font-weight: 700;
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+        }
+
+        .faq-subtitle {
+            color: #a0aec0;
+            font-size: 1.1rem;
+        }
+
+        .faq-item {
+            background: rgba(45, 55, 72, 0.8);
+            border: 1px solid rgba(102, 126, 234, 0.2);
+            border-radius: 15px;
+            margin-bottom: 1rem;
+            padding: 1.5rem;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .faq-item::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, #667eea, #764ba2);
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+        }
+
+        .faq-item:hover::before {
+            transform: scaleX(1);
+        }
+
+        .faq-item:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
+            border-color: rgba(102, 126, 234, 0.4);
+        }
+
+        .faq-question {
+            color: #e2e8f0;
+            font-weight: 600;
+            font-size: 1.1rem;
+            margin-bottom: 0.75rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .faq-answer {
+            color: #a0aec0;
+            line-height: 1.6;
+            margin: 0;
+        }
+
+        .question-icon {
+            color: #667eea;
+            font-size: 1.2rem;
+        }
+
+        .contact-highlight {
+            color: #667eea;
+            font-weight: 600;
+        }
+
+        .footer {
+            background: linear-gradient(135deg, #0c1426 0%, #1a1f2e 100%);
+            color: #a0aec0;
+            padding: 2rem 0;
+            text-align: center;
+            border-top: 1px solid rgba(102, 126, 234, 0.1);
+            margin-top: 3rem;
+        }
+
+        .footer p {
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+        }
+
+        .footer-icon {
+            color: #667eea;
+        }
+
+        .container {
+            max-width: 900px;
+        }
+
+        @media (max-width: 768px) {
+            .hero h1 {
+                font-size: 2.5rem;
+            }
+
+            .hero .lead {
+                font-size: 1.1rem;
+            }
+
+            .faq-container {
+                margin: 2rem 1rem;
+                padding: 1.5rem;
+            }
+
+            .faq-title {
+                font-size: 1.5rem;
+            }
         }
     </style>
 </head>
@@ -25,22 +198,103 @@
 
     <section class="hero">
         <div class="container">
-            <h1>Frequently Asked Questions</h1>
+            <h1>
+                <i class="fas fa-question-circle"></i> Frequently Asked Questions
+            </h1>
             <p class="lead">Find answers to the most common questions about Multus Bot.</p>
         </div>
     </section>
 
-    <div class="container faq-list">
-        <h2>FAQ</h2>
-        <ul class="list-group">
-            <li class="list-group-item"><strong>What is Multus Bot?</strong> Multus Bot is an AI-powered Discord bot created by SimolZimol, available exclusively on the Ludi et Historia server.</li>
-            <li class="list-group-item"><strong>How do I use Multus Bot?</strong> You can use Multus Bot by joining the Ludi et Historia server and interacting with its features.</li>
-            <li class="list-group-item"><strong>Who can I contact for support?</strong> If you need help, contact SimolZimol on Discord via <strong>@simolzimol</strong>.</li>
-        </ul>
+    <div class="container">
+        <div class="faq-container">
+            <div class="faq-header">
+                <h2 class="faq-title">
+                    <i class="fas fa-lightbulb"></i> Help & Support
+                </h2>
+                <p class="faq-subtitle">Everything you need to know about using Multus Bot</p>
+            </div>
+
+            <div class="faq-item">
+                <div class="faq-question">
+                    <i class="fas fa-robot question-icon"></i>
+                    What is Multus Bot?
+                </div>
+                <p class="faq-answer">
+                    Multus Bot is an AI-powered Discord bot created by SimolZimol, featuring intelligent automation, 
+                    server management tools, and advanced chat assistance. It's currently available exclusively 
+                    on the Ludi et Historia server, providing a comprehensive suite of moderation and engagement features.
+                </p>
+            </div>
+
+            <div class="faq-item">
+                <div class="faq-question">
+                    <i class="fas fa-cogs question-icon"></i>
+                    How do I use Multus Bot?
+                </div>
+                <p class="faq-answer">
+                    You can use Multus Bot by joining the Ludi et Historia server and interacting with its features 
+                    through Discord commands. Access your dashboard through this web interface to view statistics, 
+                    manage giveaways, and configure bot settings for your server experience.
+                </p>
+            </div>
+
+            <div class="faq-item">
+                <div class="faq-question">
+                    <i class="fas fa-gift question-icon"></i>
+                    How do giveaways work?
+                </div>
+                <p class="faq-answer">
+                    Multus Bot features an integrated giveaway system where you can participate in server giveaways 
+                    and track your winnings. Winners are selected automatically, and you can view your giveaway 
+                    history and redeem prizes through your user dashboard.
+                </p>
+            </div>
+
+            <div class="faq-item">
+                <div class="faq-question">
+                    <i class="fas fa-chart-line question-icon"></i>
+                    What are points and levels?
+                </div>
+                <p class="faq-answer">
+                    The bot tracks your server activity through a points and leveling system. Earn points by 
+                    participating in chat, completing activities, and engaging with the community. Your level 
+                    reflects your overall contribution and unlocks various server privileges.
+                </p>
+            </div>
+
+            <div class="faq-item">
+                <div class="faq-question">
+                    <i class="fas fa-headset question-icon"></i>
+                    Who can I contact for support?
+                </div>
+                <p class="faq-answer">
+                    If you need help or have questions about Multus Bot, contact 
+                    <span class="contact-highlight">@simolzimol</span> on Discord. 
+                    Our support team is available to help with bot features, troubleshooting, and general inquiries.
+                </p>
+            </div>
+
+            <div class="faq-item">
+                <div class="faq-question">
+                    <i class="fas fa-shield-alt question-icon"></i>
+                    Is my data safe?
+                </div>
+                <p class="faq-answer">
+                    Yes, Multus Bot follows Discord's privacy guidelines and data protection standards. 
+                    We only collect necessary information for bot functionality and server management. 
+                    Your personal data is securely stored and never shared with third parties.
+                </p>
+            </div>
+        </div>
     </div>
 
-    <footer class="text-center py-3">
-        <p>&copy; 2024 Multus Bot. All rights reserved.</p>
+    <footer class="footer">
+        <div class="container">
+            <p>
+                <i class="fas fa-code footer-icon"></i>
+                &copy; 2025 Multus Bot. All rights reserved. | Built with ❤️ by SimolZimol
+            </p>
+        </div>
     </footer>
 
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
diff --git a/templates/help.html b/templates/help.html
index 1ce9732..940b3b4 100644
--- a/templates/help.html
+++ b/templates/help.html
@@ -3,20 +3,275 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Help</title>
+    <title>Help Center - Multus Bot</title>
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         body {
-            background-color: #f7f7f7;
+            background: linear-gradient(135deg, #0c1426 0%, #1a1f2e 25%, #2d3748 75%, #0c1426 100%);
+            min-height: 100vh;
+            color: #e2e8f0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
+
         .hero {
-            background-color: #17a2b8;
+            background: linear-gradient(135deg, rgba(49, 130, 206, 0.9) 0%, rgba(43, 108, 176, 0.8) 100%);
+            backdrop-filter: blur(10px);
             color: white;
-            padding: 50px 0;
+            padding: 4rem 0;
             text-align: center;
+            position: relative;
+            overflow: hidden;
         }
-        .help-section {
-            margin: 50px 0;
+
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
+            animation: shimmer 4s linear infinite;
+        }
+
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+
+        .hero h1 {
+            font-size: 3rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
+            position: relative;
+            z-index: 1;
+        }
+
+        .hero .lead {
+            font-size: 1.3rem;
+            font-weight: 400;
+            position: relative;
+            z-index: 1;
+        }
+
+        .help-container {
+            background: rgba(26, 31, 46, 0.8);
+            backdrop-filter: blur(15px);
+            border: 1px solid rgba(102, 126, 234, 0.2);
+            border-radius: 20px;
+            padding: 2rem;
+            margin: 3rem auto;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+
+        .help-header {
+            text-align: center;
+            margin-bottom: 3rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid rgba(102, 126, 234, 0.1);
+        }
+
+        .help-title {
+            color: #e2e8f0;
+            font-weight: 700;
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.75rem;
+        }
+
+        .help-subtitle {
+            color: #a0aec0;
+            font-size: 1.1rem;
+        }
+
+        .help-options {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+
+        .help-card {
+            background: rgba(45, 55, 72, 0.8);
+            border: 1px solid rgba(102, 126, 234, 0.2);
+            border-radius: 15px;
+            padding: 2rem;
+            transition: all 0.3s ease;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .help-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #3182ce, #2b6cb0);
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+        }
+
+        .help-card:hover::before {
+            transform: scaleX(1);
+        }
+
+        .help-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 15px 35px rgba(49, 130, 206, 0.2);
+            border-color: rgba(49, 130, 206, 0.5);
+        }
+
+        .help-icon {
+            font-size: 3rem;
+            color: #3182ce;
+            margin-bottom: 1.5rem;
+            animation: float 3s ease-in-out infinite;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+        }
+
+        .help-card-title {
+            color: #e2e8f0;
+            font-weight: 600;
+            font-size: 1.3rem;
+            margin-bottom: 1rem;
+        }
+
+        .help-card-description {
+            color: #a0aec0;
+            line-height: 1.6;
+            margin-bottom: 1.5rem;
+        }
+
+        .help-btn {
+            background: linear-gradient(135deg, #3182ce 0%, #2b6cb0 100%);
+            border: none;
+            padding: 0.75rem 1.5rem;
+            border-radius: 50px;
+            color: white;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(49, 130, 206, 0.3);
+        }
+
+        .help-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(49, 130, 206, 0.4);
+            color: white;
+            text-decoration: none;
+        }
+
+        .help-btn.discord {
+            background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
+            box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
+        }
+
+        .help-btn.discord:hover {
+            box-shadow: 0 8px 25px rgba(88, 101, 242, 0.4);
+        }
+
+        .quick-links {
+            background: rgba(45, 55, 72, 0.6);
+            border: 1px solid rgba(102, 126, 234, 0.2);
+            border-radius: 15px;
+            padding: 1.5rem;
+            margin-top: 2rem;
+        }
+
+        .quick-links h3 {
+            color: #e2e8f0;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .quick-link-item {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 0.75rem;
+            margin-bottom: 0.5rem;
+            border-radius: 8px;
+            transition: all 0.3s ease;
+            color: #a0aec0;
+            text-decoration: none;
+        }
+
+        .quick-link-item:hover {
+            background: rgba(49, 130, 206, 0.1);
+            color: #e2e8f0;
+            text-decoration: none;
+            transform: translateX(5px);
+        }
+
+        .quick-link-icon {
+            color: #3182ce;
+        }
+
+        .footer {
+            background: linear-gradient(135deg, #0c1426 0%, #1a1f2e 100%);
+            color: #a0aec0;
+            padding: 2rem 0;
+            text-align: center;
+            border-top: 1px solid rgba(102, 126, 234, 0.1);
+            margin-top: 3rem;
+        }
+
+        .footer p {
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+        }
+
+        .footer-icon {
+            color: #3182ce;
+        }
+
+        .container {
+            max-width: 1000px;
+        }
+
+        @media (max-width: 768px) {
+            .hero h1 {
+                font-size: 2.5rem;
+            }
+
+            .hero .lead {
+                font-size: 1.1rem;
+            }
+
+            .help-container {
+                margin: 2rem 1rem;
+                padding: 1.5rem;
+            }
+
+            .help-options {
+                grid-template-columns: 1fr;
+                gap: 1.5rem;
+            }
+
+            .help-title {
+                font-size: 1.5rem;
+            }
         }
     </style>
 </head>
@@ -25,22 +280,73 @@
 
     <section class="hero">
         <div class="container">
-            <h1>Help Center</h1>
+            <h1>
+                <i class="fas fa-life-ring"></i> Help Center
+            </h1>
             <p class="lead">Find the resources you need to get help with Multus Bot.</p>
         </div>
     </section>
 
-    <div class="container help-section">
-        <h2>How Can We Help?</h2>
-        <p>Below are the available resources to help you with Multus Bot:</p>
-        <ul class="list-group">
-            <li class="list-group-item"><a href="/faq">Check our FAQ</a></li>
-            <li class="list-group-item">Contact SimolZimol directly on Discord: <a href="https://discordapp.com/users/@simolzimol">@simolzimol</a></li>
-        </ul>
+    <div class="container">
+        <div class="help-container">
+            <div class="help-header">
+                <h2 class="help-title">
+                    <i class="fas fa-hands-helping"></i> How Can We Help?
+                </h2>
+                <p class="help-subtitle">Choose from the available support options below</p>
+            </div>
+
+            <div class="help-options">
+                <div class="help-card">
+                    <i class="fas fa-question-circle help-icon"></i>
+                    <h3 class="help-card-title">Frequently Asked Questions</h3>
+                    <p class="help-card-description">
+                        Find answers to the most common questions about Multus Bot features, functionality, and usage.
+                    </p>
+                    <a href="/faq" class="help-btn">
+                        <i class="fas fa-book"></i> View FAQ
+                    </a>
+                </div>
+
+                <div class="help-card">
+                    <i class="fab fa-discord help-icon"></i>
+                    <h3 class="help-card-title">Direct Discord Support</h3>
+                    <p class="help-card-description">
+                        Get personalized help directly from SimolZimol, the creator of Multus Bot, on Discord.
+                    </p>
+                    <a href="https://discordapp.com/users/@simolzimol" class="help-btn discord">
+                        <i class="fab fa-discord"></i> Contact @simolzimol
+                    </a>
+                </div>
+            </div>
+
+            <div class="quick-links">
+                <h3>
+                    <i class="fas fa-bolt quick-link-icon"></i> Quick Links
+                </h3>
+                <a href="/about" class="quick-link-item">
+                    <i class="fas fa-info-circle quick-link-icon"></i>
+                    <span>About Multus Bot</span>
+                </a>
+                <a href="/contact" class="quick-link-item">
+                    <i class="fas fa-envelope quick-link-icon"></i>
+                    <span>Contact Information</span>
+                </a>
+                <a href="/login" class="quick-link-item">
+                    <i class="fas fa-sign-in-alt quick-link-icon"></i>
+                    <span>Login to Dashboard</span>
+                </a>
+            </div>
+        </div>
     </div>
 
-    <footer class="text-center py-3">
-        <p>&copy; 2024 Multus Bot. Reach out to us for any assistance.</p>
+    <footer class="footer">
+        <div class="container">
+            <p>
+                <i class="fas fa-support footer-icon"></i>
+                &copy; 2025 Multus Bot. We're here to help! | Built with ❤️ by SimolZimol
+            </p>
+        </div>
     </footer>
 
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
diff --git a/templates/landing.html b/templates/landing.html
index f319d44..3bd8630 100644
--- a/templates/landing.html
+++ b/templates/landing.html
@@ -323,7 +323,7 @@
 
     <footer class="footer">
         <div class="container">
-            <p><i class="fas fa-code"></i> &copy; 2024 Multus Bot | Built by SimolZimol | Exclusively on Ludi et Historia</p>
+            <p><i class="fas fa-code"></i> &copy; 2025 Multus Bot | Built by SimolZimol | Exclusively on Ludi et Historia</p>
         </div>
     </footer>
 
