Просмотр исходного кода

docs: make Go hero CTA translatable with pricing emphasis

David Hill 5 месяцев назад
Родитель
Сommit
b42a63b882

+ 4 - 1
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",

+ 8 - 0
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 {

+ 14 - 1
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"