add this on top of the Header Banner <!-- Navbar --> <header class="fixed top-0 left-0 right-0 z-50 flex justify-between items-center px-4 py-3 glass-panel"> <div class="flex items-center"> <div class="w-10 h-10 flex items-center justify-center bg-niogold rounded-full"> <span class="text-xl font-bold text-white">N</span> </div> <span class="ml-2 text-xl font-bold text-niogold">Nioplay</span> </div> <div class="flex-1 mx-4"> <div class="relative glass-panel"> <input type="text" placeholder="Search games..." class="w-full py-2 px-4 bg-nioglass rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-niogold"> <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i> </div> </div> <div class="glass-panel px-4 py-1 flex items-center"> <i class="fas fa-coins text-niogold mr-2"></i> <span class="mr-2 text-white" style="text-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700;">GC: 25,000</span> <div class="h-5 w-px bg-gray-600 mx-2"></div> <i class="fas fa-trophy text-niogold mr-2"></i> <span class="mr-2 text-white" style="text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;">SC: 450</span> <div class="h-5 w-px bg-gray-600 mx-2"></div> <div class="group relative"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-niogold hover:animate-[iconBounce_0.5s_ease-in-out] animate-[iconGlow_2s_ease-in-out_infinite]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /> </svg> <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs animate-pulse">3</div> <div class="absolute left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap"> Shopping Cart </div> </div> </div> <div class="ml-4 flex items-center"> <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-gradient 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> <!-- 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> <!-- Notification Bell --> <div class="relative ml-3 group"> <i class="fas fa-bell text-xl text-niogold cursor-pointer hover:animate-[iconBounce_0.5s_ease-in-out]"></i> <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs">3</div> <div class="absolute left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap"> Notifications </div> </div> </div> </header> - Follow Up Deployment

index.html

@@ -174,6 +174,41 @@
             0% { background-position: 0 0; }
             100% { background-position: 40px 0; }
         }
+
+        @keyframes iconBounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-3px); }
+        }
+
+        @keyframes iconGlow {
+            0%, 100% { filter: drop-shadow(0 0 3px #FFD700); }
+            50% { filter: drop-shadow(0 0 7px #FFD700); }
+        }
+        
+        .glass-card.rounded-t-none {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+        
+        .glass-card.\!transform-none {
+            transform: none !important;
+        }
+        
+        .glass-card.\!hover\:transform-none:hover {
+            transform: none !important;
+        }
+        
+        .animate-\[iconBounce_0\.5s_ease-in-out\] {
+            animation: iconBounce 0.5s ease-in-out;
+        }
+        
+        .animate-\[iconGlow_2s_ease-in-out_infinite\] {
+            animation: iconGlow 2s ease-in-out infinite;
+        }
+        
+        .shadow-\[0_0_10px_\#FFD700\] {
+            box-shadow: 0 0 10px #FFD700;
+        }
         
         .offer-card {
             min-width: 280px;
@@ -221,9 +256,76 @@
         }
     </style>
 </head>
-<body class="gradient-bg min-h-screen flex flex-col">
+<body class="gradient-bg min-h-screen flex flex-col pt-24">
+    <!-- Navbar -->
+    <header class="fixed top-0 left-0 right-0 z-50 flex justify-between items-center px-4 py-3 glass-card !transform-none !hover:transform-none rounded-t-none">
+        <div class="flex items-center">
+            <div class="w-10 h-10 flex items-center justify-center bg-prime-yellow rounded-full">
+                <span class="text-xl font-bold text-black">N</span>
+            </div>
+            <span class="ml-2 text-xl font-bold text-prime-yellow">Nioplay</span>
+        </div>
+        
+        <div class="flex-1 mx-4">
+            <div class="relative glass-card">
+                <input type="text" placeholder="Search games..." class="w-full py-2 px-4 bg-glass-dark rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-prime-yellow">
+                <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
+            </div>
+        </div>
+        
+        <div class="glass-card px-4 py-1 flex items-center">
+            <i class="fas fa-coins text-prime-yellow mr-2"></i>
+            <span class="mr-2 text-white" style="text-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700;">GC: 25,000</span>
+            <div class="h-5 w-px bg-gray-600 mx-2"></div>
+            <i class="fas fa-trophy text-prime-yellow mr-2"></i>
+            <span class="mr-2 text-white" style="text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;">SC: 450</span>
+            <div class="h-5 w-px bg-gray-600 mx-2"></div>
+            <div class="group relative">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-prime-yellow hover:animate-[iconBounce_0.5s_ease-in-out] animate-[iconGlow_2s_ease-in-out_infinite]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+                </svg>
+                <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs animate-pulse">3</div>
+                <div class="absolute left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
+                    Shopping Cart
+                </div>
+            </div>
+        </div>
+        
+        <div class="ml-4 flex items-center">
+            <div class="relative group">
+                <!-- Profile Avatar with animated border -->
+                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-prime-yellow via-amber-200 to-prime-orange p-0.5 animate-spin-slow">
+                    <div class="w-full h-full rounded-full bg-gradient flex items-center justify-center relative overflow-hidden">
+                        <i class="fas fa-crown text-prime-yellow 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>
+                
+                <!-- VIP Badge with glow -->
+                <div class="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-gradient-to-br from-prime-yellow to-amber-200 flex items-center justify-center shadow-[0_0_10px_#FFD700] 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-prime-orange to-prime-yellow 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-prime-orange to-prime-yellow transform -translate-x-1/2 translate-y-1/2 rotate-45"></div>
+                </div>
+            </div>
+            
+            <!-- Notification Bell -->
+            <div class="relative ml-3 group">
+                <i class="fas fa-bell text-xl text-prime-yellow cursor-pointer hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
+                <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs">3</div>
+                <div class="absolute left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
+                    Notifications
+                </div>
+            </div>
+        </div>
+    </header>
     <!-- Header Banner -->
-    <header class="glass-card glow-effect relative mt-5 mx-4 md:mx-10 p-6 md:p-8">
+    <header class="glass-card glow-effect relative mx-4 md:mx-10 p-6 md:p-8 mt-5 md:mt-10">
         <div class="flex flex-col md:flex-row justify-between items-center">
             <div>
                 <h1 class="text-2xl md:text-3xl font-bold mb-2"><i class="fas fa-star mr-3 text-prime-yellow"></i>First purchase Bonus</h1>