<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Updates & Blog</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,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
"primary-light": "#EDE9FE", // Violet-100
"accent-yellow": "#FACC15", // Yellow-400
"background-light": "#F9FAFB", // Gray-50
"card-light": "#FFFFFF",
"text-main": "#111827", // Gray-900
"text-muted": "#6B7280", // Gray-500
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
boxShadow: {
'soft': '0 4px 20px -2px rgba(124, 58, 237, 0.08), 0 2px 10px -2px rgba(0, 0, 0, 0.02)',
'soft-hover': '0 10px 25px -5px rgba(124, 58, 237, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.05)',
}
},
},
};
</script>
<style>
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="bg-background-light text-text-main font-sans antialiased selection:bg-primary selection:text-white">
<nav class="fixed top-0 w-full z-50 backdrop-blur-md bg-white/80 border-b border-gray-100">
<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 shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-2xl">sports_esports</span>
</div>
<span class="font-display font-bold text-xl tracking-tight text-gray-900">QuizQuest</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Home</a>
<a class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Prizes</a>
<a class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Leaderboard</a>
<a class="text-primary bg-primary-light px-3 py-2 rounded-md text-sm font-medium" href="#">Blog</a>
</div>
</div>
<div class="hidden md:flex items-center gap-4">
<a class="text-sm font-medium text-gray-600 hover:text-primary transition-colors" href="#">Login</a>
<a class="bg-primary hover:bg-primary-hover text-white px-6 py-2.5 rounded-full text-sm font-semibold transition-all transform hover:scale-105 shadow-lg shadow-primary/30" href="#">
Join Now
</a>
</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-gray-600 hover:bg-gray-100 focus:outline-none" type="button">
<span class="material-symbols-outlined">menu</span>
</button>
</div>
</div>
</div>
</nav>
<section class="pt-32 pb-12 bg-white relative overflow-hidden">
<div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-purple-100 rounded-full blur-3xl opacity-50"></div>
<div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 bg-blue-50 rounded-full blur-3xl opacity-50"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center max-w-3xl mx-auto mb-12">
<span class="inline-block py-1 px-3 rounded-full bg-primary-light text-primary text-xs font-bold tracking-wider uppercase mb-4">QuizQuest Blog</span>
<h1 class="font-display text-4xl sm:text-5xl font-bold text-gray-900 mb-6">
Updates from the <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-500">Quest Arena</span>
</h1>
<p class="text-lg text-text-muted leading-relaxed">
Stay updated with the latest winning strategies, platform updates, and success stories from our top players.
</p>
</div>
<div class="flex flex-wrap justify-center gap-2 mb-8">
<button class="px-5 py-2 rounded-full bg-gray-900 text-white text-sm font-medium hover:bg-gray-800 transition-colors">All Posts</button>
<button class="px-5 py-2 rounded-full bg-white border border-gray-200 text-gray-600 text-sm font-medium hover:border-primary hover:text-primary transition-colors shadow-sm">Tips & Strategy</button>
<button class="px-5 py-2 rounded-full bg-white border border-gray-200 text-gray-600 text-sm font-medium hover:border-primary hover:text-primary transition-colors shadow-sm">Platform Updates</button>
<button class="px-5 py-2 rounded-full bg-white border border-gray-200 text-gray-600 text-sm font-medium hover:border-primary hover:text-primary transition-colors shadow-sm">Winners Circle</button>
<button class="px-5 py-2 rounded-full bg-white border border-gray-200 text-gray-600 text-sm font-medium hover:border-primary hover:text-primary transition-colors shadow-sm">News</button>
</div>
</div>
</section>
<section class="pb-16 bg-background-light">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="relative rounded-3xl overflow-hidden bg-white shadow-soft hover:shadow-soft-hover transition-shadow duration-300 group">
<div class="grid lg:grid-cols-2 gap-0">
<div class="relative h-64 lg:h-auto overflow-hidden">
<div class="absolute inset-0 bg-primary/10 group-hover:bg-transparent transition-colors z-10"></div>
<img alt="Featured Post" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBKHwtMRmKm0tH2feW7JfqXhSj6MO0iFhK76W2GHXiaKff386lWSEz22WdQExldHTCS1SBbJw_d17fNyjsXdcWdVv6LkbLOTB713JWdadiOmZXcyPDxWlI_JCuLje3aAZXp2yS8UPji7AYnkPjoleK1i-vRz2UvdvUPc9S1ZOM1RysaMLvw12I1vqXHfU6UPGPWwUy40uQKAc0xrHdbpdWtmdJ-kVKA7y5tRZGzbkOaYwNBPoeAHmpff-XlYaqbvYhBRtcK1qlCcto"/>
</div>
<div class="p-8 lg:p-12 flex flex-col justify-center">
<div class="flex items-center gap-3 mb-4">
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-bold uppercase tracking-wide">Featured</span>
<span class="px-3 py-1 bg-purple-50 text-primary rounded-full text-xs font-bold uppercase tracking-wide">Tips</span>
<span class="text-sm text-gray-400">• 5 min read</span>
</div>
<h2 class="font-display text-3xl font-bold text-gray-900 mb-4 group-hover:text-primary transition-colors">
The Strategy of Winning: Pro Tips for Lightning Rounds
</h2>
<p class="text-gray-600 mb-6 leading-relaxed">
Master the art of quick decision making. Our top 10 leaderboard champions share their secrets on how to handle pressure during the intense final seconds of the Lightning Round.
</p>
<div class="flex items-center justify-between mt-auto">
<div class="flex items-center gap-3">
<img alt="Author" class="w-10 h-10 rounded-full border-2 border-white shadow-sm" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC3AZiBWLUh0ltH7LVwHzkpf3q8dvZc_ZXQQ9yljjmmd0OMZeLHbNf6uQ4F75veDfnytxt8fEXitOzELCZu3DqN6nVcycMImKk93aftEBMIKXoUoBLjoYZmj3zIQT-xCypeMHDSCnqJV6UEfIlQF24CAsz1frGlujEvYeFV8-4WcORfCGZc2ipqDzmfKI2FoqE_DEr9eUt30VECHbvb4pHIuCJzdNTiFbZmnjcizNyYW6Gd8eJ5TyUVsu0CR8RPQm4kSbbDXnyg-Rk"/>
<div>
<p class="text-sm font-bold text-gray-900">Alex Chen</p>
<p class="text-xs text-gray-500">Lead Game Designer</p>
</div>
</div>
<a class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-gray-50 text-gray-900 group-hover:bg-primary group-hover:text-white transition-all" href="#">
<span class="material-symbols-outlined text-lg">arrow_forward</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-12 bg-background-light">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h3 class="font-display text-2xl font-bold text-gray-900 mb-8 border-l-4 border-primary pl-4">Latest Articles</h3>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<article class="bg-white rounded-2xl overflow-hidden shadow-soft hover:shadow-soft-hover transition-all duration-300 flex flex-col h-full group">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-4 left-4 z-10">
<span class="px-3 py-1 bg-white/90 backdrop-blur-sm text-gray-900 rounded-full text-xs font-bold uppercase shadow-sm">News</span>
</div>
<img alt="Marketplace" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAf20jLDV_vtXbQsI76Pk9Iq7i5BS3ndYY77BDkaB2otk2B_Wm3vSzn7bZBsZCzmBvFbP0camQwXYQFh2g7B7bsiX2L4je0-D-wyW9pLEgxcXdruS7mqEECXs5XdXrZoXn0aDk0R6z9QDSyU8dFcnVEBH9vyx5dR_eOUVoOxmnnFnxmTomAU5bvwcCvKlEIHzV5pGn3kB4SRvZSGfqNvsyZVCqpeVb5qwxVxNQ8YLFxNYH7-ZrQKZ9FoIwhKPAH60iUUUHKJ-kFrs0"/>
</div>
<div class="p-6 flex-1 flex flex-col">
<div class="flex items-center gap-2 text-xs text-gray-500 mb-3">
<span class="material-symbols-outlined text-sm">calendar_today</span>
<span>Oct 24, 2023</span>
</div>
<h3 class="font-display text-xl font-bold text-gray-900 mb-3 group-hover:text-primary transition-colors">
New Prizes in Marketplace
</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-4 flex-1">
We've refreshed the rewards store! Check out the new gadgets, gift cards, and exclusive avatars available for redemption.
</p>
<a class="inline-flex items-center text-primary font-semibold text-sm hover:underline" href="#">
Read More <span class="material-symbols-outlined text-sm ml-1">arrow_right_alt</span>
</a>
</div>
</article>
<article class="bg-white rounded-2xl overflow-hidden shadow-soft hover:shadow-soft-hover transition-all duration-300 flex flex-col h-full group">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-4 left-4 z-10">
<span class="px-3 py-1 bg-white/90 backdrop-blur-sm text-gray-900 rounded-full text-xs font-bold uppercase shadow-sm">Winners</span>
</div>
<img alt="Success Stories" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzXmr5XgXH0KtSN8_5LctQAfWNIsE0lyGhFWhLGulOfUqSY4MNGElgPUjrpjnb4GV0jquWNF16I3gyQcF-5_U9veV0JebIfo5NMVD0RbbTvb9yWlr27yqLu1K3CENyB_naf4n0SLXtx8QEQDpRiBar43WAzXldptlVYrL6IsoWsLUyfEV_g1PNzbUNQ7jceYZsEd4OV-V_Vz2ieup0xmPELkJFAas7-RcUBA3F7DkqK4au3CPmabDSI1eWj33jd62s2TYoj40PeIc"/>
</div>
<div class="p-6 flex-1 flex flex-col">
<div class="flex items-center gap-2 text-xs text-gray-500 mb-3">
<span class="material-symbols-outlined text-sm">calendar_today</span>
<span>Oct 22, 2023</span>
</div>
<h3 class="font-display text-xl font-bold text-gray-900 mb-3 group-hover:text-primary transition-colors">
Affiliate Success Stories
</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-4 flex-1">
Meet Sarah, who turned her QuizQuest referral code into a steady side income while building a community of trivia lovers.
</p>
<a class="inline-flex items-center text-primary font-semibold text-sm hover:underline" href="#">
Read More <span class="material-symbols-outlined text-sm ml-1">arrow_right_alt</span>
</a>
</div>
</article>
<article class="bg-white rounded-2xl overflow-hidden shadow-soft hover:shadow-soft-hover transition-all duration-300 flex flex-col h-full group">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-4 left-4 z-10">
<span class="px-3 py-1 bg-white/90 backdrop-blur-sm text-gray-900 rounded-full text-xs font-bold uppercase shadow-sm">Updates</span>
</div>
<img alt="Platform Updates" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDCqHJWLaQXdABfhOmONUECl9DQY84u7P0tjx5HWxlSwP1R4U1Jxd0SHustz9Gm2SShOoMtEyI_Skky1sqq2azu0TxD9Lf2_Vn26Y4rEmYJwVnRhOGEWFTqxGDlDyV__M3XgJs3jDpUXXC-v46S_CNTL-SuqE-EmmUGes6jDDHXxcs73CWPr4bcAhYkHlaxmsvx9vvf1akk4_H752YtjI5ef2J7o54dkfNIO_Gg42pMiT8kGPmmkoOZjMVw9azKoiduvN9pLNeWg20"/>
</div>
<div class="p-6 flex-1 flex flex-col">
<div class="flex items-center gap-2 text-xs text-gray-500 mb-3">
<span class="material-symbols-outlined text-sm">calendar_today</span>
<span>Oct 20, 2023</span>
</div>
<h3 class="font-display text-xl font-bold text-gray-900 mb-3 group-hover:text-primary transition-colors">
Platform Updates v2.4
</h3>
<p class="text-gray-600 text-sm leading-relaxed mb-4 flex-1">
Faster load times, new anti-cheat measures, and a sleek dark mode toggle for night owls. See what's new under the hood.
</p>
<a class="inline-flex items-center text-primary font-semibold text-sm hover:underline" href="#">
Read More <span class="material-symbols-outlined text-sm ml-1">arrow_right_alt</span>
</a>
</div>
</article>
</div>
</div>
</section>
<section class="py-20 bg-background-light">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-gradient-to-br from-primary to-purple-800 rounded-[2.5rem] p-8 md:p-12 text-center text-white shadow-2xl relative overflow-hidden">
<div class="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 bg-white opacity-10 rounded-full blur-2xl"></div>
<div class="absolute bottom-0 left-0 -ml-16 -mb-16 w-48 h-48 bg-yellow-400 opacity-20 rounded-full blur-2xl"></div>
<div class="relative z-10">
<div class="inline-flex items-center justify-center w-16 h-16 bg-white/10 rounded-2xl mb-6 backdrop-blur-sm border border-white/20">
<span class="material-symbols-outlined text-3xl">mail</span>
</div>
<h2 class="font-display text-3xl sm:text-4xl font-bold mb-4">Stay Ahead of the Quest</h2>
<p class="text-purple-100 mb-8 max-w-lg mx-auto">
Get exclusive tips, early access to special tournaments, and weekly prize updates directly to your inbox.
</p>
<form class="max-w-md mx-auto flex flex-col sm:flex-row gap-3">
<input class="flex-1 px-5 py-3.5 rounded-full text-gray-900 focus:ring-2 focus:ring-accent-yellow focus:border-transparent outline-none border-0 shadow-lg" placeholder="Enter your email address" required="" type="email"/>
<button class="px-8 py-3.5 bg-accent-yellow text-gray-900 font-bold rounded-full hover:bg-yellow-300 transition-colors shadow-lg flex items-center justify-center gap-2" type="submit">
Subscribe
</button>
</form>
<p class="mt-4 text-xs text-purple-200">No spam, just winnings. Unsubscribe anytime.</p>
</div>
</div>
</div>
</section>
<footer class="bg-white border-t border-gray-100 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div class="col-span-1 md:col-span-1">
<div class="flex items-center gap-2 cursor-pointer mb-4">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white">
<span class="material-symbols-outlined text-lg">sports_esports</span>
</div>
<span class="font-display font-bold text-lg tracking-tight text-gray-900">QuizQuest</span>
</div>
<p class="text-sm text-gray-500">
The ultimate gamified quiz platform where knowledge meets rewards.
</p>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-4">Platform</h4>
<ul class="space-y-2 text-sm text-gray-500">
<li><a class="hover:text-primary transition-colors" href="#">Play Now</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Tournaments</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Winners</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-4">Company</h4>
<ul class="space-y-2 text-sm text-gray-500">
<li><a class="hover:text-primary transition-colors" href="#">About Us</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Careers</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Contact</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-4">Legal</h4>
<ul class="space-y-2 text-sm text-gray-500">
<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-gray-100 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="text-sm text-gray-400">
© 2023 QuizQuest Inc. All rights reserved.
</div>
<div class="flex gap-4">
<a class="text-gray-400 hover:text-primary transition-colors" href="#"><i class="material-symbols-outlined">public</i></a>
<a class="text-gray-400 hover:text-primary transition-colors" href="#"><i class="material-symbols-outlined">rss_feed</i></a>
</div>
</div>
</div>
</footer>
</body></html>