From e350c0a07be43cbdad95dfe7367e572eddfb7d48 Mon Sep 17 00:00:00 2001
From: Aditya Mer <101453576+Aditya190803@users.noreply.github.com>
Date: Sat, 18 Jul 2026 16:48:17 +0530
Subject: [PATCH] Add Grok to marketing site provider list (#3484)

---
 apps/marketing/public/harnesses/grok-dark.svg |  4 ++
 apps/marketing/src/pages/index.astro          | 56 +++++++++++++++----
 2 files changed, 48 insertions(+), 12 deletions(-)
 create mode 100644 apps/marketing/public/harnesses/grok-dark.svg

diff --git a/apps/marketing/public/harnesses/grok-dark.svg b/apps/marketing/public/harnesses/grok-dark.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d094fcc6f8539235ad332c09bb985258b3aac14b
--- /dev/null
+++ b/apps/marketing/public/harnesses/grok-dark.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path fill="#F5F5F5" d="M9.26905 15.284L17.2479 9.36086C17.6391 9.07047 18.1981 9.18374 18.3845 9.63478C19.3655 12.0135 18.9272 14.8721 16.9755 16.8349C15.0238 18.7976 12.3082 19.228 9.8261 18.2477L7.1146 19.5102C11.0037 22.1834 15.7263 21.5223 18.6774 18.5525C21.0182 16.1985 21.7432 12.9897 21.0653 10.0961L21.0714 10.1023C20.0884 5.85143 21.3131 4.15233 23.8218 0.677913C23.8812 0.595532 23.9406 0.513151 24 0.428711L20.6987 3.74866V3.73836L9.267 15.2861" />
+  <path fill="#F5F5F5" d="M7.62249 16.7237C4.83113 14.0422 5.3124 9.89222 7.69417 7.49905C9.45541 5.72786 12.341 5.00497 14.86 6.06768L17.5653 4.81138C17.0779 4.45714 16.4533 4.07613 15.7365 3.80839C12.4966 2.46764 8.6178 3.13492 5.98413 5.78141C3.45081 8.32904 2.65415 12.2463 4.02219 15.5889C5.04412 18.0871 3.36889 19.8541 1.68137 21.6377C1.08337 22.2699 0.483318 22.9022 0 23.5716L7.62045 16.7257" />
+</svg>
\ No newline at end of file
diff --git a/apps/marketing/src/pages/index.astro b/apps/marketing/src/pages/index.astro
index 477daeb3cb00bb9115145214911833d7b2e0b608..9d1cfbdd125db1def9660e47bd55b4e859f47c6e 100644
--- a/apps/marketing/src/pages/index.astro
+++ b/apps/marketing/src/pages/index.astro
@@ -33,6 +33,9 @@ const mobileEndorsementRows = [
       <span class="hero-float-mark hf-cursor" title="Cursor">
         <img src="/harnesses/cursor_light.svg" alt="" />
       </span>
+      <span class="hero-float-mark hf-grok" title="Grok">
+        <img src="/harnesses/grok-dark.svg" alt="" />
+      </span>
     </div>
 
     <div class="container hero-inner">
@@ -41,7 +44,7 @@ const mobileEndorsementRows = [
       </h1>
 
       <p class="hero-sub">
-        Orchestrate Claude Code, Codex, OpenCode and Cursor from one surface.
+        Orchestrate Claude Code, Codex, OpenCode, Cursor, and Grok from one surface.
         Bring your own subscription. Fork the whole thing.
       </p>
 
@@ -173,7 +176,7 @@ const mobileEndorsementRows = [
         <h2>Bring your own sub</h2>
         <p>
           T3 Code doesn't resell tokens. Plug in Claude Code, Codex, OpenCode,
-          or Cursor with the credentials you already have — we orchestrate
+          Cursor, or Grok with the credentials you already have — we orchestrate
           them, you keep your plan.
         </p>
       </div>
@@ -207,6 +210,13 @@ const mobileEndorsementRows = [
             <div class="harness-tag">cursor-agent</div>
           </div>
         </div>
+        <div class="harness">
+          <div class="harness-mark"><img src="/harnesses/grok-dark.svg" alt="" /></div>
+          <div class="harness-meta">
+            <div class="harness-name">Grok CLI</div>
+            <div class="harness-tag">grok login</div>
+          </div>
+        </div>
       </div>
 
       <div class="harness-footer">
@@ -615,8 +625,9 @@ const mobileEndorsementRows = [
 
   .hero-float-mark.hf-claude   { background: radial-gradient(circle at 30% 25%, rgba(217, 119, 87, 0.22), rgba(20, 20, 24, 0.92) 65%); top: 8%;  left: 7%;  animation-delay: 0s;    transform: rotate(-8deg); }
   .hero-float-mark.hf-codex    { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.08), rgba(20, 20, 24, 0.92) 65%); top: 6%;  right: 7%; animation-delay: -2.5s; transform: rotate(6deg); }
-  .hero-float-mark.hf-opencode { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.06), rgba(20, 20, 24, 0.92) 65%); top: 32%; left: 5%;  animation-delay: -5s;   transform: rotate(4deg); }
+  .hero-float-mark.hf-opencode { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.06), rgba(20, 20, 24, 0.92) 65%); top: 30%; left: 5%;  animation-delay: -5s;   transform: rotate(4deg); }
   .hero-float-mark.hf-cursor   { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.08), rgba(20, 20, 24, 0.92) 65%); top: 30%; right: 5%; animation-delay: -7s;   transform: rotate(-5deg); }
+  .hero-float-mark.hf-grok     { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.08), rgba(20, 20, 24, 0.92) 65%); top: 52%; left: 6%;  animation-delay: -1.2s; transform: rotate(3deg); }
 
   @media (max-width: 1180px) {
     .hero-float-mark { width: 76px; height: 76px; border-radius: 20px; }
@@ -625,6 +636,7 @@ const mobileEndorsementRows = [
     .hero-float-mark.hf-codex    { top: 2%;  right: 3%; }
     .hero-float-mark.hf-opencode { top: 26%; left: 2%; }
     .hero-float-mark.hf-cursor   { top: 24%; right: 2%; }
+    .hero-float-mark.hf-grok     { top: 48%; left: 2%;  transform: rotate(3deg); }
   }
 
   @media (max-width: 820px) {
@@ -659,26 +671,33 @@ const mobileEndorsementRows = [
       height: 44px;
     }
 
-    /* Two above the title, two flanking the call-to-action area. */
+    /* Three stacked on the left, two on the right — keeps the center CTA clear. */
     .hero-float-mark.hf-claude {
       top: 44px;
       left: 10px;
       transform: rotate(-10deg);
     }
 
+    .hero-float-mark.hf-grok {
+      top: 240px;
+      left: 4px;
+      right: auto;
+      transform: rotate(-4deg);
+    }
+
+    .hero-float-mark.hf-opencode {
+      top: 474px;
+      left: 4px;
+      right: auto;
+      transform: rotate(-6deg);
+    }
+
     .hero-float-mark.hf-codex {
       top: 44px;
       right: 10px;
       transform: rotate(8deg);
     }
 
-    .hero-float-mark.hf-opencode {
-      top: 474px;
-      left: 4px;
-      right: auto;
-      transform: rotate(-6deg);
-    }
-
     .hero-float-mark.hf-cursor {
       top: 474px;
       right: 4px;
@@ -688,6 +707,14 @@ const mobileEndorsementRows = [
   }
 
   @media (max-width: 340px) {
+    .hero-float-mark.hf-grok {
+      top: 220px;
+      left: 0;
+      width: 52px;
+      height: 52px;
+      border-radius: 14px;
+    }
+
     .hero-float-mark.hf-opencode,
     .hero-float-mark.hf-cursor {
       top: 580px;
@@ -704,6 +731,7 @@ const mobileEndorsementRows = [
       right: 0;
     }
 
+    .hero-float-mark.hf-grok img,
     .hero-float-mark.hf-opencode img,
     .hero-float-mark.hf-cursor img {
       width: 30px;
@@ -750,7 +778,7 @@ const mobileEndorsementRows = [
 
   .harness-grid {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(5, 1fr);
     gap: 0;
     border: 1px solid var(--border);
     border-radius: var(--radius);
@@ -1205,6 +1233,10 @@ const mobileEndorsementRows = [
     .harness-grid { grid-template-columns: 1fr 1fr; }
     .harness { border-right: 0; border-bottom: 1px solid var(--border); }
     .harness:nth-child(odd) { border-right: 1px solid var(--border); }
+    .harness:nth-child(5):last-child {
+      grid-column: 1 / -1;
+      border-right: 0;
+    }
     .git-inner { grid-template-columns: 1fr; gap: 40px; }
     .open-grid { grid-template-columns: 1fr; }
   }
-- 
2.54.0