<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>How It Works - QuizQuest Guide</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7c3aed", // Violet-600
"primary-hover": "#6d28d9", // Violet-700
"accent-yellow": "#fbbf24", // Amber-400
"background-light": "#f3f4f6", // Gray-100
"background-dark": "#0B0A14", // Deep dark purple/black
"card-dark": "#161522",
"card-light": "#ffffff",
},
fontFamily: {
display: ["Inter", "sans-serif"],
body: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.5rem",
'xl': '1rem',
'2xl': '1.5rem',
'3xl': '2rem',
},
backgroundImage: {
'purple-gradient': 'linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%)',
'dark-gradient': 'linear-gradient(180deg, #1e1b4b 0%, #0B0A14 100%)',
}
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}
.text-glow {
text-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-gray-100 transition-colors duration-300">
<nav class="fixed w-full z-50 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur-md 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 items-center gap-3">
<div class="bg-primary rounded-full p-1.5">
<span class="material-icons text-white text-2xl">sports_esports</span>
</div>
<span class="text-xl font-bold tracking-tight dark:text-white">QuizQuest</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors" href="#">Home</a>
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors" href="#">Prizes</a>
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors" href="#">Leaderboard</a>
<a class="text-primary dark:text-white px-3 py-2 rounded-md text-sm font-bold border-b-2 border-primary" href="#">How It Works</a>
</div>
</div>
<div class="flex items-center gap-4">
<a class="hidden md:block text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white text-sm font-medium" href="#">Login</a>
<a class="bg-primary hover:bg-primary-hover text-white px-6 py-2.5 rounded-full text-sm font-bold shadow-lg shadow-primary/30 transition-all transform hover:scale-105" href="#">Join Now</a>
</div>
</div>
</div>
</nav>
<section class="relative pt-32 pb-20 lg:pt-40 lg:pb-28 overflow-hidden">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full overflow-hidden pointer-events-none z-0">
<div class="absolute top-[-10%] left-[-10%] w-[500px] h-[500px] bg-primary/20 dark:bg-primary/10 rounded-full blur-[100px]"></div>
<div class="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] bg-indigo-600/20 dark:bg-indigo-600/10 rounded-full blur-[120px]"></div>
</div>
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-wide mb-6">
<span class="w-2 h-2 rounded-full bg-accent-yellow animate-pulse"></span>
Guide
</div>
<h1 class="text-4xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6">
Master the <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-indigo-400 text-glow">Quest</span>
</h1>
<p class="mt-4 max-w-2xl mx-auto text-lg md:text-xl text-gray-600 dark:text-gray-400">
Dive into the QuizQuest ecosystem. Learn how to register, play, earn rewards, and climb the ranks of the elite.
</p>
</div>
</section>
<section class="py-16 md:py-24 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-24">
<div class="lg:w-1/2 relative order-2 lg:order-1">
<div class="absolute -inset-4 bg-gradient-to-r from-primary to-indigo-600 rounded-2xl opacity-30 blur-lg dark:opacity-40"></div>
<div class="relative rounded-2xl overflow-hidden shadow-2xl border border-gray-200 dark:border-white/10 bg-card-light dark:bg-card-dark">
<img alt="3D avatar creation interface showing customizable characters" class="w-full h-auto object-cover opacity-90 hover:opacity-100 transition-opacity" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAq1XPDVjIvrtv5BIj0C4W6CXjpDkwQqYBSMplrGJz_jfSpuLmGLALIra7FumCwNxZr2YTig5SwJ-_FCzcG6XuFlgsc-WJrusXE8623gcGT_yR1dxqiIIhLa_rhNp2pnf_X6rNiJf10WMzhM9A4iQDsX7gRsTXTQf4yZ4NSp2UuJ2jchHDH0M7eygjBFt53TTI2hyBguDbVGDV1IV-8t3X7iiBrPlgAgDhx2Lt2Hch0O7BRMKYCgAVtO4sJ0LowDxdmchR21dHQ9zM"/>
<div class="absolute bottom-4 left-4 right-4 p-4 bg-black/60 backdrop-blur-md rounded-xl border border-white/10">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
<span class="material-icons text-white text-sm">face</span>
</div>
<div>
<p class="text-white text-sm font-bold">Create Avatar</p>
<p class="text-gray-300 text-xs">Customize your hero identity</p>
</div>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2 order-1 lg:order-2">
<div class="flex items-center gap-4 mb-6">
<div class="flex items-center justify-center w-12 h-12 rounded-xl bg-gray-100 dark:bg-white/5 text-xl font-bold text-gray-900 dark:text-white border border-gray-200 dark:border-white/10">
01
</div>
<h2 class="text-3xl font-bold text-gray-900 dark:text-white">Registration & Verification</h2>
</div>
<p class="text-lg text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
Start your journey by creating a secure account. We use advanced verification to ensure fair play and secure payouts.
</p>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="material-icons text-accent-yellow mt-1">check_circle</span>
<span class="text-gray-700 dark:text-gray-300">Connect via Email, Google, or Discord for instant access.</span>
</li>
<li class="flex items-start gap-3">
<span class="material-icons text-accent-yellow mt-1">check_circle</span>
<span class="text-gray-700 dark:text-gray-300">Verify your mobile number for secure withdrawals.</span>
</li>
<li class="flex items-start gap-3">
<span class="material-icons text-accent-yellow mt-1">check_circle</span>
<span class="text-gray-700 dark:text-gray-300">Set up your unique Gamer Tag and 3D Avatar.</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="py-16 md:py-24 bg-gray-50 dark:bg-white/5 relative border-y border-gray-200 dark:border-white/5">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-24">
<div class="lg:w-1/2">
<div class="flex items-center gap-4 mb-6">
<div class="flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10 text-xl font-bold text-primary border border-primary/20">
02
</div>
<h2 class="text-3xl font-bold text-gray-900 dark:text-white">The ₹99 Onboarding Pass</h2>
</div>
<p class="text-lg text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
To maintain a high-quality ecosystem with real prizes, we require a small one-time entry fee. This unlocks the entire platform.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
<div class="p-4 rounded-xl bg-white dark:bg-card-dark border border-gray-200 dark:border-white/10 shadow-sm">
<span class="material-icons text-primary mb-2">stars</span>
<h3 class="font-bold text-gray-900 dark:text-white mb-1">Unlimited Access</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Play as many practice quizzes as you want.</p>
</div>
<div class="p-4 rounded-xl bg-white dark:bg-card-dark border border-gray-200 dark:border-white/10 shadow-sm">
<span class="material-icons text-primary mb-2">emoji_events</span>
<h3 class="font-bold text-gray-900 dark:text-white mb-1">Real Prize Pools</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Eligible for cash tournaments immediately.</p>
</div>
</div>
<a class="inline-flex items-center text-primary font-semibold hover:text-primary-hover transition-colors group" href="#">
Get your pass now <span class="material-icons ml-1 transform group-hover:translate-x-1 transition-transform">arrow_forward</span>
</a>
</div>
<div class="lg:w-1/2 relative">
<div class="relative max-w-md mx-auto transform rotate-3 hover:rotate-0 transition-transform duration-500">
<div class="absolute inset-0 bg-primary rounded-3xl blur-xl opacity-40"></div>
<div class="relative bg-card-dark rounded-3xl p-8 border border-white/10 shadow-2xl overflow-hidden">
<div class="absolute top-0 right-0 p-12 bg-primary/20 rounded-full blur-2xl -mr-10 -mt-10"></div>
<div class="flex justify-between items-start mb-8 relative z-10">
<div>
<p class="text-accent-yellow font-bold text-xs uppercase tracking-wider mb-1">Premium Access</p>
<h3 class="text-3xl font-bold text-white">Entry Pass</h3>
</div>
<div class="text-right">
<p class="text-white text-3xl font-bold">₹99</p>
<p class="text-gray-400 text-xs">One-time</p>
</div>
</div>
<div class="space-y-3 mb-8 relative z-10">
<div class="flex items-center gap-3 text-gray-300">
<span class="material-icons text-green-400 text-sm">verified</span>
<span class="text-sm">Instant Withdrawals</span>
</div>
<div class="flex items-center gap-3 text-gray-300">
<span class="material-icons text-green-400 text-sm">verified</span>
<span class="text-sm">Global Ranking</span>
</div>
<div class="flex items-center gap-3 text-gray-300">
<span class="material-icons text-green-400 text-sm">verified</span>
<span class="text-sm">Anti-Cheat Protection</span>
</div>
</div>
<div class="border-t border-dashed border-white/20 pt-6 relative">
<div class="absolute -left-12 top-0 w-8 h-8 bg-gray-50 dark:bg-[#12111d] rounded-full -translate-y-1/2"></div>
<div class="absolute -right-12 top-0 w-8 h-8 bg-gray-50 dark:bg-[#12111d] rounded-full -translate-y-1/2"></div>
<button class="w-full bg-primary hover:bg-primary-hover text-white py-3 rounded-xl font-bold transition-colors">
Buy Pass
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-16 md:py-24 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-gray-100 dark:bg-white/5 text-xl font-bold text-gray-900 dark:text-white border border-gray-200 dark:border-white/10 mb-6">
03
</div>
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Quiz Categories & Earning</h2>
<p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
Choose your battlefield. Different categories offer varying levels of difficulty and prize pools.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="group relative rounded-2xl bg-white dark:bg-card-dark border border-gray-200 dark:border-white/10 p-6 hover:-translate-y-2 transition-transform duration-300 shadow-xl hover:shadow-primary/20">
<div class="w-14 h-14 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<span class="material-icons text-blue-600 dark:text-blue-400 text-3xl">bolt</span>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Lightning Rounds</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Fast-paced trivia. 10 questions, 10 seconds each. Best for quick earnings.</p>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-gray-100 dark:border-white/5">
<span class="text-xs font-semibold text-gray-500 uppercase">Difficulty: Easy</span>
<span class="text-xs font-bold text-green-500">Win up to ₹500</span>
</div>
</div>
<div class="group relative rounded-2xl bg-white dark:bg-card-dark border border-primary/40 p-6 hover:-translate-y-2 transition-transform duration-300 shadow-xl shadow-primary/10 hover:shadow-primary/30">
<div class="absolute top-0 right-0 bg-accent-yellow text-black text-xs font-bold px-3 py-1 rounded-bl-xl rounded-tr-xl">POPULAR</div>
<div class="w-14 h-14 rounded-full bg-primary/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<span class="material-icons text-primary text-3xl">psychology</span>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Strategic Campaigns</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Deep dive into specific topics like Tech, History, or Pop Culture. Higher stakes.</p>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-gray-100 dark:border-white/5">
<span class="text-xs font-semibold text-gray-500 uppercase">Difficulty: Medium</span>
<span class="text-xs font-bold text-green-500">Win up to ₹5,000</span>
</div>
</div>
<div class="group relative rounded-2xl bg-white dark:bg-card-dark border border-gray-200 dark:border-white/10 p-6 hover:-translate-y-2 transition-transform duration-300 shadow-xl hover:shadow-primary/20">
<div class="w-14 h-14 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<span class="material-icons text-red-600 dark:text-red-400 text-3xl">emoji_events</span>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Grand Tournaments</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Weekly events competing against thousands. Top 100 players take the pot.</p>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-gray-100 dark:border-white/5">
<span class="text-xs font-semibold text-gray-500 uppercase">Difficulty: Hard</span>
<span class="text-xs font-bold text-accent-yellow">Win Gadgets + Cash</span>
</div>
</div>
</div>
</div>
</section>
<section class="py-16 md:py-24 bg-gradient-to-br from-indigo-900 to-background-dark text-white relative overflow-hidden">
<div class="absolute top-0 right-0 w-96 h-96 bg-primary/20 rounded-full blur-3xl -mr-20 -mt-20"></div>
<div class="absolute bottom-0 left-0 w-96 h-96 bg-blue-600/20 rounded-full blur-3xl -ml-20 -mb-20"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="flex items-center gap-4 mb-6">
<div class="flex items-center justify-center w-12 h-12 rounded-xl bg-white/10 backdrop-blur-sm text-xl font-bold text-white border border-white/20">
04
</div>
<h2 class="text-3xl font-bold">Earn Beyond Playing</h2>
</div>
<p class="text-lg text-gray-300 mb-8">
The QuizQuest ecosystem rewards you for growing the community. Become a vendor or affiliate and earn passive income.
</p>
<div class="space-y-6">
<div class="flex gap-4">
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-accent-yellow/20 flex items-center justify-center">
<span class="material-icons text-accent-yellow">group_add</span>
</div>
<div>
<h3 class="text-xl font-bold mb-1">Referral Program</h3>
<p class="text-gray-400 text-sm">Invite friends and earn ₹50 for every verified player who buys a pass.</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
<span class="material-icons text-green-400">monetization_on</span>
</div>
<div>
<h3 class="text-xl font-bold mb-1">Vendor Network</h3>
<p class="text-gray-400 text-sm">Host your own mini-tournaments and earn a percentage of the entry fees.</p>
</div>
</div>
</div>
<div class="mt-10">
<a class="inline-block bg-white text-primary px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition-colors shadow-lg" href="#">Start Earning Today</a>
</div>
</div>
<div class="relative">
<img alt="Abstract representation of network and earning" class="rounded-2xl shadow-2xl border border-white/10 opacity-90" src="https://lh3.googleusercontent.com/aida-public/AB6AXuABfN7SSa4AsMMDDOzGuUvF0Fx5qrOt1FMEVpGEue0zlZrCQ4FpqVxiGlnTXkA3PkxYClNwiwsWzJVhXmj1BitbSkgYOhmWIQ4hecIEGDp67Xkw5dzkeILtVK0mDABM2iPo52EtpRw-Sdzg0fkyfuAb74_4rz5uBQRRzmWiSp8vxRu9e8q50gsS-GOQKZE11MZ8zVkcCL-QoAdB-ZJYKcXEB4q0dDfFuTmwOO3pMYswrAhgETD3qhJdcDs_XGBW7WuDKoyoMvYCYL0"/>
<div class="absolute -bottom-6 -left-6 bg-card-dark p-6 rounded-xl border border-white/10 shadow-xl max-w-xs">
<div class="flex items-center gap-3 mb-2">
<span class="w-3 h-3 rounded-full bg-green-500"></span>
<span class="text-xs text-gray-400 uppercase tracking-widest">Live Earnings</span>
</div>
<div class="flex justify-between items-end">
<div>
<p class="text-gray-400 text-xs">Total Payouts</p>
<p class="text-2xl font-bold text-white">₹1.2 Cr+</p>
</div>
<span class="material-icons text-primary">trending_up</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-20 bg-background-light dark:bg-background-dark text-center">
<div class="max-w-4xl mx-auto px-4">
<h2 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">Ready to Join the Quest?</h2>
<p class="text-xl text-gray-600 dark:text-gray-400 mb-10">Thousands of players are winning daily. Your fortune awaits.</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a class="w-full sm:w-auto px-8 py-4 bg-primary hover:bg-primary-hover text-white rounded-full font-bold text-lg shadow-lg shadow-primary/40 transition-all transform hover:-translate-y-1" href="#">
Get Started - ₹99
</a>
<a class="w-full sm:w-auto px-8 py-4 bg-transparent border-2 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:border-primary hover:text-primary dark:hover:text-white dark:hover:border-white rounded-full font-bold text-lg transition-colors" href="#">
View Leaderboard
</a>
</div>
<p class="mt-6 text-sm text-gray-500 dark:text-gray-500">
<span class="material-icons text-sm align-middle mr-1">lock</span> Secure Payment Gateway
</p>
</div>
</section>
<footer class="bg-white dark:bg-[#050508] border-t border-gray-200 dark:border-white/5 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2">
<span class="material-icons text-primary">sports_esports</span>
<span class="text-lg font-bold text-gray-900 dark:text-white">QuizQuest © 2023</span>
</div>
<div class="flex flex-wrap justify-center gap-8">
<a class="text-gray-500 hover:text-primary transition-colors text-sm" href="#">Privacy Policy</a>
<a class="text-gray-500 hover:text-primary transition-colors text-sm" href="#">Terms of Service</a>
<a class="text-gray-500 hover:text-primary transition-colors text-sm" href="#">Support</a>
<a class="text-gray-500 hover:text-primary transition-colors text-sm" href="#">Affiliate Program</a>
</div>
</div>
</div>
</footer>
<script>
// Simple logic to handle system preferences or future toggles if implemented
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
</script>
</body></html>