<!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 Global Site Map</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;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 id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5b13ec",
"background-light": "#f6f6f8",
"background-dark": "#161022",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
.neon-bullet {
box-shadow: 0 0 8px #5b13ec;
}
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #161022;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #2e2839;
border-radius: 10px;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen flex flex-col">
<header class="sticky top-0 z-50 w-full border-b border-primary/20 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="p-2 bg-primary rounded-lg flex items-center justify-center">
<span class="material-symbols-outlined text-white">query_stats</span>
</div>
<h1 class="text-2xl font-extrabold tracking-tight text-slate-900 dark:text-white">QuizQuest</h1>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Home</a>
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Dashboard</a>
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Prizes</a>
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Support</a>
</nav>
<div class="flex items-center gap-4">
<button class="hidden sm:flex items-center gap-2 bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full font-bold text-sm transition-all transform hover:scale-105">
<span class="material-symbols-outlined text-sm">rocket_launch</span>
Back to Portal
</button>
<div class="w-10 h-10 rounded-full bg-primary/20 border border-primary/30 overflow-hidden" data-alt="Abstract purple avatar profile placeholder">
<img alt="Profile" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBOIjhrKUE8EEKB4azwmjtm5QUoeeoufbp-XwW2iV6hsaWF471e2c4xaxu_qldtAVAvnjLpreDHUzwcNtpABfbr-wZ44n6huEHR5SiVHe1LtOxJrRqs2kKgoyzNDCeqNokDKEGm-f834MqBHlMce_LDRwKSAZ8jvmRfqSo5YnnAe75qzrVTFGNm58H4CW9BbYvVDnKjx_KpvNpuA_SZu4uFEjbe2rhlhhMSn-EftIkXFEUTVg8tlkcbzkiBVBWZJIevvkCpY7f5qD6w"/>
</div>
</div>
</div>
</header>
<main class="flex-grow max-w-7xl mx-auto w-full px-6 py-12">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
<div class="max-w-2xl">
<span class="inline-block px-4 py-1 rounded-full bg-primary/10 text-primary text-xs font-bold uppercase tracking-widest mb-4">Navigation Index</span>
<h2 class="text-5xl font-black tracking-tight mb-4">Global Site Map</h2>
<p class="text-slate-600 dark:text-slate-400 text-lg leading-relaxed">
A high-energy directory of every quest, reward, and portal in the QuizQuest ecosystem. Explore our interconnected world of gamified learning.
</p>
</div>
<div class="w-full md:w-96">
<div class="relative group">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-400 group-focus-within:text-primary transition-colors">
<span class="material-symbols-outlined">search</span>
</div>
<input class="w-full pl-12 pr-4 py-4 bg-white dark:bg-slate-900/50 border border-slate-200 dark:border-slate-800 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all placeholder:text-slate-500" placeholder="Search pages..." type="text"/>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-slate-900/40 border border-slate-200 dark:border-slate-800/60 p-8 rounded-xl flex flex-col gap-6 hover:border-primary/40 transition-all group">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary text-3xl">explore</span>
<h3 class="text-xl font-bold tracking-tight">Main Navigation</h3>
</div>
<ul class="space-y-4">
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Home Feed</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">About Quest</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Platform Features</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Pricing & Plans</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">How it Works</a>
</li>
</ul>
</div>
<div class="bg-white dark:bg-slate-900/40 border border-slate-200 dark:border-slate-800/60 p-8 rounded-xl flex flex-col gap-6 hover:border-primary/40 transition-all group">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary text-3xl">sports_esports</span>
<h3 class="text-xl font-bold tracking-tight">Player Journey</h3>
</div>
<ul class="space-y-4">
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">User Profile</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Active Quizzes</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Global Leaderboard</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Achievement Room</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Quest History</a>
</li>
</ul>
</div>
<div class="bg-white dark:bg-slate-900/40 border border-slate-200 dark:border-slate-800/60 p-8 rounded-xl flex flex-col gap-6 hover:border-primary/40 transition-all group">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary text-3xl">hub</span>
<h3 class="text-xl font-bold tracking-tight">Ecosystem</h3>
</div>
<ul class="space-y-4">
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Vendor Portal</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Merchant API Docs</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Brand Partnerships</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Affiliate Hub</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Quest Builder</a>
</li>
</ul>
</div>
<div class="bg-white dark:bg-slate-900/40 border border-slate-200 dark:border-slate-800/60 p-8 rounded-xl flex flex-col gap-6 hover:border-primary/40 transition-all group">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary text-3xl">redeem</span>
<h3 class="text-xl font-bold tracking-tight">Rewards Hub</h3>
</div>
<ul class="space-y-4">
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Prize Store</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Raffle History</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Points Redemption</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Voucher Wallet</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Gifting Center</a>
</li>
</ul>
</div>
<div class="bg-white dark:bg-slate-900/40 border border-slate-200 dark:border-slate-800/60 p-8 rounded-xl flex flex-col gap-6 hover:border-primary/40 transition-all group lg:col-span-2">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary text-3xl">settings</span>
<h3 class="text-xl font-bold tracking-tight">Account & Security</h3>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<ul class="space-y-4">
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Security Settings</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Password Management</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Two-Factor Auth</a>
</li>
</ul>
<ul class="space-y-4">
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Device History</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Privacy Preferences</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Connected Apps</a>
</li>
</ul>
</div>
</div>
<div class="bg-white dark:bg-slate-900/40 border border-slate-200 dark:border-slate-800/60 p-8 rounded-xl flex flex-col gap-6 hover:border-primary/40 transition-all group lg:col-span-2">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary text-3xl">contact_support</span>
<h3 class="text-xl font-bold tracking-tight">Support & Legal</h3>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<ul class="space-y-4">
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Help Center</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Community Forum</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Status Page</a>
</li>
</ul>
<ul class="space-y-4">
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Terms of Service</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Privacy Policy</a>
</li>
<li class="group/link flex items-center gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-primary neon-bullet"></span>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-medium" href="#">Cookie Policy</a>
</li>
</ul>
</div>
</div>
</div>
<section class="mt-16">
<h3 class="text-2xl font-bold mb-8 flex items-center gap-3">
<span class="material-symbols-outlined text-primary">language</span>
Regional Portals
</h3>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
<a class="p-4 bg-slate-100 dark:bg-slate-900/50 rounded-xl text-center font-bold hover:bg-primary hover:text-white transition-all" href="#">North America</a>
<a class="p-4 bg-slate-100 dark:bg-slate-900/50 rounded-xl text-center font-bold hover:bg-primary hover:text-white transition-all" href="#">Europe</a>
<a class="p-4 bg-slate-100 dark:bg-slate-900/50 rounded-xl text-center font-bold hover:bg-primary hover:text-white transition-all" href="#">Asia Pacific</a>
<a class="p-4 bg-slate-100 dark:bg-slate-900/50 rounded-xl text-center font-bold hover:bg-primary hover:text-white transition-all" href="#">Latin America</a>
<a class="p-4 bg-slate-100 dark:bg-slate-900/50 rounded-xl text-center font-bold hover:bg-primary hover:text-white transition-all" href="#">Middle East</a>
<a class="p-4 bg-slate-100 dark:bg-slate-900/50 rounded-xl text-center font-bold hover:bg-primary hover:text-white transition-all" href="#">Africa</a>
</div>
</section>
</main>
<footer class="mt-20 border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950/50 py-16">
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-12">
<div class="col-span-1 md:col-span-1">
<div class="flex items-center gap-2 mb-6">
<div class="size-8 bg-primary rounded-lg flex items-center justify-center">
<span class="material-symbols-outlined text-white text-lg">query_stats</span>
</div>
<span class="text-xl font-bold">QuizQuest</span>
</div>
<p class="text-slate-500 dark:text-slate-400 mb-6 leading-relaxed">
Elevating knowledge through gamified experiences. Join the global leaderboard today.
</p>
<div class="flex gap-4">
<a class="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-900 flex items-center justify-center hover:bg-primary hover:text-white transition-all" href="#">
<span class="material-symbols-outlined text-lg">public</span>
</a>
<a class="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-900 flex items-center justify-center hover:bg-primary hover:text-white transition-all" href="#">
<span class="material-symbols-outlined text-lg">share</span>
</a>
<a class="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-900 flex items-center justify-center hover:bg-primary hover:text-white transition-all" href="#">
<span class="material-symbols-outlined text-lg">mail</span>
</a>
</div>
</div>
<div>
<h4 class="font-bold text-lg mb-6">Product</h4>
<ul class="space-y-4">
<li><a class="text-slate-500 hover:text-primary transition-colors" href="#">Play Quiz</a></li>
<li><a class="text-slate-500 hover:text-primary transition-colors" href="#">Rewards Store</a></li>
<li><a class="text-slate-500 hover:text-primary transition-colors" href="#">Tournament</a></li>
<li><a class="text-slate-500 hover:text-primary transition-colors" href="#">Pro Plans</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-lg mb-6">Resources</h4>
<ul class="space-y-4">
<li><a class="text-slate-500 hover:text-primary transition-colors" href="#">API Reference</a></li>
<li><a class="text-slate-500 hover:text-primary transition-colors" href="#">Community</a></li>
<li><a class="text-slate-500 hover:text-primary transition-colors" href="#">Blog</a></li>
<li><a class="text-slate-500 hover:text-primary transition-colors" href="#">Brand Assets</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-lg mb-6">Join Our Newsletter</h4>
<p class="text-slate-500 dark:text-slate-400 mb-4 text-sm">Stay updated with the latest quests and rewards.</p>
<form class="flex flex-col gap-2">
<input class="bg-slate-100 dark:bg-slate-900 border-none rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary text-sm" placeholder="email@example.com" type="email"/>
<button class="bg-primary text-white font-bold py-3 rounded-xl hover:bg-primary/90 transition-all text-sm">Subscribe</button>
</form>
</div>
</div>
<div class="max-w-7xl mx-auto px-6 mt-16 pt-8 border-t border-slate-200 dark:border-slate-800 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-slate-500 text-sm">© 2024 QuizQuest Global Ecosystem. All rights reserved.</p>
<div class="flex gap-6 text-sm">
<a class="text-slate-500 hover:text-primary" href="#">Privacy</a>
<a class="text-slate-500 hover:text-primary" href="#">Terms</a>
<a class="text-slate-500 hover:text-primary" href="#">Cookies</a>
</div>
</div>
</footer>
</body></html>