✨ refactor(home): redesign homepage layout with centered content and improved responsiveness

- Remove example image and right-side image section for cleaner layout
- Center all content vertically and horizontally on the page
- Implement comprehensive responsive design using Tailwind CSS breakpoints
  - Typography scales from text-3xl to xl:text-6xl across screen sizes
  - Spacing and padding adjust dynamically (py-12 to lg:py-20)
  - Icon grid adapts from gap-3 to lg:gap-8
- Keep action buttons horizontally aligned on all screen sizes
- Add play icon to "Get Started" button for better UX
- Refactor version display logic:
  - Show version tag only in demo site mode
  - Replace GitHub button text with version number in demo mode
  - Add docs button with same logic as HeaderBar when not in demo mode
- Optimize icon layout with consistent 40px size and responsive containers
- Improve overall mobile-first responsive design from 320px to 1280px+ screens

web/src/pages/Home/index.js

@@ -4,8 +4,7 @@ import { API, showError, isMobile } from '../../helpers';
 import { StatusContext } from '../../context/Status';
 import { marked } from 'marked';
 import { useTranslation } from 'react-i18next';
-import { IconGithubLogo } from '@douyinfe/semi-icons';
-import exampleImage from '/example.png';
+import { IconGithubLogo, IconPlay, IconFile } from '@douyinfe/semi-icons';
 import { Link } from 'react-router-dom';
 import NoticeModal from '../../components/layout/NoticeModal';
 import { Moonshot, OpenAI, XAI, Zhipu, Volcengine, Cohere, Claude, Gemini, Suno, Minimax, Wenxin, Spark, Qingyan, DeepSeek, Qwen, Midjourney, Grok, AzureAI, Hunyuan, Xinference } from '@lobehub/icons';
@@ -20,6 +19,7 @@ const Home = () => {
   const [noticeVisible, setNoticeVisible] = useState(false);
 
   const isDemoSiteMode = statusState?.status?.demo_site_enabled || false;
+  const docsLink = statusState?.status?.docs_link || '';
 
   useEffect(() => {
     const checkNoticeAndShow = async () => {
@@ -85,132 +85,123 @@ const Home = () => {
       {homePageContentLoaded && homePageContent === '' ? (
         <div className="w-full overflow-x-hidden">
           {/* Banner 部分 */}
-          <div className="w-full border-b border-semi-color-border min-h-[500px] md:h-[650px] lg:h-[750px] relative overflow-x-hidden">
-            <div className="flex flex-col md:flex-row items-center justify-center h-full px-4 py-8 md:py-0">
-              {/* 左侧内容区 */}
-              <div className="flex-shrink-0 w-full md:w-[480px] md:mr-[60px] lg:mr-[120px] mb-8 md:mb-0">
-                <div className="flex items-center gap-2 justify-center md:justify-start">
-                  <h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold text-semi-color-text-0 w-auto leading-normal md:leading-[67px]">
+          <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 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>
-                  {statusState?.status?.version && (
-                    <Tag color='light-blue' size='large' shape='circle' className="ml-1">
-                      {statusState.status.version}
-                    </Tag>
-                  )}
                 </div>
-                <p className="text-base md:text-lg text-semi-color-text-0 mt-4 md:mt-8 w-full md:w-[480px] leading-7 md:leading-8 text-center md:text-left">
+                <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-6 md:mt-10 flex flex-wrap gap-4 justify-center md:justify-start">
+                <div className="mt-8 md:mt-10 lg:mt-12 flex flex-row gap-4 justify-center items-center">
                   <Link to="/console">
-                    <Button theme="solid" type="primary" size="large" className="!rounded-3xl">
+                    <Button theme="solid" type="primary" size="large" className="!rounded-3xl px-8 py-2" icon={<IconPlay />}>
                       {t('开始使用')}
                     </Button>
                   </Link>
-                  {isDemoSiteMode && (
+                  {isDemoSiteMode && statusState?.status?.version ? (
                     <Button
                       size="large"
-                      className="flex items-center !rounded-3xl"
+                      className="flex items-center !rounded-3xl px-6 py-2"
                       icon={<IconGithubLogo />}
                       onClick={() => window.open('https://github.com/QuantumNous/new-api', '_blank')}
                     >
-                      GitHub
+                      {statusState.status.version}
                     </Button>
+                  ) : (
+                    docsLink && (
+                      <Button
+                        size="large"
+                        className="flex items-center !rounded-3xl px-6 py-2"
+                        icon={<IconFile />}
+                        onClick={() => window.open(docsLink, '_blank')}
+                      >
+                        {t('文档')}
+                      </Button>
+                    )
                   )}
                 </div>
 
                 {/* 框架兼容性图标 */}
-                <div className="mt-8 md:mt-16">
-                  <div className="flex items-center mb-3 justify-center md:justify-start">
-                    <Text type="tertiary" className="text-lg md:text-xl font-light">
+                <div className="mt-12 md:mt-16 lg:mt-20 w-full">
+                  <div className="flex items-center mb-6 md:mb-8 justify-center">
+                    <Text type="tertiary" className="text-lg md:text-xl lg:text-2xl font-light">
                       {t('支持众多的大模型供应商')}
                     </Text>
                   </div>
-                  <div className="flex flex-wrap items-center relative mt-6 md:mt-8 gap-6 md:gap-8 justify-center md:justify-start">
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                  <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-4 md:gap-6 lg:gap-8 max-w-5xl mx-auto px-4">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Moonshot size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <OpenAI size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <XAI size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Zhipu.Color size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Volcengine.Color size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Cohere.Color size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Claude.Color size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Gemini.Color size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Suno size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Minimax.Color size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Wenxin.Color size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Spark.Color size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Qingyan.Color size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <DeepSeek.Color size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Qwen.Color size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Midjourney size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Grok size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <AzureAI.Color size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Hunyuan.Color size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
                       <Xinference.Color size={40} />
                     </div>
-                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
-                      <Typography.Text className="!text-2xl font-bold">30+</Typography.Text>
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center">
+                      <Typography.Text className="!text-lg sm:!text-xl md:!text-2xl lg:!text-3xl font-bold">30+</Typography.Text>
                     </div>
                   </div>
                 </div>
               </div>
-
-              {/* 右侧图片区域 - 在小屏幕上隐藏或调整位置 */}
-              <div className="flex-shrink-0 relative md:mr-[-200px] lg:mr-[-400px] hidden md:block lg:min-w-[1100px]">
-                <div className="absolute w-[320px] md:w-[500px] lg:w-[640px] h-[320px] md:h-[500px] lg:h-[640px] left-[-25px] md:left-[-40px] lg:left-[-50px] top-[-10px] md:top-[-15px] lg:top-[-20px] opacity-60"
-                  style={{ filter: 'blur(120px)' }}>
-                  <div className="absolute w-[320px] md:w-[400px] lg:w-[474px] h-[320px] md:h-[400px] lg:h-[474px] top-[80px] md:top-[100px] lg:top-[132px] bg-semi-color-primary rounded-full opacity-30"></div>
-                  <div className="absolute w-[320px] md:w-[400px] lg:w-[474px] h-[320px] md:h-[400px] lg:h-[474px] left-[80px] md:left-[120px] lg:left-[166px] bg-semi-color-tertiary rounded-full opacity-30"></div>
-                </div>
-
-                <img
-                  src={exampleImage}
-                  alt="application demo"
-                  className="relative h-[400px] md:h-[600px] lg:h-[721px] ml-[-15px] md:ml-[-20px] lg:ml-[-30px] mt-[-15px] md:mt-[-20px] lg:mt-[-30px]"
-                />
-              </div>
             </div>
           </div>
         </div>
@@ -223,7 +214,7 @@ const Home = () => {
             />
           ) : (
             <div
-              className="text-base md:text-lg p-4 md:p-6 overflow-x-hidden"
+              className="text-base md:text-lg p-4 md:p-6 lg:p-8 overflow-x-hidden max-w-6xl mx-auto"
               dangerouslySetInnerHTML={{ __html: homePageContent }}
             ></div>
           )}
@@ -234,3 +225,4 @@ const Home = () => {
 };
 
 export default Home;
+