---import Layout from "../layouts/Layout.astro";import TuxIcon from "../components/TuxIcon.astro";import { tweets } from "../lib/tweets"; const desktopEndorsementRows = [ tweets.filter((_, index) => index % 2 === 0), tweets.filter((_, index) => index % 2 === 1),]; const mobileEndorsementRows = [ tweets.filter((_, index) => index % 3 === 0), tweets.filter((_, index) => index % 3 === 1), tweets.filter((_, index) => index % 3 === 2),];--- <Layout> <!-- ── Hero ──────────────────────────────────────────────────── --> <section class="hero"> <div class="hero-grid" aria-hidden="true"></div> <div class="hero-float" aria-hidden="true"> <span class="hero-float-mark hf-claude" title="Claude Code"> <img src="/harnesses/claude-ai-icon.svg" alt="" /> </span> <span class="hero-float-mark hf-codex" title="Codex"> <img src="/harnesses/openai_dark.svg" alt="" /> </span> <span class="hero-float-mark hf-opencode" title="OpenCode"> <img src="/harnesses/opencode-dark.svg" alt="" /> </span> <span class="hero-float-mark hf-cursor" title="Cursor"> <img src="/harnesses/cursor_light.svg" alt="" /> </span> </div> <div class="container hero-inner"> <h1 class="hero-title display"> The open-source<br />control plane<br />for coding agents. </h1> <p class="hero-sub"> Orchestrate Claude Code, Codex, OpenCode and Cursor from one surface. Bring your own subscription. Fork the whole thing. </p> <div class="hero-actions"> <a id="download-btn" href="https://github.com/pingdotgg/t3code/releases" class="btn btn-primary btn-lg" > <svg class="dl-icon dl-icon--apple" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 1000" aria-hidden="true"><path fill="currentColor" d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg> <svg class="dl-icon dl-icon--windows" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" aria-hidden="true"><path fill="currentColor" d="m0 12.402 35.687-4.86.016 34.423-35.67.203zm35.67 33.529.028 34.453L.028 75.48.026 45.7zm4.326-39.025L87.314 0v41.527l-47.318.376zm47.329 39.349-.011 41.34-47.318-6.678-.066-34.739z"/></svg> <TuxIcon class="dl-icon dl-icon--linux" idPrefix="hero-linux-" /> <span id="download-label">Download for macOS</span> </a> <a href="https://github.com/pingdotgg/t3code" target="_blank" rel="noopener noreferrer" class="btn btn-ghost btn-lg"> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> <path d="M12 .5C5.65.5.5 5.65.5 12a11.5 11.5 0 007.86 10.93c.58.1.79-.25.79-.56v-2c-3.2.69-3.88-1.37-3.88-1.37-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.68 1.25 3.33.96.1-.75.4-1.25.72-1.54-2.55-.29-5.24-1.27-5.24-5.67 0-1.25.45-2.28 1.18-3.08-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.18a10.96 10.96 0 015.74 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.57.23 2.73.11 3.02.74.8 1.18 1.83 1.18 3.08 0 4.41-2.7 5.38-5.27 5.66.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56A11.5 11.5 0 0023.5 12C23.5 5.65 18.35.5 12 .5z"/> </svg> Star on GitHub </a> </div> <div class="hero-preview"> <figure class="hero-screenshot-frame"> <img src="/updated-screenshot.webp" alt="T3 Code app showing multiple coding agent threads in one workspace" width="2508" height="1682" loading="eager" decoding="async" /> </figure> </div> </div> </section> <!-- ── Endorsements ─────────────────────────────────────────── --> <section id="endorsements" class="sec-endorsements" aria-labelledby="endorsements-title"> <div class="container"> <div class="endorsements-head"> <h2 id="endorsements-title">Developers love T3 Code</h2> <p>Real reactions from people building with T3 Code today.</p> </div> </div> <div class="endorsement-carousel endorsement-carousel--desktop" aria-label="Developer endorsements"> { desktopEndorsementRows.map((row, rowIndex) => ( <div class:list={["endorsement-row", rowIndex === 1 && "is-reverse"]}> <div class="endorsement-track"> {[0, 1].map((groupIndex) => ( <div class="endorsement-track-group" aria-hidden={groupIndex === 1 ? "true" : undefined}> {row.map((tweet) => ( <a class="endorsement-card" href={tweet.link} target="_blank" rel="noopener noreferrer" aria-label={`Read ${tweet.handle}'s post on X`} tabindex={groupIndex === 1 ? "-1" : undefined} > <div class="endorsement-author"> <img src={`/pfps/${tweet.handle}.webp`} alt="" width="28" height="28" loading="lazy" decoding="async" /> <div class="endorsement-handle">@{tweet.handle}</div> </div> <p>{tweet.excerpt ?? tweet.content}</p> </a> ))} </div> ))} </div> </div> )) } </div> <div class="endorsement-carousel endorsement-carousel--mobile" aria-label="Developer endorsements"> { mobileEndorsementRows.map((row, rowIndex) => ( <div class:list={["endorsement-row", rowIndex === 1 && "is-reverse"]}> <div class="endorsement-track"> {[0, 1].map((groupIndex) => ( <div class="endorsement-track-group" aria-hidden={groupIndex === 1 ? "true" : undefined}> {row.map((tweet) => ( <a class="endorsement-card" href={tweet.link} target="_blank" rel="noopener noreferrer" aria-label={`Read ${tweet.handle}'s post on X`} tabindex={groupIndex === 1 ? "-1" : undefined} > <div class="endorsement-author"> <img src={`/pfps/${tweet.handle}.webp`} alt="" width="28" height="28" loading="lazy" decoding="async" /> <div class="endorsement-handle">@{tweet.handle}</div> </div> <p>{tweet.excerpt ?? tweet.content}</p> </a> ))} </div> ))} </div> </div> )) } </div> </section> <!-- ── Harnesses ─────────────────────────────────────────────── --> <section id="harnesses" class="sec-harness"> <div class="container"> <div class="section-head"> <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 them, you keep your plan. </p> </div> <div class="harness-grid"> <div class="harness"> <div class="harness-mark"><img src="/harnesses/claude-ai-icon.svg" alt="" /></div> <div class="harness-meta"> <div class="harness-name">Claude Code</div> <div class="harness-tag">claude auth login</div> </div> </div> <div class="harness"> <div class="harness-mark"><img src="/harnesses/openai_dark.svg" alt="" /></div> <div class="harness-meta"> <div class="harness-name">Codex CLI</div> <div class="harness-tag">codex login</div> </div> </div> <div class="harness"> <div class="harness-mark"><img src="/harnesses/opencode-dark.svg" alt="" /></div> <div class="harness-meta"> <div class="harness-name">OpenCode</div> <div class="harness-tag">opencode auth</div> </div> </div> <div class="harness"> <div class="harness-mark"><img src="/harnesses/cursor_light.svg" alt="" /></div> <div class="harness-meta"> <div class="harness-name">Cursor</div> <div class="harness-tag">cursor-agent</div> </div> </div> </div> <div class="harness-footer"> <div class="harness-footer-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg> No keys resold. No quota caps.</div> <div class="harness-footer-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg> Switch models mid-thread.</div> <div class="harness-footer-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg> More harnesses shipping weekly.</div> </div> </div> </section> <!-- ── Git ──────────────────────────────────────────────────── --> <section id="git" class="sec-git"> <div class="container git-inner"> <div class="git-visual"> <div class="pr-card tile"> <div class="pr-head"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.2"/><circle cx="6" cy="18" r="2.2"/><circle cx="18" cy="6" r="2.2"/><path d="M6 8v8M18 8v5a3 3 0 01-3 3h-3M13 13l-2 3 2 3"/></svg> <span class="pr-title">Add marketing hero animation</span> <span class="pr-status">Ready</span> </div> <div class="pr-meta"> <span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.2"/><circle cx="6" cy="18" r="2.2"/><circle cx="18" cy="6" r="2.2"/><path d="M6 8v8M6 12a6 6 0 006-6h6"/></svg> feat/marketing-hero → main</span> <span>+142 −38</span> <span>3 commits</span> </div> <div class="pr-files"> <div><code>apps/marketing/src/pages/index.astro</code> <span>+14 −2</span></div> <div><code>apps/marketing/src/layouts/Layout.astro</code> <span>+8 −0</span></div> <div><code>apps/marketing/public/hero.css</code> <span>+120 −36</span></div> </div> <div class="pr-foot"> <button class="btn btn-ghost" style="font-size:12px;padding:6px 10px">View diff</button> <button class="btn btn-primary" style="font-size:12px;padding:6px 12px"> <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.65.5.5 5.65.5 12a11.5 11.5 0 007.86 10.93c.58.1.79-.25.79-.56v-2c-3.2.69-3.88-1.37-3.88-1.37-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.68 1.25 3.33.96.1-.75.4-1.25.72-1.54-2.55-.29-5.24-1.27-5.24-5.67 0-1.25.45-2.28 1.18-3.08-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.18a10.96 10.96 0 015.74 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.57.23 2.73.11 3.02.74.8 1.18 1.83 1.18 3.08 0 4.41-2.7 5.38-5.27 5.66.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56A11.5 11.5 0 0023.5 12C23.5 5.65 18.35.5 12 .5z"/></svg> Open pull request </button> </div> </div> <div class="pr-trail"> <div class="pr-trail-dot"></div> <div class="pr-trail-line"></div> <div class="pr-trail-dot"></div> </div> <div class="pr-button-shell"> <button class="pr-button"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.2"/><circle cx="6" cy="18" r="2.2"/><circle cx="18" cy="6" r="2.2"/><path d="M6 8v8M18 8v5a3 3 0 01-3 3h-3M13 13l-2 3 2 3"/></svg> Commit & push <span class="pr-button-kbd">⌘⏎</span> </button> </div> </div> <div class="git-copy"> <div class="section-head" style="margin-bottom:0"> <h2>One button to commit, push, and make a PR.</h2> <p> Every agent thread writes to its own branch. When it's good, one button opens the PR on GitHub with a generated title, body and changelog. No terminal dance required. </p> <ul class="checklist" style="margin-top:24px"> <li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg> Auto-generated PR titles & bodies</li> <li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg> Inline diff review before you push</li> <li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg> Draft PRs, stack PRs, amend PRs</li> <li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg> Works with your existing GitHub auth</li> </ul> </div> </div> </div> </section> <!-- ── Open source ───────────────────────────────────────────── --> <section id="open" class="sec-open"> <div class="container"> <div class="section-head open-head"> <div class="eyebrow">Open source</div> <h2>If you don't like something, fork it.</h2> <p> T3 Code is as open as they come. We built this app to be modifiable, customizable, and forkable. Go nuts - that's the whole point. </p> </div> <div class="open-grid"> <div class="tile open-term"> <div class="open-term-head"> <span></span><span></span><span></span> <span class="open-term-title">~/code</span> </div> <div class="open-term-body"> <div><span class="prompt">$</span> gh repo fork pingdotgg/t3code --clone</div> <div class="dim">✓ Cloned t3code into ./t3code</div> <div><span class="prompt">$</span> cd t3code && bun install</div> <div class="dim">✓ 1 284 packages installed in 4.2s</div> <div><span class="prompt">$</span> bun dev</div> <div class="dim">▲ T3 Code dev server → <span class="accent">http://localhost:4001</span></div> <div class="cursor"><span class="prompt">$</span><span class="caret"></span></div> </div> </div> <div class="open-stats"> <div class="tile open-stat"> <div class="open-stat-val">MIT</div> <div class="open-stat-lbl">License · commercial-friendly</div> </div> <div class="tile open-stat"> <div class="open-stat-val">TypeScript</div> <div class="open-stat-lbl">End-to-end, strictly typed</div> </div> <div class="tile open-stat"> <div class="open-stat-val">1 monorepo</div> <div class="open-stat-lbl">Desktop · web · server · harnesses</div> </div> <div class="tile open-stat"> <div class="open-stat-val">No telemetry</div> <div class="open-stat-lbl">Unless you opt in. Full stop.</div> </div> </div> </div> <div class="open-ctas"> <a class="btn btn-ghost" href="https://github.com/pingdotgg/t3code" target="_blank" rel="noopener noreferrer"> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.65.5.5 5.65.5 12a11.5 11.5 0 007.86 10.93c.58.1.79-.25.79-.56v-2c-3.2.69-3.88-1.37-3.88-1.37-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.68 1.25 3.33.96.1-.75.4-1.25.72-1.54-2.55-.29-5.24-1.27-5.24-5.67 0-1.25.45-2.28 1.18-3.08-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.18a10.96 10.96 0 015.74 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.57.23 2.73.11 3.02.74.8 1.18 1.83 1.18 3.08 0 4.41-2.7 5.38-5.27 5.66.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56A11.5 11.5 0 0023.5 12C23.5 5.65 18.35.5 12 .5z"/></svg> Star on GitHub <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M8 7h9v9"/></svg> </a> <a class="btn btn-ghost" href="https://github.com/pingdotgg/t3code/fork" target="_blank" rel="noopener noreferrer"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="5" r="2.2"/><circle cx="18" cy="5" r="2.2"/><circle cx="12" cy="19" r="2.2"/><path d="M6 7.2v2A3 3 0 009 12.2h6A3 3 0 0018 9.2v-2M12 14v2.8"/></svg> Fork the repo <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M8 7h9v9"/></svg> </a> <a class="btn btn-ghost" href="https://github.com/pingdotgg/t3code/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4.5" width="19" height="15" rx="2"/><path d="M7 10l3 2-3 2M12 16h5"/></svg> Read CONTRIBUTING.md <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M8 7h9v9"/></svg> </a> </div> </div> </section> <!-- ── Final CTA ─────────────────────────────────────────────── --> <section id="download" class="sec-cta"> <div class="container cta-inner"> <h2 class="display cta-title"> Your agents deserve better than a terminal. </h2> <p class="cta-sub"> T3 Code is free, open source and fast. Install it, plug in the harness you already pay for, and let your agents get to work. </p> <div class="cta-actions"> <a id="cta-download-btn" class="btn btn-primary btn-lg" href="https://github.com/pingdotgg/t3code/releases"> <svg class="dl-icon dl-icon--apple" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 1000" aria-hidden="true"><path fill="currentColor" d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg> <svg class="dl-icon dl-icon--windows" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" aria-hidden="true"><path fill="currentColor" d="m0 12.402 35.687-4.86.016 34.423-35.67.203zm35.67 33.529.028 34.453L.028 75.48.026 45.7zm4.326-39.025L87.314 0v41.527l-47.318.376zm47.329 39.349-.011 41.34-47.318-6.678-.066-34.739z"/></svg> <TuxIcon class="dl-icon dl-icon--linux" idPrefix="cta-linux-" /> <span id="cta-download-label">Download for macOS</span> </a> <a class="btn btn-ghost btn-lg" href="/download">Windows · Linux · other</a> </div> </div> </section></Layout> <script> import { fetchLatestRelease, RELEASES_URL, type ReleaseAsset } from "../lib/releases"; type Platform = { os: "mac" | "win" | "linux"; label: string; arch?: string }; function detectPlatform(): Platform | null { const ua = navigator.userAgent; if (/Win/i.test(ua)) return { os: "win", label: "Download for Windows" }; if (/Mac/i.test(ua)) { return { os: "mac", label: "Download for macOS", arch: "arm64" }; } if (/Linux/i.test(ua)) return { os: "linux", label: "Download for Linux" }; return null; } function pickAsset(assets: ReleaseAsset[], platform: Platform): string | null { if (platform.os === "win") { return assets.find((a) => a.name.endsWith("-x64.exe"))?.browser_download_url ?? null; } if (platform.os === "mac") { const preferred = assets.find((a) => a.name.endsWith(`-${platform.arch}.dmg`)); const fallback = assets.find((a) => a.name.endsWith(".dmg")); return (preferred ?? fallback)?.browser_download_url ?? null; } if (platform.os === "linux") { return assets.find((a) => a.name.endsWith(".AppImage"))?.browser_download_url ?? null; } return null; } async function init() { const btn = document.getElementById("download-btn") as HTMLAnchorElement | null; const label = document.getElementById("download-label"); const ctaBtn = document.getElementById("cta-download-btn") as HTMLAnchorElement | null; const ctaLabel = document.getElementById("cta-download-label"); const platform = detectPlatform(); if (!platform) return; document.documentElement.dataset.platform = platform.os; if (label) label.textContent = platform.label; if (ctaLabel) ctaLabel.textContent = platform.label; try { const release = await fetchLatestRelease(); const url = pickAsset(release.assets ?? [], platform); if (url) { if (btn) { btn.href = url; btn.removeAttribute("target"); btn.removeAttribute("rel"); } if (ctaBtn) { ctaBtn.href = url; ctaBtn.removeAttribute("target"); ctaBtn.removeAttribute("rel"); } } } catch { if (btn) btn.href = RELEASES_URL; if (ctaBtn) ctaBtn.href = RELEASES_URL; } } init();</script> <style> /* ── Section base ─────────────────────────────────────────── */ section { position: relative; padding: 96px 0; border-top: 1px solid var(--border); } .section-head { margin-bottom: 56px; max-width: 720px; } .section-head .eyebrow { margin-bottom: 14px; display: block; } .section-head h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 18px; } .section-head p { color: var(--fg-muted); font-size: 18px; max-width: 620px; letter-spacing: -0.005em; } .checklist { list-style: none; display: flex; flex-direction: column; gap: 12px; } .checklist li { display: flex; align-items: center; gap: 10px; color: var(--fg-muted); font-size: 15px; } .checklist li svg { color: var(--ok); flex-shrink: 0; } /* ── Hero ─────────────────────────────────────────────────── */ .hero { padding: 72px 0 60px; position: relative; overflow: hidden; border-top: 0; } .hero-grid { position: absolute;Lines 1–500 of 1128. Load more
--- import Layout from "../layouts/Layout.astro"; import TuxIcon from "../components/TuxIcon.astro"; import { tweets } from "../lib/tweets"; const desktopEndorsementRows = [ tweets.filter((_, index) => index % 2 === 0), tweets.filter((_, index) => index % 2 === 1), ]; const mobileEndorsementRows = [ tweets.filter((_, index) => index % 3 === 0), tweets.filter((_, index) => index % 3 === 1), tweets.filter((_, index) => index % 3 === 2), ]; --- <Layout> <!-- ── Hero ──────────────────────────────────────────────────── --> <section class="hero"> <div class="hero-grid" aria-hidden="true"></div> <div class="hero-float" aria-hidden="true"> <span class="hero-float-mark hf-claude" title="Claude Code"> <img src="/harnesses/claude-ai-icon.svg" alt="" /> </span> <span class="hero-float-mark hf-codex" title="Codex"> <img src="/harnesses/openai_dark.svg" alt="" /> </span> <span class="hero-float-mark hf-opencode" title="OpenCode"> <img src="/harnesses/opencode-dark.svg" alt="" /> </span> <span class="hero-float-mark hf-cursor" title="Cursor"> <img src="/harnesses/cursor_light.svg" alt="" /> </span> </div> <div class="container hero-inner"> <h1 class="hero-title display"> The open-source<br />control plane<br />for coding agents. </h1> <p class="hero-sub"> Orchestrate Claude Code, Codex, OpenCode and Cursor from one surface. Bring your own subscription. Fork the whole thing. </p> <div class="hero-actions"> <a id="download-btn" href="https://github.com/pingdotgg/t3code/releases" class="btn btn-primary btn-lg" > <svg class="dl-icon dl-icon--apple" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 1000" aria-hidden="true"><path fill="currentColor" d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg> <svg class="dl-icon dl-icon--windows" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" aria-hidden="true"><path fill="currentColor" d="m0 12.402 35.687-4.86.016 34.423-35.67.203zm35.67 33.529.028 34.453L.028 75.48.026 45.7zm4.326-39.025L87.314 0v41.527l-47.318.376zm47.329 39.349-.011 41.34-47.318-6.678-.066-34.739z"/></svg> <TuxIcon class="dl-icon dl-icon--linux" idPrefix="hero-linux-" /> <span id="download-label">Download for macOS</span> </a> <a href="https://github.com/pingdotgg/t3code" target="_blank" rel="noopener noreferrer" class="btn btn-ghost btn-lg"> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> <path d="M12 .5C5.65.5.5 5.65.5 12a11.5 11.5 0 007.86 10.93c.58.1.79-.25.79-.56v-2c-3.2.69-3.88-1.37-3.88-1.37-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.68 1.25 3.33.96.1-.75.4-1.25.72-1.54-2.55-.29-5.24-1.27-5.24-5.67 0-1.25.45-2.28 1.18-3.08-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.18a10.96 10.96 0 015.74 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.57.23 2.73.11 3.02.74.8 1.18 1.83 1.18 3.08 0 4.41-2.7 5.38-5.27 5.66.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56A11.5 11.5 0 0023.5 12C23.5 5.65 18.35.5 12 .5z"/> </svg> Star on GitHub </a> </div> <div class="hero-preview"> <figure class="hero-screenshot-frame"> <img src="/updated-screenshot.webp" alt="T3 Code app showing multiple coding agent threads in one workspace" width="2508" height="1682" loading="eager" decoding="async" /> </figure> </div> </div> </section> <!-- ── Endorsements ─────────────────────────────────────────── --> <section id="endorsements" class="sec-endorsements" aria-labelledby="endorsements-title"> <div class="container"> <div class="endorsements-head"> <h2 id="endorsements-title">Developers love T3 Code</h2> <p>Real reactions from people building with T3 Code today.</p> </div> </div> <div class="endorsement-carousel endorsement-carousel--desktop" aria-label="Developer endorsements"> { desktopEndorsementRows.map((row, rowIndex) => ( <div class:list={["endorsement-row", rowIndex === 1 && "is-reverse"]}> <div class="endorsement-track"> {[0, 1].map((groupIndex) => ( <div class="endorsement-track-group" aria-hidden={groupIndex === 1 ? "true" : undefined}> {row.map((tweet) => ( <a class="endorsement-card" href={tweet.link} target="_blank" rel="noopener noreferrer" aria-label={`Read ${tweet.handle}'s post on X`} tabindex={groupIndex === 1 ? "-1" : undefined} > <div class="endorsement-author"> <img src={`/pfps/${tweet.handle}.webp`} alt="" width="28" height="28" loading="lazy" decoding="async" /> <div class="endorsement-handle">@{tweet.handle}</div> </div> <p>{tweet.excerpt ?? tweet.content}</p> </a> ))} </div> ))} </div> </div> )) } </div> <div class="endorsement-carousel endorsement-carousel--mobile" aria-label="Developer endorsements"> { mobileEndorsementRows.map((row, rowIndex) => ( <div class:list={["endorsement-row", rowIndex === 1 && "is-reverse"]}> <div class="endorsement-track"> {[0, 1].map((groupIndex) => ( <div class="endorsement-track-group" aria-hidden={groupIndex === 1 ? "true" : undefined}> {row.map((tweet) => ( <a class="endorsement-card" href={tweet.link} target="_blank" rel="noopener noreferrer" aria-label={`Read ${tweet.handle}'s post on X`} tabindex={groupIndex === 1 ? "-1" : undefined} > <div class="endorsement-author"> <img src={`/pfps/${tweet.handle}.webp`} alt="" width="28" height="28" loading="lazy" decoding="async" /> <div class="endorsement-handle">@{tweet.handle}</div> </div> <p>{tweet.excerpt ?? tweet.content}</p> </a> ))} </div> ))} </div> </div> )) } </div> </section> <!-- ── Harnesses ─────────────────────────────────────────────── --> <section id="harnesses" class="sec-harness"> <div class="container"> <div class="section-head"> <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 them, you keep your plan. </p> </div> <div class="harness-grid"> <div class="harness"> <div class="harness-mark"><img src="/harnesses/claude-ai-icon.svg" alt="" /></div> <div class="harness-meta"> <div class="harness-name">Claude Code</div> <div class="harness-tag">claude auth login</div> </div> </div> <div class="harness"> <div class="harness-mark"><img src="/harnesses/openai_dark.svg" alt="" /></div> <div class="harness-meta"> <div class="harness-name">Codex CLI</div> <div class="harness-tag">codex login</div> </div> </div> <div class="harness"> <div class="harness-mark"><img src="/harnesses/opencode-dark.svg" alt="" /></div> <div class="harness-meta"> <div class="harness-name">OpenCode</div> <div class="harness-tag">opencode auth</div> </div> </div> <div class="harness"> <div class="harness-mark"><img src="/harnesses/cursor_light.svg" alt="" /></div> <div class="harness-meta"> <div class="harness-name">Cursor</div> <div class="harness-tag">cursor-agent</div> </div> </div> </div> <div class="harness-footer"> <div class="harness-footer-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg> No keys resold. No quota caps.</div> <div class="harness-footer-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg> Switch models mid-thread.</div> <div class="harness-footer-item"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg> More harnesses shipping weekly.</div> </div> </div> </section> <!-- ── Git ──────────────────────────────────────────────────── --> <section id="git" class="sec-git"> <div class="container git-inner"> <div class="git-visual"> <div class="pr-card tile"> <div class="pr-head"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.2"/><circle cx="6" cy="18" r="2.2"/><circle cx="18" cy="6" r="2.2"/><path d="M6 8v8M18 8v5a3 3 0 01-3 3h-3M13 13l-2 3 2 3"/></svg> <span class="pr-title">Add marketing hero animation</span> <span class="pr-status">Ready</span> </div> <div class="pr-meta"> <span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.2"/><circle cx="6" cy="18" r="2.2"/><circle cx="18" cy="6" r="2.2"/><path d="M6 8v8M6 12a6 6 0 006-6h6"/></svg> feat/marketing-hero → main</span> <span>+142 −38</span> <span>3 commits</span> </div> <div class="pr-files"> <div><code>apps/marketing/src/pages/index.astro</code> <span>+14 −2</span></div> <div><code>apps/marketing/src/layouts/Layout.astro</code> <span>+8 −0</span></div> <div><code>apps/marketing/public/hero.css</code> <span>+120 −36</span></div> </div> <div class="pr-foot"> <button class="btn btn-ghost" style="font-size:12px;padding:6px 10px">View diff</button> <button class="btn btn-primary" style="font-size:12px;padding:6px 12px"> <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.65.5.5 5.65.5 12a11.5 11.5 0 007.86 10.93c.58.1.79-.25.79-.56v-2c-3.2.69-3.88-1.37-3.88-1.37-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.68 1.25 3.33.96.1-.75.4-1.25.72-1.54-2.55-.29-5.24-1.27-5.24-5.67 0-1.25.45-2.28 1.18-3.08-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.18a10.96 10.96 0 015.74 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.57.23 2.73.11 3.02.74.8 1.18 1.83 1.18 3.08 0 4.41-2.7 5.38-5.27 5.66.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56A11.5 11.5 0 0023.5 12C23.5 5.65 18.35.5 12 .5z"/></svg> Open pull request </button> </div> </div> <div class="pr-trail"> <div class="pr-trail-dot"></div> <div class="pr-trail-line"></div> <div class="pr-trail-dot"></div> </div> <div class="pr-button-shell"> <button class="pr-button"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.2"/><circle cx="6" cy="18" r="2.2"/><circle cx="18" cy="6" r="2.2"/><path d="M6 8v8M18 8v5a3 3 0 01-3 3h-3M13 13l-2 3 2 3"/></svg> Commit & push <span class="pr-button-kbd">⌘⏎</span> </button> </div> </div> <div class="git-copy"> <div class="section-head" style="margin-bottom:0"> <h2>One button to commit, push, and make a PR.</h2> <p> Every agent thread writes to its own branch. When it's good, one button opens the PR on GitHub with a generated title, body and changelog. No terminal dance required. </p> <ul class="checklist" style="margin-top:24px"> <li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg> Auto-generated PR titles & bodies</li> <li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg> Inline diff review before you push</li> <li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg> Draft PRs, stack PRs, amend PRs</li> <li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg> Works with your existing GitHub auth</li> </ul> </div> </div> </div> </section> <!-- ── Open source ───────────────────────────────────────────── --> <section id="open" class="sec-open"> <div class="container"> <div class="section-head open-head"> <div class="eyebrow">Open source</div> <h2>If you don't like something, fork it.</h2> <p> T3 Code is as open as they come. We built this app to be modifiable, customizable, and forkable. Go nuts - that's the whole point. </p> </div> <div class="open-grid"> <div class="tile open-term"> <div class="open-term-head"> <span></span><span></span><span></span> <span class="open-term-title">~/code</span> </div> <div class="open-term-body"> <div><span class="prompt">$</span> gh repo fork pingdotgg/t3code --clone</div> <div class="dim">✓ Cloned t3code into ./t3code</div> <div><span class="prompt">$</span> cd t3code && bun install</div> <div class="dim">✓ 1 284 packages installed in 4.2s</div> <div><span class="prompt">$</span> bun dev</div> <div class="dim">▲ T3 Code dev server → <span class="accent">http://localhost:4001</span></div> <div class="cursor"><span class="prompt">$</span><span class="caret"></span></div> </div> </div> <div class="open-stats"> <div class="tile open-stat"> <div class="open-stat-val">MIT</div> <div class="open-stat-lbl">License · commercial-friendly</div> </div> <div class="tile open-stat"> <div class="open-stat-val">TypeScript</div> <div class="open-stat-lbl">End-to-end, strictly typed</div> </div> <div class="tile open-stat"> <div class="open-stat-val">1 monorepo</div> <div class="open-stat-lbl">Desktop · web · server · harnesses</div> </div> <div class="tile open-stat"> <div class="open-stat-val">No telemetry</div> <div class="open-stat-lbl">Unless you opt in. Full stop.</div> </div> </div> </div> <div class="open-ctas"> <a class="btn btn-ghost" href="https://github.com/pingdotgg/t3code" target="_blank" rel="noopener noreferrer"> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.65.5.5 5.65.5 12a11.5 11.5 0 007.86 10.93c.58.1.79-.25.79-.56v-2c-3.2.69-3.88-1.37-3.88-1.37-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.68 1.25 3.33.96.1-.75.4-1.25.72-1.54-2.55-.29-5.24-1.27-5.24-5.67 0-1.25.45-2.28 1.18-3.08-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.18a10.96 10.96 0 015.74 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.57.23 2.73.11 3.02.74.8 1.18 1.83 1.18 3.08 0 4.41-2.7 5.38-5.27 5.66.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56A11.5 11.5 0 0023.5 12C23.5 5.65 18.35.5 12 .5z"/></svg> Star on GitHub <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M8 7h9v9"/></svg> </a> <a class="btn btn-ghost" href="https://github.com/pingdotgg/t3code/fork" target="_blank" rel="noopener noreferrer"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="5" r="2.2"/><circle cx="18" cy="5" r="2.2"/><circle cx="12" cy="19" r="2.2"/><path d="M6 7.2v2A3 3 0 009 12.2h6A3 3 0 0018 9.2v-2M12 14v2.8"/></svg> Fork the repo <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M8 7h9v9"/></svg> </a> <a class="btn btn-ghost" href="https://github.com/pingdotgg/t3code/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4.5" width="19" height="15" rx="2"/><path d="M7 10l3 2-3 2M12 16h5"/></svg> Read CONTRIBUTING.md <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M8 7h9v9"/></svg> </a> </div> </div> </section> <!-- ── Final CTA ─────────────────────────────────────────────── --> <section id="download" class="sec-cta"> <div class="container cta-inner"> <h2 class="display cta-title"> Your agents deserve better than a terminal. </h2> <p class="cta-sub"> T3 Code is free, open source and fast. Install it, plug in the harness you already pay for, and let your agents get to work. </p> <div class="cta-actions"> <a id="cta-download-btn" class="btn btn-primary btn-lg" href="https://github.com/pingdotgg/t3code/releases"> <svg class="dl-icon dl-icon--apple" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 1000" aria-hidden="true"><path fill="currentColor" d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/></svg> <svg class="dl-icon dl-icon--windows" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88" aria-hidden="true"><path fill="currentColor" d="m0 12.402 35.687-4.86.016 34.423-35.67.203zm35.67 33.529.028 34.453L.028 75.48.026 45.7zm4.326-39.025L87.314 0v41.527l-47.318.376zm47.329 39.349-.011 41.34-47.318-6.678-.066-34.739z"/></svg> <TuxIcon class="dl-icon dl-icon--linux" idPrefix="cta-linux-" /> <span id="cta-download-label">Download for macOS</span> </a> <a class="btn btn-ghost btn-lg" href="/download">Windows · Linux · other</a> </div> </div> </section> </Layout> <script> import { fetchLatestRelease, RELEASES_URL, type ReleaseAsset } from "../lib/releases"; type Platform = { os: "mac" | "win" | "linux"; label: string; arch?: string }; function detectPlatform(): Platform | null { const ua = navigator.userAgent; if (/Win/i.test(ua)) return { os: "win", label: "Download for Windows" }; if (/Mac/i.test(ua)) { return { os: "mac", label: "Download for macOS", arch: "arm64" }; } if (/Linux/i.test(ua)) return { os: "linux", label: "Download for Linux" }; return null; } function pickAsset(assets: ReleaseAsset[], platform: Platform): string | null { if (platform.os === "win") { return assets.find((a) => a.name.endsWith("-x64.exe"))?.browser_download_url ?? null; } if (platform.os === "mac") { const preferred = assets.find((a) => a.name.endsWith(`-${platform.arch}.dmg`)); const fallback = assets.find((a) => a.name.endsWith(".dmg")); return (preferred ?? fallback)?.browser_download_url ?? null; } if (platform.os === "linux") { return assets.find((a) => a.name.endsWith(".AppImage"))?.browser_download_url ?? null; } return null; } async function init() { const btn = document.getElementById("download-btn") as HTMLAnchorElement | null; const label = document.getElementById("download-label"); const ctaBtn = document.getElementById("cta-download-btn") as HTMLAnchorElement | null; const ctaLabel = document.getElementById("cta-download-label"); const platform = detectPlatform(); if (!platform) return; document.documentElement.dataset.platform = platform.os; if (label) label.textContent = platform.label; if (ctaLabel) ctaLabel.textContent = platform.label; try { const release = await fetchLatestRelease(); const url = pickAsset(release.assets ?? [], platform); if (url) { if (btn) { btn.href = url; btn.removeAttribute("target"); btn.removeAttribute("rel"); } if (ctaBtn) { ctaBtn.href = url; ctaBtn.removeAttribute("target"); ctaBtn.removeAttribute("rel"); } } } catch { if (btn) btn.href = RELEASES_URL; if (ctaBtn) ctaBtn.href = RELEASES_URL; } } init(); </script> <style> /* ── Section base ─────────────────────────────────────────── */ section { position: relative; padding: 96px 0; border-top: 1px solid var(--border); } .section-head { margin-bottom: 56px; max-width: 720px; } .section-head .eyebrow { margin-bottom: 14px; display: block; } .section-head h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 18px; } .section-head p { color: var(--fg-muted); font-size: 18px; max-width: 620px; letter-spacing: -0.005em; } .checklist { list-style: none; display: flex; flex-direction: column; gap: 12px; } .checklist li { display: flex; align-items: center; gap: 10px; color: var(--fg-muted); font-size: 15px; } .checklist li svg { color: var(--ok); flex-shrink: 0; } /* ── Hero ─────────────────────────────────────────────────── */ .hero { padding: 72px 0 60px; position: relative; overflow: hidden; border-top: 0; } .hero-grid { position: absolute;