docs: localize Go graph and testimonial copy

packages/console/app/src/i18n/en.ts

@@ -254,6 +254,32 @@ export const dict = {
   "go.pricing.body": "Use with any agent. Top up credit if needed. Cancel any time.",
   "go.graph.free": "Free",
   "go.graph.go": "Go",
+  "go.graph.label": "Requests/month",
+  "go.graph.usageLimits": "Usage limits",
+  "go.graph.tick": "{{n}}x",
+  "go.graph.aria": "Requests per month: {{free}} vs {{go}}",
+
+  "go.testimonials.brand.zen": "Zen",
+  "go.testimonials.brand.go": "Go",
+  "go.testimonials.handle": "@OpenCode",
+  "go.testimonials.dax.name": "Dax Raad",
+  "go.testimonials.dax.title": "ex-CEO, Terminal Products",
+  "go.testimonials.dax.quoteAfter": "has been life changing, it's truly a no-brainer.",
+  "go.testimonials.jay.name": "Jay V",
+  "go.testimonials.jay.title": "ex-Founder, SEED, PM, Melt, Pop, Dapt, Cadmus, and ViewPoint",
+  "go.testimonials.jay.quoteBefore": "4 out of 5 people on our team love using",
+  "go.testimonials.jay.quoteAfter": ".",
+  "go.testimonials.adam.name": "Adam Elmore",
+  "go.testimonials.adam.title": "ex-Hero, AWS",
+  "go.testimonials.adam.quoteBefore": "I can't recommend",
+  "go.testimonials.adam.quoteAfter": "enough. Seriously, it's really good.",
+  "go.testimonials.david.name": "David Hill",
+  "go.testimonials.david.title": "ex-Head of Design, Laravel",
+  "go.testimonials.david.quoteBefore": "With",
+  "go.testimonials.david.quoteAfter": "I know all the models are tested and perfect for coding agents.",
+  "go.testimonials.frank.name": "Frank Wang",
+  "go.testimonials.frank.title": "ex-Intern, Nvidia (4 times)",
+  "go.testimonials.frank.quote": "I wish I was still at Nvidia.",
   "go.problem.title": "What problem is Go solving?",
   "go.problem.body":
     "We're focused on bringing the OpenCode experience to as many people as possible. OpenCode Go is a low cost ($10/month) subscription designed to bring agentic coding to programmers around the world. It provides generous limits and reliable access to the most capable open source models.",

packages/console/app/src/routes/go/index.tsx

@@ -27,10 +27,12 @@ const checkLoggedIn = query(async () => {
   if (workspaceID) throw redirect(`/workspace/${workspaceID}`)
 }, "checkLoggedIn.get")
 
-function LimitsGraph(props: { href: string; labels: { free: string; go: string } }) {
+function LimitsGraph(props: { href: string }) {
   let root!: HTMLElement
   const [visible, setVisible] = createSignal(false)
 
+  const i18n = useI18n()
+
   onMount(() => {
     if (typeof IntersectionObserver === "undefined") return setVisible(true)
     const observer = new IntersectionObserver(
@@ -73,7 +75,7 @@ function LimitsGraph(props: { href: string; labels: { free: string; go: string }
   return (
     <figure
       data-component="limit-graph"
-      aria-label="Requests per month: Free vs Go"
+      aria-label={i18n.t("go.graph.aria", { free: i18n.t("go.graph.free"), go: i18n.t("go.graph.go") })}
       data-visible={visible() ? "" : undefined}
       ref={root}
       style={{ "--start": `${start}%` } as any}
@@ -86,7 +88,7 @@ function LimitsGraph(props: { href: string; labels: { free: string; go: string }
                 <g>
                   <line x1={x(t)} y1={top} x2={x(t)} y2={h - bottom} data-grid />
                   <text x={x(t)} y={h - 18} text-anchor="middle" data-tick>
-                    {t}x
+                    {i18n.t("go.graph.tick", { n: t })}
                   </text>
                 </g>
               )}
@@ -118,10 +120,10 @@ function LimitsGraph(props: { href: string; labels: { free: string; go: string }
 
         <div data-slot="plot-labels">
           <span data-row-label style={{ "--y": y(yFree) } as any}>
-            {props.labels.free}
+            {i18n.t("go.graph.free")}
           </span>
           <span data-row-label style={{ "--y": y(yGo) } as any}>
-            {props.labels.go}
+            {i18n.t("go.graph.go")}
           </span>
         </div>
       </div>
@@ -130,15 +132,15 @@ function LimitsGraph(props: { href: string; labels: { free: string; go: string }
         <div data-slot="caption-row">
           <div data-slot="caption-left">
             <div data-slot="caption-meta">
-              <span data-slot="caption-label">Requests/month</span>
+              <span data-slot="caption-label">{i18n.t("go.graph.label")}</span>
               <a data-slot="caption-link" href={props.href}>
-                Usage limits
+                {i18n.t("go.graph.usageLimits")}
               </a>
             </div>
             <div data-slot="legend">
               <span data-item>
                 <i data-dot data-kind="free" />
-                <span data-name>Free</span>
+                <span data-name>{i18n.t("go.graph.free")}</span>
                 <span data-value>{free.toLocaleString()}</span>
               </span>
               <For each={models}>
@@ -274,10 +276,7 @@ export default function Home() {
           </section>
 
           <section data-component="comparison">
-            <LimitsGraph
+            <LimitsGraph href={language.route("/docs/go/#usage-limits")} />
-              href={language.route("/docs/go/#usage-limits")}
-              labels={{ free: i18n.t("go.graph.free"), go: i18n.t("go.graph.go") }}
-            />
           </section>
 
           <section data-component="problem">
@@ -349,57 +348,61 @@ export default function Home() {
             <div data-slot="testimonial">
               <div data-slot="name">
                 <img src={avatarDax} alt="" />
-                <strong>Dax Raad</strong>
+                <strong>{i18n.t("go.testimonials.dax.name")}</strong>
-                <span>ex-CEO, Terminal Products</span>
+                <span>{i18n.t("go.testimonials.dax.title")}</span>
               </div>
               <div data-slot="quote">
-                <span>@OpenCode</span> <s>Zen</s> Go has been life changing, it's truly a no-brainer.
+                <span>{i18n.t("go.testimonials.handle")}</span> <s>{i18n.t("go.testimonials.brand.zen")}</s>{" "}
+                {i18n.t("go.testimonials.brand.go")} {i18n.t("go.testimonials.dax.quoteAfter")}
               </div>
             </div>
             {/*Jay*/}
             <div data-slot="testimonial">
               <div data-slot="name">
                 <img src={avatarJay} alt="" />
-                <strong>Jay V</strong>
+                <strong>{i18n.t("go.testimonials.jay.name")}</strong>
-                <span>ex-Founder, SEED, PM, Melt, Pop, Dapt, Cadmus, and ViewPoint</span>
+                <span>{i18n.t("go.testimonials.jay.title")}</span>
               </div>
               <div data-slot="quote">
-                {"4 out of 5 people on our team love using "}
+                {i18n.t("go.testimonials.jay.quoteBefore")} <span>{i18n.t("go.testimonials.handle")}</span>{" "}
-                <span>@OpenCode</span> <s>Zen</s> Go.
+                <s>{i18n.t("go.testimonials.brand.zen")}</s> {i18n.t("go.testimonials.brand.go")}
+                {i18n.t("go.testimonials.jay.quoteAfter")}
               </div>
             </div>
             {/*Adam*/}
             <div data-slot="testimonial">
               <div data-slot="name">
                 <img src={avatarAdam} alt="" />
-                <strong>Adam Elmore</strong>
+                <strong>{i18n.t("go.testimonials.adam.name")}</strong>
-                <span>ex-Hero, AWS</span>
+                <span>{i18n.t("go.testimonials.adam.title")}</span>
               </div>
               <div data-slot="quote">
-                {"I can't recommend "}
+                {i18n.t("go.testimonials.adam.quoteBefore")} <span>{i18n.t("go.testimonials.handle")}</span>{" "}
-                <span>@OpenCode</span> <s>Zen</s> Go enough. Seriously, it's really good.
+                <s>{i18n.t("go.testimonials.brand.zen")}</s> {i18n.t("go.testimonials.brand.go")}{" "}
+                {i18n.t("go.testimonials.adam.quoteAfter")}
               </div>
             </div>
             {/*David*/}
             <div data-slot="testimonial">
               <div data-slot="name">
                 <img src={avatarDavid} alt="" />
-                <strong>David Hill</strong>
+                <strong>{i18n.t("go.testimonials.david.name")}</strong>
-                <span>ex-Head of Design, Laravel</span>
+                <span>{i18n.t("go.testimonials.david.title")}</span>
               </div>
               <div data-slot="quote">
-                {"With "}
+                {i18n.t("go.testimonials.david.quoteBefore")} <span>{i18n.t("go.testimonials.handle")}</span>{" "}
-                <span>@OpenCode</span> <s>Zen</s> Go I know all the models are tested and perfect for coding agents.
+                <s>{i18n.t("go.testimonials.brand.zen")}</s> {i18n.t("go.testimonials.brand.go")}{" "}
+                {i18n.t("go.testimonials.david.quoteAfter")}
               </div>
             </div>
             {/*Frank*/}
             <div data-slot="testimonial">
               <div data-slot="name">
                 <img src={avatarFrank} alt="" />
-                <strong>Frank Wang</strong>
+                <strong>{i18n.t("go.testimonials.frank.name")}</strong>
-                <span>ex-Intern, Nvidia (4 times)</span>
+                <span>{i18n.t("go.testimonials.frank.title")}</span>
               </div>
-              <div data-slot="quote">I wish I was still at Nvidia.</div>
+              <div data-slot="quote">{i18n.t("go.testimonials.frank.quote")}</div>
             </div>
           </section>