<!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 Hub</title>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700;800&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"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#6D28D9",
"accent-yellow": "#FACC15",
"background-dark": "#0B0319",
"surface-dark": "#160C28",
"surface-highlight": "#24183D",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "1.5rem",
"xl": "2.5rem",
},
},
},
}
</script>
<style type="text/tailwindcss">
@layer base {
body {
font-family: 'Spline Sans', sans-serif;
}
}
.glow-card {
box-shadow: 0 0 20px rgba(109, 40, 217, 0.2);
transition: all 0.3s ease;
}
.glow-card:hover {
box-shadow: 0 0 30px rgba(109, 40, 217, 0.4);
transform: translateY(-5px);
}
.glow-text {
text-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
}
.tier-gradient-free {
background: linear-gradient(180deg, rgba(36, 24, 61, 1) 0%, rgba(22, 12, 40, 1) 100%);
}
.tier-gradient-premium {
background: linear-gradient(180deg, rgba(109, 40, 217, 0.2) 0%, rgba(22, 12, 40, 1) 100%);
border: 1px solid rgba(109, 40, 217, 0.4);
}
</style>
</head>
<body class="bg-background-dark text-slate-100 antialiased overflow-x-hidden">
<div class="flex min-h-screen flex-col">
<header class="sticky top-0 z-50 flex w-full items-center justify-between border-b border-white/5 bg-background-dark/80 px-6 py-4 backdrop-blur-md lg:px-20">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white shadow-[0_0_15px_rgba(109,40,217,0.5)]">
<span class="material-symbols-outlined">stadia_controller</span>
</div>
<span class="text-xl font-bold tracking-tight text-white">QuizQuest</span>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-sm font-medium text-slate-300 hover:text-white transition-colors" href="#">Home</a>
<a class="text-sm font-medium text-slate-300 hover:text-white transition-colors" href="#">Prizes</a>
<a class="text-sm font-medium text-slate-300 hover:text-white transition-colors" href="#">Leaderboard</a>
</nav>
<div class="flex items-center gap-4">
<button class="text-sm font-medium text-slate-300 hover:text-white">Login</button>
<button class="rounded-full bg-primary px-6 py-2.5 text-sm font-bold text-white shadow-lg hover:bg-primary/90">Join Now</button>
</div>
</header>
<main class="flex-1">
<section class="relative pt-16 pb-24 px-6 text-center lg:px-20 overflow-hidden">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-primary/20 blur-[120px] -z-10 rounded-full"></div>
<div class="inline-flex items-center gap-2 rounded-full bg-accent-yellow/10 px-4 py-1.5 border border-accent-yellow/20 mb-8">
<span class="h-2 w-2 rounded-full bg-accent-yellow animate-pulse"></span>
<span class="text-[10px] font-bold uppercase tracking-widest text-accent-yellow">Unlock Your Potential</span>
</div>
<h1 class="mx-auto max-w-4xl text-5xl font-black leading-[1.1] text-white md:text-7xl">
Elevate Your Game with <span class="text-primary glow-text">Premium</span>
</h1>
<p class="mx-auto mt-6 max-w-2xl text-lg text-slate-400">
Join the elite league of QuizQuest masters. Unlock exclusive perks, bigger prize pools, and status symbols that set you apart.
</p>
</section>
<section class="px-6 lg:px-20 pb-24">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<div class="glow-card flex flex-col rounded-xl bg-surface-dark border border-white/5 p-8 relative overflow-hidden group">
<div class="mb-6">
<h3 class="text-xl font-bold text-white">Weekly Pass</h3>
<p class="text-slate-400 text-sm mt-1">Perfect for a quick boost</p>
</div>
<div class="flex items-baseline gap-1 mb-8">
<span class="text-4xl font-black text-white">$4.99</span>
<span class="text-slate-400 text-sm">/week</span>
</div>
<ul class="flex-1 space-y-4 mb-8">
<li class="flex items-center gap-3 text-sm text-slate-300">
<span class="material-symbols-outlined text-emerald-400 text-lg">check_circle</span>
Double Daily Points
</li>
<li class="flex items-center gap-3 text-sm text-slate-300">
<span class="material-symbols-outlined text-emerald-400 text-lg">check_circle</span>
3× Bonus Entry Tokens
</li>
<li class="flex items-center gap-3 text-sm text-slate-300 opacity-40 line-through">
<span class="material-symbols-outlined text-slate-500 text-lg">close</span>
Exclusive Avatars
</li>
</ul>
<button class="w-full rounded-full bg-surface-highlight border border-white/10 py-3 text-sm font-bold text-white transition-all hover:bg-white/10">Get Weekly</button>
</div>
<div class="glow-card flex flex-col rounded-xl bg-surface-highlight border-2 border-primary p-8 relative overflow-hidden scale-105 shadow-[0_0_40px_rgba(109,40,217,0.3)]">
<div class="absolute top-0 right-0 bg-primary px-4 py-1 text-[10px] font-black uppercase tracking-widest rounded-bl-xl text-white">Best Value</div>
<div class="mb-6">
<h3 class="text-xl font-bold text-white">Monthly Pro</h3>
<p class="text-slate-400 text-sm mt-1">Our most popular choice</p>
</div>
<div class="flex items-baseline gap-1 mb-8">
<span class="text-4xl font-black text-white">$14.99</span>
<span class="text-slate-400 text-sm">/month</span>
</div>
<ul class="flex-1 space-y-4 mb-8">
<li class="flex items-center gap-3 text-sm text-white font-medium">
<span class="material-symbols-outlined text-primary text-lg">verified</span>
Triple Points Multiplier
</li>
<li class="flex items-center gap-3 text-sm text-slate-300">
<span class="material-symbols-outlined text-primary text-lg">verified</span>
Exclusive Legendary Avatars
</li>
<li class="flex items-center gap-3 text-sm text-slate-300">
<span class="material-symbols-outlined text-primary text-lg">verified</span>
Priority Support Access
</li>
<li class="flex items-center gap-3 text-sm text-slate-300">
<span class="material-symbols-outlined text-primary text-lg">verified</span>
Ad-Free Experience
</li>
</ul>
<button class="w-full rounded-full bg-primary py-3 text-sm font-bold text-white transition-all hover:scale-[1.02] shadow-lg shadow-primary/20">Go Premium Now</button>
</div>
<div class="glow-card flex flex-col rounded-xl bg-surface-dark border border-white/5 p-8 relative overflow-hidden group">
<div class="mb-6">
<h3 class="text-xl font-bold text-white">Yearly Legend</h3>
<p class="text-slate-400 text-sm mt-1">Ultimate gaming journey</p>
</div>
<div class="flex items-baseline gap-1 mb-8">
<span class="text-4xl font-black text-white">$119.99</span>
<span class="text-slate-400 text-sm">/year</span>
</div>
<ul class="flex-1 space-y-4 mb-8">
<li class="flex items-center gap-3 text-sm text-slate-300">
<span class="material-symbols-outlined text-emerald-400 text-lg">check_circle</span>
5× Points Multiplier
</li>
<li class="flex items-center gap-3 text-sm text-slate-300">
<span class="material-symbols-outlined text-emerald-400 text-lg">check_circle</span>
Custom Badge on Profile
</li>
<li class="flex items-center gap-3 text-sm text-slate-300">
<span class="material-symbols-outlined text-emerald-400 text-lg">check_circle</span>
Beta Access to New Quizzes
</li>
</ul>
<button class="w-full rounded-full bg-surface-highlight border border-white/10 py-3 text-sm font-bold text-white transition-all hover:bg-white/10">Subscribe Yearly</button>
</div>
</div>
</section>
<section class="px-6 lg:px-20 pb-24 max-w-5xl mx-auto">
<h2 class="text-3xl font-bold text-white mb-10 text-center">Compare Benefits</h2>
<div class="overflow-hidden rounded-xl border border-white/5 bg-surface-dark shadow-2xl">
<table class="w-full text-left">
<thead>
<tr class="bg-surface-highlight/50">
<th class="px-8 py-6 text-sm font-bold text-slate-400 uppercase tracking-widest">Features</th>
<th class="px-8 py-6 text-center text-sm font-bold text-slate-400 uppercase tracking-widest">Free Entry</th>
<th class="px-8 py-6 text-center text-sm font-bold text-primary uppercase tracking-widest">Premium</th>
</tr>
</thead>
<tbody class="divide-y divide-white/5">
<tr>
<td class="px-8 py-5 text-sm font-medium text-slate-300">Daily Quiz Access</td>
<td class="px-8 py-5 text-center"><span class="text-sm text-white font-semibold">Limited</span></td>
<td class="px-8 py-5 text-center bg-primary/5"><span class="text-sm text-primary font-bold">Unlimited</span></td>
</tr>
<tr>
<td class="px-8 py-5 text-sm font-medium text-slate-300">Prize Pool Multiplier</td>
<td class="px-8 py-5 text-center"><span class="text-sm text-slate-400">1.0x</span></td>
<td class="px-8 py-5 text-center bg-primary/5"><span class="text-sm text-primary font-bold">Up to 5.0x</span></td>
</tr>
<tr>
<td class="px-8 py-5 text-sm font-medium text-slate-300">Custom Avatar Profiles</td>
<td class="px-8 py-5 text-center"><span class="material-symbols-outlined text-slate-600">close</span></td>
<td class="px-8 py-5 text-center bg-primary/5"><span class="material-symbols-outlined text-primary">check</span></td>
</tr>
<tr>
<td class="px-8 py-5 text-sm font-medium text-slate-300">Ad-Free Play</td>
<td class="px-8 py-5 text-center"><span class="material-symbols-outlined text-slate-600">close</span></td>
<td class="px-8 py-5 text-center bg-primary/5"><span class="material-symbols-outlined text-primary">check</span></td>
</tr>
<tr>
<td class="px-8 py-5 text-sm font-medium text-slate-300">Instant Payouts</td>
<td class="px-8 py-5 text-center"><span class="text-sm text-slate-400">24h delay</span></td>
<td class="px-8 py-5 text-center bg-primary/5"><span class="text-sm text-primary font-bold">Immediate</span></td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="px-6 lg:px-20 pb-32">
<div class="max-w-3xl mx-auto">
<h2 class="text-3xl font-bold text-white mb-10 text-center">Frequently Asked Questions</h2>
<div class="space-y-4">
<div class="rounded-lg bg-surface-dark p-6 border border-white/5">
<h4 class="text-lg font-bold text-white mb-2">Can I cancel my subscription at any time?</h4>
<p class="text-slate-400 text-sm">Yes, you can cancel your subscription from your dashboard at any point. You'll keep your premium perks until the end of your billing cycle.</p>
</div>
<div class="rounded-lg bg-surface-dark p-6 border border-white/5">
<h4 class="text-lg font-bold text-white mb-2">Are there any hidden fees?</h4>
<p class="text-slate-400 text-sm">No hidden fees. The price you see is what you pay. No extra charges for entering quizzes while you have an active premium pass.</p>
</div>
<div class="rounded-lg bg-surface-dark p-6 border border-white/5">
<h4 class="text-lg font-bold text-white mb-2">What happens to my avatars if I unsubscribe?</h4>
<p class="text-slate-400 text-sm">Your exclusive avatars will be locked, but they remain in your inventory. You can use them again as soon as you re-subscribe.</p>
</div>
</div>
</div>
</section>
</main>
<footer class="border-t border-white/5 bg-surface-dark/50 py-12 px-6 lg:px-20">
<div class="flex flex-col md:flex-row justify-between items-center gap-8 max-w-7xl mx-auto">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20 text-primary">
<span class="material-symbols-outlined text-sm">stadia_controller</span>
</div>
<span class="text-sm font-bold text-white">QuizQuest © 2024</span>
</div>
<div class="flex gap-8 text-sm text-slate-400">
<a class="hover:text-white" href="#">Privacy Policy</a>
<a class="hover:text-white" href="#">Terms of Service</a>
<a class="hover:text-white" href="#">Support Center</a>
</div>
<div class="flex gap-4">
<a class="text-slate-400 hover:text-white" href="#"><span class="material-symbols-outlined">public</span></a>
<a class="text-slate-400 hover:text-white" href="#"><span class="material-symbols-outlined">alternate_email</span></a>
</div>
</div>
</footer>
</div>
</body></html>