go: dashboard design

packages/console/app/src/routes/workspace/[id]/go/index.tsx

@@ -1,8 +1,27 @@
+import { IconGo } from "~/component/icon"
+import { useI18n } from "~/context/i18n"
+import { useLanguage } from "~/context/language"
 import { LiteSection } from "./lite-section"
 
 export default function () {
+  const i18n = useI18n()
+  const language = useLanguage()
+
   return (
     <div data-page="workspace-[id]">
+      <section data-component="header-section">
+        <IconGo />
+        <p>
+          <span>
+            {i18n.t("workspace.lite.banner.beforeLink")}{" "}
+            <a target="_blank" href={language.route("/docs/go")}>
+              {i18n.t("common.learnMore")}
+            </a>
+            .
+          </span>
+        </p>
+      </section>
+
       <div data-slot="sections">
         <LiteSection />
       </div>

packages/console/app/src/routes/workspace/[id]/go/lite-section.tsx

@@ -170,9 +170,6 @@ export function LiteSection() {
     <>
       <Show when={isBlack()}>
         <section class={styles.root}>
-          <div data-slot="section-title">
-            <h2>{i18n.t("workspace.lite.title")}</h2>
-          </div>
           <p data-slot="other-message">{i18n.t("workspace.lite.black.message")}</p>
         </section>
       </Show>
@@ -180,7 +177,6 @@ export function LiteSection() {
         {(sub) => (
           <section class={styles.root}>
             <div data-slot="section-title">
-              <h2>{i18n.t("workspace.lite.title")}</h2>
               <div data-slot="title-row">
                 <p>{i18n.t("workspace.lite.subscription.message")}</p>
                 <button
@@ -260,17 +256,11 @@ export function LiteSection() {
       </Show>
       <Show when={!isBlack() && lite() && !lite()!.mine}>
         <section class={styles.root}>
-          <div data-slot="section-title">
-            <h2>{i18n.t("workspace.lite.title")}</h2>
-          </div>
           <p data-slot="other-message">{i18n.t("workspace.lite.other.message")}</p>
         </section>
       </Show>
       <Show when={!isBlack() && lite() === null}>
         <section class={styles.root}>
-          <div data-slot="section-title">
-            <h2>{i18n.t("workspace.lite.title")}</h2>
-          </div>
           <p data-slot="promo-description">
             <For
               each={i18n

packages/console/app/src/routes/workspace/[id]/index.tsx

@@ -1,10 +1,10 @@
-import { Match, Show, Switch, createMemo } from "solid-js"
+import { Show, createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
 import { createAsync, useParams, useAction, useSubmission } from "@solidjs/router"
 import { NewUserSection } from "./new-user-section"
 import { ModelSection } from "./model-section"
 import { ProviderSection } from "./provider-section"
-import { IconLogo } from "~/component/icon"
+import { IconZen } from "~/component/icon"
 import { querySessionInfo, queryBillingInfo, createCheckoutUrl, formatBalance } from "../common"
 import { useI18n } from "~/context/i18n"
 import { useLanguage } from "~/context/language"
@@ -34,7 +34,7 @@ export default function () {
   return (
     <div data-page="workspace-[id]">
       <section data-component="header-section">
-        <IconLogo />
+        <IconZen />
         <p>
           <span>
             {i18n.t("workspace.home.banner.beforeLink")}{" "}