<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>About Us - QuizQuest</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans: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>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"primary-hover": "#6b10c6",
"background-light": "#f7f6f8",
"background-dark": "#191022",
"surface-dark": "#261933",
"surface-border": "#4d3267",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: { "DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px" },
},
},
}
</script>
<style>
body {
font-family: "Spline Sans", sans-serif;
}
/* Custom Grid Background Pattern */
.bg-grid-pattern {
background-image: linear-gradient(to right, #4d3267 1px, transparent 1px),
linear-gradient(to bottom, #4d3267 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(circle at center, black, transparent 80%);
-webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
}
</style>
</head>
<body class="bg-background-dark text-slate-100 min-h-screen flex flex-col font-display overflow-x-hidden">
<!-- Top Navigation -->
<header class="sticky top-0 z-50 w-full border-b border-surface-border bg-background-dark/90 backdrop-blur-md">
<div class="layout-container flex h-full grow flex-col max-w-[1200px] mx-auto">
<div class="flex items-center justify-between whitespace-nowrap px-6 py-4">
<div class="flex items-center gap-3 text-white">
<div class="size-8 text-primary">
<span class="material-symbols-outlined text-4xl">stadia_controller</span>
</div>
<h2 class="text-white text-xl font-bold leading-tight tracking-tight">QuizQuest</h2>
</div>
<div class="hidden md:flex flex-1 justify-end gap-8 items-center">
<div class="flex items-center gap-8">
<a class="text-slate-300 hover:text-white text-sm font-medium transition-colors" href="#">Features</a>
<a class="text-white text-sm font-medium transition-colors" href="#">About Us</a>
<a class="text-slate-300 hover:text-white text-sm font-medium transition-colors" href="#">Leaderboard</a>
<a class="text-slate-300 hover:text-white text-sm font-medium transition-colors" href="#">Pricing</a>
</div>
<div class="flex gap-3">
<button class="flex items-center justify-center overflow-hidden rounded-full h-10 px-6 bg-surface-dark border border-surface-border hover:bg-surface-border text-white text-sm font-bold transition-all">
Log In
</button>
<button class="flex items-center justify-center overflow-hidden rounded-full h-10 px-6 bg-primary hover:bg-primary-hover text-white text-sm font-bold shadow-[0_0_20px_rgba(127,19,236,0.4)] transition-all">
Sign Up
</button>
</div>
</div>
<button class="md:hidden text-white">
<span class="material-symbols-outlined">menu</span>
</button>
</div>
</div>
</header>
<main class="flex-1 w-full flex flex-col items-center">
<!-- Hero Section with Background Effect -->
<div class="relative w-full overflow-hidden">
<!-- Grid Background Overlay -->
<div class="absolute inset-0 opacity-[0.07] bg-grid-pattern pointer-events-none"></div>
<!-- Glow Effect -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] bg-primary/20 blur-[120px] rounded-full pointer-events-none"></div>
<div class="layout-container flex flex-col max-w-[960px] mx-auto px-4 py-20 md:py-32 relative z-10 text-center">
<div class="flex flex-col gap-6 items-center">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-surface-dark border border-surface-border text-xs font-bold text-primary uppercase tracking-wider">
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
Est. 2023
</div>
<h1 class="text-white text-5xl md:text-7xl font-black leading-tight tracking-[-0.03em] max-w-3xl">
Building the Future <br/> <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-400">of Knowledge</span>
</h1>
<p class="text-slate-300 text-lg md:text-xl font-normal leading-relaxed max-w-2xl">
QuizQuest is turning trivia into a competitive e-sport. We combine cognitive science with next-gen gaming mechanics to make learning addictive.
</p>
<div class="flex gap-4 pt-4">
<button class="h-12 px-8 rounded-full bg-white text-background-dark text-base font-bold hover:bg-slate-200 transition-colors">
Join the Beta
</button>
<button class="h-12 px-8 rounded-full bg-surface-dark border border-surface-border text-white text-base font-bold hover:bg-surface-border transition-colors flex items-center gap-2">
<span class="material-symbols-outlined text-sm">play_circle</span>
Watch Trailer
</button>
</div>
</div>
</div>
</div>
<!-- Mission Cards Section -->
<div class="w-full bg-background-dark relative">
<div class="max-w-[1100px] mx-auto px-4 py-20">
<div class="mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Our Core Mission</h2>
<p class="text-slate-400 max-w-2xl">We are rewriting the rules of engagement. Here is how we are changing the game.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="group p-8 rounded-2xl bg-surface-dark border border-surface-border hover:border-primary/50 transition-all duration-300 hover:shadow-[0_0_30px_rgba(127,19,236,0.15)] flex flex-col gap-4">
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">sports_esports</span>
</div>
<h3 class="text-xl font-bold text-white">Gamification First</h3>
<p class="text-slate-400 leading-relaxed">
We don't just add points; we build worlds. Our XP systems and seasonal passes make every question feel like a boss battle.
</p>
</div>
<!-- Card 2 -->
<div class="group p-8 rounded-2xl bg-surface-dark border border-surface-border hover:border-primary/50 transition-all duration-300 hover:shadow-[0_0_30px_rgba(127,19,236,0.15)] flex flex-col gap-4">
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">globe</span>
</div>
<h3 class="text-xl font-bold text-white">Global Community</h3>
<p class="text-slate-400 leading-relaxed">
Connect with minds across the globe. Our leaderboards are real-time, connecting players from Tokyo to Toronto instantly.
</p>
</div>
<!-- Card 3 -->
<div class="group p-8 rounded-2xl bg-surface-dark border border-surface-border hover:border-primary/50 transition-all duration-300 hover:shadow-[0_0_30px_rgba(127,19,236,0.15)] flex flex-col gap-4">
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">bolt</span>
</div>
<h3 class="text-xl font-bold text-white">Rapid Innovation</h3>
<p class="text-slate-400 leading-relaxed">
Static quizzes are dead. We deploy new question types, live events, and AR challenges every single month.
</p>
</div>
</div>
</div>
</div>
<!-- Transparency / Engine Section -->
<div class="w-full py-20 px-4 bg-gradient-to-b from-background-dark to-surface-dark">
<div class="max-w-[1100px] mx-auto rounded-3xl overflow-hidden border border-surface-border bg-background-dark relative">
<!-- Decorative background elements -->
<div class="absolute -right-20 -top-20 w-96 h-96 bg-primary/10 blur-[100px] rounded-full"></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 p-8 md:p-16 items-center">
<div class="flex flex-col gap-6 relative z-10">
<div class="flex items-center gap-2 text-primary font-bold tracking-wider text-sm uppercase">
<span class="material-symbols-outlined text-lg">verified_user</span>
Transparency
</div>
<h2 class="text-3xl md:text-5xl font-black text-white leading-tight">
The Fair-Play Engine
</h2>
<p class="text-slate-300 text-lg leading-relaxed">
Trust is our currency. Our proprietary anti-cheat algorithms and randomization tech ensure every quest is a test of true skill, not internet speed or scripts.
</p>
<ul class="flex flex-col gap-4 mt-2">
<li class="flex items-start gap-3">
<span class="material-symbols-outlined text-primary mt-1">check_circle</span>
<span class="text-slate-400">Server-side validation for every answer submission.</span>
</li>
<li class="flex items-start gap-3">
<span class="material-symbols-outlined text-primary mt-1">check_circle</span>
<span class="text-slate-400">Dynamic question pooling to prevent memorization.</span>
</li>
<li class="flex items-start gap-3">
<span class="material-symbols-outlined text-primary mt-1">check_circle</span>
<span class="text-slate-400">Real-time anomaly detection for bot behavior.</span>
</li>
</ul>
<div class="pt-4">
<button class="text-white font-bold border-b-2 border-primary hover:text-primary transition-colors pb-1 inline-flex items-center gap-2">
Read the Whitepaper
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
</div>
<div class="relative h-[400px] w-full rounded-2xl overflow-hidden bg-surface-dark border border-surface-border group">
<!-- Abstract Tech Visual -->
<div class="absolute inset-0 bg-cover bg-center opacity-60 mix-blend-overlay" data-alt="Abstract cyber security data visualization in dark purple tones" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuD3yUi8dk_JNyT5PblY_rlT7hjfs32LNtkhfXWg-yl2nRdkaJYH-Y3DUERYenTtvHzo6AGcwVrExQnOdYV6Kj3XNlLSMQz-cTq2o7r1MG8kEQStuyP1Pq90Y-hTMKXdOpgk2oWUtkW-zihWLKDSSx3wjGVgi9FjOIT2bXhd9x4kETvy56Z_Is4lxSEN0OEvP9kWMMlLdfL6fvGkNvp7AOWPXsFxRDTT5VzK0C6X00V1QMRT3G8pr46TemH2BEYQTdHGzHv2bcCF');"></div>
<div class="absolute inset-0 bg-gradient-to-t from-background-dark via-transparent to-transparent"></div>
<!-- Floating UI Elements on top of image -->
<div class="absolute bottom-6 left-6 right-6 p-4 bg-background-dark/80 backdrop-blur-md rounded-xl border border-surface-border">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-slate-400 font-mono">SYSTEM_STATUS</span>
<span class="flex items-center gap-1 text-xs text-green-400 font-bold">
<span class="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse"></span>
SECURE
</span>
</div>
<div class="h-1.5 w-full bg-surface-dark rounded-full overflow-hidden">
<div class="h-full bg-primary w-[92%]"></div>
</div>
<div class="flex justify-between mt-2 text-[10px] text-slate-500 font-mono">
<span>LATENCY: 12ms</span>
<span>ENCRYPTION: AES-256</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Team / Stats Grid -->
<div class="w-full py-20 px-4 bg-background-dark">
<div class="max-w-[1100px] mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Meet the Game Masters</h2>
<p class="text-slate-400 max-w-2xl mx-auto">Founded by gamers, engineers, and educators passionate about the future of interaction.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Team Member 1 -->
<div class="flex flex-col items-center text-center p-6 rounded-2xl bg-surface-dark/50 border border-surface-border hover:bg-surface-dark transition-colors">
<div class="w-24 h-24 rounded-full overflow-hidden border-2 border-primary mb-4">
<img alt="Portrait of Alex Chen, Founder" class="w-full h-full object-cover" data-alt="Professional headshot of a smiling man with glasses" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC9U3jZGy_Q_Z2oVfgqNA3NzD77Kpjdfy7Ervc5XGaL4sIOTGRFzAvxH-ikBbD73bFpB8vV4RX8A2wRD3BFVY6BATZlbNvNmBtWNKD5Hxd-Y7jVIeXJ3xNRj6TgLAzaHkZKSBMnmvYlSfEiHjFjgrk3P9Kqu7Y_je6QRMkznoj1NSQnUWJv2yUZtDZqyEnm2B1EY7pHIyHLtUVVIRxhtKl6zzsuUeNCARdhSm9Eja4hSgTCpoj1_WH0eHFbHVyByjpbV4fzBrU5"/>
</div>
<h3 class="text-lg font-bold text-white">Alex Chen</h3>
<p class="text-primary text-sm font-medium mb-2">Founder & CEO</p>
<p class="text-slate-400 text-sm">Ex-Esports Pro turned EdTech visionary.</p>
</div>
<!-- Team Member 2 -->
<div class="flex flex-col items-center text-center p-6 rounded-2xl bg-surface-dark/50 border border-surface-border hover:bg-surface-dark transition-colors">
<div class="w-24 h-24 rounded-full overflow-hidden border-2 border-primary mb-4">
<img alt="Portrait of Sarah Jenkins, CTO" class="w-full h-full object-cover" data-alt="Professional headshot of a smiling woman" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBee5PnNwzXvmmfDQO28ExDZObb6BlGwJDQyetToCR5tRZy-4nGJJmGFViiXw07GNCqWLGql7qvXDmPJY1xXtNBK0wE3RZjHijqpS10m7fvtZYJZ-jCqK86Uzg1AlYaysh8P2RuptMpQAHKksxsau6Cp4R2NXdyzatLyX6gnIrCe49_UFA2LIZmlR40DZXy8FECVKFseYzb_hdzcEgGj3P5aotFdges-gDjreowJd29_gGW2z_4DlXzCy0tD5QR0n0wiKZ1fENf"/>
</div>
<h3 class="text-lg font-bold text-white">Sarah Jenkins</h3>
<p class="text-primary text-sm font-medium mb-2">CTO</p>
<p class="text-slate-400 text-sm">Architect of the Fair-Play Engine.</p>
</div>
<!-- Stat Card 1 -->
<div class="flex flex-col justify-center items-center text-center p-6 rounded-2xl bg-gradient-to-br from-primary/20 to-surface-dark border border-primary/30 h-full">
<span class="text-4xl font-black text-white mb-1">1M+</span>
<span class="text-sm font-bold text-slate-300 uppercase tracking-wider">Quizzes Taken</span>
</div>
<!-- Stat Card 2 -->
<div class="flex flex-col justify-center items-center text-center p-6 rounded-2xl bg-gradient-to-br from-purple-900/40 to-surface-dark border border-purple-500/30 h-full">
<span class="text-4xl font-black text-white mb-1">50+</span>
<span class="text-sm font-bold text-slate-300 uppercase tracking-wider">Countries</span>
</div>
</div>
</div>
</div>
<!-- CTA Footer Section -->
<div class="w-full px-4 pb-12 pt-10">
<div class="max-w-[1100px] mx-auto relative rounded-3xl overflow-hidden bg-primary px-6 py-16 md:px-20 text-center shadow-[0_0_50px_rgba(127,19,236,0.3)]">
<!-- Abstract Pattern Overlay -->
<div class="absolute inset-0 opacity-20 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] mix-blend-multiply" data-alt="Subtle cube pattern background"></div>
<div class="relative z-10 flex flex-col items-center gap-8">
<h2 class="text-3xl md:text-5xl font-black text-white tracking-tight">Ready to Start Your Quest?</h2>
<p class="text-white/90 text-lg max-w-xl">Join thousands of players competing for glory and knowledge today.</p>
<div class="flex flex-col sm:flex-row gap-4 w-full justify-center">
<button class="h-14 px-10 rounded-full bg-white text-primary text-lg font-bold hover:bg-slate-100 transition-transform hover:scale-105 shadow-lg">
Get Started Free
</button>
<button class="h-14 px-10 rounded-full bg-transparent border-2 border-white text-white text-lg font-bold hover:bg-white/10 transition-colors">
View Leaderboard
</button>
</div>
</div>
</div>
</div>
</main>
<!-- Simple Footer -->
<footer class="w-full border-t border-surface-border bg-background-dark py-10 px-6">
<div class="max-w-[1100px] mx-auto flex flex-col md:flex-row justify-between items-center gap-6 text-slate-500 text-sm">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary">stadia_controller</span>
<span class="font-bold text-slate-300">QuizQuest</span>
<span>© 2024</span>
</div>
<div class="flex gap-6">
<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="#">Contact</a>
</div>
<div class="flex gap-4">
<a class="hover:text-white transition-colors" href="#"><span class="material-symbols-outlined">alternate_email</span></a>
<a class="hover:text-white transition-colors" href="#"><span class="material-symbols-outlined">hub</span></a>
</div>
</div>
</footer>
</body></html>