<!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 - FAQ & Support Hub</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@500;700;900&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>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7C3AED", // Violet-600
"primary-hover": "#6D28D9", // Violet-700
"accent-yellow": "#FACC15", // Yellow-400
"background-light": "#F3F4F6", // Gray-100
"background-dark": "#0F0720", // Very dark purple/black
"card-dark": "#1A1033", // Dark purple card bg
"card-light": "#FFFFFF",
"text-light": "#1F2937", // Gray-800
"text-dark": "#F3F4F6", // Gray-100
"glass-dark": "rgba(255, 255, 255, 0.05)",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
backgroundImage: {
'hero-gradient': 'radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.15) 0%, rgba(15, 7, 32, 0) 50%)',
'card-gradient': 'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%)',
'glow': 'conic-gradient(from 180deg at 50% 50%, #2a8af6 0deg, #a853ba 180deg, #e92a67 360deg)',
}
},
},
};
</script>
<style>
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #111;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
details > summary {
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
details[open] summary ~ * {
animation: sweep .3s ease-in-out;
}
@keyframes sweep {
0% {opacity: 0; transform: translateY(-10px)}
100% {opacity: 1; transform: translateY(0)}
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark font-sans transition-colors duration-300 antialiased selection:bg-primary selection:text-white flex flex-col min-h-screen">
<nav class="fixed top-0 w-full z-50 backdrop-blur-md bg-white/70 dark:bg-background-dark/80 border-b border-gray-200 dark:border-white/10">
<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-shrink-0 flex items-center gap-2 cursor-pointer">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white">
<span class="material-symbols-outlined text-2xl">sports_esports</span>
</div>
<span class="font-display font-bold text-xl tracking-tight">QuizQuest</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Home</a>
<a class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Prizes</a>
<a class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Leaderboard</a>
<a class="text-primary font-bold px-3 py-2 rounded-md text-sm" href="#">Help Center</a>
</div>
</div>
<div class="hidden md:flex items-center gap-4">
<button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-white/10 transition-colors" onclick="document.documentElement.classList.toggle('dark')">
<span class="material-symbols-outlined dark:hidden">dark_mode</span>
<span class="material-symbols-outlined hidden dark:block">light_mode</span>
</button>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Login</a>
<a class="bg-primary hover:bg-primary-hover text-white px-6 py-2.5 rounded-full text-sm font-semibold transition-all transform hover:scale-105 shadow-lg shadow-primary/30" href="#">
Join Now
</a>
</div>
<div class="-mr-2 flex md:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" type="button">
<span class="material-symbols-outlined">menu</span>
</button>
</div>
</div>
</div>
</nav>
<main class="flex-grow pt-20">
<section class="relative py-20 overflow-hidden">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[500px] bg-hero-gradient pointer-events-none"></div>
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<span class="inline-block py-1 px-3 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold mb-6 tracking-widest uppercase">
Support Hub
</span>
<h1 class="font-display text-4xl sm:text-5xl lg:text-6xl font-bold mb-8">
How can we <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-400">help you</span> today?
</h1>
<div class="relative max-w-2xl mx-auto group">
<div class="absolute -inset-1 bg-gradient-to-r from-primary via-purple-600 to-primary rounded-full blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200 animate-tilt"></div>
<div class="relative flex items-center bg-white dark:bg-[#1A1033] rounded-full shadow-2xl p-2 border border-gray-200 dark:border-white/10">
<span class="material-symbols-outlined text-gray-400 ml-4 text-2xl">search</span>
<input class="w-full bg-transparent border-none focus:ring-0 text-gray-800 dark:text-gray-100 placeholder-gray-500 text-lg py-3 px-4" placeholder="Search for answers (e.g., 'withdrawal limits', 'rank calculation')" type="text"/>
<button class="bg-primary hover:bg-primary-hover text-white px-6 py-3 rounded-full font-bold transition-colors shadow-lg">
Search
</button>
</div>
</div>
<div class="mt-8 flex flex-wrap justify-center gap-3 text-sm text-gray-500 dark:text-gray-400">
<span>Popular:</span>
<a class="text-primary hover:text-primary-hover underline decoration-primary/30" href="#">How to withdraw?</a>
<a class="text-primary hover:text-primary-hover underline decoration-primary/30" href="#">Quiz timing</a>
<a class="text-primary hover:text-primary-hover underline decoration-primary/30" href="#">Pass refund</a>
</div>
</div>
</section>
<section class="pb-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-12 gap-12">
<div class="lg:col-span-3">
<div class="sticky top-28 bg-white dark:bg-card-dark rounded-2xl p-6 border border-gray-200 dark:border-white/5 shadow-xl">
<h3 class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-4 ml-3">Categories</h3>
<nav class="space-y-1">
<a class="flex items-center gap-3 px-4 py-3 bg-primary/10 text-primary rounded-xl font-medium transition-colors border border-primary/20" href="#">
<span class="material-symbols-outlined text-xl">app_registration</span>
Registration
</a>
<a class="flex items-center gap-3 px-4 py-3 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5 rounded-xl font-medium transition-colors" href="#">
<span class="material-symbols-outlined text-xl">payments</span>
Payments (₹99 Pass)
</a>
<a class="flex items-center gap-3 px-4 py-3 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5 rounded-xl font-medium transition-colors" href="#">
<span class="material-symbols-outlined text-xl">rule</span>
Quiz Rules
</a>
<a class="flex items-center gap-3 px-4 py-3 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5 rounded-xl font-medium transition-colors" href="#">
<span class="material-symbols-outlined text-xl">redeem</span>
Rewards & Withdrawals
</a>
<a class="flex items-center gap-3 px-4 py-3 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5 rounded-xl font-medium transition-colors" href="#">
<span class="material-symbols-outlined text-xl">handshake</span>
Affiliate Program
</a>
</nav>
</div>
</div>
<div class="lg:col-span-9">
<div class="mb-8">
<h2 class="text-3xl font-display font-bold mb-2">Registration & Account</h2>
<p class="text-gray-500 dark:text-gray-400">Everything you need to know about setting up your player profile.</p>
</div>
<div class="space-y-4">
<details class="group bg-white dark:bg-card-dark rounded-2xl border border-gray-200 dark:border-white/5 overflow-hidden transition-all duration-300 hover:border-primary/30" open="">
<summary class="flex items-center justify-between p-6 cursor-pointer select-none">
<h3 class="text-lg font-bold text-gray-900 dark:text-white group-hover:text-primary transition-colors">How do I verify my account?</h3>
<span class="material-symbols-outlined transform group-open:rotate-180 transition-transform text-gray-400">keyboard_arrow_down</span>
</summary>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-300 leading-relaxed border-t border-gray-100 dark:border-white/5 pt-4">
<p>Account verification is automated. Once you register with your email and phone number, you will receive an OTP. Enter the OTP to verify your device. For withdrawals, you will need to complete a simple KYC process in the settings menu.</p>
</div>
</details>
<details class="group bg-white dark:bg-card-dark rounded-2xl border border-gray-200 dark:border-white/5 overflow-hidden transition-all duration-300 hover:border-primary/30">
<summary class="flex items-center justify-between p-6 cursor-pointer select-none">
<h3 class="text-lg font-bold text-gray-900 dark:text-white group-hover:text-primary transition-colors">Can I change my username later?</h3>
<span class="material-symbols-outlined transform group-open:rotate-180 transition-transform text-gray-400">keyboard_arrow_down</span>
</summary>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-300 leading-relaxed border-t border-gray-100 dark:border-white/5 pt-4">
<p>Yes, you can change your username (Gamer Tag) once every 30 days. Go to Profile > Edit Profile > Change Username. Note that changing your username will not affect your ranking or accumulated rewards.</p>
</div>
</details>
<details class="group bg-white dark:bg-card-dark rounded-2xl border border-gray-200 dark:border-white/5 overflow-hidden transition-all duration-300 hover:border-primary/30">
<summary class="flex items-center justify-between p-6 cursor-pointer select-none">
<h3 class="text-lg font-bold text-gray-900 dark:text-white group-hover:text-primary transition-colors">Why is my account suspended?</h3>
<span class="material-symbols-outlined transform group-open:rotate-180 transition-transform text-gray-400">keyboard_arrow_down</span>
</summary>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-300 leading-relaxed border-t border-gray-100 dark:border-white/5 pt-4">
<p>Accounts are typically suspended due to violations of our Fair Play Policy, such as multiple account usage on the same device or suspicious activity during live quizzes. If you believe this is an error, please submit a ticket below.</p>
</div>
</details>
<details class="group bg-white dark:bg-card-dark rounded-2xl border border-gray-200 dark:border-white/5 overflow-hidden transition-all duration-300 hover:border-primary/30">
<summary class="flex items-center justify-between p-6 cursor-pointer select-none">
<h3 class="text-lg font-bold text-gray-900 dark:text-white group-hover:text-primary transition-colors">Is there an age limit to play?</h3>
<span class="material-symbols-outlined transform group-open:rotate-180 transition-transform text-gray-400">keyboard_arrow_down</span>
</summary>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-300 leading-relaxed border-t border-gray-100 dark:border-white/5 pt-4">
<p>Yes, users must be at least 18 years old to participate in paid contests (₹99 Pass) and withdraw monetary rewards. Free practice quizzes are open to users aged 13 and above.</p>
</div>
</details>
</div>
<div class="mt-12 mb-8">
<h2 class="text-3xl font-display font-bold mb-2">Payments & Billing</h2>
<p class="text-gray-500 dark:text-gray-400">Common questions about the ₹99 Entry Pass.</p>
</div>
<div class="space-y-4">
<details class="group bg-white dark:bg-card-dark rounded-2xl border border-gray-200 dark:border-white/5 overflow-hidden transition-all duration-300 hover:border-primary/30">
<summary class="flex items-center justify-between p-6 cursor-pointer select-none">
<h3 class="text-lg font-bold text-gray-900 dark:text-white group-hover:text-primary transition-colors">Is the ₹99 Pass refundable?</h3>
<span class="material-symbols-outlined transform group-open:rotate-180 transition-transform text-gray-400">keyboard_arrow_down</span>
</summary>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-300 leading-relaxed border-t border-gray-100 dark:border-white/5 pt-4">
<p>Entry fees are generally non-refundable once the quiz slot is confirmed. However, if a technical error on our end prevented you from participating, the amount will be refunded to your QuizQuest wallet within 24 hours.</p>
</div>
</details>
<details class="group bg-white dark:bg-card-dark rounded-2xl border border-gray-200 dark:border-white/5 overflow-hidden transition-all duration-300 hover:border-primary/30">
<summary class="flex items-center justify-between p-6 cursor-pointer select-none">
<h3 class="text-lg font-bold text-gray-900 dark:text-white group-hover:text-primary transition-colors">What payment methods are supported?</h3>
<span class="material-symbols-outlined transform group-open:rotate-180 transition-transform text-gray-400">keyboard_arrow_down</span>
</summary>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-300 leading-relaxed border-t border-gray-100 dark:border-white/5 pt-4">
<p>We support all major payment methods including UPI (GPay, PhonePe, Paytm), Credit/Debit Cards (Visa, Mastercard), and Net Banking. All transactions are secured with 256-bit encryption.</p>
</div>
</details>
</div>
</div>
</div>
</div>
</section>
<section class="py-16 bg-gray-50 dark:bg-[#0B0518] border-t border-gray-200 dark:border-white/5 mt-auto">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-6">
<span class="material-symbols-outlined text-3xl text-primary">support_agent</span>
</div>
<h2 class="text-3xl font-display font-bold mb-4 text-gray-900 dark:text-white">Still need help?</h2>
<p class="text-gray-600 dark:text-gray-400 mb-10 max-w-xl mx-auto">
Can't find what you're looking for? Our support team is available 24/7 to assist you with any issues related to gameplay, payments, or your account.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a class="inline-flex items-center justify-center gap-3 px-8 py-4 bg-white dark:bg-card-dark border border-gray-200 dark:border-white/10 rounded-xl hover:border-primary transition-colors shadow-lg hover:shadow-primary/20 group" href="#">
<span class="material-symbols-outlined text-primary group-hover:scale-110 transition-transform">confirmation_number</span>
<div class="text-left">
<span class="block text-xs font-bold text-gray-400 uppercase tracking-wider">Complex Issue?</span>
<span class="block font-bold text-gray-900 dark:text-white">Submit a Ticket</span>
</div>
</a>
<a class="inline-flex items-center justify-center gap-3 px-8 py-4 bg-primary hover:bg-primary-hover text-white rounded-xl transition-all shadow-lg shadow-primary/30 group" href="#">
<span class="material-symbols-outlined group-hover:animate-pulse">chat</span>
<div class="text-left">
<span class="block text-xs font-bold text-white/70 uppercase tracking-wider">Online Now</span>
<span class="block font-bold">Start Live Chat</span>
</div>
</a>
</div>
</div>
</section>
</main>
<footer class="bg-white dark:bg-[#080412] border-t border-gray-200 dark:border-white/5 py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
<span class="material-symbols-outlined">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-400 dark:hover:text-white transition-colors" href="#">Privacy</a>
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Terms</a>
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Support</a>
</div>
</div>
</footer>
</body></html>