<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Prizes</title>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&family=Noto+Sans:wght@400;500;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"background-light": "#f7f6f8",
"background-dark": "#191022",
"cyber-black": "#0f0f13",
"cyber-gold": "#ffd700",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"],
"body": ["Noto Sans", "sans-serif"],
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
boxShadow: {
'neon': '0 0 10px rgba(127, 19, 236, 0.5), 0 0 20px rgba(127, 19, 236, 0.3)',
'neon-hover': '0 0 15px rgba(127, 19, 236, 0.7), 0 0 30px rgba(127, 19, 236, 0.5)',
'gold-glow': '0 0 8px rgba(255, 215, 0, 0.4)',
}
},
},
}
</script>
<style>
/* Custom scrollbar for cyber look */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #191022;
}
::-webkit-scrollbar-thumb {
background: #362348;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7f13ec;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 min-h-screen flex flex-col overflow-x-hidden">
<!-- Header -->
<header class="sticky top-0 z-50 w-full border-b border-[#362348] bg-[#1a1122]/90 backdrop-blur-md px-6 py-4 lg:px-10">
<div class="mx-auto flex max-w-[1400px] items-center justify-between">
<div class="flex items-center gap-4 text-white">
<div class="size-8 text-primary">
<span class="material-symbols-outlined !text-[32px]">sports_esports</span>
</div>
<h2 class="text-white text-xl font-bold leading-tight tracking-wide uppercase">QuizQuest</h2>
</div>
<nav class="hidden md:flex flex-1 justify-center gap-8">
<a class="text-slate-400 hover:text-white hover:shadow-neon transition-all text-sm font-medium uppercase tracking-wider" href="#">Quizzes</a>
<a class="text-slate-400 hover:text-white hover:shadow-neon transition-all text-sm font-medium uppercase tracking-wider" href="#">Leaderboard</a>
<a class="text-white text-sm font-bold uppercase tracking-wider border-b-2 border-primary pb-1" href="#">Prizes</a>
</nav>
<div class="flex items-center gap-4">
<div class="hidden sm:flex items-center gap-3 bg-[#2a1b36] rounded-full pl-1 pr-4 py-1 border border-primary/30 shadow-neon">
<div class="bg-primary rounded-full size-8 flex items-center justify-center">
<span class="material-symbols-outlined text-white !text-[18px]">bolt</span>
</div>
<div class="flex flex-col leading-none">
<span class="text-[10px] text-slate-400 uppercase font-bold">Balance</span>
<span class="text-cyber-gold font-bold text-sm tracking-wider shadow-gold-glow">12,450 XP</span>
</div>
</div>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 border-2 border-primary shadow-neon cursor-pointer" data-alt="User profile avatar" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuANk3G-ct3sbo3TLXnBAA4UNvWQQ50whVet_ddV-HHdlbGjcQSV5AlUOAIt9WDidZeyRQqxBhM5GtUSaP5R0VWA3B4FcW-UwAxKrXJSubFp85WcEwYWG4x0ZjHtEV7KuVmL8-pHmAslGdyz9HdrhPmJgFIwMgoxk_7uvis34nevKPOgaeWvRs1_LX3xaGc8JNagUB1SYtivcd7m6USJf1kcTe8ZILJ5FrRFutC0hz74pzn1CDEw2vc5RiRXc8rx1TgTB-9aXc9b");'></div>
</div>
</div>
</header>
<main class="flex-grow flex flex-col items-center w-full pb-20">
<!-- Hero / Featured Section -->
<section class="w-full relative overflow-hidden bg-background-dark">
<!-- Decorative Background Elements -->
<div class="absolute inset-0 bg-gradient-to-b from-primary/10 to-background-dark z-0 pointer-events-none"></div>
<div class="absolute top-0 right-0 w-1/2 h-full bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent z-0 pointer-events-none"></div>
<div class="relative z-10 mx-auto max-w-[1400px] px-4 py-12 lg:py-16">
<div class="flex flex-col lg:flex-row items-center gap-12">
<div class="flex-1 space-y-6 text-center lg:text-left">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/20 border border-primary/50 text-primary text-xs font-bold uppercase tracking-widest mb-2">
<span class="material-symbols-outlined !text-[16px]">verified</span>
Top Pick This Month
</div>
<h1 class="text-4xl lg:text-6xl font-black text-white leading-[1.1] tracking-tight uppercase drop-shadow-lg">
Cyber <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-[#b06bf9]">Loot</span><br/> Drop
</h1>
<p class="text-slate-300 text-lg max-w-xl mx-auto lg:mx-0 font-light">
Redeem your hard-earned XP for legendary tech. This month's featured item is the ultimate console experience.
</p>
<div class="flex flex-wrap gap-4 justify-center lg:justify-start pt-4">
<button class="group relative overflow-hidden bg-primary text-white font-bold py-4 px-8 rounded-full shadow-neon hover:shadow-neon-hover transition-all duration-300 transform hover:-translate-y-1">
<span class="relative z-10 flex items-center gap-2 uppercase tracking-wide">
View Details
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
</span>
<div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
</button>
<div class="flex items-center gap-2 px-6 py-4 rounded-full bg-[#2a1b36] border border-[#362348]">
<span class="text-slate-400 text-sm font-medium uppercase">Cost:</span>
<span class="text-cyber-gold font-bold text-lg">50,000 XP</span>
</div>
</div>
</div>
<div class="flex-1 relative group w-full max-w-[600px]">
<!-- Image Container with Glitch/Cyber Effect Borders -->
<div class="relative z-10 rounded-2xl overflow-hidden border border-primary/30 bg-[#2a1b36]/50 backdrop-blur-sm p-2 shadow-neon transition-transform duration-500 hover:scale-[1.02]">
<div class="aspect-[16/9] w-full bg-cover bg-center rounded-xl" data-alt="Playstation 5 console with controller and dark lighting" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBWwOHvjHmf0c7mwT9peqKt8llMkn6GXwZklRtybpTMCrG9Rqlt9cb9K1qXPUisboXAvFKVm2tJeKtaJShLQu2-fN3PLh08DipE-lOWGjBMXDw26WQGvY2XlC3qB7qhD3uQsxjG7d0_Bi1ksOizvXs7O5j4g3QwUeaPAqfOytydushiiI1rfx0P9uGxCA7VuCCVUIIFdw0vbUaXzaFnreRz6xpa4PkjlOEU2Hy9sSId1fIV15yscu6UI_sULPQ53wkFg0qSAyP5");'></div>
<!-- Overlay UI elements on the image -->
<div class="absolute top-6 left-6 bg-black/80 backdrop-blur text-white text-xs font-bold px-3 py-1 rounded-full uppercase border border-white/10">
Limited Stock
</div>
</div>
<!-- Background Glow Blob -->
<div class="absolute -inset-4 bg-primary/30 blur-3xl -z-10 rounded-full opacity-70 animate-pulse"></div>
</div>
</div>
</div>
</section>
<!-- Sticky Filter Bar -->
<div class="sticky top-[73px] z-40 w-full bg-[#1a1122]/95 backdrop-blur-md border-y border-[#362348] py-4">
<div class="mx-auto max-w-[1400px] px-6 overflow-x-auto no-scrollbar">
<div class="flex items-center gap-3 min-w-max">
<button class="flex items-center gap-2 bg-primary text-white px-5 py-2 rounded-full text-sm font-bold shadow-neon transition-all hover:bg-primary/90">
<span class="material-symbols-outlined !text-[18px]">grid_view</span>
All Loot
</button>
<button class="flex items-center gap-2 bg-[#2a1b36] hover:bg-[#362348] text-slate-300 hover:text-white px-5 py-2 rounded-full text-sm font-medium transition-all border border-transparent hover:border-primary/50">
<span class="material-symbols-outlined !text-[18px]">memory</span>
Hardware
</button>
<button class="flex items-center gap-2 bg-[#2a1b36] hover:bg-[#362348] text-slate-300 hover:text-white px-5 py-2 rounded-full text-sm font-medium transition-all border border-transparent hover:border-primary/50">
<span class="material-symbols-outlined !text-[18px]">headset_mic</span>
Gear
</button>
<button class="flex items-center gap-2 bg-[#2a1b36] hover:bg-[#362348] text-slate-300 hover:text-white px-5 py-2 rounded-full text-sm font-medium transition-all border border-transparent hover:border-primary/50">
<span class="material-symbols-outlined !text-[18px]">redeem</span>
Gift Cards
</button>
<button class="flex items-center gap-2 bg-[#2a1b36] hover:bg-[#362348] text-slate-300 hover:text-white px-5 py-2 rounded-full text-sm font-medium transition-all border border-transparent hover:border-primary/50">
<span class="material-symbols-outlined !text-[18px]">face</span>
Avatars
</button>
<div class="w-[1px] h-6 bg-[#362348] mx-2"></div>
<div class="relative group">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 !text-[18px]">search</span>
<input class="bg-[#0f0f13] border border-[#362348] text-sm text-white rounded-full pl-9 pr-4 py-2 w-64 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all placeholder-slate-600" placeholder="Search rewards..." type="text"/>
</div>
</div>
</div>
</div>
<!-- Masonry Grid Content -->
<div class="mx-auto max-w-[1400px] px-6 py-12 w-full">
<h3 class="text-2xl font-bold text-white mb-8 flex items-center gap-2 uppercase tracking-wide">
<span class="w-1 h-8 bg-primary rounded-full block"></span>
Available Rewards
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Card 1: High Value Item -->
<div class="group relative flex flex-col bg-[#261933] rounded-2xl overflow-hidden border border-[#362348] hover:border-primary transition-all duration-300 hover:shadow-neon hover:-translate-y-2">
<div class="relative w-full aspect-[4/3] bg-[#0f0f13]">
<div class="w-full h-full bg-center bg-cover transition-transform duration-700 group-hover:scale-110" data-alt="High-end gaming PC setup with RGB lighting" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBETBmcVxhJtP8YEnLRXEZHYHTT1HWSmrH4XqaD1q7nDHOlPpFFVlKQOJvh23hoi0MAPs_q81ymhzYldKDmD3c8bmNRXK9T1_Pl2dCv62HyZCR3KnOVvyH7zopmfHc11NwbfeR3s5UJlQZCAghUht9RbGp2zy5quq3wIHI5GjS2q90qhOlQFyrPFdf9YxblEdGm7og6DgIyv1iLRA3BjQMCEvml-Ibiei4q9YlWjDwEwmg1S1M2YAoiDo8rHNYjPX9qT_nJyMGY");'></div>
<div class="absolute top-3 right-3 bg-black/60 backdrop-blur text-cyber-gold border border-cyber-gold/30 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider flex items-center gap-1">
<span class="material-symbols-outlined !text-[14px]">bolt</span>
Legendary
</div>
</div>
<div class="p-5 flex flex-col flex-1 gap-3">
<div>
<h4 class="text-white font-bold text-lg leading-tight group-hover:text-primary transition-colors">Alienware Aurora R15</h4>
<p class="text-slate-400 text-xs mt-1 uppercase tracking-wide">Gaming Desktop</p>
</div>
<div class="mt-auto pt-4 border-t border-[#362348] flex items-center justify-between">
<span class="text-cyber-gold font-bold text-lg drop-shadow-sm">120,000 XP</span>
<button class="opacity-50 cursor-not-allowed bg-[#362348] text-slate-400 p-2 rounded-full" title="Not enough XP">
<span class="material-symbols-outlined !text-[20px]">lock</span>
</button>
</div>
<!-- Progress bar for locked item -->
<div class="w-full h-1.5 bg-[#0f0f13] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-red-500 to-orange-500 w-[10%]"></div>
</div>
<p class="text-[10px] text-slate-500 text-right">10% to goal</p>
</div>
</div>
<!-- Card 2: Mechanical Keyboard -->
<div class="group relative flex flex-col bg-[#261933] rounded-2xl overflow-hidden border border-[#362348] hover:border-primary transition-all duration-300 hover:shadow-neon hover:-translate-y-2">
<div class="relative w-full aspect-[4/3] bg-[#0f0f13]">
<div class="w-full h-full bg-center bg-cover transition-transform duration-700 group-hover:scale-110" data-alt="Mechanical keyboard with colorful keycaps" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAjkPRWaTthum2PXxAR7zv44EuRLikmqjCp2EniqjGv2f-SqlRuAYMqBmOOgSm7B4NFBKqDpjDmV-Kn-2QOOAeogw-hqGlPb4FMLVzh4cfKX7Ll9duiyvwCsVJd0NmislY4K39Gr77j_OEUzSWw6T0Za7MHeQDBQ8qrKADNcjJFzXwH-Id6QUTp8FuqXgs-Q3Sk6FCAk-gytbXj5fK9rPW60jFqGzIdXckQfFm3yDNinhsBTA07F2pMnGsN8rff75HnjaFjVZEU");'></div>
</div>
<div class="p-5 flex flex-col flex-1 gap-3">
<div>
<h4 class="text-white font-bold text-lg leading-tight group-hover:text-primary transition-colors">Keychron Q1 Pro</h4>
<p class="text-slate-400 text-xs mt-1 uppercase tracking-wide">Peripherals</p>
</div>
<div class="mt-auto pt-4 border-t border-[#362348] flex items-center justify-between">
<span class="text-cyber-gold font-bold text-lg drop-shadow-sm">8,500 XP</span>
<button class="bg-primary hover:bg-[#680fc2] text-white px-4 py-2 rounded-full text-sm font-bold shadow-neon transition-all">
Redeem
</button>
</div>
</div>
</div>
<!-- Card 3: VR Headset -->
<div class="group relative flex flex-col bg-[#261933] rounded-2xl overflow-hidden border border-[#362348] hover:border-primary transition-all duration-300 hover:shadow-neon hover:-translate-y-2">
<div class="relative w-full aspect-[4/3] bg-[#0f0f13]">
<div class="w-full h-full bg-center bg-cover transition-transform duration-700 group-hover:scale-110" data-alt="VR headset on dark background" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuANO3tPfLR8kuHajQhNRvWUem9HXnj_ROP0kcoqr7PE10EbM_mIFkTYP-o2MUqrbwsSsWXEuaoQLxeWRV6Hs0E5tR78CrSFUj0N9gT8MQOUUkvgxOxUnJQ5y1p_SmicHtqdhvyyaK7sf14MlF8Zx5UO5pbyp30NITgUi7p90wa8Y2hoJKWS6qVzDvrW5aGMI_pGn8zPNuDyev0LBvCrACVNZIQjrSihzczuuVC1ENc5tC1ALkRYF8-T7u7H1bTGRATkVM7REik7");'></div>
<div class="absolute top-3 left-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded shadow-lg uppercase">Hot</div>
</div>
<div class="p-5 flex flex-col flex-1 gap-3">
<div>
<h4 class="text-white font-bold text-lg leading-tight group-hover:text-primary transition-colors">Meta Quest 3</h4>
<p class="text-slate-400 text-xs mt-1 uppercase tracking-wide">Virtual Reality</p>
</div>
<div class="mt-auto pt-4 border-t border-[#362348] flex items-center justify-between">
<span class="text-cyber-gold font-bold text-lg drop-shadow-sm">35,000 XP</span>
<button class="opacity-50 cursor-not-allowed bg-[#362348] text-slate-400 p-2 rounded-full" title="Not enough XP">
<span class="material-symbols-outlined !text-[20px]">lock</span>
</button>
</div>
<div class="w-full h-1.5 bg-[#0f0f13] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-blue-500 to-primary w-[35%]"></div>
</div>
<p class="text-[10px] text-slate-500 text-right">35% to goal</p>
</div>
</div>
<!-- Card 4: Gift Card -->
<div class="group relative flex flex-col bg-[#261933] rounded-2xl overflow-hidden border border-[#362348] hover:border-primary transition-all duration-300 hover:shadow-neon hover:-translate-y-2">
<div class="relative w-full aspect-[4/3] bg-[#0f0f13] flex items-center justify-center p-8">
<!-- Abstract pattern for digital goods -->
<div class="absolute inset-0 opacity-30" style="background-image: radial-gradient(#4a4a4a 1px, transparent 1px); background-size: 10px 10px;"></div>
<div class="w-full h-full bg-contain bg-center bg-no-repeat z-10 drop-shadow-xl transform group-hover:scale-110 transition-transform duration-500" data-alt="Steam logo icon" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAh75R7Tg721yYUEoY3dFKcqSkU6swiouBZxw3VLb93wGwasK9HZJFYs8vxFUnrjQCxlTpp6b3kdFWa1DwvcdZzTaH-douMH3NP1wgzU7wluvzv5CCWud2Zl7BZQcIeDkmUpXNvEx8r93R2JRJebGOdtnbjT_NRiO1tPPFswKt_1GpIsw6i-8hPA5Mc82oMNp5BM3n9WrWdClDBpkKPOM8b_w3tptpzcuK2CCW5TwD14ZMQJg2OQrsKc_48R29czbbFQTdFlQYe");'></div>
</div>
<div class="p-5 flex flex-col flex-1 gap-3">
<div>
<h4 class="text-white font-bold text-lg leading-tight group-hover:text-primary transition-colors">$20 Steam Card</h4>
<p class="text-slate-400 text-xs mt-1 uppercase tracking-wide">Digital Code</p>
</div>
<div class="mt-auto pt-4 border-t border-[#362348] flex items-center justify-between">
<span class="text-cyber-gold font-bold text-lg drop-shadow-sm">2,000 XP</span>
<button class="bg-primary hover:bg-[#680fc2] text-white px-4 py-2 rounded-full text-sm font-bold shadow-neon transition-all">
Redeem
</button>
</div>
</div>
</div>
<!-- Card 5: Gaming Chair -->
<div class="group relative flex flex-col bg-[#261933] rounded-2xl overflow-hidden border border-[#362348] hover:border-primary transition-all duration-300 hover:shadow-neon hover:-translate-y-2">
<div class="relative w-full aspect-[4/3] bg-[#0f0f13]">
<div class="w-full h-full bg-center bg-cover transition-transform duration-700 group-hover:scale-110" data-alt="Gaming chair close up" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDKCZCs2c4nTkKK8qCbkC_OcWKqNnqYTxLDUMwbPFj3mOHhUjK-aStLzwO40hXmuM7r0xuTYAjzjYqBK8Q9rHSfMIV3Ta1OZLI8nsjgQqz5hkn0L6IVSmovtKvok4bI_b1SvVOUzVQnT_SY9YpHavasERjYnTtuxiNXIsX7t2dir8kL2dV_cy9wEk64eLSr8OkVN1-tqXusL_pd2iximAePI3sjneiz26IRbuL326py1e7EFmpTOfKDdMcY849Ux6vUcsRcEAgJ");'></div>
</div>
<div class="p-5 flex flex-col flex-1 gap-3">
<div>
<h4 class="text-white font-bold text-lg leading-tight group-hover:text-primary transition-colors">Secretlab Titan Evo</h4>
<p class="text-slate-400 text-xs mt-1 uppercase tracking-wide">Furniture</p>
</div>
<div class="mt-auto pt-4 border-t border-[#362348] flex items-center justify-between">
<span class="text-cyber-gold font-bold text-lg drop-shadow-sm">45,000 XP</span>
<button class="opacity-50 cursor-not-allowed bg-[#362348] text-slate-400 p-2 rounded-full" title="Not enough XP">
<span class="material-symbols-outlined !text-[20px]">lock</span>
</button>
</div>
<div class="w-full h-1.5 bg-[#0f0f13] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-blue-500 to-primary w-[27%]"></div>
</div>
<p class="text-[10px] text-slate-500 text-right">27% to goal</p>
</div>
</div>
<!-- Card 6: Headset -->
<div class="group relative flex flex-col bg-[#261933] rounded-2xl overflow-hidden border border-[#362348] hover:border-primary transition-all duration-300 hover:shadow-neon hover:-translate-y-2">
<div class="relative w-full aspect-[4/3] bg-[#0f0f13]">
<div class="w-full h-full bg-center bg-cover transition-transform duration-700 group-hover:scale-110" data-alt="High quality headphones on stand" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCDcNdM0Y-PEw0Gidn8-tsPEFIX650FoNJaUNidawGCSxkr6cPJjUFmedD0UMtaECKHA_Gg3vAMqOmXQE_VSdkaaFz0oWfVHMdZeELDD0rZp0GRDhVcZMBOvyI8dKc3fH3JRC4oNZr0DpDTAr9eH3DOyJ7LRufFUqId42zRmnl83rScB5Zbai8PH1aMDka6pa890-FB8j3oNGEL3cfoyLDC2HZLTthbK5qlmrKIQFE1JxlM_FLzDH7zPJNz9TmTvQWEI2fBDFKX");'></div>
</div>
<div class="p-5 flex flex-col flex-1 gap-3">
<div>
<h4 class="text-white font-bold text-lg leading-tight group-hover:text-primary transition-colors">SteelSeries Arctis Nova</h4>
<p class="text-slate-400 text-xs mt-1 uppercase tracking-wide">Audio</p>
</div>
<div class="mt-auto pt-4 border-t border-[#362348] flex items-center justify-between">
<span class="text-cyber-gold font-bold text-lg drop-shadow-sm">15,000 XP</span>
<button class="opacity-50 cursor-not-allowed bg-[#362348] text-slate-400 p-2 rounded-full" title="Not enough XP">
<span class="material-symbols-outlined !text-[20px]">lock</span>
</button>
</div>
<div class="w-full h-1.5 bg-[#0f0f13] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-blue-500 to-primary w-[82%]"></div>
</div>
<p class="text-[10px] text-slate-500 text-right">82% to goal</p>
</div>
</div>
<!-- Card 7: Controller -->
<div class="group relative flex flex-col bg-[#261933] rounded-2xl overflow-hidden border border-[#362348] hover:border-primary transition-all duration-300 hover:shadow-neon hover:-translate-y-2">
<div class="relative w-full aspect-[4/3] bg-[#0f0f13]">
<div class="w-full h-full bg-center bg-cover transition-transform duration-700 group-hover:scale-110" data-alt="Xbox Elite controller in hand" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuB_3db0LfwmF2zWm_CPrn64ebd0fwVPsHCHuml18oemnOunegY_UeuAgYQZANWuNRjkaNgYRKPdGnzwYCxBnK08OR8-MvpXsc3qzzg0lecWMKQFD9xuIqUhs6_cQreaqwREEkzH-3ls6E4VohGVj4k77AE-1UuqtyuD7ksRNJ6l7LulWq22qJktyHP5feJ5Kty1cRMOPMpe5jnMdfsl3e7UJtHR86RXcnXfATLSOJAn9a3aPiG_AohmRaWix-k4pEIWcWI9CvHf");'></div>
</div>
<div class="p-5 flex flex-col flex-1 gap-3">
<div>
<h4 class="text-white font-bold text-lg leading-tight group-hover:text-primary transition-colors">Xbox Elite Series 2</h4>
<p class="text-slate-400 text-xs mt-1 uppercase tracking-wide">Accessories</p>
</div>
<div class="mt-auto pt-4 border-t border-[#362348] flex items-center justify-between">
<span class="text-cyber-gold font-bold text-lg drop-shadow-sm">12,000 XP</span>
<button class="bg-primary hover:bg-[#680fc2] text-white px-4 py-2 rounded-full text-sm font-bold shadow-neon transition-all">
Redeem
</button>
</div>
</div>
</div>
<!-- Card 8: Avatar -->
<div class="group relative flex flex-col bg-[#261933] rounded-2xl overflow-hidden border border-[#362348] hover:border-primary transition-all duration-300 hover:shadow-neon hover:-translate-y-2">
<div class="relative w-full aspect-[4/3] bg-[#0f0f13] overflow-hidden">
<!-- CSS Pattern for Cyber Avatar -->
<div class="absolute inset-0 bg-gradient-to-br from-purple-900 to-black"></div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-32 h-32 rounded-full border-4 border-primary shadow-[0_0_30px_rgba(127,19,236,0.6)] bg-black flex items-center justify-center overflow-hidden">
<img alt="Cyberpunk robot face digital avatar" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAU8TqSImHw1yIhcWVSWOJlG0CpYqCQwPHgtkbJHhwYzjdcDUKPFd-aclk7GA-Y6qz9MUj4EDRhAJeMlTfxkf70glcv3ibKiC6C76PrX1hbtwugOf08izWlu3gIpGA6Tkd0LFtUkze5eu8cVXDVGz5itbBG4IGH_MNJTDFCgE09cqjCSZgRs9HG0AEvhkLDuEUOjF3qE4bOfIbmT2Oxt3Gtbc_PdqJDuQX2mnuXDTg7AbkqAbTil2N_zMF5zAtSl1gd82kQPyoG"/>
</div>
</div>
</div>
<div class="p-5 flex flex-col flex-1 gap-3">
<div>
<h4 class="text-white font-bold text-lg leading-tight group-hover:text-primary transition-colors">Cyber Samurai Avatar</h4>
<p class="text-slate-400 text-xs mt-1 uppercase tracking-wide">Digital Collectible</p>
</div>
<div class="mt-auto pt-4 border-t border-[#362348] flex items-center justify-between">
<span class="text-cyber-gold font-bold text-lg drop-shadow-sm">500 XP</span>
<button class="bg-primary hover:bg-[#680fc2] text-white px-4 py-2 rounded-full text-sm font-bold shadow-neon transition-all">
Redeem
</button>
</div>
</div>
</div>
</div>
<div class="mt-16 flex justify-center">
<button class="text-slate-400 hover:text-white flex items-center gap-2 text-sm font-bold uppercase tracking-widest transition-colors">
<span class="material-symbols-outlined">expand_more</span>
Load More Rewards
</button>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-[#0f0f13] border-t border-[#362348] text-slate-400 py-10 w-full">
<div class="mx-auto max-w-[1400px] px-6 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-3">
<div class="size-6 text-primary">
<span class="material-symbols-outlined">sports_esports</span>
</div>
<span class="text-white font-bold uppercase tracking-wider text-sm">QuizQuest</span>
</div>
<div class="flex gap-8 text-sm">
<a class="hover:text-primary transition-colors" href="#">Terms</a>
<a class="hover:text-primary transition-colors" href="#">Privacy</a>
<a class="hover:text-primary transition-colors" href="#">Support</a>
</div>
<p class="text-xs text-slate-600">
© 2023 QuizQuest. All rights reserved.
</p>
</div>
</footer>
</body></html>