<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest Help Center</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;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>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"primary-content": "#ffffff",
"background-light": "#f7f6f8",
"background-dark": "#191022",
"card-light": "#ffffff",
"card-dark": "#2d2438",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "1.5rem", "xl": "2rem", "2xl": "2.5rem", "full": "9999px"},
},
},
}
</script>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 antialiased overflow-x-hidden">
<div class="relative flex h-auto min-h-screen w-full flex-col group/design-root">
<!-- Navigation -->
<header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-slate-800 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md px-10 py-4">
<div class="flex items-center gap-4 text-slate-900 dark:text-white">
<div class="size-8 text-primary">
<svg 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-slate-900 dark:text-white text-xl font-bold leading-tight tracking-[-0.015em]">QuizQuest</h2>
</div>
<div class="flex flex-1 justify-end gap-8">
<nav class="hidden md:flex items-center gap-9">
<a class="text-slate-600 dark:text-slate-300 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 transition-colors text-sm font-medium leading-normal" href="#">Quests</a>
<a class="text-slate-600 dark:text-slate-300 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 transition-colors text-sm font-medium leading-normal" href="#">Shop</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Profile</a>
</nav>
<div class="flex gap-2">
<button class="hidden lg:flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-6 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-900 dark:text-white text-sm font-bold leading-normal transition-colors">
<span class="truncate">Sign In</span>
</button>
<button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-6 bg-primary hover:bg-primary/90 text-white text-sm font-bold leading-normal shadow-lg shadow-primary/30 transition-all hover:scale-105">
<span class="truncate">Join Now</span>
</button>
</div>
</div>
</header>
<main class="flex-1 w-full max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Hero Section -->
<div class="relative w-full rounded-[2.5rem] bg-gradient-to-br from-[#f3e8ff] to-[#e0cbf7] dark:from-[#2d1b4e] dark:to-[#1a1025] overflow-hidden mb-12 shadow-sm border border-white/50 dark:border-white/10">
<!-- Decorative background elements -->
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-primary/10 rounded-full blur-[100px] -translate-y-1/2 translate-x-1/4"></div>
<div class="absolute bottom-0 left-0 w-[300px] h-[300px] bg-blue-500/10 rounded-full blur-[80px] translate-y-1/3 -translate-x-1/4"></div>
<div class="relative z-10 flex flex-col md:flex-row items-center gap-8 md:gap-16 p-8 md:p-16">
<div class="flex-1 flex flex-col gap-6 text-center md:text-left">
<span class="inline-flex items-center justify-center md:justify-start gap-2 text-primary font-bold tracking-wider text-sm uppercase">
<span class="material-symbols-outlined text-[20px]">support_agent</span>
Help Hub
</span>
<h1 class="text-slate-900 dark:text-white text-4xl md:text-5xl lg:text-6xl font-black leading-[1.1] tracking-tight">
Welcome to the Help Hub, Adventurer!
</h1>
<p class="text-slate-600 dark:text-slate-300 text-lg md:text-xl font-medium max-w-xl mx-auto md:mx-0">
Stuck on a level? Our wizards are standing by to help you get back to the game. What's your current mission?
</p>
<div class="w-full max-w-lg mx-auto md:mx-0 mt-4">
<label class="relative flex items-center w-full h-16 group">
<span class="absolute left-6 text-primary material-symbols-outlined group-focus-within:text-slate-900 transition-colors">search</span>
<input class="w-full h-full pl-14 pr-36 rounded-full border-2 border-transparent bg-white dark:bg-slate-800 shadow-xl shadow-primary/5 text-slate-900 dark:text-white placeholder:text-slate-400 focus:outline-none focus:ring-4 focus:ring-primary/20 focus:border-primary transition-all font-medium text-lg" placeholder="Search for answers..." type="text"/>
<button class="absolute right-2 h-12 px-6 bg-primary hover:bg-primary/90 text-white rounded-full font-bold text-sm transition-transform hover:scale-105 shadow-md">
Find Answers
</button>
</label>
</div>
</div>
<!-- Mascot Image -->
<div class="w-full md:w-1/2 max-w-[400px] aspect-square flex items-center justify-center relative">
<div class="absolute inset-0 bg-gradient-to-tr from-primary/20 to-transparent rounded-full blur-2xl transform scale-90"></div>
<img alt="3D render of a friendly robot mascot character floating and waving" class="relative z-10 object-contain w-full h-full drop-shadow-2xl hover:-translate-y-2 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDxsqoxY-uD0xEDG9_lhLYxyS7vz8aW5frGnZvI4pIN0EkgSnDs8KFjCCMv6JaAQh7OxCX4RmU81EGLPr-FMtCaxCT7bO54FACLK0uWz4rM4GxlteeQB4sxijoE4iSgCbVM5nofJY-MK8W6ECq8mFUK_sZ3oMABYdw3Q9V7ATBqPKRr8moXg7RJARuOrra_Mgwl3qytu11Qk4Z51UR6gJ3xK1908Q1rMp6MXep8jjszyky8qSHTWGEpcRQ0PprAJ1jiR1qJfoyk"/>
</div>
</div>
</div>
<!-- Server Status & Stats -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-16">
<div class="bg-white dark:bg-card-dark rounded-xl p-6 flex items-center gap-4 shadow-sm border border-slate-100 dark:border-slate-700/50 hover:border-primary/30 transition-colors group">
<div class="size-12 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center text-green-600 dark:text-green-400 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined">dns</span>
</div>
<div>
<p class="text-sm font-medium text-slate-500 dark:text-slate-400">Server Status</p>
<p class="text-xl font-bold text-slate-900 dark:text-white flex items-center gap-2">
Online
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
</span>
</p>
</div>
</div>
<div class="bg-white dark:bg-card-dark rounded-xl p-6 flex items-center gap-4 shadow-sm border border-slate-100 dark:border-slate-700/50 hover:border-primary/30 transition-colors group">
<div class="size-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined">groups</span>
</div>
<div>
<p class="text-sm font-medium text-slate-500 dark:text-slate-400">Active Mods</p>
<p class="text-xl font-bold text-slate-900 dark:text-white">24 Online</p>
</div>
</div>
<div class="bg-white dark:bg-card-dark rounded-xl p-6 flex items-center gap-4 shadow-sm border border-slate-100 dark:border-slate-700/50 hover:border-primary/30 transition-colors group">
<div class="size-12 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined">check_circle</span>
</div>
<div>
<p class="text-sm font-medium text-slate-500 dark:text-slate-400">Tickets Solved</p>
<p class="text-xl font-bold text-slate-900 dark:text-white">14,205+</p>
</div>
</div>
</div>
<!-- Quest Board (Categories) -->
<div class="mb-20">
<div class="flex items-center gap-3 mb-8 px-2">
<div class="h-8 w-1.5 rounded-full bg-primary"></div>
<h2 class="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white">Choose Your Support Quest</h2>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Card 1 -->
<a class="group relative flex flex-col bg-white dark:bg-card-dark rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-700 hover:shadow-xl hover:shadow-primary/10 hover:-translate-y-1 transition-all duration-300" href="#">
<div class="h-40 w-full rounded-2xl bg-gradient-to-br from-pink-100 to-rose-200 dark:from-pink-900/40 dark:to-rose-900/40 mb-6 overflow-hidden relative">
<img class="w-full h-full object-cover opacity-90 group-hover:scale-110 transition-transform duration-500 mix-blend-overlay" data-alt="Abstract 3D lock icon floating" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA5Y4xdFpQL8BUMStZv97zsWcW6ka49Y25yVsvXYtZ_O5j6pnJPNhdBmv6_7Meank5ZHF0yVsPiirhiSSXgj6qerQ6C4ptW8mOUzwSlkTAnRSAaSCVjeJreIeilySbt_jZkbZBMogjTiKX_DcB27jlVGSU7_5uv0MZN1WVPGcQNvNfXQFc4T6g-KbmbvDdawYorbrGeF4gNlW1bN-OmDiadMuTwOTCWG4wXQamVjGTbBzFFqMVGuM6ugxnd2HWwU4OgX5FU7NmB"/>
<div class="absolute inset-0 flex items-center justify-center">
<span class="material-symbols-outlined text-4xl text-rose-500 dark:text-rose-300">lock_open</span>
</div>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2 group-hover:text-primary transition-colors">Unlock Profile</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed mb-4">Recover lost passwords, update email, or unban accounts.</p>
<div class="mt-auto pt-4 flex items-center text-primary font-bold text-sm">
Start Quest <span class="material-symbols-outlined text-lg ml-1 group-hover:translate-x-1 transition-transform">arrow_forward</span>
</div>
</a>
<!-- Card 2 -->
<a class="group relative flex flex-col bg-white dark:bg-card-dark rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-700 hover:shadow-xl hover:shadow-primary/10 hover:-translate-y-1 transition-all duration-300" href="#">
<div class="h-40 w-full rounded-2xl bg-gradient-to-br from-amber-100 to-yellow-200 dark:from-amber-900/40 dark:to-yellow-900/40 mb-6 overflow-hidden relative">
<img class="w-full h-full object-cover opacity-90 group-hover:scale-110 transition-transform duration-500 mix-blend-overlay" data-alt="Abstract golden coins 3D illustration" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6KfjCnhnBbyvmi1pzZznUiSSEPKuu-8oXVTb3gWbwzZlrRcR8og8V9owa9rmrJcawXgTTDm7mSpVrZAqosOSClCbHGwlL368LEYUM0gOeXe_6v4xl5hPgIVZReXm1zmtPn8C1STKDpUlGFeTw3FTI_Q0serZ3uSZZ3E3-KdywDaprL-Lms8w7Cw5f1MZWSc846qpX6zDe14xv3zFsHZ5YGGfPzFSUTe5J19m5-MXzmtZEfroADMA3QULXZGgOW4v8dfJGCzCo"/>
<div class="absolute inset-0 flex items-center justify-center">
<span class="material-symbols-outlined text-4xl text-amber-500 dark:text-amber-300">payments</span>
</div>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2 group-hover:text-primary transition-colors">Treasure & Payments</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed mb-4">Issues with coins, gems, subscriptions or refund requests.</p>
<div class="mt-auto pt-4 flex items-center text-primary font-bold text-sm">
Start Quest <span class="material-symbols-outlined text-lg ml-1 group-hover:translate-x-1 transition-transform">arrow_forward</span>
</div>
</a>
<!-- Card 3 -->
<a class="group relative flex flex-col bg-white dark:bg-card-dark rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-700 hover:shadow-xl hover:shadow-primary/10 hover:-translate-y-1 transition-all duration-300" href="#">
<div class="h-40 w-full rounded-2xl bg-gradient-to-br from-blue-100 to-cyan-200 dark:from-blue-900/40 dark:to-cyan-900/40 mb-6 overflow-hidden relative">
<img class="w-full h-full object-cover opacity-90 group-hover:scale-110 transition-transform duration-500 mix-blend-overlay" data-alt="Abstract blue digital bug or glitch pattern" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDpJkwR2oxIqRLK5cON_1zGIClioBRmDzdLAzM0xIy9KaHCWlDBdHFpmU0JZ0gu8uPkEi_7NCj116XxN2bF2wBHCSKr69whpsOzlkPsHY2ViYwmkYkHMeB_RdL-c8nDovYi1X7iphuWTuVA7eJN8aB_-PAuRTE5JbiqDuMTereZV1-uLXomwqJcz-YyQBAygcw0EvjsuWVm8tTvugkXiYNqnAwOou3CZX4Y_E2P76WKVVJNc-sPBy1kVbXq8ZDK2Lz1s0ixjwJE"/>
<div class="absolute inset-0 flex items-center justify-center">
<span class="material-symbols-outlined text-4xl text-cyan-500 dark:text-cyan-300">bug_report</span>
</div>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2 group-hover:text-primary transition-colors">Report a Glitch</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed mb-4">Found a bug in the matrix? Let us squash it for you!</p>
<div class="mt-auto pt-4 flex items-center text-primary font-bold text-sm">
Start Quest <span class="material-symbols-outlined text-lg ml-1 group-hover:translate-x-1 transition-transform">arrow_forward</span>
</div>
</a>
<!-- Card 4 -->
<a class="group relative flex flex-col bg-white dark:bg-card-dark rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-700 hover:shadow-xl hover:shadow-primary/10 hover:-translate-y-1 transition-all duration-300" href="#">
<div class="h-40 w-full rounded-2xl bg-gradient-to-br from-emerald-100 to-green-200 dark:from-emerald-900/40 dark:to-green-900/40 mb-6 overflow-hidden relative">
<img class="w-full h-full object-cover opacity-90 group-hover:scale-110 transition-transform duration-500 mix-blend-overlay" data-alt="Abstract green book or map illustration" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAtdgF5s_5_oVjyPl_gBba5GIr09ZR6QI8nDasisZvwQzFPJchY3JQH_zLnvKDF9zcTfc3LDRTFR8EUn7TtAGZ-7eNKb90WhJ09WLsS7XlBQkzZ7zaU3JP4Nl-RfEV1bWIAB9xvlFbzKxkyNXwjCTICd9sCPYM2_1OB8ULwzWWZ6u_7CTmVZf0StycCcyW9YZNVCCteVte-9HGF8VJ2xZ34zNZrb4j5dcTrfiRIjMplsQIR7Ad17ebugvMFH5ooz3BTCYMZd3HB"/>
<div class="absolute inset-0 flex items-center justify-center">
<span class="material-symbols-outlined text-4xl text-emerald-500 dark:text-emerald-300">menu_book</span>
</div>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2 group-hover:text-primary transition-colors">Gameplay Guide</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed mb-4">Learn the rules of the arena and become a champion.</p>
<div class="mt-auto pt-4 flex items-center text-primary font-bold text-sm">
Start Quest <span class="material-symbols-outlined text-lg ml-1 group-hover:translate-x-1 transition-transform">arrow_forward</span>
</div>
</a>
</div>
</div>
<!-- Main Content Area: FAQ & Ticket Form -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start">
<!-- FAQ Section (Knowledge Scroll) -->
<div class="flex flex-col gap-6">
<div class="flex items-center gap-3 px-2">
<div class="size-10 rounded-full bg-orange-100 dark:bg-orange-900/30 text-orange-500 dark:text-orange-400 flex items-center justify-center">
<span class="material-symbols-outlined">auto_stories</span>
</div>
<h2 class="text-2xl font-bold text-slate-900 dark:text-white">Knowledge Scroll</h2>
</div>
<div class="flex flex-col gap-4">
<!-- FAQ Item 1 -->
<div class="bg-white dark:bg-card-dark rounded-2xl p-6 shadow-sm border border-slate-100 dark:border-slate-700 group cursor-pointer transition-all hover:border-primary/30">
<details class="group">
<summary class="flex justify-between items-center font-bold text-lg text-slate-900 dark:text-white list-none cursor-pointer">
How do I reset my secret code?
<span class="material-symbols-outlined transition-transform group-open:rotate-180">expand_more</span>
</summary>
<div class="text-slate-600 dark:text-slate-300 mt-4 leading-relaxed">
To reset your password, visit the login page and click "Forgot Password". We'll send a magic link to your registered email scroll. Follow the link to create a new secret code.
</div>
</details>
</div>
<!-- FAQ Item 2 -->
<div class="bg-white dark:bg-card-dark rounded-2xl p-6 shadow-sm border border-slate-100 dark:border-slate-700 group cursor-pointer transition-all hover:border-primary/30">
<details class="group">
<summary class="flex justify-between items-center font-bold text-lg text-slate-900 dark:text-white list-none cursor-pointer">
Where are my gems?
<span class="material-symbols-outlined transition-transform group-open:rotate-180">expand_more</span>
</summary>
<div class="text-slate-600 dark:text-slate-300 mt-4 leading-relaxed">
Gems usually appear in your inventory instantly. If the server is busy, it might take up to 15 minutes. Try refreshing the game! If they're still missing, summon a mod using the form.
</div>
</details>
</div>
<!-- FAQ Item 3 -->
<div class="bg-white dark:bg-card-dark rounded-2xl p-6 shadow-sm border border-slate-100 dark:border-slate-700 group cursor-pointer transition-all hover:border-primary/30">
<details class="group">
<summary class="flex justify-between items-center font-bold text-lg text-slate-900 dark:text-white list-none cursor-pointer">
Can I change my username?
<span class="material-symbols-outlined transition-transform group-open:rotate-180">expand_more</span>
</summary>
<div class="text-slate-600 dark:text-slate-300 mt-4 leading-relaxed">
You can change your username once for free in the Profile settings. Subsequent changes will cost 500 Gems. Choose wisely, adventurer!
</div>
</details>
</div>
</div>
<button class="self-start mt-2 text-primary font-bold hover:underline flex items-center gap-1">
View all scrolls <span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
<!-- Ticket Form (Summon a Mod) -->
<div class="bg-[#f0e7ff] dark:bg-[#2d1b4e] rounded-[2.5rem] p-8 lg:p-10 relative overflow-hidden">
<!-- Background decoration -->
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-[60px] translate-x-1/2 -translate-y-1/2"></div>
<div class="relative z-10">
<div class="flex items-center gap-3 mb-6">
<div class="size-10 rounded-full bg-primary text-white flex items-center justify-center shadow-lg shadow-primary/30">
<span class="material-symbols-outlined">send</span>
</div>
<h2 class="text-2xl font-bold text-slate-900 dark:text-white">Summon a Mod</h2>
</div>
<p class="text-slate-600 dark:text-slate-300 mb-8">
Can't find the answer in the scrolls? Send a direct message to our support wizards.
</p>
<form class="flex flex-col gap-5">
<div class="grid grid-cols-2 gap-4">
<div class="col-span-2 sm:col-span-1">
<label class="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-2 pl-2">Character Name</label>
<input class="w-full h-12 px-4 rounded-xl border-none bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 focus:ring-2 focus:ring-primary shadow-sm" placeholder="e.g. Hero123" type="text"/>
</div>
<div class="col-span-2 sm:col-span-1">
<label class="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-2 pl-2">Email Scroll</label>
<input class="w-full h-12 px-4 rounded-xl border-none bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 focus:ring-2 focus:ring-primary shadow-sm" placeholder="your@email.com" type="email"/>
</div>
</div>
<div>
<label class="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-2 pl-2">Quest Log (Issue)</label>
<textarea class="w-full p-4 rounded-xl border-none bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder:text-slate-400 focus:ring-2 focus:ring-primary shadow-sm h-32 resize-none" placeholder="Describe your problem here..."></textarea>
</div>
<div class="relative">
<label class="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-2 pl-2">Evidence (Screenshots)</label>
<div class="flex items-center justify-center w-full">
<label class="flex flex-col items-center justify-center w-full h-24 border-2 border-dashed border-primary/30 rounded-xl cursor-pointer bg-white/50 dark:bg-slate-800/50 hover:bg-white dark:hover:bg-slate-800 transition-colors" for="dropzone-file">
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<span class="material-symbols-outlined text-primary mb-1">cloud_upload</span>
<p class="text-xs text-slate-500 dark:text-slate-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
</div>
<input class="hidden" id="dropzone-file" type="file"/>
</label>
</div>
</div>
<button class="mt-4 w-full h-14 bg-primary hover:bg-primary/90 text-white rounded-full font-bold text-lg shadow-lg shadow-primary/25 transition-all hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center gap-2" type="button">
Send Message <span class="material-symbols-outlined">send</span>
</button>
</form>
</div>
</div>
</div>
</main>
<footer class="bg-white dark:bg-background-dark border-t border-slate-200 dark:border-slate-800 py-12 px-6 mt-12">
<div class="max-w-[1280px] mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2 text-slate-900 dark:text-white font-bold">
<div class="size-6 text-primary">
<svg fill="currentColor" 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"></path>
</svg>
</div>
QuizQuest
</div>
<div class="text-slate-500 dark:text-slate-400 text-sm">
© 2023 QuizQuest. All rights reserved. Keep questing!
</div>
<div class="flex gap-4">
<a class="text-slate-400 hover:text-primary transition-colors" href="#">
<span class="sr-only">Twitter</span>
<svg aria-hidden="true" class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
<a class="text-slate-400 hover:text-primary transition-colors" href="#">
<span class="sr-only">Discord</span>
<svg aria-hidden="true" class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24">
<path clip-rule="evenodd" d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1568 2.419zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1568 2.419z" fill-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</footer>
</div>
</body></html>