<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Premium Subscriptions</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@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", // Vivid Purple from button
secondary: "#FBBF24", // Gold/Yellow from text highlights
"primary-hover": "#5B21B6",
"dark-bg": "#0B0C15", // Deep dark background
"card-dark": "#161827", // Slightly lighter card bg
"card-border": "#2D2F45",
"accent-purple": "#8B5CF6",
"background-light": "#F3F4F6", // Light mode bg (fallback)
"background-dark": "#050505", // Dark mode bg
},
fontFamily: {
display: ["'Plus Jakarta Sans'", "sans-serif"],
},
borderRadius: {
DEFAULT: "1rem",
'xl': '1.5rem',
'2xl': '2rem',
},
backgroundImage: {
'purple-gradient': 'linear-gradient(135deg, #6D28D9 0%, #4C1D95 100%)',
'gold-gradient': 'linear-gradient(135deg, #F59E0B 0%, #B45309 100%)',
'dark-gradient': 'radial-gradient(circle at top center, #1E1B4B 0%, #050505 60%)',
}
},
},
};
</script>
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
.glow-effect {
box-shadow: 0 0 40px -10px rgba(109, 40, 217, 0.3);
}
.gold-glow {
box-shadow: 0 0 30px -5px rgba(251, 191, 36, 0.3);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-white min-h-screen flex flex-col font-display antialiased selection:bg-primary selection:text-white">
<nav class="fixed top-0 w-full z-50 backdrop-blur-md bg-white/80 dark:bg-[#0B0C15]/80 border-b border-gray-200 dark:border-white/5">
<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 items-center gap-3">
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white">
<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 space-x-8">
<a class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors" href="#">Home</a>
<a class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors" href="#">Prizes</a>
<a class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors" href="#">Leaderboard</a>
<a class="text-sm font-medium text-primary dark:text-white hover:text-primary transition-colors" href="#">Premium Plans</a>
</div>
<div class="flex items-center gap-4">
<a class="text-sm font-medium text-gray-600 dark:text-white hover:text-primary transition-colors hidden sm:block" href="#">Login</a>
<a class="px-6 py-2.5 rounded-full bg-primary hover:bg-primary-hover text-white text-sm font-bold transition-all shadow-lg shadow-primary/30" href="#">
Join Now
</a>
</div>
</div>
</div>
</nav>
<main class="flex-grow pt-32 pb-20 relative overflow-hidden">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[800px] bg-dark-gradient opacity-80 -z-10 pointer-events-none"></div>
<div class="absolute top-20 right-0 w-[500px] h-[500px] bg-primary/20 rounded-full blur-[120px] -z-10"></div>
<div class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-secondary/10 rounded-full blur-[100px] -z-10"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-secondary/10 border border-secondary/20 text-secondary text-xs font-bold uppercase tracking-wider mb-6">
<span class="w-2 h-2 rounded-full bg-secondary animate-pulse"></span>
Level Up Your Game
</div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mb-6">
Unlock Premium <span class="text-secondary">Powers.</span><br/>
Dominating the Arena.
</h1>
<p class="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
Subscribe to QuizQuest Premium for exclusive perks, double points, and ad-free gaming. Choose the plan that fits your strategy.
</p>
</div>
<div class="flexjustify-center mb-12 hidden">
<div class="inline-flex bg-gray-200 dark:bg-card-dark p-1 rounded-full border border-gray-300 dark:border-card-border">
<button class="px-6 py-2 rounded-full bg-white dark:bg-primary text-gray-900 dark:text-white shadow-sm text-sm font-bold">Billed Monthly</button>
<button class="px-6 py-2 rounded-full text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white text-sm font-medium transition-colors">Billed Yearly</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
<div class="group relative bg-white dark:bg-card-dark rounded-2xl border border-gray-200 dark:border-card-border p-8 hover:border-primary/50 transition-all duration-300 hover:shadow-2xl hover:shadow-primary/10 hover:-translate-y-2">
<div class="absolute top-0 left-0 w-full h-1 bg-gray-300 dark:bg-gray-700 rounded-t-2xl group-hover:bg-primary transition-colors"></div>
<div class="flex items-center justify-between mb-6">
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Weekly Pass</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">For casual players</p>
</div>
<div class="w-12 h-12 rounded-xl bg-gray-100 dark:bg-white/5 flex items-center justify-center text-gray-400 dark:text-gray-300">
<span class="material-icons">calendar_view_week</span>
</div>
</div>
<div class="mb-8">
<div class="flex items-baseline 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 font-medium">/ week</span>
</div>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-start gap-3 text-gray-600 dark:text-gray-300 text-sm">
<span class="material-icons text-green-500 text-lg">check_circle</span>
<span>Ad-Free Experience</span>
</li>
<li class="flex items-start gap-3 text-gray-600 dark:text-gray-300 text-sm">
<span class="material-icons text-green-500 text-lg">check_circle</span>
<span>1.2x Point Multiplier</span>
</li>
<li class="flex items-start gap-3 text-gray-600 dark:text-gray-300 text-sm">
<span class="material-icons text-green-500 text-lg">check_circle</span>
<span>Standard Support</span>
</li>
<li class="flex items-start gap-3 text-gray-400 dark:text-gray-600 text-sm">
<span class="material-icons text-lg">cancel</span>
<span class="line-through">Exclusive Avatar Frames</span>
</li>
</ul>
<button class="w-full py-3.5 rounded-xl border-2 border-gray-200 dark:border-card-border text-gray-900 dark:text-white font-bold hover:border-primary hover:text-primary dark:hover:border-primary dark:hover:text-primary transition-all">
Get Started
</button>
</div>
<div class="relative bg-white dark:bg-[#1A1C2E] rounded-2xl border-2 border-secondary p-8 transform md:scale-105 shadow-2xl z-10 gold-glow">
<div class="absolute -top-5 left-1/2 -translate-x-1/2 bg-secondary text-black text-xs font-black uppercase tracking-widest py-1.5 px-4 rounded-full shadow-lg">
Most Popular
</div>
<div class="flex items-center justify-between mb-6">
<div>
<h3 class="text-2xl font-bold text-gray-900 dark:text-white">Monthly Elite</h3>
<p class="text-sm text-secondary mt-1">Unlock serious rewards</p>
</div>
<div class="w-12 h-12 rounded-xl bg-secondary/20 flex items-center justify-center text-secondary">
<span class="material-icons">star</span>
</div>
</div>
<div class="mb-8">
<div class="flex items-baseline gap-1">
<span class="text-5xl font-extrabold text-gray-900 dark:text-white">₹149</span>
<span class="text-gray-500 dark:text-gray-400 font-medium">/ month</span>
</div>
<p class="text-xs text-green-600 dark:text-green-400 mt-2 font-medium">Save 25% vs Weekly</p>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-start gap-3 text-gray-800 dark:text-white text-sm font-medium">
<span class="material-icons text-secondary text-lg">verified</span>
<span>Ad-Free Experience</span>
</li>
<li class="flex items-start gap-3 text-gray-800 dark:text-white text-sm font-medium">
<span class="material-icons text-secondary text-lg">verified</span>
<span>Double Points (2x)</span>
</li>
<li class="flex items-start gap-3 text-gray-800 dark:text-white text-sm font-medium">
<span class="material-icons text-secondary text-lg">verified</span>
<span>Priority Support</span>
</li>
<li class="flex items-start gap-3 text-gray-800 dark:text-white text-sm font-medium">
<span class="material-icons text-secondary text-lg">verified</span>
<span>1 Free 'Skip Question' / day</span>
</li>
<li class="flex items-start gap-3 text-gray-800 dark:text-white text-sm font-medium">
<span class="material-icons text-secondary text-lg">verified</span>
<span>Exclusive Gold Frame</span>
</li>
</ul>
<button class="w-full py-4 rounded-xl bg-primary hover:bg-primary-hover text-white font-bold shadow-lg shadow-primary/40 transition-all hover:shadow-xl hover:shadow-primary/50 flex items-center justify-center gap-2">
Subscribe Now <span class="material-icons text-sm">arrow_forward</span>
</button>
</div>
<div class="group relative bg-white dark:bg-card-dark rounded-2xl border border-gray-200 dark:border-card-border p-8 hover:border-primary/50 transition-all duration-300 hover:shadow-2xl hover:shadow-primary/10 hover:-translate-y-2">
<div class="absolute top-0 left-0 w-full h-1 bg-primary rounded-t-2xl"></div>
<div class="flex items-center justify-between mb-6">
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Yearly Legend</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">For the champions</p>
</div>
<div class="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center text-primary">
<span class="material-icons">emoji_events</span>
</div>
</div>
<div class="mb-8">
<div class="flex items-baseline gap-1">
<span class="text-4xl font-extrabold text-gray-900 dark:text-white">₹1499</span>
<span class="text-gray-500 dark:text-gray-400 font-medium">/ year</span>
</div>
<p class="text-xs text-green-600 dark:text-green-400 mt-2 font-medium">Best Value (Save 40%)</p>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-start gap-3 text-gray-600 dark:text-gray-300 text-sm">
<span class="material-icons text-primary text-lg">check_circle</span>
<span>Everything in Monthly</span>
</li>
<li class="flex items-start gap-3 text-gray-600 dark:text-gray-300 text-sm">
<span class="material-icons text-primary text-lg">check_circle</span>
<span>Triple Points (3x) on weekends</span>
</li>
<li class="flex items-start gap-3 text-gray-600 dark:text-gray-300 text-sm">
<span class="material-icons text-primary text-lg">check_circle</span>
<span>VIP Dedicated Support</span>
</li>
<li class="flex items-start gap-3 text-gray-600 dark:text-gray-300 text-sm">
<span class="material-icons text-primary text-lg">check_circle</span>
<span>Early Access to New Quizzes</span>
</li>
<li class="flex items-start gap-3 text-gray-600 dark:text-gray-300 text-sm">
<span class="material-icons text-primary text-lg">check_circle</span>
<span>Legendary Animated Frame</span>
</li>
</ul>
<button class="w-full py-3.5 rounded-xl border-2 border-gray-200 dark:border-card-border text-gray-900 dark:text-white font-bold hover:border-primary hover:text-primary dark:hover:border-primary dark:hover:text-primary transition-all">
Join Legends
</button>
</div>
</div>
<div class="mt-16 text-center">
<p class="text-gray-500 dark:text-gray-400 text-sm mb-4">
Secure Payment via Card, UPI, or use your accumulated <span class="text-secondary font-bold">Affiliate Points</span>
</p>
<div class="flex justify-center items-center gap-6 opacity-60 grayscale hover:grayscale-0 transition-all duration-300">
<div class="flex items-center gap-1 text-gray-600 dark:text-gray-400">
<span class="material-icons">credit_card</span>
<span class="text-xs font-bold">VISA</span>
</div>
<div class="flex items-center gap-1 text-gray-600 dark:text-gray-400">
<span class="material-icons">account_balance_wallet</span>
<span class="text-xs font-bold">Mastercard</span>
</div>
<div class="flex items-center gap-1 text-gray-600 dark:text-gray-400">
<span class="material-icons">qr_code</span>
<span class="text-xs font-bold">UPI</span>
</div>
</div>
</div>
<div class="mt-24 relative overflow-hidden rounded-3xl bg-gradient-to-r from-[#1E1B4B] to-[#0F0F1A] border border-white/10 p-8 md:p-12 text-center shadow-2xl">
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/20 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2"></div>
<h2 class="text-2xl md:text-3xl font-bold text-white mb-4 relative z-10">
Not ready to commit? Try a Single Quest.
</h2>
<p class="text-gray-400 mb-8 max-w-2xl mx-auto relative z-10">
Jump into the action instantly with our Standard Entry Pass. One low fee, massive potential prizes.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 relative z-10">
<button class="px-8 py-3 rounded-full bg-white/10 hover:bg-white/20 text-white font-semibold backdrop-blur-sm border border-white/10 transition-all">
Learn More
</button>
<button class="px-8 py-3 rounded-full bg-primary hover:bg-primary-hover text-white font-bold shadow-lg shadow-primary/30 transition-all flex items-center gap-2">
<span class="material-icons text-sm">bolt</span> Buy Entry Pass - ₹99
</button>
</div>
</div>
</div>
</main>
<footer class="border-t border-gray-200 dark:border-white/5 bg-gray-50 dark:bg-black py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2 text-gray-600 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 items-center gap-8">
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white transition-colors" href="#">Privacy</a>
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white transition-colors" href="#">Terms</a>
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white transition-colors" href="#">Support</a>
</div>
</div>
</footer>
</body></html>