Affiliate page: simplified How It Works, added chat widget, removed Contact Us button
This commit is contained in:
Oliver
+62
-105
@@ -143,48 +143,6 @@
|
||||
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 {
|
||||
background: var(--bg-card);
|
||||
@@ -277,10 +235,6 @@
|
||||
.affiliate-section {
|
||||
padding: 50px 0;
|
||||
}
|
||||
.step {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.cta-section {
|
||||
padding: 50px 0;
|
||||
}
|
||||
@@ -357,6 +311,64 @@
|
||||
</div>
|
||||
</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
|
||||
═══════════════════════════════════════════════════════════ -->
|
||||
@@ -425,61 +437,11 @@
|
||||
<div class="container">
|
||||
<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:
|
||||
When you register as a client and you get your first Agent with
|
||||
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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -574,11 +536,6 @@
|
||||
<a href="https://derez.ai/#pricing" class="btn btn-primary btn-lg"
|
||||
>Get Started →</a
|
||||
>
|
||||
<a
|
||||
href="mailto:affiliate@derez.ai"
|
||||
class="btn btn-ghost btn-lg"
|
||||
>Contact Us</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user