<!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</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+Round" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7c3aed", // Violet 600
"primary-hover": "#6d28d9", // Violet 700
"background-light": "#f8fafc", // Slate 50
"background-dark": "#0B0A14", // Very dark violet/black
"card-light": "#ffffff",
"card-dark": "#161523", // Slightly lighter dark
"accent-yellow": "#fbbf24", // Amber 400
},
fontFamily: {
display: ["Inter", "sans-serif"],
body: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.75rem",
},
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}
.gradient-text {
background: linear-gradient(to right, #fbbf24, #f59e0b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.gradient-purple-text {
background: linear-gradient(to right, #a78bfa, #c084fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-800 dark:text-slate-100 transition-colors duration-300 font-body">
<nav class="fixed w-full z-50 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white">
<span class="material-icons-round text-xl">sports_esports</span>
</div>
<span class="font-bold text-xl tracking-tight">QuizQuest</span>
</div>
<div class="hidden md:flex space-x-8">
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary font-medium transition-colors" href="#">Home</a>
<a class="text-primary font-semibold transition-colors" href="#">How It Works</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary font-medium transition-colors" href="#">Prizes</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-primary font-medium transition-colors" href="#">Leaderboard</a>
</div>
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors" id="theme-toggle">
<span class="material-icons-round dark:hidden">dark_mode</span>
<span class="material-icons-round hidden dark:block text-yellow-400">light_mode</span>
</button>
<a class="text-slate-600 dark:text-slate-300 font-medium hover:text-primary dark:hover:text-primary" href="#">Login</a>
<a class="bg-primary hover:bg-primary-hover text-white px-5 py-2 rounded-full font-medium transition-all shadow-lg shadow-primary/30" href="#">Join Now</a>
</div>
</div>
</div>
</nav>
<div class="relative pt-32 pb-20 overflow-hidden">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full z-0 pointer-events-none">
<div class="absolute top-20 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-[100px] mix-blend-multiply dark:mix-blend-screen animate-pulse"></div>
<div class="absolute top-40 right-1/4 w-72 h-72 bg-purple-500/20 rounded-full blur-[80px] mix-blend-multiply dark:mix-blend-screen"></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-sm font-semibold mb-6">
<span class="w-2 h-2 rounded-full bg-accent-yellow animate-pulse"></span>
BECOME A CHAMPION
</div>
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6 leading-tight">
Master the Game in <br/>
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-400">4 Simple Steps</span>
</h1>
<p class="text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto mb-10">
Join thousands of players competing daily. The path from registration to glory is faster than you think. Are you ready to claim your fortune?
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a class="flex items-center justify-center gap-2 bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 text-slate-900 dark:text-white px-8 py-3 rounded-xl font-semibold transition-all" href="#steps">
Learn More
<span class="material-icons-round text-sm">arrow_downward</span>
</a>
<a class="flex items-center justify-center gap-2 bg-primary hover:bg-primary-hover text-white px-8 py-3 rounded-xl font-semibold transition-all shadow-lg shadow-primary/30" href="#">
Start Playing
<span class="material-icons-round text-sm">arrow_forward</span>
</a>
</div>
</div>
</div>
<div class="relative py-20 bg-white dark:bg-[#0f0e1a]" id="steps">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="hidden lg:block absolute top-1/2 left-0 w-full h-1 bg-gradient-to-r from-slate-200 via-primary to-slate-200 dark:from-slate-800 dark:via-primary dark:to-slate-800 -translate-y-12 z-0 opacity-20"></div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 relative z-10">
<div class="group relative">
<div class="absolute -top-4 -right-4 w-10 h-10 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-lg shadow-lg z-20 border-4 border-white dark:border-[#0f0e1a]">1</div>
<div class="bg-slate-50 dark:bg-card-dark border border-slate-200 dark:border-slate-800 rounded-2xl p-6 h-full hover:-translate-y-2 transition-transform duration-300 shadow-sm hover:shadow-xl hover:shadow-primary/10">
<div class="w-16 h-16 rounded-2xl bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 flex items-center justify-center mb-6">
<span class="material-icons-round text-3xl">account_circle</span>
</div>
<h3 class="text-xl font-bold mb-3">Register Profile</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
Create your unique avatar and gamer tag. Join the community of quiz enthusiasts instantly.
</p>
</div>
</div>
<div class="group relative">
<div class="absolute -top-4 -right-4 w-10 h-10 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-lg shadow-lg z-20 border-4 border-white dark:border-[#0f0e1a]">2</div>
<div class="bg-slate-50 dark:bg-card-dark border border-slate-200 dark:border-slate-800 rounded-2xl p-6 h-full hover:-translate-y-2 transition-transform duration-300 shadow-sm hover:shadow-xl hover:shadow-primary/10">
<div class="w-16 h-16 rounded-2xl bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center mb-6">
<span class="material-icons-round text-3xl">payments</span>
</div>
<h3 class="text-xl font-bold mb-3">Pay Entry Fee</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
Secure your spot in the arena with a small <span class="font-bold text-slate-900 dark:text-white">₹99 fee</span>. This unlocks the Standard Entry Pass.
</p>
</div>
</div>
<div class="group relative">
<div class="absolute -top-4 -right-4 w-10 h-10 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-lg shadow-lg z-20 border-4 border-white dark:border-[#0f0e1a]">3</div>
<div class="bg-slate-50 dark:bg-card-dark border border-slate-200 dark:border-slate-800 rounded-2xl p-6 h-full hover:-translate-y-2 transition-transform duration-300 shadow-sm hover:shadow-xl hover:shadow-primary/10">
<div class="w-16 h-16 rounded-2xl bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 flex items-center justify-center mb-6">
<span class="material-icons-round text-3xl">sports_esports</span>
</div>
<h3 class="text-xl font-bold mb-3">Play Quiz</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
Answer high-energy trivia questions fast. Speed and accuracy help you climb the live leaderboard.
</p>
</div>
</div>
<div class="group relative">
<div class="absolute -top-4 -right-4 w-10 h-10 bg-accent-yellow text-slate-900 rounded-full flex items-center justify-center font-bold text-lg shadow-lg z-20 border-4 border-white dark:border-[#0f0e1a]">4</div>
<div class="bg-gradient-to-br from-slate-50 to-amber-50 dark:from-card-dark dark:to-amber-900/10 border border-amber-200 dark:border-amber-900/30 rounded-2xl p-6 h-full hover:-translate-y-2 transition-transform duration-300 shadow-sm hover:shadow-xl hover:shadow-amber-500/10 relative overflow-hidden">
<div class="absolute top-0 right-0 w-24 h-24 bg-accent-yellow/10 rounded-bl-full -mr-4 -mt-4"></div>
<div class="w-16 h-16 rounded-2xl bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-accent-yellow flex items-center justify-center mb-6 relative z-10">
<span class="material-icons-round text-3xl">emoji_events</span>
</div>
<h3 class="text-xl font-bold mb-3 gradient-text">Win Big</h3>
<p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed relative z-10">
Claim instant cash rewards, gadgets, and eternal glory. Withdraw winnings instantly.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="py-20 bg-background-light dark:bg-background-dark">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-[#161523] rounded-3xl p-8 md:p-12 text-center shadow-2xl border border-slate-800 relative overflow-hidden group">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full bg-gradient-to-b from-primary/10 to-transparent pointer-events-none"></div>
<div class="absolute -top-24 -right-24 w-64 h-64 bg-primary/20 rounded-full blur-[80px]"></div>
<div class="relative z-10">
<span class="text-accent-yellow text-sm font-bold tracking-wider uppercase mb-2 block">Limited Time Offer</span>
<h2 class="text-3xl md:text-5xl font-bold text-white mb-6">Standard Entry Pass</h2>
<div class="flex items-baseline justify-center gap-2 mb-8">
<span class="text-6xl font-bold text-white">₹99</span>
<span class="text-slate-400 text-lg">/ quest</span>
</div>
<div class="flex flex-wrap justify-center gap-4 mb-10">
<div class="flex items-center gap-2 bg-slate-800/50 rounded-full px-4 py-2 border border-slate-700">
<span class="material-icons-round text-green-400 text-sm">check_circle</span>
<span class="text-slate-300 text-sm">Instant Payouts</span>
</div>
<div class="flex items-center gap-2 bg-slate-800/50 rounded-full px-4 py-2 border border-slate-700">
<span class="material-icons-round text-green-400 text-sm">check_circle</span>
<span class="text-slate-300 text-sm">Global Rank</span>
</div>
<div class="flex items-center gap-2 bg-slate-800/50 rounded-full px-4 py-2 border border-slate-700">
<span class="material-icons-round text-green-400 text-sm">check_circle</span>
<span class="text-slate-300 text-sm">Anti-Cheat</span>
</div>
</div>
<button class="bg-primary hover:bg-primary-hover text-white w-full max-w-sm py-4 rounded-xl font-bold text-lg shadow-lg shadow-primary/40 hover:shadow-primary/60 transition-all flex items-center justify-center gap-2 mx-auto">
<span class="material-icons-round">bolt</span>
Pay & Join Now
</button>
<p class="mt-6 text-xs text-slate-500 max-w-md mx-auto">
By joining, you agree to our Terms of Service. Entry fees are non-refundable once the quiz begins.
</p>
</div>
</div>
</div>
</div>
<div class="py-20 bg-white dark:bg-[#0f0e1a]">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12">Frequently Asked Questions</h2>
<div class="space-y-4">
<div class="border border-slate-200 dark:border-slate-800 rounded-2xl overflow-hidden">
<button class="w-full flex items-center justify-between p-6 bg-slate-50 dark:bg-card-dark hover:bg-slate-100 dark:hover:bg-[#1f1d30] transition-colors text-left focus:outline-none">
<span class="font-semibold text-lg">Is the ₹99 fee refundable?</span>
<span class="material-icons-round text-slate-400">expand_more</span>
</button>
<div class="p-6 bg-white dark:bg-[#0f0e1a] text-slate-600 dark:text-slate-400 leading-relaxed border-t border-slate-200 dark:border-slate-800">
The entry fee is non-refundable once you have successfully joined a quest. However, if a technical error on our end prevents you from playing, we will refund the full amount to your wallet within 24 hours.
</div>
</div>
<div class="border border-slate-200 dark:border-slate-800 rounded-2xl overflow-hidden">
<button class="w-full flex items-center justify-between p-6 bg-slate-50 dark:bg-card-dark hover:bg-slate-100 dark:hover:bg-[#1f1d30] transition-colors text-left focus:outline-none">
<span class="font-semibold text-lg">How are winners decided?</span>
<span class="material-icons-round text-slate-400">expand_more</span>
</button>
<div class="p-6 bg-white dark:bg-[#0f0e1a] text-slate-600 dark:text-slate-400 leading-relaxed border-t border-slate-200 dark:border-slate-800 hidden">
Winners are ranked based on a combination of correct answers and speed. The faster you answer correctly, the higher your score. Our anti-cheat system ensures fair play for everyone.
</div>
</div>
<div class="border border-slate-200 dark:border-slate-800 rounded-2xl overflow-hidden">
<button class="w-full flex items-center justify-between p-6 bg-slate-50 dark:bg-card-dark hover:bg-slate-100 dark:hover:bg-[#1f1d30] transition-colors text-left focus:outline-none">
<span class="font-semibold text-lg">Can I play without paying?</span>
<span class="material-icons-round text-slate-400">expand_more</span>
</button>
<div class="p-6 bg-white dark:bg-[#0f0e1a] text-slate-600 dark:text-slate-400 leading-relaxed border-t border-slate-200 dark:border-slate-800 hidden">
We offer free practice quizzes daily where you can earn XP and small rewards. However, the major prize pools (Cash Prizes, Gadgets) are reserved for paid quests.
</div>
</div>
<div class="border border-slate-200 dark:border-slate-800 rounded-2xl overflow-hidden">
<button class="w-full flex items-center justify-between p-6 bg-slate-50 dark:bg-card-dark hover:bg-slate-100 dark:hover:bg-[#1f1d30] transition-colors text-left focus:outline-none">
<span class="font-semibold text-lg">How do I withdraw my winnings?</span>
<span class="material-icons-round text-slate-400">expand_more</span>
</button>
<div class="p-6 bg-white dark:bg-[#0f0e1a] text-slate-600 dark:text-slate-400 leading-relaxed border-t border-slate-200 dark:border-slate-800 hidden">
Winnings are credited to your QuizQuest wallet instantly. From there, you can withdraw directly to your bank account or UPI ID. Minimum withdrawal limit applies.
</div>
</div>
</div>
</div>
</div>
<footer class="bg-slate-900 text-slate-300 py-12 border-t border-slate-800">
<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 mb-8">
<div class="flex items-center gap-2 mb-4 md:mb-0">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white">
<span class="material-icons-round text-xl">sports_esports</span>
</div>
<span class="font-bold text-xl text-white tracking-tight">QuizQuest</span>
</div>
<div class="flex space-x-6">
<a class="hover:text-white transition-colors" href="#">Privacy</a>
<a class="hover:text-white transition-colors" href="#">Terms</a>
<a class="hover:text-white transition-colors" href="#">Support</a>
</div>
</div>
<div class="text-center md:text-left text-sm text-slate-500">
© 2023 QuizQuest Inc. All rights reserved. Let the games begin.
</div>
</div>
</footer>
<script>
// Simple Theme Toggle Logic
const toggleBtn = document.getElementById('theme-toggle');
const htmlElement = document.documentElement;
// Check local storage or system preference
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
htmlElement.classList.add('dark');
} else {
htmlElement.classList.remove('dark');
}
toggleBtn.addEventListener('click', () => {
if (htmlElement.classList.contains('dark')) {
htmlElement.classList.remove('dark');
localStorage.theme = 'light';
} else {
htmlElement.classList.add('dark');
localStorage.theme = 'dark';
}
});
// Simple Accordion Logic
const accButtons = document.querySelectorAll('.space-y-4 button');
accButtons.forEach(btn => {
btn.addEventListener('click', () => {
const content = btn.nextElementSibling;
const icon = btn.querySelector('.material-icons-round');
// Toggle current
if (content.classList.contains('hidden')) {
content.classList.remove('hidden');
icon.textContent = 'expand_less';
} else {
content.classList.add('hidden');
icon.textContent = 'expand_more';
}
});
});
</script>
</body></html>