<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Power the Quest | Sponsorship & Partnership Portal</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>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 antialiased overflow-x-hidden">
<div class="relative flex min-h-screen w-full flex-col">
<!-- Top Navigation Bar -->
<header class="sticky top-0 z-50 w-full border-b border-primary/10 bg-background-dark/80 backdrop-blur-md px-6 md:px-20 py-4">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<div class="flex items-center gap-3 text-primary">
<span class="material-symbols-outlined text-3xl fill-1">videogame_asset</span>
<h2 class="text-slate-100 text-xl font-bold tracking-tight">Quiz Portal</h2>
</div>
<nav class="hidden lg:flex flex-1 justify-center gap-10">
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium" href="#">Solutions</a>
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium" href="#">Audience</a>
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium" href="#">Case Studies</a>
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium" href="#">Pricing</a>
</nav>
<div class="flex items-center gap-4">
<button class="hidden sm:flex min-w-[100px] cursor-pointer items-center justify-center rounded-full h-10 px-5 bg-primary/10 border border-primary/30 text-primary text-sm font-bold hover:bg-primary/20 transition-all">
Login
</button>
<button class="flex min-w-[120px] cursor-pointer items-center justify-center rounded-full h-10 px-5 bg-primary text-white text-sm font-bold shadow-lg shadow-primary/20 hover:scale-105 transition-transform active:scale-95">
Get Started
</button>
</div>
</div>
</header>
<main class="flex-1">
<!-- Hero Section -->
<section class="relative px-6 py-20 md:py-32 overflow-hidden">
<div class="absolute inset-0 z-0 opacity-20 pointer-events-none">
<div class="absolute top-[-10%] right-[-10%] w-[500px] h-[500px] bg-primary rounded-full blur-[120px]"></div>
<div class="absolute bottom-[-10%] left-[-10%] w-[400px] h-[400px] bg-blue-600 rounded-full blur-[100px]"></div>
</div>
<div class="max-w-4xl mx-auto text-center relative z-10">
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-widest mb-6">
<span class="material-symbols-outlined text-sm">stars</span>
Partner with the best
</div>
<h1 class="text-white text-5xl md:text-7xl font-black leading-[1.1] tracking-tight mb-8">
Power the <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-blue-400">Quest</span>
</h1>
<p class="text-slate-400 text-lg md:text-xl font-normal leading-relaxed max-w-2xl mx-auto mb-10">
Your Brand, Their Adventure. Join a high-energy gamified ecosystem where brands become legends and engagement is built into every interaction.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<button class="w-full sm:w-auto px-10 h-14 bg-primary rounded-full text-white font-bold text-lg hover:shadow-2xl hover:shadow-primary/40 transition-all">
Partner Now
</button>
<button class="w-full sm:w-auto px-10 h-14 bg-slate-800 rounded-full text-white font-bold text-lg border border-slate-700 hover:bg-slate-700 transition-all flex items-center justify-center gap-2">
View Media Kit
<span class="material-symbols-outlined">download</span>
</button>
</div>
</div>
</section>
<!-- Stats Dashboard Section -->
<section class="px-6 py-16 bg-slate-900/40 border-y border-white/5">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row items-end justify-between mb-12 gap-4">
<div>
<h2 class="text-white text-3xl font-bold mb-2">The Impact of Your Quest</h2>
<p class="text-slate-400">Real-time engagement metrics from across our gaming network.</p>
</div>
<div class="text-primary font-bold flex items-center gap-2 bg-primary/5 px-4 py-2 rounded-full border border-primary/10">
<span class="material-symbols-outlined">monitoring</span>
Live Network Data
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-background-dark border border-slate-800 p-8 rounded-xl hover:border-primary/50 transition-colors group">
<p class="text-slate-400 text-sm font-medium mb-1">Monthly Active Questers</p>
<div class="flex items-baseline gap-2">
<h3 class="text-white text-4xl font-bold tracking-tight">2.5M+</h3>
<span class="text-green-400 text-sm font-bold flex items-center">+12%</span>
</div>
<div class="mt-4 h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-primary w-[75%] rounded-full group-hover:w-[80%] transition-all duration-700"></div>
</div>
</div>
<div class="bg-background-dark border border-slate-800 p-8 rounded-xl hover:border-primary/50 transition-colors group">
<p class="text-slate-400 text-sm font-medium mb-1">Avg. Completion Rate</p>
<div class="flex items-baseline gap-2">
<h3 class="text-white text-4xl font-bold tracking-tight">88%</h3>
<span class="text-green-400 text-sm font-bold flex items-center">+5%</span>
</div>
<div class="mt-4 h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-primary w-[88%] rounded-full group-hover:scale-x-105 origin-left transition-all"></div>
</div>
</div>
<div class="bg-background-dark border border-slate-800 p-8 rounded-xl hover:border-primary/50 transition-colors group">
<p class="text-slate-400 text-sm font-medium mb-1">Total Quests Played</p>
<div class="flex items-baseline gap-2">
<h3 class="text-white text-4xl font-bold tracking-tight">15M+</h3>
<span class="text-green-400 text-sm font-bold flex items-center">+20%</span>
</div>
<div class="mt-4 h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-primary w-[60%] rounded-full group-hover:w-[65%] transition-all"></div>
</div>
</div>
<div class="bg-background-dark border border-slate-800 p-8 rounded-xl hover:border-primary/50 transition-colors group">
<p class="text-slate-400 text-sm font-medium mb-1">Ad Recall Rate</p>
<div class="flex items-baseline gap-2">
<h3 class="text-white text-4xl font-bold tracking-tight">72%</h3>
<span class="text-blue-400 text-sm font-bold flex items-center">High</span>
</div>
<div class="mt-4 h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-primary w-[72%] rounded-full transition-all"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Audience Reach Section -->
<section class="px-6 py-24">
<div class="max-w-7xl mx-auto flex flex-col lg:flex-row gap-16 items-center">
<div class="flex-1 space-y-8">
<h2 class="text-white text-4xl font-bold leading-tight">Engage a Global <span class="text-primary">Playerbase</span></h2>
<p class="text-slate-400 text-lg leading-relaxed">
Our audience isn't just watching; they are active participants. We specialize in reaching the hard-to-find Gen Z and Millennial demographics through interactive, reward-based storytelling.
</p>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="size-12 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
<span class="material-symbols-outlined">group_work</span>
</div>
<div>
<h4 class="text-white font-bold text-lg">Hyper-Segmented Targeting</h4>
<p class="text-slate-500">Reach users based on their quest history, interest categories, and gaming behaviors.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="size-12 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
<span class="material-symbols-outlined">psychology</span>
</div>
<div>
<h4 class="text-white font-bold text-lg">High Emotional Resonance</h4>
<p class="text-slate-500">Gamified interactions create deeper brand affinity than static display ads.</p>
</div>
</div>
</div>
</div>
<div class="flex-1 w-full max-w-lg aspect-square bg-slate-800/50 rounded-xl border border-slate-700 relative overflow-hidden flex items-center justify-center">
<img alt="Data analytics dashboard visualization" class="absolute inset-0 w-full h-full object-cover opacity-60 mix-blend-overlay" data-alt="Interactive data visualization showing global audience demographics" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBW9JFh9p2eNbuNR6Aa302X37hJc89WU_6JtZK-Z7O31dulDCJ0oF_oEqIdZur61rrJTOXkUaz4wTvozMbjGsr-jc__35NWSho0U-2buDpx9JseYCI-MKgijmhq57FSx9MbalbAUkj941PGCHtGuFvndI4jPA_VMVg5KutSHLmCS-sqQB6AMrJH18aVa-E7zkfLeVxMsyOJn0oVN9_vNJphc1ZCcVBlX3fJRHJSd4Y0uBqbEGJ3RsPE2gyPoz6jTD-lOw8pZmz5v73E"/>
<div class="relative z-10 text-center p-8 bg-slate-900/80 backdrop-blur rounded-lg border border-slate-700 shadow-2xl">
<span class="material-symbols-outlined text-6xl text-primary mb-4">language</span>
<p class="text-white font-bold text-xl mb-1">Global Coverage</p>
<p class="text-slate-400 text-sm">Active users across 140+ countries</p>
<div class="mt-6 flex justify-center -space-x-3">
<div class="size-10 rounded-full border-2 border-slate-900 bg-slate-700"></div>
<div class="size-10 rounded-full border-2 border-slate-900 bg-slate-600"></div>
<div class="size-10 rounded-full border-2 border-slate-900 bg-primary"></div>
<div class="size-10 rounded-full border-2 border-slate-900 bg-slate-500"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Sponsorship Tiers Section -->
<section class="px-6 py-24 bg-gradient-to-b from-transparent to-primary/5">
<div class="max-w-7xl mx-auto text-center mb-16">
<h2 class="text-white text-4xl font-bold mb-4">Choose Your Level</h2>
<p class="text-slate-400 max-w-2xl mx-auto">Scalable sponsorship models designed for brands of all sizes.</p>
</div>
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Explorer Tier -->
<div class="flex flex-col bg-slate-900/50 border border-slate-800 rounded-xl p-8 hover:bg-slate-900 transition-all">
<div class="mb-8">
<span class="text-slate-500 font-bold uppercase text-xs tracking-widest">Basic Entry</span>
<h3 class="text-white text-2xl font-bold mt-2">Explorer</h3>
<p class="text-slate-500 mt-4">Standard visibility and entry-level engagement for emerging brands.</p>
</div>
<ul class="space-y-4 mb-10 flex-1">
<li class="flex items-center gap-3 text-slate-300">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
Logo in Partner Grid
</li>
<li class="flex items-center gap-3 text-slate-300">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
Weekly Social Shoutouts
</li>
<li class="flex items-center gap-3 text-slate-300">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
Standard Ad Banners
</li>
</ul>
<button class="w-full py-4 rounded-full border border-slate-700 text-white font-bold hover:bg-slate-800 transition-colors">Select Tier</button>
</div>
<!-- Champion Tier -->
<div class="flex flex-col bg-slate-900 border-2 border-primary rounded-xl p-8 scale-105 shadow-2xl shadow-primary/10 relative overflow-hidden">
<div class="absolute top-0 right-0 bg-primary text-white text-[10px] font-black uppercase px-4 py-1.5 rounded-bl-xl tracking-tighter">Most Popular</div>
<div class="mb-8">
<span class="text-primary font-bold uppercase text-xs tracking-widest">Deep Engagement</span>
<h3 class="text-white text-2xl font-bold mt-2">Champion</h3>
<p class="text-slate-400 mt-4">Interactive integration within quest flows for maximum resonance.</p>
</div>
<ul class="space-y-4 mb-10 flex-1">
<li class="flex items-center gap-3 text-slate-100">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
Branded Quiz Questions
</li>
<li class="flex items-center gap-3 text-slate-100">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
Custom In-Game Items
</li>
<li class="flex items-center gap-3 text-slate-100">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
Audience Analytics Access
</li>
<li class="flex items-center gap-3 text-slate-100">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
Priority Email Support
</li>
</ul>
<button class="w-full py-4 rounded-full bg-primary text-white font-bold shadow-lg shadow-primary/20 hover:scale-105 transition-transform">Select Tier</button>
</div>
<!-- Legend Tier -->
<div class="flex flex-col bg-slate-900/50 border border-slate-800 rounded-xl p-8 hover:bg-slate-900 transition-all">
<div class="mb-8">
<span class="text-slate-500 font-bold uppercase text-xs tracking-widest">Full Domination</span>
<h3 class="text-white text-2xl font-bold mt-2">Legend</h3>
<p class="text-slate-500 mt-4">Exclusive category ownership and white-label experience.</p>
</div>
<ul class="space-y-4 mb-10 flex-1">
<li class="flex items-center gap-3 text-slate-300">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
Portal Skin Integration
</li>
<li class="flex items-center gap-3 text-slate-300">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
Dedicated Tournament Host
</li>
<li class="flex items-center gap-3 text-slate-300">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
Real-time Data Stream
</li>
<li class="flex items-center gap-3 text-slate-300">
<span class="material-symbols-outlined text-primary text-xl">check_circle</span>
Strategic Brand Consulting
</li>
</ul>
<button class="w-full py-4 rounded-full border border-slate-700 text-white font-bold hover:bg-slate-800 transition-colors">Select Tier</button>
</div>
</div>
</section>
<!-- Media Kit Form Section -->
<section class="px-6 py-24 relative overflow-hidden">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-5 pointer-events-none"></div>
<div class="max-w-4xl mx-auto bg-slate-900 border border-slate-800 rounded-xl p-8 md:p-12 shadow-2xl relative z-10">
<div class="flex flex-col md:flex-row gap-12">
<div class="flex-1">
<h2 class="text-white text-3xl font-bold mb-4">Request a Media Kit</h2>
<p class="text-slate-400 mb-8">Ready to join the quest? Get our comprehensive 2024 partnership guide including pricing, case studies, and upcoming seasonal events.</p>
<div class="space-y-4">
<div class="flex items-center gap-4 text-slate-300">
<span class="material-symbols-outlined text-primary">mail</span>
<span>partners@quizportal.io</span>
</div>
<div class="flex items-center gap-4 text-slate-300">
<span class="material-symbols-outlined text-primary">call</span>
<span>+1 (800) GAM-IFIED</span>
</div>
</div>
</div>
<div class="flex-[1.5] space-y-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<input class="w-full bg-slate-800 border-slate-700 rounded-full text-white px-6 py-3 focus:ring-primary focus:border-primary" placeholder="Your Name" type="text"/>
<input class="w-full bg-slate-800 border-slate-700 rounded-full text-white px-6 py-3 focus:ring-primary focus:border-primary" placeholder="Work Email" type="email"/>
</div>
<input class="w-full bg-slate-800 border-slate-700 rounded-full text-white px-6 py-3 focus:ring-primary focus:border-primary" placeholder="Company Name" type="text"/>
<select class="w-full bg-slate-800 border-slate-700 rounded-full text-slate-400 px-6 py-3 focus:ring-primary focus:border-primary appearance-none">
<option>Select Your Industry</option>
<option>Technology</option>
<option>Retail & FMCG</option>
<option>Gaming & Entertainment</option>
<option>Education</option>
</select>
<textarea class="w-full bg-slate-800 border-slate-700 rounded-xl text-white px-6 py-4 focus:ring-primary focus:border-primary" placeholder="Tell us about your brand mission..." rows="4"></textarea>
<button class="w-full h-14 bg-primary text-white font-bold rounded-full shadow-lg shadow-primary/20 hover:scale-[1.02] transition-transform">
Send Inquiry
</button>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-background-dark border-t border-slate-800 px-6 py-12">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center gap-8 mb-12">
<div class="flex items-center gap-3 text-slate-100">
<span class="material-symbols-outlined text-3xl text-primary fill-1">videogame_asset</span>
<h2 class="text-xl font-bold tracking-tight">Quiz Portal</h2>
</div>
<div class="flex gap-8">
<a class="text-slate-500 hover:text-white transition-colors" href="#">Privacy Policy</a>
<a class="text-slate-500 hover:text-white transition-colors" href="#">Terms of Service</a>
<a class="text-slate-500 hover:text-white transition-colors" href="#">Security</a>
<a class="text-slate-500 hover:text-white transition-colors" href="#">Status</a>
</div>
<div class="flex gap-4">
<a class="size-10 rounded-full bg-slate-800 flex items-center justify-center text-white hover:bg-primary transition-colors" href="#">
<span class="material-symbols-outlined text-xl">share</span>
</a>
<a class="size-10 rounded-full bg-slate-800 flex items-center justify-center text-white hover:bg-primary transition-colors" href="#">
<span class="material-symbols-outlined text-xl">groups</span>
</a>
<a class="size-10 rounded-full bg-slate-800 flex items-center justify-center text-white hover:bg-primary transition-colors" href="#">
<span class="material-symbols-outlined text-xl">alternate_email</span>
</a>
</div>
</div>
<div class="pt-8 border-t border-slate-900 text-center">
<p class="text-slate-600 text-sm">© 2024 Quiz Portal Gamified Ecosystem. All quests reserved. Designed for the bold.</p>
</div>
</div>
</footer>
</div>
</body></html>