<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Support Center</title>
<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=Inter: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"/>
<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>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#4c99e6",
"primary-content": "#ffffff",
"primary-dark": "#3b82c4",
"primary-light": "#dbeafe",
"background-light": "#f6f7f8",
"background-dark": "#111921",
"surface-light": "#ffffff",
"surface-dark": "#1a2632",
"text-main": "#0e141b",
"text-muted": "#507395",
},
fontFamily: {
"display": ["Inter", "sans-serif"]
},
borderRadius: {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"2xl": "1rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}
/* Custom scrollbar for cleaner look */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark min-h-screen flex flex-col font-display text-text-main dark:text-slate-100 antialiased overflow-x-hidden">
<!-- Header / Navigation -->
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-slate-800 bg-surface-light dark:bg-surface-dark px-6 py-4 lg:px-40 sticky top-0 z-50">
<div class="flex items-center gap-4">
<div class="size-8 text-primary">
<svg class="w-full h-full" fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M44 11.2727C44 14.0109 39.8386 16.3957 33.69 17.6364C39.8386 18.877 44 21.2618 44 24C44 26.7382 39.8386 29.123 33.69 30.3636C39.8386 31.6043 44 33.9891 44 36.7273C44 40.7439 35.0457 44 24 44C12.9543 44 4 40.7439 4 36.7273C4 33.9891 8.16144 31.6043 14.31 30.3636C8.16144 29.123 4 26.7382 4 24C4 21.2618 8.16144 18.877 14.31 17.6364C8.16144 16.3957 4 14.0109 4 11.2727C4 7.25611 12.9543 4 24 4C35.0457 4 44 7.25611 44 11.2727Z" fill="currentColor"></path>
</svg>
</div>
<h2 class="text-text-main dark:text-white text-xl font-bold leading-tight tracking-tight">QuizQuest</h2>
</div>
<div class="hidden lg:flex flex-1 justify-end gap-8 items-center">
<nav class="flex items-center gap-8">
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Home</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Quizzes</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Leaderboard</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Create</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Login</a>
</nav>
<button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-6 bg-primary hover:bg-primary-dark transition-colors text-white text-sm font-bold leading-normal tracking-wide shadow-sm shadow-primary/30">
<span class="truncate">Sign Up</span>
</button>
</div>
<!-- Mobile Menu Icon -->
<div class="lg:hidden text-text-main dark:text-white">
<span class="material-symbols-outlined">menu</span>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow flex flex-col">
<!-- Breadcrumbs -->
<div class="px-6 lg:px-40 py-4">
<div class="flex flex-wrap gap-2 items-center">
<a class="text-text-muted hover:text-primary dark:text-slate-400 transition-colors text-sm font-medium" href="#">Home</a>
<span class="text-text-muted dark:text-slate-600 text-sm">/</span>
<span class="text-text-main dark:text-slate-200 text-sm font-medium">Support Center</span>
</div>
</div>
<!-- Hero Search Section -->
<section class="px-6 lg:px-40 pb-12">
<div class="w-full bg-cover bg-center bg-no-repeat rounded-2xl overflow-hidden shadow-lg relative" data-alt="Abstract colorful gradient background with soft blue and purple hues" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCnC17_3qebJAYqkkxgi371f171ni2Uh2o0Egd_UOuoIf-fXKeyFaXBZKTf1hjPloiolUJDs5DwNGZpT1wm3IuwKhkX_zIp93BmPJdKAMndtEF5m_eVjiUqAv6iI6wEOcsgqyfkd2_5Wbf_7iErShBQ-SMDZI3W1L1_Dy14piJ2BXxVnvTwTszxaSdHwfDQHfwVtSI6dlUljQDz069GCRSUfG4puOAKXEMeQxwdU0T_NbG-nfkaExkFV-J7dLTFlqF8nGcSMl4Y");'>
<div class="absolute inset-0 bg-slate-900/60"></div>
<div class="relative z-10 flex flex-col items-center justify-center py-20 px-4 text-center">
<h1 class="text-white text-4xl md:text-5xl font-black leading-tight tracking-tight mb-4 drop-shadow-sm">
Hello! How can we help you?
</h1>
<p class="text-slate-200 text-lg md:text-xl font-medium mb-10 max-w-2xl drop-shadow-sm">
Find answers, check game rules, or contact us directly.
</p>
<div class="w-full max-w-xl mx-auto">
<div class="relative flex items-center w-full h-14 rounded-lg focus-within:ring-4 focus-within:ring-primary/20 bg-white shadow-xl transition-all">
<div class="grid place-items-center h-full w-12 text-slate-400">
<span class="material-symbols-outlined">search</span>
</div>
<input class="peer h-full w-full outline-none text-sm text-slate-700 pr-2 bg-transparent placeholder-slate-400 font-medium" id="search" placeholder="Search for answers (e.g., 'Reset password', 'Create quiz')..." type="text"/>
<button class="bg-primary hover:bg-primary-dark text-white rounded-md px-6 py-2 m-1.5 font-bold text-sm transition-colors">
Search
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Categories Grid -->
<section class="px-6 lg:px-40 pb-16">
<h2 class="text-text-main dark:text-white text-2xl font-bold tracking-tight mb-8">Browse by Category</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1: Getting Started -->
<a class="group flex flex-col p-6 rounded-xl border border-slate-100 bg-blue-50/50 dark:bg-slate-800/50 dark:border-slate-700 hover:border-blue-200 hover:shadow-lg hover:shadow-blue-100/50 hover:-translate-y-1 transition-all duration-300" href="#">
<div class="size-12 rounded-lg bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">rocket_launch</span>
</div>
<h3 class="text-slate-900 dark:text-slate-100 text-lg font-bold mb-2 group-hover:text-primary transition-colors">Getting Started</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">Account setup, your first quiz, and the basics of playing.</p>
</a>
<!-- Card 2: Game Rules -->
<a class="group flex flex-col p-6 rounded-xl border border-slate-100 bg-emerald-50/50 dark:bg-slate-800/50 dark:border-slate-700 hover:border-emerald-200 hover:shadow-lg hover:shadow-emerald-100/50 hover:-translate-y-1 transition-all duration-300" href="#">
<div class="size-12 rounded-lg bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">menu_book</span>
</div>
<h3 class="text-slate-900 dark:text-slate-100 text-lg font-bold mb-2 group-hover:text-emerald-600 transition-colors">Game Rules</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">Points system, leaderboards, timers, and fair play policies.</p>
</a>
<!-- Card 3: Billing & Premium -->
<a class="group flex flex-col p-6 rounded-xl border border-slate-100 bg-purple-50/50 dark:bg-slate-800/50 dark:border-slate-700 hover:border-purple-200 hover:shadow-lg hover:shadow-purple-100/50 hover:-translate-y-1 transition-all duration-300" href="#">
<div class="size-12 rounded-lg bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">credit_card</span>
</div>
<h3 class="text-slate-900 dark:text-slate-100 text-lg font-bold mb-2 group-hover:text-purple-600 transition-colors">Billing & Premium</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">Manage subscriptions, request refunds, and payment methods.</p>
</a>
<!-- Card 4: Troubleshooting -->
<a class="group flex flex-col p-6 rounded-xl border border-slate-100 bg-orange-50/50 dark:bg-slate-800/50 dark:border-slate-700 hover:border-orange-200 hover:shadow-lg hover:shadow-orange-100/50 hover:-translate-y-1 transition-all duration-300" href="#">
<div class="size-12 rounded-lg bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">build</span>
</div>
<h3 class="text-slate-900 dark:text-slate-100 text-lg font-bold mb-2 group-hover:text-orange-600 transition-colors">Troubleshooting</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">Report bugs, fix login issues, and resolve error messages.</p>
</a>
<!-- Card 5: Community -->
<a class="group flex flex-col p-6 rounded-xl border border-slate-100 bg-pink-50/50 dark:bg-slate-800/50 dark:border-slate-700 hover:border-pink-200 hover:shadow-lg hover:shadow-pink-100/50 hover:-translate-y-1 transition-all duration-300" href="#">
<div class="size-12 rounded-lg bg-pink-100 text-pink-600 dark:bg-pink-900/30 dark:text-pink-400 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">groups</span>
</div>
<h3 class="text-slate-900 dark:text-slate-100 text-lg font-bold mb-2 group-hover:text-pink-600 transition-colors">Community</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">Sharing quizzes, challenging friends, and social features.</p>
</a>
<!-- Card 6: Safety & Privacy -->
<a class="group flex flex-col p-6 rounded-xl border border-slate-100 bg-teal-50/50 dark:bg-slate-800/50 dark:border-slate-700 hover:border-teal-200 hover:shadow-lg hover:shadow-teal-100/50 hover:-translate-y-1 transition-all duration-300" href="#">
<div class="size-12 rounded-lg bg-teal-100 text-teal-600 dark:bg-teal-900/30 dark:text-teal-400 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">shield</span>
</div>
<h3 class="text-slate-900 dark:text-slate-100 text-lg font-bold mb-2 group-hover:text-teal-600 transition-colors">Safety & Privacy</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">Data protection, account security, and reporting users.</p>
</a>
</div>
</section>
<!-- FAQ Section -->
<section class="px-6 lg:px-40 pb-20 bg-white dark:bg-surface-dark/50 py-16">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-text-main dark:text-white text-3xl font-bold tracking-tight mb-4">Frequently Asked Questions</h2>
<p class="text-slate-500 dark:text-slate-400">Quick answers to the most common questions from our players.</p>
</div>
<div class="space-y-4">
<!-- FAQ Item 1 -->
<details class="group bg-background-light dark:bg-surface-dark border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden transition-all duration-300 open:shadow-md">
<summary class="flex justify-between items-center font-semibold cursor-pointer list-none p-5 text-slate-900 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
<span>How do I reset my password?</span>
<span class="transition group-open:rotate-180">
<span class="material-symbols-outlined">expand_more</span>
</span>
</summary>
<div class="text-slate-600 dark:text-slate-400 p-5 pt-0 text-sm leading-relaxed border-t border-slate-100 dark:border-slate-800 mt-2">
To reset your password, go to the login page and click on "Forgot Password". Enter your registered email address, and we will send you a link to create a new password immediately.
</div>
</details>
<!-- FAQ Item 2 -->
<details class="group bg-background-light dark:bg-surface-dark border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden transition-all duration-300 open:shadow-md">
<summary class="flex justify-between items-center font-semibold cursor-pointer list-none p-5 text-slate-900 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
<span>Can I create my own quizzes?</span>
<span class="transition group-open:rotate-180">
<span class="material-symbols-outlined">expand_more</span>
</span>
</summary>
<div class="text-slate-600 dark:text-slate-400 p-5 pt-0 text-sm leading-relaxed border-t border-slate-100 dark:border-slate-800 mt-2">
Yes! Every user can create up to 5 free quizzes. If you want to create unlimited quizzes with advanced question types, you can upgrade to our Premium plan.
</div>
</details>
<!-- FAQ Item 3 -->
<details class="group bg-background-light dark:bg-surface-dark border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden transition-all duration-300 open:shadow-md">
<summary class="flex justify-between items-center font-semibold cursor-pointer list-none p-5 text-slate-900 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
<span>Is QuizQuest free to play?</span>
<span class="transition group-open:rotate-180">
<span class="material-symbols-outlined">expand_more</span>
</span>
</summary>
<div class="text-slate-600 dark:text-slate-400 p-5 pt-0 text-sm leading-relaxed border-t border-slate-100 dark:border-slate-800 mt-2">
Absolutely. The core experience of QuizQuest is completely free. We offer optional cosmetic items and a Premium subscription for power users, but they are not required to play and win.
</div>
</details>
<!-- FAQ Item 4 -->
<details class="group bg-background-light dark:bg-surface-dark border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden transition-all duration-300 open:shadow-md">
<summary class="flex justify-between items-center font-semibold cursor-pointer list-none p-5 text-slate-900 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
<span>How do I report a user or inappropriate content?</span>
<span class="transition group-open:rotate-180">
<span class="material-symbols-outlined">expand_more</span>
</span>
</summary>
<div class="text-slate-600 dark:text-slate-400 p-5 pt-0 text-sm leading-relaxed border-t border-slate-100 dark:border-slate-800 mt-2">
On any quiz or user profile, you will find a flag icon. Click that icon to submit a report. Our moderation team reviews all reports within 24 hours.
</div>
</details>
</div>
</div>
</section>
<!-- CTA "Still need help?" -->
<section class="px-6 lg:px-40 pb-16">
<div class="bg-surface-light dark:bg-surface-dark border border-slate-200 dark:border-slate-800 rounded-2xl p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-8 shadow-sm">
<div class="flex flex-col gap-2 text-center md:text-left">
<h2 class="text-2xl font-bold text-slate-900 dark:text-white">Still need help?</h2>
<p class="text-slate-600 dark:text-slate-400 max-w-md">Our support team is available 24/7 to assist you with any issues you might face.</p>
</div>
<div class="flex flex-col sm:flex-row gap-4">
<button class="flex items-center justify-center gap-2 bg-primary hover:bg-primary-dark text-white font-bold py-3 px-6 rounded-lg transition-colors shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-sm">chat</span>
Start Live Chat
</button>
<button class="flex items-center justify-center gap-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-900 dark:text-white font-bold py-3 px-6 rounded-lg transition-colors">
<span class="material-symbols-outlined text-sm">mail</span>
Email Support
</button>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-surface-light dark:bg-surface-dark border-t border-slate-200 dark:border-slate-800 px-6 py-12 lg:px-40">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
<div class="col-span-1 md:col-span-1">
<div class="flex items-center gap-2 mb-4 text-primary">
<div class="size-6">
<svg class="w-full h-full" fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M44 11.2727C44 14.0109 39.8386 16.3957 33.69 17.6364C39.8386 18.877 44 21.2618 44 24C44 26.7382 39.8386 29.123 33.69 30.3636C39.8386 31.6043 44 33.9891 44 36.7273C44 40.7439 35.0457 44 24 44C12.9543 44 4 40.7439 4 36.7273C4 33.9891 8.16144 31.6043 14.31 30.3636C8.16144 29.123 4 26.7382 4 24C4 21.2618 8.16144 18.877 14.31 17.6364C8.16144 16.3957 4 14.0109 4 11.2727C4 7.25611 12.9543 4 24 4C35.0457 4 44 7.25611 44 11.2727Z" fill="currentColor"></path>
</svg>
</div>
<span class="text-lg font-bold text-slate-900 dark:text-white">QuizQuest</span>
</div>
<p class="text-sm text-slate-500 dark:text-slate-400 mb-6">Level up your knowledge with the world's most engaging quiz platform.</p>
<div class="flex gap-4">
<a class="text-slate-400 hover:text-primary transition-colors" href="#"><span class="material-symbols-outlined">public</span></a>
<a class="text-slate-400 hover:text-primary transition-colors" href="#"><span class="material-symbols-outlined">share</span></a>
</div>
</div>
<div>
<h4 class="font-bold text-slate-900 dark:text-white mb-4">Product</h4>
<ul class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
<li><a class="hover:text-primary" href="#">Features</a></li>
<li><a class="hover:text-primary" href="#">Pricing</a></li>
<li><a class="hover:text-primary" href="#">Download App</a></li>
<li><a class="hover:text-primary" href="#">API</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-slate-900 dark:text-white mb-4">Resources</h4>
<ul class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
<li><a class="hover:text-primary" href="#">Blog</a></li>
<li><a class="hover:text-primary" href="#">Community</a></li>
<li><a class="hover:text-primary" href="#">Help Center</a></li>
<li><a class="hover:text-primary" href="#">Guidelines</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-slate-900 dark:text-white mb-4">Legal</h4>
<ul class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
<li><a class="hover:text-primary" href="#">Privacy Policy</a></li>
<li><a class="hover:text-primary" href="#">Terms of Service</a></li>
<li><a class="hover:text-primary" href="#">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="border-t border-slate-200 dark:border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-slate-500 dark:text-slate-400">
<p>© 2023 QuizQuest Inc. All rights reserved.</p>
<div class="flex gap-6 mt-4 md:mt-0">
<a class="hover:text-primary" href="#">English (US)</a>
</div>
</div>
</footer>
</body></html>