<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Redemption Guide - QuizMaster</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&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": "#9439ef",
"primary-light": "#b97bf5",
"secondary": "#2dd4bf", // Teal for accents
"background-light": "#f8f9fc",
"background-dark": "#191022",
},
fontFamily: {
"display": ["Plus Jakarta Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "0.5rem", "lg": "1rem", "xl": "1.5rem", "2xl": "2rem", "full": "9999px"},
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.icon-filled {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 antialiased overflow-x-hidden">
<div class="relative flex min-h-screen w-full flex-col group/design-root">
<!-- Navigation -->
<div class="layout-container flex h-full grow flex-col">
<div class="flex flex-1 justify-center">
<div class="layout-content-container flex flex-col w-full max-w-[1280px] flex-1">
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-slate-800 px-6 lg:px-10 py-4 bg-white dark:bg-[#191022] sticky top-0 z-50">
<div class="flex items-center gap-4 text-slate-900 dark:text-white">
<div class="size-8 text-primary">
<span class="material-symbols-outlined text-4xl">hexagon</span>
</div>
<h2 class="text-slate-900 dark:text-white text-xl font-bold leading-tight tracking-[-0.015em]">QuizMaster</h2>
</div>
<div class="hidden md:flex flex-1 justify-end gap-8">
<div class="flex items-center gap-9">
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary transition-colors text-sm font-semibold leading-normal" href="#">Home</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary transition-colors text-sm font-semibold leading-normal" href="#">Quizzes</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary transition-colors text-sm font-semibold leading-normal" href="#">Leaderboard</a>
<a class="text-primary font-bold text-sm leading-normal" href="#">Rewards Store</a>
</div>
<div class="flex gap-3">
<button class="flex cursor-pointer items-center justify-center overflow-hidden rounded-xl h-10 px-5 bg-primary hover:bg-primary-light transition-colors text-white text-sm font-bold leading-normal tracking-[0.015em]">
<span class="truncate">Sign In</span>
</button>
<button class="flex cursor-pointer items-center justify-center overflow-hidden rounded-xl h-10 px-5 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors text-slate-900 dark:text-white text-sm font-bold leading-normal tracking-[0.015em]">
<span class="truncate">Join Now</span>
</button>
</div>
</div>
<div class="md:hidden text-slate-900 dark:text-white">
<span class="material-symbols-outlined">menu</span>
</div>
</header>
<main class="flex flex-col">
<!-- Hero Section -->
<div class="@container p-4 lg:p-8">
<div class="relative flex min-h-[480px] flex-col gap-6 overflow-hidden rounded-2xl items-center justify-center p-8 text-center bg-slate-900">
<!-- Background Image with Overlay -->
<div class="absolute inset-0 z-0">
<img alt="Abstract purple liquid gradient background" class="w-full h-full object-cover opacity-60" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBCgtKBzNJzxvUR366E0JMo7ZPZsRPh_rG-8oRCUOSwtzLmW0RjgVPmIDNmwpz21DN2wkOm04SA6RrzahOr35qd0FhCgIwT5PUyJqqkRhzpOp4lM74sX7CGLgFDjCXsaObDpa2iFtJKw6MPy-pW6pvMLpK4qL9nif1B_PGE2QskQ-niCfhuA6XoOzvn4Bwb1Q9e53hidj1wsbamrHYrb0GEQ0ZGF_MYkYtEINvuwxbQy45kKj1ftOFN_YqA8H343wmdgNtzhgFl3rQ"/>
<div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/40 to-transparent"></div>
</div>
<div class="relative z-10 flex flex-col gap-4 max-w-3xl items-center">
<div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-1.5 backdrop-blur-md border border-white/10">
<span class="material-symbols-outlined text-secondary text-lg icon-filled">verified</span>
<span class="text-sm font-medium text-white">Official Redemption Guide</span>
</div>
<h1 class="text-white text-4xl md:text-6xl font-black leading-[1.1] tracking-tight">
Turn Points Into <br/>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-secondary to-primary-light">Real Rewards</span>
</h1>
<p class="text-slate-200 text-lg md:text-xl font-medium max-w-xl leading-relaxed">
Follow our simple 4-step process to claim the latest tech, gift cards, and exclusive merchandise directly to your door.
</p>
<div class="flex flex-wrap gap-3 mt-4 justify-center">
<button class="flex h-12 items-center justify-center rounded-xl bg-white px-8 text-primary text-base font-bold transition-transform hover:scale-105">
Go to Rewards Store
</button>
<button class="flex h-12 items-center justify-center rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 px-8 text-white text-base font-bold hover:bg-white/20 transition-colors">
View Catalog
</button>
</div>
</div>
</div>
</div>
<!-- Step by Step Process -->
<div class="flex flex-col gap-10 px-6 py-12 lg:px-20 max-w-[1280px] mx-auto w-full">
<div class="flex flex-col gap-3 text-center mb-4">
<h2 class="text-slate-900 dark:text-white text-3xl md:text-4xl font-bold tracking-tight">The Redemption Process</h2>
<p class="text-slate-500 dark:text-slate-400 text-lg font-medium">From winning to unboxing in four simple steps.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Step 1 -->
<div class="group flex flex-col gap-5 rounded-2xl bg-white dark:bg-slate-800 p-6 shadow-sm border border-slate-100 dark:border-slate-700 hover:border-primary/30 transition-all hover:shadow-lg hover:-translate-y-1">
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary group-hover:bg-primary group-hover:text-white transition-colors">
<span class="material-symbols-outlined text-3xl">star</span>
</div>
<div class="flex flex-col gap-2">
<span class="text-xs font-bold uppercase tracking-wider text-slate-400">Step 01</span>
<h3 class="text-slate-900 dark:text-white text-xl font-bold">Earn Points</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">Complete daily quizzes and challenges to stack up points on the leaderboard.</p>
</div>
</div>
<!-- Step 2 -->
<div class="group flex flex-col gap-5 rounded-2xl bg-white dark:bg-slate-800 p-6 shadow-sm border border-slate-100 dark:border-slate-700 hover:border-primary/30 transition-all hover:shadow-lg hover:-translate-y-1">
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-secondary/10 text-secondary group-hover:bg-secondary group-hover:text-white transition-colors">
<span class="material-symbols-outlined text-3xl">shopping_bag</span>
</div>
<div class="flex flex-col gap-2">
<span class="text-xs font-bold uppercase tracking-wider text-slate-400">Step 02</span>
<h3 class="text-slate-900 dark:text-white text-xl font-bold">Select Prize</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">Browse our extensive catalog of tech gadgets, gift cards, and cool merch.</p>
</div>
</div>
<!-- Step 3 -->
<div class="group flex flex-col gap-5 rounded-2xl bg-white dark:bg-slate-800 p-6 shadow-sm border border-slate-100 dark:border-slate-700 hover:border-primary/30 transition-all hover:shadow-lg hover:-translate-y-1">
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-300 group-hover:bg-purple-600 group-hover:text-white transition-colors">
<span class="material-symbols-outlined text-3xl">pin_drop</span>
</div>
<div class="flex flex-col gap-2">
<span class="text-xs font-bold uppercase tracking-wider text-slate-400">Step 03</span>
<h3 class="text-slate-900 dark:text-white text-xl font-bold">Submit Address</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">Enter your shipping details securely. We ship globally to over 100 countries.</p>
</div>
</div>
<!-- Step 4 -->
<div class="group flex flex-col gap-5 rounded-2xl bg-white dark:bg-slate-800 p-6 shadow-sm border border-slate-100 dark:border-slate-700 hover:border-primary/30 transition-all hover:shadow-lg hover:-translate-y-1">
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-300 group-hover:bg-blue-600 group-hover:text-white transition-colors">
<span class="material-symbols-outlined text-3xl">local_shipping</span>
</div>
<div class="flex flex-col gap-2">
<span class="text-xs font-bold uppercase tracking-wider text-slate-400">Step 04</span>
<h3 class="text-slate-900 dark:text-white text-xl font-bold">Track Delivery</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">Watch your prize travel from our warehouse directly to your doorstep.</p>
</div>
</div>
</div>
</div>
<!-- Timeline & Policy Section -->
<div class="w-full bg-white dark:bg-[#1e1429] py-16">
<div class="max-w-[1280px] mx-auto px-6 lg:px-20 grid grid-cols-1 lg:grid-cols-2 gap-16">
<!-- Timeline Infographic -->
<div class="flex flex-col gap-6">
<div class="flex flex-col gap-2">
<h2 class="text-slate-900 dark:text-white text-2xl font-bold">Shipping Timeline</h2>
<p class="text-slate-500 dark:text-slate-400 text-sm">Typical processing times for physical rewards.</p>
</div>
<div class="relative pl-4 border-l-2 border-slate-200 dark:border-slate-700 space-y-10 my-4">
<!-- Item 1 -->
<div class="relative">
<div class="absolute -left-[25px] top-1 flex h-6 w-6 items-center justify-center rounded-full bg-primary ring-4 ring-white dark:ring-[#1e1429]">
<span class="material-symbols-outlined text-white text-[14px]">check</span>
</div>
<div class="flex flex-col gap-1">
<h4 class="text-slate-900 dark:text-white font-bold text-lg">Request Received</h4>
<p class="text-slate-500 dark:text-slate-400 text-sm">Instant confirmation via email.</p>
</div>
</div>
<!-- Item 2 -->
<div class="relative">
<div class="absolute -left-[25px] top-1 flex h-6 w-6 items-center justify-center rounded-full bg-slate-200 dark:bg-slate-700 ring-4 ring-white dark:ring-[#1e1429]">
<span class="text-[10px] font-bold text-slate-600 dark:text-slate-300">2</span>
</div>
<div class="flex flex-col gap-1">
<h4 class="text-slate-900 dark:text-white font-bold text-lg">Processing & Packaging</h4>
<p class="text-slate-500 dark:text-slate-400 text-sm">1-2 Business Days. Quality check performed.</p>
</div>
</div>
<!-- Item 3 -->
<div class="relative">
<div class="absolute -left-[25px] top-1 flex h-6 w-6 items-center justify-center rounded-full bg-slate-200 dark:bg-slate-700 ring-4 ring-white dark:ring-[#1e1429]">
<span class="text-[10px] font-bold text-slate-600 dark:text-slate-300">3</span>
</div>
<div class="flex flex-col gap-1">
<h4 class="text-slate-900 dark:text-white font-bold text-lg">Dispatched</h4>
<p class="text-slate-500 dark:text-slate-400 text-sm">Tracking number generated and sent to you.</p>
</div>
</div>
<!-- Item 4 -->
<div class="relative">
<div class="absolute -left-[25px] top-1 flex h-6 w-6 items-center justify-center rounded-full bg-slate-200 dark:bg-slate-700 ring-4 ring-white dark:ring-[#1e1429]">
<span class="material-symbols-outlined text-slate-500 text-[14px]">home</span>
</div>
<div class="flex flex-col gap-1">
<h4 class="text-slate-900 dark:text-white font-bold text-lg">Delivery</h4>
<p class="text-slate-500 dark:text-slate-400 text-sm">3-5 Business Days depending on location.</p>
</div>
</div>
</div>
</div>
<!-- Policy Box -->
<div class="flex flex-col gap-6">
<div class="flex flex-col gap-2">
<h2 class="text-slate-900 dark:text-white text-2xl font-bold">Redemption Policy</h2>
<p class="text-slate-500 dark:text-slate-400 text-sm">Important rules to keep in mind.</p>
</div>
<div class="h-full rounded-2xl bg-gradient-to-br from-purple-50 to-white dark:from-[#2a1d3a] dark:to-[#1e1429] p-8 border border-purple-100 dark:border-purple-900/50 flex flex-col justify-between">
<ul class="flex flex-col gap-6">
<li class="flex gap-4 items-start">
<div class="mt-1 flex-shrink-0">
<span class="material-symbols-outlined text-primary">verified_user</span>
</div>
<div>
<h5 class="font-bold text-slate-900 dark:text-white">Account Verification</h5>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Users must have a verified email address and be at least 18 years old to claim physical rewards.</p>
</div>
</li>
<li class="flex gap-4 items-start">
<div class="mt-1 flex-shrink-0">
<span class="material-symbols-outlined text-primary">inventory_2</span>
</div>
<div>
<h5 class="font-bold text-slate-900 dark:text-white">Shipping Limitations</h5>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">We currently do not ship to P.O. boxes. Ensure your street address is accurate.</p>
</div>
</li>
<li class="flex gap-4 items-start">
<div class="mt-1 flex-shrink-0">
<span class="material-symbols-outlined text-primary">bolt</span>
</div>
<div>
<h5 class="font-bold text-slate-900 dark:text-white">Digital Rewards</h5>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Gift cards and software keys are delivered instantly to your registered email.</p>
</div>
</li>
</ul>
<div class="mt-8 pt-6 border-t border-purple-100 dark:border-purple-900/50">
<a class="flex items-center gap-2 text-primary font-bold hover:text-primary-light transition-colors" href="#">
<span>Read Full Terms & Conditions</span>
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Recent Deliveries Gallery -->
<div class="flex flex-col gap-8 px-6 py-16 lg:px-20 max-w-[1280px] mx-auto w-full">
<div class="flex items-end justify-between">
<div>
<h2 class="text-slate-900 dark:text-white text-3xl font-bold tracking-tight">Recent Deliveries</h2>
<p class="text-slate-500 dark:text-slate-400 mt-2 text-lg">Real prizes reaching real players this week.</p>
</div>
<a class="hidden md:flex items-center gap-1 text-slate-600 dark:text-slate-300 font-semibold hover:text-primary transition-colors" href="#">
View Leaderboard <span class="material-symbols-outlined text-lg">chevron_right</span>
</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<!-- Gallery Item 1 -->
<div class="group relative aspect-square overflow-hidden rounded-2xl cursor-pointer">
<img alt="Playstation 5 console box on a table" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBtjuyV1C3pz6AW7nOZt0QI2sKdycGIf6alMUecOBhN_lgsJGNZywudTheJJcfn7YsptD0AtrfMJXywjrkOkz4b0-Bi6y0Q4nAXD5nvusItl7XSCH7N5XBH1BXFs6JRI0ZwxwuM80tZ4Dc5GU67uLBCNKy-opU4Ncy0I72rfOFFVQv5CLQi_UfQysQUWXAN2TfVcGNpc2q73lskuMWpKWnpFcQsPLR5AG5ssTP0z55HZotTUhQXuvSZ-LUvxogBhhFeJtYdgFc_UUE"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-90"></div>
<div class="absolute bottom-0 left-0 p-4 w-full">
<div class="flex items-center gap-2 mb-1">
<div class="h-6 w-6 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-[10px] text-white font-bold">GT</div>
<span class="text-xs font-medium text-white/90">@Gamertag123</span>
</div>
<p class="text-white font-bold text-lg leading-tight">PS5 Console</p>
<span class="text-xs text-secondary font-medium flex items-center gap-1 mt-1">
<span class="material-symbols-outlined text-[12px] icon-filled">verified</span> Verified
</span>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="group relative aspect-square overflow-hidden rounded-2xl cursor-pointer">
<img alt="Hand holding a smartphone displaying gift card code" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDSCM1N0WIAC7VIKIom3ggl552tqxdRaJIhYxL-4mTLS8fTXl5IjuopBQudlcyiD8r0PkLb-VU9O3jijaffHYmOw_8lvEaxbE5JAVCZdzda7dmCXKrTIenH9bt1raMxQn8uXQTGLX5ZXl0uN8kYiZ9JyLX_Qr0fQuORABG1GIkk8_WuMivS7h_NQNQO-oGhYNlyDnMM-PYBhbwETrjwaC3Pg3Z4Y_MK4_qSA-skC7UO5y7zfVPy5wdycVigHW6PShIhPRYb66DRslo"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-90"></div>
<div class="absolute bottom-0 left-0 p-4 w-full">
<div class="flex items-center gap-2 mb-1">
<div class="h-6 w-6 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-[10px] text-white font-bold">QW</div>
<span class="text-xs font-medium text-white/90">@QuizWiz</span>
</div>
<p class="text-white font-bold text-lg leading-tight">$100 Amazon Card</p>
<span class="text-xs text-secondary font-medium flex items-center gap-1 mt-1">
<span class="material-symbols-outlined text-[12px] icon-filled">verified</span> Verified
</span>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="group relative aspect-square overflow-hidden rounded-2xl cursor-pointer">
<img alt="White smart watch on a wrist" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD_O2D2ZYiq48UGoYlnTysEAhh9nGzPVlst4cNi96rCuuDBzCXeRdAfH3pYPhIm3FNDltHzcSoEWOlQALUK09ItPFvnCZ0EAJYyqPsNMq5u5ypHcklAwcjOqYZsPlM9aSFpQPNnlFbAIYeewy1kgl4K2iwWBJG6J8OKw6yWqpG_Z-LcEbhcZoYv_KpBJOGZSVZMGD2D769jr2ZWSgDOEqq8VSAAn6b6R8MfhMhAZww7PnnHCwx5JxZpboyG1sfxojV_jBaF4YBxIwk"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-90"></div>
<div class="absolute bottom-0 left-0 p-4 w-full">
<div class="flex items-center gap-2 mb-1">
<div class="h-6 w-6 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-[10px] text-white font-bold">W8</div>
<span class="text-xs font-medium text-white/90">@Winner88</span>
</div>
<p class="text-white font-bold text-lg leading-tight">Series 7 Watch</p>
<span class="text-xs text-secondary font-medium flex items-center gap-1 mt-1">
<span class="material-symbols-outlined text-[12px] icon-filled">verified</span> Verified
</span>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="group relative aspect-square overflow-hidden rounded-2xl cursor-pointer">
<img alt="Black over-ear headphones on yellow background" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDMgc9tVJTEzINoDc6ikX-eNbTGsQCynAn1WygATlLGXd4XAfWe3qF81cSsiabokuUa5Ajs7U_FdQSVyumiOTHEaRoU2JV5wQfhea0u5nWosmq5_T1B0wYu8NwNgp44eV5o4lKY4q6DkWZXEn6sWhwWMPAvI-VUfV8XIipNaijpXd6n-iuGk5WRuN_V8m3DJhVklLC9DhAlYe-QsQTqj3n_nx_4j2V5UCCvmNl-5VOL1kq9y5EDHZK2v_Gpi1xCMze-BQ-wEqupajw"/>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-90"></div>
<div class="absolute bottom-0 left-0 p-4 w-full">
<div class="flex items-center gap-2 mb-1">
<div class="h-6 w-6 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-[10px] text-white font-bold">TK</div>
<span class="text-xs font-medium text-white/90">@TriviaKing</span>
</div>
<p class="text-white font-bold text-lg leading-tight">Pro Noise Cancel</p>
<span class="text-xs text-secondary font-medium flex items-center gap-1 mt-1">
<span class="material-symbols-outlined text-[12px] icon-filled">verified</span> Verified
</span>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-white dark:bg-[#191022] border-t border-slate-200 dark:border-slate-800 py-12 px-6 lg:px-20 mt-10">
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-3xl text-primary">hexagon</span>
<span class="text-xl font-bold text-slate-900 dark:text-white">QuizMaster</span>
</div>
<div class="flex gap-8 text-sm font-medium text-slate-500 dark:text-slate-400">
<a class="hover:text-primary transition-colors" href="#">Privacy Policy</a>
<a class="hover:text-primary transition-colors" href="#">Terms of Service</a>
<a class="hover:text-primary transition-colors" href="#">Support</a>
</div>
<div class="text-sm text-slate-400">
© 2023 QuizMaster Inc.
</div>
</div>
</footer>
</div>
</div>
</div>
</div>
</body></html>