From 47cff67b87612bfa4ae87a9e43b1f406c7ea7bd2 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Thu, 28 May 2026 10:15:03 +0800
Subject: [PATCH] feat: replace mobile header logo image with i18n text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use ArkLogoMark + t('brand') on the mobile header so the wordmark can be translated (zh-CN: 'ARK 资料库', en: 'ARK Library'). Desktop nav already used this pattern.
---
 src/i18n.tsx                 |  2 +-
 src/layouts/PublicLayout.tsx | 13 +++----------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/i18n.tsx b/src/i18n.tsx
index edf0bfc..74bec64 100644
--- a/src/i18n.tsx
+++ b/src/i18n.tsx
@@ -11,7 +11,7 @@ export type Lang = "zh-CN" | "en" | "ja" | "ko" | "vi" | "id" | "ms";
 type Dict = Record<string, string>;
 
 const zhDict: Dict = {
-  brand: "ARK 数据库",
+  brand: "ARK 资料库",
   mainNav: "网站导航",
   home: "首页",
   all: "全部资料",
diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index 14e4881..9ea3783 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -278,18 +278,11 @@ export function PublicLayout() {
         <div className="flex h-[64px] items-center justify-between bg-[#08070c] px-[20px] py-[12px] md:hidden">
           <Link
             to="/"
-            className="flex h-[28px] w-[160px] shrink-0 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070c]"
+            className="flex h-[28px] shrink-0 items-center gap-[8px] rounded-sm text-[18px] font-bold tracking-wide text-ark-gold outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070c]"
             aria-label={t("brand")}
           >
-            <img
-              src="/assets/ark-library/header-logo.svg"
-              alt="ARK LIBRARY"
-              className="h-full w-full object-contain"
-              width={160}
-              height={28}
-              decoding="async"
-              draggable={false}
-            />
+            <ArkLogoMark className="h-[28px] w-[28px] shrink-0" />
+            <span className="truncate text-ark-gold">{t("brand")}</span>
           </Link>
 
           <div className="flex h-[40px] w-[136px] shrink-0 items-center gap-[8px]">