<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Public Quizzes</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 vibrant purple similar to the screenshots
"primary-hover": "#5B21B6",
"accent": "#F59E0B", // Gold/Yellow for prizes
"background-light": "#F3F4F6",
"background-dark": "#0F0B1E", // Deep dark purple/black background
"surface-light": "#FFFFFF",
"surface-dark": "#1C1635", // Slightly lighter dark for cards
"surface-glass-dark": "rgba(28, 22, 53, 0.7)",
"text-light": "#1F2937",
"text-dark": "#E5E7EB",
},
fontFamily: {
display: ["Inter", "sans-serif"],
sans: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.75rem",
},
},
},
};
</script>
<style>.glass-panel {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #4B5563;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #6B7280;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark font-sans transition-colors duration-300">
<nav class="sticky top-0 z-50 w-full border-b border-gray-200 dark:border-white/10 bg-white/80 dark:bg-background-dark/80 glass-panel">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<div class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
<div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white">
<span class="material-icons text-xl">sports_esports</span>
</div>
<span class="font-bold text-xl tracking-tight">QuizQuest</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Home</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Prizes</a>
<a class="text-sm font-medium text-primary" href="#">Quizzes</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Leaderboard</a>
</div>
<div class="hidden md:flex items-center space-x-4">
<button class="text-sm font-medium hover:text-primary transition-colors">Login</button>
<button class="bg-primary hover:bg-primary-hover text-white px-5 py-2.5 rounded-full text-sm font-medium transition-all shadow-lg shadow-primary/30">
Join Now
</button>
<button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-white/10 transition-colors" onclick="document.documentElement.classList.toggle('dark')">
<span class="material-icons text-xl">brightness_4</span>
</button>
</div>
<div class="md:hidden flex items-center">
<button class="text-gray-500 hover:text-primary">
<span class="material-icons">menu</span>
</button>
</div>
</div>
</div>
</nav>
<div class="relative overflow-hidden">
<div class="absolute top-0 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-[100px] -z-10 animate-pulse"></div>
<div class="absolute bottom-0 right-1/4 w-80 h-80 bg-accent/10 rounded-full blur-[80px] -z-10"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 text-center">
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
<span class="block">Prove Your Skills.</span>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-400">Claim Your Fortune.</span>
</h1>
<p class="mt-4 max-w-2xl mx-auto text-lg md:text-xl text-gray-500 dark:text-gray-400">
Register to start playing in daily tournaments. Compete with thousands of players in real-time and win massive cash prizes.
</p>
<div class="mt-10 flex justify-center gap-4">
<button class="bg-primary hover:bg-primary-hover text-white px-8 py-4 rounded-full text-lg font-bold transition-all shadow-xl shadow-primary/40 flex items-center gap-2 transform hover:-translate-y-1">
Register to Start Playing
<span class="material-icons">arrow_forward</span>
</button>
<button class="bg-white dark:bg-white/10 hover:bg-gray-50 dark:hover:bg-white/20 text-text-light dark:text-white border border-gray-200 dark:border-white/10 px-8 py-4 rounded-full text-lg font-medium transition-all backdrop-blur-sm">
View Demo
</button>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
<div class="flex flex-col md:flex-row justify-between items-center gap-4 p-2">
<div class="flex gap-2 overflow-x-auto pb-2 md:pb-0 w-full md:w-auto no-scrollbar">
<button class="whitespace-nowrap px-4 py-2 bg-primary text-white rounded-full text-sm font-medium shadow-md shadow-primary/20">
All Quizzes
</button>
<button class="whitespace-nowrap px-4 py-2 bg-white dark:bg-surface-dark hover:bg-gray-50 dark:hover:bg-white/10 border border-gray-200 dark:border-white/10 rounded-full text-sm font-medium transition-colors">
Tech & Coding
</button>
<button class="whitespace-nowrap px-4 py-2 bg-white dark:bg-surface-dark hover:bg-gray-50 dark:hover:bg-white/10 border border-gray-200 dark:border-white/10 rounded-full text-sm font-medium transition-colors">
Gaming
</button>
<button class="whitespace-nowrap px-4 py-2 bg-white dark:bg-surface-dark hover:bg-gray-50 dark:hover:bg-white/10 border border-gray-200 dark:border-white/10 rounded-full text-sm font-medium transition-colors">
History
</button>
<button class="whitespace-nowrap px-4 py-2 bg-white dark:bg-surface-dark hover:bg-gray-50 dark:hover:bg-white/10 border border-gray-200 dark:border-white/10 rounded-full text-sm font-medium transition-colors">
Pop Culture
</button>
</div>
<div class="relative w-full md:w-64">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="material-icons text-gray-400 text-lg">search</span>
</span>
<input class="block w-full pl-10 pr-3 py-2 border border-gray-200 dark:border-white/10 rounded-lg leading-5 bg-white dark:bg-surface-dark text-gray-900 dark:text-gray-100 placeholder-gray-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary sm:text-sm transition-colors" placeholder="Search quizzes..." type="text"/>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-20">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
<span class="material-icons text-accent">local_fire_department</span>
Trending Now
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<div class="group relative bg-white dark:bg-surface-glass-dark border border-gray-200 dark:border-white/10 rounded-2xl overflow-hidden hover:shadow-2xl dark:hover:shadow-primary/20 transition-all duration-300 transform hover:-translate-y-1 glass-panel">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-3 left-3 z-10 flex gap-2">
<span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-md flex items-center gap-1 animate-pulse">
<span class="w-1.5 h-1.5 bg-white rounded-full"></span> LIVE
</span>
<span class="bg-black/60 backdrop-blur-sm text-white text-xs font-medium px-2 py-1 rounded-md">
Tech
</span>
</div>
<img alt="Tech motherboard abstract" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC-P493J0vC19kSTOIpb_oMruTxoMQXLLiocz2uN9dRRzDtWgumMAbSdxvd3JwLSz6fMJNoKBgmKUKIFwehiu1lTHZ-S51FQLG9RtDQqYRFEmheOJ6McnbdW_jj1c1fHdWYpBqStRHWpNfxKLdc3IR9rIRuud2Dn_2x6oUY8AmsEPZDl39yjNHFzcxrty2IyS--uH8GCPXOItoTSLCc1466NuZ49TcY3Dhg2Kn0Y0vmiHDhHKVRXW6GjbGf2DtVOl36wkWPiBK_"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
<div class="absolute bottom-3 left-3 right-3 flex justify-between items-end">
<div>
<p class="text-xs text-gray-300">Prize Pool</p>
<p class="text-accent font-bold text-lg">₹50,000</p>
</div>
</div>
</div>
<div class="p-5">
<h3 class="text-lg font-bold mb-1 line-clamp-1">Ultimate Silicon Valley Trivia</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-2">Test your knowledge on startups, chips, and coding history.</p>
<div class="flex justify-between items-center text-sm mb-4 pb-4 border-b border-gray-100 dark:border-white/10">
<div class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
<span class="material-icons text-base">confirmation_number</span>
<span>Entry: <strong class="text-text-light dark:text-white">₹49</strong></span>
</div>
<div class="flex items-center gap-1 text-green-500">
<span class="material-icons text-base">people</span>
<span>1.2k playing</span>
</div>
</div>
<button class="w-full bg-primary hover:bg-primary-hover text-white py-2.5 rounded-xl font-semibold transition-colors shadow-lg shadow-primary/25">
Join Now
</button>
</div>
</div>
<div class="group relative bg-white dark:bg-surface-glass-dark border border-gray-200 dark:border-white/10 rounded-2xl overflow-hidden hover:shadow-2xl dark:hover:shadow-primary/20 transition-all duration-300 transform hover:-translate-y-1 glass-panel">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-3 left-3 z-10">
<span class="bg-black/60 backdrop-blur-sm text-white text-xs font-medium px-2 py-1 rounded-md">
Gaming
</span>
</div>
<img alt="Gamer setup with neon lights" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDKlj3IlQj1L2zoa9G3NpPHZju_I0hhC34bArnQRYWeQKSbNk6C7bG2Sa4DIRxV1__6CR4jw7aerC36i8gyHnT0YJBjr-KebX3kcV-kpB9snmNjGHBz8qOOsJg1g5-Fe4ERHAILDHAyY7thZVgjxzfF_B7srb_MxfEoMFCHMe1Jrpq9qiObf_fdNA1nUj2ksYylj8ZPLNr8pfGhMnttTwFgNihnkSYi0WXYVJxJK-KpbCxETM89bqEv9_7SjGAcYBit3KQV63J8"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-xs text-gray-300">Prize Pool</p>
<p class="text-accent font-bold text-lg">₹1,00,000</p>
</div>
</div>
<div class="p-5">
<h3 class="text-lg font-bold mb-1 line-clamp-1">FPS Legends Tournament</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-2">Identify the map, gun, and character from popular FPS games.</p>
<div class="flex justify-between items-center text-sm mb-4 pb-4 border-b border-gray-100 dark:border-white/10">
<div class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
<span class="material-icons text-base">confirmation_number</span>
<span>Entry: <strong class="text-text-light dark:text-white">₹99</strong></span>
</div>
<div class="flex items-center gap-1 text-yellow-500">
<span class="material-icons text-base">schedule</span>
<span>Starts in 02:14:50</span>
</div>
</div>
<button class="w-full bg-white dark:bg-white/10 hover:bg-gray-50 dark:hover:bg-white/20 text-text-light dark:text-white border border-gray-200 dark:border-white/10 py-2.5 rounded-xl font-semibold transition-colors">
Register
</button>
</div>
</div>
<div class="group relative bg-white dark:bg-surface-glass-dark border border-gray-200 dark:border-white/10 rounded-2xl overflow-hidden hover:shadow-2xl dark:hover:shadow-primary/20 transition-all duration-300 transform hover:-translate-y-1 glass-panel">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-3 left-3 z-10">
<span class="bg-black/60 backdrop-blur-sm text-white text-xs font-medium px-2 py-1 rounded-md">
History
</span>
</div>
<img alt="Old historical book" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCvkmprDG1c5FMMI4Jhux2LVMIS-utOHg_b2HiUoWOisSmVBOfFy_kJUMh9DRdNOmsuFikZL_o1ugMOdnuQ8HQaLCoiAySKkc2wkv0ET6QXowci1MFWpc8pbOIxdefUXHOIdHAiFIwZfZRqYMRqAGqIZluCN5aT5vTc3dXcjgk620bIggoK3WrPxVrF9Ha_VvEyQKw4YD-rq1dWpflDNpphFxeIImcUhPKWHb1tnW5naOkNUGtHPRDGYgKg3b50dOCkIh5SkTcc"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-xs text-gray-300">Prize Pool</p>
<p class="text-accent font-bold text-lg">₹25,000</p>
</div>
</div>
<div class="p-5">
<h3 class="text-lg font-bold mb-1 line-clamp-1">Ancient Empires</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-2">From Rome to the Mongols, how well do you know history?</p>
<div class="flex justify-between items-center text-sm mb-4 pb-4 border-b border-gray-100 dark:border-white/10">
<div class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
<span class="material-icons text-base">confirmation_number</span>
<span>Entry: <strong class="text-text-light dark:text-white">₹29</strong></span>
</div>
<div class="flex items-center gap-1 text-yellow-500">
<span class="material-icons text-base">schedule</span>
<span>Starts in 45m</span>
</div>
</div>
<button class="w-full bg-white dark:bg-white/10 hover:bg-gray-50 dark:hover:bg-white/20 text-text-light dark:text-white border border-gray-200 dark:border-white/10 py-2.5 rounded-xl font-semibold transition-colors">
Register
</button>
</div>
</div>
<div class="group relative bg-white dark:bg-surface-glass-dark border border-gray-200 dark:border-white/10 rounded-2xl overflow-hidden hover:shadow-2xl dark:hover:shadow-primary/20 transition-all duration-300 transform hover:-translate-y-1 glass-panel">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-3 left-3 z-10">
<span class="bg-black/60 backdrop-blur-sm text-white text-xs font-medium px-2 py-1 rounded-md">
General Knowledge
</span>
</div>
<img alt="Books and lightbulb" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD0pCJZ45TeEezoDpU-Yap7FXqsyj4IQzeX6SkF4Q25KlZiFQ_MoV0owRuQNhwA8kGhjcXCsv47Hkp2uH4edrVHTSX40d7zDMZd32xU_1iZibjt8X_axVIGFAWkfyNKk887bHNCB8xTq-3qs5qvmIRk_cr9f4UKJ9tWlS4xmtLs9OGNE42i9t2_b6drrA8P2GNw7vwBeC6-QhzeveTD0ZelXIpxbvepLKhzoy-4JEG_Zbr7eZyY9eKQXrNxKUXikotEUOkM5MdX"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-xs text-gray-300">Prize Pool</p>
<p class="text-accent font-bold text-lg">₹75,000</p>
</div>
</div>
<div class="p-5">
<h3 class="text-lg font-bold mb-1 line-clamp-1">The Genius Challenge</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-2">A mix of science, geography, and math for true polymaths.</p>
<div class="flex justify-between items-center text-sm mb-4 pb-4 border-b border-gray-100 dark:border-white/10">
<div class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
<span class="material-icons text-base">confirmation_number</span>
<span>Entry: <strong class="text-text-light dark:text-white">₹79</strong></span>
</div>
<div class="flex items-center gap-1 text-yellow-500">
<span class="material-icons text-base">schedule</span>
<span>Starts in 04:30:00</span>
</div>
</div>
<button class="w-full bg-white dark:bg-white/10 hover:bg-gray-50 dark:hover:bg-white/20 text-text-light dark:text-white border border-gray-200 dark:border-white/10 py-2.5 rounded-xl font-semibold transition-colors">
Register
</button>
</div>
</div>
<div class="group relative bg-white dark:bg-surface-glass-dark border border-gray-200 dark:border-white/10 rounded-2xl overflow-hidden hover:shadow-2xl dark:hover:shadow-primary/20 transition-all duration-300 transform hover:-translate-y-1 glass-panel">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-3 left-3 z-10 flex gap-2">
<span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-md flex items-center gap-1 animate-pulse">
<span class="w-1.5 h-1.5 bg-white rounded-full"></span> LIVE
</span>
<span class="bg-black/60 backdrop-blur-sm text-white text-xs font-medium px-2 py-1 rounded-md">
Pop Culture
</span>
</div>
<img alt="Concert lights" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBoTvCkbn89Css5afyAcaApBo6fMEsgshqiS17gZrTbElzk0cS_O_EHLGeCncyXZ_EH1PUBZcSwWpKDKJJ0bZ2fQsmJOb-MsjYZm_Li-shbUZUNXOAP-CNiKChYtqx0nq3h3e9bIiM73Q1tLih66TIYqzf6jourtD-gfTVoluGaqBmoXjiMn_YsbTYblnkrREXl4OpnjpvzQwS0QDSrD-oX56tAu91GRaFYM6tinAglDzzGGfLGNKCfeageHHoYUX38dKETZiQY"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-xs text-gray-300">Prize Pool</p>
<p class="text-accent font-bold text-lg">₹30,000</p>
</div>
</div>
<div class="p-5">
<h3 class="text-lg font-bold mb-1 line-clamp-1">Music Hits 2023</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-2">Guess the song, artist, and lyrics from this year's top charts.</p>
<div class="flex justify-between items-center text-sm mb-4 pb-4 border-b border-gray-100 dark:border-white/10">
<div class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
<span class="material-icons text-base">confirmation_number</span>
<span>Entry: <strong class="text-text-light dark:text-white">₹39</strong></span>
</div>
<div class="flex items-center gap-1 text-green-500">
<span class="material-icons text-base">people</span>
<span>856 playing</span>
</div>
</div>
<button class="w-full bg-primary hover:bg-primary-hover text-white py-2.5 rounded-xl font-semibold transition-colors shadow-lg shadow-primary/25">
Join Now
</button>
</div>
</div>
<div class="group relative bg-white dark:bg-surface-glass-dark border border-gray-200 dark:border-white/10 rounded-2xl overflow-hidden hover:shadow-2xl dark:hover:shadow-primary/20 transition-all duration-300 transform hover:-translate-y-1 glass-panel">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-3 left-3 z-10">
<span class="bg-black/60 backdrop-blur-sm text-white text-xs font-medium px-2 py-1 rounded-md">
Sports
</span>
</div>
<img alt="Soccer ball" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBO0xc-kPVsetonyMzV0Jl6o66-xIIYQqypPnkig5DwKaqUfP68l6nXMY2d1ljeYiIwDexwc5RERyzKzm_JObLd56B5IDM8Gbo9zf619Z1qzXPA-dXl-Jt1nQVbVQhGmwDYChSVNbXlaAABQVj1JU5C6uXpTSk6zBk_sdejOhcaiM5Ze9HdYaPAoqXot6ilIeIbXrplYS1mJs5NbkeR7r3fahheFuOHbBYi53_7kkktW0q0XtE69DcNvFcZY6a-iaQmsSDRct3w"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-xs text-gray-300">Prize Pool</p>
<p class="text-accent font-bold text-lg">₹60,000</p>
</div>
</div>
<div class="p-5">
<h3 class="text-lg font-bold mb-1 line-clamp-1">Premier League Showdown</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-2">Test your football knowledge. Stats, players, and history.</p>
<div class="flex justify-between items-center text-sm mb-4 pb-4 border-b border-gray-100 dark:border-white/10">
<div class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
<span class="material-icons text-base">confirmation_number</span>
<span>Entry: <strong class="text-text-light dark:text-white">₹59</strong></span>
</div>
<div class="flex items-center gap-1 text-yellow-500">
<span class="material-icons text-base">schedule</span>
<span>Starts in 05:15:00</span>
</div>
</div>
<button class="w-full bg-white dark:bg-white/10 hover:bg-gray-50 dark:hover:bg-white/20 text-text-light dark:text-white border border-gray-200 dark:border-white/10 py-2.5 rounded-xl font-semibold transition-colors">
Register
</button>
</div>
</div>
<div class="group relative bg-white dark:bg-surface-glass-dark border border-gray-200 dark:border-white/10 rounded-2xl overflow-hidden hover:shadow-2xl dark:hover:shadow-primary/20 transition-all duration-300 transform hover:-translate-y-1 glass-panel">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-3 left-3 z-10">
<span class="bg-black/60 backdrop-blur-sm text-white text-xs font-medium px-2 py-1 rounded-md">
Tech
</span>
</div>
<img alt="Cybersecurity lock" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAXFGKAUXzQ--EddLsJqKEHWJiwe4Wz7LJ-MHB0hpBB1dM8YpcerIsd8QSuFdIKrMhJZn-pjbn9jX90_mS0SUdjTFxMwPu21Kss5LrdXa_XSZuueL1KN5tfzQFFZWcKTuJRymFAHQBpMPr_pBEUKWYTKNAoCZghr5SF_dlKBAjbRooFUSsQP8IRbxoIKnlUD3kwKM_cc6dnzUmUuIdby7gWHxeOwvHBon1c96595SeevnLDzmZ6MZ1G9g7_ZPLC7FqCPQvC1X4h"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-xs text-gray-300">Prize Pool</p>
<p class="text-accent font-bold text-lg">₹80,000</p>
</div>
</div>
<div class="p-5">
<h3 class="text-lg font-bold mb-1 line-clamp-1">Cyber Security Master</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-2">Phishing, encryption, and hacking history. Are you safe?</p>
<div class="flex justify-between items-center text-sm mb-4 pb-4 border-b border-gray-100 dark:border-white/10">
<div class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
<span class="material-icons text-base">confirmation_number</span>
<span>Entry: <strong class="text-text-light dark:text-white">₹89</strong></span>
</div>
<div class="flex items-center gap-1 text-yellow-500">
<span class="material-icons text-base">schedule</span>
<span>Starts tomorrow</span>
</div>
</div>
<button class="w-full bg-white dark:bg-white/10 hover:bg-gray-50 dark:hover:bg-white/20 text-text-light dark:text-white border border-gray-200 dark:border-white/10 py-2.5 rounded-xl font-semibold transition-colors">
Register
</button>
</div>
</div>
<div class="group relative bg-white dark:bg-surface-glass-dark border border-gray-200 dark:border-white/10 rounded-2xl overflow-hidden hover:shadow-2xl dark:hover:shadow-primary/20 transition-all duration-300 transform hover:-translate-y-1 glass-panel">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-3 left-3 z-10">
<span class="bg-black/60 backdrop-blur-sm text-white text-xs font-medium px-2 py-1 rounded-md">
Movies
</span>
</div>
<img alt="Cinema reel" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBuWEfZFuyudIjc_a3LFD30oufxw_A6cNOLm_Z-rggl-p4qCIo6BIDbtGliOr0EqRVtC2BZFfizpp_-OXy2vtN1YTsPc2oQsXg_0AYLQlz4Zw9Eba7-VJcd-uUue7hq1RLSBemBPk67__pGdw7k_luj9Scx2ODXccHOyy6B3_AIRwohXYJA2UwEmbZqDbW4a-8nYqRAi8Jr7gArL0PDwiutyHB40o5II-d4_R9xMsLhRhw4-ePNL5OBbtz5D5TE5kzaDL0vv_W1"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-xs text-gray-300">Prize Pool</p>
<p class="text-accent font-bold text-lg">₹40,000</p>
</div>
</div>
<div class="p-5">
<h3 class="text-lg font-bold mb-1 line-clamp-1">Sci-Fi Movie Buff</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-2">Star Wars, Star Trek, Matrix. The ultimate nerd quiz.</p>
<div class="flex justify-between items-center text-sm mb-4 pb-4 border-b border-gray-100 dark:border-white/10">
<div class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
<span class="material-icons text-base">confirmation_number</span>
<span>Entry: <strong class="text-text-light dark:text-white">₹49</strong></span>
</div>
<div class="flex items-center gap-1 text-yellow-500">
<span class="material-icons text-base">schedule</span>
<span>Starts tomorrow</span>
</div>
</div>
<button class="w-full bg-white dark:bg-white/10 hover:bg-gray-50 dark:hover:bg-white/20 text-text-light dark:text-white border border-gray-200 dark:border-white/10 py-2.5 rounded-xl font-semibold transition-colors">
Register
</button>
</div>
</div>
</div>
<div class="mt-12 text-center">
<button class="inline-flex items-center gap-2 text-primary hover:text-primary-hover font-medium">
View all upcoming quizzes <span class="material-icons text-sm">arrow_forward</span>
</button>
</div>
</div>
<div class="bg-primary/5 dark:bg-surface-glass-dark border-y border-gray-200 dark:border-white/5 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
<div class="p-6">
<div class="w-12 h-12 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-4 text-primary">
<span class="material-icons text-2xl">emoji_events</span>
</div>
<h3 class="text-xl font-bold mb-2">Huge Prize Pools</h3>
<p class="text-gray-500 dark:text-gray-400">Compete for lakhs in daily prizes distributed automatically.</p>
</div>
<div class="p-6">
<div class="w-12 h-12 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-4 text-primary">
<span class="material-icons text-2xl">bolt</span>
</div>
<h3 class="text-xl font-bold mb-2">Instant Payouts</h3>
<p class="text-gray-500 dark:text-gray-400">Winnings are credited to your wallet instantly after the quiz ends.</p>
</div>
<div class="p-6">
<div class="w-12 h-12 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-4 text-primary">
<span class="material-icons text-2xl">security</span>
</div>
<h3 class="text-xl font-bold mb-2">Fair Play Guarantee</h3>
<p class="text-gray-500 dark:text-gray-400">Advanced anti-cheat systems ensure a level playing field for all.</p>
</div>
</div>
</div>
</div>
<footer class="bg-white dark:bg-background-dark border-t border-gray-200 dark:border-white/10 pt-16 pb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
<div class="col-span-1 md:col-span-1">
<div class="flex items-center gap-2 mb-4">
<div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white">
<span class="material-icons text-xl">sports_esports</span>
</div>
<span class="font-bold text-xl">QuizQuest</span>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400">
The ultimate high-energy, gamified quiz portal. Play, learn, and earn big rewards.
</p>
</div>
<div>
<h4 class="font-bold mb-4">Platform</h4>
<ul class="space-y-2 text-sm text-gray-500 dark:text-gray-400">
<li><a class="hover:text-primary transition-colors" href="#">Browse Quizzes</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Leaderboards</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</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">Company</h4>
<ul class="space-y-2 text-sm text-gray-500 dark:text-gray-400">
<li><a class="hover:text-primary transition-colors" href="#">About Us</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Careers</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Blog</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Contact</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">Legal</h4>
<ul class="space-y-2 text-sm text-gray-500 dark:text-gray-400">
<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="#">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-200 dark:border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-sm text-gray-500 dark:text-gray-400">© 2023 QuizQuest. All rights reserved.</p>
<div class="flex space-x-4">
<a class="text-gray-400 hover:text-primary transition-colors" href="#"><i class="material-icons">facebook</i></a>
<a class="text-gray-400 hover:text-primary transition-colors" href="#"><i class="material-icons">alternate_email</i></a>
<a class="text-gray-400 hover:text-primary transition-colors" href="#"><i class="material-icons">photo_camera</i></a>
</div>
</div>
</div>
</footer>
<script>
// Check local storage or system preference
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>