Spaces:
Running
Running
Design the top hero section of a VIP Tier progression page for a premium online casino platform. Use a dark futuristic neon color theme: deep black background, layered glass panels, glowing gold/orange accents, and subtle purples and blues. The aesthetic should feel exclusive, high-stakes, and elite — like a digital luxury lounge. 🎯 Page Goal: Immediately impress the user with a sleek display of their VIP status, highlight progression, and introduce core benefits in a clean, bold layout. 📐 Layout & Section Breakdown: SECTION 1: Top Banner / Hero Full-width dark neon background with animated gradient or particles (use visual suggestion only) Centered bold headline text: "Experience the VIP Tier" in large gold-glow font Subtitle underneath in smaller font: "Climb ranks, unlock perks, and enjoy exclusive rewards." Use layered geometry or abstract neon shapes behind the text for visual depth SECTION 2: VIP Profile Card (Floating under the banner, center-aligned) A glassmorphic card displaying user status Card content: Tier badge icon on the left (e.g. glowing shield or emblem) Tier name (e.g. “NioPrime”) in bold gold text Total VIP points: “1,250 VIP Points” Next tier goal: “Next Tier: NioNexus (2,500 Points)” Optional: small progress bar underneath, glowing yellow-orange at 50% fill Card should be semi-transparent with blurred background, soft drop shadow, and layered above the hero banner Use small spark or shine effects on the tier badge to indicate prestige SECTION 3: Mini Actions (Below the profile card) Two evenly spaced glowing buttons: [ View Tier Benefits ] [ How to Earn VIP Points ] Button style: neon-outlined with hover glow effects 🖌️ Design Style: Neon futuristic casino UI Use glass panels, soft shadows, blurred overlays Bold sans-serif typography with glow accents Subtle motion hints in backgrounds (no hard animation unless required) 📱 Notes: Design must be responsive for both desktop and mobile Keep hero section height limited to ~600px max Space sections visually with padding, do not overlap clutter - Initial Deployment
62f50d9
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VIP Tier Progression | Premium Casino</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'vip-dark': '#0a0a12', | |
| 'vip-darker': '#07070f', | |
| 'vip-gold': '#ffd700', | |
| 'vip-gold-glow': 'rgba(255, 215, 0, 0.25)', | |
| 'vip-orange': '#ff8c00', | |
| 'vip-purple': '#8a2be2', | |
| 'vip-blue': '#00bfff', | |
| 'vip-glass': 'rgba(30, 30, 50, 0.3)' | |
| }, | |
| boxShadow: { | |
| 'vip-gold': '0 0 15px 2px rgba(255, 215, 0, 0.7)', | |
| 'vip-gold-hover': '0 0 25px 5px rgba(255, 215, 0, 0.9)', | |
| 'vip-blue': '0 0 15px 2px rgba(0, 191, 255, 0.5)', | |
| 'vip-purple': '0 0 15px 2px rgba(138, 43, 226, 0.5)' | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 3s ease-in-out infinite', | |
| 'shine': 'shine 3s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| }, | |
| shine: { | |
| '0%': { 'background-position': '200% 0' }, | |
| '100%': { 'background-position': '-200% 0' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Montserrat:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #07070f; | |
| color: white; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| body::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.1) 0%, transparent 30%), | |
| radial-gradient(circle at 80% 70%, rgba(0, 191, 255, 0.1) 0%, transparent 30%), | |
| radial-gradient(circle at 50% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 30%); | |
| z-index: -1; | |
| } | |
| .hero-bg { | |
| background: | |
| linear-gradient(135deg, #0a0a12 0%, #121225 100%), | |
| radial-gradient(circle at top left, rgba(138, 43, 226, 0.2) 0%, transparent 30%), | |
| radial-gradient(circle at bottom right, rgba(0, 191, 255, 0.2) 0%, transparent 30%); | |
| position: relative; | |
| overflow: hidden; | |
| min-height: 500px; | |
| max-height: 600px; | |
| } | |
| .hero-bg::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| linear-gradient(90deg, rgba(255,215,0,0) 0%, rgba(255,215,0,0.05) 50%, rgba(255,215,0,0) 100%); | |
| animation: shine 6s linear infinite; | |
| opacity: 0.4; | |
| } | |
| .hero-bg::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: 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-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffd700' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"); | |
| opacity: 0.3; | |
| z-index: 0; | |
| } | |
| .vip-headline { | |
| font-family: 'Orbitron', sans-serif; | |
| text-shadow: 0 0 20px rgba(255, 215, 0, 0.7); | |
| letter-spacing: 1px; | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .vip-subtitle { | |
| text-shadow: 0 0 10px rgba(255, 215, 0, 0.4); | |
| } | |
| .glass-card { | |
| background: rgba(25, 25, 40, 0.4); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 215, 0, 0.2); | |
| border-radius: 16px; | |
| box-shadow: | |
| 0 4px 30px rgba(0, 0, 0, 0.1), | |
| 0 0 15px rgba(255, 215, 0, 0.3); | |
| z-index: 20; | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background: rgba(255, 255, 255, 0.1); | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #ffd700, #ff8c00); | |
| box-shadow: 0 0 10px rgba(255, 140, 0, 0.7); | |
| width: 50%; | |
| position: relative; | |
| } | |
| .progress-fill::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); | |
| animation: shine 1.5s infinite; | |
| } | |
| .neon-button { | |
| background: transparent; | |
| border: 2px solid; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| letter-spacing: 0.5px; | |
| transition: all 0.3s ease; | |
| text-shadow: 0 0 5px currentColor; | |
| position: relative; | |
| overflow: hidden; | |
| z-index: 1; | |
| } | |
| .neon-button::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); | |
| transition: all 0.5s; | |
| z-index: -1; | |
| } | |
| .neon-button:hover::before { | |
| left: 100%; | |
| } | |
| .neon-button.gold { | |
| border-color: #ffd700; | |
| color: #ffd700; | |
| box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); | |
| } | |
| .neon-button.gold:hover { | |
| box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); | |
| background: rgba(255, 215, 0, 0.1); | |
| } | |
| .neon-button.purple { | |
| border-color: #8a2be2; | |
| color: #8a2be2; | |
| box-shadow: 0 0 15px rgba(138, 43, 226, 0.5); | |
| } | |
| .neon-button.purple:hover { | |
| box-shadow: 0 0 25px rgba(138, 43, 226, 0.8); | |
| background: rgba(138, 43, 226, 0.1); | |
| } | |
| .tier-badge { | |
| position: relative; | |
| width: 80px; | |
| height: 80px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, #1a1a2e 0%, #0f0c29 100%); | |
| border: 2px solid #ffd700; | |
| box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); | |
| } | |
| .tier-badge::before { | |
| content: ""; | |
| position: absolute; | |
| top: -5px; | |
| left: -5px; | |
| right: -5px; | |
| bottom: -5px; | |
| border-radius: 50%; | |
| border: 2px solid #ff8c00; | |
| box-shadow: 0 0 15px rgba(255, 140, 0, 0.6); | |
| animation: pulse-slow 3s infinite; | |
| opacity: 0.7; | |
| } | |
| .tier-badge i { | |
| font-size: 40px; | |
| color: #ffd700; | |
| text-shadow: 0 0 10px rgba(255, 215, 0, 0.7); | |
| } | |
| .sparkle { | |
| position: absolute; | |
| width: 6px; | |
| height: 6px; | |
| background: #fff; | |
| border-radius: 50%; | |
| box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8); | |
| animation: sparkle 2s infinite; | |
| opacity: 0; | |
| } | |
| @keyframes sparkle { | |
| 0% { opacity: 0; transform: scale(0); } | |
| 50% { opacity: 1; transform: scale(1.2); } | |
| 100% { opacity: 0; transform: scale(0); } | |
| } | |
| .sparkle-1 { top: 10px; left: 20px; animation-delay: 0.5s; } | |
| .sparkle-2 { top: 60px; right: 15px; animation-delay: 1s; } | |
| .sparkle-3 { bottom: 15px; left: 35px; animation-delay: 1.5s; } | |
| .geometric-shape { | |
| position: absolute; | |
| opacity: 0.1; | |
| z-index: 1; | |
| } | |
| .shape-1 { | |
| top: 20%; | |
| left: 15%; | |
| width: 100px; | |
| height: 100px; | |
| border: 3px solid #ffd700; | |
| transform: rotate(45deg); | |
| } | |
| .shape-2 { | |
| bottom: 30%; | |
| right: 20%; | |
| width: 70px; | |
| height: 70px; | |
| border: 3px solid #8a2be2; | |
| border-radius: 50%; | |
| } | |
| .shape-3 { | |
| top: 40%; | |
| right: 25%; | |
| width: 50px; | |
| height: 50px; | |
| border: 3px solid #00bfff; | |
| transform: rotate(30deg); | |
| } | |
| @media (max-width: 768px) { | |
| .hero-content { | |
| padding-top: 40px; | |
| padding-bottom: 40px; | |
| } | |
| .vip-headline { | |
| font-size: 2rem; | |
| } | |
| .vip-card-content { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .tier-badge { | |
| margin: 0 auto 20px; | |
| } | |
| .button-group { | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .button-group .neon-button { | |
| width: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="hero-bg w-full rounded-2xl max-w-6xl flex flex-col items-center justify-center relative overflow-hidden"> | |
| <!-- Geometric shapes for depth --> | |
| <div class="geometric-shape shape-1"></div> | |
| <div class="geometric-shape shape-2"></div> | |
| <div class="geometric-shape shape-3"></div> | |
| <!-- Hero Content --> | |
| <div class="hero-content text-center px-4 py-12 relative z-10"> | |
| <h1 class="vip-headline text-5xl md:text-6xl font-bold text-vip-gold mb-4"> | |
| Experience the VIP Tier | |
| </h1> | |
| <p class="vip-subtitle text-xl md:text-2xl text-white max-w-2xl mx-auto"> | |
| Climb ranks, unlock perks, and enjoy exclusive rewards. | |
| </p> | |
| </div> | |
| <!-- VIP Profile Card --> | |
| <div class="glass-card p-6 md:p-8 w-full max-w-md -mt-4 md:-mt-8 relative"> | |
| <!-- Sparkle effects --> | |
| <div class="sparkle sparkle-1"></div> | |
| <div class="sparkle sparkle-2"></div> | |
| <div class="sparkle sparkle-3"></div> | |
| <div class="vip-card-content flex items-center md:items-start md:flex-row gap-6"> | |
| <!-- Tier Badge --> | |
| <div class="tier-badge relative"> | |
| <i class="fas fa-crown"></i> | |
| </div> | |
| <!-- VIP Info --> | |
| <div class="flex-1"> | |
| <div class="flex items-center gap-3 mb-1"> | |
| <span class="text-vip-gold font-bold text-xl md:text-2xl">NioPrime</span> | |
| <span class="text-xs px-2 py-1 bg-vip-gold-glow text-vip-gold rounded-full">VIP</span> | |
| </div> | |
| <div class="text-white mb-2"> | |
| <span class="font-semibold">1,250</span> VIP Points | |
| </div> | |
| <div class="text-vip-blue text-sm mb-3"> | |
| Next Tier: <span class="font-bold">NioNexus (2,500 Points)</span> | |
| </div> | |
| <!-- Progress Bar --> | |
| <div class="progress-bar mb-1"> | |
| <div class="progress-fill"></div> | |
| </div> | |
| <div class="text-right text-xs text-vip-gold">50% to next tier</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="button-group flex gap-6 mt-8 md:mt-10 px-4 w-full max-w-md justify-center"> | |
| <button class="neon-button gold py-3 px-6 flex-1 md:flex-none"> | |
| <i class="fas fa-gem mr-2"></i> View Tier Benefits | |
| </button> | |
| <button class="neon-button purple py-3 px-6 flex-1 md:flex-none"> | |
| <i class="fas fa-coins mr-2"></i> How to Earn VIP Points | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Decorative elements for the background --> | |
| <div class="absolute top-10 right-10 w-32 h-32 rounded-full bg-vip-purple opacity-10 blur-xl"></div> | |
| <div class="absolute bottom-20 left-10 w-40 h-40 rounded-full bg-vip-blue opacity-10 blur-xl"></div> | |
| <div class="absolute top-1/3 left-1/4 w-24 h-24 rounded-full bg-vip-gold opacity-10 blur-xl"></div> | |
| <script> | |
| // Add particle effect to hero background | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const hero = document.querySelector('.hero-bg'); | |
| const particles = 30; | |
| for (let i = 0; i < particles; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('absolute', 'rounded-full'); | |
| // Random properties for particles | |
| const size = Math.random() * 3 + 1; | |
| const posX = Math.random() * 100; | |
| const posY = Math.random() * 100; | |
| const color = Math.random() > 0.5 ? 'bg-vip-gold' : | |
| (Math.random() > 0.3 ? 'bg-vip-purple' : 'bg-vip-blue'); | |
| const opacity = Math.random() * 0.05 + 0.02; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| particle.style.left = `${posX}%`; | |
| particle.style.top = `${posY}%`; | |
| particle.classList.add(color); | |
| particle.style.opacity = opacity; | |
| // Add animation | |
| particle.style.animation = `float ${Math.random() * 6 + 4}s ease-in-out infinite`; | |
| particle.style.animationDelay = `${Math.random() * 5}s`; | |
| hero.appendChild(particle); | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ProjectGenesis/vip-card-pop-up" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |