Spaces:

ProjectGenesis
/

vip-tier-ui

Running

App Files Files Community

38.6 kB

1 contributor

History: 12 commits

ProjectGenesis's picture

Decrease the glass-card sizes for Bottom CTA section - Follow Up Deployment

bee366e verified 5 months ago

.gitattributes
1.52 kB

initial commit 5 months ago
README.md
211 Bytes

Create a complete VIP Tier progression page UI for a sweepstakes casino website. Use a simple, modern layout with light animations to enhance interactivity. 🎨 Visual Theme: Black gradient background with two glowing orbs (1 neon orange, 1 dark gray), each with a slow pulsing animation Glassmorphism cards throughout: semi-transparent, soft blur, glowing orange/yellow borders Accent colors: neon orange, neon yellow, and deep gray Typography: bold modern sans-serif, glow accents on headers 🧱 Page Layout + Animation Details (Top to Bottom): 1. HERO SECTION Large centered glass card with: Header: "Your VIP Status" (glowing text with subtle flicker animation) Subtext: "Track your progress and unlock exclusive rewards." Top-left corner: mini profile card (player avatar + tier badge with shimmer effect) Background inside hero includes soft orb light glow with slow looped movement Glow ring or outline on entire card pulses every few seconds 2. CURRENT VS NEXT TIER CARDS (Side-by-Side) Two horizontal glass cards: Left: "Current Tier: NioPrime" List of perks with small glowing bullet icons Icons slide in left on load Right: "Next Tier: NioNexus" List of next perks (e.g., 5% cashback) Glow outline pulses slowly to show it's upcoming 3. VIP PROGRESS TRACKER (Horizontal) Full-width tier milestone tracker: Icons and labels for each tier (NioCore → NioLegend) Progress bar with animated fill line in neon orange Smoothly fills from current to next tier Active tier badge should bounce slightly or glow repeatedly 4. HOW TO EARN CARD (Right-aligned) Vertical glass card titled "How to Earn More VIP Points" Rows slide in from bottom on load: Play Slots – 100% rate Daily Missions – 2x Points Tournaments – Bonus Points CTA button: neon glowing edge with hover pulse 5. VIP EXCLUSIVES SECTION Title: "More VIP Exclusives" (text flickers once on load) Three vertically stacked cards: VIP Store (has subtle hover zoom-in effect) Special Events Double Point Days (add sparkle animation on card background) CTA: Go to Store (button bounces lightly on hover) 6. TIER LADDER (Bottom Scroll or Collapse) Horizontal list of tier cards (NioCore to NioLegend) Locked tiers: grayscale with lock icon pulse Hovering reveals reward preview (fade-in animation) Optional: include a toggle to collapse/show full ladder 💡 Design & Animation Notes: Animation speed: smooth, slow, subtle — no flashing or rapid transitions Hover animations should loop gently (not one-time) Use motion to guide attention, not overwhelm - Initial Deployment 5 months ago
index.html
36.5 kB

Decrease the glass-card sizes for Bottom CTA section - Follow Up Deployment 5 months ago
style.css
388 Bytes

initial commit 5 months ago