<!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 Help & Knowledge Base</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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 id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#135bec",
"background-light": "#f6f6f8",
"background-dark": "#101622",
},
fontFamily: {
"display": ["Inter", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}
.glass-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.primary-glow {
box-shadow: 0 0 20px rgba(19, 91, 236, 0.3);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen font-display selection:bg-primary selection:text-white">
<!-- Top Navigation Bar -->
<nav class="sticky top-0 z-50 w-full border-b border-slate-200 dark:border-slate-800 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md">
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="size-10 bg-primary rounded-xl flex items-center justify-center text-white shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-2xl">quiz</span>
</div>
<h2 class="text-xl font-bold tracking-tight">QuizQuest <span class="text-primary">Support</span></h2>
</div>
<div class="hidden md:flex items-center gap-8">
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Home</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Features</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Leagues</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">FAQ</a>
</div>
<div class="flex items-center gap-4">
<button class="hidden sm:flex h-11 px-6 items-center justify-center rounded-full bg-primary text-white text-sm font-bold tracking-wide hover:opacity-90 transition-all shadow-lg shadow-primary/20">
Back to App
</button>
<div class="size-10 rounded-full border-2 border-primary/30 p-0.5">
<img alt="Profile" class="w-full h-full rounded-full object-cover" data-alt="User profile avatar with colorful background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDrBXVFNs3UrYOeHst-xBN2jVn08N4eLS62W590orN0jdIeOZGl3J9qOxBN6EJsbMjW1gpITbSsEDHAXPCY7a9fW3zDTA1uZq99xr9XXzuSDUkI2RySLRd6CsD4g4SzrNR0rTQzTRYVeKrjty2zJuVWG2oGPQvQbpVeW4Rh9_RdG_IhJcoeJR7sTxQ6cu-L07rsu_yd6JJfRDWsPunbcK8urAFMcuQQOkjUdrNYChM0Fd9lq4ZF4--s4JWiMeUANA14TYe81TR63Afc"/>
</div>
</div>
</div>
</nav>
<main class="max-w-7xl mx-auto px-6 py-12">
<!-- Hero Search Section -->
<section class="text-center mb-20">
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
How can we help you, <span class="text-primary">Player?</span>
</h1>
<p class="text-slate-500 dark:text-slate-400 text-lg mb-10 max-w-2xl mx-auto">
Search our knowledge base for quick answers to your questions or browse categories below.
</p>
<div class="max-w-3xl mx-auto relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-primary to-blue-400 rounded-full blur opacity-25 group-focus-within:opacity-50 transition duration-1000"></div>
<div class="relative flex items-center">
<span class="material-symbols-outlined absolute left-6 text-slate-400">search</span>
<input class="w-full h-16 pl-16 pr-32 rounded-full border-none bg-white dark:bg-slate-900 text-lg shadow-xl focus:ring-2 focus:ring-primary transition-all placeholder:text-slate-500" placeholder="Ask anything (e.g. 'how to redeem gems')" type="text"/>
<button class="absolute right-3 h-10 px-6 rounded-full bg-primary text-white font-bold text-sm hover:scale-105 transition-transform">
Search
</button>
</div>
</div>
</section>
<!-- Category Grid -->
<section class="mb-24">
<div class="flex items-center justify-between mb-8">
<h2 class="text-2xl font-bold">Browse Categories</h2>
<a class="text-primary text-sm font-semibold flex items-center gap-1 hover:underline" href="#">
View all <span class="material-symbols-outlined text-sm">arrow_forward</span>
</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Category Card 1 -->
<div class="glass-card p-8 rounded-xl hover:bg-primary/5 transition-all group cursor-pointer border-b-4 border-b-transparent hover:border-b-primary">
<div class="size-16 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<img alt="Security" class="w-12 h-12 object-contain" data-alt="3D stylized security shield icon glowing" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBNaRmO2ejOrhf4WaX_aQFHibh07gacL7NHW8bLMsZR3YuBp5N3jDCMwLFNUCt06lj151Z5BD7frZQR-XPjW7mIGZmdywm5UUg7EqJhJob5KmuUcO2eHVFi7JQFFaNM9AdPruF9NdJeGKCBS2f-k30Hjnqx8c1bCpwUnvCDqjiqGVxw70xN2kWuiP6rsJ4XyQaUNMcLA1h_8l0OpPVoFB3k-GfpZDSykqr4O8oovG4nsl03aZJOkkSNCA6d86Bt6TXxIJxVlWqSdQCk"/>
</div>
<h3 class="text-xl font-bold mb-2">Account & Security</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">
Manage your profile, password recovery, and privacy settings.
</p>
</div>
<!-- Category Card 2 -->
<div class="glass-card p-8 rounded-xl hover:bg-primary/5 transition-all group cursor-pointer border-b-4 border-b-transparent hover:border-b-primary">
<div class="size-16 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<img alt="Payments" class="w-12 h-12 object-contain" data-alt="3D shiny gold coin with a gem" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8SesqiWzrt-L4eOtcjiKdNhLAnwND7t26WXZcELkDyUA2R-bZo8swa3KRYfM8ceVcVf1Nkhq0QGfnIjQOykFgHOyR-mtVdezDdARSrd1HLJNc2BfyOlYmpGEZDkd_LOT6A0eMiU9WNmFwo4SLaPyKs0oO0NUcQl_vo6-DH-cVqIaWHCY0JnDhpP_oUD_1SeMMAToOgczv4TpmgO3rCOV4ssbqicjfRtkJl5R9KD0lAdtj5Y6haBkhG6ZkpePn_iZE94X1y85VVq-5"/>
</div>
<h3 class="text-xl font-bold mb-2">Payments & Billing</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">
Gems, coins, battle passes, and subscription management.
</p>
</div>
<!-- Category Card 3 -->
<div class="glass-card p-8 rounded-xl hover:bg-primary/5 transition-all group cursor-pointer border-b-4 border-b-transparent hover:border-b-primary">
<div class="size-16 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<img alt="Rules" class="w-12 h-12 object-contain" data-alt="3D golden trophy with a scroll" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBwGLpmcZ17qwYGfqXIUpDJyy9Hb5ybercT9lsGVomUFQ2FNfXr4GX8dEEMfTMEgxdg3dTopiv99VBMyM2cRZiVQX8z8eKqSrizxB3g-kTFmVGxYkg-yHUaAd17xM2ijIjbvS_ije-_RzvBHe7ZYPNbuzgAwBtFzpjnC2-4SHAuIDx-b2IyxqDH9dNuM9-LYnIFMzo6AA8UAoCIk2-507y6WFMBjafskGAcL7lImFE9Q4p1v8ac974t7LzxWatwgGac4VVamrQDmjHk"/>
</div>
<h3 class="text-xl font-bold mb-2">Quiz Rules</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">
Learn how to play, league rankings, and fair play guidelines.
</p>
</div>
<!-- Category Card 4 -->
<div class="glass-card p-8 rounded-xl hover:bg-primary/5 transition-all group cursor-pointer border-b-4 border-b-transparent hover:border-b-primary">
<div class="size-16 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<img alt="Technical" class="w-12 h-12 object-contain" data-alt="3D stylized wrench and game controller" src="https://lh3.googleusercontent.com/aida-public/AB6AXuANd9Di48vcPd0Ez2C751ZZvBR8o_rPgGEgkYUlrIAgDOIFC1pPwV3sYe2ubI-m7lSHlDfJAqTpUcoZiHUO6GiGIMb3YbTWS9c6eFgxVOxtoxDKU1ujnI-jdE4uAJ4-yYaxpDOteuAiSERZrdCrY8nynklEOblkrEIePtsB_FUbFgNTs4EheAI-5TGm391dx-xWtBr6hY2C2id3ioKbawSMJdqtAcSc3Y1Hq6N6KkKjq9dlDMPVeuzsYyg3dK1O9YgM3LlTlOczCoJP"/>
</div>
<h3 class="text-xl font-bold mb-2">Technical Issues</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">
App crashes, connectivity issues, and hardware compatibility.
</p>
</div>
</div>
</section>
<!-- Trending Articles & Stats -->
<section class="grid grid-cols-1 lg:grid-cols-3 gap-12 items-start mb-24">
<div class="lg:col-span-2">
<h2 class="text-2xl font-bold mb-8 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">trending_up</span>
Trending Articles
</h2>
<div class="space-y-4">
<!-- Article Item -->
<a class="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:border-primary transition-colors group" href="#">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">description</span>
<span class="font-semibold">How do I redeem my League Tournament rewards?</span>
</div>
<span class="material-symbols-outlined text-slate-400 opacity-0 group-hover:opacity-100 transition-all transform translate-x-[-10px] group-hover:translate-x-0">chevron_right</span>
</a>
<!-- Article Item -->
<a class="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:border-primary transition-colors group" href="#">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">description</span>
<span class="font-semibold">Resetting your account password and 2FA</span>
</div>
<span class="material-symbols-outlined text-slate-400 opacity-0 group-hover:opacity-100 transition-all transform translate-x-[-10px] group-hover:translate-x-0">chevron_right</span>
</a>
<!-- Article Item -->
<a class="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:border-primary transition-colors group" href="#">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">description</span>
<span class="font-semibold">Understanding the matchmaking system in PvP</span>
</div>
<span class="material-symbols-outlined text-slate-400 opacity-0 group-hover:opacity-100 transition-all transform translate-x-[-10px] group-hover:translate-x-0">chevron_right</span>
</a>
<!-- Article Item -->
<a class="flex items-center justify-between p-6 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:border-primary transition-colors group" href="#">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">description</span>
<span class="font-semibold">Why did I lose points during a disconnect?</span>
</div>
<span class="material-symbols-outlined text-slate-400 opacity-0 group-hover:opacity-100 transition-all transform translate-x-[-10px] group-hover:translate-x-0">chevron_right</span>
</a>
</div>
</div>
<div class="bg-primary/10 rounded-xl p-8 border border-primary/20 sticky top-24">
<h3 class="text-xl font-bold mb-4">Can't find what you need?</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm mb-6">
Our support squad is online 24/7 to help you get back into the game as fast as possible.
</p>
<div class="space-y-4">
<div class="flex items-center gap-3 text-sm">
<span class="material-symbols-outlined text-primary">bolt</span>
<span>Average response time: <strong>5 mins</strong></span>
</div>
<div class="flex items-center gap-3 text-sm">
<span class="material-symbols-outlined text-primary">forum</span>
<span>Available via Live Chat and Email</span>
</div>
</div>
<button class="w-full mt-8 h-12 rounded-full bg-primary text-white font-bold hover:primary-glow transition-all">
Start a Ticket
</button>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-800 py-12">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
<div class="col-span-1 md:col-span-1">
<div class="flex items-center gap-3 mb-6">
<div class="size-8 bg-primary rounded-lg flex items-center justify-center text-white">
<span class="material-symbols-outlined text-xl">quiz</span>
</div>
<span class="text-lg font-bold">QuizQuest</span>
</div>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">
The ultimate competitive trivia platform for global players. Play, learn, and win big.
</p>
</div>
<div>
<h4 class="font-bold mb-6">Platform</h4>
<ul class="space-y-4 text-sm text-slate-500 dark:text-slate-400">
<li><a class="hover:text-primary" href="#">Download App</a></li>
<li><a class="hover:text-primary" href="#">Global Rankings</a></li>
<li><a class="hover:text-primary" href="#">Tournament Schedule</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-6">Support</h4>
<ul class="space-y-4 text-sm text-slate-500 dark:text-slate-400">
<li><a class="hover:text-primary" href="#">Help Center</a></li>
<li><a class="hover:text-primary" href="#">Community Forum</a></li>
<li><a class="hover:text-primary" href="#">Status Page</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-6">Connect</h4>
<div class="flex gap-4">
<a class="size-10 rounded-full bg-slate-200 dark:bg-slate-800 flex items-center justify-center hover:bg-primary hover:text-white transition-colors" href="#">
<span class="material-symbols-outlined">public</span>
</a>
<a class="size-10 rounded-full bg-slate-200 dark:bg-slate-800 flex items-center justify-center hover:bg-primary hover:text-white transition-colors" href="#">
<span class="material-symbols-outlined">alternate_email</span>
</a>
<a class="size-10 rounded-full bg-slate-200 dark:bg-slate-800 flex items-center justify-center hover:bg-primary hover:text-white transition-colors" href="#">
<span class="material-symbols-outlined">groups</span>
</a>
</div>
</div>
</div>
<div class="pt-8 border-t border-slate-200 dark:border-slate-800 flex flex-col md:row items-center justify-between gap-4 text-xs text-slate-500">
<p>© 2024 QuizQuest Interactive. All rights reserved.</p>
<div class="flex gap-6">
<a class="hover:underline" href="#">Privacy Policy</a>
<a class="hover:underline" href="#">Terms of Service</a>
<a class="hover:underline" href="#">Cookie Settings</a>
</div>
</div>
</div>
</footer>
<!-- Fixed Chat Button -->
<div class="fixed bottom-8 right-8 z-[60]">
<button class="flex items-center gap-3 h-14 px-6 rounded-full bg-primary text-white font-bold shadow-2xl hover:scale-105 active:scale-95 transition-all group">
<span class="material-symbols-outlined group-hover:rotate-12 transition-transform">chat_bubble</span>
<span>Need More Help? Chat with Us</span>
</button>
</div>
</body></html>