From f2957ee55891555a016b4e18359986b00126e71c Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Tue, 10 Jun 2025 01:01:03 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20feat(home):=20redesign=20homepag?=
 =?UTF-8?q?e=20hero=20section=20with=20improved=20layout=20and=20multiling?=
 =?UTF-8?q?ual=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove system name display from homepage title
- Replace with unified gateway branding: "统一的大模型接口网关"
- Add subtitle highlighting key benefits: price, stability, no subscription
- Implement language-specific title rendering:
  - English: Two-line layout ("The Unified" / "LLMs API Gateway")
  - Chinese: Single-line layout for better readability
- Increase title font sizes for better visual hierarchy
- Adjust vertical padding for improved centering
- Enhance overall visual appeal and user experience

This update modernizes the homepage presentation and provides better
localization support for different language preferences.
---
 web/src/i18n/locales/en.json |  3 ++-
 web/src/pages/Home/index.js  | 27 +++++++++++++++++----------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json
index 7ee93831..66a52035 100644
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -1406,7 +1406,8 @@
   "可在初始化后修改": "Can be modified after initialization",
   "初始化系统": "Initialize system",
   "支持众多的大模型供应商": "Supporting various LLM providers",
-  "新一代大模型网关与AI资产管理系统，一键接入主流大模型，轻松管理您的AI资产": "Next-generation LLM gateway and AI asset management system, one-click integration with mainstream models, easily manage your AI assets",
+  "统一的大模型接口网关": "The Unified LLMs API Gateway",
+  "更好的价格，更好的稳定性，无需订阅": "Better price, better stability, no subscription required",
   "开始使用": "Get Started",
   "关于我们": "About Us",
   "关于项目": "About Project",
diff --git a/web/src/pages/Home/index.js b/web/src/pages/Home/index.js
index bb647a34..3d2b6ce1 100644
--- a/web/src/pages/Home/index.js
+++ b/web/src/pages/Home/index.js
@@ -86,28 +86,35 @@ const Home = () => {
         <div className="w-full overflow-x-hidden">
           {/* Banner 部分 */}
           <div className="w-full border-b border-semi-color-border min-h-[500px] md:min-h-[600px] lg:min-h-[700px] relative overflow-x-hidden">
-            <div className="flex items-center justify-center h-full px-4 py-12 md:py-16 lg:py-20">
+            <div className="flex items-center justify-center h-full px-4 py-20 md:py-24 lg:py-32">
               {/* 居中内容区 */}
               <div className="flex flex-col items-center justify-center text-center max-w-4xl mx-auto">
                 <div className="flex flex-col items-center justify-center mb-6 md:mb-8">
-                  <h1 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-semibold text-semi-color-text-0 leading-tight">
-                    {statusState?.status?.system_name || 'New API'}
+                  <h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-semibold text-semi-color-text-0 leading-tight">
+                    {i18n.language === 'en' ? (
+                      <>
+                        The Unified<br />
+                        LLMs API Gateway
+                      </>
+                    ) : (
+                      t('统一的大模型接口网关')
+                    )}
                   </h1>
+                  <p className="text-lg md:text-xl lg:text-2xl text-semi-color-text-1 mt-4 md:mt-6">
+                    {t('更好的价格，更好的稳定性，无需订阅')}
+                  </p>
                 </div>
-                <p className="text-base md:text-lg lg:text-xl text-semi-color-text-0 leading-7 md:leading-8 lg:leading-9 max-w-2xl px-4">
-                  {t('新一代大模型网关与AI资产管理系统，一键接入主流大模型，轻松管理您的AI资产')}
-                </p>
 
                 {/* 操作按钮 */}
-                <div className="mt-8 md:mt-10 lg:mt-12 flex flex-row gap-4 justify-center items-center">
+                <div className="flex flex-row gap-4 justify-center items-center">
                   <Link to="/console">
-                    <Button theme="solid" type="primary" size="large" className="!rounded-3xl px-8 py-2" icon={<IconPlay />}>
+                    <Button theme="solid" type="primary" size={isMobile() ? "default" : "large"} className="!rounded-3xl px-8 py-2" icon={<IconPlay />}>
                       {t('开始使用')}
                     </Button>
                   </Link>
                   {isDemoSiteMode && statusState?.status?.version ? (
                     <Button
-                      size="large"
+                      size={isMobile() ? "default" : "large"}
                       className="flex items-center !rounded-3xl px-6 py-2"
                       icon={<IconGithubLogo />}
                       onClick={() => window.open('https://github.com/QuantumNous/new-api', '_blank')}
@@ -117,7 +124,7 @@ const Home = () => {
                   ) : (
                     docsLink && (
                       <Button
-                        size="large"
+                        size={isMobile() ? "default" : "large"}
                         className="flex items-center !rounded-3xl px-6 py-2"
                         icon={<IconFile />}
                         onClick={() => window.open(docsLink, '_blank')}