<!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 - 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&family=Outfit:wght@500;700;900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7C3AED", // Violet-600
"primary-hover": "#6D28D9", // Violet-700
"accent-yellow": "#FACC15", // Yellow-400
"background-light": "#F3F4F6", // Gray-100
"background-dark": "#0F0720", // Very dark purple/black
"card-dark": "#1A1033", // Dark purple card bg
"card-light": "#FFFFFF",
"text-light": "#1F2937", // Gray-800
"text-dark": "#F3F4F6", // Gray-100
"glass-dark": "rgba(255, 255, 255, 0.05)",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
backgroundImage: {
'hero-gradient': 'radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.15) 0%, rgba(15, 7, 32, 0) 50%)',
'card-gradient': 'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%)',
'glow': 'conic-gradient(from 180deg at 50% 50%, #2a8af6 0deg, #a853ba 180deg, #e92a67 360deg)',
}
},
},
};
</script>
<style>::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #111;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark font-sans transition-colors duration-300 antialiased selection:bg-primary selection:text-white">
<nav class="fixed top-0 w-full z-50 backdrop-blur-md bg-white/70 dark:bg-background-dark/80 border-b border-gray-200 dark:border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white">
<span class="material-icons-outlined text-2xl">sports_esports</span>
</div>
<span class="font-display 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="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Home</a>
<a class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Prizes</a>
<a class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Leaderboard</a>
</div>
</div>
<div class="hidden md:flex items-center gap-4">
<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-outlined dark:hidden">dark_mode</span>
<span class="material-icons-outlined hidden dark:block">light_mode</span>
</button>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Login</a>
<a class="bg-primary hover:bg-primary-hover text-white px-6 py-2.5 rounded-full text-sm font-semibold transition-all transform hover:scale-105 shadow-lg shadow-primary/30" href="#">
Join Now
</a>
</div>
<div class="-mr-2 flex md:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" type="button">
<span class="material-icons-outlined">menu</span>
</button>
</div>
</div>
</div>
</nav>
<section class="relative pt-32 pb-20 overflow-hidden">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[500px] bg-hero-gradient pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="space-y-8">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-500/10 border border-yellow-500/20 text-yellow-600 dark:text-accent-yellow text-xs font-bold tracking-wider uppercase">
<span class="w-2 h-2 rounded-full bg-yellow-500 animate-pulse"></span>
Live Quest Open
</div>
<h1 class="font-display text-5xl sm:text-6xl lg:text-7xl font-bold leading-[1.1]">
Unlock Your <br/>
<span class="text-yellow-500 dark:text-accent-yellow">Fortune.</span><br/>
Join the Quest.
</h1>
<p class="text-lg text-gray-600 dark:text-gray-400 max-w-lg leading-relaxed">
Compete with thousands of players for massive prizes. Secure your spot in the next league now and prove your mastery.
</p>
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-6">
<a class="group relative inline-flex items-center justify-between w-full sm:w-auto min-w-[240px] bg-white dark:bg-white text-gray-900 px-2 py-2 rounded-full font-bold shadow-xl transition-transform hover:scale-[1.02]" href="#">
<span class="pl-6 pr-4">Join the Quest</span>
<div class="flex items-center gap-3">
<span class="bg-primary text-white text-xs px-2 py-1 rounded-md font-mono">₹99</span>
<span class="w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white group-hover:bg-gray-900 transition-colors">
<span class="material-icons-outlined">arrow_forward</span>
</span>
</div>
</a>
<div class="flex flex-col">
<span class="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">Entry Closes In</span>
<div class="font-mono text-2xl font-bold tracking-widest flex gap-2">
<span>00</span><span class="text-gray-400">:</span><span>14</span><span class="text-gray-400">:</span><span>59</span>
</div>
</div>
</div>
<div class="flex items-center gap-6 text-sm font-medium text-gray-500 dark:text-gray-400 pt-4">
<div class="flex items-center gap-2">
<span class="material-icons-outlined text-green-500 text-lg">verified_user</span>
Secure Payment
</div>
<div class="flex items-center gap-2">
<span class="material-icons-outlined text-primary text-lg">groups</span>
10k+ Players
</div>
</div>
</div>
<div class="relative">
<div class="absolute -inset-1 bg-gradient-to-r from-primary to-purple-600 rounded-3xl blur-2xl opacity-40 dark:opacity-60 animate-pulse"></div>
<div class="relative bg-white dark:bg-[#150A2E] rounded-3xl p-6 border border-gray-200 dark:border-white/10 shadow-2xl">
<div class="relative h-[320px] rounded-2xl overflow-hidden mb-6 bg-gradient-to-br from-indigo-500 via-purple-600 to-primary flex items-center justify-center group">
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop')] bg-cover bg-center opacity-40 mix-blend-overlay"></div>
<div class="relative w-48 h-48 rounded-full bg-gradient-to-b from-purple-300 to-indigo-600 shadow-[0_0_60px_rgba(124,58,237,0.6)] flex items-center justify-center transform group-hover:scale-105 transition-transform duration-700">
<div class="w-full h-full rounded-full bg-gradient-to-tr from-transparent via-white/20 to-white/40 backdrop-blur-sm"></div>
</div>
<div class="absolute top-10 right-10 w-8 h-8 rounded-full bg-purple-400/30 blur-sm"></div>
<div class="absolute bottom-10 left-10 w-12 h-12 rounded-full bg-indigo-400/20 blur-sm"></div>
</div>
<div class="space-y-4">
<div>
<span class="inline-block bg-accent-yellow text-black text-xs font-bold px-3 py-1 rounded-full mb-2">#1 Prize</span>
<h3 class="text-2xl font-bold">iPhone 15 Pro Max</h3>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-50 dark:bg-white/5 rounded-xl p-3 text-center border border-gray-100 dark:border-white/5">
<div class="text-accent-yellow font-bold text-lg">₹5 Lakhs</div>
<div class="text-[10px] text-gray-500 uppercase tracking-wide">Prize Pool</div>
</div>
<div class="bg-gray-50 dark:bg-white/5 rounded-xl p-3 text-center border border-gray-100 dark:border-white/5">
<div class="font-bold text-lg dark:text-white">#452</div>
<div class="text-[10px] text-gray-500 uppercase tracking-wide">Your Rank</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-20 bg-gray-50 dark:bg-[#0B0518]">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="font-display text-4xl font-bold mb-4">
How to Play & <span class="text-primary">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-black border border-gray-700 text-white rounded-full flex items-center justify-center font-bold text-sm z-10 shadow-lg">1</div>
<div class="h-full bg-white dark:bg-card-dark p-6 rounded-2xl border border-gray-200 dark:border-white/5 hover:border-primary/50 transition-colors shadow-sm hover:shadow-xl dark:shadow-none">
<div class="w-12 h-12 bg-purple-100 dark:bg-primary/20 rounded-xl flex items-center justify-center text-primary mb-6">
<span class="material-icons-outlined">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-black border border-gray-700 text-white rounded-full flex items-center justify-center font-bold text-sm z-10 shadow-lg">2</div>
<div class="h-full bg-white dark:bg-card-dark p-6 rounded-2xl border border-gray-200 dark:border-white/5 hover:border-primary/50 transition-colors shadow-sm hover:shadow-xl dark:shadow-none">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-500/20 rounded-xl flex items-center justify-center text-blue-600 dark:text-blue-400 mb-6">
<span class="material-icons-outlined">account_balance_wallet</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 <span class="font-bold text-gray-900 dark:text-white">₹99 fee</span>.
</p>
</div>
</div>
<div class="relative group">
<div class="absolute -top-3 -right-3 w-8 h-8 bg-gray-900 dark:bg-black border border-gray-700 text-white rounded-full flex items-center justify-center font-bold text-sm z-10 shadow-lg">3</div>
<div class="h-full bg-white dark:bg-card-dark p-6 rounded-2xl border border-gray-200 dark:border-white/5 hover:border-primary/50 transition-colors shadow-sm hover:shadow-xl dark:shadow-none">
<div class="w-12 h-12 bg-pink-100 dark:bg-pink-500/20 rounded-xl flex items-center justify-center text-pink-600 dark:text-pink-400 mb-6">
<span class="material-icons-outlined">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-accent-yellow text-black border border-yellow-600 rounded-full flex items-center justify-center font-bold text-sm z-10 shadow-lg shadow-yellow-500/50">4</div>
<div class="h-full bg-gradient-to-br from-yellow-50 to-white dark:from-yellow-900/10 dark:to-card-dark p-6 rounded-2xl border border-yellow-200 dark:border-yellow-500/20 hover:border-accent-yellow transition-colors shadow-sm hover:shadow-xl dark:shadow-none">
<div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-500/20 rounded-xl flex items-center justify-center text-yellow-600 dark:text-yellow-400 mb-6">
<span class="material-icons-outlined">emoji_events</span>
</div>
<h3 class="text-lg font-bold mb-2">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 relative">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="relative rounded-[2.5rem] overflow-hidden bg-[#120824] border border-white/10 shadow-2xl">
<div class="absolute top-0 left-0 w-full h-full bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/20 via-[#120824] to-[#120824]"></div>
<div class="relative z-10 px-6 py-16 sm:px-12 text-center">
<div class="text-accent-yellow font-bold text-sm tracking-widest uppercase mb-4">Limited Time Offer</div>
<h2 class="font-display text-4xl sm:text-5xl font-bold text-white mb-6">
Standard Entry Pass
</h2>
<div class="flex items-baseline justify-center gap-2 mb-10">
<span class="text-6xl font-bold text-white">₹99</span>
<span class="text-gray-400 text-lg">/ quest</span>
</div>
<div class="flex flex-wrap justify-center gap-4 mb-10">
<div class="flex items-center gap-2 px-4 py-2 bg-white/5 rounded-full border border-white/5">
<span class="material-icons-outlined text-green-400 text-sm">check_circle</span>
<span class="text-sm text-gray-300">Instant Payouts</span>
</div>
<div class="flex items-center gap-2 px-4 py-2 bg-white/5 rounded-full border border-white/5">
<span class="material-icons-outlined text-green-400 text-sm">check_circle</span>
<span class="text-sm text-gray-300">Global Rank</span>
</div>
<div class="flex items-center gap-2 px-4 py-2 bg-white/5 rounded-full border border-white/5">
<span class="material-icons-outlined text-green-400 text-sm">check_circle</span>
<span class="text-sm text-gray-300">Anti-Cheat</span>
</div>
</div>
<a class="inline-flex items-center justify-center gap-2 w-full sm:w-auto bg-primary hover:bg-primary-hover text-white px-8 py-4 rounded-full text-lg font-bold shadow-lg shadow-primary/40 transition-all hover:scale-105" href="#">
<span class="material-icons-outlined">bolt</span>
Pay & Join Now
</a>
<p class="mt-8 text-xs text-gray-500 max-w-lg mx-auto leading-relaxed">
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-white dark:bg-[#080412] border-t border-gray-200 dark:border-white/5 py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
<span class="material-icons-outlined">sports_esports</span>
<span class="text-sm font-medium">QuizQuest © 2023</span>
</div>
<div class="flex items-center gap-8">
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Privacy</a>
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Terms</a>
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Support</a>
</div>
</div>
</footer>
</body></html>