<!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 Support Center</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"/>
<!-- Material Symbols -->
<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>
<!-- Tailwind Config -->
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7f13ec",
"primary-hover": "#6b11c7",
"primary-light": "#9d4cf2",
"background-light": "#f7f6f8",
"background-dark": "#191022",
"card-dark": "#261933",
"border-dark": "#4d3267",
"text-muted": "#ad92c9",
},
fontFamily: {
display: ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "1.5rem",
"xl": "2rem",
"2xl": "3rem",
"full": "9999px"
},
boxShadow: {
'glow': '0 0 20px -5px rgba(127, 19, 236, 0.5)',
'glow-lg': '0 0 30px -5px rgba(127, 19, 236, 0.6)',
}
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
/* Custom scrollbar for dark mode feel */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #191022;
}
::-webkit-scrollbar-thumb {
background: #4d3267;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7f13ec;
}
/* Smooth detail summary animation attempt with pure CSS */
details > summary {
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen flex flex-col selection:bg-primary selection:text-white">
<!-- Top Navigation -->
<header class="sticky top-0 z-40 w-full border-b border-border-dark bg-background-dark/80 backdrop-blur-md">
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="text-primary">
<span class="material-symbols-outlined text-3xl">sports_esports</span>
</div>
<h1 class="text-xl font-bold tracking-tight text-white">QuizQuest</h1>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-sm font-medium text-text-muted hover:text-white transition-colors" href="#">Home</a>
<a class="text-sm font-medium text-text-muted hover:text-white transition-colors" href="#">Play</a>
<a class="text-sm font-medium text-white transition-colors" href="#">Support</a>
<a class="text-sm font-medium text-text-muted hover:text-white transition-colors" href="#">Leaderboard</a>
</nav>
<div class="flex items-center gap-4">
<a class="hidden sm:block text-sm font-medium text-text-muted hover:text-white transition-colors" href="#">Login</a>
<button class="bg-primary hover:bg-primary-hover text-white px-5 py-2 rounded-full text-sm font-bold transition-all shadow-glow hover:shadow-glow-lg">
Sign Up
</button>
</div>
</div>
</header>
<main class="flex-grow flex flex-col items-center w-full">
<!-- Hero Section -->
<section class="w-full relative py-20 px-6 flex flex-col items-center justify-center overflow-hidden">
<!-- Abstract Background Graphic -->
<div class="absolute inset-0 z-0 opacity-20 bg-[url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop')] bg-cover bg-center" data-alt="Abstract dark purple fluid shapes background"></div>
<div class="absolute inset-0 z-0 bg-gradient-to-b from-transparent via-background-dark/80 to-background-dark"></div>
<div class="relative z-10 max-w-3xl w-full text-center space-y-6">
<h2 class="text-4xl md:text-5xl font-black tracking-tight text-white drop-shadow-lg">
How can we help?
</h2>
<p class="text-lg text-text-muted max-w-xl mx-auto">
Search our knowledge base for answers about gameplay, payments, rewards, and your account.
</p>
<!-- Search Bar -->
<div class="mt-8 relative w-full max-w-xl mx-auto group">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-text-muted group-focus-within:text-primary transition-colors">
<span class="material-symbols-outlined">search</span>
</div>
<input class="w-full h-14 pl-12 pr-32 bg-card-dark border border-border-dark rounded-full text-white placeholder-text-muted focus:ring-2 focus:ring-primary focus:border-transparent transition-all shadow-lg" placeholder="Search for a question..." type="text"/>
<div class="absolute inset-y-1 right-1">
<button class="h-full px-6 bg-primary hover:bg-primary-hover text-white rounded-full text-sm font-bold transition-colors">
Search
</button>
</div>
</div>
</div>
</section>
<!-- Main Content Area -->
<div class="w-full max-w-6xl px-6 pb-24 -mt-10 relative z-20">
<!-- Category Grid -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
<!-- Card 1 -->
<button class="group flex flex-col items-center gap-4 p-6 rounded-xl border border-border-dark bg-card-dark hover:border-primary/50 hover:bg-primary/10 transition-all duration-300 text-center cursor-pointer">
<div class="w-12 h-12 rounded-full bg-primary/20 text-primary flex items-center justify-center group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">payments</span>
</div>
<h3 class="text-white font-bold text-lg">Payments</h3>
</button>
<!-- Card 2 -->
<button class="group flex flex-col items-center gap-4 p-6 rounded-xl border border-border-dark bg-card-dark hover:border-primary/50 hover:bg-primary/10 transition-all duration-300 text-center cursor-pointer">
<div class="w-12 h-12 rounded-full bg-primary/20 text-primary flex items-center justify-center group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">sports_esports</span>
</div>
<h3 class="text-white font-bold text-lg">Gameplay</h3>
</button>
<!-- Card 3 -->
<button class="group flex flex-col items-center gap-4 p-6 rounded-xl border border-border-dark bg-card-dark hover:border-primary/50 hover:bg-primary/10 transition-all duration-300 text-center cursor-pointer">
<div class="w-12 h-12 rounded-full bg-primary/20 text-primary flex items-center justify-center group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">emoji_events</span>
</div>
<h3 class="text-white font-bold text-lg">Rewards</h3>
</button>
<!-- Card 4 -->
<button class="group flex flex-col items-center gap-4 p-6 rounded-xl border border-border-dark bg-card-dark hover:border-primary/50 hover:bg-primary/10 transition-all duration-300 text-center cursor-pointer">
<div class="w-12 h-12 rounded-full bg-primary/20 text-primary flex items-center justify-center group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">account_circle</span>
</div>
<h3 class="text-white font-bold text-lg">Account</h3>
</button>
</div>
<!-- FAQ Section -->
<div class="flex flex-col md:flex-row gap-10">
<!-- Sidebar Navigation (Optional for Desktop) -->
<div class="hidden md:flex flex-col w-64 shrink-0 gap-2 sticky top-24 h-fit">
<h3 class="text-sm font-bold text-text-muted uppercase tracking-wider mb-2 px-3">Categories</h3>
<a class="px-4 py-3 rounded-lg bg-primary/20 text-primary font-semibold flex items-center justify-between" href="#">
Top Questions
<span class="material-symbols-outlined text-sm">arrow_forward_ios</span>
</a>
<a class="px-4 py-3 rounded-lg text-text-muted hover:bg-card-dark hover:text-white transition-colors flex items-center justify-between" href="#">
Account Basics
</a>
<a class="px-4 py-3 rounded-lg text-text-muted hover:bg-card-dark hover:text-white transition-colors flex items-center justify-between" href="#">
Privacy & Safety
</a>
<a class="px-4 py-3 rounded-lg text-text-muted hover:bg-card-dark hover:text-white transition-colors flex items-center justify-between" href="#">
Billing Support
</a>
</div>
<!-- Accordion List -->
<div class="flex-1 space-y-4">
<h2 class="text-2xl font-bold text-white mb-6">Frequently Asked Questions</h2>
<!-- Item 1 -->
<details class="group rounded-xl bg-card-dark border border-border-dark overflow-hidden transition-all duration-300 hover:border-primary/50" open="">
<summary class="flex cursor-pointer items-center justify-between p-6">
<span class="text-white font-semibold text-lg">How do I earn XP in QuizQuest?</span>
<span class="text-primary transition-transform duration-300 group-open:rotate-180 material-symbols-outlined">expand_more</span>
</summary>
<div class="px-6 pb-6 text-text-muted leading-relaxed">
<p>XP (Experience Points) can be earned by completing Daily Quests, participating in live quizzes, and maintaining a streak. Bonus XP is awarded for finishing in the top 10 on the global leaderboard.</p>
</div>
</details>
<!-- Item 2 -->
<details class="group rounded-xl bg-card-dark border border-border-dark overflow-hidden transition-all duration-300 hover:border-primary/50">
<summary class="flex cursor-pointer items-center justify-between p-6">
<span class="text-white font-semibold text-lg">Can I change my username?</span>
<span class="text-primary transition-transform duration-300 group-open:rotate-180 material-symbols-outlined">expand_more</span>
</summary>
<div class="px-6 pb-6 text-text-muted leading-relaxed">
<p>Yes, you can change your username once for free. Subsequent changes will cost 500 Gems. Go to <strong>Settings > Account Profile > Edit Username</strong> to make the change.</p>
</div>
</details>
<!-- Item 3 -->
<details class="group rounded-xl bg-card-dark border border-border-dark overflow-hidden transition-all duration-300 hover:border-primary/50">
<summary class="flex cursor-pointer items-center justify-between p-6">
<span class="text-white font-semibold text-lg">My payment was declined. What do I do?</span>
<span class="text-primary transition-transform duration-300 group-open:rotate-180 material-symbols-outlined">expand_more</span>
</summary>
<div class="px-6 pb-6 text-text-muted leading-relaxed">
<p>If your payment was declined, please check that your card has sufficient funds and is valid for international transactions. If the problem persists, try using PayPal or contact our support team immediately.</p>
</div>
</details>
<!-- Item 4 -->
<details class="group rounded-xl bg-card-dark border border-border-dark overflow-hidden transition-all duration-300 hover:border-primary/50">
<summary class="flex cursor-pointer items-center justify-between p-6">
<span class="text-white font-semibold text-lg">How do I redeem my rewards?</span>
<span class="text-primary transition-transform duration-300 group-open:rotate-180 material-symbols-outlined">expand_more</span>
</summary>
<div class="px-6 pb-6 text-text-muted leading-relaxed">
<p>Navigate to the <strong>Rewards Store</strong> from the main menu. Select the item you wish to redeem and click "Claim". Digital rewards are instant, while physical merch may take 2-4 weeks to ship.</p>
</div>
</details>
<!-- Item 5 -->
<details class="group rounded-xl bg-card-dark border border-border-dark overflow-hidden transition-all duration-300 hover:border-primary/50">
<summary class="flex cursor-pointer items-center justify-between p-6">
<span class="text-white font-semibold text-lg">Is QuizQuest free to play?</span>
<span class="text-primary transition-transform duration-300 group-open:rotate-180 material-symbols-outlined">expand_more</span>
</summary>
<div class="px-6 pb-6 text-text-muted leading-relaxed">
<p>Absolutely! QuizQuest is free to play. We offer a Premium subscription called "QuizQuest Gold" which removes ads and offers exclusive cosmetic items, but it does not provide any gameplay advantage.</p>
</div>
</details>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="w-full border-t border-border-dark bg-background-dark py-12 px-6">
<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">
<div class="text-text-muted">
<span class="material-symbols-outlined text-2xl">sports_esports</span>
</div>
<span class="text-text-muted text-sm font-medium">© 2023 QuizQuest Inc. All rights reserved.</span>
</div>
<div class="flex gap-8">
<a class="text-text-muted hover:text-white text-sm transition-colors" href="#">Privacy Policy</a>
<a class="text-text-muted hover:text-white text-sm transition-colors" href="#">Terms of Service</a>
<a class="text-text-muted hover:text-white text-sm transition-colors" href="#">Cookie Settings</a>
</div>
</div>
</footer>
<!-- Floating Action Button (FAB) -->
<div class="fixed bottom-8 right-8 z-50">
<button class="group flex items-center gap-3 bg-primary hover:bg-primary-hover text-white pl-5 pr-6 py-4 rounded-full shadow-glow-lg transition-all hover:-translate-y-1">
<span class="material-symbols-outlined">support_agent</span>
<span class="font-bold">Submit a Ticket</span>
</button>
</div>
</body></html>