<!DOCTYPE html>
<html 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 id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#25f46a",
"background-light": "#f8fcf9", // Slightly adjusted to match the provided component bg
"background-dark": "#102216",
"surface-light": "#ffffff",
"surface-dark": "#1a2e22",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"],
"body": ["Spline Sans", "sans-serif"],
},
borderRadius: {
"DEFAULT": "0.5rem",
"lg": "1rem",
"xl": "1.5rem",
"2xl": "2rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
.bg-grid-pattern {
background-image: radial-gradient(#25f46a 1px, transparent 1px);
background-size: 24px 24px;
opacity: 0.15;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 antialiased overflow-x-hidden">
<div class="relative flex min-h-screen w-full flex-col">
<!-- Navbar -->
<header class="sticky top-0 z-50 w-full border-b border-primary/20 bg-background-light/95 backdrop-blur dark:bg-background-dark/95">
<div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2">
<div class="text-primary">
<span class="material-symbols-outlined text-3xl">psychology_alt</span>
</div>
<span class="text-xl font-bold tracking-tight text-slate-900 dark:text-white">QuizQuest</span>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-sm font-medium text-slate-600 hover:text-primary dark:text-slate-300 dark:hover:text-primary transition-colors" href="#">Features</a>
<a class="text-sm font-medium text-slate-600 hover:text-primary dark:text-slate-300 dark:hover:text-primary transition-colors" href="#">Pricing</a>
<a class="text-sm font-medium text-primary" href="#">Affiliates</a>
</nav>
<div class="flex items-center gap-4">
<a class="hidden sm:block text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white" href="#">Log in</a>
<button class="bg-primary hover:bg-primary/90 text-slate-900 font-bold py-2 px-5 rounded-full text-sm transition-transform active:scale-95 shadow-[0_4px_14px_0_rgba(37,244,106,0.39)]">
Get Started
</button>
</div>
</div>
</header>
<main class="flex-grow">
<!-- Hero Section -->
<section class="relative overflow-hidden pt-16 pb-20 lg:pt-32 lg:pb-28">
<!-- Decorative background elements -->
<div class="absolute top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
<div class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 rounded-full blur-3xl"></div>
<div class="absolute top-1/2 right-0 w-64 h-64 bg-primary/10 rounded-full blur-3xl transform translate-x-1/2"></div>
<div class="absolute inset-0 bg-grid-pattern [mask-image:linear-gradient(to_bottom,white,transparent)] dark:[mask-image:linear-gradient(to_bottom,black,transparent)]"></div>
</div>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="flex flex-col items-start gap-6 max-w-2xl">
<div class="inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-sm font-medium text-slate-800 dark:text-primary border border-primary/20">
<span class="material-symbols-outlined text-lg text-primary">campaign</span>
New Affiliate Dashboard Live
</div>
<h1 class="text-5xl lg:text-6xl font-black tracking-tight text-slate-900 dark:text-white leading-[1.1]">
Turn Your Audience into <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-600">Quiz Masters</span>
</h1>
<p class="text-lg text-slate-600 dark:text-slate-300 max-w-lg leading-relaxed">
Earn up to <span class="font-bold text-slate-900 dark:text-white bg-primary/20 px-1 rounded">30% recurring commission</span> for every new QuizQuest subscriber you refer. Join our gamified affiliate program today.
</p>
<div class="flex flex-wrap gap-4 pt-2">
<button class="bg-primary hover:bg-primary/90 text-slate-900 font-bold h-14 px-8 rounded-full text-lg transition-all shadow-[0_4px_14px_0_rgba(37,244,106,0.5)] hover:-translate-y-1">
Join Program
</button>
<button class="bg-white dark:bg-surface-dark border border-slate-200 dark:border-slate-700 hover:border-primary/50 text-slate-900 dark:text-white font-bold h-14 px-8 rounded-full text-lg transition-all flex items-center gap-2 hover:bg-slate-50 dark:hover:bg-slate-800">
<span class="material-symbols-outlined">login</span>
Partner Login
</button>
</div>
<div class="flex items-center gap-4 mt-4 text-sm text-slate-500 dark:text-slate-400">
<div class="flex -space-x-3">
<div class="w-8 h-8 rounded-full border-2 border-white dark:border-surface-dark bg-slate-200" data-alt="Portrait of a smiling woman" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBn3X0NGrMLN-ekt6My5qccgHtufogmfAaMZJwcNsdDKdYbZfjgHm_HPVdmXdgK4oKCsDSF9OukyoXMkr45R7Yh-uQtv2TAU5Cfyfx28FY4lXfEVDq6Kpz9-KYyvPoOk7aaJnaHOuxV5iNtb1DDdFisZRJ3eLbR9k2VN4utZjtDSp18UXXrGd5J84HCU5Y2_7Td6kTHNKi4FUXSOW8U6auvIkCunP3zmN8jpZ1DYvibWW8_hBpDe4H1cFG4NIfMFIDPyj-SRG4w'); background-size: cover;"></div>
<div class="w-8 h-8 rounded-full border-2 border-white dark:border-surface-dark bg-slate-200" data-alt="Portrait of a serious man" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCSXcx4RPUDMScAbvl4TOREy7lTstSNNhHtfhzVM8auq0SlkFRTL1FUOfOhZ_iLuPwzcrhy-CrIcZz4W_Zgw-kryJhBX5GhbnHHCFR03nejAV7VROIG4W7och_e2HNEfZQR2UWsBFHAvPG_gibg1JtACskTjbN95ZJuAXQ9HJGcIlWD-PSTohClIIq4vf7FoTx-qu-NGY2VZ8pbWGR1NXdDOcijXg6U3TtEDlmf7qEQuCCLQ9UOMzO85UhHels91mC5NW6JWOKR'); background-size: cover;"></div>
<div class="w-8 h-8 rounded-full border-2 border-white dark:border-surface-dark bg-slate-200" data-alt="Portrait of a smiling man with glasses" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBJQ3z3vlY91i6iL5NbGtBT9ZH1OxzJM4OHmalAsWoGdHA4fKHbvNeRIoN-6fjaMj5MoNqogDb9HCU8e1pi4Uzq2W3-0AFycVW13xxamfM25ZO76WTt-Tj0lCBuAm30kgAALAdg-laQEEDAWnnLAXhsitDWEJgA6VDZ_D6-TYT00tlYcjOLAsUV0lbIPtULzrrhG-_DSvyXw7sMNQPoKFRjNfeu-Hfau8fIyQfJoYWeGUiEYX5P59WzIL55qYp0dmkzMcc2T-5q'); background-size: cover;"></div>
</div>
<p>Join 2,000+ happy partners</p>
</div>
</div>
<div class="relative lg:h-auto h-64 w-full rounded-2xl overflow-hidden shadow-2xl bg-slate-100 dark:bg-surface-dark border border-slate-200 dark:border-slate-700">
<div class="absolute inset-0 bg-cover bg-center" data-alt="People working together on laptops in a modern office, bright and collaborative" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA3O86Ktjuvy3gygEK1xkF7Y9Igq_8QWSbMnZ3Zv7qHIZf00M6Wj-smfBUUB6Wg8N04NhR77oJOtdTb9xXRMHMkdCz9ditdAx4lSuGukHUgfXc-9OuzfTcX6uIFze-nqEwKti9KO3C_mr0ufYhHuMli1q30oftmTKqMeFNWLvkmsUFBSKPOhJ3lk8QzFb1gQXFaqM-uaBuXqfdzFQMWd19bDEIC1AAqJfEXkpcnFK-f-K7xiVFnebhNCgRBfODUzC2IVfLw3whq');"></div>
<div class="absolute inset-0 bg-gradient-to-t from-background-light/90 via-transparent to-transparent dark:from-background-dark/90"></div>
<div class="absolute bottom-0 left-0 p-8 w-full">
<div class="bg-white/90 dark:bg-surface-dark/90 backdrop-blur-md rounded-xl p-4 shadow-lg border border-white/20">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Top Earner This Month</span>
<span class="bg-primary text-slate-900 text-xs font-bold px-2 py-0.5 rounded-full">Pro Partner</span>
</div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-200 overflow-hidden">
<img alt="Sarah J." class="w-full h-full object-cover" data-alt="Portrait of a professional woman smiling" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCm0A45jkjLiuXFLaoIrGT7nV3Cd22GdMb1rqtfEnUADFgTxSz18KF454YRE1aogxFBBy0XEridY1sv4Bp70NBazLkM9Ik1030HDQEpBh4N6plNueIxrATmuq00rZmZu9OaGyDfW8fBOpA7cZZksSFY1uthsYHUCkUxpt8iWZx7MPsDzXlbMY1xqR5dZa772W-6GP5uLWETPuakAtNVSu_vDvFLXA9cHc0znvbqAA-LlskYAhaRJrkXB8z5yDy5DPqEeVuvmUE0"/>
</div>
<div>
<p class="font-bold text-slate-900 dark:text-white">Sarah Jenkins</p>
<p class="text-sm text-emerald-600 font-semibold">Earned $4,250.00</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Steps Section -->
<section class="py-20 bg-white dark:bg-surface-dark">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-slate-900 dark:text-white sm:text-4xl mb-4">How It Works</h2>
<p class="text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">Three simple steps to start turning your quiz skills into a revenue stream.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Step 1 -->
<div class="group relative rounded-2xl border border-slate-100 dark:border-slate-700 bg-background-light dark:bg-background-dark p-8 transition-all hover:shadow-xl hover:shadow-primary/10 hover:-translate-y-1">
<div class="absolute -top-6 left-8 flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-slate-900 shadow-lg font-bold text-xl">1</div>
<div class="mt-6 mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-primary">
<span class="material-symbols-outlined text-4xl">person_add</span>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">Sign Up Free</h3>
<p class="text-slate-600 dark:text-slate-400 leading-relaxed">Create your affiliate account in seconds. Instant approval means you can start sharing right away.</p>
</div>
<!-- Step 2 -->
<div class="group relative rounded-2xl border border-slate-100 dark:border-slate-700 bg-background-light dark:bg-background-dark p-8 transition-all hover:shadow-xl hover:shadow-primary/10 hover:-translate-y-1">
<div class="absolute -top-6 left-8 flex h-12 w-12 items-center justify-center rounded-xl bg-slate-900 dark:bg-slate-700 text-white shadow-lg font-bold text-xl">2</div>
<div class="mt-6 mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-primary">
<span class="material-symbols-outlined text-4xl">share</span>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">Share Your Link</h3>
<p class="text-slate-600 dark:text-slate-400 leading-relaxed">Get a unique referral link to share with your audience via email, social media, or your blog.</p>
</div>
<!-- Step 3 -->
<div class="group relative rounded-2xl border border-slate-100 dark:border-slate-700 bg-background-light dark:bg-background-dark p-8 transition-all hover:shadow-xl hover:shadow-primary/10 hover:-translate-y-1">
<div class="absolute -top-6 left-8 flex h-12 w-12 items-center justify-center rounded-xl bg-slate-900 dark:bg-slate-700 text-white shadow-lg font-bold text-xl">3</div>
<div class="mt-6 mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-primary">
<span class="material-symbols-outlined text-4xl">payments</span>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">Earn Cash</h3>
<p class="text-slate-600 dark:text-slate-400 leading-relaxed">Receive a 30% commission every time someone subscribes through your link. Payouts are monthly.</p>
</div>
</div>
</div>
</section>
<!-- Earnings Calculator Section -->
<section class="py-20 relative bg-background-light dark:bg-background-dark">
<div class="absolute inset-0 bg-grid-pattern opacity-[0.2]"></div>
<div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 relative z-10">
<div class="bg-white dark:bg-surface-dark rounded-[2.5rem] p-8 md:p-12 shadow-2xl border border-slate-200 dark:border-slate-700">
<div class="flex flex-col md:flex-row gap-12 items-center">
<!-- Calculator Controls -->
<div class="flex-1 w-full space-y-8">
<div>
<h2 class="text-3xl font-black text-slate-900 dark:text-white mb-2">Earnings Calculator</h2>
<p class="text-slate-600 dark:text-slate-400">See how much you could earn based on your monthly referrals.</p>
</div>
<div class="space-y-6">
<div class="flex justify-between items-end">
<label class="font-bold text-slate-700 dark:text-slate-300 text-sm uppercase tracking-wider">Monthly Referrals</label>
<div class="text-3xl font-bold text-primary tabular-nums">50</div>
</div>
<!-- Custom Slider Styles -->
<div class="relative w-full h-4 bg-slate-200 dark:bg-slate-700 rounded-full">
<div class="absolute top-0 left-0 h-full bg-primary rounded-full w-1/4"></div>
<div class="absolute top-1/2 left-1/4 -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-white border-4 border-primary rounded-full shadow-lg cursor-grab hover:scale-110 transition-transform"></div>
</div>
<div class="flex justify-between text-xs font-medium text-slate-400">
<span>0</span>
<span>200</span>
</div>
</div>
<div class="pt-4">
<div class="flex items-start gap-3 p-4 bg-primary/5 rounded-xl border border-primary/20">
<span class="material-symbols-outlined text-primary mt-0.5">info</span>
<p class="text-sm text-slate-600 dark:text-slate-300">Calculations are based on the standard "Pro" plan subscription ($29/mo) with a 30% recurring commission rate.</p>
</div>
</div>
</div>
<!-- Calculator Output Card -->
<div class="w-full md:w-96 shrink-0">
<div class="bg-slate-900 dark:bg-black rounded-3xl p-8 text-center text-white relative overflow-hidden group">
<div class="absolute top-0 right-0 p-32 bg-primary/20 rounded-full blur-[60px] -mr-16 -mt-16 transition-all duration-1000 group-hover:bg-primary/30"></div>
<p class="text-slate-400 font-medium mb-2 relative z-10">Estimated Monthly Earnings</p>
<div class="text-5xl font-black text-primary mb-6 relative z-10 tabular-nums">$435<span class="text-2xl text-primary/60">.00</span></div>
<div class="space-y-3 relative z-10">
<div class="flex justify-between text-sm py-2 border-b border-white/10">
<span class="text-slate-400">Commission Rate</span>
<span class="font-bold">30%</span>
</div>
<div class="flex justify-between text-sm py-2 border-b border-white/10">
<span class="text-slate-400">Avg. Plan Value</span>
<span class="font-bold">$29.00</span>
</div>
</div>
<button class="w-full mt-8 bg-primary hover:bg-primary/90 text-slate-900 font-bold py-3 px-6 rounded-full transition-colors relative z-10 shadow-[0_0_20px_rgba(37,244,106,0.3)]">
Start Earning Now
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 bg-white dark:bg-surface-dark overflow-hidden">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mb-12 text-center">
<h2 class="text-3xl font-bold text-slate-900 dark:text-white">Partner Success Stories</h2>
</div>
<div class="flex flex-wrap justify-center gap-6 px-4">
<!-- Testimonial 1 -->
<div class="w-full md:max-w-sm bg-background-light dark:bg-background-dark p-6 rounded-2xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-1 text-yellow-400 mb-4">
<span class="material-symbols-outlined text-sm fill-current">star</span>
<span class="material-symbols-outlined text-sm fill-current">star</span>
<span class="material-symbols-outlined text-sm fill-current">star</span>
<span class="material-symbols-outlined text-sm fill-current">star</span>
<span class="material-symbols-outlined text-sm fill-current">star</span>
</div>
<p class="text-slate-700 dark:text-slate-300 mb-6 italic">"QuizQuest has been the easiest product to promote to my education audience. The conversion rates are insane!"</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-200 bg-cover bg-center" data-alt="Portrait of a smiling man" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBjfQpgW88eK1A5wiTZkbjmJTOGf9ok4l2V5pd8gdi7Es-XEwSSDBF8xpR2qcEo-OmXiOeOOLK-bMyNCQDAEtRqpoqYklstkqcw-JX4nISFLhfqKc10FSdScdO0BRGT7sRIUkvd5XOHhUDZTUtUxMMvgPAlNVN-F65BS34GCzLMBQhLrpf144_xHOgF3CP67bymd8M0d5k0Nqto32eVA0LK4RzP6R13EvZJvQZdPyJ247kujMNC1vlZ3SyY66xLR8qPfIe3gNEv');"></div>
<div>
<p class="font-bold text-sm text-slate-900 dark:text-white">Marcus T.</p>
<p class="text-xs text-slate-500">Education Blogger</p>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="w-full md:max-w-sm bg-background-light dark:bg-background-dark p-6 rounded-2xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-1 text-yellow-400 mb-4">
<span class="material-symbols-outlined text-sm fill-current">star</span>
<span class="material-symbols-outlined text-sm fill-current">star</span>
<span class="material-symbols-outlined text-sm fill-current">star</span>
<span class="material-symbols-outlined text-sm fill-current">star</span>
<span class="material-symbols-outlined text-sm fill-current">star</span>
</div>
<p class="text-slate-700 dark:text-slate-300 mb-6 italic">"I love the monthly payouts. It's become a reliable side income stream for my newsletter."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-200 bg-cover bg-center" data-alt="Portrait of a smiling woman" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAJWut_2lJWaNQ_lDTD1i65YYPQ7Q-MR2HXwf0kYdKS8dO6wcCHmChNLqkG6Ter_XjyRqrcIzdEStO-Oh6aGlD6HQMstPI-_j41qDFJCu4L5Jb42jHNnqdRZy0i_3b1rN10qI9YhWUDyrDi_GUP9ak5speOvCAKGXI9wRL_EeE1ePiQy0nNxij2kcBClzbtBeFgWuSYCKsn2Y4ZCsK-9r6Rrjf4EJFqHeSHMJ8vSdOQ9SmguIM5oIFJ6-7uYvUaCuNCctzztLOW');"></div>
<div>
<p class="font-bold text-sm text-slate-900 dark:text-white">Elena R.</p>
<p class="text-xs text-slate-500">Tech Influencer</p>
</div>
</div>
</div>
<!-- Testimonial 3 -->
<div class="w-full md:max-w-sm bg-background-light dark:bg-background-dark p-6 rounded-2xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-1 text-yellow-400 mb-4">
<span class="material-symbols-outlined text-sm fill-current">star</span>
<span class="material-symbols-outlined text-sm fill-current">star</span>
<span class="material-symbols-outlined text-sm fill-current">star</span>
<span class="material-symbols-outlined text-sm fill-current">star</span>
<span class="material-symbols-outlined text-sm fill-current">star</span>
</div>
<p class="text-slate-700 dark:text-slate-300 mb-6 italic">"The marketing assets provided in the dashboard make it super easy to create content quickly."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-200 bg-cover bg-center" data-alt="Portrait of a smiling man" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCZaaBRZf6dSWudSDVXjf01swA3hDFrgJsWWBCL_gn5oMuZB6Er4EUBbpun_kTjyjWhCIXYc578pLdTgJF_x48hDXQms5piuOSluNhVMAkhTTwFNzyPaL8fMRVLa79NKeavuIEsA5W85b9LDqJd4mirG4RFbUObKxIlIhNDRSpXgpOnOpVNdMbEjYPrdXftMVs6E8UVV_y9qBig4Rp95Oc5yh4Gu7I3B14e9afCnRQX53axPVacxBhrsnrJ-5NNHe65Hjzpc0rn');"></div>
<div>
<p class="font-bold text-sm text-slate-900 dark:text-white">David K.</p>
<p class="text-xs text-slate-500">YouTube Creator</p>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-20 bg-background-light dark:bg-background-dark">
<div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center text-slate-900 dark:text-white mb-12">Frequently Asked Questions</h2>
<div class="space-y-4">
<!-- FAQ Item 1 -->
<div class="bg-white dark:bg-surface-dark rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
<button class="flex w-full items-center justify-between px-6 py-4 text-left font-bold text-slate-900 dark:text-white hover:bg-slate-50 dark:hover:bg-slate-800/50">
<span>How do I get paid?</span>
<span class="material-symbols-outlined text-primary">expand_more</span>
</button>
<div class="px-6 pb-4 text-slate-600 dark:text-slate-400">
We pay out monthly via PayPal or direct bank transfer once your balance reaches $50.
</div>
</div>
<!-- FAQ Item 2 -->
<div class="bg-white dark:bg-surface-dark rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
<button class="flex w-full items-center justify-between px-6 py-4 text-left font-bold text-slate-900 dark:text-white hover:bg-slate-50 dark:hover:bg-slate-800/50">
<span>Is there a cost to join?</span>
<span class="material-symbols-outlined text-slate-400">expand_more</span>
</button>
<!-- Hidden content example -->
</div>
<!-- FAQ Item 3 -->
<div class="bg-white dark:bg-surface-dark rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
<button class="flex w-full items-center justify-between px-6 py-4 text-left font-bold text-slate-900 dark:text-white hover:bg-slate-50 dark:hover:bg-slate-800/50">
<span>Can I refer myself?</span>
<span class="material-symbols-outlined text-slate-400">expand_more</span>
</button>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-white dark:bg-surface-dark border-t border-slate-200 dark:border-slate-800">
<div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-2xl">psychology_alt</span>
<span class="text-lg font-bold text-slate-900 dark:text-white">QuizQuest</span>
</div>
<div class="flex gap-8 text-sm text-slate-500">
<a class="hover:text-primary transition-colors" href="#">Terms</a>
<a class="hover:text-primary transition-colors" href="#">Privacy</a>
<a class="hover:text-primary transition-colors" href="#">Contact Support</a>
</div>
<p class="text-sm text-slate-400">© 2024 QuizQuest Inc.</p>
</div>
</div>
</footer>
<!-- Sticky Mobile CTA -->
<div class="fixed bottom-0 w-full p-4 bg-white/80 dark:bg-surface-dark/80 backdrop-blur border-t border-slate-200 dark:border-slate-700 md:hidden z-40">
<button class="w-full bg-primary hover:bg-primary/90 text-slate-900 font-bold py-3 px-6 rounded-full shadow-lg">
Join Affiliate Program
</button>
</div>
</div>
<!-- JS for simple interactivity (simulated) -->
<script>
// Placeholder for calculator logic if needed in a real environment
// const slider = document.querySelector('.slider');
// slider.addEventListener('input', (e) => { ... });
</script>
</body></html>