Oliver/derez.ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add affiliate program page + sitemap + footer link

Browse Source
This commit is contained in:
Oliver
2026-06-23 10:08:51 -03:00
parent 3b46816a4e
commit 781a8d43f9
8 changed files with 735 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
affiliate.html
+536
View File
@@ -0,0 +1,536 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Affiliate Program — derez.ai</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg-base: #0a0a0b;
--bg-surface: #121213;
--bg-card: #18181b;
--bg-elevated: #1f1f23;
--bg-hover: #27272a;
--border-color: #2a2a2e;
--border-light: #3a3a40;
--text-primary: #f4f4f5;
--text-secondary: #a1a1aa;
--text-tertiary: #71717a;
--accent: #a78bfa;
--accent-dim: #7c3aed;
--accent-glow: rgba(167, 139, 250, 0.15);
--green: #4ade80;
--green-dim: #22c55e;
--yellow: #fbbf24;
--orange: #fb923c;
--red: #f87171;
--blue: #60a5fa;
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 16px;
}
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: var(--bg-base);
color: var(--text-primary);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* ─── Header / Nav ─── */
header {
padding: 24px 0 0;
border-bottom: 1px solid var(--border-color);
}
.nav-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-weight: 700;
font-size: 20px;
letter-spacing: -0.5px;
display: flex;
align-items: center;
gap: 8px;
}
.logo a { color: inherit; text-decoration: none; }
.logo span { color: var(--accent); }
.logo-icon {
width: 28px; height: 28px;
background: linear-gradient(135deg, var(--accent), var(--accent-dim));
border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 800; color: #fff;
}
.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-links a {
color: var(--text-secondary); text-decoration: none;
font-size: 14px; font-weight: 500; transition: color 0.2s;
}
.nav-links a:hover { color: var(--text-primary); }
/* ─── Hero ─── */
.hero {
max-width: 1200px; margin: 0 auto; padding: 80px 24px 60px;
text-align: center;
}
.hero-label {
display: inline-block;
padding: 4px 14px;
border-radius: 100px;
background: var(--accent-glow);
border: 1px solid rgba(167,139,250,0.25);
color: var(--accent);
font-size: 13px; font-weight: 600;
margin-bottom: 24px;
}
.hero h1 {
font-size: clamp(36px, 6vw, 64px);
font-weight: 800;
letter-spacing: -2px;
line-height: 1.1;
margin-bottom: 20px;
}
.hero h1 .highlight {
background: linear-gradient(135deg, var(--accent), #c084fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
font-size: 18px;
color: var(--text-secondary);
max-width: 680px;
margin: 0 auto 32px;
}
/* ─── Content Sections ─── */
.section {
max-width: 1200px;
margin: 0 auto;
padding: 60px 24px;
}
.section h2 {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.5px;
margin-bottom: 16px;
}
.section h2 .highlight {
background: linear-gradient(135deg, var(--accent), #c084fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section p {
color: var(--text-secondary);
font-size: 16px;
max-width: 700px;
margin-bottom: 16px;
}
.section ul {
list-style: none;
margin: 0 0 24px;
}
.section ul li {
padding: 12px 0 12px 28px;
position: relative;
color: var(--text-secondary);
font-size: 16px;
}
.section ul li::before {
content: "";
position: absolute;
left: 0;
top: 18px;
width: 12px;
height: 12px;
border-radius: 3px;
background: var(--accent-glow);
border: 1px solid rgba(167,139,250,0.4);
}
.section ul li strong {
color: var(--text-primary);
}
/* ─── Cards ─── */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 32px 0;
}
.card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 28px;
transition: border-color 0.2s;
}
.card:hover { border-color: var(--border-light); }
.card h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
}
.card h3 .emoji { margin-right: 8px; }
.card p {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.6;
}
/* ─── Steps ─── */
.steps {
counter-reset: step;
margin: 32px 0;
}
.step {
counter-increment: step;
display: flex;
gap: 20px;
padding: 24px 0;
border-bottom: 1px solid var(--border-color);
}
.step:last-child { border-bottom: none; }
.step-num {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 10px;
background: var(--accent-glow);
border: 1px solid rgba(167,139,250,0.3);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 16px;
color: var(--accent);
}
.step-body h3 {
font-size: 17px;
font-weight: 600;
margin-bottom: 6px;
}
.step-body p {
color: var(--text-secondary);
font-size: 14px;
}
/* ─── Highlight Box ─── */
.highlight-box {
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-left: 3px solid var(--green);
border-radius: var(--radius);
padding: 24px 28px;
margin: 32px 0;
}
.highlight-box h3 {
font-size: 16px;
font-weight: 600;
color: var(--green);
margin-bottom: 8px;
}
.highlight-box p {
color: var(--text-secondary);
font-size: 14px;
margin: 0;
}
/* ─── CTA ─── */
.cta-section {
text-align: center;
padding: 80px 24px;
border-top: 1px solid var(--border-color);
}
.cta-section h2 {
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
letter-spacing: -1px;
margin-bottom: 12px;
}
.cta-section p {
color: var(--text-secondary);
font-size: 16px;
max-width: 500px;
margin: 0 auto 32px;
}
.btn {
display: inline-block;
padding: 14px 32px;
border-radius: var(--radius);
font-weight: 600;
font-size: 15px;
text-decoration: none;
transition: all 0.2s;
cursor: pointer;
}
.btn-primary {
background: var(--accent);
color: #000;
}
.btn-primary:hover {
background: #b794fc;
transform: translateY(-1px);
}
.btn-secondary {
background: var(--bg-elevated);
color: var(--text-primary);
border: 1px solid var(--border-color);
margin-left: 12px;
}
.btn-secondary:hover {
background: var(--bg-hover);
border-color: var(--border-light);
}
/* ─── Footer ─── */
footer {
border-top: 1px solid var(--border-color);
padding: 24px;
text-align: center;
}
footer p {
color: var(--text-tertiary);
font-size: 13px;
}
footer a { color: var(--accent); text-decoration: none; }
/* ─── Responsive ─── */
@media (max-width: 640px) {
.nav-inner { flex-direction: column; gap: 16px; }
.hero { padding: 48px 20px 40px; }
.section { padding: 40px 20px; }
.step { flex-direction: column; gap: 12px; }
.btn-secondary { margin-left: 0; margin-top: 12px; display: inline-block; }
}
</style>
</head>
<body>
<!-- ─── HEADER ─── -->
<header>
<div class="nav-inner">
<div class="logo">
<a href="https://derez.ai">
<div class="logo-icon">d</div>
derez<span>.ai</span>
</a>
</div>
<div class="nav-links">
<a href="https://derez.ai/#pricing">Pricing</a>
<a href="https://derez.ai/#faq">FAQ</a>
<a href="https://derez.ai/#blog">Blog</a>
<a href="https://derez.ai/#topics">Topics</a>
<a href="https://derez.ai/" style="color:var(--accent)">Home →</a>
</div>
</div>
</header>
<!-- ─── HERO ─── -->
<section class="hero">
<div class="hero-label">Affiliate Program</div>
<h1>Earn With <span class="highlight">derez.ai</span></h1>
<p>
You create great content about AI agents. We handle the hosting.
When your audience signs up through your link, you get paid —
and we give you a second way to earn, too.
</p>
</section>
<!-- ─── WHY THIS PROGRAM ─── -->
<section class="section">
<h2>Why Our Program is <span class="highlight">Different</span></h2>
<p>
We believe in building a great product at a fair price. That means we
don't have the deep pockets of big enterprise platforms, and we won't
pretend we do. Instead of chasing huge commissions that don't exist,
we focus on what actually works: a product your audience will love,
and the tools to make that happen.
</p>
<div class="card-grid">
<div class="card">
<h3><span class="emoji">🎯</span>Higher Conversion</h3>
<p>
Your viewers who tried setting up an agent and hit the technical
wall? We catch them. derez.ai turns their frustration into a
working agent in 10 minutes — no SSH, no VPS fiddling.
</p>
</div>
<div class="card">
<h3><span class="emoji">💰</span>Two Ways to Earn</h3>
<p>
You earn when someone signs up through your link. Plus, when they
use the wizard to add integrations, you can place your own affiliate
links there too — a second chance to earn on the tools your
audience needs.
</p>
</div>
<div class="card">
<h3><span class="emoji">🔄</span>Built Into the Wizard</h3>
<p>
Your link lives inside the derez.ai setup wizard — not just a
static URL in a video description. Every user who goes through
the flow sees it at the right moment.
</p>
</div>
</div>
</section>
<!-- ─── HOW IT WORKS ─── -->
<section class="section" style="border-top: 1px solid var(--border-color);">
<h2>How It <span class="highlight">Works</span></h2>
<p>
Once you're an affiliate, you get access to your own dashboard where
you can configure your links and track performance. Here's the flow:
</p>
<div class="steps">
<div class="step">
<div class="step-num">1</div>
<div class="step-body">
<h3>Sign up as an affiliate</h3>
<p>
If you already have an account on derez.ai, you're already
eligible — just head to your dashboard to get started. No
separate signup process.
</p>
</div>
</div>
<div class="step">
<div class="step-num">2</div>
<div class="step-body">
<h3>Get your unique referral link</h3>
<p>
We generate a link that tracks every signup you send our way.
Share it in your video descriptions, pinned comments, or
community posts.
</p>
</div>
</div>
<div class="step">
<div class="step-num">3</div>
<div class="step-body">
<h3>Add your affiliate links to integrations</h3>
<p>
Here's where it gets interesting. When a user goes through the
derez.ai wizard to add a skill like Semrush, Shopify, or Stripe,
you can submit your own affiliate link for that tool. For example:
"Help the content creator and sign up for Semrush" — with your
affiliate code baked in. After entering the link, we take about
24 hours to review and approve it.
</p>
</div>
</div>
<div class="step">
<div class="step-num">4</div>
<div class="step-body">
<h3>Your audience gets a working agent — fast</h3>
<p>
With the hard part (VPS setup, installation, configuration) out
of the way, your viewers are much more likely to actually start
building. And once they have a working agent, they're ready to
explore integrations — which is where your second affiliate
links kick in.
</p>
</div>
</div>
</div>
</section>
<!-- ─── THE SECOND-EARN OPPORTUNITY ─── -->
<section class="section" style="border-top: 1px solid var(--border-color); padding-bottom: 0;">
<h2>The <span class="highlight">Second Chance</span> to Earn</h2>
<p>
Most affiliate programs give you one shot: someone clicks your link
and either converts or doesn't. We give you a second.
</p>
<p>
When a derez.ai user opens the wizard to integrate a new tool —
whether it's Semrush for SEO, Shopify for ecommerce, Stripe for
payments, or any of the other integrations we support — your
affiliate link for that service gets shown. You help the content
creator find the right tool <em>and</em> you earn a commission on
that signup too.
</p>
<p>
Think of it this way: your main link gets them into derez.ai. Your
integration links help them build on top of it. Two revenue streams
from one audience.
</p>
<div class="highlight-box">
<h3>✅ Best Part</h3>
<p>
When you have an account on derez.ai, you already have access to
the affiliate area. No separate dashboard, no additional login.
Your affiliate tools are right there alongside your agent.
</p>
</div>
</section>
<!-- ─── WHY THIS WORKS FOR YOUR AUDIENCE ─── -->
<section class="section" style="border-top: 1px solid var(--border-color);">
<h2>Why Your Audience Will <span class="highlight">Thank You</span></h2>
<p>
Your viewers come to you because they want to work with AI agents —
not because they want to debug SSH configs at 2 AM. derez.ai removes
every barrier:
</p>
<ul>
<li>
<strong>No VPS setup needed.</strong> We create the server, install
everything, and hand them a working agent in minutes.
</li>
<li>
<strong>Automatic backups.</strong> One click and their agent state
is saved. No more losing hours of work.
</li>
<li>
<strong>One-click integrations.</strong> Semrush, Shopify, Stripe,
Odoo, n8n — if it's in the wizard, it's minutes away from working.
</li>
<li>
<strong>Full SSH access.</strong> For the power users who want
control. We don't lock anyone in.
</li>
</ul>
<p>
The result? More playtime, more experimentation, and more content
created. Your audience gets more value from their agent, and you
get credit for sending them to a solution that actually works.
</p>
</section>
<!-- ─── CTA ─── -->
<section class="cta-section">
<h2>Ready to <span class="highlight">Partner Up?</span></h2>
<p>
Join the derez.ai affiliate program. Earn from every signup and
every integration your audience enables.
</p>
<p>
Already have a derez.ai account? Your affiliate dashboard is waiting
in your account settings.
</p>
<div>
<a href="https://derez.ai" class="btn btn-primary">Get Started →</a>
<a href="mailto:affiliate@derez.ai" class="btn btn-secondary">Contact Us</a>
</div>
</section>
<!-- ─── FOOTER ─── -->
<footer>
<p>
&copy; 2026 <a href="https://derez.ai">derez.ai</a> &mdash;
AI Agent Hosting &bull;
<a href="https://ODOO4projects.com?utm_source=derez">Powered by ODOO4projects LLC</a>
</p>
</footer>
</body>
</html>