add padding between the navbar and the hero section - Follow Up Deployment

index.html

@@ -224,7 +224,7 @@
             background: linear-gradient(to right, #D4AF37, #7D3C98);
             border-radius: 10px;
         }
-        @keyframes spin {
+        @keyframes spin-slow {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
@@ -243,6 +243,32 @@
             100% { width: 100%; }
         }
         
+        @keyframes shine {
+            0% { left: -50%; }
+            100% { left: 150%; }
+        }
+        
+        @keyframes rise {
+            0% { transform: translateY(0); opacity: 0; }
+            10% { opacity: 1; }
+            100% { transform: translateY(-20px); opacity: 0; }
+        }
+        
+        @keyframes float-1 {
+            0%, 100% { transform: translate(0, 0); }
+            50% { transform: translate(10px, 15px); }
+        }
+        
+        @keyframes float-2 {
+            0%, 100% { transform: translate(0, 0); }
+            50% { transform: translate(-5px, 10px); }
+        }
+        
+        @keyframes float-3 {
+            0%, 100% { transform: translate(0, 0); }
+            50% { transform: translate(7px, 5px); }
+        }
+        
         .animate-spin {
             animation: spin 4s linear infinite;
         }
@@ -282,15 +308,28 @@
         </div>
         
         <div class="ml-4 flex items-center">
-            <div class="relative">
-                <div class="w-10 h-10 rounded-full bg-gradient-to-r from-niogold to-amber-100 flex items-center justify-center">
-                    <i class="fas fa-user text-gray-900"></i>
+            <div class="relative group">
+                <!-- Profile Avatar with animated border -->
+                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-niogold via-amber-200 to-niopurple p-0.5 animate-spin-slow">
+                    <div class="w-full h-full rounded-full bg-black flex items-center justify-center relative overflow-hidden">
+                        <i class="fas fa-crown text-niogold text-xl z-10"></i>
+                        <!-- Shimmer effect -->
+                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    </div>
                 </div>
-                <div class="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-gradient-to-r from-niopurple to-purple-600 flex items-center justify-center">
-                    <span class="text-xs font-bold">5</span>
+                
+                <!-- VIP Badge with glow -->
+                <div class="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-gradient-to-br from-niogold to-amber-200 flex items-center justify-center shadow-glow animate-pulse">
+                    <span class="text-xs font-bold text-black">5</span>
+                </div>
+                
+                <!-- VIP Level Indicator with animation -->
+                <div class="absolute -top-2 left-1/2 -translate-x-1/2 bg-gradient-to-r from-niopurple to-niogold px-2 py-0.5 rounded-full text-xs font-bold whitespace-nowrap transform -translate-y-full opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
+                    <span class="text-white">Diamond Tier</span>
+                    <div class="absolute bottom-0 left-1/2 w-2 h-2 bg-gradient-to-r from-niopurple to-niogold transform -translate-x-1/2 translate-y-1/2 rotate-45"></div>
                 </div>
             </div>
-            <span class="ml-2 text-sm hidden md:block">VIP Level 5</span>
+            <span class="ml-2 text-sm hidden md:block text-transparent bg-clip-text bg-gradient-to-r from-niogold to-amber-200 font-bold">VIP 5</span>
         </div>
     </header>
     
@@ -328,59 +367,7 @@
         </div>
     </div>
     
-    <main class="ml-16 pt-16 pb-28 px-4 relative">
-        <!-- Creative Jackpot Ticker -->
-        <div class="relative glass-panel py-3 px-6 mb-6 overflow-hidden">
-            <div class="flex items-center">
-                <div class="mr-4 relative">
-                    <div class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-200 to-amber-400 shadow-lg flex items-center justify-center animate-spin">
-                        <div class="w-7 h-7 rounded-full bg-gradient-to-r from-amber-500 to-amber-300 flex items-center justify-center">
-                            <span class="text-amber-800 text-xs font-bold">$</span>
-                        </div>
-                    </div>
-                    <div class="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-yellow-300 shadow-glow"></div>
-                </div>
-                
-                <div class="flex-1">
-                    <div class="flex items-center">
-                        <h3 class="text-lg font-bold text-amber-300 mr-3 text-shadow shadow-amber-500/50">PROGRESSIVE JACKPOTS:</h3>
-                        <div class="relative h-7 overflow-hidden">
-                            <div class="jackpot-values animate-slide-down">
-                                <div class="flex items-center">
-                                    <span class="text-xl font-bold text-niogold">Mini: $82,950</span>
-                                </div>
-                                <div class="flex items-center">
-                                    <span class="text-xl font-bold text-niogold">Major: $245,120</span>
-                                </div>
-                                <div class="flex items-center">
-                                    <span class="text-xl font-bold text-amber-300">Mega: $1,245,890</span>
-                                </div>
-                                <div class="flex items-center">
-                                    <span class="text-xl font-bold text-yellow-300">Grand: $3,512,750</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="w-full h-1.5 bg-gray-800 rounded-full mt-1 overflow-hidden">
-                        <div class="h-full bg-gradient-to-r from-niogold via-amber-300 to-yellow-200 rounded-full animate-progress"></div>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="absolute top-1 right-2 flex">
-                <div class="w-2 h-2 rounded-full bg-yellow-300 shadow-glow mr-1 animate-pulse"></div>
-                <div class="w-2 h-2 rounded-full bg-yellow-300 shadow-glow mr-1 animate-ping"></div>
-                <div class="w-2 h-2 rounded-full bg-yellow-300 shadow-glow animate-pulse"></div>
-            </div>
-            
-            <div class="absolute top-0 left-0 w-full h-full">
-                <div class="absolute -top-2 -right-2 w-5 h-5 rounded-full bg-amber-300 opacity-30 animate-ping"></div>
-                <div class="absolute bottom-2 left-10 w-3 h-3 rounded-full bg-amber-300 opacity-30 animate-ping"></div>
-                <div class="absolute top-5 right-20 w-2 h-2 rounded-full bg-amber-300 opacity-30 animate-ping"></div>
-            </div>
-        </div>
-        
+    <main class="ml-16 pt-20 pb-28 px-4 relative">
         <!-- Hero Banner -->
         <div class="relative rounded-xl overflow-hidden mb-4 h-52 glass-panel premium-gradient">
             <div class="absolute inset-0 flex">