<!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 Careers | Join the Guild</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;800&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": "#5b13ec",
"background-light": "#f6f6f8",
"background-dark": "#161022",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
.glass-card {
background: rgba(91, 19, 236, 0.05);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.glass-card:hover {
border-color: #5b13ec;
background: rgba(91, 19, 236, 0.1);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen selection:bg-primary selection:text-white">
<!-- Top Navigation Bar -->
<header class="sticky top-0 z-50 w-full border-b border-white/10 bg-background-dark/80 backdrop-blur-md">
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="bg-primary p-2 rounded-lg">
<span class="material-symbols-outlined text-white">quiz</span>
</div>
<h2 class="text-xl font-extrabold tracking-tight text-white">QuizQuest</h2>
</div>
<nav class="hidden md:flex items-center gap-10">
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Quests</a>
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Leaderboard</a>
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Guild Info</a>
<a class="text-sm font-semibold text-primary" href="#">Careers</a>
</nav>
<div class="flex items-center gap-4">
<a class="hidden sm:block text-sm font-bold hover:opacity-80" href="#">Log In</a>
<button class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-lg shadow-primary/20">
Join the Guild
</button>
</div>
</div>
</header>
<main class="max-w-7xl mx-auto px-6 py-12">
<!-- Hero Section -->
<section class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-24">
<div class="flex flex-col gap-8">
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary w-fit">
<span class="material-symbols-outlined text-sm">rocket_launch</span>
<span class="text-xs font-bold uppercase tracking-widest">Expansion Pack 2.0</span>
</div>
<h1 class="text-6xl md:text-7xl font-black leading-[1.1] tracking-tighter">
Join the <span class="text-primary">Quest Builders</span>
</h1>
<p class="text-lg text-slate-400 max-w-lg leading-relaxed">
The realm of QuizQuest is expanding at lightspeed. We are recruiting architects, system masters, and creative engineers to craft the ultimate challenge for millions of players.
</p>
<div class="flex flex-wrap gap-4">
<button class="bg-primary text-white px-8 py-4 rounded-full font-bold text-lg hover:scale-105 transition-transform">
Explore Open Quests
</button>
<button class="px-8 py-4 rounded-full font-bold text-lg border border-white/10 hover:bg-white/5 transition-colors">
Our Lore
</button>
</div>
</div>
<div class="relative group">
<div class="absolute -inset-4 bg-primary/20 blur-3xl rounded-full opacity-50 group-hover:opacity-75 transition-opacity"></div>
<div class="relative rounded-xl overflow-hidden aspect-square lg:aspect-video bg-cover bg-center shadow-2xl border border-white/10" data-alt="3D isometric office space with futuristic lighting and tech workspace setup" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAqwtZp3VXxbvPaMnKxi3R-jJ90S28Wzxd0jogk7y78czzW-1iUUyKsW-ewKG-clttqo6e_URhwZg9O_AYG9me2oV4aIAnEt9B8SDZ4MNeVCoerSeF8L71RQBF4k4h1fwQlDI5qVHHjnkwEcUEWb6NvtnJ37w523uIZDvwsUkbdvlXJrw-pWfC1ASYMa00ovThFZoDekqvZwwn6yc6JBrLooXpHAe4x9p0Qavi7N-dKLL0xdI8fA12PS_O2slV1Wf9LdZ6hh3caB7xV')">
</div>
</div>
</section>
<!-- Hiring Stats / Progress -->
<section class="glass-card p-8 rounded-xl mb-24 flex flex-col md:flex-row items-center justify-between gap-12">
<div class="w-full md:w-1/3">
<h3 class="text-xl font-bold mb-2">Guild Expansion Progress</h3>
<p class="text-slate-400 text-sm">Hiring Season: Q4 Recruitment Phase</p>
</div>
<div class="flex-1 w-full flex flex-col gap-3">
<div class="flex justify-between text-sm font-bold">
<span>15 / 20 Seats Filled</span>
<span class="text-primary">75% Capacity</span>
</div>
<div class="h-4 w-full bg-white/5 rounded-full overflow-hidden border border-white/5">
<div class="h-full bg-primary shadow-[0_0_15px_rgba(91,19,236,0.5)] rounded-full transition-all" style="width: 75%;"></div>
</div>
</div>
<div class="flex gap-4">
<div class="text-center">
<div class="text-2xl font-black text-primary">12</div>
<div class="text-[10px] uppercase font-bold tracking-widest text-slate-500">Active Quests</div>
</div>
<div class="h-10 w-px bg-white/10"></div>
<div class="text-center">
<div class="text-2xl font-black text-white">45</div>
<div class="text-[10px] uppercase font-bold tracking-widest text-slate-500">Guild Members</div>
</div>
</div>
</section>
<!-- Quest Board (Job Board) -->
<section>
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12 px-2">
<div>
<h2 class="text-4xl font-black tracking-tight mb-2">Available Quests</h2>
<p class="text-slate-400">Filter by your character class to find the right challenge.</p>
</div>
<div class="flex flex-wrap gap-2">
<button class="px-5 py-2.5 rounded-full bg-primary text-white text-sm font-bold flex items-center gap-2">
All Classes
</button>
<button class="px-5 py-2.5 rounded-full bg-white/5 border border-white/10 text-sm font-bold hover:bg-white/10 transition-colors flex items-center gap-2">
<span class="material-symbols-outlined text-sm">code</span> Engineering
</button>
<button class="px-5 py-2.5 rounded-full bg-white/5 border border-white/10 text-sm font-bold hover:bg-white/10 transition-colors flex items-center gap-2">
<span class="material-symbols-outlined text-sm">palette</span> Design
</button>
<button class="px-5 py-2.5 rounded-full bg-white/5 border border-white/10 text-sm font-bold hover:bg-white/10 transition-colors flex items-center gap-2">
<span class="material-symbols-outlined text-sm">history_edu</span> Content Mastery
</button>
</div>
</div>
<!-- Jobs Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="glass-card p-8 rounded-xl flex flex-col h-full transition-all duration-300 hover:-translate-y-2 group">
<div class="flex justify-between items-start mb-6">
<div class="p-3 bg-primary/20 text-primary rounded-xl">
<span class="material-symbols-outlined">database</span>
</div>
<span class="px-3 py-1 rounded-full bg-yellow-500/10 text-yellow-500 border border-yellow-500/20 text-[10px] font-black uppercase tracking-widest">Rare Quest</span>
</div>
<h3 class="text-2xl font-bold mb-2">Lead Systems Architect</h3>
<p class="text-slate-400 text-sm mb-6 flex-grow">Help us build the backbone of the realm. Scale systems to support 10M+ concurrent players.</p>
<div class="flex flex-col gap-4 mb-8">
<div class="flex items-center justify-between text-xs">
<span class="text-slate-500 font-bold uppercase tracking-widest">Level Required</span>
<span class="text-primary font-black">Lvl 8+ Engineer</span>
</div>
<div class="p-4 rounded-xl bg-white/5 border border-white/5 flex flex-col gap-2">
<span class="text-[10px] text-slate-500 font-bold uppercase tracking-widest">Loot Drops</span>
<div class="flex flex-wrap gap-2">
<span class="px-2 py-1 rounded bg-green-500/10 text-green-500 text-[10px] font-bold">180k+ Gold</span>
<span class="px-2 py-1 rounded bg-blue-500/10 text-blue-500 text-[10px] font-bold">Equity Shards</span>
<span class="px-2 py-1 rounded bg-purple-500/10 text-purple-500 text-[10px] font-bold">Remote Buff</span>
</div>
</div>
</div>
<button class="w-full py-3 bg-primary group-hover:bg-primary/90 text-white font-bold rounded-full transition-all">Accept Quest</button>
</div>
<!-- Card 2 -->
<div class="glass-card p-8 rounded-xl flex flex-col h-full transition-all duration-300 hover:-translate-y-2 group">
<div class="flex justify-between items-start mb-6">
<div class="p-3 bg-primary/20 text-primary rounded-xl">
<span class="material-symbols-outlined">brush</span>
</div>
<span class="px-3 py-1 rounded-full bg-white/5 text-slate-500 border border-white/10 text-[10px] font-black uppercase tracking-widest">Common Quest</span>
</div>
<h3 class="text-2xl font-bold mb-2">Senior UI/UX Designer</h3>
<p class="text-slate-400 text-sm mb-6 flex-grow">Craft immersive interfaces that feel like a game. Bring magic to every interaction and pixel.</p>
<div class="flex flex-col gap-4 mb-8">
<div class="flex items-center justify-between text-xs">
<span class="text-slate-500 font-bold uppercase tracking-widest">Level Required</span>
<span class="text-primary font-black">Lvl 5+ Creative</span>
</div>
<div class="p-4 rounded-xl bg-white/5 border border-white/5 flex flex-col gap-2">
<span class="text-[10px] text-slate-500 font-bold uppercase tracking-widest">Loot Drops</span>
<div class="flex flex-wrap gap-2">
<span class="px-2 py-1 rounded bg-green-500/10 text-green-500 text-[10px] font-bold">140k+ Gold</span>
<span class="px-2 py-1 rounded bg-pink-500/10 text-pink-500 text-[10px] font-bold">Creative Stipend</span>
</div>
</div>
</div>
<button class="w-full py-3 bg-primary group-hover:bg-primary/90 text-white font-bold rounded-full transition-all">Accept Quest</button>
</div>
<!-- Card 3 -->
<div class="glass-card p-8 rounded-xl flex flex-col h-full transition-all duration-300 hover:-translate-y-2 group">
<div class="flex justify-between items-start mb-6">
<div class="p-3 bg-primary/20 text-primary rounded-xl">
<span class="material-symbols-outlined">auto_awesome</span>
</div>
<span class="px-3 py-1 rounded-full bg-primary/10 text-primary border border-primary/20 text-[10px] font-black uppercase tracking-widest">Epic Quest</span>
</div>
<h3 class="text-2xl font-bold mb-2">Game Content Master</h3>
<p class="text-slate-400 text-sm mb-6 flex-grow">The storyteller of QuizQuest. Design the narratives and trivia that keep users coming back.</p>
<div class="flex flex-col gap-4 mb-8">
<div class="flex items-center justify-between text-xs">
<span class="text-slate-500 font-bold uppercase tracking-widest">Level Required</span>
<span class="text-primary font-black">Lvl 4+ Master</span>
</div>
<div class="p-4 rounded-xl bg-white/5 border border-white/5 flex flex-col gap-2">
<span class="text-[10px] text-slate-500 font-bold uppercase tracking-widest">Loot Drops</span>
<div class="flex flex-wrap gap-2">
<span class="px-2 py-1 rounded bg-green-500/10 text-green-500 text-[10px] font-bold">110k+ Gold</span>
<span class="px-2 py-1 rounded bg-yellow-500/10 text-yellow-500 text-[10px] font-bold">Unlimited PTO Buff</span>
</div>
</div>
</div>
<button class="w-full py-3 bg-primary group-hover:bg-primary/90 text-white font-bold rounded-full transition-all">Accept Quest</button>
</div>
</div>
<div class="mt-12 text-center">
<button class="text-sm font-bold text-slate-500 hover:text-white transition-colors flex items-center gap-2 mx-auto">
View More Quests (9)
<span class="material-symbols-outlined text-sm">expand_more</span>
</button>
</div>
</section>
<!-- Perks Section -->
<section class="py-24">
<h2 class="text-4xl font-black text-center mb-16 italic">Guild Mastery Perks</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="text-center group">
<div class="size-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-primary text-3xl">sports_esports</span>
</div>
<h4 class="font-bold text-lg mb-2">Friday Raids</h4>
<p class="text-sm text-slate-500">Weekly social gaming and virtual hangs to build guild chemistry.</p>
</div>
<div class="text-center group">
<div class="size-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-primary text-3xl">upgrade</span>
</div>
<h4 class="font-bold text-lg mb-2">Skill Level-Ups</h4>
<p class="text-sm text-slate-500">Dedicated budget for courses, books, and leveling your professional talent.</p>
</div>
<div class="text-center group">
<div class="size-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-primary text-3xl">health_and_safety</span>
</div>
<h4 class="font-bold text-lg mb-2">Full Health Buff</h4>
<p class="text-sm text-slate-500">Premium health, dental, and vision coverage for you and your party.</p>
</div>
<div class="text-center group">
<div class="size-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-primary text-3xl">public</span>
</div>
<h4 class="font-bold text-lg mb-2">Anywhere Base</h4>
<p class="text-sm text-slate-500">Work from any continent. We are a fully distributed remote guild.</p>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="border-t border-white/5 bg-background-dark py-16">
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
<div class="col-span-1 md:col-span-2">
<div class="flex items-center gap-3 mb-6">
<div class="bg-primary p-2 rounded-lg">
<span class="material-symbols-outlined text-white">quiz</span>
</div>
<h2 class="text-xl font-extrabold tracking-tight text-white">QuizQuest</h2>
</div>
<p class="text-slate-500 max-w-sm mb-6">Building the world's first truly gamified learning ecosystem. Join us and help define the future of interaction.</p>
<div class="flex gap-4">
<a class="size-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-primary transition-colors" href="#">
<span class="material-symbols-outlined text-lg">public</span>
</a>
<a class="size-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-primary transition-colors" href="#">
<span class="material-symbols-outlined text-lg">chat</span>
</a>
<a class="size-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-primary transition-colors" href="#">
<span class="material-symbols-outlined text-lg">alternate_email</span>
</a>
</div>
</div>
<div>
<h5 class="font-black uppercase tracking-widest text-[10px] text-slate-400 mb-6">Navigation</h5>
<ul class="flex flex-col gap-4 text-sm text-slate-500">
<li><a class="hover:text-primary transition-colors" href="#">Quests</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Leaderboard</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Guild Info</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Careers</a></li>
</ul>
</div>
<div>
<h5 class="font-black uppercase tracking-widest text-[10px] text-slate-400 mb-6">Support</h5>
<ul class="flex flex-col gap-4 text-sm text-slate-500">
<li><a class="hover:text-primary transition-colors" href="#">Help Center</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Terms of Service</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Privacy Policy</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Cookie Lore</a></li>
</ul>
</div>
</div>
<div class="max-w-7xl mx-auto px-6 pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6">
<p class="text-xs text-slate-600">© 2024 QuizQuest Guild. Built with Magic.</p>
<div class="flex gap-8 text-[10px] font-bold uppercase tracking-tighter text-slate-600">
<span>Designed by Architects</span>
<span>Powered by Voids</span>
</div>
</div>
</footer>
</body></html>