Spaces:

ProjectGenesis
/

wallet-ui-4

Running

App Files Files Community

ProjectGenesis commited on Oct 1, 2025

Commit

ecf1df4

verified ·

1 Parent(s): 4262342

Change the top header section to a more appealing and modern hero section

Browse files

Files changed (1) hide show

index.html +38 -17

index.html CHANGED Viewed

@@ -212,31 +212,52 @@
     </style>
 </head>
 <body class="min-h-screen relative overflow-x-hidden">
-    <header class="glass-card w-full px-4 md:px-8 py-6 md:py-5" id="page-header">
-        <div class="max-w-7xl mx-auto">
-            <div class="flex flex-wrap justify-between items-center gap-4">
-                <div>
-                    <h1 class="text-2xl md:text-3xl font-bold font-['Orbitron']" style="text-shadow:0 0 10px rgba(255,106,0,0.5)">Your Wallet</h1>
-                    <p class="text-secondary text-[#B8B8B8] mt-1 max-w-2xl">Track balances, Redeemables, and Transaction History.</p>
                 </div>
-                <div class="flex flex-col items-end">
-                    <div class="flex gap-3">
-                        <button id="btn-deposit" class="pill-button pill-button-primary">
-                            <span>Purchase</span>
-                        </button>
-                        <button id="btn-withdraw" class="pill-button pill-button-secondary">
-                            <span>Redeem</span>
-                        </button>
                     </div>
-                    <div class="flex gap-4 mt-2 text-xs text-[#B8B8B8]">
                     </div>
                 </div>
             </div>
         </div>
     </header>
-    <div class="max-w-7xl mx-auto px-4 md:px-8 py-8 md:py-10">
         <!-- Sticky CTA bar for mobile -->
         <div class="sticky-cta-bar flex justify-center gap-3 md:hidden mb-6">
             <button class="pill-button pill-button-primary">

     </style>
 </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-16 md:py-24">
+            <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>
+                </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>
+                <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>Purchase SC</span>
+                    </button>
+                    <button id="btn-withdraw" class="pill-button pill-button-secondary px-8 py-3 text-lg">
+                        <span>Redeem Now</span>
+                    </button>
                 </div>
+                <div class="grid grid-cols-3 gap-6 w-full max-w-2xl">
+                    <div class="flex flex-col items-center">
+                        <div class="text-3xl font-bold font-['Orbitron'] text-[#FFD600]">100%</div>
+                        <div class="text-sm text-[#B8B8B8]">Secure</div>
                     </div>
+                    <div class="flex flex-col items-center">
+                        <div class="text-3xl font-bold font-['Orbitron'] text-[#00E4FF]">24/7</div>
+                        <div class="text-sm text-[#B8B8B8]">Support</div>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="text-3xl font-bold font-['Orbitron'] text-[#3CE27A]">Instant</div>
+                        <div class="text-sm text-[#B8B8B8]">Transactions</div>
                     </div>
                 </div>
             </div>
+            <div class="absolute -bottom-20 left-0 right-0 h-40 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>
     </header>
+<div class="max-w-7xl mx-auto px-4 md:px-8 py-8 md:py-10">
         <!-- Sticky CTA bar for mobile -->
         <div class="sticky-cta-bar flex justify-center gap-3 md:hidden mb-6">
             <button class="pill-button pill-button-primary">