<!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 - About the Realm</title>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans: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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#6D28D9",
"accent-gold": "#FACC15",
"background-dark": "#0B041C",
"surface-dark": "#160E2A",
"surface-highlight": "#241A3D",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style type="text/tailwindcss">
:root {
--primary-glow: rgba(109, 40, 217, 0.5);
--gold-glow: rgba(250, 204, 21, 0.3);
}
body {
font-family: 'Spline Sans', sans-serif;
background-color: #0B041C;
}
.text-glow-purple {
text-shadow: 0 0 20px var(--primary-glow);
}
.text-glow-gold {
text-shadow: 0 0 15px var(--gold-glow);
}
.glass-card {
background: rgba(36, 26, 61, 0.4);
backdrop-filter: blur(12px);
border: 1px border rgba(255, 255, 255, 0.05);
}
.neon-line {
background: linear-gradient(180deg, transparent, #6D28D9, #FACC15, #6D28D9, transparent);
box-shadow: 0 0 15px #6D28D9;
}
</style>
</head>
<body class="bg-background-dark text-slate-100 antialiased selection:bg-primary selection:text-white">
<nav class="fixed top-0 z-50 w-full border-b border-white/5 bg-background-dark/80 px-6 py-4 backdrop-blur-xl lg:px-20">
<div class="mx-auto flex max-w-7xl items-center justify-between">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white shadow-[0_0_20px_rgba(109,40,217,0.5)]">
<span class="material-symbols-outlined">stadia_controller</span>
</div>
<span class="text-xl font-black tracking-tight text-white uppercase italic">QuizQuest</span>
</div>
<div class="hidden items-center gap-8 md:flex">
<a class="text-sm font-semibold text-slate-400 hover:text-white 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>
<a class="text-sm font-bold text-white" href="#">About the Realm</a>
</div>
<div class="flex items-center gap-4">
<a class="text-sm font-bold text-white" href="#">Login</a>
<button class="rounded-full bg-primary px-6 py-2.5 text-sm font-bold text-white shadow-[0_0_15px_rgba(109,40,217,0.4)] transition-all hover:scale-105 active:scale-95">Join Now</button>
</div>
</div>
</nav>
<main class="relative pt-32">
<section class="relative mx-auto max-w-7xl px-6 lg:px-20 mb-32">
<div class="absolute -top-40 -left-40 h-96 w-96 rounded-full bg-primary/20 blur-[120px]"></div>
<div class="text-center">
<div class="inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-1.5 mb-6">
<span class="material-symbols-outlined text-[18px] text-accent-gold">history_edu</span>
<span class="text-xs font-bold uppercase tracking-widest text-primary">The Genesis</span>
</div>
<h1 class="mx-auto max-w-4xl text-5xl font-black leading-tight text-white md:text-7xl">
Forging a New <span class="text-accent-gold italic">Era</span> of <span class="text-primary text-glow-purple">Knowledge.</span>
</h1>
<p class="mx-auto mt-8 max-w-2xl text-lg text-slate-400 leading-relaxed">
QuizQuest wasn't just built; it was summoned. We're on a mission to transform the mundane into the extraordinary through the power of gamified competition.
</p>
</div>
</section>
<section class="relative mx-auto max-w-7xl px-6 lg:px-20 mb-40">
<div class="grid grid-cols-1 gap-12 lg:grid-cols-2 items-center">
<div class="relative rounded-2xl overflow-hidden aspect-video border border-white/10 group">
<img alt="Portal Visual" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzViL4lc0jczPZTmPDaDclgDRrxY-CoEIhF3LrBitMVCMLnouJJA--yIsKtsNPGtyE4LuMlV4PivDdBDmhCWNkAPTwNpqZHpr1VrBXiZOIQLMV0tqcbN5rlhT8PNPhuitdvbjjJ__KSKmqFbL6C2lgx2_ML9AOeX7zoh0HyaInm8BK6ktedzykYbw63mLopcHpNBH3DhZY7GvRiCGp3eF8zx4jWMXr9ac6huaPlWFvpnlBfg6kuKr1_BJAeuC6YEIKGKuRym9DR1lN"/>
<div class="absolute inset-0 bg-gradient-to-t from-background-dark/80 to-transparent"></div>
<div class="absolute bottom-6 left-6">
<span class="text-xs font-bold text-accent-gold uppercase tracking-[0.2em]">The Core Protocol</span>
</div>
</div>
<div class="space-y-6">
<h2 class="text-4xl font-bold text-white">To Gamify Knowledge</h2>
<p class="text-slate-400 text-lg leading-relaxed">
We believe that learning and competition are the ultimate fuels for human potential. Our mission is to build the world's most immersive quiz portal, where every correct answer brings you closer to legendary status and real-world rewards.
</p>
<div class="grid grid-cols-2 gap-4 pt-4">
<div class="p-4 rounded-xl glass-card border-l-4 border-primary">
<h4 class="font-bold text-white mb-1">Play</h4>
<p class="text-xs text-slate-400">High-stakes challenges across all realms of trivia.</p>
</div>
<div class="p-4 rounded-xl glass-card border-l-4 border-accent-gold">
<h4 class="font-bold text-white mb-1">Earn</h4>
<p class="text-xs text-slate-400">Unlock cash prizes and legendary gear for your profile.</p>
</div>
</div>
</div>
</div>
</section>
<section class="relative mx-auto max-w-7xl px-6 lg:px-20 mb-40">
<div class="text-center mb-20">
<h2 class="text-4xl font-black text-white uppercase italic tracking-tighter">Chronicles of the Realm</h2>
<div class="mt-2 h-1 w-24 bg-primary mx-auto"></div>
</div>
<div class="relative flex flex-col items-center">
<div class="absolute left-1/2 h-full w-1 -translate-x-1/2 neon-line opacity-50"></div>
<div class="relative mb-24 flex w-full flex-col items-center justify-center gap-8 md:flex-row md:justify-start">
<div class="z-10 flex h-14 w-14 items-center justify-center rounded-full bg-surface-dark border-4 border-primary text-white md:absolute md:left-1/2 md:-translate-x-1/2">
<span class="material-symbols-outlined">rocket_launch</span>
</div>
<div class="glass-card ml-0 w-full max-w-md rounded-2xl p-8 border border-primary/20 transition-all hover:-translate-y-2 md:mr-auto">
<span class="text-xs font-bold text-primary uppercase">Jan 2023</span>
<h3 class="mt-2 text-2xl font-bold text-white">The Big Bang</h3>
<p class="mt-2 text-sm text-slate-400 leading-relaxed">The QuizQuest portal officially went live, welcoming the first 1,000 pioneers to the arena.</p>
</div>
</div>
<div class="relative mb-24 flex w-full flex-col items-center justify-center gap-8 md:flex-row md:justify-end">
<div class="z-10 flex h-14 w-14 items-center justify-center rounded-full bg-surface-dark border-4 border-accent-gold text-white md:absolute md:left-1/2 md:-translate-x-1/2">
<span class="material-symbols-outlined">payments</span>
</div>
<div class="glass-card mr-0 w-full max-w-md rounded-2xl p-8 border border-accent-gold/20 transition-all hover:-translate-y-2 md:ml-auto">
<span class="text-xs font-bold text-accent-gold uppercase">June 2023</span>
<h3 class="mt-2 text-2xl font-bold text-white">$100k in Payouts</h3>
<p class="mt-2 text-sm text-slate-400 leading-relaxed">A major milestone reached! We distributed over $100,000 in cash prizes to our top-ranking champions.</p>
</div>
</div>
<div class="relative mb-24 flex w-full flex-col items-center justify-center gap-8 md:flex-row md:justify-start">
<div class="z-10 flex h-14 w-14 items-center justify-center rounded-full bg-surface-dark border-4 border-purple-400 text-white md:absolute md:left-1/2 md:-translate-x-1/2">
<span class="material-symbols-outlined">groups</span>
</div>
<div class="glass-card ml-0 w-full max-w-md rounded-2xl p-8 border border-purple-400/20 transition-all hover:-translate-y-2 md:mr-auto">
<span class="text-xs font-bold text-purple-400 uppercase">Oct 2023</span>
<h3 class="mt-2 text-2xl font-bold text-white">50k Active Players</h3>
<p class="mt-2 text-sm text-slate-400 leading-relaxed">The community exploded as 50,000 monthly active users joined the quest for knowledge.</p>
</div>
</div>
</div>
</section>
<section class="relative mx-auto max-w-7xl px-6 lg:px-20 mb-40">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-white">The Council of Founders</h2>
<p class="mt-4 text-slate-400">The visionaries behind the quest.</p>
</div>
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
<div class="group flex flex-col items-center text-center">
<div class="relative mb-6 h-40 w-40 overflow-hidden rounded-full border-4 border-primary/20 p-1 transition-all group-hover:border-primary group-hover:shadow-[0_0_30px_rgba(109,40,217,0.4)]">
<img alt="Avatar" class="h-full w-full rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAspyNd1K0WlTL9T2hBBlxZ_V1PLtG9Bl1gn7jESEVPOzg5iAZZR9_tBf2nY89WyNBbYoqNnr7wgL97jmY0CwSmQxIRyitYqI13_YqsHvv3-cVzAXJbZTpJ7YG9VH5jtMJDh0kzmqdbqJDJvACnpl2qDhQiNwaaeuyCuf6GAJjQB109IkdWrh3c_XcfSrD4XHb5FWGPFhWqIV2TCJxFd1g_8KsisFsTd4S55IyvuQWMSPv42uFB7B3eH8BvDB71HoZYLy23kFifLdWl"/>
</div>
<h3 class="text-xl font-bold text-white">Alex "Viper" Rex</h3>
<p class="text-xs font-bold text-primary uppercase tracking-widest">Grand Architect</p>
</div>
<div class="group flex flex-col items-center text-center">
<div class="relative mb-6 h-40 w-40 overflow-hidden rounded-full border-4 border-accent-gold/20 p-1 transition-all group-hover:border-accent-gold group-hover:shadow-[0_0_30px_rgba(250,204,21,0.4)]">
<img alt="Avatar" class="h-full w-full rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6RuLCmWb95hgO5Is3hiMS0_FVI_JLOq3mJAUXYg7uKBbIPBTmaoF9WxMBSqqQt1cHoRoJZvrY_BVIZIMURAhdyK3rtci_Be7NXoI67-fYV-BXCAZbz8OChqnwnixiAWA6hhV9SaY_wiFaU-hEmkJ5Vrk7ve6y2qCC-ldXdD66bX0P0EMbeTgrg1rHVDexU_orguvgpPp2saemcwl9E3GDtoVAskruFuVhKbnSbqsG1soXQW6rubBXx5qEJx9b1NXaOJA9AvrF3voZ"/>
</div>
<h3 class="text-xl font-bold text-white">Maya "Ghost" Lin</h3>
<p class="text-xs font-bold text-accent-gold uppercase tracking-widest">Master of UX</p>
</div>
<div class="group flex flex-col items-center text-center">
<div class="relative mb-6 h-40 w-40 overflow-hidden rounded-full border-4 border-purple-400/20 p-1 transition-all group-hover:border-purple-400 group-hover:shadow-[0_0_30px_rgba(192,132,252,0.4)]">
<img alt="Avatar" class="h-full w-full rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB4BvJeSkFEj5nLJuhlyXRzb7wTEAaLOnCtRiqE94WD36FRVEKBCDFLyVWOIPVSt3Ev85PNh-Y8jNk-6RgPQjLsE4QFzz0744_biTKt5smk1tSDtuhHxj9OJJqeEaJAn_Pxv5de_ipngAatw1o89PbZqS3p-raYQi4mzkZp1ubYCALYdTl1MrZ5o7wHUuujeOzm_dSnAGJ6zNJV-YUoox2G7THWRLAEsN49znJscTyiWCbUAJLt0KpeneJvqebNPT57eYO55h38JhJX"/>
</div>
<h3 class="text-xl font-bold text-white">Jace "Matrix" Chen</h3>
<p class="text-xs font-bold text-purple-400 uppercase tracking-widest">Lead Dev Warden</p>
</div>
<div class="group flex flex-col items-center text-center">
<div class="relative mb-6 h-40 w-40 overflow-hidden rounded-full border-4 border-blue-400/20 p-1 transition-all group-hover:border-blue-400 group-hover:shadow-[0_0_30px_rgba(96,165,250,0.4)]">
<img alt="Avatar" class="h-full w-full rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCRgALt99ALcnM5iBoXJ8j6gF3yYDTVxb91gQ-0mJ4crIuGJHBbI_nWB9L1Y__1vaI2poB4uEa82j3Wxj-nYdNZA8_z2AttOU_fpOnOAPvKd9zgsZP-zf5gmihsl33FqzzSLDBuui0UzGkNHodXn-oGJezBwFDUBadcsJ4wxjYm6aeUNbZvTTZK0BEIWy4PTZ-uJe3r8EuT-xNhmV6WFnf5uP5xnO6ReliaFKywrvgZcayQsR5JI-S9gc2k3cJskb8kUqgdxWu5XrD9"/>
</div>
<h3 class="text-xl font-bold text-white">Sarah "Pulse" Dean</h3>
<p class="text-xs font-bold text-blue-400 uppercase tracking-widest">Community Sage</p>
</div>
</div>
</section>
<section class="mx-auto max-w-7xl px-6 lg:px-20 mb-32">
<div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-primary to-surface-highlight p-12 text-center border border-white/10">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10"></div>
<div class="relative z-10">
<h2 class="text-4xl font-black text-white italic mb-6 uppercase">Ready to enter the arena?</h2>
<p class="mx-auto max-w-xl text-slate-200 mb-10 text-lg">Your journey to the top of the leaderboard starts here. Join thousands of other Questers today.</p>
<button class="rounded-full bg-white px-10 py-4 text-lg font-black text-primary transition-transform hover:scale-105 active:scale-95 shadow-xl">
START YOUR QUEST
</button>
</div>
</div>
</section>
</main>
<footer class="border-t border-white/5 bg-surface-dark py-12 px-6 lg:px-20">
<div class="mx-auto max-w-7xl flex flex-col items-center justify-between gap-8 md:flex-row">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20 text-primary">
<span class="material-symbols-outlined text-sm">stadia_controller</span>
</div>
<span class="font-bold text-white uppercase italic">QuizQuest © 2024</span>
</div>
<div class="flex flex-wrap justify-center gap-8">
<a class="text-xs font-medium text-slate-400 hover:text-white transition-colors" href="#">Privacy Policy</a>
<a class="text-xs font-medium text-slate-400 hover:text-white transition-colors" href="#">Terms of Service</a>
<a class="text-xs font-medium text-slate-400 hover:text-white transition-colors" href="#">Support</a>
<a class="text-xs font-medium text-slate-400 hover:text-white transition-colors" href="#">Partners</a>
</div>
<div class="flex gap-4">
<a class="h-10 w-10 flex items-center justify-center rounded-full border border-white/10 text-slate-400 hover:text-white hover:border-primary transition-all" href="#">
<span class="material-symbols-outlined text-sm">alternate_email</span>
</a>
<a class="h-10 w-10 flex items-center justify-center rounded-full border border-white/10 text-slate-400 hover:text-white hover:border-primary transition-all" href="#">
<span class="material-symbols-outlined text-sm">forum</span>
</a>
</div>
</div>
</footer>
</body></html>