<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Unlock Your Fortune</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+Round" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#6D28D9", // Using a rich purple as primary
secondary: "#FACC15", // Yellow accent
"background-light": "#F3F4F6",
"background-dark": "#0B0A16",
"card-light": "#FFFFFF",
"card-dark": "#161523",
"surface-dark": "#201F30",
},
fontFamily: {
display: ["Inter", "sans-serif"],
body: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.75rem",
'xl': "1rem",
'2xl': "1.5rem",
'3xl': "2rem",
},
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-gold {
background: linear-gradient(to right, #FACC15, #EAB308);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-purple {
background: linear-gradient(to right, #A855F7, #7C3AED);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}.shadow-soft {
box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);
}.glow-purple {
box-shadow: 0 0 40px -10px rgba(124, 58, 237, 0.3);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-gray-100 transition-colors duration-300 font-body antialiased selection:bg-primary selection:text-white">
<nav class="fixed w-full z-50 top-0 left-0 border-b border-gray-200 dark:border-white/10 bg-background-light/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 cursor-pointer">
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mr-3">
<span class="material-icons-round text-white text-xl">sports_esports</span>
</div>
<span class="font-bold text-xl tracking-tight">QuizQuest</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a class="text-gray-600 dark:text-gray-300 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-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors" href="#">Prizes</a>
<a class="text-gray-600 dark:text-gray-300 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 space-x-6">
<button class="p-2 rounded-full text-gray-500 hover:bg-gray-200 dark:hover:bg-white/10 transition-colors" onclick="document.documentElement.classList.toggle('dark')">
<span class="material-icons-round dark:hidden">dark_mode</span>
<span class="material-icons-round hidden dark:block">light_mode</span>
</button>
<a class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary transition-colors" href="#">Login</a>
<a class="bg-primary hover:bg-purple-700 text-white px-6 py-2.5 rounded-full text-sm font-semibold transition-all transform hover:scale-105 shadow-lg shadow-purple-500/30" href="#">
Join Now
</a>
</div>
<div class="md:hidden flex items-center">
<button class="text-gray-500 hover:text-white focus:outline-none">
<span class="material-icons-round text-3xl">menu</span>
</button>
</div>
</div>
</div>
</nav>
<main class="relative pt-28 pb-16 overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
<div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-purple-500/10 dark:bg-purple-900/20 rounded-full blur-[120px]"></div>
<div class="absolute bottom-[10%] right-[-5%] w-[30%] h-[30%] bg-blue-500/10 dark:bg-blue-900/20 rounded-full blur-[100px]"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-12 lg:gap-16 items-center">
<div class="lg:col-span-7 mb-12 lg:mb-0 text-center lg:text-left">
<div class="inline-flex items-center px-3 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-700/50 mb-6">
<span class="w-2 h-2 rounded-full bg-yellow-500 mr-2 animate-pulse"></span>
<span class="text-xs font-bold text-yellow-700 dark:text-yellow-400 uppercase tracking-wide">Live Quest Open</span>
</div>
<h1 class="text-5xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 leading-[1.1]">
Unlock Your <br/>
<span class="text-gradient-gold">Fortune.</span><br/>
Join the Quest.
</h1>
<p class="text-lg text-gray-600 dark:text-gray-400 mb-10 max-w-2xl mx-auto lg:mx-0 leading-relaxed">
Compete with thousands of players for massive prizes. Secure your spot in the next league now and prove your trivia mastery.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-8 mb-10">
<a class="group relative inline-flex items-center justify-center px-8 py-4 text-base font-bold text-gray-900 dark:text-white bg-white dark:bg-white rounded-full overflow-hidden transition-all hover:shadow-xl shadow-soft dark:shadow-none min-w-[240px]" href="#">
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-gray-100 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></span>
<span class="relative flex items-center text-primary dark:text-primary">
Join the Quest
<span class="ml-3 bg-primary text-white text-xs px-2 py-0.5 rounded-full">₹99</span>
<span class="material-icons-round ml-2 group-hover:translate-x-1 transition-transform">arrow_forward</span>
</span>
</a>
<div class="text-center sm:text-left">
<p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-widest mb-1">Entry Closes In</p>
<div class="text-3xl font-mono font-bold tracking-widest">
00 <span class="text-gray-400 mx-1">:</span> 14 <span class="text-gray-400 mx-1">:</span> 59
</div>
</div>
</div>
<div class="flex items-center justify-center lg:justify-start space-x-6 text-sm text-gray-500 dark:text-gray-400 font-medium">
<div class="flex items-center">
<span class="material-icons-round text-green-500 text-lg mr-2">verified_user</span>
Secure Payment
</div>
<div class="flex items-center">
<span class="material-icons-round text-primary text-lg mr-2">groups</span>
10k+ Players
</div>
</div>
</div>
<div class="lg:col-span-5 relative">
<div class="absolute inset-0 bg-primary/30 blur-[60px] rounded-full transform scale-90 -z-10"></div>
<div class="bg-card-light dark:bg-card-dark rounded-3xl p-4 shadow-2xl border border-gray-100 dark:border-white/10 relative overflow-hidden group">
<div class="relative bg-gradient-to-br from-[#6D28D9] to-[#4C1D95] rounded-2xl p-6 sm:p-8 text-center text-white overflow-hidden min-h-[420px] flex flex-col justify-between">
<div class="absolute top-10 right-10 w-4 h-4 rounded-full bg-white/20 blur-[1px]"></div>
<div class="absolute bottom-20 left-10 w-6 h-6 rounded-full bg-white/10 blur-[2px]"></div>
<div class="relative z-10 flex-grow flex items-center justify-center my-8">
<div class="w-48 h-48 sm:w-56 sm:h-56 rounded-full bg-gradient-to-br from-[#A855F7] to-[#2E1065] shadow-inner flex items-center justify-center relative shadow-xl shadow-black/30">
<div class="absolute inset-0 rounded-full bg-gradient-to-t from-black/40 to-transparent"></div>
<div class="w-full h-full rounded-full opacity-80 mix-blend-overlay bg-gradient-to-tr from-transparent via-white/40 to-transparent"></div>
<div class="absolute top-8 left-8 w-16 h-8 bg-white/30 rounded-[50%] blur-md transform -rotate-45"></div>
</div>
</div>
<div class="relative z-20 text-left">
<span class="inline-block bg-[#FACC15] text-black text-xs font-bold px-3 py-1 rounded-full mb-2">#1 Prize</span>
<h3 class="text-2xl font-bold mb-1">iPhone 15 Pro Max</h3>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mt-4">
<div class="bg-gray-50 dark:bg-surface-dark rounded-xl p-3 text-center border border-gray-100 dark:border-white/5">
<p class="text-[#FACC15] font-bold text-lg">₹5 Lakhs</p>
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase font-semibold">Prize Pool</p>
</div>
<div class="bg-gray-50 dark:bg-surface-dark rounded-xl p-3 text-center border border-gray-100 dark:border-white/5">
<p class="text-gray-900 dark:text-white font-bold text-lg">#452</p>
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase font-semibold">Your Rank</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<section class="py-20 bg-white dark:bg-[#0F0E1D] relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">How to Play & <span class="text-gradient-purple">Win</span></h2>
<p class="text-gray-600 dark:text-gray-400">Join the league of champions in 4 simple steps.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="relative group">
<div class="absolute -top-3 -right-3 w-8 h-8 bg-gray-900 dark:bg-gray-800 text-white rounded-full flex items-center justify-center font-bold text-sm z-10 border-4 border-white dark:border-[#0F0E1D]">1</div>
<div class="h-full bg-gray-50 dark:bg-surface-dark rounded-2xl p-6 border border-gray-100 dark:border-white/5 hover:border-primary/50 dark:hover:border-primary/50 transition-all hover:shadow-lg dark:hover:glow-purple group-hover:-translate-y-1 duration-300">
<div class="w-12 h-12 rounded-xl bg-purple-100 dark:bg-primary/20 flex items-center justify-center mb-6 text-primary dark:text-purple-300">
<span class="material-icons-round">account_circle</span>
</div>
<h3 class="text-lg font-bold mb-2">Register</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">Create your unique avatar profile and set up your gamer tag.</p>
</div>
</div>
<div class="relative group">
<div class="absolute -top-3 -right-3 w-8 h-8 bg-gray-900 dark:bg-gray-800 text-white rounded-full flex items-center justify-center font-bold text-sm z-10 border-4 border-white dark:border-[#0F0E1D]">2</div>
<div class="h-full bg-gray-50 dark:bg-surface-dark rounded-2xl p-6 border border-gray-100 dark:border-white/5 hover:border-primary/50 dark:hover:border-primary/50 transition-all hover:shadow-lg dark:hover:glow-purple group-hover:-translate-y-1 duration-300">
<div class="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-500/20 flex items-center justify-center mb-6 text-blue-600 dark:text-blue-300">
<span class="material-icons-round">payments</span>
</div>
<h3 class="text-lg font-bold mb-2">Pay Entry</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">Secure your spot in the arena with a small <strong>₹99 fee</strong>.</p>
</div>
</div>
<div class="relative group">
<div class="absolute -top-3 -right-3 w-8 h-8 bg-gray-900 dark:bg-gray-800 text-white rounded-full flex items-center justify-center font-bold text-sm z-10 border-4 border-white dark:border-[#0F0E1D]">3</div>
<div class="h-full bg-gray-50 dark:bg-surface-dark rounded-2xl p-6 border border-gray-100 dark:border-white/5 hover:border-primary/50 dark:hover:border-primary/50 transition-all hover:shadow-lg dark:hover:glow-purple group-hover:-translate-y-1 duration-300">
<div class="w-12 h-12 rounded-xl bg-indigo-100 dark:bg-indigo-500/20 flex items-center justify-center mb-6 text-indigo-600 dark:text-indigo-300">
<span class="material-icons-round">sports_esports</span>
</div>
<h3 class="text-lg font-bold mb-2">Play Quiz</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">Answer trivia questions fast to climb the live leaderboard.</p>
</div>
</div>
<div class="relative group">
<div class="absolute -top-3 -right-3 w-8 h-8 bg-[#FACC15] text-black rounded-full flex items-center justify-center font-bold text-sm z-10 border-4 border-white dark:border-[#0F0E1D]">4</div>
<div class="h-full bg-[#FFFBEB] dark:bg-yellow-900/10 rounded-2xl p-6 border border-yellow-100 dark:border-yellow-500/20 hover:border-yellow-400/50 transition-all hover:shadow-lg group-hover:-translate-y-1 duration-300">
<div class="w-12 h-12 rounded-xl bg-yellow-100 dark:bg-yellow-500/20 flex items-center justify-center mb-6 text-yellow-600 dark:text-yellow-400">
<span class="material-icons-round">emoji_events</span>
</div>
<h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-yellow-100">Win Big</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">Claim instant cash rewards, gadgets, and eternal glory.</p>
</div>
</div>
</div>
</div>
</section>
<section class="py-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-5xl mx-auto">
<div class="bg-[#0F0E1D] dark:bg-surface-dark rounded-[2.5rem] p-8 sm:p-16 text-center relative overflow-hidden shadow-2xl">
<div class="absolute top-0 left-1/4 w-1/2 h-1/2 bg-purple-500/20 blur-[100px] rounded-full"></div>
<div class="absolute bottom-0 right-1/4 w-1/2 h-1/2 bg-blue-500/10 blur-[80px] rounded-full"></div>
<div class="relative z-10">
<p class="text-[#FACC15] font-bold text-sm tracking-widest uppercase mb-4">Limited Time Offer</p>
<h2 class="text-4xl sm:text-5xl font-bold text-white mb-6">Standard Entry Pass</h2>
<div class="flex items-baseline justify-center mb-10 text-white">
<span class="text-7xl font-bold tracking-tighter">₹99</span>
<span class="text-xl text-gray-400 ml-2">/ quest</span>
</div>
<div class="flex flex-wrap justify-center gap-4 mb-12">
<div class="flex items-center px-4 py-2 rounded-full bg-white/5 border border-white/10 text-gray-300 text-sm">
<span class="material-icons-round text-green-400 text-base mr-2">check_circle</span>
Instant Payouts
</div>
<div class="flex items-center px-4 py-2 rounded-full bg-white/5 border border-white/10 text-gray-300 text-sm">
<span class="material-icons-round text-green-400 text-base mr-2">check_circle</span>
Global Rank
</div>
<div class="flex items-center px-4 py-2 rounded-full bg-white/5 border border-white/10 text-gray-300 text-sm">
<span class="material-icons-round text-green-400 text-base mr-2">check_circle</span>
Anti-Cheat
</div>
</div>
<button class="bg-primary hover:bg-purple-600 text-white text-lg font-bold py-4 px-10 rounded-full w-full sm:w-auto min-w-[300px] transition-all transform hover:scale-105 shadow-lg shadow-purple-900/50 flex items-center justify-center mx-auto">
<span class="material-icons-round mr-2">bolt</span>
Pay & Join Now
</button>
<p class="mt-6 text-xs text-gray-500 max-w-lg mx-auto">
By joining, you agree to our Terms of Service. Entry fees are non-refundable once the quiz begins.
</p>
</div>
</div>
</div>
</section>
<footer class="bg-[#050505] text-white py-12 border-t border-white/5">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-6 md:mb-0">
<span class="material-icons-round text-gray-400 mr-2">sports_esports</span>
<span class="text-gray-400 font-medium">QuizQuest © 2023</span>
</div>
<div class="flex space-x-8 text-sm text-gray-500">
<a class="hover:text-white transition-colors" href="#">Privacy</a>
<a class="hover:text-white transition-colors" href="#">Terms</a>
<a class="hover:text-white transition-colors" href="#">Support</a>
</div>
</div>
</div>
</footer>
</body></html>