Add Grok to marketing site provider list (#3484)

Author: Aditya190803

apps/marketing/public/harnesses/grok-dark.svg

@@ -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,17 +671,18 @@ 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-codex {
-      top: 44px;
-      right: 10px;
-      transform: rotate(8deg);
+    .hero-float-mark.hf-grok {
+      top: 240px;
+      left: 4px;
+      right: auto;
+      transform: rotate(-4deg);
     }
 
     .hero-float-mark.hf-opencode {
@@ -679,6 +692,12 @@ const mobileEndorsementRows = [
       transform: rotate(-6deg);
     }
 
+    .hero-float-mark.hf-codex {
+      top: 44px;
+      right: 10px;
+      transform: rotate(8deg);
+    }
+
     .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; }
   }