From 5206d1c3c904f072b9ef7e9ef15a0dcf9cb11d95 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@derez.ai>
Date: Tue, 23 Jun 2026 10:29:21 -0300
Subject: [PATCH] Affiliate page: simplified How It Works, added chat widget,
 removed Contact Us button

---
 affiliate.html | 167 ++++++++++++++++++-------------------------------
 1 file changed, 62 insertions(+), 105 deletions(-)

diff --git a/affiliate.html b/affiliate.html
index 89cdcf9..13f29ea 100644
--- a/affiliate.html
+++ b/affiliate.html
@@ -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 &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>
     </section>
 
@@ -574,11 +536,6 @@
                 <a href="https://derez.ai/#pricing" class="btn btn-primary btn-lg"
                     >Get Started &rarr;</a
                 >
-                <a
-                    href="mailto:affiliate@derez.ai"
-                    class="btn btn-ghost btn-lg"
-                    >Contact Us</a
-                >
             </div>
         </div>
     </section>