<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Unlock Your Fortune</title>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#6366f1",
"brand-purple": "#5b13ec",
"brand-yellow": "#e2ff3b",
"background-dark": "#0a090d",
"surface-dark": "#131118",
"surface-highlight": "#1d1924",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style type="text/tailwindcss">
@layer base {
body {
@apply bg-background-dark text-slate-100 font-display antialiased;
}
}
.glow-purple {
box-shadow: 0 0 50px -10px rgba(91, 19, 236, 0.5);
}
.text-glow-yellow {
text-shadow: 0 0 15px rgba(226, 255, 59, 0.4);
}
.hero-gradient {
background: radial-gradient(circle at 70% 30%, rgba(91, 19, 236, 0.2) 0%, transparent 50%);
}
</style>
</head>
<body class="bg-background-dark">
<header class="fixed top-0 z-50 w-full border-b border-white/5 bg-background-dark/80 backdrop-blur-xl">
<div class="container mx-auto flex h-20 items-center justify-between px-6 lg:px-10">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-brand-purple text-white shadow-lg shadow-brand-purple/30">
<span class="material-symbols-outlined">stadia_controller</span>
</div>
<span class="text-xl font-bold tracking-tight text-white">QuizQuest</span>
</div>
<nav class="hidden items-center gap-8 md:flex">
<a class="text-sm font-semibold text-white hover:text-brand-yellow transition-colors" href="#">Home</a>
<a class="text-sm font-semibold text-slate-400 hover:text-white transition-colors" href="#">Prizes</a>
<a class="text-sm font-semibold text-slate-400 hover:text-white transition-colors" href="#">Leaderboard</a>
</nav>
<div class="flex items-center gap-6">
<a class="hidden text-sm font-bold text-white hover:text-brand-yellow md:block transition-colors" href="#">Login</a>
<button class="rounded-full bg-brand-purple px-6 py-2.5 text-sm font-bold text-white shadow-lg shadow-brand-purple/20 transition-all hover:scale-105 active:scale-95">
Join Now
</button>
</div>
</div>
</header>
<main class="pt-20">
<section class="hero-gradient relative overflow-hidden py-16 lg:py-28">
<div class="container mx-auto grid grid-cols-1 items-center gap-12 px-6 lg:grid-cols-2 lg:px-10">
<div class="relative z-10 flex flex-col items-start">
<div class="mb-6 flex items-center gap-2 rounded-full bg-brand-yellow/10 border border-brand-yellow/20 px-4 py-1.5">
<span class="relative flex h-2 w-2">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-yellow opacity-75"></span>
<span class="relative inline-flex h-2 w-2 rounded-full bg-brand-yellow"></span>
</span>
<span class="text-[10px] font-black uppercase tracking-widest text-brand-yellow">Live Quest Open</span>
</div>
<h1 class="text-5xl font-black leading-tight text-white md:text-7xl">
Unlock Your <br/>
<span class="text-brand-yellow text-glow-yellow italic">Fortune.</span> <br/>
Join the Quest.
</h1>
<p class="mt-6 max-w-lg text-lg text-slate-400 leading-relaxed">
Compete with thousands of players for massive prizes. Secure your spot in the next league now and turn your knowledge into wealth.
</p>
<div class="mt-10 flex flex-wrap items-center gap-6">
<button class="group flex items-center gap-4 rounded-full bg-white px-8 py-4 text-lg font-black text-black transition-all hover:bg-brand-yellow hover:scale-105">
Join the Quest <span class="rounded-full bg-brand-purple px-2 py-0.5 text-xs text-white">₹99</span>
<span class="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
</button>
<div class="flex flex-col">
<span class="text-[10px] font-bold uppercase tracking-widest text-slate-500">Entry Closes In</span>
<span class="text-2xl font-black text-white">00 : 14 : 59</span>
</div>
</div>
<div class="mt-8 flex items-center gap-6 text-slate-500">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-sm">verified_user</span>
<span class="text-xs font-semibold">Secure Payment</span>
</div>
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-sm">group</span>
<span class="text-xs font-semibold">10k+ Players</span>
</div>
</div>
</div>
<div class="relative">
<div class="glow-purple absolute inset-0 -z-10 rounded-full blur-[100px]"></div>
<div class="relative mx-auto max-w-md overflow-hidden rounded-[2.5rem] border border-white/10 bg-surface-dark p-6 shadow-2xl">
<div class="aspect-square overflow-hidden rounded-2xl bg-gradient-to-br from-brand-purple to-indigo-900 flex items-center justify-center p-8">
<div class="relative w-full h-full flex items-center justify-center">
<div class="absolute h-40 w-40 rounded-full bg-white/10 blur-2xl"></div>
<span class="material-symbols-outlined text-9xl text-white/90">smartphone</span>
</div>
</div>
<div class="mt-6 flex flex-col gap-4">
<div class="flex items-center justify-between">
<div>
<span class="rounded-full bg-brand-yellow px-3 py-1 text-[10px] font-black uppercase text-black">#1 Prize</span>
<h3 class="mt-2 text-2xl font-bold text-white">iPhone 15 Pro Max</h3>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="rounded-2xl bg-surface-highlight p-4 text-center">
<p class="text-[10px] font-bold uppercase text-slate-500">Prize Pool</p>
<p class="text-lg font-black text-brand-yellow">₹5 Lakhs</p>
</div>
<div class="rounded-2xl bg-surface-highlight p-4 text-center">
<p class="text-[10px] font-bold uppercase text-slate-500">Your Rank</p>
<p class="text-lg font-black text-white">#452</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-24 bg-surface-dark/30">
<div class="container mx-auto px-6 lg:px-10">
<div class="mb-16 text-center">
<h2 class="text-4xl font-black text-white md:text-5xl">How to Play & <span class="text-brand-purple">Win</span></h2>
<p class="mt-4 text-slate-400">Join the league of champions in 4 simple steps.</p>
</div>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
<div class="group relative flex flex-col items-center rounded-3xl bg-surface-dark border border-white/5 p-8 transition-all hover:border-brand-purple/50">
<div class="absolute -top-3 -right-3 flex h-10 w-10 items-center justify-center rounded-full bg-surface-highlight text-sm font-black text-slate-500 border border-white/5">1</div>
<div class="mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-brand-purple/10 text-brand-purple">
<span class="material-symbols-outlined text-3xl">person</span>
</div>
<h4 class="text-xl font-bold text-white">Register</h4>
<p class="mt-3 text-center text-sm leading-relaxed text-slate-400">Create your unique avatar profile and set up your gamer tag.</p>
</div>
<div class="group relative flex flex-col items-center rounded-3xl bg-surface-dark border border-white/5 p-8 transition-all hover:border-brand-purple/50">
<div class="absolute -top-3 -right-3 flex h-10 w-10 items-center justify-center rounded-full bg-surface-highlight text-sm font-black text-slate-500 border border-white/5">2</div>
<div class="mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-brand-purple/10 text-brand-purple">
<span class="material-symbols-outlined text-3xl">payments</span>
</div>
<h4 class="text-xl font-bold text-white">Pay Entry</h4>
<p class="mt-3 text-center text-sm leading-relaxed text-slate-400">Secure your spot in the arena with a small <span class="text-brand-yellow font-bold">₹99 fee</span>.</p>
</div>
<div class="group relative flex flex-col items-center rounded-3xl bg-surface-dark border border-white/5 p-8 transition-all hover:border-brand-purple/50">
<div class="absolute -top-3 -right-3 flex h-10 w-10 items-center justify-center rounded-full bg-surface-highlight text-sm font-black text-slate-500 border border-white/5">3</div>
<div class="mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-brand-purple/10 text-brand-purple">
<span class="material-symbols-outlined text-3xl">videogame_asset</span>
</div>
<h4 class="text-xl font-bold text-white">Play Quiz</h4>
<p class="mt-3 text-center text-sm leading-relaxed text-slate-400">Answer trivia questions fast to climb the live leaderboard.</p>
</div>
<div class="group relative flex flex-col items-center rounded-3xl bg-brand-yellow/5 border border-brand-yellow/20 p-8 transition-all hover:border-brand-yellow/50">
<div class="absolute -top-3 -right-3 flex h-10 w-10 items-center justify-center rounded-full bg-brand-yellow text-sm font-black text-black">4</div>
<div class="mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-brand-yellow/20 text-brand-yellow">
<span class="material-symbols-outlined text-3xl">emoji_events</span>
</div>
<h4 class="text-xl font-bold text-white">Win Big</h4>
<p class="mt-3 text-center text-sm leading-relaxed text-slate-400">Claim instant cash rewards, gadgets, and eternal glory.</p>
</div>
</div>
</div>
</section>
<section class="py-24">
<div class="container mx-auto px-6 lg:px-10">
<div class="relative overflow-hidden rounded-[3rem] bg-gradient-to-b from-surface-highlight to-background-dark p-12 text-center border border-white/5">
<div class="absolute inset-0 hero-gradient opacity-30"></div>
<div class="relative z-10">
<span class="text-xs font-black uppercase tracking-widest text-brand-yellow">Limited Time Offer</span>
<h2 class="mt-6 text-5xl font-black text-white md:text-6xl">Standard Entry Pass</h2>
<div class="mt-8 flex items-baseline justify-center gap-2">
<span class="text-6xl font-black text-white">₹99</span>
<span class="text-xl font-medium text-slate-500">/ quest</span>
</div>
<div class="mt-10 flex flex-wrap justify-center gap-4">
<div class="flex items-center gap-2 rounded-full bg-white/5 px-4 py-2 text-sm text-slate-300">
<span class="material-symbols-outlined text-emerald-400 text-sm">check_circle</span>
Instant Payouts
</div>
<div class="flex items-center gap-2 rounded-full bg-white/5 px-4 py-2 text-sm text-slate-300">
<span class="material-symbols-outlined text-emerald-400 text-sm">check_circle</span>
Global Rank
</div>
<div class="flex items-center gap-2 rounded-full bg-white/5 px-4 py-2 text-sm text-slate-300">
<span class="material-symbols-outlined text-emerald-400 text-sm">check_circle</span>
Anti-Cheat
</div>
</div>
<button class="mt-12 flex items-center gap-3 mx-auto rounded-full bg-brand-purple px-10 py-5 text-xl font-black text-white shadow-xl shadow-brand-purple/40 transition-all hover:scale-105 active:scale-95">
<span class="material-symbols-outlined">bolt</span>
Pay & Join Now
</button>
<p class="mt-8 text-xs text-slate-500">By joining, you agree to our Terms of Service. Entry fees are non-refundable once the quiz begins.</p>
</div>
</div>
</div>
</section>
<section class="border-y border-white/5 bg-surface-dark/20 py-12">
<div class="container mx-auto flex flex-wrap justify-center gap-12 px-6 lg:gap-24">
<div class="flex items-center gap-4 opacity-50 transition-opacity hover:opacity-100">
<span class="material-symbols-outlined text-4xl">lock</span>
<div class="flex flex-col">
<span class="text-sm font-bold text-white">SSL Encrypted</span>
<span class="text-[10px] uppercase tracking-wider text-slate-400">Secure Payments</span>
</div>
</div>
<div class="flex items-center gap-4 opacity-50 transition-opacity hover:opacity-100">
<span class="material-symbols-outlined text-4xl">support_agent</span>
<div class="flex flex-col">
<span class="text-sm font-bold text-white">24/7 Support</span>
<span class="text-[10px] uppercase tracking-wider text-slate-400">Always Online</span>
</div>
</div>
<div class="flex items-center gap-4 opacity-50 transition-opacity hover:opacity-100">
<span class="material-symbols-outlined text-4xl">verified</span>
<div class="flex flex-col">
<span class="text-sm font-bold text-white">Fair Play</span>
<span class="text-[10px] uppercase tracking-wider text-slate-400">Certified RNG</span>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-background-dark py-20 border-t border-white/5">
<div class="container mx-auto px-6 lg:px-10">
<div class="grid grid-cols-1 gap-12 md:grid-cols-4">
<div class="col-span-1 md:col-span-1">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-purple text-white">
<span class="material-symbols-outlined text-sm">stadia_controller</span>
</div>
<span class="text-lg font-bold tracking-tight text-white">QuizQuest</span>
</div>
<p class="mt-6 text-sm text-slate-500 leading-relaxed">The ultimate arena for quiz champions. Compete, climb the ranks, and win incredible prizes every single day.</p>
<div class="mt-8 flex gap-4">
<a class="flex h-10 w-10 items-center justify-center rounded-full bg-surface-highlight text-slate-400 transition-colors hover:bg-brand-purple hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">public</span>
</a>
<a class="flex h-10 w-10 items-center justify-center rounded-full bg-surface-highlight text-slate-400 transition-colors hover:bg-brand-purple hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">share</span>
</a>
<a class="flex h-10 w-10 items-center justify-center rounded-full bg-surface-highlight text-slate-400 transition-colors hover:bg-brand-purple hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">alternate_email</span>
</a>
</div>
</div>
<div>
<h5 class="text-sm font-bold uppercase tracking-widest text-white">Quick Links</h5>
<ul class="mt-6 flex flex-col gap-4 text-sm text-slate-500">
<li><a class="hover:text-brand-purple transition-colors" href="#">How it Works</a></li>
<li><a class="hover:text-brand-purple transition-colors" href="#">Daily Prizes</a></li>
<li><a class="hover:text-brand-purple transition-colors" href="#">Leaderboards</a></li>
<li><a class="hover:text-brand-purple transition-colors" href="#">Top Earners</a></li>
</ul>
</div>
<div>
<h5 class="text-sm font-bold uppercase tracking-widest text-white">Support</h5>
<ul class="mt-6 flex flex-col gap-4 text-sm text-slate-500">
<li><a class="hover:text-brand-purple transition-colors" href="#">Help Center</a></li>
<li><a class="hover:text-brand-purple transition-colors" href="#">Contact Us</a></li>
<li><a class="hover:text-brand-purple transition-colors" href="#">Rules & Regulations</a></li>
<li><a class="hover:text-brand-purple transition-colors" href="#">Responsible Gaming</a></li>
</ul>
</div>
<div>
<h5 class="text-sm font-bold uppercase tracking-widest text-white">Legal</h5>
<ul class="mt-6 flex flex-col gap-4 text-sm text-slate-500">
<li><a class="hover:text-brand-purple transition-colors" href="#">Privacy Policy</a></li>
<li><a class="hover:text-brand-purple transition-colors" href="#">Terms of Service</a></li>
<li><a class="hover:text-brand-purple transition-colors" href="#">Refund Policy</a></li>
<li><a class="hover:text-brand-purple transition-colors" href="#">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="mt-20 border-t border-white/5 pt-10 flex flex-col items-center justify-between gap-6 md:flex-row">
<p class="text-xs text-slate-600">© 2023 QuizQuest. All rights reserved.</p>
<div class="flex gap-8 text-xs font-medium text-slate-600">
<a class="hover:text-white" href="#">Privacy</a>
<a class="hover:text-white" href="#">Terms</a>
<a class="hover:text-white" href="#">Support</a>
</div>
</div>
</div>
</footer>
</body></html>