<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Affiliate Program & Vendor Info | Quiz Portal</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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=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"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5b13ec",
"background-light": "#f6f6f8",
"background-dark": "#0a0a0a",
"card-dark": "#161022",
"border-dark": "#2e2839",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
.glow-primary {
box-shadow: 0 0 20px rgba(91, 19, 236, 0.2);
}
input[type='range'] {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
background: #2e2839;
height: 0.5rem;
border-radius: 0.5rem;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
margin-top: -8px;
background-color: #5b13ec;
border-radius: 50%;
height: 1.5rem;
width: 1.5rem;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display">
<!-- Navigation -->
<header class="sticky top-0 z-50 w-full border-b border-solid border-border-dark bg-background-dark/80 backdrop-blur-md px-6 lg:px-20 py-4">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="text-primary">
<span class="material-symbols-outlined text-4xl">style</span>
</div>
<h2 class="text-xl font-bold tracking-tight">Quiz Portal</h2>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">How it Works</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Commissions</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Calculator</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">FAQ</a>
</nav>
<div class="flex items-center gap-4">
<button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg font-bold text-sm transition-all">
Apply as Vendor
</button>
<div class="h-10 w-10 rounded-full bg-border-dark overflow-hidden border border-primary/20">
<img class="w-full h-full object-cover" data-alt="User profile avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDEUi1ZFe0ict5mXqVEsjMcpblpCEZMaCyxeaTIDS2a9YnphSJ04ogMeWv-qz4gRqZw6dtUq4HaBQNosflHyMcPdT1CqKi0p83CS2txLkXPnMHLZI4MGJZ3qOHqucfMRxEOy3aPXH1d59dC-cHFx3j24y4OzKgdzgga0ngfOVxKRxfjgWspRDd5zzfSxvg8hTJqvQ8xnafTWPWlt0l144xZrmfYIOxmh16M7wKYeQCEIYmENJZvYHi8t3DGTrN-mZSrB60LhwvmAGqj"/>
</div>
</div>
</div>
</header>
<main class="max-w-7xl mx-auto px-6 lg:px-20 py-12">
<!-- Hero Section -->
<section class="relative rounded-2xl overflow-hidden mb-20">
<div class="absolute inset-0 bg-gradient-to-r from-background-dark via-background-dark/80 to-transparent z-10"></div>
<img class="absolute inset-0 w-full h-full object-cover" data-alt="High tech digital circuit board background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDiIOTuZEtw3ktN_SUW-i6yxm5fm7zd3ZJcRY0xfwWErHNC2Z-iQD-Bsj3jCHNG2JbDMGr95W4nyLK50D6jozy6gcP0_MXceQZEK80VhzngGcdPWCh5YBqsUs9jkgA_9ntQtf7WuvDoOaGNmOEnKvLfrdJrYt8xr5wscnZTEXsyA5dcFMW6BZJS_No7KJwUjF52y1MFQXeJukN77-Rb2MHlkEZxNiFobvU1arxvMPOhBT0slAFC9NGfbUKUTZE7PuWifmEeUo-HM6oV"/>
<div class="relative z-20 py-20 px-10 md:px-16 max-w-2xl">
<span class="inline-block px-4 py-1 rounded-full bg-primary/20 text-primary text-xs font-bold uppercase tracking-widest mb-6">Partner Program</span>
<h1 class="text-5xl md:text-6xl font-black leading-tight mb-6">
Empower Your Reach. <br/>
<span class="text-primary">Earn More</span> as a Partner.
</h1>
<p class="text-lg text-slate-400 mb-8 leading-relaxed">
Join the high-energy affiliate program designed for growth. Gamify your earnings with our unique recurring commission structure and vendor-first ecosystem.
</p>
<div class="flex flex-wrap gap-4">
<button class="bg-primary text-white px-8 py-4 rounded-xl font-bold text-lg hover:scale-105 transition-transform">
Get Started Now
</button>
<button class="bg-white/5 border border-white/10 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-white/10 transition-colors">
View Tiers
</button>
</div>
</div>
</section>
<!-- Commission Breakdown -->
<section class="mb-24">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Commission Structure</h2>
<p class="text-slate-400">Two ways to build your revenue stream with our platform</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<!-- Registration Commission -->
<div class="bg-card-dark border border-border-dark p-8 rounded-2xl hover:border-primary/50 transition-colors group">
<div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white text-3xl">person_add</span>
</div>
<h3 class="text-2xl font-bold mb-4">Registration Bonus</h3>
<p class="text-slate-400 mb-6">Earn a flat fee for every new vendor you bring to the platform. Instant payouts upon account verification.</p>
<div class="flex items-baseline gap-2">
<span class="text-4xl font-black text-primary">$50</span>
<span class="text-slate-500 font-medium">per referral</span>
</div>
<ul class="mt-8 space-y-3 text-sm text-slate-300">
<li class="flex items-center gap-2"><span class="material-symbols-outlined text-primary text-sm">check_circle</span> Instant payout</li>
<li class="flex items-center gap-2"><span class="material-symbols-outlined text-primary text-sm">check_circle</span> No limit on referrals</li>
</ul>
</div>
<!-- Subscription Commission -->
<div class="bg-card-dark border border-border-dark p-8 rounded-2xl hover:border-primary/50 transition-colors group">
<div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white text-3xl">rebase_edit</span>
</div>
<h3 class="text-2xl font-bold mb-4">Recurring Subscription</h3>
<p class="text-slate-400 mb-6">Get a recurring percentage for every active subscription from your referrals. Passive income at its best.</p>
<div class="flex items-baseline gap-2">
<span class="text-4xl font-black text-primary">20%</span>
<span class="text-slate-500 font-medium">lifetime share</span>
</div>
<ul class="mt-8 space-y-3 text-sm text-slate-300">
<li class="flex items-center gap-2"><span class="material-symbols-outlined text-primary text-sm">check_circle</span> Monthly payouts</li>
<li class="flex items-center gap-2"><span class="material-symbols-outlined text-primary text-sm">check_circle</span> Performance bonuses</li>
</ul>
</div>
</div>
</section>
<!-- Earnings Calculator -->
<section class="bg-card-dark border border-border-dark rounded-3xl p-8 md:p-12 mb-24 overflow-hidden relative">
<div class="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-primary/10 blur-[100px] rounded-full"></div>
<div class="relative z-10 flex flex-col lg:flex-row gap-12">
<div class="lg:w-1/2">
<h2 class="text-3xl font-bold mb-6">Commission Calculator</h2>
<p class="text-slate-400 mb-10">Estimate your potential monthly earnings based on your referral volume and their performance.</p>
<div class="space-y-10">
<div>
<div class="flex justify-between mb-4">
<label class="text-sm font-bold uppercase tracking-wider text-slate-300">Monthly Referrals</label>
<span class="text-primary font-bold">50</span>
</div>
<input class="w-full h-2 bg-border-dark rounded-lg appearance-none cursor-pointer" max="200" min="0" type="range" value="50"/>
</div>
<div>
<div class="flex justify-between mb-4">
<label class="text-sm font-bold uppercase tracking-wider text-slate-300">Avg. Vendor Revenue</label>
<span class="text-primary font-bold">$2,500</span>
</div>
<input class="w-full h-2 bg-border-dark rounded-lg appearance-none cursor-pointer" max="10000" min="500" step="500" type="range" value="2500"/>
</div>
</div>
</div>
<div class="lg:w-1/2 flex flex-col justify-center items-center bg-background-dark/50 border border-border-dark rounded-2xl p-10 text-center">
<span class="text-slate-500 font-medium mb-2 uppercase tracking-tighter">Estimated Monthly Earnings</span>
<div class="text-6xl font-black text-white mb-4">$12,450</div>
<div class="bg-primary/20 text-primary px-4 py-1 rounded-full text-sm font-bold mb-8">Level 3: Pro Partner Status</div>
<p class="text-slate-400 text-sm italic max-w-xs mx-auto">
Earnings are estimates based on standard tier performance. Actual results may vary based on retention.
</p>
</div>
</div>
</section>
<!-- Growth Journey (Tiers) -->
<section class="mb-24">
<div class="flex items-center justify-between mb-12">
<h2 class="text-3xl font-bold">Your Growth Journey</h2>
<div class="flex gap-2">
<span class="material-symbols-outlined text-primary">military_tech</span>
<span class="font-bold">Partner Levels</span>
</div>
</div>
<div class="grid md:grid-cols-3 gap-6">
<!-- Tier 1 -->
<div class="bg-card-dark/40 border border-border-dark p-6 rounded-xl">
<div class="flex justify-between items-start mb-4">
<span class="text-xs font-bold text-slate-500 uppercase">Bronze Tier</span>
<span class="material-symbols-outlined text-slate-500">star</span>
</div>
<h4 class="text-xl font-bold mb-2">Associate</h4>
<p class="text-sm text-slate-500 mb-6">Start your journey and earn standard rates.</p>
<div class="w-full bg-border-dark h-2 rounded-full overflow-hidden">
<div class="bg-primary h-full w-full"></div>
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-xs font-medium text-slate-400">15% Comm.</span>
<span class="text-xs font-bold text-primary">Completed</span>
</div>
</div>
<!-- Tier 2 -->
<div class="bg-card-dark border-2 border-primary p-6 rounded-xl relative overflow-hidden">
<div class="absolute top-0 right-0 bg-primary text-white text-[10px] font-bold px-3 py-1 rounded-bl-lg">CURRENT</div>
<div class="flex justify-between items-start mb-4">
<span class="text-xs font-bold text-primary uppercase">Gold Tier</span>
<span class="material-symbols-outlined text-primary">workspace_premium</span>
</div>
<h4 class="text-xl font-bold mb-2">Elite Partner</h4>
<p class="text-sm text-slate-500 mb-6">Increased rates and priority support access.</p>
<div class="w-full bg-border-dark h-2 rounded-full overflow-hidden">
<div class="bg-primary h-full w-[65%]"></div>
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-xs font-medium text-slate-400">20% Comm.</span>
<span class="text-xs font-bold text-primary">65% to next level</span>
</div>
</div>
<!-- Tier 3 -->
<div class="bg-card-dark/40 border border-border-dark p-6 rounded-xl opacity-60">
<div class="flex justify-between items-start mb-4">
<span class="text-xs font-bold text-slate-500 uppercase">Platinum Tier</span>
<span class="material-symbols-outlined text-slate-500">diamond</span>
</div>
<h4 class="text-xl font-bold mb-2">Legendary</h4>
<p class="text-sm text-slate-500 mb-6">Custom white-label options and highest rates.</p>
<div class="w-full bg-border-dark h-2 rounded-full overflow-hidden">
<div class="bg-primary/20 h-full w-0"></div>
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-xs font-medium text-slate-400">25% Comm.</span>
<span class="text-xs font-bold text-slate-600">Locked</span>
</div>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="mb-24 py-16 bg-gradient-to-br from-primary via-primary/80 to-primary rounded-3xl text-center px-6 relative overflow-hidden">
<div class="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')]"></div>
<div class="relative z-10">
<h2 class="text-4xl md:text-5xl font-black text-white mb-6">Ready to scale your earnings?</h2>
<p class="text-white/80 text-lg mb-10 max-w-2xl mx-auto">
Join over 2,500 successful vendors who have transformed their reach with our gamified platform. Application takes less than 5 minutes.
</p>
<button class="bg-white text-primary px-12 py-5 rounded-2xl font-black text-xl hover:scale-105 transition-all shadow-2xl">
Apply as Vendor Now
</button>
<p class="mt-6 text-white/60 text-sm">No setup fees. No hidden costs. Pure performance.</p>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-background-dark border-t border-border-dark py-12 px-6 lg:px-20">
<div class="max-w-7xl mx-auto grid md:grid-cols-4 gap-12">
<div class="col-span-1 md:col-span-1">
<div class="flex items-center gap-3 mb-6">
<div class="text-primary">
<span class="material-symbols-outlined text-3xl">style</span>
</div>
<h2 class="text-xl font-bold tracking-tight">Quiz Portal</h2>
</div>
<p class="text-slate-500 text-sm leading-relaxed">
The world's first gamified quiz portal built for creators, educators, and high-performance affiliates.
</p>
</div>
<div>
<h4 class="font-bold mb-6">Company</h4>
<ul class="space-y-4 text-sm text-slate-400">
<li><a class="hover:text-primary transition-colors" href="#">About Us</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Careers</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Privacy Policy</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Terms of Service</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-6">Resources</h4>
<ul class="space-y-4 text-sm text-slate-400">
<li><a class="hover:text-primary transition-colors" href="#">Documentation</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Vendor Handbook</a></li>
<li><a class="hover:text-primary transition-colors" href="#">API Status</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Support Center</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-6">Connect</h4>
<div class="flex gap-4 mb-6">
<a class="w-10 h-10 rounded-lg bg-card-dark flex items-center justify-center hover:bg-primary transition-colors border border-border-dark" href="#">
<span class="material-symbols-outlined text-sm">share</span>
</a>
<a class="w-10 h-10 rounded-lg bg-card-dark flex items-center justify-center hover:bg-primary transition-colors border border-border-dark" href="#">
<span class="material-symbols-outlined text-sm">public</span>
</a>
<a class="w-10 h-10 rounded-lg bg-card-dark flex items-center justify-center hover:bg-primary transition-colors border border-border-dark" href="#">
<span class="material-symbols-outlined text-sm">alternate_email</span>
</a>
</div>
<p class="text-xs text-slate-600">© 2024 Quiz Portal Inc. All rights reserved.</p>
</div>
</div>
</footer>
</body></html>