<!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 - Affiliate Program</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",
"background-light": "#f7f6f8", // Not used in this specific dark mode request, but kept for completeness
"background-dark": "#191022",
"surface-dark": "#2d1b3e",
"surface-darker": "#231530",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
backgroundImage: {
'grid-pattern': "linear-gradient(to right, #2d1b3e 1px, transparent 1px), linear-gradient(to bottom, #2d1b3e 1px, transparent 1px)",
}
},
},
}
</script>
<style>
body {
font-family: "Spline Sans", sans-serif;
}
.neon-glow {
box-shadow: 0 0 15px rgba(127, 19, 236, 0.4);
}
.neon-text-glow {
text-shadow: 0 0 10px rgba(127, 19, 236, 0.6);
}
.glass-panel {
background: rgba(45, 27, 62, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(127, 19, 236, 0.2);
}
/* Custom range slider styling */
input[type=range] {
-webkit-appearance: none;
background: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
margin-top: -10px;
box-shadow: 0 0 10px rgba(127, 19, 236, 0.8);
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: #4d3267;
border-radius: 2px;
}
</style>
</head>
<body class="bg-background-dark text-slate-100 overflow-x-hidden selection:bg-primary selection:text-white">
<!-- Background Grid -->
<div class="fixed inset-0 z-0 opacity-10 pointer-events-none bg-[size:40px_40px] bg-grid-pattern"></div>
<!-- Header -->
<header class="relative z-20 flex items-center justify-between border-b border-[#362348] bg-background-dark/80 backdrop-blur-md px-6 py-4 lg:px-10 sticky top-0">
<div class="flex items-center gap-3 text-white">
<div class="size-8 text-primary flex items-center justify-center">
<span class="material-symbols-outlined text-4xl">stadia_controller</span>
</div>
<h2 class="text-white text-xl font-bold tracking-tight">QuizQuest</h2>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium" href="#">Programs</a>
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium" href="#">Calculator</a>
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium" href="#">Success Stories</a>
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium" href="#">FAQ</a>
</nav>
<div class="flex items-center gap-4">
<a class="hidden sm:block text-sm font-medium text-slate-300 hover:text-white" href="#">Login</a>
<button class="bg-primary hover:bg-primary/90 hover:neon-glow transition-all duration-300 text-white text-sm font-bold h-10 px-6 rounded-full flex items-center gap-2">
<span>Become a Partner</span>
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
</button>
</div>
</header>
<main class="relative z-10 flex flex-col items-center">
<!-- Hero Section -->
<div class="container mx-auto px-4 py-12 lg:py-20 max-w-7xl">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="flex flex-col gap-6 text-left">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 w-fit">
<span class="size-2 rounded-full bg-primary animate-pulse"></span>
<span class="text-primary text-xs font-bold uppercase tracking-wider">New Affiliate Portal</span>
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-black leading-tight tracking-tight text-white">
Level Up Your <br/>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-300 neon-text-glow">Income Stream</span>
</h1>
<p class="text-slate-300 text-lg leading-relaxed max-w-xl">
Join the ecosystem. Earn passive income by referring players or active income by managing your own quiz portals. The game is on, and the rewards are real.
</p>
<div class="flex flex-wrap gap-4 pt-4">
<button class="bg-primary hover:bg-primary/90 text-white text-base font-bold h-12 px-8 rounded-full shadow-[0_0_20px_rgba(127,19,236,0.5)] transition-all hover:scale-105 flex items-center gap-2">
<span class="material-symbols-outlined">rocket_launch</span>
Start Referring
</button>
<button class="bg-surface-dark border border-primary/30 hover:border-primary text-white text-base font-bold h-12 px-8 rounded-full transition-all hover:bg-primary/10 flex items-center gap-2">
<span class="material-symbols-outlined">admin_panel_settings</span>
Start Managing
</button>
</div>
<div class="flex items-center gap-4 mt-8 text-sm text-slate-400">
<div class="flex -space-x-3">
<img alt="User avatar 1" class="w-8 h-8 rounded-full border-2 border-background-dark object-cover" data-alt="Portrait of a young woman smiling" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCyPp9aXt2U0QNE6BcUuN3IqK-rAJ8uhVd4-Si-Wa1afOaiyJ3BzZAOPi3facRlUbFtMFgOejFE-brDL0vpMQGfricrVQletfR-_CVUTx_1X7x6RvNW0XMEcBwfNllBmGWDWiX4zQjXgtAywMXzpGe0QQSsinQsWOCNtUUYqUUsRMhZH3zq-yv8lzDFtQe3rhuLZah8UfcG3hSZ9MstTeP93KRu_1jVXjtNf1cD-De3Tc5hksUSOV6xIdEW42WMGHxKf4GFBYBE"/>
<img alt="User avatar 2" class="w-8 h-8 rounded-full border-2 border-background-dark object-cover" data-alt="Portrait of a young man smiling" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCuQZsklhnBQ1hyr1fQsGpCt9go92StUKJ9XLpuc3e9wfRRFE9zTu1MTa50N8xacQgrFMQzW5o7mkvpAMNpmBN-eZGMSiD0LB5d_EP-y1QaZtLjk2_rjWRuQjJ8ZCByDSCxQJxzmFj6my6GLq_JpYkPd0AMuqrwqIHBspjd2i2E4-DikcYKgdfbg-PVnRJGjC36vZYTKGdvhBKAP7VXiWPHDfORi2_UYvkAOvGfBUIUfr6sNQf79h30AzjAcP0oGPKsZT7bezW2"/>
<img alt="User avatar 3" class="w-8 h-8 rounded-full border-2 border-background-dark object-cover" data-alt="Portrait of a smiling woman" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAQdiJAZ29bRl3CNC6nY0SJSpB7qI9lKm2p7xpJB1CG4uVMAfrWeXtGrgxHNsdQgsudutU_RuYm5VpjoOxR-cKsMz2zKu-sbjbNkyl3t4epDdBh47-4tpg9u27H2Rb3vmKvA007pG-u-xWS2RvPLPX2Tz4S6RC85imJ38VXa8GYG-qs33evrULcQPP7-qALLsLG5Hg5pIQbWoT59L5r98_xGNrfSgwK7XMr9_ei-KtG88uih_8CCmTW_vOHOKoe6eJj29d0wCii"/>
<div class="w-8 h-8 rounded-full border-2 border-background-dark bg-surface-dark flex items-center justify-center text-xs font-bold text-white">+2k</div>
</div>
<p>Partners joined this month</p>
</div>
</div>
<!-- Hero Graphic / 3D Element -->
<div class="relative w-full h-[400px] lg:h-[500px] flex items-center justify-center">
<!-- Glow effect behind -->
<div class="absolute inset-0 bg-primary/20 blur-[100px] rounded-full transform scale-75"></div>
<!-- 3D Coins/Trophy Image -->
<div class="relative z-10 animate-[bounce_3s_infinite]">
<img alt="Abstract 3D golden coins and trophy floating in dark space with neon lighting" class="w-full max-w-md object-contain drop-shadow-2xl mix-blend-lighten" data-alt="Abstract 3D floating trophy and coins with neon lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBxmo5Kp59-OWg09P5x83HKu-3OpGYqNUQRIFdXidLrNKWItDbALnfo7WcDl1lD-BVNnhaseJTX-kdBHPjsd1GrkvKZj41uZpuLB4QeDeaC4KG22A1yZtpVutkoLwKqOtwm8UAA-LeCt4qapkVrGMiAhRdg--BOE0G8eNVfHEzWmNiS3kWRZv4CbzCzXuq7zhkVtEWSYcE7UtYfdgf8Jj48uoeE-XsVyX1nvR0vviMZYHlxtdBUBgGglp3LKuETk6AQc_8AwbAC"/>
</div>
<!-- Floating Badge 1 -->
<div class="absolute top-10 left-0 lg:-left-4 glass-panel p-3 rounded-2xl flex items-center gap-3 animate-[pulse_4s_ease-in-out_infinite]">
<div class="size-10 rounded-full bg-green-500/20 flex items-center justify-center text-green-400">
<span class="material-symbols-outlined">payments</span>
</div>
<div>
<p class="text-xs text-slate-400">Recent Payout</p>
<p class="text-sm font-bold text-white">$1,240.50</p>
</div>
</div>
<!-- Floating Badge 2 -->
<div class="absolute bottom-20 right-0 glass-panel p-3 rounded-2xl flex items-center gap-3 animate-[pulse_5s_ease-in-out_infinite]">
<div class="size-10 rounded-full bg-purple-500/20 flex items-center justify-center text-primary">
<span class="material-symbols-outlined">trending_up</span>
</div>
<div>
<p class="text-xs text-slate-400">Conversion Rate</p>
<p class="text-sm font-bold text-white">+14.2%</p>
</div>
</div>
</div>
</div>
</div>
<!-- Stats Ticker -->
<div class="w-full border-y border-[#362348] bg-background-dark/50 backdrop-blur-sm">
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center divide-y md:divide-y-0 md:divide-x divide-[#362348]">
<div class="flex flex-col items-center gap-1 p-2">
<p class="text-slate-400 text-sm font-medium uppercase tracking-wider">Total Paid Out</p>
<p class="text-3xl lg:text-4xl font-black text-white">$2.4M+</p>
</div>
<div class="flex flex-col items-center gap-1 p-2">
<p class="text-slate-400 text-sm font-medium uppercase tracking-wider">Active Partners</p>
<p class="text-3xl lg:text-4xl font-black text-white">15,000+</p>
</div>
<div class="flex flex-col items-center gap-1 p-2">
<p class="text-slate-400 text-sm font-medium uppercase tracking-wider">Top Earner (Oct)</p>
<p class="text-3xl lg:text-4xl font-black text-primary neon-text-glow">$12,500</p>
</div>
</div>
</div>
</div>
<!-- Two Path Section -->
<div class="container mx-auto px-4 py-20 max-w-6xl">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Choose Your Path</h2>
<p class="text-slate-400 max-w-2xl mx-auto">Whether you have an audience to refer or content to create, we have a revenue model that fits your style.</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<!-- Card A: Referring -->
<div class="group relative bg-surface-dark border border-[#362348] hover:border-primary/50 rounded-xl p-8 transition-all duration-300 hover:shadow-[0_0_30px_rgba(127,19,236,0.15)] flex flex-col">
<div class="absolute -top-6 left-8 size-12 bg-primary rounded-2xl flex items-center justify-center shadow-lg transform rotate-3 group-hover:rotate-6 transition-transform">
<span class="material-symbols-outlined text-white text-2xl">campaign</span>
</div>
<div class="mt-6 mb-4">
<h3 class="text-2xl font-bold text-white mb-2">Earn by Referring</h3>
<p class="text-slate-400 text-sm leading-relaxed">Perfect for influencers, bloggers, and community managers. Share your unique link and earn every time a new player subscribes or purchases a quiz pack.</p>
</div>
<ul class="space-y-3 mb-8 flex-1">
<li class="flex items-center gap-3 text-slate-200">
<span class="material-symbols-outlined text-primary text-sm">check_circle</span>
<span>20% Recurring Commission</span>
</li>
<li class="flex items-center gap-3 text-slate-200">
<span class="material-symbols-outlined text-primary text-sm">check_circle</span>
<span>90-Day Cookie Life</span>
</li>
<li class="flex items-center gap-3 text-slate-200">
<span class="material-symbols-outlined text-primary text-sm">check_circle</span>
<span>Instant Payouts via PayPal</span>
</li>
</ul>
<button class="w-full py-3 rounded-full border border-primary text-primary hover:bg-primary hover:text-white transition-colors font-bold text-sm">
Get Referral Link
</button>
</div>
<!-- Card B: Managing -->
<div class="group relative bg-surface-dark border border-[#362348] hover:border-purple-400/50 rounded-xl p-8 transition-all duration-300 hover:shadow-[0_0_30px_rgba(192,132,252,0.15)] flex flex-col">
<div class="absolute -top-6 left-8 size-12 bg-[#2d1b3e] border border-primary text-primary rounded-2xl flex items-center justify-center shadow-lg transform -rotate-3 group-hover:-rotate-6 transition-transform">
<span class="material-symbols-outlined text-2xl">engineering</span>
</div>
<div class="mt-6 mb-4">
<h3 class="text-2xl font-bold text-white mb-2">Earn by Managing</h3>
<p class="text-slate-400 text-sm leading-relaxed">For creators and quiz masters. Build engaging quiz portals, manage the content, and earn a revenue share from player engagement and ads.</p>
</div>
<ul class="space-y-3 mb-8 flex-1">
<li class="flex items-center gap-3 text-slate-200">
<span class="material-symbols-outlined text-purple-300 text-sm">check_circle</span>
<span>50/50 Ad Revenue Split</span>
</li>
<li class="flex items-center gap-3 text-slate-200">
<span class="material-symbols-outlined text-purple-300 text-sm">check_circle</span>
<span>White-label Portal Options</span>
</li>
<li class="flex items-center gap-3 text-slate-200">
<span class="material-symbols-outlined text-purple-300 text-sm">check_circle</span>
<span>Detailed User Analytics</span>
</li>
</ul>
<button class="w-full py-3 rounded-full bg-[#231530] text-white hover:bg-[#362348] transition-colors font-bold text-sm">
Apply as Manager
</button>
</div>
</div>
</div>
<!-- Earnings Calculator Widget -->
<div class="container mx-auto px-4 py-16 max-w-5xl">
<div class="glass-panel rounded-xl lg:rounded-2xl p-6 lg:p-12 border border-[#4d3267] shadow-2xl relative overflow-hidden">
<!-- Decoration Gradients -->
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/20 blur-[100px] rounded-full pointer-events-none"></div>
<div class="absolute bottom-0 left-0 w-64 h-64 bg-blue-500/10 blur-[100px] rounded-full pointer-events-none"></div>
<div class="relative z-10 grid lg:grid-cols-2 gap-12 items-center">
<div class="flex flex-col gap-8">
<div>
<h2 class="text-3xl font-bold text-white mb-2">Calculate Potential</h2>
<p class="text-slate-400">Estimate your monthly earnings based on your reach.</p>
</div>
<!-- Slider 1 -->
<div class="space-y-4">
<div class="flex justify-between text-sm font-medium text-slate-300">
<span>Monthly Views</span>
<span class="text-white">50k</span>
</div>
<input class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer" max="100" min="1" type="range" value="50"/>
<div class="flex justify-between text-xs text-slate-500">
<span>1k</span>
<span>100k+</span>
</div>
</div>
<!-- Slider 2 -->
<div class="space-y-4">
<div class="flex justify-between text-sm font-medium text-slate-300">
<span>Referral Conversion</span>
<span class="text-white">3%</span>
</div>
<input class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer" max="10" min="1" type="range" value="3"/>
<div class="flex justify-between text-xs text-slate-500">
<span>1%</span>
<span>10%</span>
</div>
</div>
</div>
<div class="flex flex-col items-center justify-center p-8 bg-background-dark/80 rounded-2xl border border-[#4d3267] text-center shadow-inner">
<p class="text-slate-400 text-sm font-medium uppercase tracking-widest mb-4">Estimated Monthly Earnings</p>
<div class="text-6xl font-black text-white mb-2 neon-text-glow">$3,450</div>
<p class="text-primary text-sm font-medium bg-primary/10 px-3 py-1 rounded-full border border-primary/20">
Based on Starter Tier
</p>
<button class="mt-8 bg-white text-primary hover:bg-slate-200 font-bold py-3 px-8 rounded-full transition-colors w-full max-w-[200px]">
Start Earning
</button>
</div>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="container mx-auto px-4 py-20 text-center">
<h2 class="text-4xl font-bold text-white mb-6">Ready to Join the Quest?</h2>
<div class="flex justify-center gap-4">
<button class="bg-primary hover:bg-primary/80 text-white font-bold h-14 px-8 rounded-full text-lg shadow-[0_0_40px_rgba(127,19,236,0.4)] transition-all hover:-translate-y-1">
Become a Partner Now
</button>
</div>
<p class="mt-6 text-slate-500 text-sm">No credit card required to join. Approval within 24 hours.</p>
</div>
</main>
<!-- Footer -->
<footer class="border-t border-[#362348] bg-background-dark py-12">
<div class="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2 text-white opacity-50">
<span class="material-symbols-outlined">stadia_controller</span>
<span class="font-bold">QuizQuest</span>
</div>
<div class="text-slate-500 text-sm">
© 2024 QuizQuest Inc. All rights reserved.
</div>
<div class="flex gap-6">
<a class="text-slate-500 hover:text-white transition-colors" href="#"><span class="sr-only">Twitter</span>
<!-- Simple icon svg placeholder -->
<svg class="h-5 w-5 fill-current" viewbox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>
</a>
<a class="text-slate-500 hover:text-white transition-colors" href="#"><span class="sr-only">GitHub</span>
<svg class="h-5 w-5 fill-current" viewbox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg>
</a>
</div>
</div>
</footer>
</body></html>