<!DOCTYPE html>
<html class="dark" 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,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk: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>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"background-light": "#f7f6f8",
"background-dark": "#191022",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"],
"sans": ["Space Grotesk", "sans-serif"],
},
backgroundImage: {
'cyber-grid': "linear-gradient(to right, #2a1b3d 1px, transparent 1px), linear-gradient(to bottom, #2a1b3d 1px, transparent 1px)",
}
},
},
}
</script>
<style>
.neon-shadow {
box-shadow: 0 0 15px rgba(127, 19, 236, 0.5), inset 0 0 10px rgba(127, 19, 236, 0.2);
}
.neon-text {
text-shadow: 0 0 10px rgba(127, 19, 236, 0.8);
}
.cyber-card-bg {
background: linear-gradient(145deg, rgba(25, 16, 34, 0.9) 0%, rgba(42, 27, 61, 0.9) 100%);
backdrop-filter: blur(10px);
}
</style>
</head>
<body class="bg-background-dark text-slate-100 font-display overflow-x-hidden antialiased selection:bg-primary selection:text-white">
<div class="relative flex min-h-screen w-full flex-col overflow-hidden">
<!-- Background Grid Effect -->
<div class="absolute inset-0 z-0 bg-cyber-grid bg-[size:40px_40px] opacity-20 pointer-events-none"></div>
<!-- Ambient Glows -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-primary/20 rounded-full blur-[120px] pointer-events-none"></div>
<div class="layout-container flex h-full grow flex-col z-10 relative">
<!-- Navbar -->
<div class="flex flex-1 justify-center">
<div class="layout-content-container flex flex-col w-full max-w-[1280px]">
<header class="flex items-center justify-between whitespace-nowrap border-b border-primary/20 bg-background-dark/80 backdrop-blur-md px-6 py-4 sticky top-0 z-50">
<div class="flex items-center gap-4 text-white">
<div class="size-8 text-primary">
<span class="material-symbols-outlined text-3xl neon-text">sports_esports</span>
</div>
<h2 class="text-white text-xl font-bold leading-tight tracking-wider uppercase">QuizQuest</h2>
</div>
<div class="flex flex-1 justify-end gap-8 hidden md:flex">
<div class="flex items-center gap-9">
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-bold uppercase tracking-widest" href="#">Home</a>
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-bold uppercase tracking-widest" href="#">Tournaments</a>
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-bold uppercase tracking-widest" href="#">Leaderboard</a>
<a class="text-primary text-sm font-bold uppercase tracking-widest neon-text" href="#">How It Works</a>
</div>
<div class="flex gap-4">
<button class="flex min-w-[100px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-6 bg-primary hover:bg-primary/80 transition-all shadow-[0_0_20px_rgba(127,19,236,0.5)] text-white text-sm font-bold tracking-wider uppercase">
<span class="truncate">Sign Up</span>
</button>
<button class="flex min-w-[100px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-6 border border-primary/50 hover:bg-primary/10 transition-all text-white text-sm font-bold tracking-wider uppercase">
<span class="truncate">Login</span>
</button>
</div>
</div>
<div class="md:hidden text-white">
<span class="material-symbols-outlined">menu</span>
</div>
</header>
<!-- Main Content -->
<main class="flex flex-col items-center pt-10 pb-20 px-4">
<!-- Hero Section -->
<div class="text-center max-w-4xl mx-auto mb-20 relative">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/30 bg-primary/10 text-primary text-xs font-bold uppercase tracking-[0.2em] mb-6">
<span class="size-2 rounded-full bg-primary animate-pulse"></span>
System Online
</div>
<h1 class="text-5xl md:text-7xl font-black text-transparent bg-clip-text bg-gradient-to-br from-white via-white to-primary/50 tracking-tight mb-6 uppercase leading-none drop-shadow-2xl">
Your Quest<br/>Begins Here
</h1>
<p class="text-slate-400 text-lg md:text-xl max-w-2xl mx-auto font-light leading-relaxed">
Level up your knowledge and earn real rewards. Follow the path below to claim your victory in the arena.
</p>
</div>
<!-- Timeline Section -->
<div class="relative w-full max-w-5xl mx-auto">
<!-- Center Line -->
<div class="absolute left-4 md:left-1/2 top-0 bottom-0 w-[2px] bg-gradient-to-b from-primary via-purple-400 to-transparent md:-translate-x-1/2 shadow-[0_0_15px_rgba(127,19,236,0.8)] z-0"></div>
<!-- Step 1: Register -->
<div class="relative flex flex-col md:flex-row items-center justify-between mb-24 group">
<div class="w-full md:w-[45%] mb-8 md:mb-0 pr-0 md:pr-12 text-left md:text-right order-2 md:order-1">
<div class="cyber-card-bg p-8 rounded-[2rem] border border-primary/30 hover:border-primary/80 transition-all duration-300 neon-shadow relative overflow-hidden group-hover:translate-y-[-5px]">
<div class="absolute -right-10 -top-10 size-32 bg-primary/20 rounded-full blur-2xl"></div>
<h3 class="text-2xl font-bold text-white mb-2 uppercase tracking-wide">Create Your Avatar</h3>
<p class="text-primary text-sm font-bold uppercase tracking-widest mb-4">Step 01: Registration</p>
<p class="text-slate-300 font-light leading-relaxed">Sign up in seconds using your email or social accounts. Build your unique player profile and choose your identity.</p>
</div>
</div>
<div class="absolute left-4 md:left-1/2 -translate-x-[9px] md:-translate-x-1/2 flex items-center justify-center size-6 bg-background-dark border-2 border-primary rounded-full z-10 shadow-[0_0_20px_rgba(127,19,236,1)] order-1 md:order-2 mt-[-2rem] md:mt-0">
<div class="size-2 bg-primary rounded-full animate-pulse"></div>
</div>
<div class="w-full md:w-[45%] pl-12 md:pl-12 order-3">
<div class="relative h-64 w-full rounded-[2rem] overflow-hidden border border-primary/20 group-hover:border-primary/60 transition-colors">
<div class="absolute inset-0 bg-gradient-to-t from-background-dark via-transparent to-transparent z-10"></div>
<img class="w-full h-full object-cover opacity-80 group-hover:scale-110 transition-transform duration-700" data-alt="Futuristic neon polygon face wireframe representing user avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAf3KypvHG-efTrUdd13djHKnaTZch4F2dRiDTGkJ8mK3TXVHYT4PwaK41tDR5mjPk3j4SIPTUb4X5peIHn_2iERWS0f_W5rYklGGM_vZNrvNYeiH9jFsI_OjYJaBUiH62wrAcCE9pGseNHqDEsz0yz-_UYj3IIuas7gYJa3yEAhyGPtePY9yAbxzyauZA2Y0WtP-GuvqlYYzxHZp9jlNEIiooAsxfmWwN_12vpQjHElto1l4UMt94icy_9SuwzHisRfoalG96q"/>
<div class="absolute bottom-4 left-4 z-20">
<span class="material-symbols-outlined text-4xl text-primary neon-text">face_6</span>
</div>
</div>
</div>
</div>
<!-- Step 2: Pay -->
<div class="relative flex flex-col md:flex-row items-center justify-between mb-24 group">
<div class="w-full md:w-[45%] mb-8 md:mb-0 pr-0 md:pr-12 text-right order-3 md:order-1">
<div class="relative h-64 w-full rounded-[2rem] overflow-hidden border border-primary/20 group-hover:border-primary/60 transition-colors">
<div class="absolute inset-0 bg-gradient-to-t from-background-dark via-transparent to-transparent z-10"></div>
<img class="w-full h-full object-cover opacity-80 group-hover:scale-110 transition-transform duration-700" data-alt="Glowing neon purple hexagonal portal or gateway" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDNoeUsZVD3-zI25YC5iMThxXzaA5HVPnTQYPTQCfn2kAen0j5LedNA9znksdn_kbKiF0nyNR1nEn504LtDYjFJbOwfG83PrMJaBV7N4M_5z7sGoKtyc7zfh9cTHFZPHsm4h3oVPo9_SapxM-3Z0gEBR5cxvm0k2kiHRu5UFpWDEEOwmWES_48dj-z6DVHXxL69DtOjC40_4PB-LVEnPventQYLGEzLPUHLbEhQmq55AvkukncP2gLOtLxRjoCjnU-aDRkn9Jmo"/>
<div class="absolute bottom-4 right-4 z-20">
<span class="material-symbols-outlined text-4xl text-primary neon-text">lock_open</span>
</div>
</div>
</div>
<div class="absolute left-4 md:left-1/2 -translate-x-[9px] md:-translate-x-1/2 flex items-center justify-center size-6 bg-background-dark border-2 border-primary rounded-full z-10 shadow-[0_0_20px_rgba(127,19,236,1)] order-1 md:order-2 mt-[-2rem] md:mt-0">
<div class="size-2 bg-primary rounded-full animate-pulse"></div>
</div>
<div class="w-full md:w-[45%] pl-12 md:pl-12 order-2 md:order-3">
<div class="cyber-card-bg p-8 rounded-[2rem] border border-primary/30 hover:border-primary/80 transition-all duration-300 neon-shadow relative overflow-hidden group-hover:translate-y-[-5px]">
<div class="absolute -left-10 -bottom-10 size-32 bg-primary/20 rounded-full blur-2xl"></div>
<h3 class="text-2xl font-bold text-white mb-2 uppercase tracking-wide">Unlock the Arena</h3>
<p class="text-primary text-sm font-bold uppercase tracking-widest mb-4">Step 02: Entry Fee</p>
<p class="text-slate-300 font-light leading-relaxed">Secure your spot in the tournament. A small entry fee grants you access to compete for the massive prize pool.</p>
</div>
</div>
</div>
<!-- Step 3: Play -->
<div class="relative flex flex-col md:flex-row items-center justify-between mb-24 group">
<div class="w-full md:w-[45%] mb-8 md:mb-0 pr-0 md:pr-12 text-left md:text-right order-2 md:order-1">
<div class="cyber-card-bg p-8 rounded-[2rem] border border-primary/30 hover:border-primary/80 transition-all duration-300 neon-shadow relative overflow-hidden group-hover:translate-y-[-5px]">
<div class="absolute -right-10 top-0 size-32 bg-primary/20 rounded-full blur-2xl"></div>
<h3 class="text-2xl font-bold text-white mb-2 uppercase tracking-wide">Battle of Wits</h3>
<p class="text-primary text-sm font-bold uppercase tracking-widest mb-4">Step 03: Play Quiz</p>
<p class="text-slate-300 font-light leading-relaxed">Enter the live quiz zone. Answer rapid-fire trivia questions against thousands of players. Speed and accuracy determine your score.</p>
</div>
</div>
<div class="absolute left-4 md:left-1/2 -translate-x-[9px] md:-translate-x-1/2 flex items-center justify-center size-6 bg-background-dark border-2 border-primary rounded-full z-10 shadow-[0_0_20px_rgba(127,19,236,1)] order-1 md:order-2 mt-[-2rem] md:mt-0">
<div class="size-2 bg-primary rounded-full animate-pulse"></div>
</div>
<div class="w-full md:w-[45%] pl-12 md:pl-12 order-3">
<div class="relative h-64 w-full rounded-[2rem] overflow-hidden border border-primary/20 group-hover:border-primary/60 transition-colors">
<div class="absolute inset-0 bg-gradient-to-t from-background-dark via-transparent to-transparent z-10"></div>
<img class="w-full h-full object-cover opacity-80 group-hover:scale-110 transition-transform duration-700" data-alt="Abstract glowing 3d controller gamepad in purple neon light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDhJmjN2rvmF3_kckZI1-alByeBKlULu8Q8-348uFBGrapRpJ-Q84WJ7-vS7C4TOJbwHLuPuo4-lpG83jsldKSg9JGsU53ANX84kADAAxY5nWxdd_cdtpvFFWDnQuMimPSru0nhvp69DcgeRcepTEjHoUyhBoneRZBU7liQiPmlUaBA_9sCtGzv5y4PBlxpDFHmnd76p3ys0cvubJVZOdvmhrviAXbbqIpTREsO1JEPLxKxXw8u7II_BpMDIkWp_L-ZJpruJAeK"/>
<div class="absolute bottom-4 left-4 z-20">
<span class="material-symbols-outlined text-4xl text-primary neon-text">stadia_controller</span>
</div>
</div>
</div>
</div>
<!-- Step 4: Earn -->
<div class="relative flex flex-col md:flex-row items-center justify-between mb-10 group">
<div class="w-full md:w-[45%] mb-8 md:mb-0 pr-0 md:pr-12 text-right order-3 md:order-1">
<div class="relative h-64 w-full rounded-[2rem] overflow-hidden border border-primary/20 group-hover:border-primary/60 transition-colors">
<div class="absolute inset-0 bg-gradient-to-t from-background-dark via-transparent to-transparent z-10"></div>
<img class="w-full h-full object-cover opacity-80 group-hover:scale-110 transition-transform duration-700" data-alt="Floating 3D gold coins and treasure chest with purple glow" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC9bU-Viy_1UgaNq5siCsSoJOVWXaENTK7vmuCXm4ReHNN0iDKpWO5FSB0Hj44MZ2gI2O-zyBffHLc3p_5Dd-IDWREVNy27JMWkcvV8jRHUvGmq5x3HCEaPziEVpBr_XZ7WYMxCBS0ELBDm85mQ_ImYNGETtyzlyv6HiPqq1ge8-IuGfneEJ1rbuczytGyk-koWIbASts4aH64gkGMb74qdhMDuMLsKqsnTG6YlFcMuCEWRhM2c2NFg1FjgFloIVrKa-CB3uzr8"/>
<div class="absolute bottom-4 right-4 z-20">
<span class="material-symbols-outlined text-4xl text-primary neon-text">trophy</span>
</div>
</div>
</div>
<div class="absolute left-4 md:left-1/2 -translate-x-[9px] md:-translate-x-1/2 flex items-center justify-center size-6 bg-background-dark border-2 border-primary rounded-full z-10 shadow-[0_0_20px_rgba(127,19,236,1)] order-1 md:order-2 mt-[-2rem] md:mt-0">
<div class="size-2 bg-primary rounded-full animate-pulse"></div>
</div>
<div class="w-full md:w-[45%] pl-12 md:pl-12 order-2 md:order-3">
<div class="cyber-card-bg p-8 rounded-[2rem] border border-primary/30 hover:border-primary/80 transition-all duration-300 neon-shadow relative overflow-hidden group-hover:translate-y-[-5px]">
<div class="absolute -left-10 -bottom-10 size-32 bg-primary/20 rounded-full blur-2xl"></div>
<h3 class="text-2xl font-bold text-white mb-2 uppercase tracking-wide">Claim the Loot</h3>
<p class="text-primary text-sm font-bold uppercase tracking-widest mb-4">Step 04: Rewards</p>
<p class="text-slate-300 font-light leading-relaxed">Top the leaderboard and instantly withdraw your winnings. Convert your knowledge into real cash prizes.</p>
</div>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-20 w-full max-w-4xl mx-auto text-center px-4 relative z-10">
<div class="cyber-card-bg rounded-[3rem] p-12 md:p-20 border border-primary/40 neon-shadow relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary to-transparent opacity-50"></div>
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10 mix-blend-overlay"></div>
<h2 class="text-3xl md:text-5xl font-black text-white mb-6 uppercase tracking-tight">Ready Player One?</h2>
<p class="text-slate-300 text-lg mb-10 max-w-xl mx-auto font-light">Join thousands of players competing for the top score right now. The arena awaits.</p>
<div class="flex justify-center">
<button class="group relative flex min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-16 px-10 bg-primary hover:bg-white transition-all duration-300 shadow-[0_0_30px_rgba(127,19,236,0.6)] hover:shadow-[0_0_50px_rgba(127,19,236,1)]">
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:animate-[shimmer_1.5s_infinite]"></span>
<span class="text-white group-hover:text-primary text-lg font-bold tracking-[0.1em] uppercase transition-colors">Start The Quest</span>
<span class="material-symbols-outlined ml-2 text-white group-hover:text-primary transition-colors">arrow_forward</span>
</button>
</div>
</div>
</div>
</main>
<footer class="flex flex-col gap-6 px-5 py-10 text-center border-t border-primary/20 bg-background-dark mt-auto relative z-10">
<div class="flex flex-wrap items-center justify-center gap-6">
<a class="text-slate-400 hover:text-primary text-sm font-medium uppercase tracking-wider transition-colors" href="#">Terms of Service</a>
<a class="text-slate-400 hover:text-primary text-sm font-medium uppercase tracking-wider transition-colors" href="#">Privacy Policy</a>
<a class="text-slate-400 hover:text-primary text-sm font-medium uppercase tracking-wider transition-colors" href="#">Support</a>
</div>
<div class="flex flex-wrap justify-center gap-6">
<a class="text-slate-400 hover:text-primary transition-colors hover:scale-110 transform duration-200" href="#">
<span class="material-symbols-outlined text-3xl">chat</span>
</a>
<a class="text-slate-400 hover:text-primary transition-colors hover:scale-110 transform duration-200" href="#">
<span class="material-symbols-outlined text-3xl">flutter_dash</span> <!-- Using generic bird icon for twitter/x -->
</a>
<a class="text-slate-400 hover:text-primary transition-colors hover:scale-110 transform duration-200" href="#">
<span class="material-symbols-outlined text-3xl">videocam</span> <!-- Twitch equivalent -->
</a>
</div>
<p class="text-slate-500 text-xs font-normal uppercase tracking-widest">© 2024 QuizQuest. All rights reserved.</p>
</footer>
</div>
</div>
</div>
</div>
</body></html>