From 860968da76b5971ef40d8099eced0a711fda39a4 Mon Sep 17 00:00:00 2001 From: aditya mer Date: Sun, 21 Jun 2026 21:45:49 +0530 Subject: [PATCH 1/2] Add Grok to marketing site provider list --- apps/marketing/public/harnesses/grok-dark.svg | 4 +++ apps/marketing/src/pages/index.astro | 29 +++++++++++++++++-- 2 files changed, 30 insertions(+), 3 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 00000000000..d094fcc6f85 --- /dev/null +++ b/apps/marketing/public/harnesses/grok-dark.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/apps/marketing/src/pages/index.astro b/apps/marketing/src/pages/index.astro index 69de2088d43..a622a320f0e 100644 --- a/apps/marketing/src/pages/index.astro +++ b/apps/marketing/src/pages/index.astro @@ -33,6 +33,9 @@ const mobileEndorsementRows = [ + + +
@@ -41,7 +44,7 @@ const mobileEndorsementRows = [

- 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.

@@ -173,7 +176,7 @@ const mobileEndorsementRows = [

Bring your own sub

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.

@@ -207,6 +210,13 @@ const mobileEndorsementRows = [
cursor-agent
+
+
+
+
Grok CLI
+
grok login
+
+
@@ -615,6 +625,7 @@ const mobileEndorsementRows = [ .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-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: 4%; left: 50%; animation-delay: -1.2s; transform: translateX(-50%) rotate(3deg); } @media (max-width: 1180px) { .hero-float-mark { width: 76px; height: 76px; border-radius: 20px; } @@ -623,6 +634,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: 2%; left: 50%; transform: translateX(-50%) rotate(3deg); } } @media (max-width: 820px) { @@ -683,6 +695,13 @@ const mobileEndorsementRows = [ left: auto; transform: rotate(7deg); } + + .hero-float-mark.hf-grok { + top: 120px; + left: 50%; + right: auto; + transform: translateX(-50%) rotate(0deg); + } } @media (max-width: 340px) { @@ -748,7 +767,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); @@ -1203,6 +1222,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; } } From 84b415c5661ab94d01c968be756a03481653b474 Mon Sep 17 00:00:00 2001 From: aditya mer Date: Sun, 21 Jun 2026 21:59:36 +0530 Subject: [PATCH 2/2] Update hero float styles for Grok on mobile and desktop --- apps/marketing/src/pages/index.astro | 37 +++++++++++++++++----------- 1 file changed, 23 insertions(+), 14 deletions(-) diff --git a/apps/marketing/src/pages/index.astro b/apps/marketing/src/pages/index.astro index a622a320f0e..c15bcb1ba5a 100644 --- a/apps/marketing/src/pages/index.astro +++ b/apps/marketing/src/pages/index.astro @@ -623,9 +623,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: 4%; left: 50%; animation-delay: -1.2s; transform: translateX(-50%) rotate(3deg); } + .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; } @@ -634,7 +634,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: 2%; left: 50%; transform: translateX(-50%) rotate(3deg); } + .hero-float-mark.hf-grok { top: 48%; left: 2%; transform: rotate(3deg); } } @media (max-width: 820px) { @@ -669,17 +669,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 { @@ -689,22 +690,29 @@ 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; left: auto; transform: rotate(7deg); } + } + @media (max-width: 340px) { .hero-float-mark.hf-grok { - top: 120px; - left: 50%; - right: auto; - transform: translateX(-50%) rotate(0deg); + top: 220px; + left: 0; + width: 52px; + height: 52px; + border-radius: 14px; } - } - @media (max-width: 340px) { .hero-float-mark.hf-opencode, .hero-float-mark.hf-cursor { top: 580px; @@ -721,6 +729,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;