🎨 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:
@@ -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",
|
||||
|
||||
@@ -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')}
|
||||
|
||||
Reference in New Issue
Block a user