<!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,container-queries"></script>
<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=Inter:wght@300;400;500;600;700;800;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": "#7f13ec",
"background-light": "#f7f6f8",
"background-dark": "#191022",
},
fontFamily: {
"display": ["Inter", "sans-serif"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
},
},
}
</script>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 antialiased overflow-x-hidden transition-colors duration-300">
<div class="flex min-h-screen flex-col">
<!-- Header -->
<header class="sticky top-0 z-50 w-full border-b border-slate-200 dark:border-slate-800 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md">
<div class="px-4 md:px-10 lg:px-40 flex h-16 items-center justify-between">
<div class="flex items-center gap-4">
<div class="text-primary size-8">
<svg class="w-full h-full" fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M44 11.2727C44 14.0109 39.8386 16.3957 33.69 17.6364C39.8386 18.877 44 21.2618 44 24C44 26.7382 39.8386 29.123 33.69 30.3636C39.8386 31.6043 44 33.9891 44 36.7273C44 40.7439 35.0457 44 24 44C12.9543 44 4 40.7439 4 36.7273C4 33.9891 8.16144 31.6043 14.31 30.3636C8.16144 29.123 4 26.7382 4 24C4 21.2618 8.16144 18.877 14.31 17.6364C8.16144 16.3957 4 14.0109 4 11.2727C4 7.25611 12.9543 4 24 4C35.0457 4 44 7.25611 44 11.2727Z" fill="currentColor"></path>
</svg>
</div>
<h2 class="text-lg font-bold tracking-tight">QuizQuest</h2>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Home</a>
<a class="text-sm font-medium text-primary" href="#">How It Works</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Leaderboard</a>
</nav>
<div class="flex gap-3">
<button class="hidden sm:flex items-center justify-center rounded-full px-5 py-2 text-sm font-bold bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors text-slate-900 dark:text-slate-100">
Login
</button>
<button class="flex items-center justify-center rounded-full px-5 py-2 text-sm font-bold bg-primary text-white hover:bg-primary/90 transition-all shadow-lg shadow-primary/30">
Sign Up
</button>
</div>
</div>
</header>
<main class="flex-grow">
<!-- Hero Section -->
<section class="relative px-4 py-20 md:py-32 lg:px-40 overflow-hidden">
<!-- Abstract decorative gradient blobs -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full max-w-7xl pointer-events-none">
<div class="absolute top-20 left-10 w-72 h-72 bg-primary/10 rounded-full blur-3xl"></div>
<div class="absolute bottom-20 right-10 w-96 h-96 bg-purple-400/10 rounded-full blur-3xl"></div>
</div>
<div class="relative z-10 mx-auto max-w-4xl text-center flex flex-col items-center gap-6">
<div class="inline-flex items-center gap-2 rounded-full bg-primary/5 border border-primary/10 px-3 py-1 text-xs font-semibold text-primary uppercase tracking-wide">
<span class="material-symbols-outlined text-sm">rocket_launch</span>
Start Winning Today
</div>
<h1 class="text-4xl md:text-6xl font-black tracking-tight leading-tight bg-clip-text text-transparent bg-gradient-to-br from-slate-900 via-primary to-slate-900 dark:from-white dark:via-purple-300 dark:to-white">
Start Your Quest in <br class="hidden md:block"/> 4 Simple Steps
</h1>
<p class="text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-2xl font-normal leading-relaxed">
Join the ultimate quiz arena where knowledge pays off. We've streamlined the journey from registration to reward so you can focus on winning.
</p>
<div class="mt-4 flex flex-col sm:flex-row gap-4">
<button class="flex items-center justify-center gap-2 rounded-full bg-primary px-8 py-4 text-base font-bold text-white shadow-xl shadow-primary/25 hover:scale-105 hover:shadow-2xl hover:shadow-primary/40 transition-all duration-300">
Get Started Now
<span class="material-symbols-outlined">arrow_forward</span>
</button>
<button class="flex items-center justify-center gap-2 rounded-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-8 py-4 text-base font-bold text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-all duration-300">
<span class="material-symbols-outlined">play_circle</span>
Watch Tutorial
</button>
</div>
</div>
</section>
<!-- Steps Grid -->
<section class="px-4 pb-24 md:px-10 lg:px-40">
<div class="mx-auto max-w-7xl">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 relative">
<!-- Connector Line (Desktop Only) -->
<div class="hidden lg:block absolute top-12 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-primary/20 to-transparent -z-10"></div>
<!-- Step 1 -->
<div class="group relative flex flex-col gap-6 rounded-2xl bg-white dark:bg-slate-800/50 p-8 border border-slate-100 dark:border-slate-800 hover:border-primary/30 dark:hover:border-primary/30 hover:shadow-2xl hover:shadow-primary/5 transition-all duration-300">
<div class="flex items-center justify-between">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary font-bold text-xl ring-4 ring-white dark:ring-slate-900">01</div>
<span class="material-symbols-outlined text-slate-300 group-hover:text-primary transition-colors">person_add</span>
</div>
<div class="h-40 w-full rounded-2xl bg-gradient-to-br from-blue-50 to-purple-50 dark:from-slate-700 dark:to-slate-800 flex items-center justify-center overflow-hidden mb-2">
<img alt="Minimalist 3D abstract shapes representing digital registration" class="w-full h-full object-cover opacity-90 group-hover:scale-110 transition-transform duration-500 mix-blend-multiply dark:mix-blend-overlay" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCKRcU6I6bEehdPnRzKDqH5CBE1rWoeuJLkdSrmAwagROcWI_n79gVBSmDotGQ2FKQqv5FBs2rhohVZPyP_3NCIRM-qVZH04MiLnFAytZ0cvc3e-U5lV-VwyEun4nNJKLWx-eNzS46L3r0rmAtPZHgowZ_wP2rnwnjyAUj8qw26yBIhhimUXTD7teqoZDSdoiVzzI4qqi8VfNs-heT5BZknJGibcIXvYBTPA33DHkGKwD_DsMe6MrIeuvbfD1R26qyVVJ9MPb4M"/>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2 group-hover:text-primary transition-colors">Register</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed">
Create Your Profile. Sign up in seconds using email or social login to establish your contender identity.
</p>
</div>
</div>
<!-- Step 2 -->
<div class="group relative flex flex-col gap-6 rounded-2xl bg-white dark:bg-slate-800/50 p-8 border border-slate-100 dark:border-slate-800 hover:border-primary/30 dark:hover:border-primary/30 hover:shadow-2xl hover:shadow-primary/5 transition-all duration-300 delay-75">
<div class="flex items-center justify-between">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary font-bold text-xl ring-4 ring-white dark:ring-slate-900">02</div>
<span class="material-symbols-outlined text-slate-300 group-hover:text-primary transition-colors">payments</span>
</div>
<div class="h-40 w-full rounded-2xl bg-gradient-to-br from-purple-50 to-pink-50 dark:from-slate-700 dark:to-slate-800 flex items-center justify-center overflow-hidden mb-2">
<img alt="Minimalist abstract coins and wallet concept" class="w-full h-full object-cover opacity-90 group-hover:scale-110 transition-transform duration-500 mix-blend-multiply dark:mix-blend-overlay" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDZDcsMfcVqROjLu7RXxI-gAY6RnhnhLfN1HuL_bNx0PblHDcT7q56o8P5OtbqR6VY8uydwZicN_8PWcofuewOZYxX6J8SLsFtMe_I1kXmpgDXtp7FUQxJOt0X8xzsqfNZuvZzKSUiibb5CcMXTPT9iJ1zZW9yh3d1zpW_MJxgHz6QuZHC_WXJcSdLubmcSIV0WmldxDLaqLPPZqzI3aKoWufh3yAhHnnuFNDmKTuX2ftIyiY-wYmWB9xOfrC7qggZyvVawwfuq"/>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2 group-hover:text-primary transition-colors">Pay</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed">
Unlock the Arena. Purchase entry tickets securely to access premium high-stakes quizzes.
</p>
</div>
</div>
<!-- Step 3 -->
<div class="group relative flex flex-col gap-6 rounded-2xl bg-white dark:bg-slate-800/50 p-8 border border-slate-100 dark:border-slate-800 hover:border-primary/30 dark:hover:border-primary/30 hover:shadow-2xl hover:shadow-primary/5 transition-all duration-300 delay-150">
<div class="flex items-center justify-between">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary font-bold text-xl ring-4 ring-white dark:ring-slate-900">03</div>
<span class="material-symbols-outlined text-slate-300 group-hover:text-primary transition-colors">stadia_controller</span>
</div>
<div class="h-40 w-full rounded-2xl bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-slate-700 dark:to-slate-800 flex items-center justify-center overflow-hidden mb-2">
<img alt="Abstract gaming controller buttons in soft lighting" class="w-full h-full object-cover opacity-90 group-hover:scale-110 transition-transform duration-500 mix-blend-multiply dark:mix-blend-overlay" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCcbsKeC_1H7ItghPdPSjz4wEh6S3wtMJxqRbuQckW8isX564vTC4CP36wJ23-pS00kor3jJcBo0ORkQZA90z_pCUM5i0LveFt4jwSjXdFpPPnffoI1KXN2xBq4O7Q3WsMoOOIPiPdxgXOe8Obbdb-AcOUdxblNu-cOUcMS_RqLOBj7ubIZu6lrQ5EvNf1WqxA44ayzB7PJmN71i-VXKavzm01vFv6jmpZhX2OT9RZIuVwIebvjwJsxuU2dcVkIFa88gA7owxLB"/>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2 group-hover:text-primary transition-colors">Play</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed">
Test Your Knowledge. Compete in real-time against others to top the global leaderboard.
</p>
</div>
</div>
<!-- Step 4 -->
<div class="group relative flex flex-col gap-6 rounded-2xl bg-white dark:bg-slate-800/50 p-8 border border-slate-100 dark:border-slate-800 hover:border-primary/30 dark:hover:border-primary/30 hover:shadow-2xl hover:shadow-primary/5 transition-all duration-300 delay-200">
<div class="flex items-center justify-between">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary font-bold text-xl ring-4 ring-white dark:ring-slate-900">04</div>
<span class="material-symbols-outlined text-slate-300 group-hover:text-primary transition-colors">trophy</span>
</div>
<div class="h-40 w-full rounded-2xl bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-slate-700 dark:to-slate-800 flex items-center justify-center overflow-hidden mb-2">
<img alt="Golden abstract shapes representing victory and rewards" class="w-full h-full object-cover opacity-90 group-hover:scale-110 transition-transform duration-500 mix-blend-multiply dark:mix-blend-overlay" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAzENIo6SD-MVKHf3hyXri7Uer9Vp4r5Cuv8M7jmwLTimaHpcFhyfm60OwBGKXFTEmeOwMkQmE1_wEOiWbLPQhUw6xQllqvCQlQZS7L5gQWa1vREoXBbWwBPIe3Aa1QFkV2y_VdUmZ4B17IZiC4hIgaekmzziGlfanyoff7bzapJWXxIhKA15p93VxTyXfkleZ66wVo-7ek_bRiik1s4siAOb7feYK-1-XF-KtrKSKB7jjLtslNoZHcAdXcBuLD2dkDjI7mnTYh"/>
</div>
<div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2 group-hover:text-primary transition-colors">Win</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed">
Claim Your Rewards. Top scorers instantly win cash prizes, gift cards, and exclusive badges.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Trust / Security Section -->
<section class="bg-white dark:bg-slate-900 py-16 px-4 md:px-10 lg:px-40 border-y border-slate-100 dark:border-slate-800">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-10">
<div class="max-w-md">
<h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-3">Fair Play & Secure Payments</h3>
<p class="text-slate-500 dark:text-slate-400">
We use industry-standard encryption for all transactions and a proprietary anti-cheat system to ensure every victory is earned fairly.
</p>
</div>
<div class="flex flex-wrap items-center justify-center gap-8 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
<!-- Using material icons as placeholders for logos to keep it clean -->
<div class="flex flex-col items-center gap-2">
<span class="material-symbols-outlined text-4xl">verified_user</span>
<span class="text-xs font-semibold">SSL Secure</span>
</div>
<div class="flex flex-col items-center gap-2">
<span class="material-symbols-outlined text-4xl">lock</span>
<span class="text-xs font-semibold">Encrypted</span>
</div>
<div class="flex flex-col items-center gap-2">
<span class="material-symbols-outlined text-4xl">gavel</span>
<span class="text-xs font-semibold">Anti-Cheat</span>
</div>
<div class="flex flex-col items-center gap-2">
<span class="material-symbols-outlined text-4xl">payments</span>
<span class="text-xs font-semibold">Fast Payouts</span>
</div>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="relative px-4 py-24 md:px-10 lg:px-40 overflow-hidden">
<div class="mx-auto max-w-5xl rounded-3xl bg-slate-900 dark:bg-slate-800 text-white relative overflow-hidden shadow-2xl shadow-primary/20">
<!-- Background Pattern -->
<div class="absolute inset-0 opacity-20 bg-[radial-gradient(#7f13ec_1px,transparent_1px)] [background-size:16px_16px]"></div>
<div class="absolute -top-24 -right-24 w-64 h-64 bg-primary rounded-full blur-[100px] opacity-50"></div>
<div class="absolute -bottom-24 -left-24 w-64 h-64 bg-primary rounded-full blur-[100px] opacity-50"></div>
<div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-10 p-10 md:p-16">
<div class="flex flex-col gap-4 max-w-xl text-center md:text-left">
<h2 class="text-3xl md:text-4xl font-bold tracking-tight">Ready to dominate the leaderboard?</h2>
<p class="text-slate-300 text-lg">Join thousands of players winning daily prizes on QuizQuest. Your first game is on us!</p>
</div>
<div class="shrink-0">
<button class="group flex items-center justify-center gap-2 rounded-full bg-white px-8 py-4 text-base font-bold text-primary hover:bg-slate-100 transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-1">
Join QuizQuest Now
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
</button>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-background-dark py-12 px-4 md:px-10 lg:px-40">
<div class="max-w-7xl mx-auto flex flex-col items-center gap-8">
<div class="flex items-center gap-2 text-slate-900 dark:text-white">
<div class="size-6 text-primary">
<svg class="w-full h-full" fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M44 11.2727C44 14.0109 39.8386 16.3957 33.69 17.6364C39.8386 18.877 44 21.2618 44 24C44 26.7382 39.8386 29.123 33.69 30.3636C39.8386 31.6043 44 33.9891 44 36.7273C44 40.7439 35.0457 44 24 44C12.9543 44 4 40.7439 4 36.7273C4 33.9891 8.16144 31.6043 14.31 30.3636C8.16144 29.123 4 26.7382 4 24C4 21.2618 8.16144 18.877 14.31 17.6364C8.16144 16.3957 4 14.0109 4 11.2727C4 7.25611 12.9543 4 24 4C35.0457 4 44 7.25611 44 11.2727Z" fill="currentColor"></path>
</svg>
</div>
<span class="text-xl font-bold">QuizQuest</span>
</div>
<div class="flex flex-wrap justify-center 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>
<a class="hover:text-primary transition-colors" href="#">FAQ</a>
</div>
<div class="flex gap-6">
<a class="text-slate-400 hover:text-primary transition-colors" href="#">
<span class="material-symbols-outlined">public</span>
</a>
<a class="text-slate-400 hover:text-primary transition-colors" href="#">
<span class="material-symbols-outlined">alternate_email</span>
</a>
<a class="text-slate-400 hover:text-primary transition-colors" href="#">
<span class="material-symbols-outlined">forum</span>
</a>
</div>
<p class="text-center text-xs text-slate-400">© 2024 QuizQuest. All rights reserved.</p>
</div>
</footer>
</div>
</body></html>