<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Mega-Quest | Coming Soon</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 id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#0d59f2",
"background-light": "#f5f6f8",
"background-dark": "#05070a",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Space Grotesk', sans-serif;
}
.electric-glow {
text-shadow: 0 0 20px rgba(13, 89, 242, 0.6), 0 0 40px rgba(13, 89, 242, 0.3);
}
.glass-panel {
background: rgba(13, 89, 242, 0.05);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.prize-blur {
filter: blur(40px) brightness(0.8);
}
.bg-energy {
background:
radial-gradient(circle at 20% 30%, rgba(13, 89, 242, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(13, 89, 242, 0.1) 0%, transparent 50%);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 selection:bg-primary/30 min-h-screen overflow-x-hidden font-display">
<!-- Background Decoration -->
<div class="fixed inset-0 z-0 pointer-events-none overflow-hidden">
<div class="absolute inset-0 bg-energy"></div>
<!-- Decorative "Sparks" using gradients -->
<div class="absolute top-1/4 left-1/4 w-1 h-1 bg-primary rounded-full blur-[1px] opacity-50 shadow-[0_0_10px_#0d59f2]"></div>
<div class="absolute top-1/2 right-1/3 w-2 h-2 bg-primary rounded-full blur-[2px] opacity-40 shadow-[0_0_15px_#0d59f2]"></div>
<div class="absolute bottom-1/4 right-1/4 w-1 h-1 bg-primary rounded-full blur-[1px] opacity-60 shadow-[0_0_12px_#0d59f2]"></div>
<div class="absolute top-1/3 right-10 w-32 h-32 bg-primary/10 rounded-full blur-[80px]"></div>
<div class="absolute bottom-1/3 left-10 w-48 h-48 bg-primary/5 rounded-full blur-[100px]"></div>
</div>
<div class="relative z-10 flex flex-col min-h-screen">
<!-- Navigation -->
<header class="flex items-center justify-between px-6 lg:px-20 py-8">
<div class="flex items-center gap-3">
<div class="size-10 bg-primary rounded-lg flex items-center justify-center text-white shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-2xl">bolt</span>
</div>
<h1 class="text-2xl font-bold tracking-tight uppercase">Mega-Quest</h1>
</div>
<div class="hidden md:flex items-center gap-8">
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">The Quest</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Prizes</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Rules</a>
<button class="bg-primary text-white px-6 py-2.5 rounded-full text-sm font-bold hover:brightness-110 transition-all shadow-lg shadow-primary/25">
Connect Wallet
</button>
</div>
</header>
<main class="flex-1 flex flex-col items-center justify-center px-6 py-12 max-w-7xl mx-auto w-full text-center">
<!-- Hero Heading -->
<div class="mb-6 space-y-4">
<span class="inline-block px-4 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold tracking-widest uppercase">
Early Access Phase
</span>
<h2 class="text-5xl md:text-7xl lg:text-8xl font-black tracking-tighter electric-glow uppercase leading-[0.9]">
The Quest Of A <br/>Lifetime Is Coming
</h2>
<p class="text-slate-400 max-w-2xl mx-auto text-lg md:text-xl font-light">
Join over <span class="text-white font-semibold">50,000+ gamers</span> competing for glory.
The ultimate high-stakes digital arena opens its doors soon.
</p>
</div>
<!-- Massive Countdown -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8 my-12 w-full max-w-4xl">
<div class="flex flex-col gap-2">
<div class="glass-panel rounded-xl py-8 md:py-12 flex flex-col items-center justify-center border-primary/20 group hover:border-primary/50 transition-colors">
<span class="text-5xl md:text-7xl font-bold text-white tracking-tighter">05</span>
</div>
<span class="text-xs uppercase tracking-widest text-slate-500 font-bold">Days</span>
</div>
<div class="flex flex-col gap-2">
<div class="glass-panel rounded-xl py-8 md:py-12 flex flex-col items-center justify-center border-primary/20 group hover:border-primary/50 transition-colors">
<span class="text-5xl md:text-7xl font-bold text-white tracking-tighter">12</span>
</div>
<span class="text-xs uppercase tracking-widest text-slate-500 font-bold">Hours</span>
</div>
<div class="flex flex-col gap-2">
<div class="glass-panel rounded-xl py-8 md:py-12 flex flex-col items-center justify-center border-primary/20 group hover:border-primary/50 transition-colors">
<span class="text-5xl md:text-7xl font-bold text-white tracking-tighter">44</span>
</div>
<span class="text-xs uppercase tracking-widest text-slate-500 font-bold">Minutes</span>
</div>
<div class="flex flex-col gap-2">
<div class="glass-panel rounded-xl py-8 md:py-12 flex flex-col items-center justify-center border-primary/20 group hover:border-primary/50 transition-colors">
<span class="text-5xl md:text-7xl font-bold text-primary tracking-tighter animate-pulse">03</span>
</div>
<span class="text-xs uppercase tracking-widest text-slate-500 font-bold">Seconds</span>
</div>
</div>
<!-- Email Capture -->
<div class="w-full max-w-lg mb-20">
<form class="relative group">
<div class="flex items-center bg-slate-900/50 backdrop-blur-md border border-slate-700 rounded-full p-2 focus-within:border-primary transition-all ring-offset-background-dark focus-within:ring-2 ring-primary/20">
<span class="material-symbols-outlined ml-4 text-slate-500">mail</span>
<input class="bg-transparent border-none focus:ring-0 text-white flex-1 px-4 placeholder:text-slate-500" placeholder="Enter your email for early access" type="email"/>
<button class="bg-primary text-white px-8 py-3 rounded-full font-bold text-sm tracking-wide uppercase hover:scale-[1.02] active:scale-95 transition-all">
Notify Me
</button>
</div>
</form>
<p class="mt-4 text-slate-500 text-sm">Be the first to know when the gates open. Limited slots available.</p>
</div>
<!-- Prize Reveal Section -->
<div class="w-full max-w-5xl">
<div class="relative overflow-hidden rounded-xl border border-white/10 glass-panel p-8 md:p-12 flex flex-col md:flex-row items-center gap-12 text-left">
<div class="flex-1 space-y-4">
<div class="flex items-center gap-2 text-primary font-bold uppercase tracking-tighter text-sm">
<span class="material-symbols-outlined text-base">military_tech</span>
Mystery Prize Revealed Soon
</div>
<h3 class="text-3xl md:text-4xl font-bold leading-tight">Win the ultimate tech setup or a performance supercar.</h3>
<p class="text-slate-400">The grand prize pool exceeds $150,000 in value. The higher your rank, the bigger the reward.</p>
<div class="pt-4">
<button class="flex items-center gap-2 text-white font-bold hover:text-primary transition-colors">
Learn about the prize pool
<span class="material-symbols-outlined">trending_flat</span>
</button>
</div>
</div>
<div class="relative w-full md:w-1/2 aspect-video group">
<!-- Blurred Prize Preview -->
<div class="absolute inset-0 prize-blur rounded-lg overflow-hidden flex items-center justify-center">
<img class="w-full h-full object-cover" data-alt="A blurred futuristic sports car in a neon lit room" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDEexhLaQlTpaFIqXFQV9eF93B5sfxJRDw4gsiDCFNmdTLUcV0BszlJgPUI4pHf10ON6gHAlmxItTiyxM5DvmAk9Y99AFFA4cJ0lm8Jx05j1fzh1FcKj0i2yFI1Oe7O0TeFupjYtFrsSXL_0alWQzLUWgJo6qtZW-l1A-UCcMK1tKBph-TCtn7qpop7p2uqmSTNzLvplNnsxrfRcA6uhWxKKE1U8NsFJkViY6ytT6Pow-9iD1M1rg6T8NsmrMXXFKmpX0tD8W5dEyri"/>
</div>
<div class="absolute inset-0 flex flex-col items-center justify-center">
<span class="material-symbols-outlined text-6xl text-white/20">lock</span>
<span class="mt-4 px-3 py-1 bg-black/60 rounded text-[10px] uppercase tracking-widest font-bold backdrop-blur-sm border border-white/10">Classified</span>
</div>
</div>
</div>
</div>
<!-- Social Share Hype Bar -->
<div class="mt-24 w-full">
<h4 class="text-slate-500 text-sm uppercase tracking-widest font-bold mb-8">Share the quest to unlock perks</h4>
<div class="flex flex-wrap justify-center gap-6">
<button class="flex items-center gap-3 glass-panel px-6 py-3 rounded-full hover:bg-white/5 transition-all group">
<span class="material-symbols-outlined text-primary">share</span>
<span class="font-bold text-sm">X / Twitter</span>
</button>
<button class="flex items-center gap-3 glass-panel px-6 py-3 rounded-full hover:bg-white/5 transition-all group">
<span class="material-symbols-outlined text-primary">group</span>
<span class="font-bold text-sm">Discord</span>
</button>
<button class="flex items-center gap-3 glass-panel px-6 py-3 rounded-full hover:bg-white/5 transition-all group">
<span class="material-symbols-outlined text-primary">send</span>
<span class="font-bold text-sm">Telegram</span>
</button>
</div>
</div>
</main>
<!-- Footer -->
<footer class="mt-auto border-t border-slate-900 py-10 px-6 lg:px-20">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
<div class="flex items-center gap-3 opacity-50 grayscale">
<div class="size-6 bg-slate-700 rounded-sm"></div>
<span class="text-sm font-bold tracking-tight uppercase">Mega-Quest Labs</span>
</div>
<div class="flex gap-8 text-xs text-slate-500 uppercase tracking-widest font-bold">
<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="#">Partner Program</a>
<a class="hover:text-primary transition-colors" href="#">Support</a>
</div>
<p class="text-slate-600 text-[10px] uppercase tracking-widest">
© 2024 Mega-Quest Arena. All rights reserved.
</p>
</div>
</footer>
</div>
</body></html>