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

Affiliate page: simplified How It Works, added chat widget, removed Contact Us button

Browse Source
This commit is contained in:
Oliver
2026-06-23 10:29:21 -03:00
parent 64a46780e9
commit 5206d1c3c9
1 changed files with 62 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
affiliate.html
+62 -105
View File
@@ -143,48 +143,6 @@
margin: 0; margin: 0;
} }
/* ── 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);
}
.step:last-child {
border-bottom: none;
}
.step-num {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--accent-dim);
border: 1px solid rgba(0, 245, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
color: var(--accent);
font-family: "Courier New", Courier, monospace;
}
.step-body h3 {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 6px;
}
.step-body p {
color: var(--text-muted);
font-size: 14px;
line-height: 1.6;
}
/* ── Highlight box ───────────────────────────────────── */ /* ── Highlight box ───────────────────────────────────── */
.highlight-box { .highlight-box {
background: var(--bg-card); background: var(--bg-card);
@@ -277,10 +235,6 @@
.affiliate-section { .affiliate-section {
padding: 50px 0; padding: 50px 0;
} }
.step {
flex-direction: column;
gap: 12px;
}
.cta-section { .cta-section {
padding: 50px 0; padding: 50px 0;
} }
@@ -357,6 +311,64 @@
</div> </div>
</header> </header>
<!-- ═══════════════════════════════════════════════════════════
CHAT WIDGET (floating bottom-right, same as main site)
═══════════════════════════════════════════════════════════ -->
<button
class="chat-fab"
id="chat-fab"
onclick="chatToggle()"
aria-label="Chat with Sales Agent"
>
<svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
/>
</svg>
</button>
<div class="chat-widget" id="chat-widget" aria-hidden="true">
<div class="chat-header">
<div class="chat-header-avatar">⚡</div>
<div class="chat-header-info">
<div class="chat-header-name">Sales Agent</div>
<div class="chat-header-status">Online</div>
</div>
<button
class="chat-header-close"
onclick="chatClose()"
aria-label="Close chat"
>
✕
</button>
</div>
<div class="chat-msgs" id="chat-msgs"></div>
<div class="chat-input-row">
<input
type="text"
class="chat-input-box"
id="chat-input"
placeholder="Ask your sales agent..."
onkeydown="chatKey(event)"
/>
<button
class="chat-send-btn"
id="chat-send-btn"
onclick="chatSend()"
>
➤
</button>
</div>
</div>
<!-- ═══════════════════════════════════════════════════════════ <!-- ═══════════════════════════════════════════════════════════
HERO HERO
═══════════════════════════════════════════════════════════ --> ═══════════════════════════════════════════════════════════ -->
@@ -425,61 +437,11 @@
<div class="container"> <div class="container">
<h2>How It <span class="highlight">Works</span></h2> <h2>How It <span class="highlight">Works</span></h2>
<p> <p>
Once you're an affiliate, you get access to your own dashboard where When you register as a client and you get your first Agent with
you can configure your links and track performance. Here's the flow: derez.ai you already get all your affiliate package: your affiliate
code and link, access to the configuration of your outgoing links.
Easy as all of our services.
</p> </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 &mdash; 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"
&mdash; 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 &mdash; 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 &mdash; which is where your second
affiliate links kick in.
</p>
</div>
</div>
</div>
</div> </div>
</section> </section>
@@ -574,11 +536,6 @@
<a href="https://derez.ai/#pricing" class="btn btn-primary btn-lg" <a href="https://derez.ai/#pricing" class="btn btn-primary btn-lg"
>Get Started &rarr;</a >Get Started &rarr;</a
> >
<a
href="mailto:affiliate@derez.ai"
class="btn btn-ghost btn-lg"
>Contact Us</a
>
</div> </div>
</div> </div>
</section> </section>