<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Prizes Marketplace</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#6D28D9", // A vivid purple based on the screenshots
"primary-hover": "#5b21b6",
"accent-yellow": "#FCD34D",
"background-light": "#F3F4F6", // Light gray for light mode
"background-dark": "#0B0A14", // Deep dark purple/black for dark mode
"card-dark": "#161521",
"card-light": "#FFFFFF",
"text-light": "#1F2937",
"text-dark": "#F3F4F6",
"text-muted-light": "#6B7280",
"text-muted-dark": "#9CA3AF",
},
fontFamily: {
display: ["Inter", "sans-serif"],
body: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.5rem",
'xl': '1rem',
'2xl': '1.5rem',
},
boxShadow: {
'glow': '0 0 20px rgba(109, 40, 217, 0.5)',
'glow-accent': '0 0 15px rgba(252, 211, 77, 0.4)',
}
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1f1f1f;
}
::-webkit-scrollbar-thumb {
background: #4B5563;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #6D28D9;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark transition-colors duration-300 antialiased">
<nav class="fixed w-full z-50 top-0 left-0 border-b border-gray-200 dark:border-gray-800 bg-white/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">
<div class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white">
<span class="material-icons">sports_esports</span>
</div>
<span class="font-bold text-xl tracking-tight dark:text-white">QuizQuest</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a class="text-text-muted-light dark:text-text-muted-dark hover:text-primary dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors" href="#">Home</a>
<a class="text-primary dark:text-white px-3 py-2 rounded-md text-sm font-bold transition-colors" href="#">Prizes</a>
<a class="text-text-muted-light dark:text-text-muted-dark hover:text-primary dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors" href="#">Leaderboard</a>
</div>
</div>
<div class="hidden md:flex items-center gap-4">
<a class="text-text-light dark:text-white hover:text-primary dark:hover:text-primary-hover px-3 py-2 rounded-md text-sm font-medium transition-colors" href="#">Login</a>
<a class="bg-primary hover:bg-primary-hover text-white px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-lg hover:shadow-primary/50" href="#">
Join Now
</a>
<button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors" onclick="document.documentElement.classList.toggle('dark')">
<span class="material-icons dark:hidden text-gray-600">dark_mode</span>
<span class="material-icons hidden dark:block text-yellow-400">light_mode</span>
</button>
</div>
<div class="-mr-2 flex md:hidden">
<button aria-controls="mobile-menu" aria-expanded="false" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" type="button">
<span class="sr-only">Open main menu</span>
<span class="material-icons">menu</span>
</button>
</div>
</div>
</div>
</nav>
<div class="relative pt-32 pb-16 sm:pt-40 sm:pb-24 overflow-hidden">
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center z-10">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 dark:bg-primary/20 border border-primary/20 mb-8">
<span class="w-2 h-2 rounded-full bg-accent-yellow animate-pulse"></span>
<span class="text-sm font-semibold text-primary dark:text-primary-hover tracking-wide uppercase">Rewards Marketplace</span>
</div>
<h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight mb-6">
<span class="block text-text-light dark:text-white">Play Smart.</span>
<span class="block text-transparent bg-clip-text bg-gradient-to-r from-primary via-purple-400 to-pink-500">Win Your Dream Gear.</span>
</h1>
<p class="mt-4 max-w-2xl mx-auto text-xl text-text-muted-light dark:text-text-muted-dark">
Exchange your hard-earned XP for real-world rewards. From the latest tech gadgets to instant cash payouts, your knowledge pays off here.
</p>
</div>
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full z-0 pointer-events-none">
<div class="absolute top-20 left-10 w-72 h-72 bg-primary/20 rounded-full blur-3xl opacity-30 animate-pulse"></div>
<div class="absolute bottom-20 right-10 w-96 h-96 bg-purple-600/20 rounded-full blur-3xl opacity-20"></div>
</div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-24">
<div class="flex flex-wrap justify-center gap-4 mb-12">
<button class="px-6 py-2.5 rounded-full bg-primary text-white font-medium shadow-lg shadow-primary/30 transition-transform hover:scale-105">
All Rewards
</button>
<button class="px-6 py-2.5 rounded-full bg-white dark:bg-card-dark border border-gray-200 dark:border-gray-700 text-text-light dark:text-gray-300 font-medium hover:border-primary hover:text-primary dark:hover:border-primary dark:hover:text-white transition-all">
<span class="flex items-center gap-2"><span class="material-icons text-sm">devices</span> Gadgets</span>
</button>
<button class="px-6 py-2.5 rounded-full bg-white dark:bg-card-dark border border-gray-200 dark:border-gray-700 text-text-light dark:text-gray-300 font-medium hover:border-primary hover:text-primary dark:hover:border-primary dark:hover:text-white transition-all">
<span class="flex items-center gap-2"><span class="material-icons text-sm">payments</span> Cash</span>
</button>
<button class="px-6 py-2.5 rounded-full bg-white dark:bg-card-dark border border-gray-200 dark:border-gray-700 text-text-light dark:text-gray-300 font-medium hover:border-primary hover:text-primary dark:hover:border-primary dark:hover:text-white transition-all">
<span class="flex items-center gap-2"><span class="material-icons text-sm">confirmation_number</span> Vouchers</span>
</button>
<button class="px-6 py-2.5 rounded-full bg-white dark:bg-card-dark border border-gray-200 dark:border-gray-700 text-text-light dark:text-gray-300 font-medium hover:border-primary hover:text-primary dark:hover:border-primary dark:hover:text-white transition-all">
<span class="flex items-center gap-2"><span class="material-icons text-sm">diamond</span> Premium</span>
</button>
</div>
<div class="mb-16">
<div class="flex items-center justify-between mb-8">
<h2 class="text-2xl font-bold text-text-light dark:text-white flex items-center gap-2">
<span class="material-icons text-accent-yellow">star</span>
Legendary Rewards
</h2>
<a class="text-primary hover:text-primary-hover font-medium text-sm flex items-center gap-1" href="#">View all <span class="material-icons text-sm">arrow_forward</span></a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="group relative bg-card-light dark:bg-card-dark rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-800 hover:border-primary/50 dark:hover:border-primary/50 transition-all duration-300 shadow-xl dark:shadow-glow hover:-translate-y-1">
<div class="absolute top-4 left-4 z-10">
<span class="px-3 py-1 bg-accent-yellow text-black text-xs font-bold rounded-full uppercase tracking-wider">Top Prize</span>
</div>
<div class="h-64 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 flex items-center justify-center p-6 relative overflow-hidden">
<div class="absolute bg-primary/30 w-32 h-32 blur-3xl rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 group-hover:bg-primary/50 transition-all duration-500"></div>
<img alt="iPhone 15 Pro Max Titanium" class="relative z-10 object-contain h-full w-auto transform group-hover:scale-110 transition-transform duration-500 drop-shadow-2xl" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBN1unuYSjUQWMQrgphcK_3KdyuzNW7nldQ3gKn9m0bSLCxxW92kN0qtjPXRftJq4WzNVRRL9YvqrYNLz7o47YhTl0sjGJvfUEJfqxGuOYv4otVA6zANiTu4VvmSZWnsLP97238IZs-v7b8XfqgNMkJp3wulNnX97odEUVMkA2ZABjyLeTHjptdVi5WSFMLheKgo3PdnYm_lJP6d91qS3DJMb6BygBjptqTfjx52SajJSOpi44YDNsPquCmh9c9l6FTDkeSZHAD"/>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="text-xl font-bold text-text-light dark:text-white group-hover:text-primary transition-colors">iPhone 15 Pro Max</h3>
<p class="text-sm text-text-muted-light dark:text-text-muted-dark">Titanium, 256GB</p>
</div>
</div>
<div class="mt-6 flex items-center justify-between">
<div class="flex flex-col">
<span class="text-xs text-text-muted-light dark:text-text-muted-dark uppercase tracking-wider font-semibold">Cost</span>
<span class="text-2xl font-bold text-primary dark:text-primary bg-clip-text">150,000 XP</span>
</div>
<button class="bg-gray-900 dark:bg-white text-white dark:text-black hover:bg-primary dark:hover:bg-primary dark:hover:text-white px-5 py-2.5 rounded-lg text-sm font-bold transition-all flex items-center gap-2">
Claim <span class="material-icons text-sm">arrow_forward</span>
</button>
</div>
<div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800">
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 mb-1">
<div class="bg-primary h-1.5 rounded-full" style="width: 85%"></div>
</div>
<p class="text-xs text-text-muted-light dark:text-text-muted-dark text-right">12/15 Claimed this month</p>
</div>
</div>
</div>
<div class="group relative bg-card-light dark:bg-card-dark rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-800 hover:border-purple-500/50 transition-all duration-300 shadow-lg hover:-translate-y-1">
<div class="absolute top-4 left-4 z-10">
<span class="px-3 py-1 bg-purple-500 text-white text-xs font-bold rounded-full uppercase tracking-wider">Trending</span>
</div>
<div class="h-64 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 flex items-center justify-center p-6 relative">
<div class="absolute bg-blue-500/20 w-32 h-32 blur-3xl rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 group-hover:bg-blue-500/40 transition-all duration-500"></div>
<img alt="PlayStation 5 Console" class="relative z-10 object-contain h-full w-auto transform group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 drop-shadow-2xl" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCe2DEAywhkMGJcCBdpzWjs2FdvRPoiTw631POOylcuso5Zk8PmNqmzK95DZIlFnXRekSmzc9bw9CKHJwJ4Efm_UVhpUKE-7cNRhLgz7wainGdImvkZmkf15wGvawuJUV84cjuSP254UmFz8cxb4GaD0vhYMBOap9HyX3f9T__kHym1_ZKm5ednm7p_gzr7jpzzu4OZFI8vk9COsBysELusQvLevjlTbq4NJSGzMlVam4R5JUjaG9xxWSKOpiKkxvqCmBmLNFXv"/>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="text-xl font-bold text-text-light dark:text-white group-hover:text-primary transition-colors">PlayStation 5</h3>
<p class="text-sm text-text-muted-light dark:text-text-muted-dark">Disc Edition + 1 Controller</p>
</div>
</div>
<div class="mt-6 flex items-center justify-between">
<div class="flex flex-col">
<span class="text-xs text-text-muted-light dark:text-text-muted-dark uppercase tracking-wider font-semibold">Cost</span>
<span class="text-2xl font-bold text-primary dark:text-primary">85,000 XP</span>
</div>
<button class="bg-gray-100 dark:bg-gray-800 text-text-light dark:text-white hover:bg-primary dark:hover:bg-primary hover:text-white px-5 py-2.5 rounded-lg text-sm font-bold transition-all">
Details
</button>
</div>
</div>
</div>
<div class="group relative bg-card-light dark:bg-card-dark rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-800 hover:border-pink-500/50 transition-all duration-300 shadow-lg hover:-translate-y-1">
<div class="h-64 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 flex items-center justify-center p-6 relative">
<div class="absolute bg-pink-500/20 w-32 h-32 blur-3xl rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 group-hover:bg-pink-500/40 transition-all duration-500"></div>
<img alt="Apple Watch Ultra" class="relative z-10 object-contain h-48 w-auto transform group-hover:scale-110 transition-transform duration-500 drop-shadow-2xl" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDul5OOO2cR0NYh-wtJAciDEA-hI0NQF3LJ00R9JjPx7dAjfSHB47Nf7W15FBOjulnAA_Jl_o6Fw0YMyReSMMnx3cvvz9PbXZwBj9WR19ZefW4R-AArhhlzW9UP0pRPt04vkpJZX8wQIHdCqCND8ERpFMUaxemioKewk8HSc3daLN8Sv44312J5VG6hlACZ7UKlv35jBisNNYqKyx0seQpb6mqHeJ1rZh5oMstPYHjmEiYwHx0HVCxmygOgxfaAEha-NqMfU84Q"/>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="text-xl font-bold text-text-light dark:text-white group-hover:text-primary transition-colors">Apple Watch Ultra</h3>
<p class="text-sm text-text-muted-light dark:text-text-muted-dark">Rugged Titanium Case</p>
</div>
</div>
<div class="mt-6 flex items-center justify-between">
<div class="flex flex-col">
<span class="text-xs text-text-muted-light dark:text-text-muted-dark uppercase tracking-wider font-semibold">Cost</span>
<span class="text-2xl font-bold text-primary dark:text-primary">60,000 XP</span>
</div>
<button class="bg-gray-100 dark:bg-gray-800 text-text-light dark:text-white hover:bg-primary dark:hover:bg-primary hover:text-white px-5 py-2.5 rounded-lg text-sm font-bold transition-all">
Details
</button>
</div>
</div>
</div>
</div>
</div>
<div class="mb-12">
<div class="flex items-center justify-between mb-8">
<h2 class="text-2xl font-bold text-text-light dark:text-white flex items-center gap-2">
<span class="material-icons text-green-400">monetization_on</span>
Instant Cash & Vouchers
</h2>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-gray-200 dark:border-gray-800 hover:border-primary transition-colors shadow-sm group">
<div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center text-green-600 dark:text-green-400 mb-4 group-hover:scale-110 transition-transform">
<span class="material-icons">currency_rupee</span>
</div>
<h3 class="text-lg font-bold text-text-light dark:text-white">₹500 Cash</h3>
<p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-4">Direct Bank Transfer</p>
<div class="flex items-center justify-between">
<span class="font-bold text-primary dark:text-primary">5,000 XP</span>
<button class="text-sm font-semibold text-text-light dark:text-white hover:text-primary dark:hover:text-primary underline">Redeem</button>
</div>
</div>
<div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-gray-200 dark:border-gray-800 hover:border-primary transition-colors shadow-sm group">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center text-blue-600 dark:text-blue-400 mb-4 group-hover:scale-110 transition-transform">
<span class="material-icons">shopping_bag</span>
</div>
<h3 class="text-lg font-bold text-text-light dark:text-white">Amazon Gift Card</h3>
<p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-4">Value: ₹1,000</p>
<div class="flex items-center justify-between">
<span class="font-bold text-primary dark:text-primary">9,500 XP</span>
<button class="text-sm font-semibold text-text-light dark:text-white hover:text-primary dark:hover:text-primary underline">Redeem</button>
</div>
</div>
<div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-gray-200 dark:border-gray-800 hover:border-primary transition-colors shadow-sm group">
<div class="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center text-red-600 dark:text-red-400 mb-4 group-hover:scale-110 transition-transform">
<span class="material-icons">movie</span>
</div>
<h3 class="text-lg font-bold text-text-light dark:text-white">Netflix Sub</h3>
<p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-4">1 Month Premium</p>
<div class="flex items-center justify-between">
<span class="font-bold text-primary dark:text-primary">6,000 XP</span>
<button class="text-sm font-semibold text-text-light dark:text-white hover:text-primary dark:hover:text-primary underline">Redeem</button>
</div>
</div>
<div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-gray-200 dark:border-gray-800 hover:border-primary transition-colors shadow-sm group">
<div class="w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center text-orange-600 dark:text-orange-400 mb-4 group-hover:scale-110 transition-transform">
<span class="material-icons">fastfood</span>
</div>
<h3 class="text-lg font-bold text-text-light dark:text-white">Swiggy Money</h3>
<p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-4">Value: ₹250</p>
<div class="flex items-center justify-between">
<span class="font-bold text-primary dark:text-primary">2,500 XP</span>
<button class="text-sm font-semibold text-text-light dark:text-white hover:text-primary dark:hover:text-primary underline">Redeem</button>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-[#111019] py-20 border-t border-gray-200 dark:border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-text-light dark:text-white mb-4">How to Claim Rewards</h2>
<p class="text-text-muted-light dark:text-text-muted-dark">Turn your trivia knowledge into tangibles in 3 easy steps.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 text-center relative">
<div class="hidden md:block absolute top-12 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-primary/30 to-transparent"></div>
<div class="relative z-10">
<div class="w-24 h-24 mx-auto bg-background-light dark:bg-card-dark rounded-full flex items-center justify-center border-4 border-white dark:border-background-dark shadow-xl mb-6">
<span class="text-4xl">🎮</span>
</div>
<h3 class="text-xl font-bold text-text-light dark:text-white mb-2">1. Play Quizzes</h3>
<p class="text-sm text-text-muted-light dark:text-text-muted-dark leading-relaxed">Join daily live quizzes and compete against thousands. Every correct answer earns you XP.</p>
</div>
<div class="relative z-10">
<div class="w-24 h-24 mx-auto bg-background-light dark:bg-card-dark rounded-full flex items-center justify-center border-4 border-white dark:border-background-dark shadow-xl mb-6">
<span class="text-4xl">📈</span>
</div>
<h3 class="text-xl font-bold text-text-light dark:text-white mb-2">2. Rank Up</h3>
<p class="text-sm text-text-muted-light dark:text-text-muted-dark leading-relaxed">Climb the leaderboards. Higher ranks get XP multipliers and exclusive unlock keys.</p>
</div>
<div class="relative z-10">
<div class="w-24 h-24 mx-auto bg-background-light dark:bg-card-dark rounded-full flex items-center justify-center border-4 border-white dark:border-background-dark shadow-xl mb-6">
<span class="text-4xl">🎁</span>
</div>
<h3 class="text-xl font-bold text-text-light dark:text-white mb-2">3. Redeem</h3>
<p class="text-sm text-text-muted-light dark:text-text-muted-dark leading-relaxed">Visit this marketplace, choose your prize, and we ship it to your doorstep!</p>
</div>
</div>
<div class="mt-16 text-center">
<div class="inline-block p-1 rounded-full bg-gradient-to-r from-primary via-purple-500 to-pink-500">
<a class="block px-10 py-4 bg-background-dark text-white rounded-full font-bold text-lg hover:bg-opacity-90 transition-all" href="#">
Start Earning XP Now
</a>
</div>
<p class="mt-4 text-xs text-text-muted-light dark:text-text-muted-dark">No credit card required for registration.</p>
</div>
</div>
</div>
<footer class="bg-white dark:bg-background-dark py-12 border-t border-gray-200 dark:border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2">
<span class="material-icons text-primary">sports_esports</span>
<span class="font-bold text-lg dark:text-white">QuizQuest © 2023</span>
</div>
<div class="flex gap-8 text-sm text-text-muted-light dark:text-text-muted-dark">
<a class="hover:text-primary dark:hover:text-white transition-colors" href="#">Privacy</a>
<a class="hover:text-primary dark:hover:text-white transition-colors" href="#">Terms</a>
<a class="hover:text-primary dark:hover:text-white transition-colors" href="#">Support</a>
</div>
</div>
</footer>
<script>
// Check local storage or system preference on load
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
</script>
</body></html>