<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Affiliate Center - QuizQuest</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@500;700;900&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: "#7C3AED", // Violet-600
"primary-hover": "#6D28D9", // Violet-700
"earnings": "#00FF94", // Electric Green for earnings
"earnings-dim": "#00FF9420",
"accent-yellow": "#FACC15", // Yellow-400
"background-light": "#F3F4F6", // Gray-100
"background-dark": "#0F0720", // Very dark purple/black
"card-dark": "#1A1033", // Dark purple card bg
"card-light": "#FFFFFF",
"text-light": "#1F2937", // Gray-800
"text-dark": "#F3F4F6", // Gray-100
"glass-dark": "rgba(255, 255, 255, 0.05)",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
backgroundImage: {
'hero-gradient': 'radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.15) 0%, rgba(15, 7, 32, 0) 50%)',
'card-gradient': 'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%)',
'glow': 'conic-gradient(from 180deg at 50% 50%, #2a8af6 0deg, #a853ba 180deg, #e92a67 360deg)',
}
},
},
};
</script>
<style type="text/tailwindcss">
:root {
--primary-color: #7C3AED;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #111;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.glass-panel {
background: rgba(26, 16, 51, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark font-sans transition-colors duration-300 antialiased selection:bg-primary selection:text-white">
<nav class="fixed top-0 w-full z-50 backdrop-blur-md bg-white/70 dark:bg-background-dark/80 border-b border-gray-200 dark:border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white">
<span class="material-symbols-outlined text-2xl">sports_esports</span>
</div>
<span class="font-display font-bold text-xl tracking-tight">QuizQuest</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Dashboard</a>
<a class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Quizzes</a>
<a class="text-primary bg-primary/10 transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Affiliates</a>
<a class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Settings</a>
</div>
</div>
<div class="hidden md:flex items-center gap-4">
<div class="flex items-center gap-3 bg-card-dark border border-white/10 px-4 py-1.5 rounded-full">
<div class="w-2 h-2 rounded-full bg-earnings animate-pulse"></div>
<span class="text-sm font-bold text-earnings">₹12,450</span>
</div>
<button class="w-10 h-10 rounded-full bg-gray-200 dark:bg-white/10 flex items-center justify-center hover:bg-gray-300 dark:hover:bg-white/20 transition-colors">
<span class="material-symbols-outlined">notifications</span>
</button>
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-purple-500 p-0.5">
<img alt="User Avatar" class="w-full h-full rounded-full object-cover bg-background-dark" src="https://lh3.googleusercontent.com/aida-public/AB6AXuABpld9ZjacyQET_ytLH7ZvoQhktUN5-nrryAkGPOCFyooE9DM9tSbPNQgavJpq3sRVG6l9LAGCOT9xrhu_k9JwObUwJRrMRS1kADwVNuRSTkum1GrF0bpCefblT3rbUHCmr9Xhao4mQXHfvwi3xFpYNpfaNGF1Dkh9b-ruo8uH-M8cRerfpmNx6ntVYE-zLxwc4BMSdLR6sHN9Tt78x6m2QlDbs6f0LugalOd9MZtZp9RD0PtUGLaHalW6oE9ihl3RndWZoF2uq5M"/>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" type="button">
<span class="material-symbols-outlined">menu</span>
</button>
</div>
</div>
</div>
</nav>
<div class="pt-28 pb-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10">
<div>
<div class="flex items-center gap-2 text-primary text-sm font-medium mb-1">
<span class="material-symbols-outlined text-lg">diamond</span>
<span>Affiliate Program</span>
</div>
<h1 class="font-display text-4xl font-bold text-white">Your Earnings Center</h1>
<p class="text-gray-400 mt-2 max-w-2xl">Invite friends, grow your squad, and earn real cash rewards for every active player you bring to QuizQuest.</p>
</div>
<button class="inline-flex items-center gap-2 bg-earnings text-black px-6 py-3 rounded-xl font-bold hover:bg-[#00CC75] transition-colors shadow-[0_0_20px_rgba(0,255,148,0.3)]">
<span class="material-symbols-outlined">account_balance_wallet</span>
Withdraw Funds
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
<div class="glass-panel rounded-2xl p-6 relative overflow-hidden group">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-6xl text-white">group_add</span>
</div>
<div class="text-gray-400 text-sm font-medium uppercase tracking-wider mb-2">Total Referrals</div>
<div class="text-4xl font-display font-bold text-white mb-2">1,248</div>
<div class="flex items-center gap-1 text-earnings text-sm font-medium">
<span class="material-symbols-outlined text-base">trending_up</span>
<span>+12% this month</span>
</div>
</div>
<div class="glass-panel rounded-2xl p-6 relative overflow-hidden group">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-6xl text-white">verified_user</span>
</div>
<div class="text-gray-400 text-sm font-medium uppercase tracking-wider mb-2">Active Subscriptions</div>
<div class="text-4xl font-display font-bold text-white mb-2">856</div>
<div class="flex items-center gap-1 text-purple-400 text-sm font-medium">
<span>68% retention rate</span>
</div>
</div>
<div class="glass-panel rounded-2xl p-6 relative overflow-hidden group border-earnings/30">
<div class="absolute inset-0 bg-earnings/5"></div>
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-6xl text-earnings">payments</span>
</div>
<div class="relative z-10">
<div class="text-earnings text-sm font-medium uppercase tracking-wider mb-2">Total Commission Earned</div>
<div class="text-4xl font-display font-bold text-white mb-2">₹45,290</div>
<div class="flex items-center gap-1 text-gray-400 text-sm">
<span>Next payout in 3 days</span>
</div>
</div>
</div>
</div>
<div class="grid lg:grid-cols-3 gap-8">
<div class="lg:col-span-2 space-y-8">
<div class="glass-panel rounded-2xl p-8 border border-white/10">
<h3 class="text-xl font-bold text-white mb-6 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">link</span>
Your Unique Referral Link
</h3>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex-grow relative">
<input class="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent outline-none pr-12 font-mono" readonly="" type="text" value="https://quizquest.io/ref/gamer_king_99"/>
<button class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors">
<span class="material-symbols-outlined">content_copy</span>
</button>
</div>
<button class="bg-primary hover:bg-primary-hover text-white px-6 py-3 rounded-xl font-semibold transition-colors flex items-center justify-center gap-2 whitespace-nowrap">
<span class="material-symbols-outlined">share</span>
Share Link
</button>
</div>
<div class="mt-6 flex flex-wrap gap-3">
<button class="flex items-center gap-2 px-4 py-2 bg-[#1DA1F2]/10 text-[#1DA1F2] border border-[#1DA1F2]/20 rounded-lg hover:bg-[#1DA1F2]/20 transition-colors text-sm font-medium">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path></svg>
Twitter
</button>
<button class="flex items-center gap-2 px-4 py-2 bg-[#25D366]/10 text-[#25D366] border border-[#25D366]/20 rounded-lg hover:bg-[#25D366]/20 transition-colors text-sm font-medium">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"></path></svg>
WhatsApp
</button>
<button class="flex items-center gap-2 px-4 py-2 bg-[#5865F2]/10 text-[#5865F2] border border-[#5865F2]/20 rounded-lg hover:bg-[#5865F2]/20 transition-colors text-sm font-medium">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028 14.09 14.09 0 001.226-1.994.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.086 2.157 2.419 0 1.334-.956 2.42-2.157 2.42zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.086 2.157 2.419 0 1.334-.946 2.42-2.157 2.42z"></path></svg>
Discord
</button>
</div>
</div>
<div class="glass-panel rounded-2xl overflow-hidden border border-white/10">
<div class="p-6 border-b border-white/5 flex items-center justify-between">
<h3 class="text-xl font-bold text-white">Referred Users</h3>
<div class="flex gap-2">
<input class="bg-black/20 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-white placeholder-gray-500 outline-none focus:border-primary" placeholder="Search user..." type="text"/>
<button class="p-1.5 rounded-lg bg-white/5 hover:bg-white/10 text-white transition-colors">
<span class="material-symbols-outlined text-lg">filter_list</span>
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="bg-white/5 border-b border-white/5 text-gray-400 text-xs uppercase tracking-wider">
<th class="px-6 py-4 font-medium">User</th>
<th class="px-6 py-4 font-medium">Joined</th>
<th class="px-6 py-4 font-medium">Status</th>
<th class="px-6 py-4 font-medium">Games Played</th>
<th class="px-6 py-4 font-medium text-right">Commission</th>
</tr>
</thead>
<tbody class="divide-y divide-white/5">
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 font-bold text-xs">JD</div>
<span class="font-medium text-white group-hover:text-primary transition-colors">JohnDoe_99</span>
</div>
</td>
<td class="px-6 py-4 text-sm text-gray-400">Oct 24, 2023</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
Active
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-300">42</td>
<td class="px-6 py-4 text-right font-medium text-earnings">+ ₹150.00</td>
</tr>
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center text-purple-400 font-bold text-xs">SK</div>
<span class="font-medium text-white group-hover:text-primary transition-colors">SuperKool</span>
</div>
</td>
<td class="px-6 py-4 text-sm text-gray-400">Oct 22, 2023</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
Active
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-300">18</td>
<td class="px-6 py-4 text-right font-medium text-earnings">+ ₹85.50</td>
</tr>
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-orange-500/20 flex items-center justify-center text-orange-400 font-bold text-xs">M2</div>
<span class="font-medium text-white group-hover:text-primary transition-colors">Master2000</span>
</div>
</td>
<td class="px-6 py-4 text-sm text-gray-400">Oct 21, 2023</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-gray-500/10 text-gray-400 border border-gray-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-gray-500"></span>
Inactive
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-300">2</td>
<td class="px-6 py-4 text-right font-medium text-gray-500">₹0.00</td>
</tr>
<tr class="hover:bg-white/5 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-pink-500/20 flex items-center justify-center text-pink-400 font-bold text-xs">EL</div>
<span class="font-medium text-white group-hover:text-primary transition-colors">EliteGamer</span>
</div>
</td>
<td class="px-6 py-4 text-sm text-gray-400">Oct 19, 2023</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
Active
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-300">156</td>
<td class="px-6 py-4 text-right font-medium text-earnings">+ ₹420.00</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 border-t border-white/5 flex items-center justify-center">
<button class="text-sm text-gray-400 hover:text-white transition-colors flex items-center gap-1">
View All Referrals
<span class="material-symbols-outlined text-base">arrow_forward</span>
</button>
</div>
</div>
</div>
<div class="space-y-8">
<div class="glass-panel rounded-2xl p-6 border border-white/10 flex flex-col items-center text-center">
<h3 class="text-lg font-bold text-white mb-4">Scan to Join Squad</h3>
<div class="bg-white p-4 rounded-xl mb-4 shadow-[0_0_30px_rgba(255,255,255,0.1)]">
<img alt="QR Code" class="w-40 h-40" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB3ZaiofmLmBDeMYH0MXEzi1GQJbD7MbU4fBLl7SO04iSm3lNA3fXmhVADuWHsmgVhNSoLZWU5H5ZbYUxftFdxmvq742yux_OsPePSK6OJ5fgsb84YVlGrw0Yv_4wWUb5EH5cdWw0wfC35THYm3NrrwBUOq7c-rn0l8oCnzB5YS9qMCps-qMYKZ7LJhqjlVTQ-2O6UvlDhKh0bti1hTGMDlZbPMYx1AFcev1N0G5wwxXuhBB5Z0VW9InIKzokMRbQDoxo0KTyS_liE"/>
</div>
<p class="text-sm text-gray-400 mb-4">Share this QR code on your stream or social media for quick sign-ups.</p>
<button class="w-full py-2.5 rounded-lg border border-white/10 hover:bg-white/5 text-sm font-medium text-white transition-colors flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-lg">download</span>
Download QR
</button>
</div>
<div class="glass-panel rounded-2xl p-6 border border-earnings/20 bg-gradient-to-b from-[#1A1033] to-[#0d1f16]">
<h3 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
<span class="material-symbols-outlined text-earnings">account_balance</span>
Quick Withdraw
</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between text-xs text-gray-400 mb-1">
<span>Available Balance</span>
<span class="text-white">₹12,450</span>
</div>
<div class="relative">
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 font-sans">₹</span>
<input class="w-full bg-black/40 border border-white/10 rounded-lg pl-8 pr-4 py-2.5 text-white focus:border-earnings outline-none placeholder-gray-600" placeholder="Enter amount" type="number"/>
</div>
</div>
<div>
<label class="block text-xs text-gray-400 mb-1">Withdraw to</label>
<select class="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-2.5 text-white focus:border-earnings outline-none">
<option>PayPal (user@email.com)</option>
<option>Bank Account (**** 4589)</option>
<option>Crypto Wallet</option>
</select>
</div>
<button class="w-full bg-earnings text-black py-3 rounded-lg font-bold hover:bg-[#00CC75] transition-colors shadow-lg shadow-earnings/20 mt-2">
Withdraw Now
</button>
<p class="text-[10px] text-center text-gray-500 mt-2">Minimum withdrawal limit: ₹1,000. Processing time: 24h.</p>
</div>
</div>
<div class="glass-panel rounded-2xl p-6 border border-primary/30 relative overflow-hidden">
<div class="absolute -right-6 -top-6 w-24 h-24 bg-primary/20 blur-3xl rounded-full pointer-events-none"></div>
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold text-white">Affiliate Tier</h3>
<span class="bg-primary/20 text-primary border border-primary/30 px-2 py-0.5 rounded text-xs font-bold uppercase">Gold</span>
</div>
<div class="flex items-center gap-4 mb-4">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-yellow-400 to-orange-600 p-0.5 shadow-lg shadow-orange-500/20 flex items-center justify-center">
<div class="w-full h-full rounded-full bg-background-dark flex items-center justify-center">
<span class="material-symbols-outlined text-3xl text-yellow-500">military_tech</span>
</div>
</div>
<div>
<div class="text-2xl font-display font-bold text-white">Level 3</div>
<div class="text-xs text-gray-400">Next: Platinum (20% Comm.)</div>
</div>
</div>
<div class="w-full bg-white/10 rounded-full h-2 mb-2">
<div class="bg-gradient-to-r from-yellow-400 to-orange-500 h-2 rounded-full" style="width: 75%"></div>
</div>
<div class="flex justify-between text-[10px] text-gray-500 font-mono">
<span>1,248 Referrals</span>
<span>Target: 1,500</span>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-white dark:bg-[#080412] border-t border-gray-200 dark:border-white/5 py-8 mt-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
<span class="material-symbols-outlined">sports_esports</span>
<span class="text-sm font-medium">QuizQuest © 2023</span>
</div>
<div class="flex items-center gap-8">
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Privacy</a>
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Terms</a>
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Support</a>
</div>
</div>
</footer>
</body></html>