<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Affiliate & Vendor Program</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7c3aed", // Vibrant purple
secondary: "#fbbf24", // Gold/Yellow accent
"background-light": "#f3f4f6",
"background-dark": "#0B0A14", // Deep dark background
"surface-light": "#ffffff",
"surface-dark": "#161521", // Slightly lighter dark for cards
"border-dark": "#2d2b3b",
},
fontFamily: {
display: ["Inter", "sans-serif"],
body: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.75rem",
'xl': "1rem",
'2xl': "1.5rem",
},
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.bg-gradient-primary {
background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-gray-100 transition-colors duration-300 font-body">
<nav class="fixed w-full z-50 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-gray-200 dark:border-border-dark">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex items-center gap-3">
<div class="bg-primary p-2 rounded-lg text-white">
<span class="material-icons">sports_esports</span>
</div>
<span class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">QuizQuest</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-colors" href="#">Home</a>
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-colors" href="#">Prizes</a>
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-colors" href="#">Leaderboard</a>
<a class="text-primary dark:text-white bg-purple-100 dark:bg-primary/20 hover:bg-purple-200 dark:hover:bg-primary/30 px-3 py-2 rounded-md text-sm font-medium transition-colors" href="#">Partner Program</a>
</div>
</div>
<div class="flex items-center gap-4">
<a class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-primary" href="#">Login</a>
<a class="bg-primary hover:bg-purple-700 text-white px-5 py-2.5 rounded-full text-sm font-bold transition-all shadow-lg shadow-primary/30" href="#">Join Now</a>
<button class="p-2 rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-surface-dark" onclick="document.documentElement.classList.toggle('dark')">
<span class="material-icons dark:hidden">dark_mode</span>
<span class="material-icons hidden dark:block">light_mode</span>
</button>
</div>
</div>
</div>
</nav>
<div class="relative pt-32 pb-20 overflow-hidden">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full overflow-hidden -z-10 pointer-events-none">
<div class="absolute top-[-10%] left-[20%] w-[500px] h-[500px] bg-primary/20 rounded-full blur-[120px]"></div>
<div class="absolute bottom-[-10%] right-[10%] w-[400px] h-[400px] bg-blue-500/10 dark:bg-blue-500/20 rounded-full blur-[100px]"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400 mb-6 border border-yellow-200 dark:border-yellow-700/50">
<span class="w-2 h-2 bg-yellow-500 rounded-full mr-2 animate-pulse"></span>
Partner with QuizQuest
</span>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6">
Turn Your Influence <br/>
<span class="text-gradient bg-gradient-to-r from-primary via-purple-500 to-blue-500 dark:from-purple-400 dark:via-primary dark:to-blue-400">Into Income.</span>
</h1>
<p class="mt-4 max-w-2xl mx-auto text-xl text-gray-600 dark:text-gray-400">
Join thousands of partners earning daily rewards. Choose your path: become an Affiliate or scale up as a Vendor.
</p>
<div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
<a class="flex items-center justify-center px-8 py-4 border border-transparent text-base font-bold rounded-xl text-white bg-primary hover:bg-purple-700 md:text-lg transition-all shadow-lg hover:shadow-primary/40" href="#affiliate">
<span class="material-icons mr-2">group_add</span>
Become an Affiliate
</a>
<a class="flex items-center justify-center px-8 py-4 border border-gray-300 dark:border-gray-600 text-base font-bold rounded-xl text-gray-700 dark:text-gray-200 bg-white dark:bg-surface-dark hover:bg-gray-50 dark:hover:bg-gray-800 md:text-lg transition-all" href="#vendor">
<span class="material-icons mr-2">storefront</span>
Become a Vendor
</a>
</div>
</div>
</div>
<div class="py-16 bg-white dark:bg-surface-dark relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
<div class="bg-background-light dark:bg-background-dark rounded-3xl p-8 lg:p-12 border border-gray-200 dark:border-border-dark shadow-xl relative overflow-hidden group hover:border-blue-400 dark:hover:border-blue-500/50 transition-colors" id="affiliate">
<div class="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-icons text-9xl text-blue-500">share</span>
</div>
<div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 mb-8">
<span class="material-icons text-3xl">campaign</span>
</div>
<h2 class="text-3xl font-bold mb-4">Affiliate Program</h2>
<p class="text-gray-600 dark:text-gray-400 mb-8 text-lg">
Perfect for influencers and content creators. Share your unique link and earn commissions for every new player who joins a quest.
</p>
<div class="space-y-6 mb-10">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<span class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-500 text-white text-sm font-bold">1</span>
</div>
<div class="ml-4">
<h4 class="text-lg font-semibold">Share Your Link</h4>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Post on social media, blogs, or send to friends.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<span class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-500 text-white text-sm font-bold">2</span>
</div>
<div class="ml-4">
<h4 class="text-lg font-semibold">Users Join Quests</h4>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">When they play their first paid quest, you get tracked.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<span class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-500 text-white text-sm font-bold">3</span>
</div>
<div class="ml-4">
<h4 class="text-lg font-semibold">Earn 15% Lifetime</h4>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Get 15% of every entry fee they pay, forever.</p>
</div>
</div>
</div>
<a class="inline-flex items-center justify-center w-full px-6 py-4 text-base font-bold text-white transition-all bg-blue-600 border border-transparent rounded-xl hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-lg shadow-blue-500/30" href="#">
Start Referring Now
<span class="material-icons ml-2">arrow_forward</span>
</a>
</div>
<div class="bg-surface-light dark:bg-background-dark rounded-3xl p-8 lg:p-12 border border-purple-200 dark:border-primary/30 shadow-2xl relative overflow-hidden group ring-1 ring-primary/20" id="vendor">
<div class="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-transparent pointer-events-none"></div>
<div class="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-icons text-9xl text-primary">business_center</span>
</div>
<div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-purple-100 text-primary dark:bg-primary/20 dark:text-purple-300 mb-8">
<span class="material-icons text-3xl">rocket_launch</span>
</div>
<h2 class="text-3xl font-bold mb-4">Vendor Program</h2>
<p class="text-gray-600 dark:text-gray-400 mb-8 text-lg">
For business builders and networks. Manage a team of sub-vendors, access detailed analytics, and unlock higher commission tiers.
</p>
<div class="space-y-6 mb-10">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<span class="flex items-center justify-center h-6 w-6 rounded-full bg-primary text-white text-sm font-bold">1</span>
</div>
<div class="ml-4">
<h4 class="text-lg font-semibold">Build Your Network</h4>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Recruit sub-affiliates and earn override commissions on their sales.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<span class="flex items-center justify-center h-6 w-6 rounded-full bg-primary text-white text-sm font-bold">2</span>
</div>
<div class="ml-4">
<h4 class="text-lg font-semibold">Advanced Analytics Dashboard</h4>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Track cohort retention, LTV, and campaign performance.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<span class="flex items-center justify-center h-6 w-6 rounded-full bg-primary text-white text-sm font-bold">3</span>
</div>
<div class="ml-4">
<h4 class="text-lg font-semibold">Up to 30% Commission</h4>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Higher volume unlocks our highest tier revenue share.</p>
</div>
</div>
</div>
<a class="inline-flex items-center justify-center w-full px-6 py-4 text-base font-bold text-white transition-all bg-primary border border-transparent rounded-xl hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary shadow-lg shadow-primary/30" href="#">
Apply as Vendor
<span class="material-icons ml-2">verified_user</span>
</a>
</div>
</div>
</div>
</div>
<div class="py-20 relative overflow-hidden">
<div class="absolute inset-0 bg-background-light dark:bg-background-dark -z-10"></div>
<div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-gray-100 to-transparent dark:from-surface-dark dark:to-transparent -z-10"></div>
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-extrabold mb-4">Estimate Your Earnings</h2>
<p class="text-gray-600 dark:text-gray-400">See how much you could earn based on your monthly referrals.</p>
</div>
<div class="bg-white dark:bg-surface-dark rounded-3xl p-8 shadow-2xl border border-gray-200 dark:border-border-dark">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div class="space-y-8">
<div>
<div class="flex justify-between mb-2">
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">Monthly Referrals</label>
<span class="text-sm font-bold text-primary" id="referral-count-display">500</span>
</div>
<input class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary" id="referral-slider" max="5000" min="10" type="range" value="500"/>
<div class="flex justify-between mt-1 text-xs text-gray-400">
<span>10</span>
<span>5,000+</span>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">Avg. Spend per User</label>
<span class="text-sm font-bold text-primary">₹500</span>
</div>
<input class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary" disabled="" max="2000" min="100" type="range" value="500"/>
<p class="text-xs text-gray-400 mt-2">Based on platform average user spend.</p>
</div>
<div class="flex items-center gap-4 pt-4">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Program Type:</span>
<div class="flex bg-gray-100 dark:bg-background-dark p-1 rounded-lg">
<button class="px-4 py-1.5 text-sm font-medium rounded-md bg-white dark:bg-primary text-gray-900 dark:text-white shadow-sm transition-all">Affiliate</button>
<button class="px-4 py-1.5 text-sm font-medium rounded-md text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-all">Vendor</button>
</div>
</div>
</div>
<div class="relative">
<div class="absolute inset-0 bg-gradient-to-tr from-primary to-blue-600 rounded-2xl blur-lg opacity-40 dark:opacity-60"></div>
<div class="relative bg-white dark:bg-[#1a1924] rounded-2xl p-8 text-center border border-gray-100 dark:border-border-dark">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Monthly Potential</p>
<h3 class="text-5xl font-extrabold text-gray-900 dark:text-white mb-2">₹37,500</h3>
<div class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
<span class="material-icons text-[14px] mr-1">trending_up</span> +15% Commission Rate
</div>
<p class="text-xs text-gray-400 mt-6">*Estimates are based on average user activity and are not guaranteed.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-20 bg-background-light dark:bg-background-dark">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Why Partner with QuizQuest?</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">We provide the tools, support, and product that converts. Focus on traffic, we handle the rest.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white dark:bg-surface-dark p-8 rounded-2xl border border-gray-100 dark:border-border-dark hover:-translate-y-1 transition-transform duration-300">
<div class="w-12 h-12 bg-purple-100 dark:bg-primary/20 rounded-xl flex items-center justify-center text-primary mb-6">
<span class="material-icons">payments</span>
</div>
<h3 class="text-xl font-bold mb-3">Instant Payouts</h3>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
Withdraw your earnings daily. No net-30 waiting periods. Minimum payout threshold is just ₹500.
</p>
</div>
<div class="bg-white dark:bg-surface-dark p-8 rounded-2xl border border-gray-100 dark:border-border-dark hover:-translate-y-1 transition-transform duration-300">
<div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-500/20 rounded-xl flex items-center justify-center text-yellow-600 dark:text-yellow-400 mb-6">
<span class="material-icons">query_stats</span>
</div>
<h3 class="text-xl font-bold mb-3">Real-Time Tracking</h3>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
Our advanced dashboard lets you see clicks, registrations, and commissions as they happen live.
</p>
</div>
<div class="bg-white dark:bg-surface-dark p-8 rounded-2xl border border-gray-100 dark:border-border-dark hover:-translate-y-1 transition-transform duration-300">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-500/20 rounded-xl flex items-center justify-center text-blue-600 dark:text-blue-400 mb-6">
<span class="material-icons">support_agent</span>
</div>
<h3 class="text-xl font-bold mb-3">Dedicated Support</h3>
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
Get a dedicated account manager to help optimize your campaigns and creative assets.
</p>
</div>
</div>
</div>
</div>
<div class="py-20">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="relative overflow-hidden rounded-3xl bg-primary px-6 py-16 shadow-2xl sm:px-16 md:pt-20 lg:flex lg:gap-x-20 lg:px-24">
<svg aria-hidden="true" class="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0" viewBox="0 0 1024 1024">
<circle cx="512" cy="512" fill="url(#gradient)" fill-opacity="0.7" r="512"></circle>
<defs>
<radialGradient id="gradient">
<stop stop-color="#7775D6"></stop>
<stop offset="1" stop-color="#E935C1"></stop>
</radialGradient>
</defs>
</svg>
<div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-16 lg:text-left">
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Ready to level up your income?<br/>Join the league today.</h2>
<p class="mt-6 text-lg leading-8 text-gray-200">Start earning passive income by introducing players to the most exciting quiz platform on the web.</p>
<div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
<a class="rounded-full bg-white px-8 py-3.5 text-sm font-bold text-primary shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white transition-colors" href="#">Get Started</a>
<a class="text-sm font-semibold leading-6 text-white hover:text-gray-200" href="#">Contact Sales <span aria-hidden="true">→</span></a>
</div>
</div>
<div class="relative mt-16 h-80 lg:mt-8">
<div class="absolute left-0 top-0 w-[400px] h-full bg-surface-dark/40 backdrop-blur-md rounded-xl border border-white/10 p-4 transform rotate-6 hover:rotate-0 transition-transform duration-500">
<div class="flex items-center justify-between mb-4 border-b border-white/10 pb-2">
<div class="h-3 w-20 bg-white/20 rounded-full"></div>
<div class="h-6 w-6 bg-green-500/20 rounded-full flex items-center justify-center"><span class="material-icons text-green-400 text-xs">arrow_upward</span></div>
</div>
<div class="space-y-3">
<div class="flex items-center gap-3">
<div class="h-8 w-8 bg-purple-500 rounded-lg"></div>
<div class="space-y-1">
<div class="h-2 w-24 bg-white/40 rounded-full"></div>
<div class="h-2 w-16 bg-white/20 rounded-full"></div>
</div>
<div class="ml-auto h-4 w-12 bg-green-500/80 rounded-full"></div>
</div>
<div class="flex items-center gap-3">
<div class="h-8 w-8 bg-blue-500 rounded-lg"></div>
<div class="space-y-1">
<div class="h-2 w-28 bg-white/40 rounded-full"></div>
<div class="h-2 w-12 bg-white/20 rounded-full"></div>
</div>
<div class="ml-auto h-4 w-12 bg-green-500/80 rounded-full"></div>
</div>
<div class="flex items-center gap-3">
<div class="h-8 w-8 bg-yellow-500 rounded-lg"></div>
<div class="space-y-1">
<div class="h-2 w-20 bg-white/40 rounded-full"></div>
<div class="h-2 w-14 bg-white/20 rounded-full"></div>
</div>
<div class="ml-auto h-4 w-12 bg-green-500/80 rounded-full"></div>
</div>
</div>
<div class="mt-6 p-3 bg-white/5 rounded-lg border border-white/5">
<div class="flex justify-between items-center mb-2">
<span class="text-[10px] text-white/60">Total Earnings</span>
</div>
<div class="text-2xl font-bold text-white">₹12,450</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-white dark:bg-background-dark border-t border-gray-200 dark:border-border-dark pt-12 pb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center mb-8">
<div class="flex items-center gap-2 mb-4 md:mb-0">
<span class="material-icons text-primary">sports_esports</span>
<span class="text-lg font-bold dark:text-white">QuizQuest</span>
</div>
<div class="flex space-x-6">
<a class="text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors" href="#">Terms</a>
<a class="text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors" href="#">Privacy</a>
<a class="text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors" href="#">Support</a>
</div>
</div>
<div class="text-center text-sm text-gray-500 dark:text-gray-600">
© 2023 QuizQuest Inc. All rights reserved.
</div>
</div>
</footer>
<script>
// Simple script for calculator interactivity
const slider = document.getElementById('referral-slider');
const display = document.getElementById('referral-count-display');
slider.addEventListener('input', function() {
display.textContent = this.value;
// In a real app, this would recalculate earnings
});
</script>
</body></html>