<!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: Rewards Hub & Prize Store</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk: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"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#a413ec",
"secondary": "#FFD700",
"accent-green": "#39FF14",
"background-light": "#f7f6f8",
"background-dark": "#0a0a0a",
"surface-dark": "#1c1022",
"surface-card": "#2d1b36",
"border-dark": "#332839",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"]
},
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"card-shine": "linear-gradient(105deg, transparent 20%, rgba(255,215,0,0.1) 25%, transparent 30%)"
}
},
},
}
</script>
<style>
body {
font-family: 'Space Grotesk', sans-serif;
}
.neon-glow-primary {
box-shadow: 0 0 15px rgba(164, 19, 236, 0.4);
}
.neon-glow-primary:hover {
box-shadow: 0 0 25px rgba(164, 19, 236, 0.6);
}
.neon-glow-gold {
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}
.glass-panel {
backdrop-filter: blur(12px);
background: rgba(28, 16, 34, 0.9);
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 10px 30px -10px rgba(164, 19, 236, 0.3);
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen">
<div class="relative flex h-auto min-h-screen w-full flex-col overflow-x-hidden">
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-border-dark px-6 lg:px-10 py-4 glass-panel sticky top-0 z-50">
<div class="flex items-center gap-8">
<div class="flex items-center gap-4 text-primary cursor-pointer">
<div class="size-8">
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M39.475 21.6262C40.358 21.4363 40.6863 21.5589 40.7581 21.5934C40.7876 21.655 40.8547 21.857 40.8082 22.3336C40.7408 23.0255 40.4502 24.0046 39.8572 25.2301C38.6799 27.6631 36.5085 30.6631 33.5858 33.5858C30.6631 36.5085 27.6632 38.6799 25.2301 39.8572C24.0046 40.4502 23.0255 40.7407 22.3336 40.8082C21.8571 40.8547 21.6551 40.7875 21.5934 40.7581C21.5589 40.6863 21.4363 40.358 21.6262 39.475C21.8562 38.4054 22.4689 36.9657 23.5038 35.2817C24.7575 33.2417 26.5497 30.9744 28.7621 28.762C30.9744 26.5497 33.2417 24.7574 35.2817 23.5037C36.9657 22.4689 38.4054 21.8562 39.475 21.6262ZM4.41189 29.2403L18.7597 43.5881C19.8813 44.7097 21.4027 44.9179 22.7217 44.7893C24.0585 44.659 25.5148 44.1631 26.9723 43.4579C29.9052 42.0387 33.2618 39.5667 36.4142 36.4142C39.5667 33.2618 42.0387 29.9052 43.4579 26.9723C44.1631 25.5148 44.659 24.0585 44.7893 22.7217C44.9179 21.4027 44.7097 19.8813 43.5881 18.7597L29.2403 4.41187C27.8527 3.02428 25.8765 3.02573 24.2861 3.36776C22.6081 3.72863 20.7334 4.58419 18.8396 5.74801C16.4978 7.18716 13.9881 9.18353 11.5858 11.5858C9.18354 13.988 7.18717 16.4978 5.74802 18.8396C4.58421 20.7334 3.72865 22.6081 3.36778 24.2861C3.02574 25.8765 3.02429 27.8527 4.41189 29.2403Z" fill="currentColor" fill-rule="evenodd"></path>
</svg>
</div>
<h2 class="text-slate-100 text-xl font-bold leading-tight tracking-tight">QuizQuest</h2>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium" href="#">Dashboard</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium" href="#">Quizzes</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium" href="#">Leaderboard</a>
<a class="text-primary text-sm font-bold border-b-2 border-primary pb-1" href="#">Rewards Store</a>
</nav>
</div>
<div class="flex flex-1 justify-end gap-6 items-center">
<div class="hidden lg:flex items-center gap-2 px-4 py-2 bg-secondary/10 border border-secondary/30 rounded-lg">
<span class="material-symbols-outlined text-secondary text-xl">token</span>
<span class="text-secondary font-bold text-lg">24,500</span>
<span class="text-xs text-secondary/70 uppercase font-bold ml-1">pts</span>
</div>
<div class="size-10 rounded-full border-2 border-primary overflow-hidden cursor-pointer relative group">
<img class="w-full h-full object-cover" data-alt="User profile avatar with neon purple border" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCpGqq6rSUuUL1mNwvakxxZM-Qq8evGRaW_yyBUfoHO-Kcz779tFX15o-IZhA7QKLKSZ6cArlH2x0Vrpya3iZhS8_7uaH73QeXuue4tTBw8AKDKuBB5e1gcoBXuqAlX1AAoKjmYixsTKji5vAE6xnU_XMw2oqlB33w0RZ3NFjNl5lp2nyPJc-eqzrRwpPEK-qzR6CE3p4xCfo7yP3uoEOyOUUDbZyLIG8lAmmKWci72p2QPJGScoWA616f00p707coG0dCyYumOu4VZ"/>
<div class="absolute inset-0 bg-primary/20 hidden group-hover:block transition-all"></div>
</div>
</div>
</header>
<main class="flex-1 w-full max-w-[1440px] mx-auto p-6 lg:p-8 grid grid-cols-1 lg:grid-cols-12 gap-8">
<aside class="lg:col-span-3 space-y-8 h-fit lg:sticky lg:top-28">
<div class="bg-surface-dark border border-border-dark p-6 rounded-2xl relative overflow-hidden group">
<div class="absolute top-0 right-0 w-32 h-32 bg-primary/20 rounded-full blur-3xl -mr-10 -mt-10"></div>
<div class="relative z-10">
<p class="text-slate-400 text-sm font-medium mb-1">Your Balance</p>
<h1 class="text-4xl font-black text-white tracking-tight mb-2 flex items-center gap-2">
24,500 <span class="text-secondary text-2xl material-symbols-outlined">token</span>
</h1>
<div class="w-full h-2 bg-slate-800 rounded-full mt-4 overflow-hidden">
<div class="h-full bg-gradient-to-r from-primary to-secondary w-3/4"></div>
</div>
<p class="text-xs text-slate-400 mt-2 flex justify-between">
<span>Next Tier: Gold Elite</span>
<span>500 pts to go</span>
</p>
</div>
<button class="mt-6 w-full py-3 bg-primary text-white font-bold rounded-xl neon-glow-primary hover:brightness-110 active:scale-95 transition-all flex items-center justify-center gap-2">
<span class="material-symbols-outlined">add_circle</span>
Earn More Points
</button>
</div>
<nav class="space-y-2">
<a class="flex items-center gap-3 px-4 py-3 bg-surface-card border-l-4 border-primary text-white font-bold rounded-r-lg transition-all" href="#">
<span class="material-symbols-outlined text-primary">storefront</span>
Browse Store
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:bg-surface-dark hover:text-white rounded-lg transition-all" href="#">
<span class="material-symbols-outlined">inventory_2</span>
Claimed Rewards
<span class="ml-auto bg-slate-800 text-xs px-2 py-0.5 rounded text-slate-300">4</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:bg-surface-dark hover:text-white rounded-lg transition-all" href="#">
<span class="material-symbols-outlined">history</span>
Transaction History
</a>
</nav>
<div class="bg-surface-dark border border-border-dark p-5 rounded-2xl">
<h3 class="text-white font-bold mb-4 flex items-center gap-2">
<span class="material-symbols-outlined text-secondary">lock_open</span>
Unlockable Tiers
</h3>
<div class="space-y-4">
<div class="flex items-center gap-3 opacity-50">
<div class="size-10 rounded-full bg-gradient-to-br from-amber-700 to-amber-900 flex items-center justify-center text-white font-bold text-xs border border-amber-500/30">
B
</div>
<div>
<p class="text-sm font-bold text-slate-300">Bronze</p>
<p class="text-xs text-slate-500">Unlocked</p>
</div>
<span class="material-symbols-outlined text-green-500 ml-auto text-sm">check_circle</span>
</div>
<div class="flex items-center gap-3">
<div class="size-10 rounded-full bg-gradient-to-br from-slate-400 to-slate-600 flex items-center justify-center text-white font-bold text-xs border border-slate-300/30 shadow-lg shadow-slate-500/20">
S
</div>
<div>
<p class="text-sm font-bold text-white">Silver</p>
<p class="text-xs text-primary">Current Tier</p>
</div>
<span class="material-symbols-outlined text-primary ml-auto text-sm">radio_button_checked</span>
</div>
<div class="flex items-center gap-3 grayscale opacity-60">
<div class="size-10 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center text-white font-bold text-xs border border-yellow-300/30">
G
</div>
<div>
<p class="text-sm font-bold text-slate-300">Gold</p>
<p class="text-xs text-slate-500">Locked (25k pts)</p>
</div>
<span class="material-symbols-outlined text-slate-600 ml-auto text-sm">lock</span>
</div>
</div>
</div>
</aside>
<section class="lg:col-span-9 space-y-8">
<div class="relative w-full h-64 rounded-3xl overflow-hidden group">
<img alt="Gaming Setup" class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBt6-f8BBg2vihDGG5lcNjsoJQZbKhgL4yDcJrmw-uPDRE6MpzmnCA0bt0dFvijuVQ8o8saHDO0EYIoyPjXGdFvOFqzhyHr6ybOg77VlElMFKXoe-kAyR_tfudUhrjZs50qQaLvus2uJv_MlRoDI11GfwIGJQy6372ptk5ftHiX9tVAzyXO8u8PD4HL8PE10K0cBKAlb9X2_7o83NBO63Ct5IsD8PgbqUnrA5w8G7SsK_FBpa7j_nfZuxA6J5slbjuOPH4-Bz-f3WKb"/>
<div class="absolute inset-0 bg-gradient-to-r from-surface-dark via-surface-dark/80 to-transparent"></div>
<div class="absolute inset-0 flex flex-col justify-center px-8 lg:px-12">
<span class="inline-block px-3 py-1 bg-secondary/20 text-secondary border border-secondary/30 rounded-full text-xs font-bold uppercase tracking-widest w-fit mb-3">Featured Reward</span>
<h2 class="text-4xl font-black text-white mb-2 max-w-lg">Ultimate Gaming Station</h2>
<p class="text-slate-300 mb-6 max-w-md">Redeem your hard-earned points for the setup of your dreams. Includes high-end peripherals and neon lighting.</p>
<button class="w-fit px-6 py-3 bg-white text-surface-dark font-bold rounded-lg hover:bg-secondary hover:text-surface-dark transition-colors flex items-center gap-2">
View Details <span class="material-symbols-outlined">arrow_forward</span>
</button>
</div>
</div>
<div class="flex flex-col md:flex-row gap-4 justify-between items-center sticky top-24 z-40 bg-background-dark/95 backdrop-blur py-2">
<div class="flex gap-2 overflow-x-auto pb-2 md:pb-0 scrollbar-hide w-full md:w-auto">
<button class="px-4 py-2 bg-primary text-white rounded-full text-sm font-bold whitespace-nowrap shadow-lg shadow-primary/20">All Rewards</button>
<button class="px-4 py-2 bg-surface-dark border border-border-dark text-slate-400 hover:text-white rounded-full text-sm font-medium whitespace-nowrap hover:border-primary transition-colors">Tech & Gadgets</button>
<button class="px-4 py-2 bg-surface-dark border border-border-dark text-slate-400 hover:text-white rounded-full text-sm font-medium whitespace-nowrap hover:border-primary transition-colors">Gift Cards</button>
<button class="px-4 py-2 bg-surface-dark border border-border-dark text-slate-400 hover:text-white rounded-full text-sm font-medium whitespace-nowrap hover:border-primary transition-colors">Merch</button>
</div>
<div class="relative w-full md:w-64">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-lg">search</span>
<input class="w-full bg-surface-dark border-border-dark rounded-lg pl-10 pr-4 py-2 text-sm text-slate-100 focus:ring-1 focus:ring-primary focus:border-primary placeholder:text-slate-600" placeholder="Search rewards..."/>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-surface-card border border-border-dark rounded-2xl p-4 flex flex-col gap-4 card-hover transition-all duration-300 group">
<div class="relative h-48 w-full bg-surface-dark rounded-xl overflow-hidden">
<img alt="Headphones" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCI2UF8rOAKHdAl12SXilubSUgKlD_6oaO2YAll4DwVm8F7h46FfBfJO8O54RkZF9J4JwtjqjLqzKEpwucYcUpxfYSgtdc0PY2DK-hwRG9yY6ghp2NTYekpWPlbGz1WDXfP5WLMqt70Lh9bI7-JVs_iFCmbjTyLnwei3SNcZbUM6401O9pOUMbR1AnTVkjFZ0Z1uebz-gKVHr85eVP0spPZO_op2jA1ezNo5Pk_IxOPHgdOzjzO73o_9Rm7XTy7lQVFfRzJ7zYPENkF"/>
<div class="absolute top-2 right-2 bg-black/60 backdrop-blur text-white text-xs font-bold px-2 py-1 rounded border border-white/10">Only 3 Left</div>
</div>
<div class="flex-1">
<h3 class="text-lg font-bold text-white mb-1">Sonic Blast Pro Headset</h3>
<p class="text-xs text-slate-400 line-clamp-2">Immersive surround sound with noise cancellation. Perfect for competitive gaming sessions.</p>
</div>
<div class="flex items-center justify-between border-t border-border-dark pt-4">
<div class="text-secondary font-bold flex items-center gap-1">
<span class="material-symbols-outlined text-lg">token</span>
12,500
</div>
<button class="px-4 py-2 bg-primary/10 text-primary border border-primary/20 hover:bg-primary hover:text-white rounded-lg text-sm font-bold transition-all">Redeem</button>
</div>
</div>
<div class="bg-surface-card border border-border-dark rounded-2xl p-4 flex flex-col gap-4 card-hover transition-all duration-300 group">
<div class="relative h-48 w-full bg-surface-dark rounded-xl overflow-hidden">
<img alt="Keyboard" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6ZO0dh5Kf1GRpSe959jb0sgWTrK8HDeStVOnleScxChrODHopyJSbXNA8mPA3rzVTYNqkuAYI4O6VepR2yiOI_TdsmJweGjOLpOEwJ9WBtV1qG9WT7-t4fJ_-d0CrfO8vibyym2LYndPdfn_K2uARjq-7rqUQBN1V_fnnpeoPXSxQ-J9FxD_RTk16b_2XyxtoN_abpJQRF5vWHj_L3YqYlJlqnZg6PGBX4MmJELe6h-Di1WRr5hoNLcwmxNyiPOc6eWa42MNrC8pa"/>
</div>
<div class="flex-1">
<h3 class="text-lg font-bold text-white mb-1">Neon Mech Keyboard</h3>
<p class="text-xs text-slate-400 line-clamp-2">RGB mechanical keyboard with custom switches. Durable build for intense typing.</p>
</div>
<div class="flex items-center justify-between border-t border-border-dark pt-4">
<div class="text-secondary font-bold flex items-center gap-1">
<span class="material-symbols-outlined text-lg">token</span>
8,000
</div>
<button class="px-4 py-2 bg-primary/10 text-primary border border-primary/20 hover:bg-primary hover:text-white rounded-lg text-sm font-bold transition-all">Redeem</button>
</div>
</div>
<div class="bg-surface-card border border-border-dark rounded-2xl p-4 flex flex-col gap-4 card-hover transition-all duration-300 group">
<div class="relative h-48 w-full bg-surface-dark rounded-xl overflow-hidden flex items-center justify-center bg-gradient-to-br from-indigo-900 to-purple-900">
<span class="material-symbols-outlined text-6xl text-white/20">card_giftcard</span>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-3xl font-black text-white">$50</span>
</div>
</div>
<div class="flex-1">
<h3 class="text-lg font-bold text-white mb-1">Steam Wallet Code</h3>
<p class="text-xs text-slate-400 line-clamp-2">Add funds to your Steam Wallet. Instant digital delivery via email.</p>
</div>
<div class="flex items-center justify-between border-t border-border-dark pt-4">
<div class="text-secondary font-bold flex items-center gap-1">
<span class="material-symbols-outlined text-lg">token</span>
5,000
</div>
<button class="px-4 py-2 bg-primary/10 text-primary border border-primary/20 hover:bg-primary hover:text-white rounded-lg text-sm font-bold transition-all">Redeem</button>
</div>
</div>
<div class="bg-surface-card border border-border-dark rounded-2xl p-4 flex flex-col gap-4 relative overflow-hidden group opacity-75 hover:opacity-100 transition-opacity">
<div class="absolute inset-0 bg-black/60 z-20 flex flex-col items-center justify-center backdrop-blur-[2px] border border-transparent hover:border-secondary/50 rounded-2xl transition-all">
<span class="material-symbols-outlined text-4xl text-secondary mb-2">lock</span>
<span class="text-secondary font-bold text-sm uppercase tracking-widest">Gold Tier Only</span>
</div>
<div class="relative h-48 w-full bg-surface-dark rounded-xl overflow-hidden">
<img alt="PC" class="w-full h-full object-cover grayscale" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCEiJFI7puyYCERKlUr0tGztpARKtqIuBJjtNZJ7vXeYLwfg_5u-kpbNP8Vc23Z6umgzF7YQvYTrGs_-fnIUDBH9C2xiXQaEFQUDC1moEwtC_9Zl5IkmUCf_x0VTm4OTSc3TSPqZ2UATNstYrIeCrvZ7p6sa5I1ttUNZMcozT0BMs-vnWQrnoLn5fKRvGtf44uyo-JYeVOq4pjQ3eaFpuVF6q4ame5clQ0xBBQ4oWTlWbaPpB79U_wyAINEc_QOIan_f9llyLevi9zL"/>
</div>
<div class="flex-1">
<h3 class="text-lg font-bold text-slate-300 mb-1">CyberRig Custom PC</h3>
<p class="text-xs text-slate-500 line-clamp-2">Top-tier gaming rig with RTX 4090. The ultimate prize for the ultimate champion.</p>
</div>
<div class="flex items-center justify-between border-t border-border-dark pt-4">
<div class="text-slate-500 font-bold flex items-center gap-1">
<span class="material-symbols-outlined text-lg">token</span>
150,000
</div>
<button class="px-4 py-2 bg-slate-800 text-slate-500 rounded-lg text-sm font-bold cursor-not-allowed">Locked</button>
</div>
</div>
<div class="bg-surface-card border border-border-dark rounded-2xl p-4 flex flex-col gap-4 card-hover transition-all duration-300 group">
<div class="relative h-48 w-full bg-surface-dark rounded-xl overflow-hidden flex items-center justify-center bg-gradient-to-br from-green-900 to-emerald-900">
<span class="material-symbols-outlined text-6xl text-white/20">shopping_bag</span>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-3xl font-black text-white">MERCH</span>
</div>
</div>
<div class="flex-1">
<h3 class="text-lg font-bold text-white mb-1">QuizQuest Hoodie</h3>
<p class="text-xs text-slate-400 line-clamp-2">Premium cotton hoodie with embroidered logo. Keep warm while you quiz.</p>
</div>
<div class="flex items-center justify-between border-t border-border-dark pt-4">
<div class="text-secondary font-bold flex items-center gap-1">
<span class="material-symbols-outlined text-lg">token</span>
3,500
</div>
<button class="px-4 py-2 bg-primary/10 text-primary border border-primary/20 hover:bg-primary hover:text-white rounded-lg text-sm font-bold transition-all">Redeem</button>
</div>
</div>
<div class="bg-surface-card border border-border-dark rounded-2xl p-4 flex flex-col gap-4 card-hover transition-all duration-300 group">
<div class="relative h-48 w-full bg-surface-dark rounded-xl overflow-hidden">
<img alt="Mouse" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDKpwQyAMHdlSgkUNFliiniqAf0hLa_nLffwf5f70ypuIuiIwNNoPlAdMAu8LON1RZRydm_64aWlJWNecMMBgTEQzh-fRMQhZuJ1WZZx8PtBg6_TdtdmwGnMzXwoHT9k3aXnkJK0MpreJPn519jq5z7HPUvds5gd3d0o1ZU7Bp5MNnWXMgdbqxcVeUxSoFJWBLGtyzTJNmsJcLxdHtbG6BvMMfD-K6HXUjkfymU5aZCLC897FU4mNA7aYzaKTIcLZeK59sANUml_jAZ"/>
</div>
<div class="flex-1">
<h3 class="text-lg font-bold text-white mb-1">Precision Wireless Mouse</h3>
<p class="text-xs text-slate-400 line-clamp-2">Ultra-lightweight wireless mouse with 25K sensor. Dominate the leaderboard.</p>
</div>
<div class="flex items-center justify-between border-t border-border-dark pt-4">
<div class="text-secondary font-bold flex items-center gap-1">
<span class="material-symbols-outlined text-lg">token</span>
6,500
</div>
<button class="px-4 py-2 bg-primary/10 text-primary border border-primary/20 hover:bg-primary hover:text-white rounded-lg text-sm font-bold transition-all">Redeem</button>
</div>
</div>
</div>
<div class="flex justify-center pt-8">
<button class="px-8 py-3 bg-surface-dark border border-border-dark hover:border-primary text-slate-300 hover:text-white rounded-full text-sm font-bold transition-all flex items-center gap-2">
Load More Rewards
<span class="material-symbols-outlined text-lg">expand_more</span>
</button>
</div>
</section>
</main>
<footer class="border-t border-border-dark mt-12 bg-surface-dark">
<div class="max-w-[1440px] mx-auto px-8 py-12 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex flex-col gap-2">
<div class="flex items-center gap-2 text-slate-100">
<div class="size-6 text-primary">
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M39.475 21.6262C40.358 21.4363 40.6863 21.5589 40.7581 21.5934C40.7876 21.655 40.8547 21.857 40.8082 22.3336C40.7408 23.0255 40.4502 24.0046 39.8572 25.2301C38.6799 27.6631 36.5085 30.6631 33.5858 33.5858C30.6631 36.5085 27.6632 38.6799 25.2301 39.8572C24.0046 40.4502 23.0255 40.7407 22.3336 40.8082C21.8571 40.8547 21.6551 40.7875 21.5934 40.7581C21.5589 40.6863 21.4363 40.358 21.6262 39.475C21.8562 38.4054 22.4689 36.9657 23.5038 35.2817C24.7575 33.2417 26.5497 30.9744 28.7621 28.762C30.9744 26.5497 33.2417 24.7574 35.2817 23.5037C36.9657 22.4689 38.4054 21.8562 39.475 21.6262ZM4.41189 29.2403L18.7597 43.5881C19.8813 44.7097 21.4027 44.9179 22.7217 44.7893C24.0585 44.659 25.5148 44.1631 26.9723 43.4579C29.9052 42.0387 33.2618 39.5667 36.4142 36.4142C39.5667 33.2618 42.0387 29.9052 43.4579 26.9723C44.1631 25.5148 44.659 24.0585 44.7893 22.7217C44.9179 21.4027 44.7097 19.8813 43.5881 18.7597L29.2403 4.41187C27.8527 3.02428 25.8765 3.02573 24.2861 3.36776C22.6081 3.72863 20.7334 4.58419 18.8396 5.74801C16.4978 7.18716 13.9881 9.18353 11.5858 11.5858C9.18354 13.988 7.18717 16.4978 5.74802 18.8396C4.58421 20.7334 3.72865 22.6081 3.36778 24.2861C3.02574 25.8765 3.02429 27.8527 4.41189 29.2403Z" fill="currentColor" fill-rule="evenodd"></path>
</svg>
</div>
<span class="font-bold">QuizQuest</span>
</div>
<div class="text-slate-500 text-sm">
© 2024 QuizQuest Gaming Portal. All rights reserved.
</div>
</div>
<div class="flex gap-6 text-sm font-medium text-slate-400">
<a class="hover:text-primary transition-colors" href="#">Terms of Service</a>
<a class="hover:text-primary transition-colors" href="#">Privacy Policy</a>
<a class="hover:text-primary transition-colors" href="#">Support</a>
</div>
</div>
</footer>
</div>
</body></html>