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
e0fd3c1
verified
metadata
title: store-page-redesign
emoji: 🐳
colorFrom: gray
colorTo: pink
sdk: static
pinned: false
tags:
- deepsite
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference