<!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@400;500;600;700;800&family=Outfit:wght@500;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 used for primary actions
"primary-hover": "#5B21B6",
"accent-yellow": "#FFD700",
"background-light": "#F3F4F6", // Very light gray/white for light mode
"background-dark": "#0F0B1E", // Deep purple/black for dark mode
"card-light": "#FFFFFF",
"card-dark": "#1A162E", // Slightly lighter than background-dark
"text-light": "#1F2937",
"text-dark": "#F3F4F6",
},
fontFamily: {
display: ["Outfit", "sans-serif"],
body: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.75rem",
'xl': "1rem",
'2xl': "1.5rem",
'3xl': "2rem",
},
backgroundImage: {
'hero-glow-dark': 'radial-gradient(circle at 50% 50%, rgba(109, 40, 217, 0.15) 0%, rgba(15, 11, 30, 0) 50%)',
'hero-glow-light': 'radial-gradient(circle at 50% 50%, rgba(109, 40, 217, 0.05) 0%, rgba(243, 244, 246, 0) 50%)',
}
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Outfit', sans-serif;
}
.text-gradient-purple {
background: linear-gradient(to right, #a855f7, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.glass-panel {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark transition-colors duration-300">
<nav class="w-full py-6 px-6 md:px-12 flex justify-between items-center relative z-20 max-w-7xl mx-auto">
<div class="flex items-center gap-2">
<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-display font-bold text-xl tracking-wide dark:text-white text-gray-900">QuizQuest</span>
</div>
<div class="hidden md:flex items-center gap-8 font-medium text-sm text-gray-600 dark:text-gray-300">
<a class="hover:text-primary transition-colors" href="#">Home</a>
<a class="hover:text-primary transition-colors" href="#">Prizes</a>
<a class="hover:text-primary transition-colors" href="#">Leaderboard</a>
</div>
<div class="flex items-center gap-4">
<a class="hidden md:block font-medium text-sm text-gray-600 dark:text-gray-300 hover:text-primary transition-colors" href="#">Login</a>
<button class="bg-primary hover:bg-primary-hover text-white px-6 py-2 rounded-full font-medium text-sm transition-all shadow-lg shadow-primary/30">
Join Now
</button>
<button class="p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-300" onclick="document.documentElement.classList.toggle('dark')">
<span class="material-icons text-sm">brightness_6</span>
</button>
</div>
</nav>
<section class="relative pt-12 pb-24 px-6 md:px-12 max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
<div class="absolute inset-0 bg-hero-glow-light dark:bg-hero-glow-dark pointer-events-none -z-10"></div>
<div class="space-y-8 relative z-10">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-700/50">
<span class="w-2 h-2 rounded-full bg-yellow-500 animate-pulse"></span>
<span class="text-xs font-bold text-yellow-700 dark:text-yellow-400 uppercase tracking-wider">Live Quest Open</span>
</div>
<h1 class="text-5xl md:text-7xl font-display font-extrabold leading-tight">
Unlock Your <br/>
<span class="text-yellow-500">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.
</p>
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-8">
<button class="bg-white dark:bg-white text-primary dark:text-primary hover:bg-gray-50 dark:hover:bg-gray-100 font-bold px-8 py-3.5 rounded-full shadow-xl flex items-center gap-3 group transition-transform hover:-translate-y-1">
<span>Join the Quest</span>
<span class="bg-primary text-white text-xs px-2 py-0.5 rounded-full">₹99</span>
<span class="material-icons group-hover:translate-x-1 transition-transform">arrow_forward</span>
</button>
<div class="space-y-1">
<span class="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Entry Closes In</span>
<div class="font-mono text-2xl font-bold tracking-widest text-gray-900 dark:text-white">
00 : 14 : 59
</div>
</div>
</div>
<div class="flex items-center gap-6 text-xs font-medium text-gray-500 dark:text-gray-400 pt-4">
<div class="flex items-center gap-1.5">
<span class="material-icons text-green-500 text-sm">verified_user</span>
Secure Payment
</div>
<div class="flex items-center gap-1.5">
<span class="material-icons text-primary text-sm">groups</span>
10k+ Players
</div>
</div>
</div>
<div class="relative group perspective-1000">
<div class="absolute -inset-4 bg-primary/20 dark:bg-primary/30 rounded-[2.5rem] blur-2xl group-hover:bg-primary/30 transition-all duration-500"></div>
<div class="relative bg-card-light dark:bg-[#1e163d] border border-gray-200 dark:border-white/10 p-6 rounded-[2rem] shadow-2xl dark:shadow-black/50 overflow-hidden">
<div class="relative aspect-square rounded-[1.5rem] overflow-hidden bg-gradient-to-br from-indigo-500 to-purple-700 mb-6 flex items-center justify-center group-hover:scale-[1.02] transition-transform duration-500">
<div class="absolute top-8 left-8 w-8 h-8 rounded-full bg-white/10 blur-[1px]"></div>
<div class="absolute top-20 right-8 w-4 h-4 rounded-full bg-white/10 blur-[1px]"></div>
<div class="w-48 h-48 rounded-full bg-gradient-to-br from-purple-300 via-purple-600 to-indigo-900 shadow-[0_20px_50px_rgba(0,0,0,0.5)] relative z-10 flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
<div class="w-full h-full bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.8),transparent_40%)]"></div>
</div>
<div class="absolute bottom-6 left-6 z-20">
<span class="bg-yellow-400 text-yellow-900 text-xs font-extrabold px-3 py-1 rounded-full mb-2 inline-block shadow-lg">#1 Prize</span>
<h3 class="text-white font-display font-bold text-2xl drop-shadow-md">iPhone 15 Pro Max</h3>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-100 dark:bg-white/5 rounded-2xl p-4 text-center border border-gray-200 dark:border-white/5">
<div class="text-yellow-600 dark:text-yellow-400 font-bold text-xl">₹5 Lakhs</div>
<div class="text-[10px] uppercase tracking-wider font-bold text-gray-400">Prize Pool</div>
</div>
<div class="bg-gray-100 dark:bg-white/5 rounded-2xl p-4 text-center border border-gray-200 dark:border-white/5">
<div class="text-gray-900 dark:text-white font-bold text-xl">#452</div>
<div class="text-[10px] uppercase tracking-wider font-bold text-gray-400">Your Rank</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-20 px-6 md:px-12 bg-white dark:bg-[#0b0816]">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-display font-bold mb-4 text-gray-900 dark:text-white">
How to Play & <span class="text-primary dark:text-purple-400">Win</span>
</h2>
<p class="text-gray-500 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 rounded-full bg-gray-900 dark:bg-gray-700 text-white flex items-center justify-center font-bold text-sm z-10 border-4 border-white dark:border-[#0b0816]">1</div>
<div class="bg-gray-50 dark:bg-[#151124] p-8 rounded-2xl border border-gray-100 dark:border-white/5 h-full hover:border-primary/30 transition-colors">
<div class="w-12 h-12 rounded-xl bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 flex items-center justify-center mb-6">
<span class="material-icons">account_circle</span>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-white">Register</h3>
<p class="text-sm text-gray-500 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 rounded-full bg-gray-900 dark:bg-gray-700 text-white flex items-center justify-center font-bold text-sm z-10 border-4 border-white dark:border-[#0b0816]">2</div>
<div class="bg-gray-50 dark:bg-[#151124] p-8 rounded-2xl border border-gray-100 dark:border-white/5 h-full hover:border-primary/30 transition-colors">
<div class="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center mb-6">
<span class="material-icons">account_balance_wallet</span>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-white">Pay Entry</h3>
<p class="text-sm text-gray-500 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 rounded-full bg-gray-900 dark:bg-gray-700 text-white flex items-center justify-center font-bold text-sm z-10 border-4 border-white dark:border-[#0b0816]">3</div>
<div class="bg-gray-50 dark:bg-[#151124] p-8 rounded-2xl border border-gray-100 dark:border-white/5 h-full hover:border-primary/30 transition-colors">
<div class="w-12 h-12 rounded-xl bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 flex items-center justify-center mb-6">
<span class="material-icons">gamepad</span>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-white">Play Quiz</h3>
<p class="text-sm text-gray-500 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 rounded-full bg-yellow-500 text-yellow-900 flex items-center justify-center font-bold text-sm z-10 border-4 border-white dark:border-[#0b0816]">4</div>
<div class="bg-yellow-50 dark:bg-yellow-900/10 p-8 rounded-2xl border border-yellow-100 dark:border-yellow-700/20 h-full hover:border-yellow-400/50 transition-colors">
<div class="w-12 h-12 rounded-xl bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 flex items-center justify-center mb-6">
<span class="material-icons">emoji_events</span>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-white">Win Big</h3>
<p class="text-sm text-gray-500 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-6 md:px-12 max-w-7xl mx-auto">
<div class="relative bg-[#0F0B1E] rounded-[2.5rem] p-8 md:p-16 text-center overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_50%_0%,rgba(109,40,217,0.3),transparent_70%)] pointer-events-none"></div>
<div class="relative z-10">
<span class="text-yellow-500 font-bold tracking-widest text-xs uppercase mb-4 inline-block">Limited Time Offer</span>
<h2 class="text-4xl md:text-5xl font-display font-bold text-white mb-6">
Standard Entry Pass
</h2>
<div class="flex justify-center items-baseline gap-2 mb-10">
<span class="text-6xl md:text-7xl font-bold text-white tracking-tighter">₹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 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full border border-white/10 text-sm text-white">
<span class="material-icons text-green-400 text-sm">check_circle</span>
Instant Payouts
</div>
<div class="flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full border border-white/10 text-sm text-white">
<span class="material-icons text-green-400 text-sm">check_circle</span>
Global Rank
</div>
<div class="flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full border border-white/10 text-sm text-white">
<span class="material-icons text-green-400 text-sm">check_circle</span>
Anti-Cheat
</div>
</div>
<button class="bg-primary hover:bg-primary-hover text-white font-bold py-4 px-12 rounded-full shadow-lg shadow-primary/40 flex items-center gap-2 mx-auto transition-all hover:scale-105">
<span class="material-icons">bolt</span>
Pay & Join Now
</button>
<p class="text-xs text-gray-500 mt-6 max-w-md mx-auto">
By joining, you agree to our Terms of Service. Entry fees are non-refundable once the quiz begins.
</p>
</div>
</div>
</section>
<footer class="bg-gray-50 dark:bg-[#08060e] py-8 px-6 border-t border-gray-200 dark:border-white/5">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
<span class="material-icons text-lg">sports_esports</span>
<span class="text-sm font-medium">QuizQuest © 2023</span>
</div>
<div class="flex gap-8 text-sm text-gray-500 dark:text-gray-400">
<a class="hover:text-primary dark:hover:text-white transition-colors" href="#">Privacy</a>
<a class="hover:text-primary dark:hover:text-white transition-colors" href="#">Terms</a>
<a class="hover:text-primary dark:hover:text-white transition-colors" href="#">Support</a>
</div>
</div>
</footer>
</body></html>