<html class="dark" lang="en"><head><script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7c3aed", // Violet-600 based on the "Join Now" button
secondary: "#fbbf24", // Amber-400 for gold accents
"background-light": "#f3f4f6", // Gray-100
"background-dark": "#0f0c29", // Deep purple/black background
"card-dark": "#1a163a", // Slightly lighter dark background for cards
"card-light": "#ffffff", // White for light mode cards
},
fontFamily: {
display: ["Inter", "sans-serif"],
body: ["Inter", "sans-serif"],
},
backgroundImage: {
'hero-gradient': 'linear-gradient(to right bottom, #2e1065, #0f0c29)',
'purple-gradient': 'linear-gradient(90deg, #7c3aed 0%, #a78bfa 100%)',
}
},
},
};
</script>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Subscription Plans</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<style>
body {
font-family: 'Inter', sans-serif;
}::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0f0c29;
}
::-webkit-scrollbar-thumb {
background: #3730a3;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #4f46e5;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-white transition-colors duration-300 min-h-screen flex flex-col">
<nav class="w-full py-4 px-6 md:px-12 flex justify-between items-center z-50 bg-white/80 dark:bg-opacity-50 dark:bg-background-dark backdrop-blur-md sticky top-0 border-b border-gray-200 dark:border-white/10">
<div class="flex items-center gap-3 cursor-pointer">
<div class="w-10 h-10 rounded-xl bg-primary flex items-center justify-center text-white">
<span class="material-icons">sports_esports</span>
</div>
<span class="text-xl font-bold tracking-wide">QuizQuest</span>
</div>
<div class="hidden md:flex items-center gap-8 text-sm font-medium 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>
<a class="text-primary dark:text-white font-semibold" href="#">Pro Pass</a>
</div>
<div class="flex items-center gap-4">
<button class="hidden md:block text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Login</button>
<button class="bg-primary hover:bg-violet-700 text-white px-6 py-2 rounded-full font-semibold text-sm transition-all shadow-lg shadow-primary/30">
Join Now
</button>
<button class="p-2 rounded-full bg-gray-200 dark:bg-white/10 text-gray-600 dark:text-gray-300" onclick="document.documentElement.classList.toggle('dark')">
<span class="material-icons text-sm">brightness_4</span>
</button>
</div>
</nav>
<header class="relative pt-16 pb-12 px-6 text-center overflow-hidden">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full max-w-5xl opacity-30 pointer-events-none">
<div class="absolute top-10 left-10 w-64 h-64 bg-primary rounded-full blur-[100px]"></div>
<div class="absolute bottom-10 right-10 w-64 h-64 bg-blue-600 rounded-full blur-[100px]"></div>
</div>
<div class="relative z-10 max-w-3xl mx-auto">
<span class="inline-block py-1 px-3 rounded-full bg-secondary/20 text-secondary text-xs font-bold tracking-wider mb-4 border border-secondary/30">
LEVEL UP YOUR GAME
</span>
<h1 class="text-4xl md:text-6xl font-extrabold mb-6 leading-tight">
Unlock Exclusive <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-pink-500">Powers</span>
</h1>
<p class="text-gray-600 dark:text-gray-400 text-lg md:text-xl mb-8 max-w-2xl mx-auto">
Join the elite league of quizzers. Get unlimited access, exclusive tournaments, and double XP rewards with QuizQuest Pro.
</p>
<div class="flex items-center justify-center gap-4 mb-8">
<span class="text-sm font-semibold text-gray-500 dark:text-gray-400">Monthly</span>
<div class="relative w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full p-1 cursor-pointer flex items-center transition-colors">
<div class="w-6 h-6 bg-white rounded-full shadow-md transform translate-x-6"></div>
</div>
<span class="text-sm font-semibold text-white">Yearly <span class="text-secondary text-xs ml-1">-20% OFF</span></span>
</div>
</div>
</header>
<section class="px-6 md:px-12 pb-24 max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-start">
<div class="relative group bg-card-light dark:bg-card-dark border border-gray-200 dark:border-white/10 rounded-3xl p-8 hover:-translate-y-2 transition-transform duration-300 shadow-xl">
<div class="mb-6">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Explorer</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Perfect for casual quizzers</p>
</div>
<div class="mb-8 flex items-end gap-1">
<span class="text-4xl font-extrabold text-gray-900 dark:text-white">₹49</span>
<span class="text-gray-500 dark:text-gray-400 mb-1">/ week</span>
</div>
<button class="w-full py-3 rounded-xl border-2 border-primary text-primary dark:text-white font-bold hover:bg-primary hover:text-white transition-colors mb-8">
Start Weekly
</button>
<ul class="space-y-4">
<li class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300">
<span class="material-icons text-green-500 text-lg">check_circle</span>
<span>Unlimited Standard Quizzes</span>
</li>
<li class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300">
<span class="material-icons text-green-500 text-lg">check_circle</span>
<span>Ad-free Experience</span>
</li>
<li class="flex items-center gap-3 text-sm text-gray-400 dark:text-gray-600">
<span class="material-icons text-lg">cancel</span>
<span>No XP Boost</span>
</li>
<li class="flex items-center gap-3 text-sm text-gray-400 dark:text-gray-600">
<span class="material-icons text-lg">cancel</span>
<span>No Exclusive Tournaments</span>
</li>
</ul>
</div>
<div class="relative md:-mt-8 bg-card-light dark:bg-[#1e1a45] border-2 border-secondary rounded-3xl p-8 shadow-2xl shadow-secondary/20 z-10 scale-105 md:scale-100 transform">
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-secondary text-black font-bold text-xs py-1 px-4 rounded-full uppercase tracking-wider shadow-lg">
Best Value
</div>
<div class="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-secondary/20 to-transparent rounded-bl-full rounded-tr-3xl"></div>
<div class="mb-6 relative">
<h3 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-secondary to-yellow-200 mb-2">Legend</h3>
<p class="text-sm text-gray-400">For the ultimate champions</p>
</div>
<div class="mb-8 flex items-end gap-1">
<span class="text-5xl font-extrabold text-white">₹999</span>
<span class="text-gray-400 mb-1">/ year</span>
</div>
<button class="w-full py-4 rounded-xl bg-gradient-to-r from-secondary to-yellow-400 text-black font-bold hover:shadow-lg hover:shadow-yellow-500/30 transition-all mb-8 flex items-center justify-center gap-2">
<span class="material-icons text-sm">auto_awesome</span>
Go Legendary
</button>
<div class="h-px w-full bg-white/10 mb-8"></div>
<ul class="space-y-4">
<li class="flex items-center gap-3 text-sm font-medium text-white">
<span class="material-icons text-secondary text-lg">verified</span>
<span>All Monthly Benefits</span>
</li>
<li class="flex items-center gap-3 text-sm font-medium text-white">
<span class="material-icons text-secondary text-lg">verified</span>
<span><strong>2x XP Boost</strong> on all games</span>
</li>
<li class="flex items-center gap-3 text-sm font-medium text-white">
<span class="material-icons text-secondary text-lg">verified</span>
<span>Exclusive "Legend" Avatar Frame</span>
</li>
<li class="flex items-center gap-3 text-sm font-medium text-white">
<span class="material-icons text-secondary text-lg">verified</span>
<span>Priority Support 24/7</span>
</li>
<li class="flex items-center gap-3 text-sm font-medium text-white">
<span class="material-icons text-secondary text-lg">verified</span>
<span>Early Access to New Modes</span>
</li>
</ul>
</div>
<div class="relative group bg-card-light dark:bg-card-dark border border-gray-200 dark:border-white/10 rounded-3xl p-8 hover:-translate-y-2 transition-transform duration-300 shadow-xl">
<div class="mb-6">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Challenger</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Serious about winning</p>
</div>
<div class="mb-8 flex items-end gap-1">
<span class="text-4xl font-extrabold text-gray-900 dark:text-white">₹149</span>
<span class="text-gray-500 dark:text-gray-400 mb-1">/ month</span>
</div>
<button class="w-full py-3 rounded-xl bg-primary/20 border border-primary text-primary dark:text-white font-bold hover:bg-primary hover:text-white transition-colors mb-8">
Get Monthly Pass
</button>
<ul class="space-y-4">
<li class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300">
<span class="material-icons text-green-500 text-lg">check_circle</span>
<span>Unlimited Quizzes</span>
</li>
<li class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300">
<span class="material-icons text-green-500 text-lg">check_circle</span>
<span>Access to Premium Tournaments</span>
</li>
<li class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300">
<span class="material-icons text-green-500 text-lg">check_circle</span>
<span>Detailed Performance Stats</span>
</li>
<li class="flex items-center gap-3 text-sm text-gray-400 dark:text-gray-600">
<span class="material-icons text-lg">cancel</span>
<span>No XP Boost</span>
</li>
</ul>
</div>
</div>
</section>
<section class="bg-white dark:bg-[#14102e] py-20 px-6 border-t border-gray-200 dark:border-white/5">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-900 dark:text-white">Frequently Asked Questions</h2>
<div class="space-y-4">
<div class="group bg-gray-50 dark:bg-card-dark rounded-2xl p-6 cursor-pointer hover:bg-gray-100 dark:hover:bg-[#252050] transition-colors border border-gray-200 dark:border-white/5">
<details class="group">
<summary class="flex justify-between items-center font-semibold text-lg list-none text-gray-800 dark:text-white">
<span>Can I cancel my subscription anytime?</span>
<span class="transition group-open:rotate-180">
<span class="material-icons">expand_more</span>
</span>
</summary>
<p class="text-gray-600 dark:text-gray-400 mt-4 leading-relaxed">
Absolutely! You can cancel your subscription at any time from your account settings. Your benefits will continue until the end of your current billing period.
</p>
</details>
</div>
<div class="group bg-gray-50 dark:bg-card-dark rounded-2xl p-6 cursor-pointer hover:bg-gray-100 dark:hover:bg-[#252050] transition-colors border border-gray-200 dark:border-white/5">
<details class="group">
<summary class="flex justify-between items-center font-semibold text-lg list-none text-gray-800 dark:text-white">
<span>How does the 2x XP Boost work?</span>
<span class="transition group-open:rotate-180">
<span class="material-icons">expand_more</span>
</span>
</summary>
<p class="text-gray-600 dark:text-gray-400 mt-4 leading-relaxed">
The 2x XP Boost is automatically applied to every quiz you complete while your Legend subscription is active. This helps you climb the leaderboards twice as fast!
</p>
</details>
</div>
<div class="group bg-gray-50 dark:bg-card-dark rounded-2xl p-6 cursor-pointer hover:bg-gray-100 dark:hover:bg-[#252050] transition-colors border border-gray-200 dark:border-white/5">
<details class="group">
<summary class="flex justify-between items-center font-semibold text-lg list-none text-gray-800 dark:text-white">
<span>Are the exclusive tournaments really cash prizes?</span>
<span class="transition group-open:rotate-180">
<span class="material-icons">expand_more</span>
</span>
</summary>
<p class="text-gray-600 dark:text-gray-400 mt-4 leading-relaxed">
Yes! Our premium tournaments feature larger prize pools, including cash rewards, gadgets, and gift cards, which are distributed to top rankers immediately after the tournament ends.
</p>
</details>
</div>
<div class="group bg-gray-50 dark:bg-card-dark rounded-2xl p-6 cursor-pointer hover:bg-gray-100 dark:hover:bg-[#252050] transition-colors border border-gray-200 dark:border-white/5">
<details class="group">
<summary class="flex justify-between items-center font-semibold text-lg list-none text-gray-800 dark:text-white">
<span>What happens if I upgrade from Monthly to Yearly?</span>
<span class="transition group-open:rotate-180">
<span class="material-icons">expand_more</span>
</span>
</summary>
<p class="text-gray-600 dark:text-gray-400 mt-4 leading-relaxed">
We will pro-rate your remaining monthly time and apply it as a discount towards your new Yearly plan, so you never pay for the same time twice.
</p>
</details>
</div>
</div>
</div>
</section>
<footer class="mt-auto bg-gray-100 dark:bg-black py-12 px-6 border-t border-gray-200 dark:border-white/10">
<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-3">
<div class="w-8 h-8 rounded-lg bg-gray-800 dark:bg-gray-700 flex items-center justify-center text-white">
<span class="material-icons text-sm">sports_esports</span>
</div>
<span class="text-gray-600 dark:text-gray-400 font-medium">© 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 Policy</a>
<a class="hover:text-primary transition-colors" href="#">Terms of Service</a>
<a class="hover:text-primary transition-colors" href="#">Support</a>
</div>
<div class="flex gap-4">
<a class="w-8 h-8 rounded-full bg-gray-200 dark:bg-white/10 flex items-center justify-center hover:bg-primary hover:text-white transition-colors text-gray-600 dark:text-gray-400" href="#">
<span class="material-icons text-sm">facebook</span>
</a>
<a class="w-8 h-8 rounded-full bg-gray-200 dark:bg-white/10 flex items-center justify-center hover:bg-primary hover:text-white transition-colors text-gray-600 dark:text-gray-400" href="#">
<span class="material-icons text-sm">alternate_email</span>
</a>
</div>
</div>
</footer>
</body></html>