<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Participant Quiz Explorer Hub</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"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5b13ec",
"accent-gold": "#FFD700",
"accent-neon": "#b0fb5d",
"background-light": "#f6f6f8",
"background-dark": "#0B0A0F",
"surface-dark": "#16131D",
"surface-highlight": "#231F2E",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "1.5rem",
"xl": "2.5rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.card-hover:hover {
box-shadow: 0 0 25px rgba(91, 19, 236, 0.3);
transform: translateY(-4px);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 antialiased overflow-hidden">
<div class="flex h-screen w-full overflow-hidden">
<aside class="hidden w-72 flex-col justify-between border-r border-surface-highlight bg-surface-dark p-6 lg:flex z-30">
<div class="flex flex-col gap-8">
<div class="flex items-center gap-3 px-2">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white shadow-[0_0_15px_rgba(91,19,236,0.6)]">
<span class="material-symbols-outlined">sports_esports</span>
</div>
<div>
<h1 class="text-lg font-bold leading-tight text-white">QuizPortal</h1>
<p class="text-xs font-medium text-purple-400">Player Zone</p>
</div>
</div>
<div class="flex flex-col gap-6">
<div>
<h3 class="px-2 text-xs font-bold uppercase tracking-wider text-slate-500 mb-3">Difficulty</h3>
<div class="space-y-1">
<label class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-300 hover:bg-surface-highlight cursor-pointer group transition-colors">
<input class="h-4 w-4 rounded border-slate-600 bg-surface-highlight text-primary focus:ring-offset-surface-dark focus:ring-primary" type="checkbox"/>
<span class="text-sm font-medium group-hover:text-white">Beginner</span>
</label>
<label class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-300 hover:bg-surface-highlight cursor-pointer group transition-colors">
<input checked="" class="h-4 w-4 rounded border-slate-600 bg-surface-highlight text-primary focus:ring-offset-surface-dark focus:ring-primary" type="checkbox"/>
<span class="text-sm font-medium group-hover:text-white">Intermediate</span>
</label>
<label class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-300 hover:bg-surface-highlight cursor-pointer group transition-colors">
<input class="h-4 w-4 rounded border-slate-600 bg-surface-highlight text-primary focus:ring-offset-surface-dark focus:ring-primary" type="checkbox"/>
<span class="text-sm font-medium group-hover:text-white">Expert</span>
</label>
</div>
</div>
<div>
<h3 class="px-2 text-xs font-bold uppercase tracking-wider text-slate-500 mb-3">Reward Type</h3>
<div class="space-y-1">
<label class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-300 hover:bg-surface-highlight cursor-pointer group transition-colors">
<input class="h-4 w-4 border-slate-600 bg-surface-highlight text-primary focus:ring-offset-surface-dark focus:ring-primary" name="reward" type="radio"/>
<span class="text-sm font-medium group-hover:text-white">Cash Prizes</span>
</label>
<label class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-300 hover:bg-surface-highlight cursor-pointer group transition-colors">
<input class="h-4 w-4 border-slate-600 bg-surface-highlight text-primary focus:ring-offset-surface-dark focus:ring-primary" name="reward" type="radio"/>
<span class="text-sm font-medium group-hover:text-white">Gadgets</span>
</label>
<label class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-300 hover:bg-surface-highlight cursor-pointer group transition-colors">
<input class="h-4 w-4 border-slate-600 bg-surface-highlight text-primary focus:ring-offset-surface-dark focus:ring-primary" name="reward" type="radio"/>
<span class="text-sm font-medium group-hover:text-white">Gift Cards</span>
</label>
</div>
</div>
</div>
</div>
<div class="rounded-2xl bg-gradient-to-br from-surface-highlight to-surface-highlight/40 p-4 border border-white/5">
<div class="flex items-center gap-3 mb-3">
<div class="h-10 w-10 overflow-hidden rounded-full border-2 border-primary">
<img alt="User Profile" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzViL4lc0jczPZTmPDaDclgDRrxY-CoEIhF3LrBitMVCMLnouJJA--yIsKtsNPGtyE4LuMlV4PivDdBDmhCWNkAPTwNpqZHpr1VrBXiZOIQLMV0tqcbN5rlhT8PNPhuitdvbjjJ__KSKmqFbL6C2lgx2_ML9AOeX7zoh0HyaInm8BK6ktedzykYbw63mLopcHpNBH3DhZY7GvRiCGp3eF8zx4jWMXr9ac6huaPlWFvpnlBfg6kuKr1_BJAeuC6YEIKGKuRym9DR1lN"/>
</div>
<div>
<p class="text-sm font-bold text-white">Alex Gamer</p>
<p class="text-xs text-accent-gold font-medium">Lvl 12 • Gold</p>
</div>
</div>
<div class="w-full bg-background-dark rounded-full h-2 mb-1">
<div class="bg-gradient-to-r from-primary to-purple-400 h-2 rounded-full" style="width: 70%"></div>
</div>
<div class="flex justify-between text-[10px] text-slate-400 font-medium">
<span>XP: 8,400</span>
<span>Next: 10k</span>
</div>
</div>
</aside>
<main class="flex flex-1 flex-col overflow-y-auto bg-background-dark relative">
<div class="fixed top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
<div class="absolute top-[-10%] right-[-5%] w-[500px] h-[500px] bg-primary/20 rounded-full blur-[120px]"></div>
<div class="absolute bottom-[-10%] left-[20%] w-[400px] h-[400px] bg-purple-900/20 rounded-full blur-[100px]"></div>
</div>
<header class="sticky top-0 z-20 flex w-full items-center justify-between border-b border-white/5 bg-background-dark/80 px-6 py-4 backdrop-blur-md lg:px-10">
<div class="flex items-center gap-4 lg:hidden">
<button class="text-white">
<span class="material-symbols-outlined">menu</span>
</button>
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-white">
<span class="material-symbols-outlined text-sm">sports_esports</span>
</div>
</div>
<div class="flex bg-surface-highlight/50 p-1 rounded-full backdrop-blur-sm border border-white/5">
<button class="px-6 py-2 rounded-full text-sm font-bold bg-primary text-white shadow-lg shadow-primary/30 transition-all">
Live Now
<span class="ml-2 inline-flex items-center justify-center rounded-full bg-white text-primary text-[10px] h-4 w-4">3</span>
</button>
<button class="px-6 py-2 rounded-full text-sm font-medium text-slate-400 hover:text-white transition-colors">
Upcoming
</button>
<button class="px-6 py-2 rounded-full text-sm font-medium text-slate-400 hover:text-white transition-colors">
Completed
</button>
</div>
<div class="flex items-center gap-4">
<div class="hidden md:flex flex-col items-end mr-2">
<span class="text-xs text-slate-400">Balance</span>
<span class="text-sm font-bold text-white">₹2,450</span>
</div>
<button class="flex h-10 w-10 items-center justify-center rounded-full bg-surface-highlight text-white transition-colors hover:bg-surface-highlight/80 border border-white/5 relative">
<span class="absolute top-2 right-2 h-2 w-2 rounded-full bg-red-500"></span>
<span class="material-symbols-outlined text-[20px]">notifications</span>
</button>
<button class="flex h-10 w-10 items-center justify-center rounded-full bg-accent-gold text-surface-dark font-bold transition-transform hover:scale-105 shadow-[0_0_15px_rgba(255,215,0,0.3)]">
<span class="material-symbols-outlined">add</span>
</button>
</div>
</header>
<div class="flex flex-col gap-8 p-6 lg:p-10 relative z-10">
<section class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-[#2a1b5c] to-primary p-1 border border-white/10 shadow-2xl">
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')] bg-cover bg-center opacity-20 mix-blend-overlay"></div>
<div class="relative flex flex-col md:flex-row items-center justify-between gap-8 rounded-xl bg-surface-dark/40 backdrop-blur-sm p-8">
<div class="flex-1 space-y-4">
<div class="inline-flex items-center gap-2 rounded-full bg-red-500/20 border border-red-500/30 px-3 py-1 text-xs font-bold text-red-400 animate-pulse">
<span class="h-2 w-2 rounded-full bg-red-500"></span>
LIVE NOW
</div>
<h1 class="text-4xl font-black text-white leading-tight tracking-tight">Tech Titans: <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">Silicon Valley Edition</span></h1>
<p class="text-slate-300 max-w-lg">Test your knowledge about the biggest tech giants. Top the leaderboard in the next 15 mins to win the Grand Prize!</p>
<div class="flex flex-wrap gap-4 pt-2">
<div class="flex items-center gap-2 rounded-lg bg-surface-dark/80 px-4 py-2 border border-white/5">
<span class="material-symbols-outlined text-accent-gold">emoji_events</span>
<div class="flex flex-col">
<span class="text-[10px] text-slate-400 uppercase font-bold">Prize Pool</span>
<span class="text-sm font-bold text-white">₹5 Lakhs</span>
</div>
</div>
<div class="flex items-center gap-2 rounded-lg bg-surface-dark/80 px-4 py-2 border border-white/5">
<span class="material-symbols-outlined text-green-400">payments</span>
<div class="flex flex-col">
<span class="text-[10px] text-slate-400 uppercase font-bold">Entry Fee</span>
<span class="text-sm font-bold text-white">₹99</span>
</div>
</div>
</div>
</div>
<div class="flex flex-col items-center gap-3">
<div class="text-center">
<p class="text-xs text-slate-400 uppercase tracking-widest mb-1">Ending In</p>
<div class="font-mono text-3xl font-bold text-white tabular-nums tracking-widest">
00:14:59
</div>
</div>
<button class="w-full md:w-auto px-10 py-4 bg-white text-primary font-bold rounded-full shadow-[0_0_20px_rgba(255,255,255,0.3)] hover:scale-105 transition-transform flex items-center gap-2 justify-center">
<span class="material-symbols-outlined">play_arrow</span>
Join Quest
</button>
</div>
</div>
</section>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
<div class="card-hover group relative flex flex-col rounded-2xl bg-surface-highlight border border-white/5 overflow-hidden transition-all duration-300">
<div class="h-48 w-full relative overflow-hidden">
<div class="absolute top-3 left-3 z-10 rounded-full bg-black/60 px-3 py-1 text-xs font-bold text-white backdrop-blur-md border border-white/10">
Music Trivia
</div>
<div class="absolute top-3 right-3 z-10 flex items-center gap-1 rounded-full bg-surface-dark/80 px-2 py-1 text-xs font-bold text-accent-gold backdrop-blur-md border border-white/10">
<span class="material-symbols-outlined text-[14px]">star</span>
Expert
</div>
<img alt="Music" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCtk8QgMOIEklaKpifvSuzyh3zyRaJrygA-LEN4lVrfr6M1eKIxR0SvQM16F-hMWwptcHJIgkJh58kDAHS22AYc9v9rC2-y6aKxs9NRDJ_P3wKA8PpT7bAHAlaz5C4cVRDDzVqWZYjbQIhLrXO3G4wUFmAejaKG7S0iXAJaLIUT3brLeKJGgqo15F1RXZ-fN2mgqgwGMdkBbB7EgO_SmXTx0pwY_uVCKPNdvSEW-Wxep7I89w1pgZupl5fkOvY3-uxccVOUIjMyJYLF"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface-highlight to-transparent"></div>
</div>
<div class="flex flex-1 flex-col p-5">
<div class="flex justify-between items-start mb-2">
<h3 class="text-xl font-bold text-white group-hover:text-primary transition-colors">90s Pop Icons</h3>
<div class="flex -space-x-2">
<img alt="" class="inline-block h-6 w-6 rounded-full ring-2 ring-surface-highlight object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAspyNd1K0WlTL9T2hBBlxZ_V1PLtG9Bl1gn7jESEVPOzg5iAZZR9_tBf2nY89WyNBbYoqNnr7wgL97jmY0CwSmQxIRyitYqI13_YqsHvv3-cVzAXJbZTpJ7YG9VH5jtMJDh0kzmqdbqJDJvACnpl2qDhQiNwaaeuyCuf6GAJjQB109IkdWrh3c_XcfSrD4XHb5FWGPFhWqIV2TCJxFd1g_8KsisFsTd4S55IyvuQWMSPv42uFB7B3eH8BvDB71HoZYLy23kFifLdWl"/>
<img alt="" class="inline-block h-6 w-6 rounded-full ring-2 ring-surface-highlight object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6RuLCmWb95hgO5Is3hiMS0_FVI_JLOq3mJAUXYg7uKBbIPBTmaoF9WxMBSqqQt1cHoRoJZvrY_BVIZIMURAhdyK3rtci_Be7NXoI67-fYV-BXCAZbz8OChqnwnixiAWA6hhV9SaY_wiFaU-hEmkJ5Vrk7ve6y2qCC-ldXdD66bX0P0EMbeTgrg1rHVDexU_orguvgpPp2saemcwl9E3GDtoVAskruFuVhKbnSbqsG1soXQW6rubBXx5qEJx9b1NXaOJA9AvrF3voZ"/>
<img alt="" class="inline-block h-6 w-6 rounded-full ring-2 ring-surface-highlight object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB4BvJeSkFEj5nLJuhlyXRzb7wTEAaLOnCtRiqE94WD36FRVEKBCDFLyVWOIPVSt3Ev85PNh-Y8jNk-6RgPQjLsE4QFzz0744_biTKt5smk1tSDtuhHxj9OJJqeEaJAn_Pxv5de_ipngAatw1o89PbZqS3p-raYQi4mzkZp1ubYCALYdTl1MrZ5o7wHUuujeOzm_dSnAGJ6zNJV-YUoox2G7THWRLAEsN49znJscTyiWCbUAJLt0KpeneJvqebNPT57eYO55h38JhJX"/>
<div class="flex h-6 w-6 items-center justify-center rounded-full bg-surface-dark text-[8px] font-bold text-white ring-2 ring-surface-highlight">+42</div>
</div>
</div>
<p class="text-sm text-slate-400 mb-4 line-clamp-2">Think you know Britney from Christina? Prove your 90s knowledge.</p>
<div class="mt-auto flex items-center justify-between border-t border-white/5 pt-4">
<div>
<p class="text-[10px] text-slate-500 uppercase font-bold">Prize Pool</p>
<p class="text-lg font-bold text-accent-gold">₹50,000</p>
</div>
<button class="rounded-full bg-primary px-6 py-2 text-sm font-bold text-white transition-colors hover:bg-primary/90 hover:shadow-[0_0_15px_rgba(91,19,236,0.4)]">
Play
<span class="text-xs font-normal opacity-80 ml-1">(₹49)</span>
</button>
</div>
</div>
</div>
<div class="card-hover group relative flex flex-col rounded-2xl bg-surface-highlight border border-white/5 overflow-hidden transition-all duration-300">
<div class="h-48 w-full relative overflow-hidden">
<div class="absolute top-3 left-3 z-10 rounded-full bg-black/60 px-3 py-1 text-xs font-bold text-white backdrop-blur-md border border-white/10">
Geography
</div>
<div class="absolute top-3 right-3 z-10 flex items-center gap-1 rounded-full bg-surface-dark/80 px-2 py-1 text-xs font-bold text-green-400 backdrop-blur-md border border-white/10">
<span class="material-symbols-outlined text-[14px]">eco</span>
Beginner
</div>
<img alt="Geography" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBeMs0mqeTo1E4fC7DXXTFfNAQKuUc2qM0uaBuOOhfHsj-0yJU5azjcnPSHrtWCpph0uClapucMJoWnWzonMl36TOhlE7BjIN9hB2wNLLjmqkzJOTaDkqKooFCcXWVYV-dM6DeSMOivkAMFrF9BKnAlel3NBU_Rq5A2cYY651SV6lGyWYG4OVU78FAFmJPrbMKxqfalQoFuwiN3b6JNJ6ISMtHbiSgJVIUUGx9Wh_hIB9Xs2E5gxtu0CC43Ne_dP8DlxPZsq6QzpBuE"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface-highlight to-transparent"></div>
</div>
<div class="flex flex-1 flex-col p-5">
<div class="flex justify-between items-start mb-2">
<h3 class="text-xl font-bold text-white group-hover:text-primary transition-colors">World Capitals</h3>
<div class="flex -space-x-2">
<img alt="" class="inline-block h-6 w-6 rounded-full ring-2 ring-surface-highlight object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCRgALt99ALcnM5iBoXJ8j6gF3yYDTVxb91gQ-0mJ4crIuGJHBbI_nWB9L1Y__1vaI2poB4uEa82j3Wxj-nYdNZA8_z2AttOU_fpOnOAPvKd9zgsZP-zf5gmihsl33FqzzSLDBuui0UzGkNHodXn-oGJezBwFDUBadcsJ4wxjYm6aeUNbZvTTZK0BEIWy4PTZ-uJe3r8EuT-xNhmV6WFnf5uP5xnO6ReliaFKywrvgZcayQsR5JI-S9gc2k3cJskb8kUqgdxWu5XrD9"/>
<div class="flex h-6 w-6 items-center justify-center rounded-full bg-surface-dark text-[8px] font-bold text-white ring-2 ring-surface-highlight">+128</div>
</div>
</div>
<p class="text-sm text-slate-400 mb-4 line-clamp-2">A quick sprint around the globe. Identify capitals from 20 random countries.</p>
<div class="mt-auto flex items-center justify-between border-t border-white/5 pt-4">
<div>
<p class="text-[10px] text-slate-500 uppercase font-bold">Prize Pool</p>
<p class="text-lg font-bold text-slate-200">Bonus XP</p>
</div>
<button class="rounded-full bg-gradient-to-r from-emerald-500 to-teal-500 px-6 py-2 text-sm font-bold text-white transition-all hover:shadow-[0_0_15px_rgba(16,185,129,0.4)]">
Free Play
</button>
</div>
</div>
</div>
<div class="card-hover group relative flex flex-col rounded-2xl bg-surface-highlight border border-white/5 overflow-hidden transition-all duration-300">
<div class="h-48 w-full relative overflow-hidden">
<div class="absolute top-3 left-3 z-10 rounded-full bg-black/60 px-3 py-1 text-xs font-bold text-white backdrop-blur-md border border-white/10">
Cinema
</div>
<div class="absolute top-3 right-3 z-10 flex items-center gap-1 rounded-full bg-surface-dark/80 px-2 py-1 text-xs font-bold text-blue-400 backdrop-blur-md border border-white/10">
<span class="material-symbols-outlined text-[14px]">change_history</span>
Medium
</div>
<img alt="Cinema" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBhbcRRC4X_AcFH60H1DxgZW7OCOKFj6olYzfaNH8v8JSdukc0uN0QD8fqsNpsnK3yhxarwhxf6JYCZGwuo8PfavBkAfovJ3xe2HXCcQlTLYBav6EG8TxkfUzxxAdc_QG24XfqFEnj_9NbO7zuMevjX_9eDvhJkA_HwPPCXG4TshrUPv_8uMc26BocPmdmUfnY0Wpf53awjXKmvZ1M-56B8gdHmLpOPBiV0Ui0CJzdJTz_vdNDYHtS_FgYfOuopNwnR1rocbbwn8S9z"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface-highlight to-transparent"></div>
</div>
<div class="flex flex-1 flex-col p-5">
<div class="flex justify-between items-start mb-2">
<h3 class="text-xl font-bold text-white group-hover:text-primary transition-colors">Marvel Universe</h3>
<div class="flex -space-x-2">
<img alt="" class="inline-block h-6 w-6 rounded-full ring-2 ring-surface-highlight object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAGICbDtuAOyPXGcTlkrOYqYvjPcy4J2GVnFdpILTxS49ufE8g3c5FzYTNUfDbebG7yC2vohf7lkCq_6aw60O1qQV1VJYkJtU2qiXmTqekUZFq5NmtiIohRJ0Ach1bWouse2aPLTwwvX7DtavBnfkw9FfkuWJraxX7XsUIAydE7gQoCM6dsZQNcXzeK6flzwZv2cuIJBBhuybtnpAC2rs2QNWeUBqyO_9nkfDddtjSLhnRy3giJ80TL8dXr7rhdZu24gi4ZRPJqSPzo"/>
<img alt="" class="inline-block h-6 w-6 rounded-full ring-2 ring-surface-highlight object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAspyNd1K0WlTL9T2hBBlxZ_V1PLtG9Bl1gn7jESEVPOzg5iAZZR9_tBf2nY89WyNBbYoqNnr7wgL97jmY0CwSmQxIRyitYqI13_YqsHvv3-cVzAXJbZTpJ7YG9VH5jtMJDh0kzmqdbqJDJvACnpl2qDhQiNwaaeuyCuf6GAJjQB109IkdWrh3c_XcfSrD4XHb5FWGPFhWqIV2TCJxFd1g_8KsisFsTd4S55IyvuQWMSPv42uFB7B3eH8BvDB71HoZYLy23kFifLdWl"/>
<div class="flex h-6 w-6 items-center justify-center rounded-full bg-surface-dark text-[8px] font-bold text-white ring-2 ring-surface-highlight">+8k</div>
</div>
</div>
<p class="text-sm text-slate-400 mb-4 line-clamp-2">From Iron Man to Endgame. The ultimate MCU trivia challenge.</p>
<div class="mt-auto flex items-center justify-between border-t border-white/5 pt-4">
<div>
<p class="text-[10px] text-slate-500 uppercase font-bold">Prize Pool</p>
<p class="text-lg font-bold text-accent-gold">₹2 Lakhs</p>
</div>
<button class="rounded-full bg-surface-dark border border-slate-600 px-6 py-2 text-sm font-bold text-white transition-colors hover:bg-white hover:text-black">
Register
<span class="text-xs font-normal opacity-70 ml-1">(Starts 8PM)</span>
</button>
</div>
</div>
</div>
<div class="card-hover group relative flex flex-col rounded-2xl bg-surface-highlight border border-white/5 overflow-hidden transition-all duration-300">
<div class="h-48 w-full relative overflow-hidden">
<div class="absolute top-3 left-3 z-10 rounded-full bg-black/60 px-3 py-1 text-xs font-bold text-white backdrop-blur-md border border-white/10">
History
</div>
<div class="absolute top-3 right-3 z-10 flex items-center gap-1 rounded-full bg-surface-dark/80 px-2 py-1 text-xs font-bold text-accent-gold backdrop-blur-md border border-white/10">
<span class="material-symbols-outlined text-[14px]">star</span>
Expert
</div>
<img alt="History" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAHmK863-UkFv5ruBqrVG5JD-eNCFHxLx9420JgAXpQdxcLj3vc2_KfSbvALWSTWpxQcRq4ZgJkGWfbCPzW4JeZ93MEgYstMrRalhLvFU7QYfJ66FTkXHiwmsHv6WE3juy2vye5sfkQmssd3xnDg-EkL2gwNZyjLSjgBEr_liaa5yOFi_03irmtBgmmOrueI21NvJKcdxBPKj6IBJLADusB6TYdxNiAmXCEwN9JLtCAUdgV2HvMimT1k8mzh_Rk2ZMXvvuKFlrRn8XD"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface-highlight to-transparent"></div>
</div>
<div class="flex flex-1 flex-col p-5">
<div class="flex justify-between items-start mb-2">
<h3 class="text-xl font-bold text-white group-hover:text-primary transition-colors">Ancient Empires</h3>
<div class="flex -space-x-2">
<img alt="" class="inline-block h-6 w-6 rounded-full ring-2 ring-surface-highlight object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6RuLCmWb95hgO5Is3hiMS0_FVI_JLOq3mJAUXYg7uKBbIPBTmaoF9WxMBSqqQt1cHoRoJZvrY_BVIZIMURAhdyK3rtci_Be7NXoI67-fYV-BXCAZbz8OChqnwnixiAWA6hhV9SaY_wiFaU-hEmkJ5Vrk7ve6y2qCC-ldXdD66bX0P0EMbeTgrg1rHVDexU_orguvgpPp2saemcwl9E3GDtoVAskruFuVhKbnSbqsG1soXQW6rubBXx5qEJx9b1NXaOJA9AvrF3voZ"/>
<div class="flex h-6 w-6 items-center justify-center rounded-full bg-surface-dark text-[8px] font-bold text-white ring-2 ring-surface-highlight">+15</div>
</div>
</div>
<p class="text-sm text-slate-400 mb-4 line-clamp-2">Rome, Egypt, Greece. Test your knowledge of the ancient world.</p>
<div class="mt-auto flex items-center justify-between border-t border-white/5 pt-4">
<div>
<p class="text-[10px] text-slate-500 uppercase font-bold">Prize Pool</p>
<p class="text-lg font-bold text-accent-gold">₹75,000</p>
</div>
<button class="rounded-full bg-primary px-6 py-2 text-sm font-bold text-white transition-colors hover:bg-primary/90 hover:shadow-[0_0_15px_rgba(91,19,236,0.4)]">
Play
<span class="text-xs font-normal opacity-80 ml-1">(₹99)</span>
</button>
</div>
</div>
</div>
<div class="card-hover group relative flex flex-col rounded-2xl bg-surface-highlight border border-white/5 overflow-hidden transition-all duration-300">
<div class="h-48 w-full relative overflow-hidden">
<div class="absolute top-3 left-3 z-10 rounded-full bg-black/60 px-3 py-1 text-xs font-bold text-white backdrop-blur-md border border-white/10">
Sports
</div>
<div class="absolute top-3 right-3 z-10 flex items-center gap-1 rounded-full bg-surface-dark/80 px-2 py-1 text-xs font-bold text-blue-400 backdrop-blur-md border border-white/10">
<span class="material-symbols-outlined text-[14px]">change_history</span>
Medium
</div>
<img alt="Sports" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBEQsOAoLEwRqMKsZBWv3_AnBOgBzVgghMVlqoQ9nvDRMkct9b5194CqCUfrFPAy9oezLN3xal38i4qL9MfgSOH0lrHuqna5mnpw_3h7CykOJFkGi6x2UWpfYpQQrc5NojjALgRZkL5NpBEeXhKS4JRspV2PKipisDX9czB4K-Yg4myynUcwJ5xWyfZdFdYukdOwb8w6X7iPN4lxcNCcpglBxgjlWqKp9OeT9vXFuJcgL5vh4w6bwSwjZrMqOBNbAlslvQQ-zpEOr1L"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface-highlight to-transparent"></div>
</div>
<div class="flex flex-1 flex-col p-5">
<div class="flex justify-between items-start mb-2">
<h3 class="text-xl font-bold text-white group-hover:text-primary transition-colors">Premier League 23/24</h3>
<div class="flex -space-x-2">
<img alt="" class="inline-block h-6 w-6 rounded-full ring-2 ring-surface-highlight object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB4BvJeSkFEj5nLJuhlyXRzb7wTEAaLOnCtRiqE94WD36FRVEKBCDFLyVWOIPVSt3Ev85PNh-Y8jNk-6RgPQjLsE4QFzz0744_biTKt5smk1tSDtuhHxj9OJJqeEaJAn_Pxv5de_ipngAatw1o89PbZqS3p-raYQi4mzkZp1ubYCALYdTl1MrZ5o7wHUuujeOzm_dSnAGJ6zNJV-YUoox2G7THWRLAEsN49znJscTyiWCbUAJLt0KpeneJvqebNPT57eYO55h38JhJX"/>
<img alt="" class="inline-block h-6 w-6 rounded-full ring-2 ring-surface-highlight object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAGICbDtuAOyPXGcTlkrOYqYvjPcy4J2GVnFdpILTxS49ufE8g3c5FzYTNUfDbebG7yC2vohf7lkCq_6aw60O1qQV1VJYkJtU2qiXmTqekUZFq5NmtiIohRJ0Ach1bWouse2aPLTwwvX7DtavBnfkw9FfkuWJraxX7XsUIAydE7gQoCM6dsZQNcXzeK6flzwZv2cuIJBBhuybtnpAC2rs2QNWeUBqyO_9nkfDddtjSLhnRy3giJ80TL8dXr7rhdZu24gi4ZRPJqSPzo"/>
<div class="flex h-6 w-6 items-center justify-center rounded-full bg-surface-dark text-[8px] font-bold text-white ring-2 ring-surface-highlight">+203</div>
</div>
</div>
<p class="text-sm text-slate-400 mb-4 line-clamp-2">Goals, assists, and clean sheets. Do you know the stats?</p>
<div class="mt-auto flex items-center justify-between border-t border-white/5 pt-4">
<div>
<p class="text-[10px] text-slate-500 uppercase font-bold">Prize Pool</p>
<p class="text-lg font-bold text-accent-gold">₹1 Lakh</p>
</div>
<button class="rounded-full bg-primary px-6 py-2 text-sm font-bold text-white transition-colors hover:bg-primary/90 hover:shadow-[0_0_15px_rgba(91,19,236,0.4)]">
Play
<span class="text-xs font-normal opacity-80 ml-1">(₹149)</span>
</button>
</div>
</div>
</div>
<div class="card-hover group relative flex flex-col rounded-2xl bg-surface-highlight border border-white/5 overflow-hidden transition-all duration-300">
<div class="h-48 w-full relative overflow-hidden">
<div class="absolute top-3 left-3 z-10 rounded-full bg-black/60 px-3 py-1 text-xs font-bold text-white backdrop-blur-md border border-white/10">
Science
</div>
<div class="absolute top-3 right-3 z-10 flex items-center gap-1 rounded-full bg-surface-dark/80 px-2 py-1 text-xs font-bold text-green-400 backdrop-blur-md border border-white/10">
<span class="material-symbols-outlined text-[14px]">eco</span>
Beginner
</div>
<img alt="Science" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAZDwUxlkdSjXSS0-613TRWSdDF580And_pVH0DuiEdYyGUwdeiPTBye38aOZT_WyPJc2icUPWGhO3aj3Fvu9ToIsEMV4lDKt-BmrDDoVfSEUpckcx2dFf1LogSuRpXW_BTF1oT1WfvLse_g6Sh_W_NOUyZG5h6_kTmLFBIbZUCiCqsn1It1y79ZWpyeWjn7NF3AnpOngjxp8Rqrztr5-PVpIY19LIZUVNYjaCWVfcUYOlcAqTLAZZw3TlrZ8PXCiKVzekpMlkp31Sf"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface-highlight to-transparent"></div>
</div>
<div class="flex flex-1 flex-col p-5">
<div class="flex justify-between items-start mb-2">
<h3 class="text-xl font-bold text-white group-hover:text-primary transition-colors">Space Exploration</h3>
<div class="flex -space-x-2">
<img alt="" class="inline-block h-6 w-6 rounded-full ring-2 ring-surface-highlight object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzViL4lc0jczPZTmPDaDclgDRrxY-CoEIhF3LrBitMVCMLnouJJA--yIsKtsNPGtyE4LuMlV4PivDdBDmhCWNkAPTwNpqZHpr1VrBXiZOIQLMV0tqcbN5rlhT8PNPhuitdvbjjJ__KSKmqFbL6C2lgx2_ML9AOeX7zoh0HyaInm8BK6ktedzykYbw63mLopcHpNBH3DhZY7GvRiCGp3eF8zx4jWMXr9ac6huaPlWFvpnlBfg6kuKr1_BJAeuC6YEIKGKuRym9DR1lN"/>
<div class="flex h-6 w-6 items-center justify-center rounded-full bg-surface-dark text-[8px] font-bold text-white ring-2 ring-surface-highlight">+85</div>
</div>
</div>
<p class="text-sm text-slate-400 mb-4 line-clamp-2">Planets, stars, and galaxies. A journey through the cosmos.</p>
<div class="mt-auto flex items-center justify-between border-t border-white/5 pt-4">
<div>
<p class="text-[10px] text-slate-500 uppercase font-bold">Prize Pool</p>
<p class="text-lg font-bold text-slate-200">Practice</p>
</div>
<button class="rounded-full bg-gradient-to-r from-emerald-500 to-teal-500 px-6 py-2 text-sm font-bold text-white transition-all hover:shadow-[0_0_15px_rgba(16,185,129,0.4)]">
Free Play
</button>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body></html>