<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Blog & Updates</title>
<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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"primary-light": "#9d4df2",
"primary-dark": "#5e0eb0",
"secondary": "#ff0080",
"accent": "#00d4ff",
"background-light": "#f7f6f8",
"background-dark": "#191022",
"surface-light": "#ffffff",
"surface-dark": "#2d1b3e",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"],
"sans": ["Spline Sans", "sans-serif"]
},
borderRadius: { "DEFAULT": "1rem", "lg": "1.5rem", "xl": "2rem", "2xl": "3rem", "full": "9999px" },
boxShadow: {
"game": "0 10px 0 0 rgba(0,0,0,0.1)",
"game-hover": "0 6px 0 0 rgba(0,0,0,0.1)",
"game-active": "0 2px 0 0 rgba(0,0,0,0.1)",
"glow": "0 0 20px rgba(127, 19, 236, 0.3)"
}
},
},
}
</script>
<style>
body {
font-family: "Spline Sans", sans-serif;
}
.text-gradient {
background: linear-gradient(135deg, #7f13ec 0%, #ff0080 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.bg-gradient-mesh {
background-color: #f7f6f8;
background-image:
radial-gradient(at 0% 0%, hsla(273,66%,87%,1) 0, transparent 50%),
radial-gradient(at 50% 0%, hsla(190,73%,86%,1) 0, transparent 50%),
radial-gradient(at 100% 0%, hsla(333,76%,89%,1) 0, transparent 50%);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen flex flex-col font-display overflow-x-hidden">
<!-- Top Navigation -->
<header class="sticky top-0 z-50 bg-surface-light/90 dark:bg-surface-dark/90 backdrop-blur-md border-b border-slate-200 dark:border-slate-800">
<div class="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<!-- Logo -->
<div class="flex items-center gap-4">
<div class="flex items-center justify-center size-10 bg-primary rounded-xl text-white shadow-lg shadow-primary/30">
<span class="material-symbols-outlined text-2xl">sports_esports</span>
</div>
<span class="text-xl font-bold tracking-tight text-slate-900 dark:text-white">QuizQuest</span>
</div>
<!-- Desktop Nav -->
<nav class="hidden md:flex items-center gap-8">
<a class="text-sm font-semibold text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary transition-colors" href="#">Quizzes</a>
<a class="text-sm font-semibold text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary transition-colors" href="#">Leaderboard</a>
<a class="text-sm font-semibold text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary transition-colors" href="#">Shop</a>
<a class="text-sm font-bold text-primary relative after:content-[''] after:absolute after:-bottom-2 after:left-0 after:w-full after:h-1 after:bg-primary after:rounded-full" href="#">Blog</a>
</nav>
<!-- Actions -->
<div class="flex items-center gap-4">
<div class="hidden sm:flex relative">
<input class="pl-10 pr-4 py-2.5 bg-slate-100 dark:bg-slate-800 border-none rounded-full text-sm w-48 focus:w-64 transition-all focus:ring-2 focus:ring-primary/50 text-slate-900 dark:text-white placeholder-slate-400" placeholder="Search quests..." type="text"/>
<span class="material-symbols-outlined absolute left-3 top-2.5 text-slate-400 text-[20px]">search</span>
</div>
<button class="hidden sm:flex bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-700 px-5 py-2.5 rounded-full text-sm font-bold transition-colors">
Log In
</button>
<button class="bg-primary hover:bg-primary-dark text-white px-5 py-2.5 rounded-full text-sm font-bold shadow-lg shadow-primary/30 transition-all hover:scale-105 active:scale-95 flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">bolt</span>
Sign Up
</button>
</div>
</div>
</div>
</header>
<main class="flex-grow bg-gradient-mesh">
<div class="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-12">
<!-- Hero Section: Featured Quest -->
<section class="relative rounded-2xl overflow-hidden bg-surface-light dark:bg-surface-dark shadow-xl border border-slate-200 dark:border-slate-800 group">
<div class="grid lg:grid-cols-2 gap-8 p-8 lg:p-12 items-center relative z-10">
<div class="space-y-6">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent dark:text-cyan-300 border border-accent/20">
<span class="material-symbols-outlined text-sm font-bold">new_releases</span>
<span class="text-xs font-bold uppercase tracking-wider">Featured Update</span>
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-black leading-tight text-slate-900 dark:text-white tracking-tight">
Season 4: <br/><span class="text-gradient">Master the Geography Bracket</span>
</h1>
<p class="text-lg text-slate-600 dark:text-slate-300 max-w-md font-medium">
New maps, new challenges, and better rewards. Unlock the World Traveler badge by completing the daily quests.
</p>
<div class="flex flex-wrap gap-4 pt-2">
<button class="bg-primary hover:bg-primary-dark text-white px-8 py-4 rounded-full text-base font-bold shadow-game hover:shadow-game-hover active:shadow-game-active transition-all transform hover:-translate-y-1 active:translate-y-0 flex items-center gap-2">
<span class="material-symbols-outlined">menu_book</span>
Read Patch Notes
</button>
<button class="bg-white dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 hover:border-primary hover:text-primary px-8 py-4 rounded-full text-base font-bold transition-all flex items-center gap-2">
<span class="material-symbols-outlined">play_circle</span>
Watch Trailer
</button>
</div>
</div>
<!-- Decorative Graphic Area -->
<div class="relative h-[300px] lg:h-[400px] flex items-center justify-center">
<div class="absolute inset-0 bg-gradient-to-tr from-primary/20 to-secondary/20 rounded-full blur-3xl opacity-60"></div>
<!-- Floating Cards illusion -->
<div class="relative w-full h-full perspective-1000">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-cover bg-center rounded-3xl shadow-2xl rotate-[-6deg] z-10 border-4 border-white dark:border-slate-800" data-alt="Abstract colorful map visualization" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCxUpuRIJUsvX9IFNZoUHhC0bybmUFrBHdculrmvyvvCRBb27l5yBE6fmKsk9wM0mWZ-f96szDloejbTuOX0bcGgwzJ08Cx9D3CjDMYH5BvO5kYmFzJHsxT2zL6i94YKIb-rowJmYp3UkSyE9w1_qlsccmYnhFzZ2Jh8C3sxDavlQCB3XmQAondfXITgh9MBEjeiPgp7TGUBYc1SWzwwM0ndiyRimjdapzeV9zW_oyxq3EvSgKP0qSXgw5q2DwL5u4Ypx_sJ5Zy');"></div>
<div class="absolute top-10 right-10 lg:right-20 bg-white dark:bg-slate-800 p-3 rounded-2xl shadow-xl animate-bounce" style="animation-duration: 3s;">
<span class="material-symbols-outlined text-4xl text-yellow-500">emoji_events</span>
</div>
<div class="absolute bottom-10 left-10 lg:left-20 bg-white dark:bg-slate-800 p-3 rounded-2xl shadow-xl animate-bounce" style="animation-duration: 4s;">
<span class="material-symbols-outlined text-4xl text-secondary">rocket_launch</span>
</div>
</div>
</div>
</div>
</section>
<!-- Filter Bar / Inventory -->
<div class="overflow-x-auto pb-4 scrollbar-hide">
<div class="flex gap-3 min-w-max px-1">
<button class="group flex items-center gap-2 px-5 py-3 rounded-2xl bg-slate-900 dark:bg-white text-white dark:text-slate-900 shadow-md font-bold transition-transform hover:scale-105">
<span class="material-symbols-outlined filled">grid_view</span>
All Quests
</button>
<button class="group flex items-center gap-2 px-5 py-3 rounded-2xl bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 shadow-sm border border-slate-200 dark:border-slate-700 font-bold hover:bg-slate-50 dark:hover:bg-slate-700 transition-transform hover:scale-105">
<span class="material-symbols-outlined text-primary">construction</span>
Patch Notes
</button>
<button class="group flex items-center gap-2 px-5 py-3 rounded-2xl bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 shadow-sm border border-slate-200 dark:border-slate-700 font-bold hover:bg-slate-50 dark:hover:bg-slate-700 transition-transform hover:scale-105">
<span class="material-symbols-outlined text-secondary">lightbulb</span>
Strategy Guides
</button>
<button class="group flex items-center gap-2 px-5 py-3 rounded-2xl bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 shadow-sm border border-slate-200 dark:border-slate-700 font-bold hover:bg-slate-50 dark:hover:bg-slate-700 transition-transform hover:scale-105">
<span class="material-symbols-outlined text-green-500">groups</span>
Community
</button>
<button class="group flex items-center gap-2 px-5 py-3 rounded-2xl bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 shadow-sm border border-slate-200 dark:border-slate-700 font-bold hover:bg-slate-50 dark:hover:bg-slate-700 transition-transform hover:scale-105">
<span class="material-symbols-outlined text-orange-500">code</span>
Dev Diary
</button>
</div>
</div>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- Articles Column -->
<div class="lg:col-span-8 space-y-8">
<!-- XP Boost Card (Large) -->
<article class="bg-white dark:bg-slate-800 rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-700 hover:shadow-xl transition-all duration-300 group cursor-pointer relative overflow-hidden">
<div class="absolute top-0 right-0 bg-yellow-400 text-yellow-900 text-xs font-black px-4 py-2 rounded-bl-2xl z-20 flex items-center gap-1 shadow-sm">
<span class="material-symbols-outlined text-base">bolt</span> XP BOOST +100
</div>
<div class="grid sm:grid-cols-2 gap-6">
<div class="aspect-video sm:aspect-auto sm:h-full rounded-2xl overflow-hidden bg-slate-100 dark:bg-slate-900 relative">
<img alt="History books" class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-500" data-alt="Old books and antique clock representing history" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6GjZycW9noGZIWG7IGE0W0M0lTUSCHWM34DP95OnAgRZWV0ebdAIy5AXAnakj9kMBDrNp8ZSOpTRelksRAhiNH9A5f73hJmG16V8Oq_rZnwaMIOl-K9NQuNK125YwiiBxMJb4V3Cm65bly-HZ0rApo7PT4Sb2cJf4JeKgOKe6l17WRmksimaZl7LNfQWnvTXyb1XwlvS7JCPMYDJ56WJLOkVFLPCd6hERdwEKvV13S_GQJ7sN2FPBwDyxoPcYL5Djzx1GYCFa"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-60"></div>
</div>
<div class="flex flex-col justify-center gap-3">
<div class="text-secondary font-bold text-sm tracking-wide uppercase">Strategy Guide</div>
<h2 class="text-2xl font-bold text-slate-900 dark:text-white leading-tight group-hover:text-primary transition-colors">
5 Tricks to Speedrun History Quizzes
</h2>
<p class="text-slate-500 dark:text-slate-400 line-clamp-3 leading-relaxed">
Struggling with the 19th Century bracket? Use these mnemonic devices to memorize dates and maximize your score multiplier.
</p>
<div class="pt-4 flex items-center gap-3">
<div class="size-8 rounded-full bg-slate-200 overflow-hidden">
<img alt="Author" class="w-full h-full object-cover" data-alt="Author avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAXTjfF-J3sPDGMHKKyW9wEP28pbB7Il-rizKpRX0T2lLVLqP7jfTEur6xfujiYlD81aPuaCM8-MGwK6Pq3kjn9fEmeAY6MywhET4NxsuDoVDGI_kIVzuR4rWm5owhzPtVWLFRjca-Z4jFsb5xXV_e-ihYhC3qU9Dze4sT7OslN_sx0a89gHs-JLU2X195SY-sAoyjKfGxu-u5DvusFcVy8KkoXCaHiJwtfrf9G8kLuoGRSA2dzRIrB47jICev_dk7mzgnCDCnf"/>
</div>
<div class="text-xs font-semibold text-slate-900 dark:text-white">
By Alex Chen <span class="text-slate-400 mx-1">•</span> 5 min read
</div>
</div>
</div>
</div>
</article>
<!-- Standard Cards Grid -->
<div class="grid sm:grid-cols-2 gap-6">
<!-- Card 1 -->
<article class="bg-white dark:bg-slate-800 rounded-[2rem] p-5 shadow-sm border border-slate-100 dark:border-slate-700 hover:shadow-lg transition-all hover:-translate-y-1 cursor-pointer flex flex-col h-full">
<div class="aspect-[4/3] rounded-2xl overflow-hidden mb-4 relative">
<img alt="Science lab" class="object-cover w-full h-full" data-alt="Laboratory equipment and science formulas" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDtAlpedJxND12PpKH0fKy4pLIwNVXcYyGrIrs44aLcQLxN8_yh0QQochVRTUyeKp32oqwElTklP6WGgd8Ino017VGQoHwFCHDhSmT1q63ZSBWB6ZqBFa_eaYjmXTn5ME5ZjyvqCeDJjnuSvNXnvQCjR84-QjhmJehTwKLL3O0tY13-hlCOpSMnwW0k1tcn9U5OAPbALMgTrqSKKzn56N-esLsHOa-cTKY8vNrq_pbbclRdSnDLq5aLukB3qwhiGMj0r7K9DBQy"/>
<div class="absolute bottom-3 left-3 bg-white/90 dark:bg-black/80 backdrop-blur text-xs font-bold px-3 py-1.5 rounded-full text-slate-900 dark:text-white flex items-center gap-1">
<span class="material-symbols-outlined text-sm">code</span> Dev Diary
</div>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2 leading-tight">Balancing the Science Category Algorithms</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm mb-4 line-clamp-2 flex-grow">
A deep dive into how we adjusted the difficulty curve for organic chemistry questions.
</p>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-slate-100 dark:border-slate-700">
<span class="text-xs font-medium text-slate-400">2 days ago</span>
<span class="text-primary text-sm font-bold flex items-center gap-1 group-hover:gap-2 transition-all">Read <span class="material-symbols-outlined text-base">arrow_forward</span></span>
</div>
</article>
<!-- Card 2 -->
<article class="bg-white dark:bg-slate-800 rounded-[2rem] p-5 shadow-sm border border-slate-100 dark:border-slate-700 hover:shadow-lg transition-all hover:-translate-y-1 cursor-pointer flex flex-col h-full relative">
<div class="absolute top-0 right-0 bg-primary/10 text-primary text-xs font-black px-3 py-1.5 rounded-bl-xl rounded-tr-[2rem] z-10">XP BOOST +50</div>
<div class="aspect-[4/3] rounded-2xl overflow-hidden mb-4 relative">
<img alt="Community event" class="object-cover w-full h-full" data-alt="Abstract colorful neon lights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBIPb2UbYemUorge-7YCKWldvAqvqM-wgjkhYRoQIiWe7449odaksYMZQ2FwTkzvZi3QCOKyqOp5M04kfRMzRdvZQfBOXI4j2NTj4pCycw5hQVhd03GvYNwg5vQV9p-513XnXIva6IuL1k-nR6Qvjvnpuld9W86-g9tYjlUNeu999hX_Xd5r3ZXGZdgJA1yETe8uXKetHNQYxsXYQBtWG-ZnoIIvObOk8ntC8nGl3JrJk_QKpxe8xP6oiSl5fDXIq79dGVcyh01"/>
<div class="absolute bottom-3 left-3 bg-white/90 dark:bg-black/80 backdrop-blur text-xs font-bold px-3 py-1.5 rounded-full text-slate-900 dark:text-white flex items-center gap-1">
<span class="material-symbols-outlined text-sm">campaign</span> Community
</div>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2 leading-tight">Weekend Event: Neon Nights Trivia</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm mb-4 line-clamp-2 flex-grow">
Join us this Saturday for a live, hosted event with double XP and exclusive avatar frames.
</p>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-slate-100 dark:border-slate-700">
<span class="text-xs font-medium text-slate-400">4 hours ago</span>
<span class="text-primary text-sm font-bold flex items-center gap-1 group-hover:gap-2 transition-all">Join <span class="material-symbols-outlined text-base">arrow_forward</span></span>
</div>
</article>
</div>
</div>
<!-- Sidebar / Leaderboard -->
<aside class="lg:col-span-4 space-y-8">
<!-- Newsletter Loot Box -->
<div class="bg-gradient-to-br from-[#7f13ec] to-[#5e0eb0] rounded-[2rem] p-6 text-white relative overflow-hidden shadow-lg shadow-primary/30">
<div class="absolute -top-10 -right-10 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<div class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center mb-4 backdrop-blur-sm border border-white/30 shadow-inner">
<span class="material-symbols-outlined text-4xl text-yellow-300">inventory_2</span>
</div>
<h3 class="text-xl font-bold mb-2">Weekly Loot Box</h3>
<p class="text-white/80 text-sm mb-6">Subscribe to get weekly intel, secret codes, and strategy guides delivered to your inbox.</p>
<form class="w-full space-y-3">
<input class="w-full px-4 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder-white/50 focus:bg-white/20 focus:ring-0 focus:border-white/50 text-sm" placeholder="Enter your email" type="email"/>
<button class="w-full bg-white text-primary font-bold py-3 rounded-xl hover:bg-slate-50 transition-colors shadow-lg">Unlock Rewards</button>
</form>
</div>
</div>
<!-- Community Legends -->
<div class="bg-white dark:bg-slate-800 rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-700">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2">
<span class="material-symbols-outlined text-yellow-500">trophy</span>
Top Contributors
</h3>
<a class="text-xs font-bold text-primary hover:underline" href="#">View All</a>
</div>
<div class="space-y-4">
<!-- User 1 -->
<div class="flex items-center gap-3 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-xl transition-colors cursor-pointer group">
<div class="relative">
<div class="size-10 rounded-full overflow-hidden border-2 border-yellow-400">
<img alt="User avatar" data-alt="Smiling woman avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBDp7FYQ6iYIJ9UKpPZVtEMlGvf7yuNa_xHheABSf9SNEiwg9_X7ze-S9FaBkfVuxVSErjGvxBbS2P9E11HLurw7YonF_JK7mjjbx7ce8d99pA-TYjSUPVtcBdy-omHznG9_wXWtaML3o-_NFkILaeZMGbA5rIJiOytqXzKBgo6RTfa-evRwnQim_xmGN6ECeDIg0ATqM2HeS8oNg8GFruutmbKead6qiY3cfi-B9PPfgSw6xOAG_MZ4UKpbuYmr-F_T7oEIbOI"/>
</div>
<div class="absolute -bottom-1 -right-1 bg-yellow-400 text-yellow-900 text-[10px] font-black size-5 flex items-center justify-center rounded-full border border-white dark:border-slate-800">1</div>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-bold text-slate-900 dark:text-white truncate">Sarah_QuizWiz</p>
<p class="text-xs text-slate-500 dark:text-slate-400">Lvl 42 • 12 Articles</p>
</div>
<span class="material-symbols-outlined text-slate-300 group-hover:text-primary">chevron_right</span>
</div>
<!-- User 2 -->
<div class="flex items-center gap-3 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-xl transition-colors cursor-pointer group">
<div class="relative">
<div class="size-10 rounded-full overflow-hidden border-2 border-slate-300">
<img alt="User avatar" data-alt="Man with glasses avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBTNY4jNB8N4s5y6NJZZYF2bO0gSdWFuSU2uXAhOkBrXVGpNJfhEBMDQNRFy7KlOSs5GzicoaMJUQA81y9u9XNGEKaOwe1Q1EXW50VBCsKLCBXkenWb4IStmkbZ2DhBwOfrgQZrzCQXsGpu-9esSOOTYilwP8bxoPdhf7S8ocYLDny0O0hcYdnA-5JscQznOwmRTP2KfKJHw6vPHkN3lxQfshZt7LIVvuFYPieyPjKMcFcd1ZnH0EKpYP0CnhHXq8FJvj9rXz6f"/>
</div>
<div class="absolute -bottom-1 -right-1 bg-slate-300 text-slate-800 text-[10px] font-black size-5 flex items-center justify-center rounded-full border border-white dark:border-slate-800">2</div>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-bold text-slate-900 dark:text-white truncate">MarcusT</p>
<p class="text-xs text-slate-500 dark:text-slate-400">Lvl 38 • 8 Articles</p>
</div>
<span class="material-symbols-outlined text-slate-300 group-hover:text-primary">chevron_right</span>
</div>
<!-- User 3 -->
<div class="flex items-center gap-3 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-xl transition-colors cursor-pointer group">
<div class="relative">
<div class="size-10 rounded-full overflow-hidden border-2 border-orange-400">
<img alt="User avatar" data-alt="Smiling woman with long hair" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBSZQs5yBDQsGp-dQBoFzTTY-IVqwhCbuEMy59JPICkR3GvY8XHc_3S5B88oFRUu45lvHB5oybsV8Pprkd8rpWBFKT6IVvTCzjBtApAsaqTZXOalBskUFVxs1JpEkBbQCzjUJtjA_-SduubKletMYxFP0micDrFG7S2VyDFLIAlsrAyzfK3QOTU88qkRcDtXX7hJC83tqJjj3e_-fdWUFV9JCdW7sK4QlBhzxCraOoH3mBG-U0lbbkkIX6U-Ul6W2b5DLIrdoyr"/>
</div>
<div class="absolute -bottom-1 -right-1 bg-orange-400 text-orange-900 text-[10px] font-black size-5 flex items-center justify-center rounded-full border border-white dark:border-slate-800">3</div>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-bold text-slate-900 dark:text-white truncate">GeoMaster99</p>
<p class="text-xs text-slate-500 dark:text-slate-400">Lvl 35 • 6 Articles</p>
</div>
<span class="material-symbols-outlined text-slate-300 group-hover:text-primary">chevron_right</span>
</div>
</div>
</div>
<!-- Tags / Categories Cloud -->
<div class="bg-white dark:bg-slate-800 rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-700">
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-4">Trending Topics</h3>
<div class="flex flex-wrap gap-2">
<a class="px-3 py-1.5 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 text-xs font-bold rounded-lg hover:bg-primary hover:text-white transition-colors" href="#">#Geography</a>
<a class="px-3 py-1.5 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 text-xs font-bold rounded-lg hover:bg-primary hover:text-white transition-colors" href="#">#Speedrun</a>
<a class="px-3 py-1.5 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 text-xs font-bold rounded-lg hover:bg-primary hover:text-white transition-colors" href="#">#Patch1.4</a>
<a class="px-3 py-1.5 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 text-xs font-bold rounded-lg hover:bg-primary hover:text-white transition-colors" href="#">#HistoryBuffs</a>
<a class="px-3 py-1.5 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 text-xs font-bold rounded-lg hover:bg-primary hover:text-white transition-colors" href="#">#RankedMode</a>
</div>
</div>
</aside>
</div>
<!-- "Load More" Button -->
<div class="flex justify-center py-8">
<button class="bg-white dark:bg-slate-800 text-slate-900 dark:text-white font-bold py-3 px-8 rounded-full shadow-sm border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 hover:scale-105 transition-all flex items-center gap-2">
<span class="material-symbols-outlined">refresh</span>
Load More Quests
</button>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-white dark:bg-surface-dark border-t border-slate-200 dark:border-slate-800 pt-16 pb-8">
<div class="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-12">
<div class="col-span-2 lg:col-span-2 pr-8">
<div class="flex items-center gap-3 mb-6">
<div class="flex items-center justify-center size-8 bg-primary rounded-lg text-white">
<span class="material-symbols-outlined text-lg">sports_esports</span>
</div>
<span class="text-xl font-bold tracking-tight text-slate-900 dark:text-white">QuizQuest</span>
</div>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed mb-6 max-w-sm">
Level up your knowledge daily. Join millions of players challenging themselves and friends in the ultimate gamified learning platform.
</p>
<div class="flex gap-4">
<a class="size-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-300 hover:bg-primary hover:text-white transition-colors" href="#">
<span class="material-symbols-outlined text-[20px]">chat_bubble</span>
</a>
<a class="size-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-300 hover:bg-primary hover:text-white transition-colors" href="#">
<span class="material-symbols-outlined text-[20px]">alternate_email</span>
</a>
<a class="size-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-300 hover:bg-primary hover:text-white transition-colors" href="#">
<span class="material-symbols-outlined text-[20px]">smart_display</span>
</a>
</div>
</div>
<div>
<h4 class="font-bold text-slate-900 dark:text-white mb-4">Explore</h4>
<ul class="space-y-3 text-sm text-slate-500 dark:text-slate-400">
<li><a class="hover:text-primary transition-colors" href="#">All Quizzes</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Live Events</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Leaderboards</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Premium Pass</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-slate-900 dark:text-white mb-4">Support</h4>
<ul class="space-y-3 text-sm text-slate-500 dark:text-slate-400">
<li><a class="hover:text-primary transition-colors" href="#">Help Center</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Community Guidelines</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Feedback</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Bug Report</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-slate-900 dark:text-white mb-4">Legal</h4>
<ul class="space-y-3 text-sm text-slate-500 dark:text-slate-400">
<li><a class="hover:text-primary transition-colors" href="#">Privacy Policy</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Terms of Service</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="border-t border-slate-100 dark:border-slate-800 pt-8 flex flex-col sm:flex-row justify-between items-center gap-4 text-xs text-slate-400 dark:text-slate-500">
<p>© 2023 QuizQuest Inc. All rights reserved.</p>
<div class="flex items-center gap-2">
<span class="size-2 bg-green-500 rounded-full"></span>
<span>All Systems Operational</span>
</div>
</div>
</div>
</footer>
</body></html>