<!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 - Quizzes Page Dark Mode</title>
<!-- Fonts -->
<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"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Tailwind Config -->
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"primary-hover": "#6b10c6",
"background-light": "#f7f6f8",
"background-dark": "#130e18", // Darker base
"surface-dark": "#1e1626", // Slightly lighter for cards
"surface-darker": "#1a1221",
"accent-gold": "#ffd700",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"],
"sans": ["Spline Sans", "sans-serif"],
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "1.5rem",
"xl": "2rem",
"2xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #130e18;
}
::-webkit-scrollbar-thumb {
background: #362348;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7f13ec;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display min-h-screen flex flex-col overflow-x-hidden selection:bg-primary selection:text-white">
<!-- Navbar -->
<header class="sticky top-0 z-50 w-full border-b border-white/5 bg-background-dark/80 backdrop-blur-xl">
<div class="px-6 md:px-10 py-4 flex items-center justify-between max-w-[1440px] mx-auto w-full">
<div class="flex items-center gap-8">
<a class="flex items-center gap-3 text-white group" href="#">
<div class="size-8 text-primary group-hover:scale-110 transition-transform duration-300">
<svg fill="none" 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" fill="currentColor"></path>
</svg>
</div>
<span class="text-xl font-bold tracking-tight">QuizQuest</span>
</a>
<nav class="hidden lg:flex items-center gap-6">
<a class="text-slate-300 hover:text-white font-medium transition-colors" href="#">Home</a>
<a class="text-white font-medium relative after:content-[''] after:absolute after:-bottom-1 after:left-0 after:w-full after:h-0.5 after:bg-primary after:rounded-full" href="#">Quizzes</a>
<a class="text-slate-300 hover:text-white font-medium transition-colors" href="#">Leaderboard</a>
<a class="text-slate-300 hover:text-white font-medium transition-colors" href="#">Winners</a>
</nav>
</div>
<div class="flex items-center gap-6">
<!-- Search Input -->
<div class="hidden md:flex items-center bg-surface-dark border border-white/10 rounded-full h-10 w-64 px-4 focus-within:border-primary/50 focus-within:ring-1 focus-within:ring-primary/50 transition-all">
<span class="material-symbols-outlined text-slate-400 text-[20px]">search</span>
<input class="bg-transparent border-none text-sm text-white placeholder-slate-400 focus:ring-0 w-full ml-2" placeholder="Find a quest..." type="text"/>
</div>
<!-- Auth Buttons -->
<div class="flex items-center gap-3">
<button class="hidden sm:flex h-10 px-5 items-center justify-center rounded-full bg-surface-dark hover:bg-white/10 text-white text-sm font-bold transition-colors">
Log In
</button>
<button class="h-10 px-5 flex items-center justify-center rounded-full bg-primary hover:bg-primary-hover text-white text-sm font-bold shadow-[0_0_15px_rgba(127,19,236,0.3)] hover:shadow-[0_0_20px_rgba(127,19,236,0.5)] transition-all">
Sign Up
</button>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow relative w-full flex justify-center">
<!-- Abstract Background Elements -->
<div class="absolute inset-0 z-0 overflow-hidden pointer-events-none">
<div class="absolute top-0 left-1/4 w-[500px] h-[500px] bg-primary/20 rounded-full blur-[120px] opacity-40 mix-blend-screen"></div>
<div class="absolute bottom-0 right-1/4 w-[600px] h-[600px] bg-blue-600/10 rounded-full blur-[120px] opacity-30 mix-blend-screen"></div>
<!-- Grid pattern overlay -->
<div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 brightness-150 contrast-150"></div>
</div>
<div class="relative z-10 w-full max-w-[1440px] px-4 md:px-10 py-8 flex flex-col gap-10">
<!-- Hero Banner -->
<div class="relative rounded-2xl overflow-hidden min-h-[400px] flex items-center px-8 md:px-16 py-12 group">
<!-- Hero Background Image -->
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105" data-alt="Retro computer setup with neon lights in a dark room" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA_fOpSvW-yjPOvr7-GDhlfS-hV_WqRYAQfHap2CMePrQQFuC9y08NuQT5dQMdhJnfNWbkNAZcqLNwD5sTJH-wSM6rHlXT1qI7BelS-sSc3Fp26JXJ3fc2FiaDuWnNRzD0YhdQy5PnvLS8e3D7OufJOBeP6IamOz03AhqcZBx_jHS0NSfLtH8Hf3s_cqM8MGddf31SbDSDJxgthHvS9KwdxHmPLT5f5snkOlyyZznac5DvkSz0yYWWdXVvnKROFd6OSjcxOefzt');"></div>
<div class="absolute inset-0 bg-gradient-to-r from-background-dark via-background-dark/80 to-transparent"></div>
<div class="relative max-w-2xl flex flex-col gap-6">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/20 border border-primary/30 w-fit backdrop-blur-sm">
<span class="material-symbols-outlined text-primary text-[18px]">bolt</span>
<span class="text-primary text-xs font-bold uppercase tracking-wide">Daily Challenges Live</span>
</div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-black leading-tight tracking-tight text-white drop-shadow-lg">
Conquer the Quizzes. <br/>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-[#ffd700] to-[#ffaa00]">Win the Treasure.</span>
</h1>
<p class="text-lg text-slate-300 max-w-xl leading-relaxed">
Join thousands of players competing for daily cash prizes. Prove your knowledge across 50+ categories and claim your glory on the leaderboard.
</p>
<div class="flex flex-wrap gap-4 pt-2">
<button class="h-12 px-8 rounded-full bg-primary hover:bg-primary-hover text-white font-bold text-base shadow-[0_4px_20px_rgba(127,19,236,0.4)] transition-all flex items-center gap-2">
Start Playing Now
<span class="material-symbols-outlined text-[20px]">arrow_forward</span>
</button>
<button class="h-12 px-8 rounded-full bg-white/10 hover:bg-white/20 backdrop-blur-md text-white font-bold text-base border border-white/10 transition-all flex items-center gap-2">
View Leaderboard
</button>
</div>
</div>
</div>
<!-- Categories Filter -->
<div class="flex flex-col gap-6">
<div class="flex items-center justify-between">
<h2 class="text-2xl font-bold text-white flex items-center gap-2">
<span class="material-symbols-outlined text-primary">category</span>
Browse Quests
</h2>
<div class="hidden sm:flex gap-2">
<button class="size-10 rounded-full bg-surface-dark border border-white/5 flex items-center justify-center text-slate-400 hover:text-white hover:bg-surface-darker transition-colors">
<span class="material-symbols-outlined">grid_view</span>
</button>
<button class="size-10 rounded-full bg-surface-dark border border-white/5 flex items-center justify-center text-slate-400 hover:text-white hover:bg-surface-darker transition-colors">
<span class="material-symbols-outlined">list</span>
</button>
</div>
</div>
<div class="flex gap-3 overflow-x-auto pb-4 scrollbar-hide">
<button class="flex h-10 shrink-0 items-center justify-center gap-2 rounded-full bg-white text-background-dark font-bold px-6 shadow-lg shadow-white/10">
All Quizzes
</button>
<button class="flex h-10 shrink-0 items-center justify-center gap-2 rounded-full bg-surface-dark hover:bg-surface-darker border border-white/10 text-slate-300 hover:text-white font-medium px-6 transition-all group">
<span class="material-symbols-outlined text-accent-gold text-[18px]">trophy</span>
Mega Jackpots
</button>
<button class="flex h-10 shrink-0 items-center justify-center gap-2 rounded-full bg-surface-dark hover:bg-surface-darker border border-white/10 text-slate-300 hover:text-white font-medium px-6 transition-all group">
<span class="material-symbols-outlined text-blue-400 text-[18px]">timer</span>
Daily Sprints
</button>
<button class="flex h-10 shrink-0 items-center justify-center gap-2 rounded-full bg-surface-dark hover:bg-surface-darker border border-white/10 text-slate-300 hover:text-white font-medium px-6 transition-all group">
<span class="material-symbols-outlined text-purple-400 text-[18px]">school</span>
Subject Master
</button>
<button class="flex h-10 shrink-0 items-center justify-center gap-2 rounded-full bg-surface-dark hover:bg-surface-darker border border-white/10 text-slate-300 hover:text-white font-medium px-6 transition-all group">
<span class="material-symbols-outlined text-green-400 text-[18px]">paid</span>
Free Entry
</button>
</div>
</div>
<!-- Mega Jackpots Section -->
<section class="flex flex-col gap-4">
<div class="flex items-end justify-between border-b border-white/5 pb-4">
<div>
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<span class="size-2 rounded-full bg-accent-gold shadow-[0_0_10px_#ffd700]"></span>
Mega Jackpots
</h3>
<p class="text-sm text-slate-400 mt-1">High stakes, massive rewards. Winner takes all.</p>
</div>
<a class="text-sm font-bold text-primary hover:text-primary-hover flex items-center gap-1 transition-colors" href="#">
View All <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Card 1 -->
<div class="group relative bg-surface-dark rounded-xl border border-white/5 hover:border-primary/50 overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_10px_40px_-10px_rgba(127,19,236,0.2)] flex flex-col">
<div class="absolute top-3 right-3 z-10 bg-black/60 backdrop-blur-sm px-2 py-1 rounded-lg text-xs font-bold text-white border border-white/10 flex items-center gap-1">
<span class="material-symbols-outlined text-red-500 text-[14px]">local_fire_department</span> Hot
</div>
<div class="h-40 bg-surface-darker w-full relative overflow-hidden">
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110" data-alt="Abstract purple geometric shapes" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA59d3zW9aRMBoDFaIXMuO630WgquWfVxx-Ea0zQqcyxCkSKoAMjlurmPRnDDOY6pcRDJAmbFXAVqMzt8eUHhiVpRqiFZrMwCHBsX4t4LItcLzIqRWYr-SuXDsRUtZLWV798r2zIS8zR6inV0nIu3wXqkdfJF7A-NkBRNQs4vrKJ5HLHKnOFyz7trSwf8YrCVXfmsgino7kYRYhbb2iXNkTy-hKrY29suOvNNF3MfWxK9apIlcvj2tv9aterbxkez7zQYXMsAPk');"></div>
<div class="absolute inset-0 bg-gradient-to-t from-surface-dark to-transparent"></div>
<div class="absolute bottom-3 left-4">
<div class="size-10 rounded-xl bg-primary/20 backdrop-blur-md border border-primary/30 flex items-center justify-center text-white shadow-lg">
<span class="material-symbols-outlined">psychology</span>
</div>
</div>
</div>
<div class="p-5 flex flex-col gap-4 flex-1">
<div>
<h4 class="text-lg font-bold text-white leading-tight group-hover:text-primary transition-colors">The Friday Big Brain</h4>
<div class="flex items-center gap-2 mt-2">
<span class="text-xs text-slate-400 bg-white/5 px-2 py-0.5 rounded-md">General Knowledge</span>
<span class="text-xs text-slate-400 bg-white/5 px-2 py-0.5 rounded-md">50 Qs</span>
</div>
</div>
<div class="mt-auto">
<div class="flex items-center justify-between mb-4">
<div class="flex flex-col">
<span class="text-xs text-slate-400 uppercase tracking-wider font-semibold">Prize Pool</span>
<span class="text-xl font-bold text-accent-gold drop-shadow-[0_0_8px_rgba(255,215,0,0.3)]">$5,000</span>
</div>
<div class="flex flex-col items-end">
<span class="text-xs text-slate-400 uppercase tracking-wider font-semibold">Entry</span>
<span class="text-base font-bold text-white">$10.00</span>
</div>
</div>
<button class="w-full h-10 rounded-lg bg-primary hover:bg-primary-hover text-white font-bold text-sm transition-all flex items-center justify-center gap-2 group-hover:shadow-[0_0_15px_rgba(127,19,236,0.4)]">
Join Quest
</button>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="group relative bg-surface-dark rounded-xl border border-white/5 hover:border-primary/50 overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_10px_40px_-10px_rgba(127,19,236,0.2)] flex flex-col">
<div class="h-40 bg-surface-darker w-full relative overflow-hidden">
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110" data-alt="Dark abstract hexagon pattern" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBjOzno3-KPetfYJfjwzLz0Ot97XRBZuujppeBebAPg8hjBYf_3c7tBNx5L0Qh9GxrIGH1Eci1l2gPgdZ04on1E8mEYA0J06vuW7dTWMTXfFv-tZyWlXbOB7Zlt2l5zi0nbor9NpzHy3iXy7M0A6MEi6tEd2Z2yyPf1eq827d4FpD6C4cgwy0_bePyH1md4tF61-GHmIeuOy-s57sLxL-qmgcGNs0WfG2z5R-NyNCVAaoxXO5DiugYmFhmPtmOfk3RUEwRyZqi6');"></div>
<div class="absolute inset-0 bg-gradient-to-t from-surface-dark to-transparent"></div>
<div class="absolute bottom-3 left-4">
<div class="size-10 rounded-xl bg-blue-500/20 backdrop-blur-md border border-blue-500/30 flex items-center justify-center text-blue-400 shadow-lg">
<span class="material-symbols-outlined">science</span>
</div>
</div>
</div>
<div class="p-5 flex flex-col gap-4 flex-1">
<div>
<h4 class="text-lg font-bold text-white leading-tight group-hover:text-primary transition-colors">Science Whiz Monthly</h4>
<div class="flex items-center gap-2 mt-2">
<span class="text-xs text-slate-400 bg-white/5 px-2 py-0.5 rounded-md">Physics & Bio</span>
<span class="text-xs text-slate-400 bg-white/5 px-2 py-0.5 rounded-md">30 Qs</span>
</div>
</div>
<div class="mt-auto">
<div class="flex items-center justify-between mb-4">
<div class="flex flex-col">
<span class="text-xs text-slate-400 uppercase tracking-wider font-semibold">Prize Pool</span>
<span class="text-xl font-bold text-accent-gold drop-shadow-[0_0_8px_rgba(255,215,0,0.3)]">$2,500</span>
</div>
<div class="flex flex-col items-end">
<span class="text-xs text-slate-400 uppercase tracking-wider font-semibold">Entry</span>
<span class="text-base font-bold text-white">$5.00</span>
</div>
</div>
<button class="w-full h-10 rounded-lg bg-surface-darker hover:bg-primary hover:text-white border border-white/10 hover:border-transparent text-white font-bold text-sm transition-all flex items-center justify-center gap-2">
Join Quest
</button>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="group relative bg-surface-dark rounded-xl border border-white/5 hover:border-primary/50 overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_10px_40px_-10px_rgba(127,19,236,0.2)] flex flex-col">
<div class="h-40 bg-surface-darker w-full relative overflow-hidden">
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110" data-alt="Matrix style digital rain code background" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuC6gx67q-pED55hYp6zQkPV2p33sb71HMBntm_hn1OMbViqxfJ7diUq_JkcGFBx1ch74pxDGIwLi2ZRk0a12eClYmMeECXKxA4zyEZiqO7YOtpxa7PCQc1HpQpVQU3a7nIywZxF32nyntC0VLox4B5AreYrKcWxqb72-5WWlIB2gaEIkiMNxpCkG_NF8Ya5FJ42E7Bu7U0OUd19HPRqac_BBpr8dBrjEJAfgg0skCE1SMhn091tqers4a_pOGu6unRW5a4qZmI6');"></div>
<div class="absolute inset-0 bg-gradient-to-t from-surface-dark to-transparent"></div>
<div class="absolute bottom-3 left-4">
<div class="size-10 rounded-xl bg-green-500/20 backdrop-blur-md border border-green-500/30 flex items-center justify-center text-green-400 shadow-lg">
<span class="material-symbols-outlined">terminal</span>
</div>
</div>
</div>
<div class="p-5 flex flex-col gap-4 flex-1">
<div>
<h4 class="text-lg font-bold text-white leading-tight group-hover:text-primary transition-colors">Tech Titan Challenge</h4>
<div class="flex items-center gap-2 mt-2">
<span class="text-xs text-slate-400 bg-white/5 px-2 py-0.5 rounded-md">Coding</span>
<span class="text-xs text-slate-400 bg-white/5 px-2 py-0.5 rounded-md">HARD</span>
</div>
</div>
<div class="mt-auto">
<div class="flex items-center justify-between mb-4">
<div class="flex flex-col">
<span class="text-xs text-slate-400 uppercase tracking-wider font-semibold">Prize Pool</span>
<span class="text-xl font-bold text-accent-gold drop-shadow-[0_0_8px_rgba(255,215,0,0.3)]">$10,000</span>
</div>
<div class="flex flex-col items-end">
<span class="text-xs text-slate-400 uppercase tracking-wider font-semibold">Entry</span>
<span class="text-base font-bold text-white">$25.00</span>
</div>
</div>
<button class="w-full h-10 rounded-lg bg-surface-darker hover:bg-primary hover:text-white border border-white/10 hover:border-transparent text-white font-bold text-sm transition-all flex items-center justify-center gap-2">
Join Quest
</button>
</div>
</div>
</div>
<!-- Card 4 -->
<div class="group relative bg-surface-dark rounded-xl border border-white/5 hover:border-primary/50 overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_10px_40px_-10px_rgba(127,19,236,0.2)] flex flex-col">
<div class="absolute top-3 right-3 z-10 bg-black/60 backdrop-blur-sm px-2 py-1 rounded-lg text-xs font-bold text-white border border-white/10 flex items-center gap-1">
<span class="material-symbols-outlined text-yellow-500 text-[14px]">star</span> Premium
</div>
<div class="h-40 bg-surface-darker w-full relative overflow-hidden">
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110" data-alt="Abstract golden bokeh lights" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBXC8jRlg3Z3kBN8MMKTfGQ52JjCt3yt8hp1BYlg5JOHhq_MYih4GXTGBa2U_OL9gk2upNrh2uK5zgYbm4s9exSlI0Jy88JkGMdxZqRmiIDUuenMiwOWMS_x0cEOugXYZmujuX9UvYB_xcFt_yZKzPGwrqWuFWmiv7zWrIiQt1eCDYSL6Nlcht7ajwyXCC3gKMc5-dYU6W5lOKK-9Sh8o0nVQjxdWDx1xcaC6nXxVjaO4L3uUs_cV97Yqti_JHhfvACp0dNmaSE');"></div>
<div class="absolute inset-0 bg-gradient-to-t from-surface-dark to-transparent"></div>
<div class="absolute bottom-3 left-4">
<div class="size-10 rounded-xl bg-purple-500/20 backdrop-blur-md border border-purple-500/30 flex items-center justify-center text-purple-400 shadow-lg">
<span class="material-symbols-outlined">diamond</span>
</div>
</div>
</div>
<div class="p-5 flex flex-col gap-4 flex-1">
<div>
<h4 class="text-lg font-bold text-white leading-tight group-hover:text-primary transition-colors">Monthly Mega Mind</h4>
<div class="flex items-center gap-2 mt-2">
<span class="text-xs text-slate-400 bg-white/5 px-2 py-0.5 rounded-md">Ultimate Mix</span>
<span class="text-xs text-slate-400 bg-white/5 px-2 py-0.5 rounded-md">100 Qs</span>
</div>
</div>
<div class="mt-auto">
<div class="flex items-center justify-between mb-4">
<div class="flex flex-col">
<span class="text-xs text-slate-400 uppercase tracking-wider font-semibold">Prize Pool</span>
<span class="text-xl font-bold text-accent-gold drop-shadow-[0_0_8px_rgba(255,215,0,0.3)]">$50,000</span>
</div>
<div class="flex flex-col items-end">
<span class="text-xs text-slate-400 uppercase tracking-wider font-semibold">Entry</span>
<span class="text-base font-bold text-white">$100.00</span>
</div>
</div>
<button class="w-full h-10 rounded-lg bg-surface-darker hover:bg-primary hover:text-white border border-white/10 hover:border-transparent text-white font-bold text-sm transition-all flex items-center justify-center gap-2">
Join Quest
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Daily Sprints Section (Grid with different layout) -->
<section class="flex flex-col gap-4 mt-8">
<div class="flex items-end justify-between border-b border-white/5 pb-4">
<div>
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<span class="size-2 rounded-full bg-blue-500 shadow-[0_0_10px_#3b82f6]"></span>
Daily Sprints
</h3>
<p class="text-sm text-slate-400 mt-1">Quick games, instant payouts. Ending soon.</p>
</div>
<div class="flex items-center gap-2 text-xs font-medium bg-red-500/10 text-red-400 px-3 py-1 rounded-full border border-red-500/20 animate-pulse">
<span class="size-1.5 rounded-full bg-red-500"></span>
Live Now
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Sprint Card 1 -->
<div class="flex items-center gap-4 bg-surface-dark p-4 rounded-xl border border-white/5 hover:border-primary/30 transition-all hover:bg-surface-darker">
<div class="size-16 rounded-lg bg-surface-darker border border-white/5 flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-primary text-[32px]">sports_esports</span>
</div>
<div class="flex flex-col flex-1 min-w-0">
<h4 class="text-white font-bold truncate">Gaming History 101</h4>
<div class="flex items-center gap-3 text-sm mt-1">
<span class="text-accent-gold font-bold">$500 Pool</span>
<span class="text-slate-500">•</span>
<span class="text-slate-400 flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]">timer</span> 2h 15m
</span>
</div>
</div>
<button class="size-10 rounded-full bg-primary/10 hover:bg-primary text-primary hover:text-white flex items-center justify-center transition-all shrink-0">
<span class="material-symbols-outlined text-[20px]">play_arrow</span>
</button>
</div>
<!-- Sprint Card 2 -->
<div class="flex items-center gap-4 bg-surface-dark p-4 rounded-xl border border-white/5 hover:border-primary/30 transition-all hover:bg-surface-darker">
<div class="size-16 rounded-lg bg-surface-darker border border-white/5 flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-green-400 text-[32px]">movie</span>
</div>
<div class="flex flex-col flex-1 min-w-0">
<h4 class="text-white font-bold truncate">Movie Quotes Blitz</h4>
<div class="flex items-center gap-3 text-sm mt-1">
<span class="text-accent-gold font-bold">$300 Pool</span>
<span class="text-slate-500">•</span>
<span class="text-slate-400 flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]">timer</span> 45m left
</span>
</div>
</div>
<button class="size-10 rounded-full bg-primary/10 hover:bg-primary text-primary hover:text-white flex items-center justify-center transition-all shrink-0">
<span class="material-symbols-outlined text-[20px]">play_arrow</span>
</button>
</div>
<!-- Sprint Card 3 -->
<div class="flex items-center gap-4 bg-surface-dark p-4 rounded-xl border border-white/5 hover:border-primary/30 transition-all hover:bg-surface-darker">
<div class="size-16 rounded-lg bg-surface-darker border border-white/5 flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-pink-400 text-[32px]">music_note</span>
</div>
<div class="flex flex-col flex-1 min-w-0">
<h4 class="text-white font-bold truncate">Top 40 Lyrics</h4>
<div class="flex items-center gap-3 text-sm mt-1">
<span class="text-accent-gold font-bold">$1,200 Pool</span>
<span class="text-slate-500">•</span>
<span class="text-slate-400 flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]">timer</span> 5h 30m
</span>
</div>
</div>
<button class="size-10 rounded-full bg-primary/10 hover:bg-primary text-primary hover:text-white flex items-center justify-center transition-all shrink-0">
<span class="material-symbols-outlined text-[20px]">play_arrow</span>
</button>
</div>
</div>
</section>
</div>
<!-- Sticky Side Leaderboard Widget (Desktop Only) -->
<div class="hidden 2xl:block fixed right-10 top-32 w-72 bg-surface-dark border border-white/5 rounded-2xl p-5 shadow-2xl z-20">
<h3 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
<span class="material-symbols-outlined text-accent-gold">emoji_events</span>
Top Winners
</h3>
<div class="flex flex-col gap-4">
<div class="flex items-center gap-3">
<div class="relative">
<div class="size-10 rounded-full bg-slate-700 bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBodSqN6J5vYaya_l31qE8VGocDPTQ8vDxcdp6rB20UaqUQbOraI-tna1gvHsG9r7n4lsps6sPSbVId2cvONOFfBqOjNwfVpcClK06xBfG2KeJOK2X7RFHGJgZSoHNoCx3MqV-HRTnX0UzW-jkKUj-ygIhCC4o_v_xg32pQJrdBhrwSdYlr0whK5bTAOUhmpF-pJOvbz29EHM45iWSX68oVox1yBGN9n2xwE4YbS_ryrml3HREYyR6bf1FLQUP0Ipv845hu9w22');"></div>
<div class="absolute -top-1 -right-1 size-4 bg-accent-gold rounded-full flex items-center justify-center text-[10px] font-bold text-black border border-surface-dark">1</div>
</div>
<div class="flex flex-col flex-1">
<span class="text-sm font-bold text-white">CyberKing99</span>
<span class="text-xs text-green-400">Won $12,500</span>
</div>
</div>
<div class="flex items-center gap-3">
<div class="relative">
<div class="size-10 rounded-full bg-slate-700 bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDObHZO5mUXwZmMKpgHaE-xBcevEjJWX3NLsTwbrNcpB1yUAZydkGpvRuT4DxC7D6tYWU587WK6hCkkwK403idcAkpQL535yiAXgVrja-Vol79QokJYxVO9XkLYnxLfvsh9bgr725Oxbwv7jc9tTUxo_sI-5gEM434QiClcX_J7bwu0zVP2qbpOE5wLN0FyrF_rA5x6Cj4TlN4YoPP9fTZCjvlwT32g7oMwLfHKTqIrvs-HJJHKcxZB7LE39DtC9AT6N1RqZ-Gx');"></div>
<div class="absolute -top-1 -right-1 size-4 bg-slate-300 rounded-full flex items-center justify-center text-[10px] font-bold text-black border border-surface-dark">2</div>
</div>
<div class="flex flex-col flex-1">
<span class="text-sm font-bold text-white">QuizMaster_X</span>
<span class="text-xs text-green-400">Won $8,200</span>
</div>
</div>
<div class="flex items-center gap-3">
<div class="relative">
<div class="size-10 rounded-full bg-slate-700 bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDG2fwDVrPlQixx7ohucfG_diUyljb2_Jto9meivetVaz6K23iZ3tc_UUCwnX9S7pqxRt4pND63J9e6Dnryj1z7sHKTCGFqHZzQQUCP9KDYn47yi0B3UzEsO6qtGVtjkLJzFWZsotQuUrbDYuUsy1fbIgM9V_TBAOo5KXTYjz59iqa_aTW_NUp3gAYU5NXVNDP56_DRg54IATeYF989tm63k2BmLgpB3APCYZ32RSjmnw7h9J4-9QhrC-81PdtoH9zGYXggiO5B');"></div>
<div class="absolute -top-1 -right-1 size-4 bg-orange-700 rounded-full flex items-center justify-center text-[10px] font-bold text-white border border-surface-dark">3</div>
</div>
<div class="flex flex-col flex-1">
<span class="text-sm font-bold text-white">TriviaGirl</span>
<span class="text-xs text-green-400">Won $5,100</span>
</div>
</div>
</div>
<div class="mt-6 pt-4 border-t border-white/5">
<button class="w-full py-2 rounded-lg bg-white/5 hover:bg-white/10 text-xs font-bold text-slate-300 transition-colors">
View Full Leaderboard
</button>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-surface-darker border-t border-white/5 py-12 px-6">
<div class="max-w-[1440px] mx-auto w-full">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
<div class="flex flex-col gap-4">
<div class="flex items-center gap-2 text-white">
<div class="size-6 text-primary">
<svg fill="none" 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" fill="currentColor"></path>
</svg>
</div>
<span class="text-xl font-bold">QuizQuest</span>
</div>
<p class="text-slate-400 text-sm">
The world's premier competitive quizzing platform. Test your skills, climb the ranks, and win real cash prizes.
</p>
</div>
<div>
<h4 class="text-white font-bold mb-4">Platform</h4>
<ul class="flex flex-col gap-2 text-sm text-slate-400">
<li><a class="hover:text-primary transition-colors" href="#">Browse Quizzes</a></li>
<li><a class="hover:text-primary transition-colors" href="#">How it Works</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Pricing & Entry Fees</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Winners Gallery</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Support</h4>
<ul class="flex flex-col gap-2 text-sm text-slate-400">
<li><a class="hover:text-primary transition-colors" href="#">Help Center</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Terms of Service</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Privacy Policy</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Contact Us</a></li>
</ul>
</div>
<div class="bg-white/5 rounded-xl p-5 border border-white/5">
<h4 class="text-white font-bold mb-2">Live Stats</h4>
<div class="flex flex-col gap-3">
<div class="flex justify-between items-center text-sm">
<span class="text-slate-400">Active Players</span>
<span class="text-white font-mono">14,203</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-slate-400">Total Won Today</span>
<span class="text-accent-gold font-mono font-bold">$42,500</span>
</div>
</div>
</div>
</div>
<div class="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-slate-500 text-xs">© 2023 QuizQuest Inc. All rights reserved.</p>
<div class="flex gap-4">
<a class="text-slate-400 hover:text-white transition-colors" href="#">
<svg aria-hidden="true" class="size-5" fill="currentColor" viewbox="0 0 24 24"><path clip-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" fill-rule="evenodd"></path></svg>
</a>
<a class="text-slate-400 hover:text-white transition-colors" href="#">
<svg aria-hidden="true" class="size-5" fill="currentColor" viewbox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path></svg>
</a>
</div>
</div>
</div>
</footer>
</body></html>