<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Prizes</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 id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"primary-light": "#f2eafd",
"background-light": "#ffffff",
"background-subtle": "#faf9fc",
"text-main": "#140d1b",
"text-subtle": "#6b6675",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
boxShadow: {
'soft': '0 4px 20px -2px rgba(127, 19, 236, 0.05)',
'hover': '0 10px 40px -5px rgba(127, 19, 236, 0.15)',
}
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
/* Custom scrollbar for clean look */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #d4d4d4;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #c1c1c1;
}
</style>
</head>
<body class="bg-background-light text-text-main antialiased min-h-screen flex flex-col">
<!-- Navbar -->
<header class="sticky top-0 z-50 w-full bg-background-light/80 backdrop-blur-md border-b border-gray-100">
<div class="max-w-[1200px] mx-auto px-6 h-16 flex items-center justify-between">
<div class="flex items-center gap-2 text-primary">
<div class="size-8 flex items-center justify-center bg-primary rounded-lg text-white">
<span class="material-symbols-outlined">hotel_class</span>
</div>
<h2 class="text-text-main text-xl font-bold tracking-tight">QuizQuest</h2>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-text-subtle hover:text-primary text-sm font-medium transition-colors" href="#">Home</a>
<a class="text-text-subtle hover:text-primary text-sm font-medium transition-colors" href="#">Quizzes</a>
<a class="text-primary text-sm font-bold" href="#">Prizes</a>
<a class="text-text-subtle hover:text-primary text-sm font-medium transition-colors" href="#">Leaderboard</a>
</nav>
<div class="flex items-center gap-3">
<div class="hidden sm:flex items-center gap-1 bg-primary-light px-3 py-1.5 rounded-full text-primary text-sm font-bold mr-2">
<span class="material-symbols-outlined text-[18px]">bolt</span>
<span>2,450 XP</span>
</div>
<button class="hidden sm:flex h-9 px-5 items-center justify-center rounded-full bg-primary text-white text-sm font-bold shadow-soft hover:shadow-hover hover:-translate-y-0.5 transition-all duration-300">
Join Now
</button>
<button class="sm:hidden p-2 text-text-main">
<span class="material-symbols-outlined">menu</span>
</button>
</div>
</div>
</header>
<main class="flex-grow">
<!-- Hero Section -->
<section class="relative pt-12 pb-16 px-6 overflow-hidden">
<div class="max-w-[1200px] mx-auto">
<div class="bg-background-subtle rounded-[2.5rem] p-8 md:p-12 relative overflow-hidden border border-gray-100 shadow-sm">
<!-- Background decoration -->
<div class="absolute top-0 right-0 w-2/3 h-full bg-gradient-to-l from-primary-light/50 to-transparent pointer-events-none"></div>
<div class="relative z-10 flex flex-col md:flex-row gap-8 md:gap-12 items-center">
<div class="flex-1 flex flex-col gap-6 text-center md:text-left">
<div class="inline-flex items-center gap-2 self-center md:self-start px-3 py-1 rounded-full bg-white border border-gray-100 shadow-sm text-xs font-semibold uppercase tracking-wider text-primary">
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
Featured Reward
</div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-black tracking-tight leading-[1.1] text-text-main">
The Ultimate <br/>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-400">Tech Bundle</span>
</h1>
<p class="text-text-subtle text-lg max-w-lg mx-auto md:mx-0 leading-relaxed">
Elevate your setup. Exchange your hard-earned XP for the latest gadgets. Free shipping worldwide.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start pt-2">
<button class="h-12 px-8 rounded-full bg-primary text-white font-bold text-base shadow-lg shadow-primary/20 hover:shadow-primary/40 hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-2">
<span>Redeem for 15,000 XP</span>
<span class="material-symbols-outlined text-[20px]">arrow_forward</span>
</button>
<button class="h-12 px-8 rounded-full bg-white border border-gray-200 text-text-main font-semibold hover:bg-gray-50 transition-colors">
View Details
</button>
</div>
</div>
<div class="flex-1 w-full flex justify-center md:justify-end relative">
<!-- Abstract circle behind image -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] bg-white rounded-full shadow-soft z-0"></div>
<img alt="Modern tech setup" class="relative z-10 w-full max-w-md object-contain drop-shadow-2xl hover:scale-105 transition-transform duration-500" data-alt="Modern minimal desk setup with laptop and headphones" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDaOqXNf50EGww2N2a40M_aO5NTwbgsHE3fQmCzev_ra8QGj3okIw88-4BE_AAacdU-vV_Nj1AL8VzVPjehcGqIFx195n0ejALnuULhoezU5To63Bw3d76VlsS2cew-yEzbIYTqui9JE6G32imrjarbz5p6Y6OYWjRUBGJs5zNIdaArYVZX9y-NUGzd53a_d50S161SylEc8_Q8UWqaQK6jvNr2arF09SRTHdWSncDTDT1K4c56LYySpBoZk4-gGZxUFR8muD8F"/>
</div>
</div>
</div>
</div>
</section>
<!-- Categories & Filter -->
<section class="sticky top-16 z-40 bg-background-light/95 backdrop-blur-sm py-4 border-b border-gray-100">
<div class="max-w-[1200px] mx-auto px-6 overflow-x-auto no-scrollbar">
<div class="flex items-center justify-between min-w-[600px] gap-8">
<div class="flex gap-2 p-1 bg-background-subtle rounded-full border border-gray-100">
<button class="px-5 py-2 rounded-full bg-primary text-white text-sm font-bold shadow-sm transition-all">All</button>
<button class="px-5 py-2 rounded-full text-text-subtle hover:bg-gray-200/50 hover:text-text-main text-sm font-medium transition-all">Tech</button>
<button class="px-5 py-2 rounded-full text-text-subtle hover:bg-gray-200/50 hover:text-text-main text-sm font-medium transition-all">Merch</button>
<button class="px-5 py-2 rounded-full text-text-subtle hover:bg-gray-200/50 hover:text-text-main text-sm font-medium transition-all">Digital</button>
<button class="px-5 py-2 rounded-full text-text-subtle hover:bg-gray-200/50 hover:text-text-main text-sm font-medium transition-all">Cash</button>
</div>
<div class="flex items-center gap-3 ml-auto">
<span class="text-sm font-medium text-text-subtle whitespace-nowrap">Sort by:</span>
<div class="relative group">
<button class="flex items-center gap-2 pl-4 pr-3 py-2 rounded-full border border-gray-200 bg-white text-sm font-semibold hover:border-primary/30 transition-colors">
XP: Low to High
<span class="material-symbols-outlined text-[18px]">expand_more</span>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Product Grid -->
<section class="py-12 px-6 bg-white">
<div class="max-w-[1200px] mx-auto">
<div class="flex items-end justify-between mb-8">
<h3 class="text-2xl font-bold text-text-main">Trending Rewards</h3>
<a class="text-primary font-bold text-sm hover:underline flex items-center gap-1" href="#">
View all <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Product Card 1 -->
<div class="group bg-background-subtle rounded-[2rem] p-4 flex flex-col gap-4 border border-transparent hover:border-gray-100 hover:shadow-hover transition-all duration-300 relative overflow-hidden">
<div class="bg-white rounded-[1.5rem] p-6 aspect-square flex items-center justify-center relative overflow-hidden">
<div class="absolute top-3 left-3 bg-primary-light text-primary text-xs font-bold px-2.5 py-1 rounded-full z-10">Tech</div>
<img alt="Smartphone" class="w-3/4 object-contain transition-transform duration-500 group-hover:scale-110 drop-shadow-lg" data-alt="Latest smartphone back view" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBbzEhSGGf7expQGF1_oH74qBJWG5wDuMmyhVA0wLK3uSMNWcI-T7R-2iNWOroQnPf0U5IkfGqKb29vbXFBevK-sx5S0qwDfDDwBUv0Ck5aKOFx9mCOJfif_9nS3nqAzeIC7cFm0z1dFHojgWJArwRoMEvi31anLNFI_xgJejAmNUsUBVrSOHsReeX6CjaD1ZufJfk7asUp2abXD48GMZRngR-lHxip1R7vaNPD_dgW1tUI9xBF2fLmhJgumDBDMlJnR0Wj7XEC"/>
</div>
<div class="px-2 pb-2">
<h4 class="text-lg font-bold text-text-main leading-tight mb-1 group-hover:text-primary transition-colors">iPhone 15 Pro</h4>
<p class="text-sm text-text-subtle line-clamp-2 mb-4">Titanium design, A17 Pro chip, 48MP Main camera.</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1 text-text-main font-bold">
<span class="material-symbols-outlined text-primary text-[20px]">bolt</span>
<span>25,000</span>
</div>
<button class="size-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all shadow-sm">
<span class="material-symbols-outlined">add</span>
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="group bg-background-subtle rounded-[2rem] p-4 flex flex-col gap-4 border border-transparent hover:border-gray-100 hover:shadow-hover transition-all duration-300 relative overflow-hidden">
<div class="bg-white rounded-[1.5rem] p-6 aspect-square flex items-center justify-center relative overflow-hidden">
<div class="absolute top-3 left-3 bg-primary-light text-primary text-xs font-bold px-2.5 py-1 rounded-full z-10">Tech</div>
<img alt="Headphones" class="w-3/4 object-contain transition-transform duration-500 group-hover:scale-110 drop-shadow-lg" data-alt="High end noise cancelling headphones" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzGPnNV07MtWxkSAlsdHUaPZO0DzYNLJP56csHzvBBycmFheX1IL6Ff_b5QX5pBY3loLXkASrTsBBp9U7JUlBHgpoBTD0EbDqKYgG_yDbaruMXzu31MCbaY9CM3zE6dJaD4FimwjLp7O8JkJkBIFsCOszDmOvFwDt4GfMVY64z7OWeUIwDRonP2g3pwlL0guk4RFUAzSvV431_LUKgGVG_2z96fnuKRloEG3U3P0IxyVwLoQPb5lyECYNasDZvVJgNAJlNp9L7"/>
</div>
<div class="px-2 pb-2">
<h4 class="text-lg font-bold text-text-main leading-tight mb-1 group-hover:text-primary transition-colors">Sony WH-1000XM5</h4>
<p class="text-sm text-text-subtle line-clamp-2 mb-4">Industry-leading noise canceling wireless headphones.</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1 text-text-main font-bold">
<span class="material-symbols-outlined text-primary text-[20px]">bolt</span>
<span>8,500</span>
</div>
<button class="size-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all shadow-sm">
<span class="material-symbols-outlined">add</span>
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="group bg-background-subtle rounded-[2rem] p-4 flex flex-col gap-4 border border-transparent hover:border-gray-100 hover:shadow-hover transition-all duration-300 relative overflow-hidden">
<div class="bg-white rounded-[1.5rem] p-6 aspect-square flex items-center justify-center relative overflow-hidden">
<div class="absolute top-3 left-3 bg-primary-light text-primary text-xs font-bold px-2.5 py-1 rounded-full z-10">Gaming</div>
<img alt="Console" class="w-3/4 object-contain transition-transform duration-500 group-hover:scale-110 drop-shadow-lg" data-alt="Next gen gaming console controller" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCjpIxXn9OzNH8jFm9SMgdcA6hA4pjkZlLk17bSWytiHdVFPGSIvjJpZJiePr187eG_4aaMRDgD87BRIeDYbUZo2Lb8UgXOWNLZIrQkyVjVNO9im5ew0LTRy47VuOdi71nnyLkyOKLpZ_1U5_oGjK8kED2FK0u3VD380I24yfIWA3IKRimRVh6UZzhLMmBlSERQNXzeV31LwSg_drW9WkZumalBXW5lXBUYQZZlBlLEWD_7naEhEjz4EEuWxzEyUaGGF0z0eGdy"/>
</div>
<div class="px-2 pb-2">
<h4 class="text-lg font-bold text-text-main leading-tight mb-1 group-hover:text-primary transition-colors">PlayStation 5</h4>
<p class="text-sm text-text-subtle line-clamp-2 mb-4">Experience lightning-fast loading and 3D audio.</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1 text-text-main font-bold">
<span class="material-symbols-outlined text-primary text-[20px]">bolt</span>
<span>18,000</span>
</div>
<button class="size-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all shadow-sm">
<span class="material-symbols-outlined">add</span>
</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="group bg-background-subtle rounded-[2rem] p-4 flex flex-col gap-4 border border-transparent hover:border-gray-100 hover:shadow-hover transition-all duration-300 relative overflow-hidden">
<div class="bg-white rounded-[1.5rem] p-6 aspect-square flex items-center justify-center relative overflow-hidden">
<div class="absolute top-3 left-3 bg-purple-100 text-purple-600 text-xs font-bold px-2.5 py-1 rounded-full z-10">Digital</div>
<img alt="Gift Card" class="w-3/4 object-contain transition-transform duration-500 group-hover:scale-110 drop-shadow-lg" data-alt="Generic gift card with bow" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA7mwwTEXMQVHFJRDtaPyyuEHky2Z3jXpOL_lVbVjnj3jgmGXTqgSIBYufnE4dy6xoYAV514bAJUelkdlmtf7b03MMmljB7POWWOBpT4OBMb-iyvtsJU-F3Nyxro7PiCAOGzh5-lrsCjscPgvCSE__ksOQJaIMvf1FMdoE1K2Uar7wb-SzBHM8XmGJug8hml2PXoGsPz-5NR0WdWpWk8TSPHQqoyGr_DYH9IPlkWVAvY7K3_l9hn9NqxvlnLgXEzAZ0IsxoYgGs"/>
</div>
<div class="px-2 pb-2">
<h4 class="text-lg font-bold text-text-main leading-tight mb-1 group-hover:text-primary transition-colors">$50 Amazon Card</h4>
<p class="text-sm text-text-subtle line-clamp-2 mb-4">Digital code delivered instantly to your email.</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1 text-text-main font-bold">
<span class="material-symbols-outlined text-primary text-[20px]">bolt</span>
<span>5,000</span>
</div>
<button class="size-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all shadow-sm">
<span class="material-symbols-outlined">add</span>
</button>
</div>
</div>
</div>
</div>
<div class="my-12 flex items-end justify-between">
<h3 class="text-2xl font-bold text-text-main">Under 1000 XP</h3>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Product Card 5 -->
<div class="group bg-background-subtle rounded-[2rem] p-4 flex flex-col gap-4 border border-transparent hover:border-gray-100 hover:shadow-hover transition-all duration-300 relative overflow-hidden">
<div class="bg-white rounded-[1.5rem] p-6 aspect-square flex items-center justify-center relative overflow-hidden">
<div class="absolute top-3 left-3 bg-primary-light text-primary text-xs font-bold px-2.5 py-1 rounded-full z-10">Merch</div>
<img alt="T-Shirt" class="w-3/4 object-contain transition-transform duration-500 group-hover:scale-110 drop-shadow-lg" data-alt="Black t-shirt folded" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzu4-oMfB6cpAauXaAU6vffYFGTKeZrFqZfBjxO21HViOi6nu_PdwBYVE_cXwZ38UNRNYRfo5Iq4loXDPx9gmFDIp2iKtNs1r_BTIk7qMT_X9Q_wmIiFpOCgkuPBadtATk6QHACuivFNRhQA6ReuJDFjFPk75nyl4-JSlE3L2pPLGcqiqiTTY7YV4B9p5zY6ws7hipKFoabsvEh7_CmDhJZifA8GBUBfVmPff4B-PTMYY6VtgiuDaUPxsMus7ii6WDjB8oRUia"/>
</div>
<div class="px-2 pb-2">
<h4 class="text-lg font-bold text-text-main leading-tight mb-1 group-hover:text-primary transition-colors">QuizQuest Tee</h4>
<p class="text-sm text-text-subtle line-clamp-2 mb-4">100% Cotton, limited edition logo print.</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1 text-text-main font-bold">
<span class="material-symbols-outlined text-primary text-[20px]">bolt</span>
<span>800</span>
</div>
<button class="size-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all shadow-sm">
<span class="material-symbols-outlined">add</span>
</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="group bg-background-subtle rounded-[2rem] p-4 flex flex-col gap-4 border border-transparent hover:border-gray-100 hover:shadow-hover transition-all duration-300 relative overflow-hidden">
<div class="bg-white rounded-[1.5rem] p-6 aspect-square flex items-center justify-center relative overflow-hidden">
<div class="absolute top-3 left-3 bg-purple-100 text-purple-600 text-xs font-bold px-2.5 py-1 rounded-full z-10">Digital</div>
<img alt="Sticker Pack" class="w-3/4 object-contain transition-transform duration-500 group-hover:scale-110 drop-shadow-lg" data-alt="Colorful abstract sticker design" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCDuDrUf9NL2AsODf0HMB_hXzvGk0j6M_7GCXIJQVdrM0mWpbMHsGDGlPShwJX7oRtdKj1vuwrA_RcCZRWrdD1BFI8eQJs-pe76aJWdULKCeEZG-Dwqg8KzeBBGSNXHxtATEtU3q_TqUQdTSNGKwKVi3XyydTwa4bJ5WANfy-sGDdp-7-iF_ayiHLsrbrWKqh4lG1E6wGCM1Nu1tNrP0yN9fjlgfMjYrSOHMjJ6mK9r9q68HB46nuGGh9DZWhIrHk73CxFxP3xl"/>
</div>
<div class="px-2 pb-2">
<h4 class="text-lg font-bold text-text-main leading-tight mb-1 group-hover:text-primary transition-colors">Digital Sticker Pack</h4>
<p class="text-sm text-text-subtle line-clamp-2 mb-4">Use in chat and profile customization.</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1 text-text-main font-bold">
<span class="material-symbols-outlined text-primary text-[20px]">bolt</span>
<span>250</span>
</div>
<button class="size-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all shadow-sm">
<span class="material-symbols-outlined">add</span>
</button>
</div>
</div>
</div>
<!-- Product Card 7 -->
<div class="group bg-background-subtle rounded-[2rem] p-4 flex flex-col gap-4 border border-transparent hover:border-gray-100 hover:shadow-hover transition-all duration-300 relative overflow-hidden">
<div class="bg-white rounded-[1.5rem] p-6 aspect-square flex items-center justify-center relative overflow-hidden">
<div class="absolute top-3 left-3 bg-purple-100 text-purple-600 text-xs font-bold px-2.5 py-1 rounded-full z-10">Digital</div>
<img alt="Avatar Frame" class="w-3/4 object-contain transition-transform duration-500 group-hover:scale-110 drop-shadow-lg" data-alt="Abstract golden profile frame" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAev6g_Eo3SNPNICe_hm-aE4_8zSrTzSRAHIo4fzCDMmTcD39gKj2ivLuduuXolUxjA75tyKUQWB5IopD0Duwj8Tt1yWwvUqgJvR3d3IgkMOuEGnCjJ2zZXMQR9WTj0eaSHEIM0vKv-aoCroRuZz3vDrHt_fK_xo_NxyzFjdzfAsiC742F3oan8o8cL0gMMacNX19xOxh8kZT6gt08ItwXWzJOraH8VB_Tdm5rFYTb7FnsdvMjx3jKyJvMSErWrwbOUCyWKtSi5"/>
</div>
<div class="px-2 pb-2">
<h4 class="text-lg font-bold text-text-main leading-tight mb-1 group-hover:text-primary transition-colors">Gold Avatar Frame</h4>
<p class="text-sm text-text-subtle line-clamp-2 mb-4">Stand out on the leaderboard with gold.</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1 text-text-main font-bold">
<span class="material-symbols-outlined text-primary text-[20px]">bolt</span>
<span>500</span>
</div>
<button class="size-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all shadow-sm">
<span class="material-symbols-outlined">add</span>
</button>
</div>
</div>
</div>
<!-- Product Card 8 -->
<div class="group bg-background-subtle rounded-[2rem] p-4 flex flex-col gap-4 border border-transparent hover:border-gray-100 hover:shadow-hover transition-all duration-300 relative overflow-hidden">
<div class="bg-white rounded-[1.5rem] p-6 aspect-square flex items-center justify-center relative overflow-hidden">
<div class="absolute top-3 left-3 bg-primary-light text-primary text-xs font-bold px-2.5 py-1 rounded-full z-10">Merch</div>
<img alt="Mug" class="w-3/4 object-contain transition-transform duration-500 group-hover:scale-110 drop-shadow-lg" data-alt="Ceramic coffee mug" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAeoBWH_9KWqM9qVwvu4DQqdY40Kr7jlBz6GZCnHaWmG9tvuskhoe2tfqB-aqNj7lqpfGlyT9PUAPyvhpoZFCp7WleN0oNko0JPihHF-6n8oz2aUX8jgqPcIdGn31XwnESAxbrvQwudYwNZlp6pNOKeJ3rJUFH7NHxUAmfL576Frs6OCatcISsEfmmbGwcuk9HuEUqr7-6UaMxXBcoHfKO-vd0LleiwA0KEaUD5t5iUCMGvpKuhiAPGS9ZVUOWtsC_yJmZw76E7"/>
</div>
<div class="px-2 pb-2">
<h4 class="text-lg font-bold text-text-main leading-tight mb-1 group-hover:text-primary transition-colors">Gaming Mug</h4>
<p class="text-sm text-text-subtle line-clamp-2 mb-4">Fuel your quiz sessions with coffee.</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1 text-text-main font-bold">
<span class="material-symbols-outlined text-primary text-[20px]">bolt</span>
<span>450</span>
</div>
<button class="size-10 rounded-full bg-white border border-gray-200 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all shadow-sm">
<span class="material-symbols-outlined">add</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter / CTA Section -->
<section class="py-16 px-6">
<div class="max-w-[800px] mx-auto bg-gradient-to-br from-[#f8f5ff] to-white rounded-[3rem] p-10 md:p-14 text-center border border-primary/10 shadow-soft">
<span class="inline-block p-3 rounded-2xl bg-white text-primary mb-6 shadow-sm">
<span class="material-symbols-outlined text-[32px]">savings</span>
</span>
<h2 class="text-3xl md:text-4xl font-black text-text-main mb-4 tracking-tight">Need more XP?</h2>
<p class="text-text-subtle text-lg mb-8 max-w-md mx-auto">Complete daily challenges and climb the leaderboard to earn bonus XP for your next reward.</p>
<div class="flex justify-center">
<button class="h-12 px-8 rounded-full bg-primary text-white font-bold text-base shadow-lg shadow-primary/20 hover:shadow-primary/40 hover:-translate-y-1 transition-all duration-300">
Go to Quizzes
</button>
</div>
</div>
</section>
</main>
<footer class="bg-background-light border-t border-gray-100 py-10 px-6">
<div class="max-w-[1200px] mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2 text-text-main">
<div class="size-6 bg-primary rounded text-white flex items-center justify-center">
<span class="material-symbols-outlined text-[16px]">hotel_class</span>
</div>
<span class="font-bold">QuizQuest</span>
</div>
<div class="text-text-subtle text-sm">
© 2024 QuizQuest. All rights reserved.
</div>
<div class="flex gap-6">
<a class="text-text-subtle hover:text-primary transition-colors" href="#">Privacy</a>
<a class="text-text-subtle hover:text-primary transition-colors" href="#">Terms</a>
<a class="text-text-subtle hover:text-primary transition-colors" href="#">Support</a>
</div>
</div>
</footer>
<!-- Fixed Floating Action for Mobile -->
<div class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 md:hidden">
<div class="bg-text-main text-white px-5 py-3 rounded-full shadow-2xl flex items-center gap-3">
<span class="material-symbols-outlined text-primary-light">bolt</span>
<span class="font-bold">2,450 XP</span>
<div class="h-4 w-px bg-white/20"></div>
<span class="text-sm font-medium">Earn more</span>
</div>
</div>
</body></html>