<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Entry Pass Payment</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&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", // Vibrant purple
secondary: "#FFD700", // Gold/Yellow for accents
"background-light": "#F3F4F6",
"background-dark": "#050505", // Deep black
"surface-dark": "#0f0f13", // Slightly lighter black for cards
"surface-light": "#ffffff",
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
display: ['Outfit', 'sans-serif'],
},
borderRadius: {
DEFAULT: "0.75rem",
'xl': '1rem',
'2xl': '1.5rem',
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'hero-glow': 'radial-gradient(circle at 50% -20%, #4c1d95 0%, transparent 50%)',
}
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Outfit', sans-serif;
}
.glass-panel {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.glow-text {
text-shadow: 0 0 20px rgba(109, 40, 217, 0.5);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-gray-100 min-h-screen flex flex-col relative overflow-x-hidden selection:bg-primary selection:text-white">
<div class="fixed top-0 left-0 w-full h-full pointer-events-none overflow-hidden z-0">
<div class="absolute top-[-10%] left-1/2 transform -translate-x-1/2 w-[800px] h-[600px] bg-primary/20 blur-[120px] rounded-full mix-blend-screen"></div>
<div class="absolute bottom-[-10%] right-[-10%] w-[500px] h-[500px] bg-blue-600/10 blur-[100px] rounded-full mix-blend-screen"></div>
</div>
<nav class="relative z-50 w-full px-6 py-5 flex justify-between items-center max-w-7xl mx-auto">
<div class="flex items-center gap-2">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center shadow-lg shadow-primary/40">
<span class="material-icons text-white">sports_esports</span>
</div>
<span class="text-xl font-bold font-display tracking-tight 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>
<a class="bg-primary hover:bg-purple-600 text-white text-sm font-semibold px-6 py-2.5 rounded-full transition-all shadow-lg shadow-primary/30" href="#">Join Now</a>
</div>
</nav>
<main class="relative z-10 flex-grow flex items-center justify-center py-12 px-4 sm:px-6">
<div class="max-w-6xl w-full grid lg:grid-cols-12 gap-8 lg:gap-16 items-start">
<div class="lg:col-span-5 flex flex-col justify-center space-y-8 mt-4 lg:mt-0">
<div>
<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-500 text-xs font-bold uppercase tracking-wider mb-6">
<span class="w-2 h-2 rounded-full bg-yellow-500 animate-pulse"></span>
Limited Time Offer
</div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-4">
Unlock Your <br/>
<span class="text-yellow-400">Winning Streak.</span>
</h1>
<p class="text-lg text-gray-600 dark:text-gray-400 max-w-md">
Secure your Standard Entry Pass today and compete for the daily ₹5 Lakh prize pool.
</p>
</div>
<div class="glass-panel p-6 rounded-2xl border border-white/10 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-r from-primary/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<p class="text-xs text-gray-400 uppercase tracking-widest font-semibold mb-3">Offer Ends In</p>
<div class="flex items-baseline gap-4 font-mono text-3xl md:text-4xl font-bold tracking-widest text-white">
<div>00<span class="text-sm text-gray-500 ml-1 font-sans font-normal">H</span></div>
<div class="animate-pulse">:</div>
<div>14<span class="text-sm text-gray-500 ml-1 font-sans font-normal">M</span></div>
<div class="animate-pulse">:</div>
<div class="text-yellow-400">59<span class="text-sm text-gray-500 ml-1 font-sans font-normal">S</span></div>
</div>
</div>
<div class="space-y-4">
<div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
<div class="flex -space-x-2">
<img alt="User" class="w-8 h-8 rounded-full border-2 border-background-dark object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA7mdTqTBgu2JXix2LDOjEqKo_OB4MXy1PjMEATnENFeIOIztCcs9WJxov1c-00RwS6dYy3z-8pvPsrT_Qb796a_-ybxpLSmqti8qxPpJR9UHGrMNfoOHm0c0NXRltk-jaD_AmCGnrVfIB_geVNKtA3VubCXFMJfGrhO9FBxphGcLzTIlFLGHnO68Xixd0-Z6UkhMIJAkcvWR3SL0yCwaa-U31ftPV18JxteRTl0MM_jXedgiSILVgDwNA46j9edDeQNdbGapFaA9EB"/>
<img alt="User" class="w-8 h-8 rounded-full border-2 border-background-dark object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDpGoheBZEupZR3qEYHzAqshDOSVR7vjEFTIVbVUD2kgHkMxmXZuJw8G76odvMwRnwwyG1xi7wmZRaEavqDK4RNeEtA61W5L7iz68PxFn0g_RicK-3a0FU5ggNocdSmBjKwpUT0CJ-WNSu2urZ5_-o7OILeFyZZ3bGVZyWkSzhMWpIk7bBlgGKKAKQY5A8Bp-Pu0bCHe6GsDixMhQjlntJpvq45EghJ5k_L3rSOePVINcVYq1dkUgmdEQeovAguytUtuVPPR2v1-erm"/>
<img alt="User" class="w-8 h-8 rounded-full border-2 border-background-dark object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC1zfj9Ssd46Iy8j8HGvJNnm4o3vL0jxbjzwE8Mt7qOOkj8dEPsdRvusblezcEbVCMN7G7fsZVYh5sGO_vrh0hzUr6CmtOGfX-Orpi8haQg0rTzA4McJcwU1swT3qPBLdL3NsDTV-8B45wx4z71yNaOJjlfY8nkuQh8zcqA9XW1HX9FtkasG9K9wLJx_JrTtZ7OAEWFVvfqqq4hSUEPP1XBuqgwAUImE7SfbfhFU1rbKyDTZgXL_NPUn5xU-4wKI59IlLt9IKSnJGDq"/>
</div>
<p>Join <span class="text-white font-semibold">10k+ Players</span> online now</p>
</div>
<div class="flex items-center gap-6 text-xs font-medium text-gray-500 dark:text-gray-500">
<span class="flex items-center gap-1.5"><span class="material-icons text-green-500 text-base">verified_user</span> SSL Encrypted</span>
<span class="flex items-center gap-1.5"><span class="material-icons text-blue-500 text-base">security</span> 24/7 Support</span>
</div>
</div>
</div>
<div class="lg:col-span-7">
<div class="bg-white dark:bg-surface-dark rounded-3xl border border-gray-200 dark:border-white/10 shadow-2xl overflow-hidden">
<div class="p-8 pb-6 border-b border-gray-100 dark:border-white/5 bg-gray-50 dark:bg-white/5 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h3 class="text-xl font-bold font-display text-gray-900 dark:text-white">Standard Entry Pass</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Access to premium daily quests</p>
</div>
<div class="text-right">
<div class="text-3xl font-bold text-gray-900 dark:text-white">₹99 <span class="text-sm font-medium text-gray-500 dark:text-gray-400 font-sans">/ quest</span></div>
<div class="text-xs text-green-500 font-medium bg-green-500/10 px-2 py-0.5 rounded inline-block mt-1">Save 40% Today</div>
</div>
</div>
<div class="p-8 space-y-8">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="bg-gray-50 dark:bg-white/5 p-4 rounded-xl border border-gray-100 dark:border-white/5 flex flex-col items-center text-center group hover:border-primary/50 transition-colors cursor-default">
<div class="w-10 h-10 rounded-full bg-green-500/20 text-green-500 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
<span class="material-icons text-xl">payments</span>
</div>
<h4 class="font-semibold text-sm text-gray-900 dark:text-white mb-1">Instant Payouts</h4>
<p class="text-xs text-gray-500 dark:text-gray-400">Withdraw winnings immediately</p>
</div>
<div class="bg-gray-50 dark:bg-white/5 p-4 rounded-xl border border-gray-100 dark:border-white/5 flex flex-col items-center text-center group hover:border-primary/50 transition-colors cursor-default">
<div class="w-10 h-10 rounded-full bg-blue-500/20 text-blue-500 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
<span class="material-icons text-xl">public</span>
</div>
<h4 class="font-semibold text-sm text-gray-900 dark:text-white mb-1">Global Rank</h4>
<p class="text-xs text-gray-500 dark:text-gray-400">Compete on world leaderboard</p>
</div>
<div class="bg-gray-50 dark:bg-white/5 p-4 rounded-xl border border-gray-100 dark:border-white/5 flex flex-col items-center text-center group hover:border-primary/50 transition-colors cursor-default">
<div class="w-10 h-10 rounded-full bg-red-500/20 text-red-500 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
<span class="material-icons text-xl">gavel</span>
</div>
<h4 class="font-semibold text-sm text-gray-900 dark:text-white mb-1">Anti-Cheat</h4>
<p class="text-xs text-gray-500 dark:text-gray-400">Fair play protection enabled</p>
</div>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">Select Payment Method</label>
<div class="space-y-3">
<label class="relative flex items-center p-4 rounded-xl border-2 cursor-pointer transition-all border-primary bg-primary/5 dark:bg-primary/10">
<input checked="" class="w-5 h-5 text-primary border-gray-300 focus:ring-primary bg-transparent" name="payment_method" type="radio"/>
<div class="ml-4 flex-1 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center p-1 shadow-sm">
<span class="material-icons text-primary">qr_code_scanner</span>
</div>
<div>
<span class="block font-semibold text-gray-900 dark:text-white">UPI / QR Code</span>
<span class="block text-xs text-gray-500 dark:text-gray-400">GPay, PhonePe, Paytm</span>
</div>
</div>
<span class="text-xs font-medium text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-900/30 px-2 py-1 rounded">Fastest</span>
</div>
<div class="absolute right-4 top-4 hidden">
<span class="material-icons text-primary">check_circle</span>
</div>
</label>
<label class="relative flex items-center p-4 rounded-xl border border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 cursor-pointer transition-all bg-white dark:bg-white/5">
<input class="w-5 h-5 text-primary border-gray-300 focus:ring-primary bg-transparent" name="payment_method" type="radio"/>
<div class="ml-4 flex-1 flex items-center gap-3">
<div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center p-1 shadow-sm">
<span class="material-icons text-gray-600">credit_card</span>
</div>
<div>
<span class="block font-semibold text-gray-900 dark:text-white">Credit / Debit Card</span>
<span class="block text-xs text-gray-500 dark:text-gray-400">Visa, Mastercard, Rupay</span>
</div>
</div>
</label>
<label class="relative flex items-center p-4 rounded-xl border border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 cursor-pointer transition-all bg-white dark:bg-white/5">
<input class="w-5 h-5 text-primary border-gray-300 focus:ring-primary bg-transparent" name="payment_method" type="radio"/>
<div class="ml-4 flex-1 flex items-center gap-3">
<div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center p-1 shadow-sm">
<span class="material-icons text-gray-600">account_balance</span>
</div>
<div>
<span class="block font-semibold text-gray-900 dark:text-white">Net Banking</span>
<span class="block text-xs text-gray-500 dark:text-gray-400">All major banks supported</span>
</div>
</div>
</label>
</div>
</div>
<div class="pt-2">
<button class="w-full bg-primary hover:bg-purple-600 text-white font-bold py-4 px-6 rounded-xl shadow-lg shadow-primary/40 transform hover:-translate-y-0.5 transition-all flex items-center justify-center gap-2 group">
<span class="material-icons group-hover:animate-pulse">bolt</span>
Pay ₹99 & Join Quest
</button>
<p class="text-center text-xs text-gray-500 dark:text-gray-500 mt-4">
By joining, you agree to our Terms of Service. Entry fees are non-refundable once the quiz begins.
</p>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="relative z-10 w-full py-8 border-t border-gray-200 dark:border-white/5 mt-auto">
<div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-500 dark:text-gray-500">
<div class="flex items-center gap-2">
<span class="material-icons text-base">sports_esports</span>
<span>© 2023 QuizQuest Inc.</span>
</div>
<div class="flex gap-6">
<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>