Add Grok to marketing site provider list (#3484)

Aditya Mer committed 3 months ago

Commit e350c0a1 parent 38e0bb02 files · +45 −9Browse files

Unified · Split

2 files

apps/marketing/public/harnesses/grok-dark.svg +4 −0
apps/marketing/src/pages/index.astro +41 −9

apps/marketing/public/harnesses/grok-dark.svg+4−0

@@ -0,0 +1,4 @@
	1	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
	2	<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" />
	3	<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" />
	4	</svg>

apps/marketing/src/pages/index.astro+41−9

       <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">
       </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>
         <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>
             <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">
   .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; }
     .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) {
       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 {
+    .hero-float-mark.hf-grok {
-      top: 44px;
+      top: 240px;
-      right: 10px;
+      left: 4px;
-      transform: rotate(8deg);
+      right: auto;
+      transform: rotate(-4deg);
     }
     .hero-float-mark.hf-opencode {
       transform: rotate(-6deg);
     }
+    .hero-float-mark.hf-codex {
+      top: 44px;
+      right: 10px;
+      transform: rotate(8deg);
+    }
     .hero-float-mark.hf-cursor {
       top: 474px;
       right: 4px;
   }
   @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;
       right: 0;
     }
+    .hero-float-mark.hf-grok img,
     .hero-float-mark.hf-opencode img,
     .hero-float-mark.hf-cursor img {
       width: 30px;
   .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);
     .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; }
   }

Add Grok to marketing site provider list (#3484)

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code