<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Prizes Page</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&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 id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#f4c025",
"background-light": "#fcfbf8",
"background-dark": "#221e10",
"secondary-purple": "#8b5cf6",
"secondary-blue": "#3b82f6",
"secondary-gray": "#9ca3af",
},
fontFamily: {
"display": ["Plus Jakarta Sans", "sans-serif"],
"body": ["Plus Jakarta Sans", "sans-serif"],
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Custom scrollbar for horizontal scrolling areas */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display min-h-screen flex flex-col overflow-x-hidden">
<!-- Top Navigation -->
<header class="sticky top-0 z-50 flex items-center justify-between border-b border-solid border-slate-100 dark:border-slate-800 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur-md px-6 py-4 lg:px-10">
<div class="flex items-center gap-4 text-slate-900 dark:text-white">
<div class="size-8 text-primary">
<span class="material-symbols-outlined text-4xl">swords</span>
</div>
<h2 class="text-xl font-extrabold tracking-tight">QuizQuest</h2>
</div>
<div class="hidden md:flex items-center gap-8">
<nav class="flex items-center gap-6">
<a class="text-sm font-bold text-slate-500 hover:text-primary dark:text-slate-400 dark:hover:text-primary transition-colors" href="#">Quests</a>
<a class="text-sm font-bold text-slate-500 hover:text-primary dark:text-slate-400 dark:hover:text-primary transition-colors" href="#">Leaderboard</a>
<a class="text-sm font-bold text-slate-900 dark:text-white" href="#">Prizes</a>
</nav>
</div>
<div class="flex items-center gap-3">
<!-- Points Balance Display -->
<div class="hidden sm:flex items-center gap-2 bg-slate-100 dark:bg-slate-800 rounded-full pl-2 pr-4 py-1.5 border border-slate-200 dark:border-slate-700">
<div class="flex items-center justify-center size-6 bg-primary rounded-full text-slate-900">
<span class="material-symbols-outlined text-sm">bolt</span>
</div>
<div class="flex flex-col leading-none">
<span class="text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Balance</span>
<span class="text-sm font-extrabold text-slate-900 dark:text-white">2,450 QP</span>
</div>
</div>
<button class="flex items-center justify-center size-10 rounded-full bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors text-slate-900 dark:text-white">
<span class="material-symbols-outlined">notifications</span>
</button>
<div class="size-10 rounded-full bg-slate-200 dark:bg-slate-700 overflow-hidden border-2 border-white dark:border-slate-800 shadow-sm">
<img alt="User Profile" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAHuzk703op3pF9mZ_LmnbHkYeTxAsChzbIrvKkBeg4ZWVR9aqTxKqiX7NsmscigKnVTFPm8omsu0mFr0DjSGgrNVaToo7O3Bk7xtontibbg15mS9dZAJErQwmF23_-tDR_c9t4JJAgGo2aGOdu0DU_M0VhexMT0E1CUx3PdrywfDj9lHOwg-tasbdAujumlrC8Fldak7Ktm-YC71RwupaosfzIad0PE8TMN0EKo8f057NrfIgea3sx0AYiALq-H7_yAILo-I6q"/>
</div>
</div>
</header>
<main class="flex-1 flex flex-col">
<!-- Hero Section: The Vault -->
<section class="relative w-full px-4 py-12 lg:py-20 overflow-hidden">
<div class="absolute inset-0 z-0 opacity-10 dark:opacity-5 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary via-background-light to-background-light dark:from-primary dark:via-background-dark dark:to-background-dark pointer-events-none"></div>
<div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center relative z-10">
<div class="flex flex-col gap-6 text-center lg:text-left">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary-dark w-fit mx-auto lg:mx-0 border border-primary/20">
<span class="material-symbols-outlined text-sm text-primary">redeem</span>
<span class="text-xs font-bold uppercase tracking-wider text-slate-900 dark:text-slate-100">The Loot Vault is Open</span>
</div>
<h1 class="text-5xl lg:text-7xl font-black tracking-tight text-slate-900 dark:text-white leading-[0.9]">
Unlock the Vault.<br/>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-orange-400">Claim Rewards.</span>
</h1>
<p class="text-lg text-slate-600 dark:text-slate-300 max-w-lg mx-auto lg:mx-0 font-medium leading-relaxed">
Exchange your hard-earned QuizPoints for real-world loot. From digital collectibles to legendary tech, the more you play, the richer the rewards.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start pt-4">
<button class="h-12 px-8 rounded-full bg-primary hover:bg-yellow-400 text-slate-900 font-bold transition-all transform hover:scale-105 shadow-lg shadow-primary/20 flex items-center justify-center gap-2">
<span class="material-symbols-outlined">videogame_asset</span>
<span>Start Quizzing to Earn</span>
</button>
<button class="h-12 px-8 rounded-full bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-900 dark:text-white font-bold transition-all flex items-center justify-center gap-2">
<span>View My Inventory</span>
</button>
</div>
</div>
<div class="relative flex justify-center lg:justify-end">
<!-- Abstract representation of a treasure chest or reward pile -->
<div class="relative w-full max-w-md aspect-square">
<div class="absolute inset-0 bg-primary/20 blur-3xl rounded-full animate-pulse"></div>
<div class="relative z-10 w-full h-full rounded-3xl overflow-hidden shadow-2xl border-4 border-white dark:border-slate-800 rotate-3 hover:rotate-0 transition-transform duration-500" data-alt="A futuristic treasure chest glowing with golden light" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBW7I-EoiyLY0uLb_jwXeM0mA5OKSsgt1RFJZuu1cRlTzP3eSHsUv7TFztLCv-7blYcsF60AKWCex4rn-yponfuPjM2tpUReEkf-2-Bc8a8wY2zQ-HlAVQV7kAHqdbSGm9qta8tE6pyByThwNnuQZ6Gby_zjavsxcGugE0n9IESHZnN_Ay5y_-fsp2tWp7OYGr9O_WsGUzpcLbOgkPWqVVaOuAwMPdFHQKSBj4y9Y-yp7-gZIfop_vf8TjMsWRuiwhEiItk_SxS'); background-size: cover; background-position: center;">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-8">
<div class="text-white">
<div class="flex items-center gap-2 mb-2">
<span class="px-2 py-0.5 rounded-full bg-primary text-slate-900 text-xs font-bold uppercase">Grand Prize</span>
</div>
<h3 class="text-2xl font-bold">Ultimate Gaming Setup</h3>
<p class="text-sm opacity-90">Only 1 left in stock</p>
</div>
</div>
</div>
<!-- Floating Coin Elements -->
<div class="absolute -top-4 -right-4 size-16 bg-white dark:bg-slate-800 rounded-2xl shadow-xl flex items-center justify-center rotate-12 z-20 animate-bounce" style="animation-delay: 0.2s">
<span class="material-symbols-outlined text-primary text-3xl">monetization_on</span>
</div>
<div class="absolute -bottom-4 -left-4 size-14 bg-white dark:bg-slate-800 rounded-2xl shadow-xl flex items-center justify-center -rotate-6 z-20 animate-bounce" style="animation-delay: 0.5s">
<span class="material-symbols-outlined text-secondary-purple text-3xl">diamond</span>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Bar -->
<section class="w-full bg-slate-50 dark:bg-slate-900 border-y border-slate-200 dark:border-slate-800">
<div class="max-w-7xl mx-auto px-4 py-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="flex flex-col items-center justify-center text-center gap-1">
<div class="text-primary mb-1">
<span class="material-symbols-outlined">inventory_2</span>
</div>
<p class="text-2xl font-black text-slate-900 dark:text-white tracking-tight">12,450</p>
<p class="text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Items Claimed</p>
</div>
<div class="flex flex-col items-center justify-center text-center gap-1">
<div class="text-primary mb-1">
<span class="material-symbols-outlined">group</span>
</div>
<p class="text-2xl font-black text-slate-900 dark:text-white tracking-tight">850+</p>
<p class="text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Active Raiders</p>
</div>
<div class="flex flex-col items-center justify-center text-center gap-1">
<div class="text-primary mb-1">
<span class="material-symbols-outlined">workspace_premium</span>
</div>
<p class="text-2xl font-black text-slate-900 dark:text-white tracking-tight">14</p>
<p class="text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Legendaries Left</p>
</div>
<div class="flex flex-col items-center justify-center text-center gap-1">
<div class="text-primary mb-1">
<span class="material-symbols-outlined">savings</span>
</div>
<p class="text-2xl font-black text-slate-900 dark:text-white tracking-tight">$50,000</p>
<p class="text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Prize Pool</p>
</div>
</div>
</div>
</section>
<!-- Filters Section -->
<section class="sticky top-[72px] z-40 bg-background-light/95 dark:bg-background-dark/95 backdrop-blur-sm border-b border-slate-100 dark:border-slate-800 py-4">
<div class="max-w-7xl mx-auto px-4 lg:px-10 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
<div class="flex items-center gap-2 overflow-x-auto hide-scrollbar w-full md:w-auto pb-2 md:pb-0">
<button class="shrink-0 h-9 px-4 rounded-full bg-primary text-slate-900 text-sm font-bold shadow-md shadow-primary/20 hover:bg-yellow-400 transition-colors">
All Loot
</button>
<button class="shrink-0 h-9 px-4 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 text-sm font-bold hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors flex items-center gap-2 group">
<span class="size-2 rounded-full bg-primary group-hover:scale-125 transition-transform"></span> Legendary
</button>
<button class="shrink-0 h-9 px-4 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 text-sm font-bold hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors flex items-center gap-2 group">
<span class="size-2 rounded-full bg-secondary-purple group-hover:scale-125 transition-transform"></span> Epic
</button>
<button class="shrink-0 h-9 px-4 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 text-sm font-bold hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors flex items-center gap-2 group">
<span class="size-2 rounded-full bg-secondary-blue group-hover:scale-125 transition-transform"></span> Rare
</button>
<button class="shrink-0 h-9 px-4 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 text-sm font-bold hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors flex items-center gap-2 group">
<span class="size-2 rounded-full bg-slate-400 group-hover:scale-125 transition-transform"></span> Common
</button>
</div>
<div class="flex items-center gap-2 w-full md:w-auto">
<div class="relative w-full md:w-64">
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 material-symbols-outlined text-lg">search</span>
<input class="w-full h-9 pl-9 pr-4 rounded-full bg-slate-100 dark:bg-slate-800 border-none text-sm font-medium text-slate-900 dark:text-white placeholder:text-slate-400 focus:ring-2 focus:ring-primary" placeholder="Search loot..." type="text"/>
</div>
</div>
</div>
</section>
<!-- Loot Grid -->
<section class="flex-1 max-w-7xl mx-auto px-4 lg:px-10 py-10 w-full">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Card 1: Legendary -->
<div class="group relative flex flex-col bg-white dark:bg-slate-800 rounded-[2rem] p-4 border-2 border-slate-100 dark:border-slate-700 hover:border-primary/50 hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 hover:-translate-y-1">
<div class="absolute top-6 left-6 z-10">
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-primary text-slate-900 text-[10px] font-extrabold uppercase tracking-wide shadow-sm">
<span class="material-symbols-outlined text-[14px]">crown</span> Legendary
</span>
</div>
<div class="aspect-square w-full rounded-[1.5rem] bg-slate-50 dark:bg-slate-900 mb-4 overflow-hidden relative">
<!-- Glow Effect for Rarity -->
<div class="absolute inset-0 bg-gradient-to-tr from-primary/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<img alt="Premium wireless headphones on a stand" class="w-full h-full object-cover mix-blend-multiply dark:mix-blend-normal group-hover:scale-110 transition-transform duration-500 ease-out" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzS27fjMi8xJyJD8Ut9Q4sCw6u0yTI2V_Gfs-78AYxreV5Iqa1XKt5rn8CcJJHVqp3JJKa4oxCBdC4tNIIFX7_uR3ZJTCBy5kcm4Bb4MYuYOj5NNNhBTpBfGEf55JoVcUJj4muVmr5nEuRqbCx6i8VWCiM6hU7rXBvmCBUHcyvnTQsorI_EW6TvFpOyXfpRjgtkLxJcuE7xCIwuG3AO6ZzGYNeyLMGB1mZ-2G-gVOCnWlm1Vz3WkmVDLjrtiFt_R3GCa44JRez"/>
</div>
<div class="flex flex-col gap-2 flex-1">
<h3 class="text-lg font-bold text-slate-900 dark:text-white leading-tight">SonicBlast Pro Headset</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Immersive audio for the ultimate gamer.</p>
<div class="mt-auto pt-4 flex items-center justify-between">
<div class="flex flex-col">
<span class="text-[10px] font-bold text-slate-400 uppercase">Cost</span>
<div class="flex items-center gap-1 text-primary">
<span class="material-symbols-outlined text-lg">bolt</span>
<span class="text-lg font-black text-slate-900 dark:text-white">5,000</span>
</div>
</div>
<button class="h-10 px-5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white text-sm font-bold group-hover:bg-primary group-hover:text-slate-900 transition-colors">
Redeem
</button>
</div>
</div>
</div>
<!-- Card 2: Epic -->
<div class="group relative flex flex-col bg-white dark:bg-slate-800 rounded-[2rem] p-4 border-2 border-slate-100 dark:border-slate-700 hover:border-secondary-purple/50 hover:shadow-xl hover:shadow-secondary-purple/10 transition-all duration-300 hover:-translate-y-1">
<div class="absolute top-6 left-6 z-10">
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-secondary-purple text-white text-[10px] font-extrabold uppercase tracking-wide shadow-sm">
<span class="material-symbols-outlined text-[14px]">diamond</span> Epic
</span>
</div>
<div class="aspect-square w-full rounded-[1.5rem] bg-slate-50 dark:bg-slate-900 mb-4 overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-tr from-secondary-purple/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<img alt="Color changing LED keyboard" class="w-full h-full object-cover mix-blend-multiply dark:mix-blend-normal group-hover:scale-110 transition-transform duration-500 ease-out" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDMTeeb1cW8fVi1BS3UaKP9ypQPYfRXiUViIqs5Z-N2U4OxqKwi4cuFt49SFYnO_K6VoAmfkbnHuUujCejl2Mf8ESIuiy-1V1TnhQbHgmbkxWbxnXK7JvqDJ1EfVkZUZddzKDtuIMs3hByZmXFv6EeiQHnZ4ovur5Byol1NOx7yLjkxmn_liJIIfSG31jhKoF8GY01RGfUQ702nZhbS3lUfsnC0MUWBjdp0xm8zCXyeeb-zQhM209Sq0jCuPzSNKYNfXpvg0Ipa"/>
</div>
<div class="flex flex-col gap-2 flex-1">
<h3 class="text-lg font-bold text-slate-900 dark:text-white leading-tight">Neon Mech Keyboard</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Clicky keys with customizable RGB.</p>
<div class="mt-auto pt-4 flex items-center justify-between">
<div class="flex flex-col">
<span class="text-[10px] font-bold text-slate-400 uppercase">Cost</span>
<div class="flex items-center gap-1 text-primary">
<span class="material-symbols-outlined text-lg">bolt</span>
<span class="text-lg font-black text-slate-900 dark:text-white">2,500</span>
</div>
</div>
<button class="h-10 px-5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white text-sm font-bold group-hover:bg-secondary-purple group-hover:text-white transition-colors">
Redeem
</button>
</div>
</div>
</div>
<!-- Card 3: Rare -->
<div class="group relative flex flex-col bg-white dark:bg-slate-800 rounded-[2rem] p-4 border-2 border-slate-100 dark:border-slate-700 hover:border-secondary-blue/50 hover:shadow-xl hover:shadow-secondary-blue/10 transition-all duration-300 hover:-translate-y-1">
<div class="absolute top-6 left-6 z-10">
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-secondary-blue text-white text-[10px] font-extrabold uppercase tracking-wide shadow-sm">
<span class="material-symbols-outlined text-[14px]">change_history</span> Rare
</span>
</div>
<div class="aspect-square w-full rounded-[1.5rem] bg-slate-50 dark:bg-slate-900 mb-4 overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-tr from-secondary-blue/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<img alt="Red sneaker shoe" class="w-full h-full object-cover mix-blend-multiply dark:mix-blend-normal group-hover:scale-110 transition-transform duration-500 ease-out" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA-fpSVnsNejbaZD4VqDfEr6kafV2rPbWIRh-WtWHqGelyaVJ5y7tRcA9KlZw91hiwxg9O4sk1bHQHf_qykI2KQUn-W3Eg12v1AsmLsXDpdlkJhQ6WNt4P5-y8z5Dc57g0yCB7HP0Lq3rnjLzIsihxF-Au1rXNhH6jy8LF90l18thZq4xqrWHIE0nbeoqeuVIYFuupl7MeZFSR0jtw7bhsIpiaHfKoHFLVaLCWiDpBto8ED67ddBinFCI1j_xHs2j2vcF5RUy9g"/>
</div>
<div class="flex flex-col gap-2 flex-1">
<h3 class="text-lg font-bold text-slate-900 dark:text-white leading-tight">Speedster Kicks</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Limited edition running shoes.</p>
<div class="mt-auto pt-4 flex items-center justify-between">
<div class="flex flex-col">
<span class="text-[10px] font-bold text-slate-400 uppercase">Cost</span>
<div class="flex items-center gap-1 text-primary">
<span class="material-symbols-outlined text-lg">bolt</span>
<span class="text-lg font-black text-slate-900 dark:text-white">1,200</span>
</div>
</div>
<button class="h-10 px-5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white text-sm font-bold group-hover:bg-secondary-blue group-hover:text-white transition-colors">
Redeem
</button>
</div>
</div>
</div>
<!-- Card 4: Common -->
<div class="group relative flex flex-col bg-white dark:bg-slate-800 rounded-[2rem] p-4 border-2 border-slate-100 dark:border-slate-700 hover:border-slate-400 hover:shadow-xl hover:shadow-slate-400/10 transition-all duration-300 hover:-translate-y-1">
<div class="absolute top-6 left-6 z-10">
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-200 text-[10px] font-extrabold uppercase tracking-wide shadow-sm">
<span class="material-symbols-outlined text-[14px]">circle</span> Common
</span>
</div>
<div class="aspect-square w-full rounded-[1.5rem] bg-slate-50 dark:bg-slate-900 mb-4 overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-tr from-slate-200/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<img alt="Plain white t-shirt on a hanger" class="w-full h-full object-cover mix-blend-multiply dark:mix-blend-normal group-hover:scale-110 transition-transform duration-500 ease-out" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCM5f3M3Tj7iDSl6TwMuCT1NrhXbIkpDyUqU4zvYbAy4raOx46l2iBM5PQLsRUz4QCzUGpLox775on_CNSlqjyIW0xiT9oQ4fcEmSyaOoQC6D0yeIgvQNPrfv-DljPHQv1IfrvLksq9iYmm-aiLcUg82aLxpDdbnkfOVlWEi0zHwbApplPzNrNY3588jQT9IjxjpeHzDmNUjstGV1vpT_fH62v3VRRtiX8Z-Vn8RDU7lvN0WHYD2-OSr1RibeYWVy9qGhdW8WnJ"/>
</div>
<div class="flex flex-col gap-2 flex-1">
<h3 class="text-lg font-bold text-slate-900 dark:text-white leading-tight">Basic Tee</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Comfortable cotton t-shirt.</p>
<div class="mt-auto pt-4 flex items-center justify-between">
<div class="flex flex-col">
<span class="text-[10px] font-bold text-slate-400 uppercase">Cost</span>
<div class="flex items-center gap-1 text-primary">
<span class="material-symbols-outlined text-lg">bolt</span>
<span class="text-lg font-black text-slate-900 dark:text-white">500</span>
</div>
</div>
<button class="h-10 px-5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white text-sm font-bold group-hover:bg-slate-300 dark:group-hover:bg-slate-500 transition-colors">
Redeem
</button>
</div>
</div>
</div>
<!-- Card 5: Legendary -->
<div class="group relative flex flex-col bg-white dark:bg-slate-800 rounded-[2rem] p-4 border-2 border-slate-100 dark:border-slate-700 hover:border-primary/50 hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 hover:-translate-y-1">
<div class="absolute top-6 left-6 z-10">
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-primary text-slate-900 text-[10px] font-extrabold uppercase tracking-wide shadow-sm">
<span class="material-symbols-outlined text-[14px]">crown</span> Legendary
</span>
</div>
<div class="aspect-square w-full rounded-[1.5rem] bg-slate-50 dark:bg-slate-900 mb-4 overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-tr from-primary/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<img alt="Modern computer setup with dual monitors" class="w-full h-full object-cover mix-blend-multiply dark:mix-blend-normal group-hover:scale-110 transition-transform duration-500 ease-out" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAYha6t_hPXLLKp8zdX1CmlLD3t4PX1GHZj8tg1Vb-LBmO6AzK6EkUEByTtgN1Mu6Ym6PHtLPWKT2OP_7ird2UEkpkL7_1S1leEpaIIBBFJWCsX3CIGK6xu8rg6E0uBue3GwJnnnvU0IOmDJ8LaQ9BBM-R4Ejw9yl78bN81EMFqfhyVmG86WUe7DqHNsr3F8XSCtltzwZ6fzJ2eNK8tldm3Dae_W5rmipwekzPBbOQiWwcUdtTcyHMSuUa93O96t8Vg83Q07NxV"/>
</div>
<div class="flex flex-col gap-2 flex-1">
<h3 class="text-lg font-bold text-slate-900 dark:text-white leading-tight">Streamer Bundle</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Everything needed to start streaming.</p>
<div class="mt-auto pt-4 flex items-center justify-between">
<div class="flex flex-col">
<span class="text-[10px] font-bold text-slate-400 uppercase">Cost</span>
<div class="flex items-center gap-1 text-primary">
<span class="material-symbols-outlined text-lg">bolt</span>
<span class="text-lg font-black text-slate-900 dark:text-white">8,500</span>
</div>
</div>
<button class="h-10 px-5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white text-sm font-bold group-hover:bg-primary group-hover:text-slate-900 transition-colors">
Redeem
</button>
</div>
</div>
</div>
<!-- Card 6: Epic -->
<div class="group relative flex flex-col bg-white dark:bg-slate-800 rounded-[2rem] p-4 border-2 border-slate-100 dark:border-slate-700 hover:border-secondary-purple/50 hover:shadow-xl hover:shadow-secondary-purple/10 transition-all duration-300 hover:-translate-y-1">
<div class="absolute top-6 left-6 z-10">
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-secondary-purple text-white text-[10px] font-extrabold uppercase tracking-wide shadow-sm">
<span class="material-symbols-outlined text-[14px]">diamond</span> Epic
</span>
</div>
<div class="aspect-square w-full rounded-[1.5rem] bg-slate-50 dark:bg-slate-900 mb-4 overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-tr from-secondary-purple/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<img alt="Gift card with bow" class="w-full h-full object-cover mix-blend-multiply dark:mix-blend-normal group-hover:scale-110 transition-transform duration-500 ease-out" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAFHzedoY78gyrqacHsGbO7TsoZUeerKuHOV1vDW6JhgGhvGXQcF9kBnNltKRpL0j9vkYVWFOnbdU5oLne-sYUjIxkh79GzMMn-MMRy7jcZ5ueLsyGIMsIuX1hdQgPOs4vXadTVwvfYIaSGq8g_Sjs1SlrFoJvU1X6t33zLIxnUdG7TsWFsMIkjUJDAZOv9Q5eAjgoU_fQ-p2throV21vmyDuqmkvO9204b_Nq37T6x7gOEssspbxWdLEAjIfpY2IYU_o2tK2h8"/>
</div>
<div class="flex flex-col gap-2 flex-1">
<h3 class="text-lg font-bold text-slate-900 dark:text-white leading-tight">$100 Tech Store Card</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Buy whatever gear you want.</p>
<div class="mt-auto pt-4 flex items-center justify-between">
<div class="flex flex-col">
<span class="text-[10px] font-bold text-slate-400 uppercase">Cost</span>
<div class="flex items-center gap-1 text-primary">
<span class="material-symbols-outlined text-lg">bolt</span>
<span class="text-lg font-black text-slate-900 dark:text-white">3,000</span>
</div>
</div>
<button class="h-10 px-5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white text-sm font-bold group-hover:bg-secondary-purple group-hover:text-white transition-colors">
Redeem
</button>
</div>
</div>
</div>
<!-- Card 7: Rare -->
<div class="group relative flex flex-col bg-white dark:bg-slate-800 rounded-[2rem] p-4 border-2 border-slate-100 dark:border-slate-700 hover:border-secondary-blue/50 hover:shadow-xl hover:shadow-secondary-blue/10 transition-all duration-300 hover:-translate-y-1">
<div class="absolute top-6 left-6 z-10">
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-secondary-blue text-white text-[10px] font-extrabold uppercase tracking-wide shadow-sm">
<span class="material-symbols-outlined text-[14px]">change_history</span> Rare
</span>
</div>
<div class="aspect-square w-full rounded-[1.5rem] bg-slate-50 dark:bg-slate-900 mb-4 overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-tr from-secondary-blue/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<img alt="Pile of colorful stickers" class="w-full h-full object-cover mix-blend-multiply dark:mix-blend-normal group-hover:scale-110 transition-transform duration-500 ease-out" src="https://lh3.googleusercontent.com/aida-public/AB6AXuArLqn8kJPCfLRG32G7rE2T4QIkB2oY4Loj2hlyt-AhL7AWzZrRdjgPl7K7VK_Myuqmuho2K_YJ-MoT87jBX4sMmjAf6ypxaQCTBNHDT6-IW_4xYZQm8S8DVAWH0SwyWbILlWzecv8mHDSTjZ292ZFruQAAOdLkGm8sJfoHrJVOtHbfOCutYA43X2H2hPSDNs3YHk4X7FORbQM4dBVnAD5CLwwYq8yN2aqntEjFfUXtyUqDQVB8APGV7iJo3ork4vUa07TEzRPJ"/>
</div>
<div class="flex flex-col gap-2 flex-1">
<h3 class="text-lg font-bold text-slate-900 dark:text-white leading-tight">Sticker Mega Pack</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Decorate your laptop in style.</p>
<div class="mt-auto pt-4 flex items-center justify-between">
<div class="flex flex-col">
<span class="text-[10px] font-bold text-slate-400 uppercase">Cost</span>
<div class="flex items-center gap-1 text-primary">
<span class="material-symbols-outlined text-lg">bolt</span>
<span class="text-lg font-black text-slate-900 dark:text-white">800</span>
</div>
</div>
<button class="h-10 px-5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white text-sm font-bold group-hover:bg-secondary-blue group-hover:text-white transition-colors">
Redeem
</button>
</div>
</div>
</div>
<!-- Card 8: Common -->
<div class="group relative flex flex-col bg-white dark:bg-slate-800 rounded-[2rem] p-4 border-2 border-slate-100 dark:border-slate-700 hover:border-slate-400 hover:shadow-xl hover:shadow-slate-400/10 transition-all duration-300 hover:-translate-y-1">
<div class="absolute top-6 left-6 z-10">
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-200 text-[10px] font-extrabold uppercase tracking-wide shadow-sm">
<span class="material-symbols-outlined text-[14px]">circle</span> Common
</span>
</div>
<div class="aspect-square w-full rounded-[1.5rem] bg-slate-50 dark:bg-slate-900 mb-4 overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-tr from-slate-200/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<img alt="Folded cotton socks" class="w-full h-full object-cover mix-blend-multiply dark:mix-blend-normal group-hover:scale-110 transition-transform duration-500 ease-out" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCf7jxHtWdR30-40QjTcWK8L0-H9Sk_soXSUOLz_ybMUo_J5krGYDa7_vVdT-2mIVpAfAShUxNEaqi1tFkBXANMf501XQxGJ2D_dKa2wt1YQ3GYCHg61eVmDRarWPRTECxE1p1hopm7gf9Kj6fuXKNE0E3ouKLVnIOcQE1lttWXXUf4Blmd3qQSissvvlRf0Nb6BBzGdBtzrr5-52h8H7POktxfugdDnm-pkBDfRWBWWmhBgpVS46Koz3LW0UiJonyBdsVPHQD_"/>
</div>
<div class="flex flex-col gap-2 flex-1">
<h3 class="text-lg font-bold text-slate-900 dark:text-white leading-tight">Cozy Socks</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Keep your feet warm while gaming.</p>
<div class="mt-auto pt-4 flex items-center justify-between">
<div class="flex flex-col">
<span class="text-[10px] font-bold text-slate-400 uppercase">Cost</span>
<div class="flex items-center gap-1 text-primary">
<span class="material-symbols-outlined text-lg">bolt</span>
<span class="text-lg font-black text-slate-900 dark:text-white">350</span>
</div>
</div>
<button class="h-10 px-5 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white text-sm font-bold group-hover:bg-slate-300 dark:group-hover:bg-slate-500 transition-colors">
Redeem
</button>
</div>
</div>
</div>
</div>
<div class="mt-16 flex justify-center">
<button class="flex items-center gap-2 px-8 py-4 rounded-full bg-white dark:bg-slate-800 border-2 border-slate-100 dark:border-slate-700 text-slate-900 dark:text-white font-bold hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
<span>Load More Loot</span>
<span class="material-symbols-outlined">expand_more</span>
</button>
</div>
</section>
<!-- CTA Section Footer -->
<section class="mt-auto bg-primary py-16 px-4">
<div class="max-w-4xl mx-auto text-center flex flex-col items-center gap-6">
<h2 class="text-4xl md:text-5xl font-black text-slate-900 tracking-tight">Ready for your next quest?</h2>
<p class="text-lg font-medium text-slate-800/80 max-w-lg">Earn more points by topping the leaderboards and completing daily challenges.</p>
<div class="flex flex-wrap justify-center gap-4 pt-2">
<button class="h-12 px-8 rounded-full bg-slate-900 text-white font-bold hover:bg-slate-800 transition-colors flex items-center gap-2 shadow-lg">
<span class="material-symbols-outlined text-primary">play_arrow</span>
Play Now
</button>
<button class="h-12 px-8 rounded-full bg-white/20 border-2 border-slate-900 text-slate-900 font-bold hover:bg-white/30 transition-colors">
View Leaderboard
</button>
</div>
</div>
</section>
</main>
<footer class="bg-background-light dark:bg-background-dark py-10 border-t border-slate-100 dark:border-slate-800 text-center">
<p class="text-slate-400 dark:text-slate-500 text-sm font-medium">© 2024 QuizQuest. All rights reserved.</p>
</footer>
</body></html>