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 = [
3333 <span class="hero-float-mark hf-cursor" title="Cursor">
3434 <img src="/harnesses/cursor_light.svg" alt="" />
3535 </span>
36 <span class="hero-float-mark hf-grok" title="Grok">
37 <img src="/harnesses/grok-dark.svg" alt="" />
38 </span>
3639 </div>
3740
3841 <div class="container hero-inner">
......@@ -41,7 +44,7 @@ const mobileEndorsementRows = [
4144 </h1>
4245
4346 <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.
4548 Bring your own subscription. Fork the whole thing.
4649 </p>
4750
......@@ -173,7 +176,7 @@ const mobileEndorsementRows = [
173176 <h2>Bring your own sub</h2>
174177 <p>
175178 T3 Code doesn't resell tokens. Plug in Claude Code, Codex, OpenCode,
176 or Cursor with the credentials you already have — we orchestrate
179 Cursor, or Grok with the credentials you already have — we orchestrate
177180 them, you keep your plan.
178181 </p>
179182 </div>
......@@ -207,6 +210,13 @@ const mobileEndorsementRows = [
207210 <div class="harness-tag">cursor-agent</div>
208211 </div>
209212 </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>
210220 </div>
211221
212222 <div class="harness-footer">
......@@ -615,8 +625,9 @@ const mobileEndorsementRows = [
615625
616626 .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); }
617627 .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); }
619629 .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
621632 @media (max-width: 1180px) {
622633 .hero-float-mark { width: 76px; height: 76px; border-radius: 20px; }
......@@ -625,6 +636,7 @@ const mobileEndorsementRows = [
625636 .hero-float-mark.hf-codex { top: 2%; right: 3%; }
626637 .hero-float-mark.hf-opencode { top: 26%; left: 2%; }
627638 .hero-float-mark.hf-cursor { top: 24%; right: 2%; }
639 .hero-float-mark.hf-grok { top: 48%; left: 2%; transform: rotate(3deg); }
628640 }
629641
630642 @media (max-width: 820px) {
......@@ -659,17 +671,18 @@ const mobileEndorsementRows = [
659671 height: 44px;
660672 }
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. */
663675 .hero-float-mark.hf-claude {
664676 top: 44px;
665677 left: 10px;
666678 transform: rotate(-10deg);
667679 }
668680
669 .hero-float-mark.hf-codex {
670 top: 44px;
671 right: 10px;
672 transform: rotate(8deg);
681 .hero-float-mark.hf-grok {
682 top: 240px;
683 left: 4px;
684 right: auto;
685 transform: rotate(-4deg);
673686 }
674687
675688 .hero-float-mark.hf-opencode {
......@@ -679,6 +692,12 @@ const mobileEndorsementRows = [
679692 transform: rotate(-6deg);
680693 }
681694
695 .hero-float-mark.hf-codex {
696 top: 44px;
697 right: 10px;
698 transform: rotate(8deg);
699 }
700
682701 .hero-float-mark.hf-cursor {
683702 top: 474px;
684703 right: 4px;
......@@ -688,6 +707,14 @@ const mobileEndorsementRows = [
688707 }
689708
690709 @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
691718 .hero-float-mark.hf-opencode,
692719 .hero-float-mark.hf-cursor {
693720 top: 580px;
......@@ -704,6 +731,7 @@ const mobileEndorsementRows = [
704731 right: 0;
705732 }
706733
734 .hero-float-mark.hf-grok img,
707735 .hero-float-mark.hf-opencode img,
708736 .hero-float-mark.hf-cursor img {
709737 width: 30px;
......@@ -750,7 +778,7 @@ const mobileEndorsementRows = [
750778
751779 .harness-grid {
752780 display: grid;
753 grid-template-columns: repeat(4, 1fr);
781 grid-template-columns: repeat(5, 1fr);
754782 gap: 0;
755783 border: 1px solid var(--border);
756784 border-radius: var(--radius);
......@@ -1205,6 +1233,10 @@ const mobileEndorsementRows = [
12051233 .harness-grid { grid-template-columns: 1fr 1fr; }
12061234 .harness { border-right: 0; border-bottom: 1px solid var(--border); }
12071235 .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 }
12081240 .git-inner { grid-template-columns: 1fr; gap: 40px; }
12091241 .open-grid { grid-template-columns: 1fr; }
12101242 }