🎨 feat(home): redesign homepage hero section with improved layout and multilingual support

- 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.
This commit is contained in:
Apple\Apple
2025-06-10 01:01:03 +08:00
parent b605ff9b02
commit f2957ee558
2 changed files with 19 additions and 11 deletions

View File

@@ -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",

View File

@@ -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')}