docs: make Go hero CTA translatable with pricing emphasis

2 files changed, 22 insertions, 1 deletions

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"