-
1.52 kB
initial commit
-
219 Bytes
Generate an online casino Store Page UI using a modern glassmorphism design system with a dark background and neon yellow/orange accents. Use the same visual style and layout rhythm as this reference: 👉 https://huggingface.co/spaces/ProjectGenesis/tournament-ui-redesign Focus on monetization clarity, coin package presentation, and premium design. The page should be optimized for user purchases, offer upsells, and support multiple coin types. Use a vertical scroll layout with bold call-to-actions and mobile-first spacing. 🧱 Page Layout (Top to Bottom) 🛒 1. Header Banner – Store Overview Glassmorphic banner at top of page Title: "🛒 Nioplay Coin Store" Subtext: "Get coins instantly. Boost your play. Unlock more wins." Display current balance: “Your Balance: 12,300 SC” with gold coin icon Optional floating button: "Need help? Contact Support" 💰 2. Coin Packages Section Display coin packages in a 2-column mobile grid or 3–4 per row on desktop Each package card includes: Coin quantity (e.g. 5,000 SC) Price (e.g. $19.99) Tag above: +25% Bonus, Best Value, First Time CTA button: "Buy Now" (pill-shaped, yellow-orange gradient, glows on hover) Card hover = light scale up + glow pulse Sort by default: Best value → Lowest price 🎁 3. Promotional Offers / Limited-Time Deals Separate section with horizontal scroll or stacked layout Each promo card includes: Offer name (🔥 Flash Deal – 2x Coins) Package value Time remaining (Ends in: 02h 14m) CTA: "Claim Offer" Some offers can be locked behind VIP tier 🔁 4. Coin Type Toggle Tabs Toggle section near top of Store: Tabs: Sweeps Coins (SC) | Bonus Coins (BSC) Tapping a tab reloads the package grid below Default tab = SC Include disclaimers for BSC if needed (*Bonus Coins not redeemable) 👑 5. VIP Store Section (Optional) Glass banner titled "👑 VIP-Only Offers" Locked packages show: Padlock icon Unlock message: "Available at NioPrime Tier" CTA: "View VIP Benefits" Unlocked packages behave like normal cards 📄 6. How Coins Work Info Section Expandable accordion or collapsible modal Titles: “What are Sweeps Coins?” “What are Bonus Coins?” “How to use your coins” Optional link to Terms of Use 🤝 7. Referral CTA Banner (Optional) Horizontal card at bottom of page Text: "Invite friends & earn coins when they purchase!" CTA button: "Refer & Earn" Subtext: "Earn 100 coins for each friend’s first purchase" 🎨 Visual / UX Style Theme: Background: solid black (#0C0C0C) Accent glow: Neon Yellow/Gold (#FFD700), Orange (#FFA500) Glassmorphism: blur layers, semi-transparent cards, soft shadows Font: Poppins or clean modern sans-serif Buttons: rounded-pill, bold font, gradient fill, hover glow Animations: soft shine on cards, hover zoom, pulse on CTAs Section spacing: vertical padding (24px+), clean margins The goal is to make the store clear, premium, trustworthy, and designed for fast, mobile-friendly coin purchases. No clutter. Prioritize readability, urgency, and conversion clarity. - Initial Deployment
-
32.7 kB
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
-
388 Bytes
initial commit