Redesign the entire page with a more appealing and modern look. Add in modern animation and keep all content.

index.html

@@ -15,11 +15,12 @@
             scroll-behavior: smooth;
         }
         body {
-            background: radial-gradient(circle at center, #1a0d00 0%, #0a0a0a 100%);
+            background: linear-gradient(135deg, #0f0f15 0%, #1a1a2e 100%);
             color: #F5F5F5;
             font-family: 'Poppins', sans-serif;
             min-height: 100vh;
             position: relative;
+            overflow-x: hidden;
         }
         body::before {
             content: "";
@@ -28,26 +29,48 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-6 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm29 22c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zM40 18c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM9 32c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' opacity='0.1' fill='%23ffffff' fill-rule='evenodd'/%3E%3C/svg%3E");
-            opacity: 0.1;
+            background: 
+                radial-gradient(circle at 20% 30%, rgba(255, 106, 0, 0.15) 0%, transparent 30%),
+                radial-gradient(circle at 80% 70%, rgba(0, 228, 255, 0.15) 0%, transparent 30%),
+                radial-gradient(circle at 40% 80%, rgba(60, 226, 122, 0.15) 0%, transparent 30%);
             z-index: -1;
+            animation: gradientPulse 15s ease infinite alternate;
+        }
+
+        @keyframes gradientPulse {
+            0% { opacity: 0.5; }
+            100% { opacity: 0.8; }
         }
         .glass-card {
-            background: rgba(10, 10, 10, 0.7);
-            border: 1px solid rgba(255, 106, 0, 0.15);
-            backdrop-filter: blur(12px);
-            border-radius: 1rem;
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
+            background: rgba(20, 20, 30, 0.6);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(16px);
+            border-radius: 16px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
             position: relative;
             overflow: hidden;
-            transition: all 0.3s ease;
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
+            transform: translateY(0);
         }
-.glass-card:hover {
-            transform: translateY(-4px);
+        .glass-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
             border-color: rgba(255, 255, 255, 0.2);
-            box-shadow: 0 0 20px rgba(255, 106, 0, 0.2);
         }
-        .chip {
+        .glass-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+            transition: 0.5s;
+        }
+        .glass-card:hover::before {
+            left: 100%;
+        }
+.chip {
             padding: 4px 12px;
             border-radius: 100px;
             font-size: 12px;
@@ -61,14 +84,18 @@
             border-radius: 100px;
             font-weight: 600;
             font-size: 14px;
-            padding: 10px 24px;
+            padding: 12px 28px;
             position: relative;
             overflow: hidden;
-            transition: all 0.3s ease;
-            text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+            text-shadow: 0 0 10px currentColor;
             z-index: 1;
+            transform: scale(1);
+        }
+        .pill-button:hover {
+            transform: scale(1.05);
         }
-        .pill-button::before {
+.pill-button::before {
             --a: 0turn;
             content: "";
             position: absolute;
@@ -128,11 +155,30 @@ animation: border-spin 3s linear infinite;
         }
         .big-number {
             font-family: 'Orbitron', sans-serif;
-            font-weight: 600;
+            font-weight: 700;
             line-height: 1.2;
-            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+            text-shadow: 0 0 15px currentColor;
+            letter-spacing: 1px;
+            position: relative;
+            display: inline-block;
         }
-        .tooltip-wrapper {
+        .big-number::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: currentColor;
+            transform: scaleX(0);
+            transform-origin: right;
+            transition: transform 0.4s ease;
+        }
+        .glass-card:hover .big-number::after {
+            transform: scaleX(1);
+            transform-origin: left;
+        }
+.tooltip-wrapper {
             position: relative;
             display: inline-flex;
         }
@@ -226,31 +272,34 @@ animation: border-spin 3s linear infinite;
 </head>
 <body class="min-h-screen relative overflow-x-hidden">
     <header class="relative w-full overflow-hidden" id="page-header">
-        <div class="absolute inset-0 bg-gradient-to-b from-[#1a0d00] to-[#0a0a0a] opacity-90"></div>
-        <div class="relative max-w-7xl mx-auto px-4 md:px-8 py-12 md:py-16">
-<div class="flex flex-col items-center text-center">
-                <h1 class="text-4xl md:text-6xl font-bold font-['Orbitron'] mb-4" style="text-shadow: 0 0 15px rgba(255, 106, 0, 0.7);">
-                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-[#FF6A00] to-[#FFD600]">Nioplay Wallet</span>
+        <div class="absolute inset-0 bg-gradient-to-br from-[#1a1a2e] to-[#16213e] opacity-95"></div>
+        <div class="relative max-w-7xl mx-auto px-4 md:px-8 py-8 md:py-12">
+            <div class="flex flex-col items-center text-center">
+                <h1 class="text-5xl md:text-7xl font-bold font-['Orbitron'] mb-6">
+                    <span class="relative inline-block">
+                        <span class="bg-clip-text text-transparent bg-gradient-to-r from-[#FF6A00] via-[#FFD600] to-[#3CE27A] animate-gradient-x">Nioplay Wallet</span>
+                        <span class="absolute -bottom-2 left-0 w-full h-1 bg-gradient-to-r from-[#FF6A00] via-[#FFD600] to-[#3CE27A] rounded-full"></span>
+                    </span>
                 </h1>
-                <p class="text-xl md:text-2xl text-[#B8B8B8] max-w-3xl mb-8">
-                    Your secure gateway to deposits, withdrawals, and real-time balance tracking
+                <p class="text-xl md:text-2xl text-[#E0E0E0] max-w-3xl mb-8 leading-relaxed">
+                    Your <span class="text-[#FFD600] font-medium">secure gateway</span> to deposits, withdrawals, and <span class="text-[#00E4FF] font-medium">real-time</span> balance tracking
                 </p>
                 
-                <div class="flex flex-wrap justify-center gap-4 mb-12">
-                <button id="btn-deposit" class="pill-button pill-button-primary px-8 py-3 text-lg">
-                    <span class="text-white">Purchase SC</span>
-</button>
-                    <button id="btn-withdraw" class="pill-button pill-button-secondary px-8 py-3 text-lg">
+                <div class="flex flex-wrap justify-center gap-6 mb-8">
+                    <button id="btn-deposit" class="pill-button pill-button-primary px-8 py-3 text-lg transform hover:-translate-y-1 transition-transform duration-300">
+                        <span class="text-white">Purchase SC</span>
+                    </button>
+                    <button id="btn-withdraw" class="pill-button pill-button-secondary px-8 py-3 text-lg transform hover:-translate-y-1 transition-transform duration-300">
                         <span class="text-[#3CE27A]">Redeem Now</span>
                     </button>
-</div>
-            <div class="absolute -bottom-10 left-0 right-0 h-20 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10"></div>
-</div>
-        
-        <div class="absolute inset-0 overflow-hidden opacity-20">
-            <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-[#FF6A00] blur-[100px]"></div>
-            <div class="absolute top-1/3 right-1/3 w-64 h-64 rounded-full bg-[#00E4FF] blur-[100px]"></div>
-            <div class="absolute bottom-1/4 right-1/4 w-64 h-64 rounded-full bg-[#3CE27A] blur-[100px]"></div>
+                </div>
+            </div>
+            
+            <div class="absolute inset-0 overflow-hidden z-0 pointer-events-none">
+                <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-[#FF6A00] blur-[120px] opacity-40 animate-pulse"></div>
+                <div class="absolute top-1/3 right-1/3 w-64 h-64 rounded-full bg-[#00E4FF] blur-[120px] opacity-30 animate-pulse animation-delay-2000"></div>
+                <div class="absolute bottom-1/4 right-1/4 w-64 h-64 rounded-full bg-[#3CE27A] blur-[120px] opacity-30 animate-pulse animation-delay-4000"></div>
+            </div>
         </div>
     </header>
 <div class="max-w-7xl mx-auto px-4 md:px-8 py-8 md:py-10">
@@ -477,26 +526,76 @@ animation: border-spin 3s linear infinite;
         
         
     </div>
-    
-    <script>
-        // Initialize libraries
-        document.addEventListener('DOMContentLoaded', function() {
-            feather.replace();
-            AOS.init({
-                duration: 600,
-                easing: 'ease-in-out',
-                once: true
-            });
-            
-            // Accordion functionality
-            const accordions = document.querySelectorAll('.accordion');
-            accordions.forEach(accordion => {
-                accordion.addEventListener('click', function() {
-                    const expanded = this.getAttribute('aria-expanded') === 'true';
-                    this.setAttribute('aria-expanded', !expanded);
+        <script>
+            // Initialize libraries
+            document.addEventListener('DOMContentLoaded', function() {
+                feather.replace();
+                AOS.init({
+                    duration: 800,
+                    easing: 'ease-out-quart',
+                    once: true,
+                    offset: 100
+                });
+                
+                // Smooth scroll animations for all links
+                document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+                    anchor.addEventListener('click', function (e) {
+                        e.preventDefault();
+                        document.querySelector(this.getAttribute('href')).scrollIntoView({
+                            behavior: 'smooth'
+                        });
+                    });
+                });
+                
+                // Button hover animations
+                document.querySelectorAll('.pill-button').forEach(button => {
+                    button.addEventListener('mouseenter', function() {
+                        anime({
+                            targets: this,
+                            scale: 1.05,
+                            duration: 300,
+                            easing: 'easeOutExpo'
+                        });
+                    });
+                    button.addEventListener('mouseleave', function() {
+                        anime({
+                            targets: this,
+                            scale: 1,
+                            duration: 300,
+                            easing: 'easeOutExpo'
+                        });
+                    });
+                });
+                
+                // Card hover animations
+                document.querySelectorAll('.glass-card').forEach(card => {
+                    card.addEventListener('mouseenter', function() {
+                        anime({
+                            targets: this,
+                            translateY: -15,
+                            duration: 400,
+                            easing: 'easeOutExpo'
+                        });
+                    });
+                    card.addEventListener('mouseleave', function() {
+                        anime({
+                            targets: this,
+                            translateY: 0,
+                            duration: 400,
+                            easing: 'easeOutExpo'
+                        });
+                    });
+                });
+                
+                // Gradient animation for hero text
+                anime({
+                    targets: '.animate-gradient-x',
+                    backgroundPositionX: ['0%', '100%'],
+                    duration: 8000,
+                    easing: 'linear',
+                    loop: true
                 });
             });
-        });
-    </script>
+        </script>
 </body>
 </html>