<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Subscription Plans</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Theme Config -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"primary-light": "#9d4dff",
"primary-dark": "#5e0eb0",
"background-light": "#f7f6f8",
"background-dark": "#191022",
"surface-dark": "#251b30",
"surface-light": "#ffffff",
"gold": "#FFD700",
"gold-glow": "rgba(255, 215, 0, 0.5)",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"],
"sans": ["Spline Sans", "sans-serif"],
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "1.5rem",
"xl": "2rem",
"2xl": "3rem",
"full": "9999px"
},
animation: {
'pulse-glow': 'pulse-glow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'float': 'float 6s ease-in-out infinite',
},
keyframes: {
'pulse-glow': {
'0%, 100%': { boxShadow: '0 0 15px 0px rgba(127, 19, 236, 0.3)' },
'50%': { boxShadow: '0 0 25px 5px rgba(127, 19, 236, 0.6)' },
},
'float': {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
}
},
},
}
</script>
<style>
/* Custom particle background effect */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.particle {
position: absolute;
border-radius: 50%;
background: rgba(127, 19, 236, 0.3);
animation: float-up 10s linear infinite;
}
@keyframes float-up {
0% { transform: translateY(100vh) scale(0); opacity: 0; }
50% { opacity: 0.8; }
100% { transform: translateY(-100px) scale(1.5); opacity: 0; }
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display min-h-screen flex flex-col overflow-x-hidden transition-colors duration-300">
<!-- Navbar -->
<header class="sticky top-0 z-50 w-full border-b border-slate-200 dark:border-white/10 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<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-symbols-outlined">sports_esports</span>
</div>
<span class="text-xl font-bold tracking-tight">QuizQuest</span>
</div>
<!-- Desktop Nav -->
<nav class="hidden md:flex gap-8 items-center">
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Features</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Tournaments</a>
<a class="text-sm font-medium text-primary" href="#">Pricing</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Login</a>
<button class="bg-primary hover:bg-primary-dark text-white text-sm font-bold px-5 py-2 rounded-full transition-all hover:scale-105">
Sign Up
</button>
</nav>
<!-- Mobile Menu Button -->
<button class="md:hidden p-2 rounded-lg hover:bg-slate-200 dark:hover:bg-white/10">
<span class="material-symbols-outlined">menu</span>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="relative flex-grow flex flex-col items-center justify-center py-16 px-4 sm:px-6 lg:px-8 z-10">
<!-- Animated Background Particles -->
<div class="particles">
<div class="particle" style="left: 10%; width: 4px; height: 4px; animation-duration: 12s; animation-delay: 0s;"></div>
<div class="particle" style="left: 30%; width: 6px; height: 6px; animation-duration: 15s; animation-delay: 2s;"></div>
<div class="particle" style="left: 70%; width: 3px; height: 3px; animation-duration: 8s; animation-delay: 4s;"></div>
<div class="particle" style="left: 50%; width: 5px; height: 5px; animation-duration: 18s; animation-delay: 1s;"></div>
<div class="particle" style="left: 90%; width: 4px; height: 4px; animation-duration: 10s; animation-delay: 6s;"></div>
</div>
<div class="relative w-full max-w-7xl mx-auto flex flex-col items-center gap-12">
<!-- Hero Text -->
<div class="text-center max-w-3xl mx-auto space-y-4 animate-float">
<span class="inline-block py-1 px-3 rounded-full bg-primary/20 text-primary text-xs font-bold uppercase tracking-wider border border-primary/30">
Premium Access
</span>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-black tracking-tight leading-tight">
Choose Your <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-400">Quest Pass</span>
</h1>
<p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
Unlock exclusive perks, double XP, and ad-free quizzes. Level up faster than ever before with our premium tiers.
</p>
</div>
<!-- Pricing Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full items-start pt-4">
<!-- Weekly (Novice) Plan -->
<div class="relative group bg-white dark:bg-surface-dark rounded-xl p-8 border border-slate-200 dark:border-white/10 hover:border-primary/50 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 flex flex-col gap-6 h-full">
<div class="space-y-2">
<h3 class="text-xl font-bold text-slate-500 dark:text-slate-400">Novice</h3>
<div class="flex items-baseline gap-1">
<span class="text-4xl font-black tracking-tight">$4.99</span>
<span class="text-slate-500 dark:text-slate-400 font-medium">/week</span>
</div>
<p class="text-sm text-slate-500 dark:text-slate-400">Perfect for quick sprints.</p>
</div>
<div class="h-px w-full bg-slate-200 dark:bg-white/10"></div>
<ul class="flex flex-col gap-4 flex-grow">
<li class="flex items-center gap-3 text-sm">
<span class="material-symbols-outlined text-primary">bolt</span>
<span>Double XP Boost</span>
</li>
<li class="flex items-center gap-3 text-sm">
<span class="material-symbols-outlined text-primary">block</span>
<span>Ad-free Experience</span>
</li>
<li class="flex items-center gap-3 text-sm">
<span class="material-symbols-outlined text-primary">history</span>
<span>Unlimited Replays</span>
</li>
</ul>
<button class="w-full py-3 px-6 rounded-full bg-slate-100 dark:bg-white/5 hover:bg-primary hover:text-white text-slate-900 dark:text-white font-bold transition-all duration-300 group-hover:shadow-lg mt-auto">
Start Trial
</button>
</div>
<!-- Monthly (Pro) Plan -->
<div class="relative group bg-white dark:bg-surface-dark rounded-xl p-8 border border-slate-200 dark:border-primary/30 shadow-[0_0_30px_-10px_rgba(127,19,236,0.2)] hover:shadow-[0_0_40px_-5px_rgba(127,19,236,0.4)] transition-all duration-300 hover:-translate-y-1 flex flex-col gap-6 h-full z-10 md:-mt-4 md:mb-4">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-primary text-white text-xs font-bold px-4 py-1 rounded-full uppercase tracking-wider shadow-lg">
Most Popular
</div>
<div class="space-y-2">
<h3 class="text-xl font-bold text-primary">Pro</h3>
<div class="flex items-baseline gap-1">
<span class="text-4xl font-black tracking-tight">$14.99</span>
<span class="text-slate-500 dark:text-slate-400 font-medium">/month</span>
</div>
<p class="text-sm text-slate-500 dark:text-slate-400">For the dedicated player.</p>
</div>
<div class="h-px w-full bg-slate-200 dark:bg-white/10"></div>
<ul class="flex flex-col gap-4 flex-grow">
<li class="flex items-center gap-3 text-sm font-medium">
<span class="material-symbols-outlined text-primary">check_circle</span>
<span>All Weekly Perks</span>
</li>
<li class="flex items-center gap-3 text-sm">
<span class="material-symbols-outlined text-primary">face</span>
<span>Exclusive Avatar Frames</span>
</li>
<li class="flex items-center gap-3 text-sm">
<span class="material-symbols-outlined text-primary">electric_bolt</span>
<span>Daily Power-ups</span>
</li>
<li class="flex items-center gap-3 text-sm">
<span class="material-symbols-outlined text-primary">leaderboard</span>
<span>Pro Leaderboard Access</span>
</li>
</ul>
<button class="w-full py-3 px-6 rounded-full bg-primary hover:bg-primary-dark text-white font-bold transition-all duration-300 shadow-lg shadow-primary/30 hover:shadow-primary/50 mt-auto scale-105">
Go Pro
</button>
</div>
<!-- Yearly (Legend) Plan -->
<div class="relative group bg-gradient-to-b from-surface-dark to-[#1a1325] dark:from-[#2a2036] dark:to-[#1f162a] rounded-xl p-8 border border-gold/50 hover:border-gold transition-all duration-300 hover:shadow-[0_0_30px_-5px_rgba(255,215,0,0.15)] hover:-translate-y-1 flex flex-col gap-6 h-full overflow-hidden">
<!-- Decorative background shine -->
<div class="absolute top-0 right-0 w-32 h-32 bg-gold/10 blur-[50px] rounded-full pointer-events-none"></div>
<div class="flex justify-between items-start">
<div class="space-y-2">
<h3 class="text-xl font-bold text-gold flex items-center gap-2">
<span class="material-symbols-outlined text-[20px] fill-current">military_tech</span>
Legend
</h3>
<div class="flex items-baseline gap-1">
<span class="text-4xl font-black tracking-tight text-white">$99.99</span>
<span class="text-slate-500 dark:text-slate-400 font-medium">/year</span>
</div>
</div>
<span class="inline-block bg-gold/20 text-gold border border-gold/30 text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">
Best Value
</span>
</div>
<p class="text-sm text-slate-500 dark:text-slate-400">Ultimate status. Ultimate rewards.</p>
<div class="h-px w-full bg-gradient-to-r from-transparent via-gold/30 to-transparent"></div>
<ul class="flex flex-col gap-4 flex-grow">
<li class="flex items-center gap-3 text-sm font-medium">
<span class="material-symbols-outlined text-gold">check_circle</span>
<span>All Monthly Perks</span>
</li>
<li class="flex items-center gap-3 text-sm">
<span class="material-symbols-outlined text-gold">trophy</span>
<span>VIP Tournaments Entry</span>
</li>
<li class="flex items-center gap-3 text-sm">
<span class="material-symbols-outlined text-gold">diamond</span>
<span>Legendary Status Icon</span>
</li>
<li class="flex items-center gap-3 text-sm">
<span class="material-symbols-outlined text-gold">workspace_premium</span>
<span>Direct Dev Support</span>
</li>
</ul>
<button class="w-full py-3 px-6 rounded-full bg-gradient-to-r from-yellow-600 to-yellow-500 hover:from-yellow-500 hover:to-yellow-400 text-slate-900 font-bold transition-all duration-300 shadow-lg shadow-yellow-500/20 hover:shadow-yellow-500/40 mt-auto border border-yellow-400/20">
Unlock Ultimate
</button>
</div>
</div>
<!-- Trust / Footer Area -->
<div class="w-full flex flex-col items-center gap-6 mt-8">
<p class="text-sm text-slate-500 dark:text-slate-500 text-center max-w-lg">
Cancel anytime. By subscribing, you agree to our <a class="text-primary hover:underline" href="#">Terms of Service</a> and <a class="text-primary hover:underline" href="#">Privacy Policy</a>.
</p>
<div class="flex gap-6 opacity-50 grayscale hover:grayscale-0 transition-all duration-500">
<!-- Just using placeholders for "payment partners" or "trusted by" look -->
<div class="h-8 flex items-center gap-2 text-slate-400 text-xs font-bold uppercase tracking-widest">
<span class="material-symbols-outlined">verified_user</span> Secure Payment
</div>
<div class="h-8 flex items-center gap-2 text-slate-400 text-xs font-bold uppercase tracking-widest">
<span class="material-symbols-outlined">lock</span> Encrypted
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="border-t border-slate-200 dark:border-white/10 bg-background-light dark:bg-background-dark py-10">
<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">
<div class="w-6 h-6 rounded bg-slate-800 dark:bg-white flex items-center justify-center text-white dark:text-background-dark text-xs">
<span class="material-symbols-outlined text-sm">sports_esports</span>
</div>
<span class="text-sm font-semibold text-slate-700 dark:text-slate-300">QuizQuest</span>
</div>
<div class="text-slate-500 text-sm">
© 2024 QuizQuest. All rights reserved.
</div>
<div class="flex gap-4">
<a class="text-slate-400 hover:text-primary transition-colors" href="#">
<span class="sr-only">Twitter</span>
<svg aria-hidden="true" class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
<a class="text-slate-400 hover:text-primary transition-colors" href="#">
<span class="sr-only">GitHub</span>
<svg aria-hidden="true" class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24">
<path clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" fill-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</footer>
</body></html>