<!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" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#6D28D9", // Purple matching the screenshots
"primary-hover": "#5B21B6",
"background-light": "#F3F4F6", // Light gray for light mode
"background-dark": "#0B0516", // Deep purple/black for dark mode
"card-light": "#FFFFFF",
"card-dark": "#160C26", // Slightly lighter than bg-dark
"accent-yellow": "#FACC15",
"accent-green": "#10B981",
"text-light": "#1F2937",
"text-dark": "#E5E7EB",
},
fontFamily: {
display: ["Inter", "sans-serif"],
sans: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.5rem",
"xl": "1rem",
"2xl": "1.5rem",
"3xl": "2rem",
},
},
},
};
</script>
<style>::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #111;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #444;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark font-sans antialiased transition-colors duration-300 min-h-screen flex flex-col">
<nav class="w-full px-6 py-4 flex items-center justify-between bg-white dark:bg-opacity-0 bg-opacity-90 dark:bg-transparent backdrop-blur-md sticky top-0 z-50 border-b border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2">
<div class="bg-primary text-white p-1.5 rounded-lg">
<span class="material-icons text-xl">sports_esports</span>
</div>
<span class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">QuizQuest</span>
</div>
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-gray-600 dark:text-gray-400">
<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="text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-white transition-colors hidden sm:block" href="#">Login</a>
<button class="bg-primary hover:bg-primary-hover text-white px-5 py-2 rounded-full text-sm font-semibold transition-all shadow-[0_0_15px_rgba(109,40,217,0.5)]">
Join Now
</button>
<button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors text-gray-600 dark:text-gray-400" onclick="document.documentElement.classList.toggle('dark')">
<span class="material-icons text-sm">brightness_medium</span>
</button>
</div>
</nav>
<main class="flex-grow flex items-center justify-center p-4 md:p-8 relative 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-primary opacity-20 dark:opacity-10 blur-[100px] rounded-full"></div>
<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-600 opacity-20 dark:opacity-10 blur-[100px] rounded-full"></div>
<div class="absolute top-[40%] left-[60%] w-[20%] h-[20%] bg-purple-500 opacity-20 dark:opacity-5 blur-[80px] rounded-full"></div>
</div>
<div class="max-w-6xl w-full grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="space-y-8 animate-fade-in-up">
<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-yellow-400 text-xs font-bold tracking-wider uppercase">
<span class="w-2 h-2 rounded-full bg-yellow-500 animate-pulse"></span>
Limited Time Offer
</div>
<h1 class="text-5xl md:text-6xl font-extrabold leading-tight tracking-tight">
<span class="text-gray-900 dark:text-white">Unlock Your</span> <br/>
<span class="text-yellow-500 drop-shadow-[0_0_15px_rgba(234,179,8,0.3)]">Fortune.</span> <br/>
<span class="text-gray-900 dark:text-white">Join the Quest.</span>
</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 with our Standard Entry Pass.
</p>
<div class="flex flex-col gap-2">
<span class="text-xs font-semibold text-gray-500 dark:text-gray-500 tracking-wider uppercase">Entry Closes In</span>
<div class="flex items-baseline gap-4 font-mono text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">
<div class="flex flex-col items-center">
<span>00</span>
<span class="text-xs font-sans font-medium text-gray-500 mt-1">Hrs</span>
</div>
<span class="animate-pulse">:</span>
<div class="flex flex-col items-center">
<span>14</span>
<span class="text-xs font-sans font-medium text-gray-500 mt-1">Mins</span>
</div>
<span class="animate-pulse">:</span>
<div class="flex flex-col items-center text-primary">
<span>59</span>
<span class="text-xs font-sans font-medium text-gray-500 mt-1">Secs</span>
</div>
</div>
</div>
<div class="flex flex-wrap items-center gap-6 text-sm font-medium text-gray-500 dark:text-gray-400">
<div class="flex items-center gap-2">
<span class="material-icons text-green-500 text-base">verified_user</span>
Secure Payment
</div>
<div class="flex items-center gap-2">
<span class="material-icons text-primary text-base">groups</span>
10k+ Players
</div>
</div>
</div>
<div class="relative">
<div class="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 rounded-3xl blur-2xl opacity-20 dark:opacity-30 transform scale-95 translate-y-4"></div>
<div class="relative bg-white dark:bg-[#120822] border border-gray-200 dark:border-gray-800 rounded-3xl p-8 shadow-2xl overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-blue-500"></div>
<div class="text-center mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Standard Entry Pass</h2>
<p class="text-gray-500 dark:text-gray-400 text-sm">Access to premium daily quests</p>
</div>
<div class="text-center mb-8 relative">
<div class="inline-flex items-baseline justify-center">
<span class="text-6xl font-extrabold text-gray-900 dark:text-white tracking-tighter">₹99</span>
<span class="text-lg text-gray-500 ml-2 font-medium">/ quest</span>
</div>
<div class="mt-2 text-xs text-green-600 dark:text-green-400 font-semibold bg-green-100 dark:bg-green-900/30 px-3 py-1 rounded-full inline-block">
Usually ₹199 (50% OFF)
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-8">
<div class="flex flex-col items-center justify-center p-3 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-800 text-center">
<div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center text-green-600 dark:text-green-400 mb-2">
<span class="material-icons text-sm">payments</span>
</div>
<span class="text-xs font-semibold text-gray-700 dark:text-gray-300">Instant Payouts</span>
</div>
<div class="flex flex-col items-center justify-center p-3 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-800 text-center">
<div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 mb-2">
<span class="material-icons text-sm">public</span>
</div>
<span class="text-xs font-semibold text-gray-700 dark:text-gray-300">Global Rank</span>
</div>
<div class="flex flex-col items-center justify-center p-3 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-800 text-center">
<div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 mb-2">
<span class="material-icons text-sm">security</span>
</div>
<span class="text-xs font-semibold text-gray-700 dark:text-gray-300">Anti-Cheat</span>
</div>
</div>
<form action="#" class="space-y-4">
<div class="space-y-3">
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider">Select Payment Method</label>
<label class="flex items-center p-3 border border-primary bg-purple-50 dark:bg-primary/10 rounded-xl cursor-pointer transition-all relative">
<input checked="" class="w-4 h-4 text-primary border-gray-300 focus:ring-primary" name="payment" type="radio"/>
<div class="ml-3 flex items-center gap-3 w-full">
<div class="w-8 h-8 rounded bg-white flex items-center justify-center p-1">
<img alt="UPI" class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA-s0z3G9Qk8yQSw5HHqQmEN72qTVnbIXLVRmk4JbBSyOuagnaVlrzl-WEjw--kPdJ69Lp330fhOIUvU99yftvj882KuBN66Meq_iQlHNGbyMUhEbx3-wz2o1lOGH9z-b2pvrFSoW7P9IkNhAF002jIN9SDxiyFqGzSqmO8nlwv-FMaaJ2Ls41nuK1hTY9LY0h3eodNODHSngO_2f54bkclb6Hk0fzwd96-n9lVp5eUnEp5VNh6hxQU8Q5yfp6Oil7hdntRiNCS"/>
</div>
<div class="flex flex-col">
<span class="text-sm font-semibold text-gray-900 dark:text-white">UPI / QR Code</span>
<span class="text-xs text-gray-500 dark:text-gray-400">Google Pay, PhonePe, Paytm</span>
</div>
</div>
<div class="absolute right-3 top-3">
<span class="material-icons text-primary text-base">check_circle</span>
</div>
</label>
<label class="flex items-center p-3 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 rounded-xl cursor-pointer transition-all">
<input class="w-4 h-4 text-primary border-gray-300 focus:ring-primary" name="payment" type="radio"/>
<div class="ml-3 flex items-center gap-3">
<div class="w-8 h-8 rounded bg-white flex items-center justify-center p-1">
<span class="material-icons text-gray-600">credit_card</span>
</div>
<div class="flex flex-col">
<span class="text-sm font-semibold text-gray-900 dark:text-white">Credit / Debit Card</span>
<span class="text-xs text-gray-500 dark:text-gray-400">Visa, Mastercard</span>
</div>
</div>
</label>
</div>
<div class="pt-4">
<button class="group w-full bg-gradient-to-r from-primary to-purple-600 hover:from-primary-hover hover:to-purple-700 text-white font-bold py-4 px-6 rounded-xl shadow-lg shadow-purple-500/30 transform transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center gap-2" type="button">
<span class="material-icons text-xl group-hover:animate-bounce">bolt</span>
Pay & Join Now
</button>
<p class="text-center text-xs text-gray-400 dark:text-gray-500 mt-3 px-4 leading-normal">
By joining, you agree to our <a class="underline hover:text-gray-300" href="#">Terms of Service</a>. Entry fees are non-refundable once the quiz begins.
</p>
</div>
</form>
</div>
</div>
</div>
</main>
<footer class="w-full py-6 border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0B0516]">
<div class="max-w-6xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400 text-sm">
<span class="material-icons text-sm">sports_esports</span>
<span>© 2023 QuizQuest</span>
</div>
<div class="flex gap-6 text-sm text-gray-500 dark:text-gray-400">
<a class="hover:text-primary transition-colors" href="#">Privacy</a>
<a class="hover:text-primary transition-colors" href="#">Terms</a>
<a class="hover:text-primary transition-colors" href="#">Support</a>
</div>
</div>
</footer>
</body></html>