<!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 Marketplace</title>
<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": "#191022",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
},
},
}
</script>
<style>
/* Custom Glowing Effect for Cards */
.prize-card {
transition: all 0.3s ease;
}
.prize-card:hover {
transform: translateY(-4px);
box-shadow: 0 0 25px rgba(127, 19, 236, 0.4);
border-color: rgba(127, 19, 236, 0.6);
}
</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">
<!-- Navigation -->
<header class="sticky top-0 z-50 w-full backdrop-blur-md bg-background-light/80 dark:bg-background-dark/80 border-b border-slate-200 dark:border-white/10">
<div class="flex items-center justify-between px-6 py-4 max-w-[1400px] mx-auto w-full">
<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-3xl">sports_esports</span>
</div>
<h2 class="text-xl font-bold leading-tight tracking-[-0.015em]">QuizQuest</h2>
</div>
<nav class="hidden md:flex flex-1 justify-center gap-8">
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary text-sm font-medium transition-colors" href="#">Quizzes</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary text-sm font-medium transition-colors" href="#">Leaderboard</a>
<a class="text-primary font-bold text-sm leading-normal" href="#">Prizes</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary text-sm font-medium transition-colors" href="#">Community</a>
</nav>
<div class="flex gap-3">
<button class="hidden sm:flex h-10 px-6 cursor-pointer items-center justify-center rounded-full bg-slate-200 dark:bg-white/10 text-slate-900 dark:text-white hover:bg-slate-300 dark:hover:bg-white/20 transition-colors text-sm font-bold">
Login
</button>
<button class="flex h-10 px-6 cursor-pointer items-center justify-center rounded-full bg-primary text-white hover:bg-primary/90 transition-colors text-sm font-bold shadow-lg shadow-primary/20">
Register
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow w-full max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col gap-8">
<!-- Hero Section -->
<div class="relative rounded-xl overflow-hidden bg-gradient-to-r from-background-dark to-[#2d1b4e] border border-white/10 p-8 md:p-12 lg:p-16 flex flex-col md:flex-row items-center gap-8">
<div class="absolute top-0 right-0 w-full h-full opacity-20 pointer-events-none" style="background-image: radial-gradient(circle at 70% 30%, #7f13ec 0%, transparent 60%);"></div>
<div class="flex-1 z-10 text-center md:text-left">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/20 border border-primary/30 text-primary text-xs font-bold mb-4 uppercase tracking-wider">
<span class="material-symbols-outlined text-sm">stars</span>
Official Rewards
</div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-black tracking-tight text-white mb-4">
Play Hard. <br/><span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-[#b983f7]">Get Rewarded.</span>
</h1>
<p class="text-slate-400 text-lg mb-8 max-w-xl mx-auto md:mx-0">
Turn your quiz knowledge into real-world prizes. From next-gen consoles to exclusive vouchers, every correct answer brings you closer to your dream reward.
</p>
<!-- Redemption Progress Widget (Hero Context) -->
<div class="bg-white/5 backdrop-blur-md border border-white/10 rounded-lg p-5 max-w-md mx-auto md:mx-0 shadow-xl">
<div class="flex justify-between items-center mb-2">
<span class="text-slate-200 font-medium text-sm flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-lg">account_balance_wallet</span>
Current Balance
</span>
<span class="text-primary font-bold text-sm">0 QP</span>
</div>
<div class="h-2 w-full bg-slate-700/50 rounded-full overflow-hidden mb-3">
<div class="h-full bg-primary w-[5%]" style="box-shadow: 0 0 10px #7f13ec;"></div>
</div>
<p class="text-xs text-slate-400">
<span class="text-white font-medium">500 QP</span> needed for your first reward. <a class="text-primary hover:underline" href="#">Register to start earning</a>.
</p>
</div>
</div>
<div class="flex-1 w-full max-w-md md:max-w-lg z-10 relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-primary to-purple-600 rounded-2xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
<img alt="High-end gaming setup with neon lights and controllers" class="relative w-full h-auto object-cover rounded-2xl border border-white/10 shadow-2xl aspect-[4/3]" data-alt="Futuristic gaming setup with glowing peripherals" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCqzs582p82hPrFZQMlCi8k8DyexZjSenwo2m2ah89ds-gc7quc3_Ug59e4oY7kg3yksuLVRIJwcOMYhHgfRZUqjbGMBXFL09JKCWkkbb9xIbeifww61cEoKNJ0o4v_9w6gxSU-Dw0QBnIeRAXrU3OYcr3mToiLPz6BUvuuNQG5B6mI6sStv3__KXjO7allDmGtrd8hle4emyKifr5Ybe8ZCGn7hiBCKjaAbH_9bXXQftmHim1jqxXG4c_i5VapTyBb9_B7kRG5"/>
</div>
</div>
<!-- Filters & Sort -->
<div class="flex flex-col md:flex-row justify-between items-center gap-4 mt-4 sticky top-[72px] z-40 py-4 bg-background-light/95 dark:bg-background-dark/95 backdrop-blur-sm -mx-4 px-4 md:mx-0 md:px-0">
<div class="flex items-center gap-2 overflow-x-auto w-full md:w-auto pb-2 md:pb-0 scrollbar-hide">
<button class="px-5 py-2 rounded-full bg-primary text-white text-sm font-bold whitespace-nowrap shadow-lg shadow-primary/25">
All Rewards
</button>
<button class="px-5 py-2 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10 transition-colors text-sm font-medium whitespace-nowrap">
Tech & Gadgets
</button>
<button class="px-5 py-2 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10 transition-colors text-sm font-medium whitespace-nowrap">
Gift Cards
</button>
<button class="px-5 py-2 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10 transition-colors text-sm font-medium whitespace-nowrap">
Merch
</button>
<button class="px-5 py-2 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10 transition-colors text-sm font-medium whitespace-nowrap">
Premium
</button>
</div>
<div class="flex items-center gap-2 w-full md:w-auto">
<span class="text-sm text-slate-500 font-medium whitespace-nowrap">Sort by:</span>
<select class="bg-transparent border border-slate-200 dark:border-white/10 rounded-full px-4 py-2 text-sm text-slate-700 dark:text-slate-200 focus:outline-none focus:border-primary w-full md:w-auto">
<option>Popular</option>
<option>Price: Low to High</option>
<option>Price: High to Low</option>
<option>Newest</option>
</select>
</div>
</div>
<!-- Prize Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-12">
<!-- Card 1 (Premium) -->
<div class="prize-card group relative bg-white dark:bg-white/5 border border-yellow-500/30 rounded-lg overflow-hidden flex flex-col">
<div class="absolute top-3 left-3 z-20 flex gap-2">
<span class="bg-yellow-500 text-black text-[10px] font-black px-2 py-1 rounded-full uppercase tracking-wide flex items-center gap-1 shadow-lg shadow-yellow-500/20">
<span class="material-symbols-outlined text-[12px]">diamond</span> Premium
</span>
</div>
<div class="relative h-48 w-full p-6 flex items-center justify-center bg-gradient-to-b from-white/5 to-transparent">
<img alt="White modern gaming console standing vertically" class="max-h-full w-auto object-contain drop-shadow-2xl transition-transform duration-500 group-hover:scale-110" data-alt="Next-gen gaming console" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAClWExK3o7ghSZhiPPaxs3VAqbtdLRmVRhencGEbD8AOvcwv-QwkeA0L4BSEWOYF4rEMyabDvudr08tWrv5yTOObpKeKwkBqowDJDLFCI41sPy3UAth2Phr5KE_d2jlou_9F8TEHhJXPgMPHgjle95ctPv_K5ERRUCTNCoWeWj22CYgCiyr2606LBQQc53-zQ8C0o5qWrxuf7A5hX8-KXxp3UlEL4CyhIXrdos5yscadPgfB7qFGm6KGrWjvw6Nk43vypPWt8f"/>
</div>
<div class="p-5 flex flex-col flex-1 border-t border-white/5 bg-background-light dark:bg-[#1f162b]">
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 group-hover:text-primary transition-colors">Ultra Game Station 5</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mb-4 line-clamp-2">Experience next-gen gaming with ultra-high speed SSD and ray tracing.</p>
<div class="mt-auto flex items-center justify-between">
<div class="flex flex-col">
<span class="text-xs text-slate-500 dark:text-slate-400 font-medium">Cost</span>
<span class="text-primary font-black text-lg">50,000 QP</span>
</div>
<button class="bg-white/10 hover:bg-primary text-white p-2 rounded-full transition-colors group/btn">
<span class="material-symbols-outlined group-hover/btn:rotate-12 transition-transform">lock</span>
</button>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="prize-card group relative bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-lg overflow-hidden flex flex-col">
<div class="relative h-48 w-full p-6 flex items-center justify-center bg-gradient-to-b from-white/5 to-transparent">
<img alt="High quality over-ear headphones" class="max-h-full w-auto object-contain drop-shadow-2xl transition-transform duration-500 group-hover:scale-110" data-alt="Wireless noise-cancelling headphones" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCZsPLMJmeD5gNdGFpggX25vWwt8n56sTspVegdv2o5d8E9JnQ8PI4xkk3OdCSz16jR8310ZuJ99MW6WbZmDCPiVOTqE6bOTXFL7dl88Y4dhxGI92lXyScJOFVv7LmJsaOlynw-7ygqmKXOPePdD6RcBoQdHJLazItpFbZVFUcv2XDYxGOp8UTvk2ZFVvjnXr3X3RHKLA4boxAyF8Updq-I-aFHLFDpfxAO5wA2cj7wzci566IsK7C7haLOG58OMB30mDDragb6"/>
</div>
<div class="p-5 flex flex-col flex-1 border-t border-white/5 bg-background-light dark:bg-[#1f162b]">
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 group-hover:text-primary transition-colors">Sonic Wireless Pro</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mb-4 line-clamp-2">Immersive sound with industry-leading noise cancellation.</p>
<div class="mt-auto flex items-center justify-between">
<div class="flex flex-col">
<span class="text-xs text-slate-500 dark:text-slate-400 font-medium">Cost</span>
<span class="text-primary font-black text-lg">25,000 QP</span>
</div>
<button class="bg-white/10 hover:bg-primary text-white p-2 rounded-full transition-colors group/btn">
<span class="material-symbols-outlined group-hover/btn:rotate-12 transition-transform">lock</span>
</button>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="prize-card group relative bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-lg overflow-hidden flex flex-col">
<div class="absolute top-3 left-3 z-20">
<span class="bg-primary/20 text-primary border border-primary/20 text-[10px] font-bold px-2 py-1 rounded-full uppercase tracking-wide">Popular</span>
</div>
<div class="relative h-48 w-full p-6 flex items-center justify-center bg-gradient-to-b from-white/5 to-transparent">
<img alt="Red athletic sneaker floating" class="max-h-full w-auto object-contain drop-shadow-2xl transition-transform duration-500 group-hover:scale-110 -rotate-12 group-hover:rotate-0" data-alt="Limited edition athletic sneakers" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBAuKQ0JWdQZZhzEIcKZJ49aShUINLYnBTd8pMH0wEtYqouOCAjck8hKo9RHx9HM7StR4U1fMAkDcMZPJJIdzUfd0rDEuRowlGaC665OvGQuR2cgBJN0VLRLswevymQEDewK6dwf3T_27SkLqiSzOcUQOb7HiT4VUOTZLGCmD725PRBZ3eFZ5UTmnQej4pD5rkWXcU70VAxoaq5x53-wuokTkur0mlJ6IcQXhIrio0Kj73ByE4VY7Skx8GEgp4uQLdtBMbHTZDU"/>
</div>
<div class="p-5 flex flex-col flex-1 border-t border-white/5 bg-background-light dark:bg-[#1f162b]">
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 group-hover:text-primary transition-colors">Runner X Vouchers</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mb-4 line-clamp-2">$100 voucher applicable for any footwear in the partner store.</p>
<div class="mt-auto flex items-center justify-between">
<div class="flex flex-col">
<span class="text-xs text-slate-500 dark:text-slate-400 font-medium">Cost</span>
<span class="text-primary font-black text-lg">15,000 QP</span>
</div>
<button class="bg-white/10 hover:bg-primary text-white p-2 rounded-full transition-colors group/btn">
<span class="material-symbols-outlined group-hover/btn:rotate-12 transition-transform">lock</span>
</button>
</div>
</div>
</div>
<!-- Card 4 -->
<div class="prize-card group relative bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-lg overflow-hidden flex flex-col">
<div class="relative h-48 w-full p-6 flex items-center justify-center bg-gradient-to-b from-white/5 to-transparent">
<div class="w-32 h-20 bg-gradient-to-r from-slate-700 to-slate-900 rounded-lg shadow-2xl flex items-center justify-center border border-white/10 group-hover:scale-110 transition-transform">
<span class="font-bold text-white tracking-widest text-lg">GIFT CARD</span>
</div>
</div>
<div class="p-5 flex flex-col flex-1 border-t border-white/5 bg-background-light dark:bg-[#1f162b]">
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 group-hover:text-primary transition-colors">$50 Amazon Card</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mb-4 line-clamp-2">Digital code delivered instantly to your registered email.</p>
<div class="mt-auto flex items-center justify-between">
<div class="flex flex-col">
<span class="text-xs text-slate-500 dark:text-slate-400 font-medium">Cost</span>
<span class="text-primary font-black text-lg">5,000 QP</span>
</div>
<button class="bg-white/10 hover:bg-primary text-white p-2 rounded-full transition-colors group/btn">
<span class="material-symbols-outlined group-hover/btn:rotate-12 transition-transform">lock</span>
</button>
</div>
</div>
</div>
<!-- Card 5 -->
<div class="prize-card group relative bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-lg overflow-hidden flex flex-col">
<div class="relative h-48 w-full p-6 flex items-center justify-center bg-gradient-to-b from-white/5 to-transparent">
<img alt="Laptop computer showing code on screen" class="max-h-full w-auto object-contain drop-shadow-2xl transition-transform duration-500 group-hover:scale-110" data-alt="High-performance laptop" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB73PSFWKzI2Py3CcR91AP3tkLHC99xoJtnG5gH9W09rzgrOKYYA6f7NXYzwfYDhrOBHGUi2RyYhSHr7WM3gdwYNE-s2p-X8YYz6OOveYbTW5bnl7IkNAemONWg6BabxlmxkFnVbFV3SuFU9fX2ChY0ZvDf2tZG0kctIRqbmrftzzdVjF4Z7kF-OnFQh-p5m-wP3-cEE7PqFZp2H9nOS0V4C6g-DztKvcAAHhSDlvoo8HsaOkrjeYXIAFQd3TWI61liMGFzPS3p"/>
</div>
<div class="p-5 flex flex-col flex-1 border-t border-white/5 bg-background-light dark:bg-[#1f162b]">
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 group-hover:text-primary transition-colors">ProBook Air</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mb-4 line-clamp-2">Ultra-lightweight laptop perfect for productivity and entertainment.</p>
<div class="mt-auto flex items-center justify-between">
<div class="flex flex-col">
<span class="text-xs text-slate-500 dark:text-slate-400 font-medium">Cost</span>
<span class="text-primary font-black text-lg">45,000 QP</span>
</div>
<button class="bg-white/10 hover:bg-primary text-white p-2 rounded-full transition-colors group/btn">
<span class="material-symbols-outlined group-hover/btn:rotate-12 transition-transform">lock</span>
</button>
</div>
</div>
</div>
<!-- Card 6 -->
<div class="prize-card group relative bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-lg overflow-hidden flex flex-col">
<div class="absolute top-3 left-3 z-20">
<span class="bg-[#0bda73]/20 text-[#0bda73] border border-[#0bda73]/20 text-[10px] font-bold px-2 py-1 rounded-full uppercase tracking-wide">Easy Win</span>
</div>
<div class="relative h-48 w-full p-6 flex items-center justify-center bg-gradient-to-b from-white/5 to-transparent">
<div class="w-24 h-24 rounded-full bg-slate-800 flex items-center justify-center border border-white/10 shadow-xl group-hover:scale-110 transition-transform">
<span class="text-4xl">☕</span>
</div>
</div>
<div class="p-5 flex flex-col flex-1 border-t border-white/5 bg-background-light dark:bg-[#1f162b]">
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 group-hover:text-primary transition-colors">Coffee Lover Kit</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mb-4 line-clamp-2">Premium beans + a reusable travel mug.</p>
<div class="mt-auto flex items-center justify-between">
<div class="flex flex-col">
<span class="text-xs text-slate-500 dark:text-slate-400 font-medium">Cost</span>
<span class="text-primary font-black text-lg">2,500 QP</span>
</div>
<button class="bg-white/10 hover:bg-primary text-white p-2 rounded-full transition-colors group/btn">
<span class="material-symbols-outlined group-hover/btn:rotate-12 transition-transform">lock</span>
</button>
</div>
</div>
</div>
<!-- Card 7 -->
<div class="prize-card group relative bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-lg overflow-hidden flex flex-col">
<div class="relative h-48 w-full p-6 flex items-center justify-center bg-gradient-to-b from-white/5 to-transparent">
<img alt="Smart mobile phone mock up" class="max-h-full w-auto object-contain drop-shadow-2xl transition-transform duration-500 group-hover:scale-110" data-alt="Latest smartphone model" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAeLKMkJRu6McD1PrkJS8XDZLkq4GBIFwmGOImsu9d2CJlJbyQ2-L1GiNrzOggu4derrL1YoPZb-AC7N4jY0-V4uUp2kgRSYU4Lv_L1YJRClTIh5w6K2UK2c38s2ys4D_jUzp-0YkEfTTVnU5FnjwkDbT59ICWJnPgzdUD8lmJ_piPovMiEAZ7lPzmpp_ClNlcFfVXbvswnI8s1hBCqZbS3dLq3ESBYrgPDjDG-VbrCNI9uBCM-TN39QPRfTHjyWY64VSaDQ8gD"/>
</div>
<div class="p-5 flex flex-col flex-1 border-t border-white/5 bg-background-light dark:bg-[#1f162b]">
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 group-hover:text-primary transition-colors">Phone 15 Pro</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mb-4 line-clamp-2">Titanium design, A17 Pro chip, 48MP Main camera.</p>
<div class="mt-auto flex items-center justify-between">
<div class="flex flex-col">
<span class="text-xs text-slate-500 dark:text-slate-400 font-medium">Cost</span>
<span class="text-primary font-black text-lg">80,000 QP</span>
</div>
<button class="bg-white/10 hover:bg-primary text-white p-2 rounded-full transition-colors group/btn">
<span class="material-symbols-outlined group-hover/btn:rotate-12 transition-transform">lock</span>
</button>
</div>
</div>
</div>
<!-- Card 8 -->
<div class="prize-card group relative bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-lg overflow-hidden flex flex-col">
<div class="relative h-48 w-full p-6 flex items-center justify-center bg-gradient-to-b from-white/5 to-transparent">
<img alt="Tablet computer with stylus" class="max-h-full w-auto object-contain drop-shadow-2xl transition-transform duration-500 group-hover:scale-110" data-alt="Creative tablet with pen" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCvZEoKGk03Ub16Q19RTHWc5geJJfQ-yHCR23j2NvyxVg8p5zwoIsiRAGvoDtA2jeFB3WtsV-39Lr6uTBgdIf7VLKZiRzveNPL3cL-Qq6AHnwWjOr-vRPHq42TGMTBcAmWzdtgVCaLTExpQ4Ed9ifbqlfZatxUzjNGsFuNM563iZKdG0HqUfpHY_Gd8qpn98uMjdNrZtZxVjBrlPLEP_JKxPPoZPrNiRKQrFvn5KsNUOs0edSUM599lj1zGqK9EfQr2lCCWmiMr"/>
</div>
<div class="p-5 flex flex-col flex-1 border-t border-white/5 bg-background-light dark:bg-[#1f162b]">
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 group-hover:text-primary transition-colors">Tab S9 Ultra</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mb-4 line-clamp-2">The new standard for tablets. Includes stylus for creators.</p>
<div class="mt-auto flex items-center justify-between">
<div class="flex flex-col">
<span class="text-xs text-slate-500 dark:text-slate-400 font-medium">Cost</span>
<span class="text-primary font-black text-lg">35,000 QP</span>
</div>
<button class="bg-white/10 hover:bg-primary text-white p-2 rounded-full transition-colors group/btn">
<span class="material-symbols-outlined group-hover/btn:rotate-12 transition-transform">lock</span>
</button>
</div>
</div>
</div>
</div>
<!-- Pagination / Load More -->
<div class="flex justify-center pb-12">
<button class="px-8 py-3 rounded-full border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 text-slate-600 dark:text-white font-bold text-sm hover:bg-slate-100 dark:hover:bg-white/10 transition-colors flex items-center gap-2">
Load More Rewards
<span class="material-symbols-outlined text-lg">expand_more</span>
</button>
</div>
<!-- CTA Section -->
<div class="relative rounded-xl overflow-hidden bg-[#2d1b4e] border border-white/10 px-8 py-12 md:px-16 md:py-20 text-center">
<div class="absolute inset-0 bg-cover bg-center opacity-30" data-alt="Abstract gradient background pattern" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAJKwDvGbCcNAsbhlIvsHWNWwQFsHqBOOJQpfRHFa6bYMT654ka80eiXFeCGAyI8ouU4JENw9Lu1K-mlAaH8eWmaAwYVwxzvmseGtg3jn-08i6EEKwBCQ0Ha72-R54g0fuNhNjpF4VAif1WRTnDQgVQDzNOfyhZKo8i7t-gy4h0QPLYJQkdaxiCj_dkNc2gNt7hLGXvVOoJNO5Q79t5Z716tMsyIB8zLX9AUyTFU6cn0NEZe9RwGl3p4s1c3q-QhYfWJPhhBKSC');"></div>
<div class="relative z-10 flex flex-col items-center gap-6">
<h2 class="text-3xl md:text-4xl font-black text-white tracking-tight">Don't let these prizes slip away.</h2>
<p class="text-slate-300 max-w-xl text-lg">Join thousands of players who are already redeeming their knowledge for premium gear.</p>
<div class="flex flex-col sm:flex-row gap-4 mt-2">
<button class="h-12 px-8 cursor-pointer items-center justify-center rounded-full bg-primary text-white hover:bg-primary/90 transition-colors text-base font-bold shadow-lg shadow-primary/30 flex gap-2">
Start Earning Now
<span class="material-symbols-outlined text-lg">arrow_forward</span>
</button>
<button class="h-12 px-8 cursor-pointer items-center justify-center rounded-full bg-white/10 border border-white/10 text-white hover:bg-white/20 transition-colors text-base font-bold">
View Leaderboard
</button>
</div>
</div>
</div>
<!-- Footer -->
<footer class="border-t border-slate-200 dark:border-white/10 py-8 mt-8">
<div class="flex flex-col md:flex-row justify-between items-center gap-4 text-slate-500 dark:text-slate-400 text-sm">
<p>© 2024 QuizQuest. All rights reserved.</p>
<div class="flex gap-6">
<a class="hover:text-primary transition-colors" href="#">Privacy Policy</a>
<a class="hover:text-primary transition-colors" href="#">Terms of Service</a>
<a class="hover:text-primary transition-colors" href="#">Help Center</a>
</div>
</div>
</footer>
</main>
<!-- Floating Register Overlay (Simulated for Demo) -->
<div class="hidden fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-slate-900/90 backdrop-blur-md border border-white/20 rounded-full py-3 px-6 shadow-2xl flex items-center gap-4 animate-bounce">
<span class="text-white text-sm font-medium">👋 Want to unlock these prizes?</span>
<button class="px-4 py-1.5 rounded-full bg-primary text-white text-xs font-bold hover:bg-primary/90">Register Free</button>
<button class="text-slate-400 hover:text-white">
<span class="material-symbols-outlined text-sm">close</span>
</button>
</div>
</body></html>