docs: make Go hero CTA translatable with pricing emphasis

3 files changed, 26 insertions, 2 deletions

diff --git a/packages/console/app/src/i18n/en.ts b/packages/console/app/src/i18n/en.ts
index 065a02be3..9cd896fe2 100644
--- a/packages/console/app/src/i18n/en.ts
+++ b/packages/console/app/src/i18n/en.ts
@@ -250,7 +250,10 @@ export const dict = {
   "go.hero.body":
     "Go brings agentic coding to programmers around the world. Offering generous limits and reliable access to the most capable open-source models, so you can build with powerful agents without worrying about cost or availability.",
 
-  "go.cta.start": "Subscribe to Go - $10/mo",
+  "go.cta.start": "Subscribe to Go",
+  "go.cta.template": "{{text}} {{price}}",
+  "go.cta.text": "Subscribe to Go",
+  "go.cta.price": "$10/month",
   "go.pricing.body": "Use with any agent. Top up credit if needed. Cancel any time.",
   "go.graph.free": "Free",
   "go.graph.go": "Go",
diff --git a/packages/console/app/src/routes/go/index.css b/packages/console/app/src/routes/go/index.css
index 2b5ddc970..5a66de678 100644
--- a/packages/console/app/src/routes/go/index.css
+++ b/packages/console/app/src/routes/go/index.css
@@ -359,6 +359,14 @@ body {
       width: fit-content;
       gap: 12px;
       text-decoration: none;
+
+      [data-slot="cta-price"] {
+        opacity: 0.6;
+      }
+
+      svg {
+        opacity: 0.6;
+      }
     }
 
     a:hover {
diff --git a/packages/console/app/src/routes/go/index.tsx b/packages/console/app/src/routes/go/index.tsx
index ac2f10a99..83dfc31ee 100644
--- a/packages/console/app/src/routes/go/index.tsx
+++ b/packages/console/app/src/routes/go/index.tsx
@@ -259,7 +259,20 @@ export default function Home() {
                 */}
               </div>
               <a href="/auth">
-                <span>{i18n.t("go.cta.start")}</span>
+                <span>
+                  <For
+                    each={i18n
+                      .t("go.cta.template")
+                      .split(/(\{\{text\}\}|\{\{price\}\})/g)
+                      .filter(Boolean)}
+                  >
+                    {(part) => {
+                      if (part === "{{text}}") return <span>{i18n.t("go.cta.text")}</span>
+                      if (part === "{{price}}") return <span data-slot="cta-price">{i18n.t("go.cta.price")}</span>
+                      return part
+                    }}
+                  </For>
+                </span>
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path
                     d="M6.5 12L17 12M13 16.5L17.5 12L13 7.5"