<!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 - Rewards Center</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;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": "#1a1122",
"surface-dark": "#2d1f3b",
"surface-light": "#ffffff",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"],
"body": ["Spline Sans", "sans-serif"]
},
borderRadius: { "DEFAULT": "1rem", "lg": "1.5rem", "xl": "2rem", "2xl": "3rem", "full": "9999px" },
},
},
}
</script>
</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 antialiased selection:bg-primary selection:text-white">
<!-- Navigation -->
<header class="sticky top-0 z-50 w-full border-b border-slate-200 dark:border-white/10 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<!-- Logo -->
<div class="flex items-center gap-4">
<div class="size-8 text-primary">
<svg fill="currentColor" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M44 11.2727C44 14.0109 39.8386 16.3957 33.69 17.6364C39.8386 18.877 44 21.2618 44 24C44 26.7382 39.8386 29.123 33.69 30.3636C39.8386 31.6043 44 33.9891 44 36.7273C44 40.7439 35.0457 44 24 44C12.9543 44 4 40.7439 4 36.7273C4 33.9891 8.16144 31.6043 14.31 30.3636C8.16144 29.123 4 26.7382 4 24C4 21.2618 8.16144 18.877 14.31 17.6364C8.16144 16.3957 4 14.0109 4 11.2727C4 7.25611 12.9543 4 24 4C35.0457 4 44 7.25611 44 11.2727Z"></path>
</svg>
</div>
<span class="text-xl font-bold tracking-tight">QuizQuest</span>
</div>
<!-- Desktop Nav -->
<nav class="hidden md:flex items-center gap-8">
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Quizzes</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Leaderboard</a>
<a class="text-sm font-medium text-primary" href="#">Prizes</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Profile</a>
</nav>
<!-- Actions -->
<div class="flex items-center gap-4">
<div class="hidden sm:flex items-center bg-surface-light dark:bg-surface-dark rounded-full px-4 py-2 border border-slate-200 dark:border-white/5 shadow-sm">
<span class="material-symbols-outlined text-primary mr-2 text-[20px]">search</span>
<input class="bg-transparent border-none focus:ring-0 text-sm w-32 placeholder:text-slate-400 dark:placeholder:text-slate-500 p-0" placeholder="Search prizes..." type="text"/>
</div>
<button class="hidden sm:flex items-center gap-2 bg-surface-light dark:bg-surface-dark hover:bg-slate-50 dark:hover:bg-white/5 border border-slate-200 dark:border-white/10 rounded-full py-2 px-4 transition-all group">
<span class="text-primary font-bold text-sm">12,450 QP</span>
<span class="material-symbols-outlined text-primary text-[18px] group-hover:scale-110 transition-transform">add_circle</span>
</button>
<div class="size-10 rounded-full bg-cover bg-center border-2 border-surface-light dark:border-surface-dark shadow-sm cursor-pointer hover:opacity-80 transition-opacity" data-alt="User profile picture showing a smiling woman" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBqQL9gGfmXEPSMiiWG5HWbXNj8XKk67dXdVDiLq1xzTpyS_saISsVSMCoZX_x-JVhRK5DsJhEM1PC4FWNBRUQUGj-wllfKzW-eEFf0c9KE6IO_BQlCdYKzym1hVfL60h9Zn4rx6zJaKI9eB0kflrWsLpg_w5IG_KPl6UO-hILOeEY7iq2_JkQCafrO7UmKRxiQE6CV6_Mv_gUrgkP6rJEqKdvw3Vae4B0VluFWE8rrntYNFrORlr00I5kFoP2r-62r7AagbGuR');"></div>
</div>
</div>
</div>
</header>
<main class="flex-grow w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Hero Section -->
<section class="relative overflow-hidden rounded-2xl mb-12">
<div class="absolute inset-0 bg-gradient-to-r from-primary/90 to-primary/40 z-10"></div>
<div class="absolute inset-0 bg-cover bg-center" data-alt="Abstract futuristic gaming setup with neon lights" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBRcPXB5IgNp5b6ta8kjOPBlylNGW73NDTmXMYKSxW_oP9bg98X5TfA0i8OfbXlebiadBFC8m1j_V866sM_gBUiX_ZacgRZXY1mVflX-5CzOefo9uBcHTg02O4DW8YLR7YPrY3hKieUCMk0DwDSJU5UR6ptBkDV2Iv7k6fQYWaWuoKOxFwxA_wjfdn1bspxlxqyZ1cE22_PB4rKkLlLsF6sqej-1O8r6cc53E4gUbcictB_CvD0eGE8qG0gdY7p6zZP8f6jO7lG');"></div>
<div class="relative z-20 flex flex-col md:flex-row items-center justify-between p-8 md:p-12 gap-8">
<div class="text-white max-w-xl">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/20 backdrop-blur-sm border border-white/20 mb-4">
<span class="material-symbols-outlined text-[18px]">verified</span>
<span class="text-xs font-bold uppercase tracking-wide">Level 5 Member</span>
</div>
<h1 class="text-4xl md:text-5xl font-black tracking-tight mb-4">Rewards Center</h1>
<p class="text-lg text-white/90 leading-relaxed mb-6">Redeem your hard-earned Quest Points for exclusive gear, digital currency, and unique experiences.</p>
<div class="flex gap-3">
<button class="bg-white text-primary hover:bg-slate-100 font-bold py-3 px-6 rounded-full transition-colors flex items-center gap-2">
View History
<span class="material-symbols-outlined text-[20px]">history</span>
</button>
</div>
</div>
<!-- Featured Item Card Mini -->
<div class="hidden md:block bg-white/10 backdrop-blur-md border border-white/20 rounded-xl p-4 w-72 shrink-0 transform rotate-2 hover:rotate-0 transition-transform duration-300">
<div class="aspect-video bg-black/20 rounded-lg mb-3 overflow-hidden relative">
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded-full">New Arrival</div>
<img alt="Mechanical Keyboard close up" class="w-full h-full object-cover opacity-90 hover:scale-105 transition-transform duration-500" data-alt="Close up of a backlit mechanical keyboard" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBmlA6BVELQ7RXi8w8wxT8SdQagawi4BZOISDZ8gCIaBeVqLgfTU2M7wDNmThIektD07J8GlK4UHoycb-Bu7mtxBt5nrO2AAftnN0C4MjuWWKVvXnLyFd0moiSbL0o85Or3B1q2JBT_GqytMEOgiw6NA-LC-gqvnQuJiaTcnb1wz4MDJ8ThR-pSoV-bL6G-gS0ZMR6z4Du-P7cn-dJBGhHoSE4Kdpc0o59LEO5mf2yu8G44cq-u-d-nnXpa0jOiKK1YLrn2b6uD"/>
</div>
<h3 class="text-white font-bold text-lg leading-tight">Pro Mech Keyboard</h3>
<p class="text-white/70 text-sm mt-1">8,000 QP</p>
</div>
</div>
</section>
<!-- Filters & Sort -->
<div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-6 mb-8">
<div class="flex flex-wrap gap-2">
<button class="bg-primary text-white px-5 py-2.5 rounded-full text-sm font-semibold shadow-lg shadow-primary/20 transition-all hover:scale-105">
All Prizes
</button>
<button class="bg-surface-light dark:bg-surface-dark hover:bg-slate-100 dark:hover:bg-white/5 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-white/5 px-5 py-2.5 rounded-full text-sm font-medium transition-all flex items-center gap-2 group">
<span class="material-symbols-outlined text-[18px] group-hover:text-primary">desktop_windows</span>
Tech
</button>
<button class="bg-surface-light dark:bg-surface-dark hover:bg-slate-100 dark:hover:bg-white/5 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-white/5 px-5 py-2.5 rounded-full text-sm font-medium transition-all flex items-center gap-2 group">
<span class="material-symbols-outlined text-[18px] group-hover:text-primary">card_giftcard</span>
Gift Cards
</button>
<button class="bg-surface-light dark:bg-surface-dark hover:bg-slate-100 dark:hover:bg-white/5 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-white/5 px-5 py-2.5 rounded-full text-sm font-medium transition-all flex items-center gap-2 group">
<span class="material-symbols-outlined text-[18px] group-hover:text-primary">checkroom</span>
Merch
</button>
<button class="bg-surface-light dark:bg-surface-dark hover:bg-slate-100 dark:hover:bg-white/5 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-white/5 px-5 py-2.5 rounded-full text-sm font-medium transition-all flex items-center gap-2 group">
<span class="material-symbols-outlined text-[18px] group-hover:text-primary">local_activity</span>
Experiences
</button>
</div>
<div class="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
<span>Sort by:</span>
<select class="bg-transparent border-none font-medium text-slate-900 dark:text-white focus:ring-0 cursor-pointer pr-8 py-0">
<option>Popularity</option>
<option>Price: Low to High</option>
<option>Price: High to Low</option>
<option>Newest</option>
</select>
</div>
</div>
<!-- Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Card 1 (Redeemable) -->
<div class="group bg-surface-light dark:bg-surface-dark rounded-xl p-3 shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-200 dark:border-white/5 flex flex-col">
<div class="relative aspect-square rounded-lg overflow-hidden mb-4 bg-slate-100 dark:bg-black/20">
<img alt="White gaming headset on a stand" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="White gaming headset on a stand" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDqDkyotsUANwZlQQeYDlAcLqywSF5YewrNw9K4G1qZh8VgN3m94ZyMEWg3B5vQ_end0eKMWqaciJEAqC0UGA5CERTZGDWm0DrnGCQ7nnq-gMFc8nVvDtOg9nnmfmlQjY0zlOV9ypF0TaozOCBnN6Gk5633HiWu3X559WYqZTlOv21vOfq15SsvW_HBdzL51SFrpGRJ8QKk32f0UtENvMdnCBvp-ZVh4Hg1pXLw3YXbo4EgF8QiE-4j5jZg8qInoz5T9z1Avq3G"/>
<div class="absolute top-3 left-3 bg-white/90 dark:bg-black/60 backdrop-blur-md px-3 py-1 rounded-full text-xs font-bold text-slate-900 dark:text-white flex items-center gap-1 shadow-sm">
<span class="material-symbols-outlined text-[14px] text-primary">bolt</span>
Hot
</div>
</div>
<div class="px-2 pb-2 flex-grow">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-lg leading-snug group-hover:text-primary transition-colors">Wireless Gaming Headset</h3>
</div>
<p class="text-sm text-slate-500 dark:text-slate-400 line-clamp-2 mb-4">Immersive 7.1 surround sound with noise-canceling mic.</p>
</div>
<div class="px-2 pb-1 mt-auto">
<div class="flex items-center justify-between mb-3">
<div class="text-primary font-bold text-lg">5,000 QP</div>
<div class="text-xs text-green-500 font-medium flex items-center gap-1 bg-green-500/10 px-2 py-0.5 rounded-full">
<span class="material-symbols-outlined text-[14px]">check_circle</span>
In Stock
</div>
</div>
<button class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-2.5 rounded-full shadow-lg shadow-primary/25 transition-all active:scale-95 flex items-center justify-center gap-2">
Redeem Now
</button>
</div>
</div>
<!-- Card 2 (Redeemable) -->
<div class="group bg-surface-light dark:bg-surface-dark rounded-xl p-3 shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-200 dark:border-white/5 flex flex-col">
<div class="relative aspect-square rounded-lg overflow-hidden mb-4 bg-slate-100 dark:bg-black/20">
<img alt="Steam gift card concept art" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Digital gift card illustration with a game controller" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCEiObl5uthqe9fHu83m4lGbrZRJJDsgtSMbjzki2-ZAEkm0N151p5G6MbZj_116YeT9e03pVGdDujErHMvsq_-v4p3uVD7ShwD9oX8FPoWPcrmM6k0_GGZB5DIyj8jVxv_mhRmmrvjTHf77xA_ScKOIpI3DOOqoTpUAGkrpOUEnOoxbxVQEJakV2h9bT01qdlxsyb3tP7mdkE_04WBnmcCySX7k7KUzbW1TgVlaRXZ5A5XralWVu6l2HWCw6wXjZhrfm54RMeI"/>
</div>
<div class="px-2 pb-2 flex-grow">
<h3 class="font-bold text-lg leading-snug mb-2 group-hover:text-primary transition-colors">Steam $20 Gift Card</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 line-clamp-2 mb-4">Digital code delivered instantly to your email.</p>
</div>
<div class="px-2 pb-1 mt-auto">
<div class="flex items-center justify-between mb-3">
<div class="text-primary font-bold text-lg">2,000 QP</div>
</div>
<button class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-2.5 rounded-full shadow-lg shadow-primary/25 transition-all active:scale-95 flex items-center justify-center gap-2">
Redeem Now
</button>
</div>
</div>
<!-- Card 3 (Redeemable) -->
<div class="group bg-surface-light dark:bg-surface-dark rounded-xl p-3 shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-200 dark:border-white/5 flex flex-col">
<div class="relative aspect-square rounded-lg overflow-hidden mb-4 bg-slate-100 dark:bg-black/20">
<img alt="Person wearing a hoodie" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Close up of a minimalist hoodie texture" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCCGS4Rv6Uvizxeb8elOLP5ARvRbG1m7H1VFhy16qmHVnsJv1urvgoQ5nCapFo-ZQD83O_Fsjgw1JzR3lberb9EPLgIjfx6bjRKiOiCLNZoUYiUEQh5LNo4a_yoizXDDKF1ZsNguQbqwftNQEXonpGJGA5536_e41nyA_v1Q56wsjvUB-jfQl_f6O8g-BYcnzEkbvlKMGwAWKEPp4WAQRxLqd-SX418SlcFzFfs8ECB16jIP2nvO2bewCgOabyMyzeyS0GAwYco"/>
</div>
<div class="px-2 pb-2 flex-grow">
<h3 class="font-bold text-lg leading-snug mb-2 group-hover:text-primary transition-colors">QuizQuest Official Hoodie</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 line-clamp-2 mb-4">Limited edition black hoodie with embroidered logo.</p>
</div>
<div class="px-2 pb-1 mt-auto">
<div class="flex items-center justify-between mb-3">
<div class="text-primary font-bold text-lg">3,500 QP</div>
<div class="text-xs text-orange-500 font-medium flex items-center gap-1 bg-orange-500/10 px-2 py-0.5 rounded-full">
<span class="material-symbols-outlined text-[14px]">timer</span>
Low Stock
</div>
</div>
<button class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-2.5 rounded-full shadow-lg shadow-primary/25 transition-all active:scale-95 flex items-center justify-center gap-2">
Redeem Now
</button>
</div>
</div>
<!-- Card 4 (Too Expensive) -->
<div class="group bg-surface-light dark:bg-surface-dark rounded-xl p-3 shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-200 dark:border-white/5 flex flex-col opacity-80 hover:opacity-100">
<div class="relative aspect-square rounded-lg overflow-hidden mb-4 bg-slate-100 dark:bg-black/20">
<img alt="RGB Mechanical Keyboard" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500" data-alt="Mechanical keyboard with colorful keycaps" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA44mg1LZRRTMwa_VOLkiXjrEap_7yIX__L_2IR6Ys91X83lMiSiLqP-V3ODAy2MOy_VSVhhIM_q15tcyxVDlTto9_8LJziDL_vb20Nb-XNqT3rO8yjAOoDXiMERZDWHqUEyoOa7oaTU11W9h0s6yBSUdEWgxDL4jndPRBJuv6zGWBdbbnIeNtTgdSo9EyEcQVIE2gFyEqW32sgdFKQ1tGvdtk4m3VdGRI6nw_PS661f4MeyvFxlXAEjURqx2_vckndOHv8rlTQ"/>
<div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="bg-black/60 backdrop-blur text-white px-3 py-1 rounded-full text-xs font-bold">View Details</span>
</div>
</div>
<div class="px-2 pb-2 flex-grow">
<h3 class="font-bold text-lg leading-snug mb-2 group-hover:text-primary transition-colors">Mechanical RGB Keyboard</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 line-clamp-2 mb-4">Tactile switches with customizable backlighting.</p>
</div>
<div class="px-2 pb-1 mt-auto">
<div class="flex items-center justify-between mb-3">
<div class="text-slate-400 dark:text-slate-500 font-bold text-lg">20,000 QP</div>
</div>
<button class="w-full bg-slate-200 dark:bg-slate-700 text-slate-500 dark:text-slate-300 font-bold py-2.5 rounded-full cursor-not-allowed flex items-center justify-center gap-2" disabled="">
<span class="material-symbols-outlined text-[18px]">lock</span>
Need 7,550 more
</button>
</div>
</div>
<!-- Card 5 (Redeemable) -->
<div class="group bg-surface-light dark:bg-surface-dark rounded-xl p-3 shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-200 dark:border-white/5 flex flex-col">
<div class="relative aspect-square rounded-lg overflow-hidden mb-4 bg-slate-100 dark:bg-black/20">
<img alt="Modern mouse" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Sleek black computer mouse on desk" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAU82Cdm4BzBU6IrSr5vomHDnwoF2dpjyj0WdHvbsTXA6cs_rfdKBgPzHvwTLmECB74F6wA18-jLbyR0Hq2dIqs9Ql18eulsqd0ZaMnVjbxKauSLslJJjv2oRxkg45zj0oG2ZTXg2qiRxI2o1WO_7boa_MQYv_mf2B8by-8u98ngjpfBWlUz_GK0eI4GClDv8ut95wFOwSeavXFiBgXduIfJZ9kxZ86BT7rHeGqsSyQKaZEn4PiDY03CVaFXRfl46K9yqpWRWom"/>
</div>
<div class="px-2 pb-2 flex-grow">
<h3 class="font-bold text-lg leading-snug mb-2 group-hover:text-primary transition-colors">Precision Gaming Mouse</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 line-clamp-2 mb-4">Ultra-lightweight with 16k DPI sensor.</p>
</div>
<div class="px-2 pb-1 mt-auto">
<div class="flex items-center justify-between mb-3">
<div class="text-primary font-bold text-lg">4,200 QP</div>
</div>
<button class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-2.5 rounded-full shadow-lg shadow-primary/25 transition-all active:scale-95 flex items-center justify-center gap-2">
Redeem Now
</button>
</div>
</div>
<!-- Card 6 (Redeemable) -->
<div class="group bg-surface-light dark:bg-surface-dark rounded-xl p-3 shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-200 dark:border-white/5 flex flex-col">
<div class="relative aspect-square rounded-lg overflow-hidden mb-4 bg-slate-100 dark:bg-black/20">
<img alt="Video game controller" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Video game controller on dark surface" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA1sDuhmLSZMypJp-r2l8XTS6vrLMKYaVYdvIQBzmks5r_KK3zOIw1rdtaI7m6sg3GDqmwtaMOj1XfuXwFLG8IR5OmC65nWVccTyZDEko8SQeOYSqvXYXzFN-glTIvcTVOATdl1TTSsb4b7cLP8aX2SBBRbOepqhxRfpA44HcECDllppu73kKUbCkcdD2ei_O4tSmGG6t8dPa_01zxwZGS0zzpkiSduXKfgnruA1QWmEfyESSyYG9nfg2bllrcKMQejl3ReLisY"/>
</div>
<div class="px-2 pb-2 flex-grow">
<h3 class="font-bold text-lg leading-snug mb-2 group-hover:text-primary transition-colors">Pro Game Controller</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 line-clamp-2 mb-4">Compatible with PC and Console. Textured grip.</p>
</div>
<div class="px-2 pb-1 mt-auto">
<div class="flex items-center justify-between mb-3">
<div class="text-primary font-bold text-lg">6,000 QP</div>
</div>
<button class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-2.5 rounded-full shadow-lg shadow-primary/25 transition-all active:scale-95 flex items-center justify-center gap-2">
Redeem Now
</button>
</div>
</div>
<!-- Card 7 (Redeemable) -->
<div class="group bg-surface-light dark:bg-surface-dark rounded-xl p-3 shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-200 dark:border-white/5 flex flex-col">
<div class="relative aspect-square rounded-lg overflow-hidden mb-4 bg-slate-100 dark:bg-black/20">
<img alt="Esports Jersey" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Colorful esports jersey design" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8pPlvqIwPbZDAm14rSiorYt5tEGbFbswx3jHKwMB8BBOCD7jl-Bmdf09D-WsBTa7jruU3nq1wnc_DNhHp_i3b82eswXVg7LLArS30MLgnwTLdQGhZnCOz8fmR5RoTr16cDBCi3BDFqq2WViutNF2v42y4lwK7XgYU-L20b5z70gNTpoOBN1fzUQeMErQJH9jRhJDFkIdQNXoLWO3SobZ6Z22WWqnYj6XZ4HLjOjwzZro7wePL8cs0DvCPJrA3YVUiQ8SA7LYS"/>
</div>
<div class="px-2 pb-2 flex-grow">
<h3 class="font-bold text-lg leading-snug mb-2 group-hover:text-primary transition-colors">Team Jersey 2024</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 line-clamp-2 mb-4">Official team wear. Breathable fabric.</p>
</div>
<div class="px-2 pb-1 mt-auto">
<div class="flex items-center justify-between mb-3">
<div class="text-primary font-bold text-lg">4,500 QP</div>
</div>
<button class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-2.5 rounded-full shadow-lg shadow-primary/25 transition-all active:scale-95 flex items-center justify-center gap-2">
Redeem Now
</button>
</div>
</div>
<!-- Card 8 (Redeemable) -->
<div class="group bg-surface-light dark:bg-surface-dark rounded-xl p-3 shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-200 dark:border-white/5 flex flex-col">
<div class="relative aspect-square rounded-lg overflow-hidden mb-4 bg-slate-100 dark:bg-black/20">
<img alt="Coffee mug" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Black ceramic coffee mug" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDuqTmqY-MUSSdpRtQkStkISB5iOPlxKdC9FiF_rAO-FtzuAiGiSViIa70aRoCgGa1dFo17CxQw4Q5rnLfbbyTTupDRQXJAtM8b6tFgaCB4Npzsl1lmM_tDofZ8lJG2jxc_wMlo2iFy26Q73bB2hmKiECrYl2P5WQxnEjIFjqvHaFo9z078bl3S6RzjsLJt8FvO4gL-ygzlUtDMyMmXLyS18aXUsAsjstt7vsELldbc0iswFozOPPCn09Ui8t1edXNhgGUJqJlV"/>
</div>
<div class="px-2 pb-2 flex-grow">
<h3 class="font-bold text-lg leading-snug mb-2 group-hover:text-primary transition-colors">Dev Fuel Mug</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 line-clamp-2 mb-4">Matte black finish. Keeps drinks hot for hours.</p>
</div>
<div class="px-2 pb-1 mt-auto">
<div class="flex items-center justify-between mb-3">
<div class="text-primary font-bold text-lg">1,200 QP</div>
</div>
<button class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-2.5 rounded-full shadow-lg shadow-primary/25 transition-all active:scale-95 flex items-center justify-center gap-2">
Redeem Now
</button>
</div>
</div>
</div>
<!-- Pagination -->
<div class="mt-12 flex justify-center pb-8">
<nav aria-label="Pagination" class="flex items-center gap-2">
<button class="p-2 rounded-full border border-slate-200 dark:border-white/10 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5 disabled:opacity-50">
<span class="material-symbols-outlined text-[20px]">chevron_left</span>
</button>
<button class="w-10 h-10 rounded-full bg-primary text-white font-bold flex items-center justify-center">1</button>
<button class="w-10 h-10 rounded-full border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/5 font-medium flex items-center justify-center">2</button>
<button class="w-10 h-10 rounded-full border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/5 font-medium flex items-center justify-center">3</button>
<span class="px-2 text-slate-500 dark:text-slate-400">...</span>
<button class="w-10 h-10 rounded-full border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/5 font-medium flex items-center justify-center">8</button>
<button class="p-2 rounded-full border border-slate-200 dark:border-white/10 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5">
<span class="material-symbols-outlined text-[20px]">chevron_right</span>
</button>
</nav>
</div>
</main>
</body></html>