feat(web): adjust homepage

labring · Oct 16, 2024 · 1238056 · 1238056
1 parent 4665f0d
commit 1238056
Show file tree

Hide file tree

Showing 13 changed files with 67 additions and 52 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -141,8 +141,9 @@
     "i18next",
     "general"
   ],
-  "i18n-ally.sourceLanguage": "zh-CN",
-  "i18n-ally.displayLanguage": "en,zh",
+  "i18n-ally.sourceLanguage": "zh",
+  // "i18n-ally.displayLanguage": "en,zh",
+  "i18n-ally.displayLanguage": "zh",
   "i18n-ally.namespace": false,
   "i18n-ally.pathMatcher": "{locale}/translation.json",
   "i18n-ally.keystyle": "nested",

diff --git a/web/index.html b/web/index.html
@@ -1,17 +1,15 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>云开发</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>laf</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script defer src="/js/aws-sdk-2.1275.0.min.js"></script>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
-</html>
+  <body>
+    <div id="root"></div>
+    <script defer src="/js/aws-sdk-2.1275.0.min.js"></script>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/web/public/favicon.ico b/web/public/favicon.ico
diff --git a/web/public/homepage/logo_text.png b/web/public/homepage/logo_text.png
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -449,7 +449,7 @@
       "description": "Laf provides cloud functions, cloud databases, object storage and other capabilities, writing code like a blog! Launch the ChatGPT app in 3 minutes!"
     },
     "NavBar": {
-      "title": "Laf is an open-source project, we need your Star",
+      "title": "sealaf is an open-source project, we need your Star",
       "home": "Home",
       "dashboard": "Dashboard",
       "price": "Price",
@@ -468,7 +468,7 @@
     "HomePage": {
       "slogan": "Write Code as effortlessly as Blogging",
       "start": "Free Start →",
-      "content1": "Laf is a cloud development platform integrating functions, databases and storage",
+      "content1": "Sealaf is a cloud development platform integrating functions, databases and storage",
       "content2": "Publish online anytime, anywhere"
     },
     "Ability": {
@@ -497,16 +497,16 @@
       "serviceSub": "Learn more"
     },
     "Join": {
-      "title": "Join the laf developer community",
+      "title": "Join the sealaf developer community",
       "subtitle": "Grow up with us",
       "content": "Here you can experience the latest version of Laf at the first time and keep communicating with developers and users in Discord or WeChat groups.",
       "WeChat": "WeChat",
       "forum": "Forum"
     },
     "Footer": {
-      "laf": "Laf provides ready-to-use features such as cloud functions, cloud databases, and object storage. empowers you to write code with the ease of blogging! Get your ChatGPT application up and running in a mere 3 minutes!",
+      "laf": "sealaf provides ready-to-use features such as cloud functions, cloud databases, and object storage. empowers you to write code with the ease of blogging! Get your ChatGPT application up and running in a mere 3 minutes!",
       "product": "Product",
-      "item1_1": "Laf Cloud",
+      "item1_1": "sealaf Cloud",
       "item1_2": "Sealos Cloud",
       "item1_3": "ChangeLog",
       "item1_4": "Vscode Plugin",
@@ -758,5 +758,8 @@
   "UpgradeVersionTip": {
     "Title": "Laf is ready to update!",
     "Description": "Click to update"
+  },
+  "app": {
+    "title": "sealaf"
   }
-}
+}
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -449,7 +449,7 @@
       "description": "Laf 是一个集函数、数据库、存储为一体的云开发平台，随时随地，发布上线"
     },
     "NavBar": {
-      "title": "如果你喜欢 Laf 的话，请在 Github 上给我们一个 Star 吧！",
+      "title": "如果你喜欢 Sealos 云开发的话，请在 Github 上给我们一个 Star 吧！",
       "home": "主页",
       "dashboard": "控制台",
       "price": "价格",
@@ -468,11 +468,11 @@
     "HomePage": {
       "slogan": "像写博客一样写代码",
       "start": "立即开发",
-      "content1": "Laf 是一个集函数、数据库、存储为一体的云开发平台",
+      "content1": "Sealos 云开发是一个集函数、数据库、存储为一体的云开发平台",
       "content2": "随时随地，发布上线"
     },
     "Ability": {
-      "title": "Laf 的能力",
+      "title": "Sealos 云开发的能力",
       "learn": "了解详情",
       "function": "云函数",
       "functionSub": "， 5秒发布你的第一个函数。",
@@ -482,7 +482,7 @@
       "storageSub": "，创建属于你的云存储，管理文件更简单。"
     },
     "Choice": {
-      "title": "为什么选择 Laf",
+      "title": "为什么选择 Sealos 云开发",
       "open": "更开放",
       "openSub": "Laf 遵循 Apache License 2.0 开源协议",
       "fast": "请求更快",
@@ -497,16 +497,16 @@
       "serviceSub": "了解详情"
     },
     "Join": {
-      "title": "加入 Laf 开发者社区",
+      "title": "加入 Sealos 云开发开发者社区",
       "subtitle": "和我们一起成长",
       "content": "在这里你可以在第一时间体验 Laf 的最新版本，以及在 Discord 或微信群与开发者和用户保持沟通",
       "WeChat": "微信",
       "forum": "开发者社区"
     },
     "Footer": {
-      "laf": "Laf 是一个 Serverless 框架，提供开箱即用的云函数，云数据库，对象存储等能力，是一个干净清爽的开发平台，像写博客一样写代码！三分钟上线 ChatGPT 应用！",
+      "laf": "Sealos 云开发是一个 Serverless 框架，提供开箱即用的云函数，云数据库，对象存储等能力，是一个干净清爽的开发平台，像写博客一样写代码！三分钟上线 ChatGPT 应用！",
       "product": "产品",
-      "item1_1": "Laf 公有云",
+      "item1_1": "Sealos 云开发",
       "item1_2": "Sealos",
       "item1_3": "更新日志",
       "item1_4": "Vscode 插件",
@@ -758,5 +758,8 @@
   "UpgradeVersionTip": {
     "Title": "Laf 新版本已经准备好了！",
     "Description": "点击立即更新"
+  },
+  "app": {
+    "title": "云开发"
   }
 }
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -320,7 +320,7 @@
   },
   "TriggerPanel": {
     "AddTrigger": "新建触发器",
-    "CornTip": "例 * * * * * \n表示每 1 分钟执行任务",
+    "CornTip": "例: * * * * * \n表示每 1 分钟执行任务",
     "DeleteConfirm": "确定删除该触发器吗",
     "Express": "表达式",
     "Function": "关联函数",
@@ -449,7 +449,7 @@
       "description": "Laf 是一个集函数、数据库、存储为一体的云开发平台，随时随地，发布上线"
     },
     "NavBar": {
-      "title": "如果你喜欢 Laf 的话，请在 Github 上给我们一个 Star 吧！",
+      "title": "如果你喜欢 Sealos 云开发的话，请在 Github 上给我们一个 Star 吧！",
       "home": "主页",
       "dashboard": "控制台",
       "price": "价格",
@@ -468,11 +468,11 @@
     "HomePage": {
       "slogan": "像写博客一样写代码",
       "start": "立即开发",
-      "content1": "Laf 是一个集函数、数据库、存储为一体的云开发平台",
+      "content1": "Sealos 云开发是一个集函数、数据库、存储为一体的云开发平台",
       "content2": "随时随地，发布上线"
     },
     "Ability": {
-      "title": "Laf 的能力",
+      "title": "Sealos 云开发的能力",
       "learn": "了解详情",
       "function": "云函数",
       "functionSub": "， 5秒发布你的第一个函数。",
@@ -482,7 +482,7 @@
       "storageSub": "，创建属于你的云存储，管理文件更简单。"
     },
     "Choice": {
-      "title": "为什么选择 Laf",
+      "title": "为什么选择 Sealos 云开发",
       "open": "更开放",
       "openSub": "Laf 遵循 Apache License 2.0 开源协议",
       "fast": "请求更快",
@@ -497,16 +497,16 @@
       "serviceSub": "了解详情"
     },
     "Join": {
-      "title": "加入 Laf 开发者社区",
+      "title": "加入 Sealos 云开发开发者社区",
       "subtitle": "和我们一起成长",
       "content": "在这里你可以在第一时间体验 Laf 的最新版本，以及在 Discord 或微信群与开发者和用户保持沟通",
       "WeChat": "微信",
       "forum": "开发者社区"
     },
     "Footer": {
-      "laf": "Laf 是一个 Serverless 框架，提供开箱即用的云函数，云数据库，对象存储等能力，是一个干净清爽的开发平台，像写博客一样写代码！三分钟上线 ChatGPT 应用！",
+      "laf": "Sealos 云开发是一个 Serverless 框架，提供开箱即用的云函数，云数据库，对象存储等能力，是一个干净清爽的开发平台，像写博客一样写代码！三分钟上线 ChatGPT 应用！",
       "product": "产品",
-      "item1_1": "Laf 公有云",
+      "item1_1": "Sealos 云开发",
       "item1_2": "Sealos",
       "item1_3": "更新日志",
       "item1_4": "Vscode 插件",
@@ -647,7 +647,6 @@
     "FunctionDesc_Name": "函数描述 - 函数名",
     "FunctionName_Desc": "函数名 - 函数描述"
   },
-  "MyIncomeAndExpenses": "我的收支",
   "Expenses": "支出",
   "OrderNumber": "订单号",
   "Bonus amount": "赠送金额",
@@ -659,6 +658,7 @@
   "Hour": "小时",
   "Core": "核",
   "No History": "暂无记录",
+  "MyIncomeAndExpenses": "我的收支",
   "RecycleBin": "回收站",
   "Restore": "还原",
   "CheckAll": "全选",
@@ -758,5 +758,8 @@
   "UpgradeVersionTip": {
     "Title": "Laf 新版本已经准备好了！",
     "Description": "点击立即更新"
+  },
+  "app": {
+    "title": "云开发"
   }
 }
diff --git a/web/public/logo.svg b/web/public/logo.svg
diff --git a/web/public/logo_light.png b/web/public/logo_light.png
diff --git a/web/public/logo_text.png b/web/public/logo_text.png
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -42,9 +42,20 @@ loader.config({
   paths: { vs: "/js/monaco-editor.0.43.0" },
 });
 
+const useDocumentTitle = (titleKey: string, defaultTitle: string) => {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    document.title = t(titleKey, defaultTitle);
+    t("app.title");
+  }, [t, titleKey, defaultTitle]);
+};
+
 function APP() {
   const { i18n } = useTranslation();
 
+  useDocumentTitle("app.title", "云开发");
+
   const getSiteSettings = useSiteSettingStore((state) => state.getSiteSettings);
   const { initProviders } = useAuthStore();
 

diff --git a/web/src/pages/homepage/footer.tsx b/web/src/pages/homepage/footer.tsx
@@ -30,13 +30,11 @@ const Footer = (props: Props) => {
           <div className="py-[60px]">
             <div className="flex justify-between">
               <div className="w-1/2">
-                <img
-                  src={darkMode ? "logo_light.png" : "/homepage/logo_text.png"}
-                  alt="logo"
-                  width={64}
-                  height={30}
-                  className="mt-4"
-                />
+                <div className="flex items-center space-x-2">
+                  <img src={darkMode ? "logo.svg" : "logo.svg"} className="h-8 w-auto" alt="logo" />
+                  <span className="text-lg">Sealos 云开发</span>
+                </div>
+
                 <p
                   className={
                     darkMode
@@ -174,7 +172,7 @@ const Footer = (props: Props) => {
                 darkMode ? "w-1/2 text-lg text-lafWhite-700" : "w-1/2 text-lg text-[#3C455D]"
               }
             >
-              laf. all rights reserved. © {new Date().getFullYear()}
+              sealos. all rights reserved. © {new Date().getFullYear()}
               <div
                 dangerouslySetInnerHTML={{
                   __html: siteSettings.site_footer?.value || "",

diff --git a/web/src/pages/homepage/navbar.tsx b/web/src/pages/homepage/navbar.tsx
@@ -106,12 +106,9 @@ const Navbar = () => {
       >
         <div className="flex w-full max-w-[1200px] justify-between">
           <div className="flex items-center">
-            <div>
-              <img
-                src={darkMode ? "logo_light.png" : "logo_text.png"}
-                className="h-auto w-20"
-                alt={"logo"}
-              />
+            <div className="flex items-center space-x-2">
+              <img src={darkMode ? "logo.svg" : "logo.svg"} className="h-8 w-auto" alt="logo" />
+              <span className="text-lg">Sealos 云开发</span>
             </div>
 
             {navList.map((item, index) => {