<!DOCTYPE html>
<html lang="en"><head>
<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=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"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#2b6cee",
"primary-dark": "#1a4fb0",
"accent-purple": "#8b5cf6",
"background-light": "#f6f6f8",
"background-dark": "#101622",
"gold-light": "#FFF9E5",
"gold-border": "#FFEeba",
"gold-text": "#926f04",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
},
},
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #2b6cee 0%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
</style>
</head>
<body class="bg-background-light text-slate-900 font-display antialiased overflow-x-hidden">
<div class="relative flex min-h-screen w-full flex-col">
<!-- Header -->
<header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-slate-200 bg-white/80 backdrop-blur-md px-10 py-3">
<div class="flex items-center gap-4 text-slate-900">
<div class="size-8 text-primary">
<span class="material-symbols-outlined text-3xl">psychology</span>
</div>
<h2 class="text-slate-900 text-lg font-bold leading-tight tracking-[-0.015em]">QuizQuest</h2>
</div>
<div class="flex flex-1 justify-end gap-8">
<div class="hidden md:flex items-center gap-9">
<a class="text-slate-600 hover:text-primary text-sm font-medium leading-normal transition-colors" href="#">Features</a>
<a class="text-slate-900 text-sm font-medium leading-normal" href="#">Pricing</a>
<a class="text-slate-600 hover:text-primary text-sm font-medium leading-normal transition-colors" href="#">Community</a>
<a class="text-slate-600 hover:text-primary text-sm font-medium leading-normal transition-colors" href="#">Login</a>
</div>
<button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-primary hover:bg-primary-dark transition-colors text-white text-sm font-bold leading-normal tracking-[0.015em]">
<span class="truncate">Sign Up</span>
</button>
</div>
</header>
<main class="flex-1">
<!-- Hero Section -->
<section class="relative px-4 py-16 md:py-24 text-center overflow-hidden">
<!-- Abstract decorative background elements -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-4xl h-full opacity-30 pointer-events-none">
<div class="absolute top-10 left-10 w-64 h-64 bg-primary/20 rounded-full blur-3xl"></div>
<div class="absolute bottom-10 right-10 w-72 h-72 bg-accent-purple/20 rounded-full blur-3xl"></div>
</div>
<div class="relative z-10 max-w-3xl mx-auto flex flex-col items-center gap-6">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 border border-blue-100 text-primary text-sm font-medium">
<span class="material-symbols-outlined text-lg">celebration</span>
<span>Over 10,000+ active quizzers joined this month!</span>
</div>
<h1 class="text-slate-900 text-4xl md:text-6xl font-black leading-tight tracking-tight">
Choose Your <span class="gradient-text">Quest</span>
</h1>
<p class="text-slate-600 text-lg md:text-xl font-normal max-w-2xl leading-relaxed">
Unlock the full QuizQuest experience with our flexible plans.
Upgrade your brain training today.
</p>
<!-- Billing Toggle -->
<div class="flex items-center justify-center mt-6">
<div class="bg-white border border-slate-200 p-1 rounded-xl flex items-center shadow-sm">
<button class="px-6 py-2 rounded-lg text-sm font-bold text-slate-500 hover:text-slate-900 transition-colors">
Monthly
</button>
<button class="px-6 py-2 rounded-lg bg-primary text-white text-sm font-bold shadow-sm">
Yearly <span class="ml-1 text-blue-100 font-normal text-xs">(Save 20%)</span>
</button>
</div>
</div>
</div>
</section>
<!-- Pricing Grid -->
<section class="px-4 pb-20">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 items-start">
<!-- Free Plan -->
<div class="flex flex-col gap-6 rounded-2xl border border-slate-200 bg-white p-8 transition-all duration-300 card-hover">
<div class="flex flex-col gap-2">
<h3 class="text-slate-900 text-xl font-bold">Novice</h3>
<p class="text-slate-500 text-sm">Perfect for casual players just starting out.</p>
<div class="mt-4 flex items-baseline gap-1 text-slate-900">
<span class="text-4xl font-black tracking-tight">$0</span>
<span class="text-slate-500 font-medium">/mo</span>
</div>
</div>
<button class="w-full cursor-pointer items-center justify-center rounded-xl h-12 px-6 bg-slate-100 hover:bg-slate-200 text-slate-900 text-sm font-bold transition-colors">
Start Free
</button>
<div class="space-y-4 pt-4 border-t border-slate-100">
<div class="flex gap-3 text-slate-700 text-sm">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
<span>Basic access to 100+ quizzes</span>
</div>
<div class="flex gap-3 text-slate-700 text-sm">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
<span>Ad-supported experience</span>
</div>
<div class="flex gap-3 text-slate-700 text-sm">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
<span>Standard community support</span>
</div>
<div class="flex gap-3 text-slate-400 text-sm">
<span class="material-symbols-outlined text-xl">cancel</span>
<span class="line-through">Advanced analytics</span>
</div>
</div>
</div>
<!-- Pro Plan -->
<div class="flex flex-col gap-6 rounded-2xl border border-blue-100 bg-white p-8 transition-all duration-300 card-hover relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-accent-purple"></div>
<div class="flex flex-col gap-2">
<h3 class="text-primary text-xl font-bold">Pro</h3>
<p class="text-slate-500 text-sm">For serious quizzers who want no limits.</p>
<div class="mt-4 flex items-baseline gap-1 text-slate-900">
<span class="text-4xl font-black tracking-tight">$9.99</span>
<span class="text-slate-500 font-medium">/mo</span>
</div>
</div>
<button class="w-full cursor-pointer items-center justify-center rounded-xl h-12 px-6 bg-primary hover:bg-primary-dark text-white text-sm font-bold shadow-lg shadow-blue-500/20 transition-all">
Go Pro
</button>
<div class="space-y-4 pt-4 border-t border-slate-100">
<div class="flex gap-3 text-slate-700 text-sm">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
<span>Unlimited access to all quizzes</span>
</div>
<div class="flex gap-3 text-slate-700 text-sm">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
<span>Ad-free experience</span>
</div>
<div class="flex gap-3 text-slate-700 text-sm">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
<span>Advanced performance analytics</span>
</div>
<div class="flex gap-3 text-slate-700 text-sm">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
<span>Create custom quizzes</span>
</div>
</div>
</div>
<!-- Master Plan (Highlighted) -->
<div class="relative flex flex-col gap-6 rounded-2xl border border-gold-border bg-gold-light p-8 transition-all duration-300 transform md:-translate-y-4 shadow-xl shadow-yellow-500/10 z-10">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-gradient-to-r from-yellow-500 to-amber-600 text-white px-4 py-1 rounded-full text-xs font-bold tracking-wide uppercase shadow-sm">
Best Value
</div>
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between">
<h3 class="text-slate-900 text-xl font-bold">Master</h3>
<span class="material-symbols-outlined text-yellow-600">military_tech</span>
</div>
<p class="text-slate-600 text-sm">The ultimate elite experience.</p>
<div class="mt-4 flex items-baseline gap-1 text-slate-900">
<span class="text-4xl font-black tracking-tight">$99</span>
<span class="text-slate-600 font-medium">/yr</span>
</div>
<p class="text-xs text-green-600 font-bold mt-1">Save $20.88 per year</p>
</div>
<button class="w-full cursor-pointer items-center justify-center rounded-xl h-12 px-6 bg-slate-900 hover:bg-slate-800 text-white text-sm font-bold shadow-lg transition-all">
Join the Elite
</button>
<div class="space-y-4 pt-4 border-t border-yellow-200/60">
<div class="flex gap-3 text-slate-800 text-sm font-medium">
<span class="material-symbols-outlined text-yellow-600 text-xl">check_circle</span>
<span>Everything in Pro plan</span>
</div>
<div class="flex gap-3 text-slate-800 text-sm">
<span class="material-symbols-outlined text-yellow-600 text-xl">check_circle</span>
<span>Exclusive gold avatar frames</span>
</div>
<div class="flex gap-3 text-slate-800 text-sm">
<span class="material-symbols-outlined text-yellow-600 text-xl">check_circle</span>
<span>Priority VIP support (24/7)</span>
</div>
<div class="flex gap-3 text-slate-800 text-sm">
<span class="material-symbols-outlined text-yellow-600 text-xl">check_circle</span>
<span>Team access (up to 3 users)</span>
</div>
<div class="flex gap-3 text-slate-800 text-sm">
<span class="material-symbols-outlined text-yellow-600 text-xl">check_circle</span>
<span>Early access to beta features</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Trust Section -->
<section class="border-t border-slate-200 bg-white py-16">
<div class="max-w-7xl mx-auto px-4">
<div class="flex flex-col md:flex-row gap-12 items-center">
<div class="flex-1 space-y-6">
<h2 class="text-3xl font-bold text-slate-900">Trusted by Top Quizzers Worldwide</h2>
<p class="text-slate-600 leading-relaxed">
Join thousands of users who trust QuizQuest for their daily brain training.
We prioritize your privacy and ensure a secure, delightful learning environment.
</p>
<div class="grid grid-cols-2 gap-6">
<div class="flex gap-3">
<div class="p-2 bg-blue-50 rounded-lg h-fit text-primary">
<span class="material-symbols-outlined">verified_user</span>
</div>
<div>
<h4 class="font-bold text-slate-900 text-sm">Secure Payment</h4>
<p class="text-slate-500 text-xs mt-1">Encrypted transactions via Stripe.</p>
</div>
</div>
<div class="flex gap-3">
<div class="p-2 bg-blue-50 rounded-lg h-fit text-primary">
<span class="material-symbols-outlined">event_available</span>
</div>
<div>
<h4 class="font-bold text-slate-900 text-sm">Cancel Anytime</h4>
<p class="text-slate-500 text-xs mt-1">No hidden fees or lock-ins.</p>
</div>
</div>
</div>
</div>
<div class="flex-1 w-full relative">
<div class="grid grid-cols-2 gap-4">
<img class="rounded-2xl object-cover h-48 w-full shadow-lg" data-alt="Group of diverse students studying together happily" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA5tilGZKPhbY4i6wEt5FhGOh9plFUes49eKr7qW-F_i1wGr8mjYH3mv5Sj1f1Sloyrg5-B3J5SAqoYXneGmuwKhot6rUnr9Ao46BIbjB90v_pNHUIkPgkeszbxwaL18mztcFrJeoYPbAs2desON6oeX-NQmpU4MvW6xN0Swy73G2hvWtlStKvSPF6bQZGAhr2QZmRJ0oHuzWoEguDe8HcDIxY2H-cWoD9X-5l0_4uEH--GBXbZOofvMvED9i-xTM-Xx_pdK7_v"/>
<img class="rounded-2xl object-cover h-48 w-full shadow-lg mt-8" data-alt="Close up of person using tablet for learning" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAvSQtR3bOPZ_Nc_oVsoTDhCM1QFR6wY5NrwFasFUdhGDef9oEkA4a3-Ka3bCf4qaJbDXlYSKKjszvlOP6KOKLQlCfG06_PyASUIWT5QWp5BM4wq0MdFgP5yDKAIZ52h9bVzhKGo1wTHf2G3ZEzK4nTD4gBdrtR9OjyAnl424JT9X4fm1XyNwjn6pQibCwHWWRb5SarXvlmQIcHcbrTDugKA_aaTlFOAkw6yH5Y6y03cOFVmXifnX8Jz4Ls54fjgve3oz0MfPov"/>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-20 px-4 bg-background-light">
<div class="max-w-3xl mx-auto space-y-8">
<h2 class="text-2xl md:text-3xl font-bold text-center text-slate-900">Frequently Asked Questions</h2>
<div class="space-y-4">
<!-- FAQ Item 1 -->
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
<details class="group">
<summary class="flex justify-between items-center font-medium cursor-pointer list-none p-6 text-slate-900 hover:bg-slate-50 transition-colors">
<span>Can I change my plan later?</span>
<span class="transition group-open:rotate-180">
<span class="material-symbols-outlined">expand_more</span>
</span>
</summary>
<div class="text-slate-600 px-6 pb-6 pt-0">
Absolutely! You can upgrade or downgrade your plan at any time from your account settings. If you upgrade, the new features will be available immediately.
</div>
</details>
</div>
<!-- FAQ Item 2 -->
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
<details class="group">
<summary class="flex justify-between items-center font-medium cursor-pointer list-none p-6 text-slate-900 hover:bg-slate-50 transition-colors">
<span>Is there a free trial for the Pro plan?</span>
<span class="transition group-open:rotate-180">
<span class="material-symbols-outlined">expand_more</span>
</span>
</summary>
<div class="text-slate-600 px-6 pb-6 pt-0">
Yes, we offer a 7-day free trial for the Pro plan so you can experience unlimited quizzes and advanced analytics risk-free.
</div>
</details>
</div>
<!-- FAQ Item 3 -->
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
<details class="group">
<summary class="flex justify-between items-center font-medium cursor-pointer list-none p-6 text-slate-900 hover:bg-slate-50 transition-colors">
<span>What payment methods do you accept?</span>
<span class="transition group-open:rotate-180">
<span class="material-symbols-outlined">expand_more</span>
</span>
</summary>
<div class="text-slate-600 px-6 pb-6 pt-0">
We accept all major credit cards (Visa, Mastercard, American Express) as well as PayPal and Apple Pay.
</div>
</details>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-white border-t border-slate-200 py-10 px-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-2 text-slate-900">
<span class="material-symbols-outlined text-primary">psychology</span>
<span class="font-bold">QuizQuest</span>
</div>
<div class="text-slate-500 text-sm">
© 2023 QuizQuest Inc. All rights reserved.
</div>
<div class="flex gap-6">
<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>
</div>
</body></html>