Please make the whole website christmas theme. Maybe with snow effect

components/footer.js

@@ -4,13 +4,31 @@ class CustomFooter extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         footer {
-          background: rgba(17, 24, 39, 0.8);
+          background: linear-gradient(to right, rgba(11, 64, 0, 0.8), rgba(139, 0, 0, 0.8));
           backdrop-filter: blur(10px);
           color: white;
           padding: 3rem 2rem;
           text-align: center;
-          border-top: 1px solid rgba(139, 92, 246, 0.2);
+          border-top: 1px solid rgba(255, 215, 0, 0.5);
+          position: relative;
+          overflow: hidden;
         }
+        footer::before {
+          content: "🎄";
+          position: absolute;
+          bottom: 0;
+          left: 10%;
+          font-size: 2rem;
+          opacity: 0.3;
+        }
+        footer::after {
+          content: "❄";
+          position: absolute;
+          bottom: 0;
+          right: 10%;
+          font-size: 2rem;
+          opacity: 0.3;
+}
         .footer-content {
           max-width: 1200px;
           margin: 0 auto;

index.html

@@ -13,9 +13,9 @@
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600;700&display=swap');
         .hero-gradient {
-            background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #3a0000 100%);
+            background: linear-gradient(135deg, #0a2e38 0%, #1a1a1a 50%, #3a0000 100%);
         }
-        .pulse-animation {
+.pulse-animation {
             animation: pulse 2s infinite;
         }
         @keyframes pulse {
@@ -55,15 +55,15 @@
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
             <!-- Navigation -->
 <nav class="relative z-10 bg-black bg-opacity-80 border-b border-yellow-500">
-        <!-- Thanksgiving Banner -->
-        <div class="w-full bg-gradient-to-r from-yellow-600 via-orange-600 to-red-700 text-center py-2 px-4">
-<div class="flex items-center justify-center space-x-2">
-                            <i data-feather="heart" class="text-white"></i>
-                            <span class="text-white font-bold">Happy Thanksgiving! Get 10% off all plans with code TURKEY10</span>
-                            <i data-feather="heart" class="text-white"></i>
-</div>
+        <!-- Christmas Banner -->
+        <div class="w-full bg-gradient-to-r from-green-700 via-red-600 to-green-700 text-center py-2 px-4 animate-pulse">
+            <div class="flex items-center justify-center space-x-2">
+                <i data-feather="gift" class="text-white"></i>
+                <span class="text-white font-bold">Merry Christmas! Get 15% off all plans with code HOLIDAY15</span>
+                <i data-feather="gift" class="text-white"></i>
+            </div>
         </div>
-        <div class="container mx-auto px-6 py-4">
+<div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
                     <i data-feather="zap" class="text-yellow-500 w-6 h-6"></i>
@@ -111,9 +111,15 @@
 </div>
 </div>
                 <div class="md:w-1/2 flex justify-center">
-                    <div class="vr-headset pulse-animation">
-                    <img src="https://huggingface.co/spaces/Fazbeeer/mindmaster-vr-arena-clone/resolve/main/images/Screen_Shot_2025-10-31_at_9.36.06_AM-removebg-preview%20(1).png" alt="VR Headset" class="rounded-lg shadow-2xl mx-auto w-full h-auto max-w-md object-contain">
-</div>
+                    <div class="vr-headset pulse-animation relative">
+                        <img src="https://huggingface.co/spaces/Fazbeeer/mindmaster-vr-arena-clone/resolve/main/images/Screen_Shot_2025-10-31_at_9.36.06_AM-removebg-preview%20(1).png" alt="VR Headset" class="rounded-lg shadow-2xl mx-auto w-full h-auto max-w-md object-contain">
+                        <div class="absolute -top-4 -left-4 w-16 h-16 bg-red-500 rounded-full flex items-center justify-center text-white text-2xl">
+                            <i data-feather="gift"></i>
+                        </div>
+                        <div class="absolute -bottom-4 -right-4 w-16 h-16 bg-green-500 rounded-full flex items-center justify-center text-white text-2xl">
+                            <i data-feather="star"></i>
+                        </div>
+                    </div>
 </div>
             </div>
         </div>
@@ -122,7 +128,12 @@
     <section id="features" class="relative z-10 py-20 bg-black bg-opacity-90">
 <div class="container mx-auto px-6">
             <h2 class="text-4xl font-bold text-center mb-16 font-['Bebas+Neue'] tracking-wider">
-                <span class="text-yellow-500">TRAIN</span> <span class="text-red-500">YOUR</span> <span class="text-white">MIND</span>
+                <span class="text-red-500">TRAIN</span> <span class="text-green-500">YOUR</span> <span class="text-white">MIND</span>
+                <div class="mt-4 text-xl text-yellow-300 flex justify-center items-center">
+                    <i data-feather="star" class="w-6 h-6 mx-2"></i>
+                    <span>Holiday Special</span>
+                    <i data-feather="star" class="w-6 h-6 mx-2"></i>
+                </div>
             </h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                     <!-- Feature 1 -->

script.js

@@ -67,18 +67,18 @@ const loadTranslateStyles = () => {
             clearInterval(translateInterval);
         }
     }, 100);
-
-// Create twinkling stars
-    const starsCount = 200;
-    for (let i = 0; i < starsCount; i++) {
-        const star = document.createElement('div');
-        star.className = 'star';
-        star.style.width = `${Math.random() * 3 + 1}px`;
-        star.style.height = star.style.width;
-        star.style.left = `${Math.random() * 100}%`;
-        star.style.top = `${Math.random() * 100}%`;
-        star.style.animationDelay = `${Math.random() * 3}s`;
-        document.body.appendChild(star);
+// Create snowflakes
+    const snowflakesCount = 75;
+    for (let i = 0; i < snowflakesCount; i++) {
+        const flake = document.createElement('div');
+        flake.className = 'snowflake';
+        flake.innerHTML = '❄';
+        flake.style.left = `${Math.random() * 100}%`;
+        flake.style.opacity = Math.random();
+        flake.style.animationDuration = `${Math.random() * 3 + 2}s`;
+        flake.style.animationDelay = `${Math.random() * 5}s`;
+        flake.style.fontSize = `${Math.random() * 10 + 10}px`;
+        document.body.appendChild(flake);
     }
 // Smooth scrolling for anchor links
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {

style.css

@@ -6,21 +6,32 @@ body {
     overflow-x: hidden;
     color: white;
 }
-@keyframes twinkle {
-    0% { opacity: 0.2; }
-    50% { opacity: 1; }
-    100% { opacity: 0.2; }
-}
-
-.star {
+@keyframes snow {
+    0% { 
+        transform: translateY(-10vh) rotate(0deg); 
+        opacity: 0;
+    }
+    10% { opacity: 1; }
+    90% { opacity: 1; }
+    100% { 
+        transform: translateY(100vh) rotate(360deg); 
+        opacity: 0;
+    }
+}
+
+.snowflake {
     position: fixed;
-    background: white;
-    border-radius: 50%;
-    animation: twinkle 3s infinite;
-    z-index: -1;
+    top: 0;
+    color: white;
+    user-select: none;
+    pointer-events: none;
+    z-index: 1;
+    animation-name: snow;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
 }
 
-/* Create random stars */
+/* Holiday gradient overlay */
 body::after {
     content: "";
     position: fixed;
@@ -29,8 +40,9 @@ body::after {
     width: 100%;
     height: 100%;
     background: 
-        radial-gradient(ellipse at top, rgba(255,255,255,0.1) 0%, transparent 70%),
-        radial-gradient(ellipse at bottom, rgba(255,215,0,0.1) 0%, transparent 70%);
+        linear-gradient(to bottom, 
+            rgba(139, 0, 0, 0.1) 0%, 
+            rgba(0, 100, 0, 0.1) 100%);
     pointer-events: none;
     z-index: -1;
 }