<!DOCTYPE html>
<html 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" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#6D28D9", // Deep purple main button color
accent: "#FACC15", // Neon yellow for highlights
secondary: "#4C1D95", // Darker purple for cards
"background-light": "#F3F4F6", // Light grey for light mode (though design is dark heavy)
"background-dark": "#0B0216", // Very dark purple/black for background
"surface-dark": "#17082E", // Slightly lighter dark for cards
"surface-light": "#FFFFFF",
"glow-purple": "#8B5CF6",
},
fontFamily: {
sans: ['Outfit', 'sans-serif'],
display: ['Space Grotesk', 'sans-serif'],
},
borderRadius: {
DEFAULT: "0.75rem",
'xl': "1rem",
'2xl': "1.5rem",
'3xl': "2rem",
},
backgroundImage: {
'hero-gradient': 'linear-gradient(135deg, #1e0938 0%, #0B0216 100%)',
'card-gradient': 'linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%)',
'button-gradient': 'linear-gradient(90deg, #6D28D9 0%, #4C1D95 100%)',
'gold-gradient': 'linear-gradient(135deg, #FACC15 0%, #EAB308 100%)',
}
},
},
};
</script>
<style>.glow-text {
text-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}
.glow-box {
box-shadow: 0 0 40px -10px rgba(109, 40, 217, 0.3);
}
.yellow-highlight {
color: #FACC15;
text-shadow: 0 0 15px rgba(250, 204, 21, 0.4);
}.glass {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-white font-sans antialiased transition-colors duration-300">
<nav class="fixed w-full z-50 top-0 left-0 border-b border-white/5 bg-background-light/80 dark:bg-[#0B0216]/80 backdrop-blur-md">
<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-shrink-0 flex items-center gap-2 cursor-pointer">
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white">
<span class="material-icons-round">sports_esports</span>
</div>
<span class="font-display font-bold text-xl tracking-wide dark:text-white text-gray-900">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>
</div>
</div>
<div class="hidden md:flex items-center gap-6">
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white text-sm font-medium transition-colors" href="#">Login</a>
<button class="bg-primary hover:bg-violet-700 text-white px-6 py-2.5 rounded-full text-sm font-semibold shadow-lg shadow-primary/30 transition-all transform hover:scale-105">
Join Now
</button>
</div>
<div class="-mr-2 flex md:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-white/10 focus:outline-none" type="button">
<span class="sr-only">Open main menu</span>
<span class="material-icons-round">menu</span>
</button>
</div>
</div>
</div>
</nav>
<section class="relative pt-32 pb-20 lg:pt-40 lg:pb-32 overflow-hidden">
<div class="absolute top-0 right-0 -mr-20 -mt-20 w-[600px] h-[600px] bg-primary/20 rounded-full blur-[120px] pointer-events-none"></div>
<div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-[500px] h-[500px] bg-blue-600/10 rounded-full blur-[100px] pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-8 items-center">
<div class="space-y-8">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-500/10 border border-yellow-500/20">
<span class="w-2 h-2 rounded-full bg-yellow-400 animate-pulse"></span>
<span class="text-xs font-bold tracking-wider text-yellow-400 uppercase">Live Quest Open</span>
</div>
<h1 class="text-5xl lg:text-7xl font-display font-bold leading-tight dark:text-white text-gray-900">
Unlock Your <br/>
<span class="yellow-highlight">Fortune.</span><br/>
Join the Quest.
</h1>
<p class="text-lg text-gray-600 dark:text-gray-400 max-w-lg leading-relaxed">
Compete with thousands of players for massive prizes. Secure your spot in the next league now.
</p>
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-8">
<button class="group relative inline-flex items-center justify-between gap-4 bg-white text-gray-900 pl-6 pr-2 py-2 rounded-full font-bold text-lg hover:shadow-[0_0_30px_rgba(255,255,255,0.3)] transition-all transform hover:-translate-y-1">
<span>Join the Quest</span>
<span class="bg-primary text-white text-xs px-2 py-1 rounded-md">₹99</span>
<span class="w-10 h-10 rounded-full border border-gray-200 flex items-center justify-center group-hover:bg-gray-100 transition-colors">
<span class="material-icons-round">arrow_forward</span>
</span>
</button>
<div class="text-left">
<p class="text-xs font-semibold text-gray-500 dark:text-gray-500 uppercase tracking-widest mb-1">Entry Closes In</p>
<div class="font-mono text-2xl font-bold dark:text-white text-gray-900 tracking-wider">
00 : 14 : 59
</div>
</div>
</div>
<div class="flex items-center gap-6 text-xs font-medium text-gray-500 dark:text-gray-400 pt-4">
<div class="flex items-center gap-2">
<span class="material-icons-round text-sm">verified_user</span>
Secure Payment
</div>
<div class="flex items-center gap-2">
<span class="material-icons-round text-sm">groups</span>
10k+ Players
</div>
</div>
</div>
<div class="relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-primary to-blue-600 rounded-3xl blur opacity-30 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
<div class="relative bg-surface-dark/90 dark:bg-[#120524] border border-white/10 rounded-3xl p-6 shadow-2xl overflow-hidden">
<div class="relative h-[360px] w-full rounded-2xl bg-gradient-to-b from-[#4C1D95] to-[#2E1065] overflow-hidden flex items-center justify-center mb-6">
<div class="absolute top-4 right-4 w-4 h-4 bg-white/20 rounded-full blur-[1px]"></div>
<div class="absolute top-20 left-10 w-6 h-6 bg-white/10 rounded-full blur-[2px]"></div>
<div class="relative w-48 h-48 rounded-full bg-gradient-to-br from-purple-400 to-indigo-900 shadow-[0_20px_50px_rgba(0,0,0,0.5)] flex items-center justify-center ring-1 ring-white/20">
<div class="absolute inset-0 rounded-full bg-gradient-to-t from-black/40 to-transparent"></div>
<div class="w-full h-full rounded-full bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-purple-200 via-transparent to-transparent opacity-60"></div>
</div>
<div class="absolute bottom-4 left-4 z-10">
<div class="bg-yellow-400 text-black text-xs font-bold px-3 py-1 rounded-full mb-2 inline-block">#1 Prize</div>
<h3 class="text-2xl font-bold text-white">iPhone 15 Pro Max</h3>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-white/5 rounded-xl p-3 text-center border border-white/5">
<p class="text-yellow-400 font-bold text-lg">₹5 Lakhs</p>
<p class="text-[10px] uppercase tracking-wider text-gray-400">Prize Pool</p>
</div>
<div class="bg-white/5 rounded-xl p-3 text-center border border-white/5">
<p class="text-white font-bold text-lg">#452</p>
<p class="text-[10px] uppercase tracking-wider text-gray-400">Your Rank</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-20 bg-background-light dark:bg-background-dark relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-display font-bold dark:text-white text-gray-900 mb-4">
How to Play & <span class="text-primary glow-text">Win</span>
</h2>
<p class="text-gray-600 dark:text-gray-400">Join the league of champions in 4 simple steps.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="relative group bg-white dark:bg-surface-dark border border-gray-200 dark:border-white/5 rounded-2xl p-6 hover:border-primary/50 transition-colors duration-300">
<div class="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-gray-800 dark:bg-black text-white dark:text-gray-400 border border-gray-700 flex items-center justify-center text-xs font-bold z-10">1</div>
<div class="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform duration-300">
<span class="material-icons-round">account_circle</span>
</div>
<h3 class="text-xl font-bold dark:text-white text-gray-900 mb-2">Register</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
Create your unique avatar profile and set up your gamer tag.
</p>
</div>
<div class="relative group bg-white dark:bg-surface-dark border border-gray-200 dark:border-white/5 rounded-2xl p-6 hover:border-primary/50 transition-colors duration-300">
<div class="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-gray-800 dark:bg-black text-white dark:text-gray-400 border border-gray-700 flex items-center justify-center text-xs font-bold z-10">2</div>
<div class="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center text-blue-500 mb-6 group-hover:scale-110 transition-transform duration-300">
<span class="material-icons-round">account_balance_wallet</span>
</div>
<h3 class="text-xl font-bold dark:text-white text-gray-900 mb-2">Pay Entry</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
Secure your spot in the arena with a small <span class="font-bold dark:text-white text-gray-900">₹99 fee</span>.
</p>
</div>
<div class="relative group bg-white dark:bg-surface-dark border border-gray-200 dark:border-white/5 rounded-2xl p-6 hover:border-primary/50 transition-colors duration-300">
<div class="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-gray-800 dark:bg-black text-white dark:text-gray-400 border border-gray-700 flex items-center justify-center text-xs font-bold z-10">3</div>
<div class="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center text-purple-500 mb-6 group-hover:scale-110 transition-transform duration-300">
<span class="material-icons-round">sports_esports</span>
</div>
<h3 class="text-xl font-bold dark:text-white text-gray-900 mb-2">Play Quiz</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
Answer trivia questions fast to climb the live leaderboard.
</p>
</div>
<div class="relative group border border-yellow-500/30 bg-gradient-to-br from-yellow-900/10 to-transparent rounded-2xl p-6 hover:border-yellow-500/60 transition-colors duration-300">
<div class="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-yellow-500 text-black border border-yellow-400 flex items-center justify-center text-xs font-bold z-10 shadow-lg shadow-yellow-500/20">4</div>
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center text-black mb-6 group-hover:scale-110 transition-transform duration-300 shadow-lg shadow-yellow-500/20">
<span class="material-icons-round">emoji_events</span>
</div>
<h3 class="text-xl font-bold dark:text-white text-gray-900 mb-2">Win Big</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
Claim instant cash rewards, gadgets, and eternal glory.
</p>
</div>
</div>
</div>
</section>
<section class="py-20 relative">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="relative bg-surface-dark dark:bg-[#120524] rounded-[2.5rem] p-1 overflow-hidden glow-box">
<div class="absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-white/5 pointer-events-none rounded-[2.5rem]"></div>
<div class="relative bg-surface-dark dark:bg-[#120524] rounded-[2.25rem] px-8 py-16 md:p-16 text-center border border-white/5">
<div class="mb-4 inline-block">
<span class="text-yellow-400 font-bold tracking-widest text-xs uppercase mb-2 block">Limited Time Offer</span>
</div>
<h2 class="text-4xl md:text-5xl font-display font-bold text-white mb-6">
Standard Entry Pass
</h2>
<div class="flex items-baseline justify-center gap-2 mb-10">
<span class="text-6xl md:text-7xl font-bold text-white">₹99</span>
<span class="text-xl text-gray-400 font-medium">/ quest</span>
</div>
<div class="flex flex-wrap justify-center gap-4 mb-12">
<div class="flex items-center gap-2 bg-white/5 px-4 py-2 rounded-full border border-white/5">
<span class="material-icons-round text-green-400 text-sm">check_circle</span>
<span class="text-sm text-gray-300">Instant Payouts</span>
</div>
<div class="flex items-center gap-2 bg-white/5 px-4 py-2 rounded-full border border-white/5">
<span class="material-icons-round text-green-400 text-sm">check_circle</span>
<span class="text-sm text-gray-300">Global Rank</span>
</div>
<div class="flex items-center gap-2 bg-white/5 px-4 py-2 rounded-full border border-white/5">
<span class="material-icons-round text-green-400 text-sm">check_circle</span>
<span class="text-sm text-gray-300">Anti-Cheat</span>
</div>
</div>
<button class="w-full md:w-auto min-w-[300px] bg-primary hover:bg-violet-600 text-white text-lg font-bold py-4 px-8 rounded-full shadow-[0_0_40px_-10px_rgba(109,40,217,0.5)] transition-all transform hover:scale-105 flex items-center justify-center gap-3 mx-auto">
<span class="material-icons-round">bolt</span>
Pay & Join Now
</button>
<p class="mt-8 text-xs text-gray-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>
</section>
<footer class="bg-black py-12 border-t border-white/5">
<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-round text-gray-500">sports_esports</span>
<span class="text-gray-500 font-medium text-sm">QuizQuest © 2023</span>
</div>
<div class="flex items-center gap-8">
<a class="text-gray-500 hover:text-white text-sm transition-colors" href="#">Privacy</a>
<a class="text-gray-500 hover:text-white text-sm transition-colors" href="#">Terms</a>
<a class="text-gray-500 hover:text-white text-sm transition-colors" href="#">Support</a>
</div>
</div>
</div>
</footer>
<script>
// Simple script to handle dark mode toggle if needed (though UI is heavily dark by default)
// Currently forced to user preference or system preference via tailwind class strategy
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
</script>
</body></html>