<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Contact Us - QuizQuest</title>
<!-- Google Fonts -->
<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>
<!-- Theme Config -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"primary-glow": "#9d4dff",
"background-light": "#f7f6f8", // Not used in this dark mode design but kept for config consistency
"background-dark": "#0f0f12",
"surface-dark": "#1a1a1e",
"surface-lighter": "#242429",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
backgroundImage: {
'neon-gradient': 'linear-gradient(135deg, #7f13ec 0%, #a855f7 100%)',
},
boxShadow: {
'neon': '0 0 15px rgba(127, 19, 236, 0.5)',
'neon-hover': '0 0 25px rgba(127, 19, 236, 0.7)',
}
},
},
}
</script>
<style>
/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1a1a1e;
}
::-webkit-scrollbar-thumb {
background: #362348;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7f13ec;
}
</style>
</head>
<body class="bg-background-dark text-slate-100 font-display min-h-screen flex flex-col overflow-x-hidden selection:bg-primary selection:text-white">
<!-- Background Pattern -->
<div class="fixed inset-0 z-0 opacity-20 pointer-events-none" data-alt="Subtle geometric pattern background" style="background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'#7f13ec\' fill-opacity=\'0.2\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
<!-- Header -->
<div class="relative z-10 w-full border-b border-surface-lighter bg-background-dark/80 backdrop-blur-md">
<div class="layout-container flex h-full grow flex-col">
<header class="flex items-center justify-between whitespace-nowrap px-4 sm:px-10 py-4 max-w-7xl mx-auto w-full">
<div class="flex items-center gap-3 text-white">
<div class="flex items-center justify-center size-10 rounded-full bg-primary/20 text-primary">
<span class="material-symbols-outlined text-[24px]">sports_esports</span>
</div>
<h2 class="text-white text-xl font-bold leading-tight tracking-tight">QuizQuest</h2>
</div>
<div class="flex flex-1 justify-end gap-8 items-center">
<nav class="hidden md:flex items-center gap-8">
<a class="text-slate-400 hover:text-white transition-colors text-sm font-medium leading-normal" href="#">Home</a>
<a class="text-slate-400 hover:text-white transition-colors text-sm font-medium leading-normal" href="#">Quizzes</a>
<a class="text-slate-400 hover:text-white transition-colors text-sm font-medium leading-normal" href="#">Leaderboard</a>
<a class="text-white text-sm font-medium leading-normal" href="#">Contact Us</a>
</nav>
<button class="flex items-center justify-center overflow-hidden rounded-full h-10 px-6 bg-primary hover:bg-primary-glow shadow-neon hover:shadow-neon-hover text-white text-sm font-bold leading-normal tracking-wide transition-all duration-300 transform hover:-translate-y-0.5">
<span class="truncate">Login</span>
</button>
<button class="md:hidden text-white">
<span class="material-symbols-outlined">menu</span>
</button>
</div>
</header>
</div>
</div>
<!-- Main Content -->
<main class="relative z-10 flex-grow flex justify-center py-10 px-4 sm:px-6 lg:px-8">
<div class="w-full max-w-7xl flex flex-col gap-12">
<!-- Hero Section -->
<div class="flex flex-col gap-4 text-center items-center max-w-3xl mx-auto">
<span class="inline-flex items-center rounded-full bg-surface-lighter px-3 py-1 text-xs font-medium text-primary ring-1 ring-inset ring-primary/30">
24/7 Support Center
</span>
<h1 class="text-4xl md:text-6xl font-black text-white tracking-tight leading-tight">
Level Up Your <span class="text-transparent bg-clip-text bg-neon-gradient">Support</span>
</h1>
<p class="text-lg text-slate-400 max-w-2xl">
Stuck on a level? Have a partnership idea? Drop us a line and our team will get back to you faster than a speedrun record.
</p>
</div>
<!-- Content Split -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 mt-4">
<!-- Left Column: Contact Form -->
<div class="lg:col-span-7 flex flex-col h-full">
<div class="bg-surface-dark rounded-3xl p-6 sm:p-10 border border-surface-lighter shadow-2xl relative overflow-hidden group">
<!-- Decorative glow -->
<div class="absolute -top-24 -right-24 w-48 h-48 bg-primary/20 rounded-full blur-3xl group-hover:bg-primary/30 transition-all duration-700"></div>
<h3 class="text-2xl font-bold text-white mb-6 relative z-10">Send a Message</h3>
<form class="flex flex-col gap-5 relative z-10">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-slate-300 ml-2">Your Name</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-slate-500 text-[20px]">person</span>
</div>
<input class="w-full bg-surface-lighter border border-surface-lighter text-white text-sm rounded-2xl focus:ring-primary focus:border-primary block pl-11 p-3.5 placeholder-slate-500 transition-all focus:shadow-neon" placeholder="GamerTag123" type="text"/>
</div>
</div>
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-slate-300 ml-2">Email Address</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-slate-500 text-[20px]">mail</span>
</div>
<input class="w-full bg-surface-lighter border border-surface-lighter text-white text-sm rounded-2xl focus:ring-primary focus:border-primary block pl-11 p-3.5 placeholder-slate-500 transition-all focus:shadow-neon" placeholder="hello@example.com" type="email"/>
</div>
</div>
</div>
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-slate-300 ml-2">Topic</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-slate-500 text-[20px]">category</span>
</div>
<select class="w-full bg-surface-lighter border border-surface-lighter text-white text-sm rounded-2xl focus:ring-primary focus:border-primary block pl-11 p-3.5 transition-all focus:shadow-neon appearance-none">
<option>General Inquiry</option>
<option>Technical Support</option>
<option>Partnership Proposal</option>
<option>Report a Bug</option>
</select>
<div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-slate-500">expand_more</span>
</div>
</div>
</div>
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-slate-300 ml-2">Message</label>
<textarea class="w-full bg-surface-lighter border border-surface-lighter text-white text-sm rounded-2xl focus:ring-primary focus:border-primary block p-4 placeholder-slate-500 transition-all focus:shadow-neon resize-none" placeholder="Tell us about your quest..." rows="5"></textarea>
</div>
<div class="pt-2">
<button class="w-full sm:w-auto px-8 py-4 bg-primary hover:bg-primary-glow text-white font-bold rounded-full shadow-neon hover:shadow-neon-hover transition-all duration-300 flex items-center justify-center gap-2 group/btn" type="button">
<span>Send Message</span>
<span class="material-symbols-outlined group-hover/btn:translate-x-1 transition-transform">send</span>
</button>
</div>
</form>
</div>
</div>
<!-- Right Column: Info & Map -->
<div class="lg:col-span-5 flex flex-col gap-6">
<!-- Map Card -->
<div class="bg-surface-dark rounded-3xl overflow-hidden h-64 relative border border-surface-lighter group shadow-lg">
<div class="absolute inset-0 bg-cover bg-center opacity-60 group-hover:opacity-80 transition-opacity duration-500" data-alt="Abstract neon map of a digital city" data-location="Pixel City" style="background-image: url('https://placeholder.pics/svg/300');"></div>
<div class="absolute inset-0 bg-gradient-to-t from-surface-dark to-transparent"></div>
<div class="absolute bottom-6 left-6 right-6">
<div class="flex items-center gap-2 mb-2">
<span class="material-symbols-outlined text-primary text-2xl animate-bounce">location_on</span>
<h3 class="text-xl font-bold text-white">Pixel City HQ</h3>
</div>
<p class="text-slate-300 text-sm">123 Gamer Lane, Level 5, Pixel City</p>
</div>
</div>
<!-- Contact Channels -->
<div class="flex flex-col gap-4">
<!-- Email -->
<div class="bg-surface-dark p-4 rounded-2xl border border-surface-lighter flex items-center gap-4 hover:border-primary/50 transition-colors cursor-pointer group">
<div class="size-12 rounded-full bg-surface-lighter flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors group-hover:shadow-neon">
<span class="material-symbols-outlined">mail</span>
</div>
<div>
<h4 class="text-white font-bold text-sm">Email Us</h4>
<p class="text-slate-400 text-sm group-hover:text-white transition-colors">hello@quizquest.gg</p>
</div>
<div class="ml-auto">
<span class="material-symbols-outlined text-slate-600 group-hover:text-primary transition-colors">arrow_forward</span>
</div>
</div>
<!-- Telegram -->
<div class="bg-surface-dark p-4 rounded-2xl border border-surface-lighter flex items-center gap-4 hover:border-primary/50 transition-colors cursor-pointer group">
<div class="size-12 rounded-full bg-surface-lighter flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors group-hover:shadow-neon">
<span class="material-symbols-outlined">send</span>
</div>
<div>
<h4 class="text-white font-bold text-sm">Telegram Support</h4>
<p class="text-slate-400 text-sm group-hover:text-white transition-colors">@QuizQuestSupport</p>
</div>
<div class="ml-auto">
<span class="material-symbols-outlined text-slate-600 group-hover:text-primary transition-colors">arrow_forward</span>
</div>
</div>
<!-- Community -->
<div class="bg-surface-dark p-4 rounded-2xl border border-surface-lighter flex items-center gap-4 hover:border-primary/50 transition-colors cursor-pointer group">
<div class="size-12 rounded-full bg-surface-lighter flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors group-hover:shadow-neon">
<span class="material-symbols-outlined">forum</span>
</div>
<div>
<h4 class="text-white font-bold text-sm">Discord Community</h4>
<p class="text-slate-400 text-sm group-hover:text-white transition-colors">Join 50k+ Players</p>
</div>
<div class="ml-auto">
<span class="material-symbols-outlined text-slate-600 group-hover:text-primary transition-colors">arrow_forward</span>
</div>
</div>
</div>
</div>
</div>
<!-- FAQ Section -->
<div class="max-w-3xl mx-auto w-full mt-8">
<div class="flex items-center gap-3 mb-8 justify-center">
<span class="material-symbols-outlined text-primary text-3xl">help_center</span>
<h2 class="text-3xl font-bold text-white">Common Questions</h2>
</div>
<div class="flex flex-col gap-4">
<!-- FAQ Item 1 -->
<details class="group bg-surface-dark rounded-2xl border border-surface-lighter open:border-primary/50 transition-all duration-300">
<summary class="flex cursor-pointer items-center justify-between p-6 list-none">
<span class="text-base font-medium text-white group-hover:text-primary transition-colors">How do I reset my password?</span>
<span class="transition group-open:rotate-180">
<span class="material-symbols-outlined text-slate-500 group-open:text-primary">expand_more</span>
</span>
</summary>
<div class="group-open:animate-fadeIn px-6 pb-6 text-slate-400 text-sm leading-relaxed">
You can reset your password by going to the login page and clicking "Forgot Password". We'll send a magic link to your registered email address to get you back in the game instantly.
</div>
</details>
<!-- FAQ Item 2 -->
<details class="group bg-surface-dark rounded-2xl border border-surface-lighter open:border-primary/50 transition-all duration-300">
<summary class="flex cursor-pointer items-center justify-between p-6 list-none">
<span class="text-base font-medium text-white group-hover:text-primary transition-colors">Is QuizQuest free to play?</span>
<span class="transition group-open:rotate-180">
<span class="material-symbols-outlined text-slate-500 group-open:text-primary">expand_more</span>
</span>
</summary>
<div class="group-open:animate-fadeIn px-6 pb-6 text-slate-400 text-sm leading-relaxed">
Absolutely! QuizQuest is free to play. We offer premium memberships for players who want exclusive cosmetic items and ad-free experiences, but the core gameplay is free for everyone.
</div>
</details>
<!-- FAQ Item 3 -->
<details class="group bg-surface-dark rounded-2xl border border-surface-lighter open:border-primary/50 transition-all duration-300">
<summary class="flex cursor-pointer items-center justify-between p-6 list-none">
<span class="text-base font-medium text-white group-hover:text-primary transition-colors">How do I create a custom quiz?</span>
<span class="transition group-open:rotate-180">
<span class="material-symbols-outlined text-slate-500 group-open:text-primary">expand_more</span>
</span>
</summary>
<div class="group-open:animate-fadeIn px-6 pb-6 text-slate-400 text-sm leading-relaxed">
Once you reach Level 5, you unlock the "Creator Mode" in your dashboard. This allows you to build custom quizzes, challenge friends, and even get featured on the global leaderboard!
</div>
</details>
</div>
</div>
<!-- Footer Simple -->
<footer class="mt-12 border-t border-surface-lighter pt-8 text-center text-slate-500 text-sm pb-8">
<p>© 2023 QuizQuest Inc. All rights reserved. Let the games begin.</p>
</footer>
</div>
</main>
</body></html>