<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>How It Works - QuizQuest</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": "#f9d006",
"primary-dark": "#e0bb05",
"secondary": "#3b82f6",
"background-light": "#fcfbf8",
"background-dark": "#1a1810",
"surface-light": "#ffffff",
"surface-dark": "#2c281b",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"],
"sans": ["Spline Sans", "sans-serif"],
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
boxShadow: {
'game': '0 4px 0 0 rgba(0,0,0,0.15)',
'game-hover': '0 6px 0 0 rgba(0,0,0,0.15)',
'game-active': '0 2px 0 0 rgba(0,0,0,0.15)',
'card': '0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025)',
}
},
},
}
</script>
<style>
.path-dashed {
background-image: linear-gradient(to bottom, #f9d006 50%, transparent 50%);
background-size: 4px 20px;
background-repeat: repeat-y;
}
.floating-element {
animation: float 6s ease-in-out infinite;
}
.floating-element-delayed {
animation: float 6s ease-in-out 3s infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
/* Custom Scrollbar for a cleaner look */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #e0e0e0;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #d4d4d4;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display transition-colors duration-300 overflow-x-hidden">
<!-- Top 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/90 dark:bg-background-dark/90 backdrop-blur-md px-4 py-3 md:px-10">
<div class="flex items-center gap-4">
<div class="size-10 bg-primary rounded-xl flex items-center justify-center shadow-game text-slate-900">
<span class="material-symbols-outlined text-3xl">sports_esports</span>
</div>
<h2 class="text-slate-900 dark:text-white text-xl font-bold leading-tight tracking-tight">QuizQuest</h2>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-slate-600 dark:text-slate-300 hover:text-primary font-bold text-sm transition-colors" href="#">Home</a>
<a class="text-slate-900 dark:text-primary font-bold text-sm" href="#">How It Works</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary font-bold text-sm transition-colors" href="#">Leaderboard</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary font-bold text-sm transition-colors" href="#">Rewards</a>
</nav>
<div class="flex gap-3">
<button class="hidden sm:flex h-10 px-5 bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white text-sm font-bold rounded-full items-center justify-center hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
Log In
</button>
<button class="flex h-10 px-5 bg-primary text-slate-900 text-sm font-bold rounded-full items-center justify-center shadow-game hover:translate-y-[-2px] hover:shadow-game-hover active:translate-y-[2px] active:shadow-game-active transition-all">
Sign Up
</button>
</div>
</header>
<main class="relative w-full flex flex-col items-center">
<!-- Hero Section -->
<section class="relative w-full max-w-7xl px-4 py-16 md:py-24 flex flex-col items-center text-center gap-6 overflow-hidden">
<!-- Decorative floating blobs -->
<div class="absolute top-10 left-10 w-32 h-32 bg-primary/10 rounded-full blur-3xl -z-10 floating-element"></div>
<div class="absolute bottom-20 right-10 w-48 h-48 bg-blue-400/10 rounded-full blur-3xl -z-10 floating-element-delayed"></div>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-slate-800 dark:text-primary font-bold text-sm mb-4 border border-primary/20">
<span class="material-symbols-outlined text-lg">rocket_launch</span>
<span>Version 3.0 Live!</span>
</div>
<h1 class="text-5xl md:text-7xl font-black tracking-tight text-slate-900 dark:text-white mb-2 leading-tight">
Your Quest <br class="md:hidden"/> <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-orange-400">Begins Here</span>
</h1>
<p class="text-lg md:text-xl text-slate-600 dark:text-slate-300 max-w-2xl leading-relaxed">
Embark on a journey of knowledge, conquer trivia challenges, and earn epic loot along the way! Follow the map below to start your adventure.
</p>
<div class="mt-8 relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-primary to-orange-500 rounded-full blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
<button class="relative flex items-center gap-3 h-14 px-8 bg-slate-900 text-white text-lg font-bold rounded-full shadow-xl hover:scale-105 active:scale-95 transition-transform duration-200">
<span class="material-symbols-outlined">play_circle</span>
Start Adventure
</button>
</div>
</section>
<!-- The Map / Steps Container -->
<section class="relative w-full max-w-5xl px-4 pb-24 flex flex-col gap-0">
<!-- Central Line for Desktop -->
<div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-slate-200 dark:bg-slate-700 -translate-x-1/2 rounded-full -z-10"></div>
<!-- Step 1: Create Avatar -->
<div class="group relative flex flex-col md:flex-row items-center w-full gap-8 py-12">
<!-- Mobile Connector Line (Top half) -->
<div class="md:hidden absolute left-8 top-0 h-1/2 w-1 bg-slate-200 dark:bg-slate-700 -z-10"></div>
<!-- Mobile Connector Line (Bottom half) -->
<div class="md:hidden absolute left-8 bottom-0 h-1/2 w-1 bg-slate-200 dark:bg-slate-700 -z-10"></div>
<!-- Content Left (Desktop) / Bottom (Mobile) -->
<div class="flex-1 flex justify-end order-2 md:order-1 text-center md:text-right w-full pl-16 md:pl-0">
<div class="bg-surface-light dark:bg-surface-dark p-6 rounded-2xl shadow-card border border-slate-100 dark:border-slate-800 max-w-md ml-auto hover:border-primary/50 transition-colors duration-300">
<h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-2">Create Your Avatar</h3>
<p class="text-slate-600 dark:text-slate-400">Design a hero that represents you. Choose from hundreds of hairstyles, outfits, and accessories to stand out on the leaderboard.</p>
<div class="mt-4 flex gap-2 justify-center md:justify-end">
<div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400">
<span class="material-symbols-outlined text-sm">checkroom</span>
</div>
<div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center text-green-600 dark:text-green-400">
<span class="material-symbols-outlined text-sm">face</span>
</div>
</div>
</div>
</div>
<!-- Center Marker -->
<div class="relative z-10 order-1 md:order-2 shrink-0">
<div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center shadow-game text-slate-900 text-2xl font-black border-4 border-white dark:border-background-dark md:translate-y-0">
1
</div>
</div>
<!-- Visual Right (Desktop) / Hidden (Mobile) -->
<div class="flex-1 order-3 hidden md:flex items-center justify-start pl-8">
<div class="relative w-64 h-48 rounded-2xl overflow-hidden shadow-lg rotate-3 hover:rotate-0 transition-transform duration-300 bg-slate-100 dark:bg-slate-800">
<img alt="Colorful avatar customization screen" class="w-full h-full object-cover" data-alt="Avatar customization interface" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA4LVGIeO_SMr-yfgT-CbQatKhh7sZVhxLKvyEvmqdwM6zBRGMTtzXFplLa242vDSz2SGIRG1C_Nod0GzuXQskSky8pnBPr6YzOGpCk0QHFgudWShW-9oQZRJ6dma5qta1p-2ooR_BX1jT75gpIpslg5waBlawD5BueV682kV4A9bk6TLIFpc4RkcVcpYMSYyXKV19sMwRIzh5jOrDWhFUAGe6hTUVjN_mn5DhU5oF3qRcBv5zobM_vF2OEkE42FOJletzyQHZ8"/>
</div>
</div>
</div>
<!-- Step 2: Choose Your Realm -->
<div class="group relative flex flex-col md:flex-row items-center w-full gap-8 py-12">
<!-- Mobile Connector Line -->
<div class="md:hidden absolute left-8 top-0 h-full w-1 bg-slate-200 dark:bg-slate-700 -z-10"></div>
<!-- Visual Left (Desktop) / Hidden (Mobile) -->
<div class="flex-1 order-3 md:order-1 hidden md:flex items-center justify-end pr-8">
<div class="relative w-64 h-48 rounded-2xl overflow-hidden shadow-lg -rotate-3 hover:rotate-0 transition-transform duration-300 bg-slate-100 dark:bg-slate-800">
<img alt="Various game world maps" class="w-full h-full object-cover" data-alt="Map of different quiz realms" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBWtkh1mJGrIr-A8bJwKEDEIoutTBB8raZ9YeJdmt5XkE7xZEG8cE1pj61-vmF25oFxSReO4QzZkiy62K8oiKJgRHHwC7q5xv_r753jZhehEG8kFcQDUwAdsdrk1cpv-0FZg0eMHX4D97odXHRcCZIMhgpO6YiH_dCh9VL6ZcssUCiJYE96JazbCtMSGrmKEIpjBNe7QmaNagUKk4byttEnAv-odcz-9uEfipxxscIBNK7mufvRV-37_V8iu5Lcgxm9REEZppop"/>
</div>
</div>
<!-- Center Marker -->
<div class="relative z-10 order-1 md:order-2 shrink-0">
<div class="w-16 h-16 rounded-full bg-white dark:bg-surface-dark flex items-center justify-center shadow-card text-slate-900 dark:text-white text-2xl font-black border-4 border-slate-200 dark:border-slate-600">
2
</div>
</div>
<!-- Content Right (Desktop) / Bottom (Mobile) -->
<div class="flex-1 flex justify-start order-2 md:order-3 text-center md:text-left w-full pl-16 md:pl-0">
<div class="bg-surface-light dark:bg-surface-dark p-6 rounded-2xl shadow-card border border-slate-100 dark:border-slate-800 max-w-md mr-auto hover:border-primary/50 transition-colors duration-300">
<h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-2">Choose Your Realm</h3>
<p class="text-slate-600 dark:text-slate-400">Select from diverse categories like History, Science, Pop Culture, or Magic. Each realm has unique challenges and bosses.</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-start">
<span class="px-3 py-1 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-xs font-bold">Science</span>
<span class="px-3 py-1 rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 text-xs font-bold">History</span>
<span class="px-3 py-1 rounded-full bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 text-xs font-bold">Movies</span>
</div>
</div>
</div>
</div>
<!-- Step 3: Battle & Score -->
<div class="group relative flex flex-col md:flex-row items-center w-full gap-8 py-12">
<!-- Mobile Connector Line -->
<div class="md:hidden absolute left-8 top-0 h-full w-1 bg-slate-200 dark:bg-slate-700 -z-10"></div>
<!-- Content Left (Desktop) / Bottom (Mobile) -->
<div class="flex-1 flex justify-end order-2 md:order-1 text-center md:text-right w-full pl-16 md:pl-0">
<div class="bg-surface-light dark:bg-surface-dark p-6 rounded-2xl shadow-card border border-slate-100 dark:border-slate-800 max-w-md ml-auto hover:border-primary/50 transition-colors duration-300">
<h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-2">Battle & Score</h3>
<p class="text-slate-600 dark:text-slate-400">Answer fast to score combo multipliers. Freeze time with power-ups or use hints when stuck on a tough boss question.</p>
<div class="mt-4 flex gap-4 justify-center md:justify-end items-center">
<div class="flex flex-col items-center">
<span class="material-symbols-outlined text-orange-500 mb-1">local_fire_department</span>
<span class="text-[10px] font-bold uppercase text-slate-500">Streak</span>
</div>
<div class="flex flex-col items-center">
<span class="material-symbols-outlined text-blue-500 mb-1">timer</span>
<span class="text-[10px] font-bold uppercase text-slate-500">Speed</span>
</div>
<div class="flex flex-col items-center">
<span class="material-symbols-outlined text-primary mb-1">bolt</span>
<span class="text-[10px] font-bold uppercase text-slate-500">Power</span>
</div>
</div>
</div>
</div>
<!-- Center Marker -->
<div class="relative z-10 order-1 md:order-2 shrink-0">
<div class="w-16 h-16 rounded-full bg-white dark:bg-surface-dark flex items-center justify-center shadow-card text-slate-900 dark:text-white text-2xl font-black border-4 border-slate-200 dark:border-slate-600">
3
</div>
</div>
<!-- Visual Right (Desktop) / Hidden (Mobile) -->
<div class="flex-1 order-3 hidden md:flex items-center justify-start pl-8">
<div class="relative w-64 h-48 rounded-2xl overflow-hidden shadow-lg rotate-3 hover:rotate-0 transition-transform duration-300 bg-slate-100 dark:bg-slate-800">
<img alt="A dashboard showing high scores and quiz progress" class="w-full h-full object-cover" data-alt="In-game quiz battle interface" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDH6pzzUZW-azT8UqzHQD3asIWJ26n8Bfwiqd18O-f89IFzx3bRSKMyTY_vbcm3O_sg3QWO-DRZMdjCn7LVQJ3PlJgwBbc51DBEQATvoWHcDocJQ6EsdlqysTmRB0rxCgn4GQMvGN-HZRXdZ4XZyBfq0SGcAVXSd14-12e9JVS0SAZKBrfX4fkIbcIgx7WquYb20vXXJJpgS5UaJ1nipGjOSXMSk8-yURx-aiasmcJSX1WsAGsN7Dy2kUVIUgaZbqiptPm_4Imt"/>
</div>
</div>
</div>
<!-- Step 4: Claim Loot -->
<div class="group relative flex flex-col md:flex-row items-center w-full gap-8 py-12">
<!-- Mobile Connector Line (Top half only to end the line) -->
<div class="md:hidden absolute left-8 top-0 h-1/2 w-1 bg-slate-200 dark:bg-slate-700 -z-10"></div>
<!-- Visual Left (Desktop) / Hidden (Mobile) -->
<div class="flex-1 order-3 md:order-1 hidden md:flex items-center justify-end pr-8">
<div class="relative w-64 h-48 rounded-2xl overflow-hidden shadow-lg -rotate-3 hover:rotate-0 transition-transform duration-300 bg-slate-100 dark:bg-slate-800">
<img alt="Treasure chest overflowing with gold coins" class="w-full h-full object-cover" data-alt="Treasure chest rewards" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBJ2wH2nIMQcbxeUGvvEbeGqQIJaN74l3MsLNoVDuDc8OaXxPcuar7Q67DwNyI6_HiKAW4yV_aTFaqdg5KaK5TL724MjvV-3L3Xj1N0RGQR-9aEVatDmiZ9L-Q9r1UpWonkIWcFyszd7p8Li-ux5sCFQE2KF8PE-2nspflm2miSYdOJquSU9seA33ps0x0qhFhy2vxWKpyjtSKHA0poztjURBFp9nyu7c1W9OzaVliTMLFKMiab3kUtSXAUTR085VBgI7I8zAWG"/>
</div>
</div>
<!-- Center Marker -->
<div class="relative z-10 order-1 md:order-2 shrink-0">
<div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center shadow-game-hover text-slate-900 text-3xl font-black border-4 border-white dark:border-background-dark animate-pulse">
<span class="material-symbols-outlined text-4xl">emoji_events</span>
</div>
</div>
<!-- Content Right (Desktop) / Bottom (Mobile) -->
<div class="flex-1 flex justify-start order-2 md:order-3 text-center md:text-left w-full pl-16 md:pl-0">
<div class="bg-surface-light dark:bg-surface-dark p-6 rounded-2xl shadow-card border border-slate-100 dark:border-slate-800 max-w-md mr-auto hover:border-primary/50 transition-colors duration-300">
<h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-2">Claim The Loot</h3>
<p class="text-slate-600 dark:text-slate-400">Unlock badges, climb the global leaderboard, and redeem your points for real-world rewards and exclusive avatar items.</p>
<button class="mt-4 px-4 py-2 bg-slate-900 dark:bg-slate-700 text-white text-sm font-bold rounded-full inline-flex items-center gap-2 hover:bg-slate-800 dark:hover:bg-slate-600 transition-colors">
<span class="material-symbols-outlined text-sm">visibility</span>
View Rewards Catalog
</button>
</div>
</div>
</div>
</section>
<!-- Power Ups Section -->
<section class="w-full bg-slate-100 dark:bg-surface-dark py-20 px-4">
<div class="max-w-6xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
<div>
<h2 class="text-3xl md:text-4xl font-black text-slate-900 dark:text-white mb-4">Power-Ups & Bonuses</h2>
<p class="text-slate-600 dark:text-slate-400 max-w-xl">
Don't go into battle empty-handed. Collect these items to boost your score and survive difficult rounds.
</p>
</div>
<button class="text-primary font-bold flex items-center gap-1 hover:gap-2 transition-all">
See All Items <span class="material-symbols-outlined">arrow_forward</span>
</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Card 1 -->
<div class="bg-surface-light dark:bg-background-dark p-6 rounded-2xl shadow-game hover:shadow-game-hover hover:-translate-y-1 transition-all duration-300 border border-slate-200 dark:border-slate-800 flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 flex items-center justify-center mb-4">
<span class="material-symbols-outlined text-3xl">ac_unit</span>
</div>
<h4 class="text-lg font-bold text-slate-900 dark:text-white">Time Freeze</h4>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Pause the clock for 10 seconds to think.</p>
</div>
<!-- Card 2 -->
<div class="bg-surface-light dark:bg-background-dark p-6 rounded-2xl shadow-game hover:shadow-game-hover hover:-translate-y-1 transition-all duration-300 border border-slate-200 dark:border-slate-800 flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full bg-primary/20 text-yellow-600 dark:text-primary flex items-center justify-center mb-4">
<span class="material-symbols-outlined text-3xl">crossword</span>
</div>
<h4 class="text-lg font-bold text-slate-900 dark:text-white">Double XP</h4>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Earn 2x points for the next 5 questions.</p>
</div>
<!-- Card 3 -->
<div class="bg-surface-light dark:bg-background-dark p-6 rounded-2xl shadow-game hover:shadow-game-hover hover:-translate-y-1 transition-all duration-300 border border-slate-200 dark:border-slate-800 flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 flex items-center justify-center mb-4">
<span class="material-symbols-outlined text-3xl">replay</span>
</div>
<h4 class="text-lg font-bold text-slate-900 dark:text-white">Second Chance</h4>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Got it wrong? Try again without penalty.</p>
</div>
<!-- Card 4 -->
<div class="bg-surface-light dark:bg-background-dark p-6 rounded-2xl shadow-game hover:shadow-game-hover hover:-translate-y-1 transition-all duration-300 border border-slate-200 dark:border-slate-800 flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-600 flex items-center justify-center mb-4">
<span class="material-symbols-outlined text-3xl">lightbulb</span>
</div>
<h4 class="text-lg font-bold text-slate-900 dark:text-white">Golden Hint</h4>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Remove two wrong answers instantly.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="relative w-full py-24 px-4 overflow-hidden">
<!-- Background Texture -->
<div class="absolute inset-0 bg-slate-900 z-0">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-slate-900 to-slate-800"></div>
</div>
<div class="relative z-10 max-w-4xl mx-auto text-center flex flex-col items-center gap-8">
<div class="inline-block p-4 rounded-full bg-white/10 backdrop-blur-sm border border-white/20">
<span class="material-symbols-outlined text-primary text-4xl animate-bounce">stadia_controller</span>
</div>
<h2 class="text-4xl md:text-6xl font-black text-white tracking-tight leading-tight">
Ready to Play? <br/>
<span class="text-primary">Join 10,000+ Players</span>
</h2>
<p class="text-slate-300 text-lg md:text-xl max-w-2xl">
The leaderboard is waiting. Sign up now to get 500 bonus coins and a starter avatar pack!
</p>
<div class="flex flex-col sm:flex-row gap-4 w-full justify-center pt-4">
<button class="min-w-[200px] h-14 bg-primary text-slate-900 text-lg font-bold rounded-full shadow-game hover:shadow-game-hover hover:-translate-y-1 active:shadow-game-active active:translate-y-0 transition-all flex items-center justify-center gap-2">
<span class="material-symbols-outlined">play_arrow</span>
Press Start
</button>
<button class="min-w-[200px] h-14 bg-transparent border-2 border-white/20 text-white text-lg font-bold rounded-full hover:bg-white/10 transition-colors flex items-center justify-center">
View Demo
</button>
</div>
<p class="text-slate-400 text-sm mt-4">No credit card required • Free to play forever</p>
</div>
</section>
</main>
<footer class="bg-background-light dark:bg-background-dark border-t border-slate-200 dark:border-slate-800 pt-16 pb-8 px-4">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between gap-12">
<div class="flex flex-col gap-4">
<div class="flex items-center gap-3 text-slate-900 dark:text-white">
<div class="size-8 bg-primary rounded-lg flex items-center justify-center text-slate-900">
<span class="material-symbols-outlined text-xl">sports_esports</span>
</div>
<span class="text-xl font-bold">QuizQuest</span>
</div>
<p class="text-slate-500 max-w-xs">The ultimate gamified trivia platform. Learn, compete, and win rewards in a vibrant world of knowledge.</p>
</div>
<div class="flex flex-wrap gap-12 md:gap-24">
<div class="flex flex-col gap-4">
<h5 class="text-slate-900 dark:text-white font-bold">Explore</h5>
<a class="text-slate-500 hover:text-primary transition-colors" href="#">Quizzes</a>
<a class="text-slate-500 hover:text-primary transition-colors" href="#">Tournaments</a>
<a class="text-slate-500 hover:text-primary transition-colors" href="#">Shop</a>
</div>
<div class="flex flex-col gap-4">
<h5 class="text-slate-900 dark:text-white font-bold">Community</h5>
<a class="text-slate-500 hover:text-primary transition-colors" href="#">Discord</a>
<a class="text-slate-500 hover:text-primary transition-colors" href="#">Twitter</a>
<a class="text-slate-500 hover:text-primary transition-colors" href="#">Blog</a>
</div>
<div class="flex flex-col gap-4">
<h5 class="text-slate-900 dark:text-white font-bold">Legal</h5>
<a class="text-slate-500 hover:text-primary transition-colors" href="#">Privacy</a>
<a class="text-slate-500 hover:text-primary transition-colors" href="#">Terms</a>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto mt-16 pt-8 border-t border-slate-200 dark:border-slate-800 text-center text-slate-400 text-sm">
© 2023 QuizQuest Inc. All rights reserved. Let the games begin!
</div>
</footer>
</body></html>