authorgravatar for 101453576+Aditya190803@users.noreply.github.comAditya Mer <101453576+Aditya190803@users.noreply.github.com> 2026-07-18 16:48:17+05:30
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-07-18 11:18:17+00:00
loge350c0a07be43cbdad95dfe7367e572eddfb7d48
tree16a0f5d46fc408caf4a14d47c0fe8dd72178d730
parent38e0bb07bb24894524f1502ac0487c5ea4ff85de
signature Signed by PGP key B5690EEEBB952194

Add Grok to marketing site provider list (#3484)

2 files changed, 45 insertions(+), 9 deletions(-)

apps/marketing/public/harnesses/grok-dark.svg created+4
...@@ -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>
\ No newline at end of file
apps/marketing/src/pages/index.astro+41-9
...@@ -33,6 +33,9 @@ const mobileEndorsementRows = [...@@ -33,6 +33,9 @@ const mobileEndorsementRows = [
33 <span class="hero-float-mark hf-cursor" title="Cursor">33 <span class="hero-float-mark hf-cursor" title="Cursor">
34 <img src="/harnesses/cursor_light.svg" alt="" />34 <img src="/harnesses/cursor_light.svg" alt="" />
35 </span>35 </span>
36 <span class="hero-float-mark hf-grok" title="Grok">
37 <img src="/harnesses/grok-dark.svg" alt="" />
38 </span>
36 </div>39 </div>
3740
38 <div class="container hero-inner">41 <div class="container hero-inner">
...@@ -41,7 +44,7 @@ const mobileEndorsementRows = [...@@ -41,7 +44,7 @@ const mobileEndorsementRows = [
41 </h1>44 </h1>
4245
43 <p class="hero-sub">46 <p class="hero-sub">
44 Orchestrate Claude Code, Codex, OpenCode and Cursor from one surface.47 Orchestrate Claude Code, Codex, OpenCode, Cursor, and Grok from one surface.
45 Bring your own subscription. Fork the whole thing.48 Bring your own subscription. Fork the whole thing.
46 </p>49 </p>
4750
...@@ -173,7 +176,7 @@ const mobileEndorsementRows = [...@@ -173,7 +176,7 @@ const mobileEndorsementRows = [
173 <h2>Bring your own sub</h2>176 <h2>Bring your own sub</h2>
174 <p>177 <p>
175 T3 Code doesn't resell tokens. Plug in Claude Code, Codex, OpenCode,178 T3 Code doesn't resell tokens. Plug in Claude Code, Codex, OpenCode,
176 or Cursor with the credentials you already have — we orchestrate179 Cursor, or Grok with the credentials you already have — we orchestrate
177 them, you keep your plan.180 them, you keep your plan.
178 </p>181 </p>
179 </div>182 </div>
...@@ -207,6 +210,13 @@ const mobileEndorsementRows = [...@@ -207,6 +210,13 @@ const mobileEndorsementRows = [
207 <div class="harness-tag">cursor-agent</div>210 <div class="harness-tag">cursor-agent</div>
208 </div>211 </div>
209 </div>212 </div>
213 <div class="harness">
214 <div class="harness-mark"><img src="/harnesses/grok-dark.svg" alt="" /></div>
215 <div class="harness-meta">
216 <div class="harness-name">Grok CLI</div>
217 <div class="harness-tag">grok login</div>
218 </div>
219 </div>
210 </div>220 </div>
211221
212 <div class="harness-footer">222 <div class="harness-footer">
...@@ -615,8 +625,9 @@ const mobileEndorsementRows = [...@@ -615,8 +625,9 @@ const mobileEndorsementRows = [
615625
616 .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); }626 .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); }
617 .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); }627 .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); }
618 .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); }628 .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); }
619 .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); }629 .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); }
630 .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); }
620631
621 @media (max-width: 1180px) {632 @media (max-width: 1180px) {
622 .hero-float-mark { width: 76px; height: 76px; border-radius: 20px; }633 .hero-float-mark { width: 76px; height: 76px; border-radius: 20px; }
...@@ -625,6 +636,7 @@ const mobileEndorsementRows = [...@@ -625,6 +636,7 @@ const mobileEndorsementRows = [
625 .hero-float-mark.hf-codex { top: 2%; right: 3%; }636 .hero-float-mark.hf-codex { top: 2%; right: 3%; }
626 .hero-float-mark.hf-opencode { top: 26%; left: 2%; }637 .hero-float-mark.hf-opencode { top: 26%; left: 2%; }
627 .hero-float-mark.hf-cursor { top: 24%; right: 2%; }638 .hero-float-mark.hf-cursor { top: 24%; right: 2%; }
639 .hero-float-mark.hf-grok { top: 48%; left: 2%; transform: rotate(3deg); }
628 }640 }
629641
630 @media (max-width: 820px) {642 @media (max-width: 820px) {
...@@ -659,17 +671,18 @@ const mobileEndorsementRows = [...@@ -659,17 +671,18 @@ const mobileEndorsementRows = [
659 height: 44px;671 height: 44px;
660 }672 }
661673
662 /* Two above the title, two flanking the call-to-action area. */674 /* Three stacked on the left, two on the right — keeps the center CTA clear. */
663 .hero-float-mark.hf-claude {675 .hero-float-mark.hf-claude {
664 top: 44px;676 top: 44px;
665 left: 10px;677 left: 10px;
666 transform: rotate(-10deg);678 transform: rotate(-10deg);
667 }679 }
668680
669 .hero-float-mark.hf-codex {681 .hero-float-mark.hf-grok {
670 top: 44px;682 top: 240px;
671 right: 10px;683 left: 4px;
672 transform: rotate(8deg);684 right: auto;
685 transform: rotate(-4deg);
673 }686 }
674687
675 .hero-float-mark.hf-opencode {688 .hero-float-mark.hf-opencode {
...@@ -679,6 +692,12 @@ const mobileEndorsementRows = [...@@ -679,6 +692,12 @@ const mobileEndorsementRows = [
679 transform: rotate(-6deg);692 transform: rotate(-6deg);
680 }693 }
681694
695 .hero-float-mark.hf-codex {
696 top: 44px;
697 right: 10px;
698 transform: rotate(8deg);
699 }
700
682 .hero-float-mark.hf-cursor {701 .hero-float-mark.hf-cursor {
683 top: 474px;702 top: 474px;
684 right: 4px;703 right: 4px;
...@@ -688,6 +707,14 @@ const mobileEndorsementRows = [...@@ -688,6 +707,14 @@ const mobileEndorsementRows = [
688 }707 }
689708
690 @media (max-width: 340px) {709 @media (max-width: 340px) {
710 .hero-float-mark.hf-grok {
711 top: 220px;
712 left: 0;
713 width: 52px;
714 height: 52px;
715 border-radius: 14px;
716 }
717
691 .hero-float-mark.hf-opencode,718 .hero-float-mark.hf-opencode,
692 .hero-float-mark.hf-cursor {719 .hero-float-mark.hf-cursor {
693 top: 580px;720 top: 580px;
...@@ -704,6 +731,7 @@ const mobileEndorsementRows = [...@@ -704,6 +731,7 @@ const mobileEndorsementRows = [
704 right: 0;731 right: 0;
705 }732 }
706733
734 .hero-float-mark.hf-grok img,
707 .hero-float-mark.hf-opencode img,735 .hero-float-mark.hf-opencode img,
708 .hero-float-mark.hf-cursor img {736 .hero-float-mark.hf-cursor img {
709 width: 30px;737 width: 30px;
...@@ -750,7 +778,7 @@ const mobileEndorsementRows = [...@@ -750,7 +778,7 @@ const mobileEndorsementRows = [
750778
751 .harness-grid {779 .harness-grid {
752 display: grid;780 display: grid;
753 grid-template-columns: repeat(4, 1fr);781 grid-template-columns: repeat(5, 1fr);
754 gap: 0;782 gap: 0;
755 border: 1px solid var(--border);783 border: 1px solid var(--border);
756 border-radius: var(--radius);784 border-radius: var(--radius);
...@@ -1205,6 +1233,10 @@ const mobileEndorsementRows = [...@@ -1205,6 +1233,10 @@ const mobileEndorsementRows = [
1205 .harness-grid { grid-template-columns: 1fr 1fr; }1233 .harness-grid { grid-template-columns: 1fr 1fr; }
1206 .harness { border-right: 0; border-bottom: 1px solid var(--border); }1234 .harness { border-right: 0; border-bottom: 1px solid var(--border); }
1207 .harness:nth-child(odd) { border-right: 1px solid var(--border); }1235 .harness:nth-child(odd) { border-right: 1px solid var(--border); }
1236 .harness:nth-child(5):last-child {
1237 grid-column: 1 / -1;
1238 border-right: 0;
1239 }
1208 .git-inner { grid-template-columns: 1fr; gap: 40px; }1240 .git-inner { grid-template-columns: 1fr; gap: 40px; }
1209 .open-grid { grid-template-columns: 1fr; }1241 .open-grid { grid-template-columns: 1fr; }
1210 }1242 }