diff --git a/src/pages/index.js b/src/pages/index.js
index 5fe7fe8..edcf9b5 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,118 +1,218 @@
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
-import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-import clsx from 'clsx';
-import React, { useEffect }  from 'react';
-import Slider from "react-slick";
-import RecruitPhone from "../../static/img/index-recruit-phone.jpg";
-import Recruit from "../../static/img/index-recruit.jpg";
-import indexbug from '../../static/img/indexbug.png';
-import indexbugphone from '../../static/img/indexbugphone.png';
-import Elephant from '../../svg/img-elephant-balloon.svg';
-import HOW from '../../static/img/ivorysql-how.jpg';
-import HomepageFeatures from '../components/HomepageFeatures';
+import React, { useEffect } from 'react';
 import styles from './index.module.css';
-import SliderIndex from './slider';
-import SliderBug from './slider-bug';
-import SliderBugPhone from './slider-bug-phone';
-import SliderPhoneIndex from './slider-phone';
-import { customFields } from '../../docusaurus.config';
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
-     const settings = {
-      autoplay: true,
-      autoplaySpeed: 5000,
-      dots: true,
-      infinite: true,
-      slidesToShow: 1,
-      slidesToScroll: 1,
-      arrows: false,
-      };
-  const { i18n } = useDocusaurusContext();
-  const isEnglish = i18n.currentLocale === 'en';
+
+const Icon01 = require('../../svg/icon-01.svg').default;
+const Icon02 = require('../../svg/icon-02.svg').default;
+const Icon03 = require('../../svg/icon-03.svg').default;
+const Icon04 = require('../../svg/icon-04.svg').default;
+const Icon05 = require('../../svg/icon-05.svg').default;
+const Icon06 = require('../../svg/icon-06.svg').default;
+const HeroElephant = require('../../svg/img-elephant-balloon.svg').default;
+
+const CoreAdvantageIcon = Icon01;
+const ScenarioIcon = Icon03;
+const ArchitectureIcon = Icon04;
+const EcosystemIcon = Icon02;
+const CertificateIcon = Icon05;
+
+const CORE_CARD_ICONS = [Icon01, Icon03, Icon04, Icon02, Icon05, Icon06, Icon01, Icon03];
+const SCENARIO_CARD_ICONS = [Icon04, Icon02, Icon06, Icon01, Icon05];
+
+const RELEASES_URL = 'https://github.com/IvorySQL/IvorySQL/releases';
+const ONLINE_TRIAL_URL = 'http://trial.ivorysql.org:8080/';
+
+const CONTENT = {
+  zh: {
+    slogan: '一款开源的 100% 兼容 Oracle 的 PostgreSQL',
+    intro:
+      'IvorySQL 是一款先进、功能齐全的开源 Oracle 兼容 PostgreSQL，致力于始终保持 100% 兼容，并可作为最新 PostgreSQL 的完全替代品。通过 compatible_db 开关可在 Oracle 与 PostgreSQL 兼容模式间切换，PL/iSQL 支持 Oracle PL/SQL 语法及 Oracle 风格包（Packages）。',
+    heroBadges: ['100% Oracle 兼容', 'Apache 2.0 开源', '基于 PostgreSQL 内核'],
+    latestVersionPrefix: '最新版本',
+    latestVersionLabel: 'IvorySQL 5.1',
+    actions: [
+      { label: '免费下载', to: '/releases-page' },
+      { label: '在线体验', href: ONLINE_TRIAL_URL },
+      { label: '最新活动', to: '/webinars-page' },
+    ],
+    coreTitle: 'IvorySQL 核心优势',
+    coreDesc: '从内核兼容到生态扩展，提供面向企业生产环境的数据库能力。',
+    coreItems: [
+      {
+        title: '核心开源',
+        description: '采用 Apache 2.0 协议开源，无厂商限制，代码透明且支持定制化开发。',
+      },
+      {
+        title: '深度 Oracle 兼容',
+        description: '通过 PL/iSQL 过程语言和 ivorysql_ora 插件实现 PL/SQL 语法兼容，支持 Oracle 数据库迁移。',
+      },
+      {
+        title: '国产化全平台兼容',
+        description: '全面兼容国内外主流软硬件，兼容国产芯片架构和操作系统，提供全平台介质包确保便捷部署。',
+      },
+      {
+        title: '云原生支持',
+        description: '容器化方案覆盖 Docker Compose/Swarm、K8S Operator 及云服务平台。',
+      },
+      {
+        title: '企业级支持',
+        description: '由瀚高股份提供技术支持，并在多个企业生产环境落地。',
+      },
+      {
+        title: '生态融合',
+        description: '继承 PostgreSQL 完整 SQL 能力、可靠性和丰富生态组件。',
+      },
+      {
+        title: '场景覆盖广',
+        description: '覆盖企业数据库、LBS、数据仓库、建站开发、数据库迁移等核心场景。',
+      },
+      {
+        title: '易用性强',
+        description: '降低系统管理成本，提供开发者友好接口和第三方工具集成能力。',
+      },
+    ],
+    scenariosTitle: 'IvorySQL 应用场景',
+    scenariosDesc: '覆盖从交易系统到分析平台的典型数据库工作负载。',
+    scenarioItems: [
+      {
+        title: '企业数据库',
+        description: '适用于 ERP、交易系统、财务系统等对高可用和复杂业务逻辑有要求的场景。',
+      },
+      {
+        title: 'LBS 应用',
+        description: '支持地理空间查询（如 O2O、游戏地图），通过 PostGIS 实现位置服务。',
+      },
+      {
+        title: '数据仓库 / 大数据',
+        description: '利用丰富数据类型和计算能力搭建分析平台。',
+      },
+      {
+        title: '建站 / App 开发',
+        description: '依托高性能能力提升网站与应用效率。',
+      },
+      {
+        title: '数据库迁移',
+        description: '支持将 Oracle 数据库迁移到 IvorySQL。',
+      },
+    ],
+    architectureTitle: 'IvorySQL 架构',
+    architectureAlt: 'IvorySQL 架构图',
+    ecosystemTitle: 'IvorySQL 及周边工具生态全景图',
+    ecosystemAlt: 'IvorySQL 及周边工具生态全景图',
+    compatibilityTitle: '兼容认证',
+    compatibilityDesc: '更多兼容认证与生态合作信息，请查看合作伙伴页面。',
+    compatibilityCta: '查看兼容认证详情',
+  },
+  en: {
+    slogan: 'An open source PostgreSQL with 100% Oracle compatibility',
+    intro:
+      'IvorySQL is an advanced open source Oracle-compatible PostgreSQL distribution built for complete compatibility and smooth replacement of the latest PostgreSQL. The compatible_db switch lets you move between Oracle and PostgreSQL modes, while PL/iSQL supports Oracle PL/SQL syntax and package-style development.',
+    heroBadges: ['100% Oracle compatibility', 'Apache 2.0 open source', 'Built on PostgreSQL kernel'],
+    latestVersionPrefix: 'Latest Version',
+    latestVersionLabel: 'IvorySQL 5.1',
+    actions: [
+      { label: 'Free Download', to: '/releases-page' },
+      { label: 'Online Trial', href: ONLINE_TRIAL_URL },
+      { label: 'Latest Webinars', to: '/webinars-page' },
+    ],
+    coreTitle: 'Core Advantages',
+    coreDesc: 'From kernel compatibility to ecosystem integration, built for production workloads.',
+    coreItems: [
+      {
+        title: 'Open Source Core',
+        description: 'Apache 2.0 licensed with no vendor lock-in, transparent code, and easy customization.',
+      },
+      {
+        title: 'Deep Oracle Compatibility',
+        description: 'PL/iSQL and the ivorysql_ora extension provide strong PL/SQL compatibility for Oracle migrations.',
+      },
+      {
+        title: 'Full-Platform Compatibility',
+        description: 'Compatible with mainstream hardware and operating systems, including domestic chip architectures.',
+      },
+      {
+        title: 'Cloud-Native Support',
+        description: 'Container-ready support across Docker Compose/Swarm, K8S Operator, and cloud platforms.',
+      },
+      {
+        title: 'Enterprise Support',
+        description: 'Backed by HighGo and validated in production-grade enterprise deployments.',
+      },
+      {
+        title: 'Ecosystem Integration',
+        description: 'Inherits PostgreSQL SQL completeness, reliability, and ecosystem extensibility.',
+      },
+      {
+        title: 'Broad Scenario Coverage',
+        description: 'Covers enterprise workloads, LBS, data warehousing, web/app development, and migrations.',
+      },
+      {
+        title: 'Easy to Use',
+        description: 'Reduces management overhead with developer-friendly interfaces and third-party integration.',
+      },
+    ],
+    scenariosTitle: 'Application Scenarios',
+    scenariosDesc: 'Supports mainstream database workloads from OLTP systems to analytical platforms.',
+    scenarioItems: [
+      {
+        title: 'Enterprise Databases',
+        description: 'Fits ERP, transaction systems, and finance systems requiring high availability and complex logic.',
+      },
+      {
+        title: 'LBS Applications',
+        description: 'Supports geospatial workloads such as O2O and game maps through PostGIS.',
+      },
+      {
+        title: 'Data Warehouse / Big Data',
+        description: 'Build analytical platforms with rich data types and robust processing capabilities.',
+      },
+      {
+        title: 'Websites / App Development',
+        description: 'Improves website and application efficiency with high-performance database capabilities.',
+      },
+      {
+        title: 'Database Migration',
+        description: 'Enables direct migration paths from Oracle databases to IvorySQL.',
+      },
+    ],
+    architectureTitle: 'IvorySQL Architecture',
+    architectureAlt: 'IvorySQL architecture diagram',
+    ecosystemTitle: 'IvorySQL Ecosystem Panorama',
+    ecosystemAlt: 'IvorySQL ecosystem panorama',
+    compatibilityTitle: 'Compatibility Certificates',
+    compatibilityDesc: 'See more compatibility certificates and ecosystem partnerships on the partners page.',
+    compatibilityCta: 'View Compatibility Details',
+  },
+};
+
+function ActionLink({ action, className }) {
+  if (action.href) {
+    return (
+      <Link className={className} href={action.href}>
+        {action.label}
+      </Link>
+    );
+  }
   return (
-     <div id='main'>
-        <Slider {...settings}>
-          {/* HOW 大会宣传，根据中英版显示不同图片及链接*/}
-          <div>
-            <a href={isEnglish ? "https://ivorysql.io/" : "https://jsj.top/f/uebqBc"} target="_blank" rel="noopener noreferrer">
-              <img 
-                src={
-                  isEnglish 
-                    ? require('../../static/img/ivorysql-how.jpg').default 
-                    : require('../../static/img/ivorysql-how-zh.jpg').default
-                }
-                alt="IvorySQL Banner" 
-                style={{
-                  width: '100%',
-                  cursor: 'pointer',
-                  objectFit: 'cover',
-                  height: '500px', 
-                }}
-              />
-            </a>
-          </div>
-          {/* 页面一 */}
-          <div id='pageone'>
-            <header className={clsx('hero hero--primary', styles.heroBanner)}>
-              <div className="container">
-                <div className={styles.tree}>
-                  {/* <Tree></Tree> */}
-                </div>
-                <div className={styles.row}>
-                  <div className={styles.heroCenterImage}>
-                    <h1 className="hero__title"><Translate>IvorySQL</Translate></h1>
-                    <p className="hero__subtitle"><Translate>Open Source Oracle Compatible PostgreSQL</Translate></p>
-                    <div className={styles.buttons}>
-                      <Link
-                        className="button button--secondary button--lg"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        to="http://trial.ivorysql.org:8080/">
-                        <Translate>Online Trial</Translate>
-                      </Link>
-                      <Link
-                        className="button button--secondary button--lg"
-                        to="https://github.com/IvorySQL/IvorySQL/blob/master/README.md">
-                        <Translate>Learn More</Translate>
-                      </Link>
-                    </div>
-                  </div>
-                  <div className={styles.heroRightImage}>
-                    <Elephant></Elephant>
-                    {/* <Christmas></Christmas> */}
-                  </div>
-                </div>
-              </div>
-            </header>
-          </div>
-          {/* 页面二 */}
-          <div className={clsx(styles.recruitBanner)}>
-            <div class="indexImg">
-              <img src={Recruit} className={styles.indexImg}></img>
-              <SliderIndex></SliderIndex>
-            </div>
-            <div class="indexImg-phone">
-              <img src={RecruitPhone} className={styles.indexImgPhone}></img>
-              <SliderPhoneIndex></SliderPhoneIndex>
-            </div>
-          </div>
-        </Slider>
-      </div>
+    <Link className={className} to={action.to}>
+      {action.label}
+    </Link>
   );
 }
 
 function ChatWidget() {
-  const {siteConfig:{customFields}} = useDocusaurusContext();
-  
+  const {
+    siteConfig: { customFields },
+  } = useDocusaurusContext();
+
   useEffect(() => {
-    // 创建外部 script 标签加载 SDK
     const script = document.createElement('script');
-    script.src = "https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.1.0-beta.3/libs/cn/index.js";
+    script.src = 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.1.0-beta.3/libs/cn/index.js';
     script.async = true;
 
-    // 当脚本加载完成后调用初始化代码
     script.onload = () => {
       if (window.CozeWebSDK && window.CozeWebSDK.WebChatClient) {
         new window.CozeWebSDK.WebChatClient({
@@ -122,43 +222,185 @@ function ChatWidget() {
           componentProps: {
             title: 'IvorySQL Chatroom',
             icon: 'https://raw.githubusercontent.com/IvorySQL/Ivory-www/main/static/img/ivory-black.png',
-
           },
           auth: {
-            type: "token",
+            type: 'token',
             token: customFields.patToken,
-            onRefreshToken: function () {
+            onRefreshToken() {
               return customFields.patToken;
-            }
-          }
+            },
+          },
         });
       } else {
-        console.error('CozeWebSDK 未加载成功！');
+        console.error('Failed to load CozeWebSDK.');
       }
     };
 
-    // 将 script 标签添加到 body 中
     document.body.appendChild(script);
-
-    // 可选：组件卸载时清除 script 标签
     return () => {
       document.body.removeChild(script);
     };
-  }, []);
+  }, [customFields.botId, customFields.patToken]);
+
+  return null;
+}
 
-  return null; // 该组件不需要渲染任何内容
+function SectionTitle({ title, Icon }) {
+  return (
+    <div className={styles.sectionHead}>
+      <div className={styles.sectionTitleRow}>
+        {Icon ? (
+          <span className={styles.sectionIcon} aria-hidden="true">
+            <Icon />
+          </span>
+        ) : null}
+        <h2>{title}</h2>
+      </div>
+    </div>
+  );
 }
 
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig, i18n } = useDocusaurusContext();
+  const isZh = i18n.currentLocale.toLowerCase().startsWith('zh');
+  const content = isZh ? CONTENT.zh : CONTENT.en;
+  const certImages = [
+    '/img/partners/cert1.jpg',
+    '/img/partners/cert2.jpg',
+    '/img/partners/cert3.jpg',
+    '/img/partners/cert4.jpg',
+    '/img/partners/cert5.png',
+  ];
+  const certCarouselImages = [...certImages, ...certImages];
+
   return (
-    <Layout
-      title={`${siteConfig.title}`}
-      description="Open Source Oracle compatible PostgreSQL">
+    <Layout title={`${siteConfig.title}`} description="Open Source Oracle compatible PostgreSQL">
       <ChatWidget />
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
+      <main className={styles.homePage}>
+        <section className={styles.heroSection}>
+          <div className={clsx('container', styles.heroContainer)}>
+            <div className={styles.heroContent}>
+              <h1 className={styles.heroTitle}>IvorySQL</h1>
+              <p className={styles.slogan}>{content.slogan}</p>
+              <div className={styles.heroBadges}>
+                {content.heroBadges.map((badge) => (
+                  <span key={badge} className={styles.heroBadge}>
+                    {badge}
+                  </span>
+                ))}
+              </div>
+              <p className={styles.heroIntro}>{content.intro}</p>
+              <div className={styles.latestVersion}>
+                <span>{content.latestVersionPrefix}</span>
+                <a href={RELEASES_URL} target="_blank" rel="noopener noreferrer">
+                  {content.latestVersionLabel}
+                </a>
+              </div>
+              <div className={styles.heroActions}>
+                {content.actions.map((action) => (
+                  <ActionLink
+                    key={action.label}
+                    className={clsx('button button--lg', styles.actionButton)}
+                    action={action}
+                  />
+                ))}
+              </div>
+            </div>
+            <div className={styles.heroVisual} aria-hidden="true">
+              <HeroElephant />
+            </div>
+          </div>
+        </section>
+
+        <section className={clsx(styles.section, styles.sectionToneCore)}>
+          <div className="container">
+            <SectionTitle title={content.coreTitle} Icon={CoreAdvantageIcon} />
+            <p className={styles.sectionDescription}>{content.coreDesc}</p>
+            <div className={styles.advantagesGrid}>
+              {content.coreItems.map((item, index) => {
+                const CardIcon = CORE_CARD_ICONS[index % CORE_CARD_ICONS.length];
+                return (
+                  <article key={item.title} className={styles.infoCard}>
+                    <div className={styles.cardTitleRow}>
+                      <span className={styles.cardIcon}>
+                        <CardIcon />
+                      </span>
+                      <h3>{item.title}</h3>
+                    </div>
+                    <p>{item.description}</p>
+                  </article>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        <section className={clsx(styles.section, styles.sectionToneScenario)}>
+          <div className="container">
+            <SectionTitle title={content.scenariosTitle} Icon={ScenarioIcon} />
+            <p className={styles.sectionDescription}>{content.scenariosDesc}</p>
+            <div className={styles.scenariosGrid}>
+              {content.scenarioItems.map((item, index) => {
+                const CardIcon = SCENARIO_CARD_ICONS[index % SCENARIO_CARD_ICONS.length];
+                return (
+                  <article key={item.title} className={styles.infoCard}>
+                    <div className={styles.cardTitleRow}>
+                      <span className={styles.cardIcon}>
+                        <CardIcon />
+                      </span>
+                      <h3>{item.title}</h3>
+                    </div>
+                    <p>{item.description}</p>
+                  </article>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        <section className={clsx(styles.section, styles.sectionToneArchitecture)}>
+          <div className="container">
+            <SectionTitle title={content.architectureTitle} Icon={ArchitectureIcon} />
+            <div className={styles.diagramCard}>
+              <img src="/img/home-architecture.png" alt={content.architectureAlt} />
+            </div>
+          </div>
+        </section>
+
+        <section className={clsx(styles.section, styles.sectionToneEcosystem)}>
+          <div className="container">
+            <SectionTitle title={content.ecosystemTitle} Icon={EcosystemIcon} />
+            <div className={styles.diagramCard}>
+              <img src="/img/home-ecosystem.png" alt={content.ecosystemAlt} />
+            </div>
+          </div>
+        </section>
+
+        <section className={clsx(styles.section, styles.sectionToneCertificate)}>
+          <div className="container">
+            <SectionTitle title={content.compatibilityTitle} Icon={CertificateIcon} />
+            <p className={styles.sectionDescription}>{content.compatibilityDesc}</p>
+            <div className={styles.certCarouselContainer}>
+              <div className={styles.certTrack}>
+                {certCarouselImages.map((image, index) => (
+                  <div className={styles.certSlide} key={`${image}-${index}`}>
+                    <Link to="/partners-page" className={styles.certSlideLink}>
+                      <img
+                        src={image}
+                        alt={`${content.compatibilityTitle} ${(index % certImages.length) + 1}`}
+                      />
+                    </Link>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className={styles.compatibilityAction}>
+              <Link className={clsx('button button--primary button--lg')} to="/partners-page">
+                {content.compatibilityCta}
+              </Link>
+            </div>
+          </div>
+        </section>
       </main>
     </Layout>
   );
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index afdb33b..bd94461 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -1,189 +1,747 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-@import url(https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css);
-@import url(https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css);
-.heroBanner {
-  padding: 5rem 0;
-  text-align: center;
-  position: relative;
-  
-  background-image: linear-gradient(134.3deg,#1f0c79,#5a43ca 39.99%,#ba74e3);
-  /* 圣诞 */
-  /* background-color: #0e2956; */
+.homePage {
+  background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 26%, #f9fbff 100%);
+}
 
-  height: 500px;
+.heroSection {
+  position: relative;
   overflow: hidden;
+  padding: 94px 0 136px;
+  background:
+    radial-gradient(circle at 76% 18%, rgba(141, 210, 255, 0.28) 0%, rgba(141, 210, 255, 0) 42%),
+    radial-gradient(circle at 14% -14%, rgba(251, 175, 66, 0.24) 0%, rgba(251, 175, 66, 0) 38%),
+    linear-gradient(126deg, #111b55 0%, #1e3f98 50%, #1465c9 100%);
+  color: #f8faff;
 }
-.heroBanner_2 {
-  padding: 4rem 4rem;
-  text-align: center;
+
+.heroSection::before {
+  content: '';
+  position: absolute;
+  width: 460px;
+  height: 460px;
+  top: -180px;
+  right: -80px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(157, 215, 255, 0.22) 0%, rgba(157, 215, 255, 0) 68%);
+}
+
+.heroSection::after {
+  content: '';
+  position: absolute;
+  width: 400px;
+  height: 400px;
+  bottom: -210px;
+  left: -90px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(96, 139, 255, 0.24) 0%, rgba(96, 139, 255, 0) 72%);
+}
+
+.heroContainer {
   position: relative;
-  overflow: hidden;
+  z-index: 1;
+  max-width: 1240px;
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 540px);
+  gap: 34px;
+  align-items: center;
 }
 
-.heroBGImage {
-  padding: 5rem 0;
-  text-align: center;
+.heroContent {
+  max-width: 760px;
+  padding: 4px 10px 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  text-align: left;
+}
+
+.heroVisual {
   position: relative;
-  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 430px;
+  pointer-events: none;
+}
 
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+.heroVisual :global(svg) {
   position: relative;
-  background-blend-mode: darken;
-  width: 100%;
+  z-index: 1;
+  display: block;
+  width: clamp(420px, 34vw, 620px);
+  height: auto;
+  opacity: 1;
+  filter: drop-shadow(0 18px 30px rgba(3, 18, 63, 0.42));
+  transform: translateX(10px);
+}
+
+.heroVisual::before {
+  content: '';
+  position: absolute;
+  width: min(100%, 520px);
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0) 72%);
 }
-.row{
+
+.heroTitle {
+  margin: 0;
+  color: #ffffff;
+  font-size: clamp(2.5rem, 4.5vw, 3.65rem);
+  line-height: 1.14;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-shadow: 0 6px 22px rgba(3, 18, 63, 0.3);
+}
+
+.slogan {
+  margin: 0;
+  max-width: 650px;
+  font-size: clamp(1.22rem, 2.2vw, 1.78rem);
+  font-weight: 600;
+  color: #ffd57f;
+  line-height: 1.62;
+  text-shadow: 0 3px 12px rgba(12, 25, 78, 0.35);
+}
+
+.heroBadges {
+  margin: 0;
   display: flex;
-  flex-wrap:nowrap;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 10px;
 }
-.heroCenterImage {
-  padding: 5rem 0;
-  text-align: center;
+
+.heroBadge {
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.44);
+  background: rgba(255, 255, 255, 0.14);
+  padding: 6px 13px;
+  font-size: 0.82rem;
+  color: #f5f8ff;
+}
+
+.heroIntro {
+  margin: 0;
+  max-width: 700px;
+  color: #e5eeff;
+  font-size: 1rem;
+  line-height: 1.96;
+  background: rgba(8, 22, 70, 0.36);
+  border: 1px solid rgba(177, 201, 255, 0.3);
+  border-left: 4px solid #fbaf42;
+  border-radius: 16px;
+  padding: 20px 22px;
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+
+.latestVersion {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  border-radius: 999px;
+  border: 1px solid rgba(251, 175, 66, 0.56);
+  background: linear-gradient(90deg, rgba(251, 175, 66, 0.24) 0%, rgba(255, 255, 255, 0.1) 100%);
+  box-shadow: 0 10px 22px rgba(6, 22, 70, 0.24);
+}
+
+.latestVersion span {
+  color: #ffedc5;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.latestVersion a {
+  color: #fffdf8;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.latestVersion a:hover {
+  text-decoration: underline;
+}
+
+.heroActions {
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 14px;
+}
+
+.actionButton {
+  min-width: 190px;
+  border: 1px solid rgba(255, 255, 255, 0.44);
+  background: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 10px 24px rgba(6, 22, 70, 0.2);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  color: #ffffff;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
+}
+
+.actionButton:hover {
+  color: #ffffff;
+  border-color: rgba(255, 255, 255, 0.62);
+  background: rgba(255, 255, 255, 0.26);
+  transform: translateY(-2px);
+}
+
+.section {
   position: relative;
   overflow: hidden;
-  background-repeat: no-repeat;
-  background-position: cover;
-  background-size: cover;
-  /* 圣诞 */
-  /* margin-left: 300px; */
-}
-.heroLeftImage {
-  padding: 4rem 4rem;
+  padding: 70px 0 12px;
+}
+
+.section :global(.container) {
+  position: relative;
+  z-index: 1;
+}
+
+.sectionToneCore {
+  background: linear-gradient(180deg, #f7f9ff 0%, #fbfcff 100%);
+}
+
+.sectionToneCore::before {
+  content: '';
+  position: absolute;
+  width: 420px;
+  height: 420px;
+  right: -130px;
+  top: -210px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(103, 144, 255, 0.12) 0%, rgba(103, 144, 255, 0) 70%);
+}
+
+.sectionToneCore::after {
+  content: '';
+  position: absolute;
+  left: 3%;
+  bottom: 12%;
+  width: 148px;
+  height: 148px;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 32% 34%, rgba(251, 175, 66, 0.32) 0%, rgba(251, 175, 66, 0.14) 32%, transparent 65%),
+    radial-gradient(circle at 70% 70%, rgba(66, 178, 255, 0.24) 0%, transparent 60%);
+}
+
+.sectionToneScenario {
+  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
+}
+
+.sectionToneScenario::before {
+  content: '';
+  position: absolute;
+  width: 420px;
+  height: 420px;
+  left: -180px;
+  bottom: -220px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(55, 173, 255, 0.12) 0%, rgba(55, 173, 255, 0) 70%);
+}
+
+.sectionToneScenario::after {
+  content: '';
+  position: absolute;
+  right: 2%;
+  top: 14%;
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 70% 28%, rgba(66, 178, 255, 0.24) 0%, transparent 58%),
+    radial-gradient(circle at 30% 70%, rgba(251, 175, 66, 0.28) 0%, rgba(251, 175, 66, 0.1) 35%, transparent 68%);
+}
+
+.sectionToneArchitecture {
+  background: linear-gradient(180deg, #f6faff 0%, #ffffff 100%);
+}
+
+.sectionToneArchitecture::before {
+  content: '';
+  position: absolute;
+  left: 3%;
+  top: 18%;
+  width: 140px;
+  height: 140px;
+  border-radius: 28px;
+  background:
+    linear-gradient(145deg, rgba(66, 178, 255, 0.22) 0%, rgba(66, 178, 255, 0.08) 45%, rgba(251, 175, 66, 0.12) 100%);
+  transform: rotate(-12deg);
+}
+
+.sectionToneEcosystem {
+  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
+}
+
+.sectionToneEcosystem::before {
+  content: '';
+  position: absolute;
+  right: 3%;
+  bottom: 15%;
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 34% 34%, rgba(251, 175, 66, 0.26) 0%, transparent 56%),
+    radial-gradient(circle at 66% 66%, rgba(66, 178, 255, 0.22) 0%, transparent 62%);
+}
+
+.sectionToneCertificate {
+  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
+}
+
+.sectionToneCertificate::before {
+  content: '';
+  position: absolute;
+  left: 4%;
+  top: 24%;
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 48% 48%, rgba(251, 175, 66, 0.28) 0%, rgba(251, 175, 66, 0.12) 36%, transparent 66%),
+    radial-gradient(circle at 74% 30%, rgba(66, 178, 255, 0.18) 0%, transparent 58%);
+}
+
+.sectionHead {
+  margin-bottom: 22px;
+  display: flex;
+  justify-content: center;
+}
+
+.sectionTitleRow {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 18px;
+  border-radius: 999px;
+  border: 1px solid #d9e6ff;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 5px 16px rgba(21, 63, 131, 0.08);
+}
+
+.sectionIcon {
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #eef4ff 0%, #e3efff 100%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sectionIcon :global(svg) {
+  width: 16px;
+  height: 16px;
+}
+
+.sectionTitleRow h2 {
+  margin: 0;
+  color: #fbaf42;
+  font-size: clamp(1.55rem, 3vw, 2rem);
+}
+
+.sectionDescription {
+  margin: 0 auto 20px;
+  max-width: 760px;
   text-align: center;
+  color: #425177;
+  line-height: 1.72;
+}
+
+.advantagesGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.scenariosGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.infoCard {
   position: relative;
   overflow: hidden;
-  /* background: url("@site/static/img/fp_left_header.svg"); */
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 25%;
-}
-.heroRightImage {
-  /* 原图 */
-  width: 43%;
-  height: 100px;
-  position: relative;
-  top: -47px;
-  /* 圣诞 */
-  /* width: 160%;
-  height: 100px;
-  position: relative;
-  top: -75px;
-  left: 100px;
-  overflow:visible;
-  white-space:nowrap;
-  margin-left: 30px; */
-}
-.tree{
-  width: 40%;
-  height: 100px;
-  margin-left: -200px;
-  margin-top: -50px;
-  position: relative;
-  top: 28px;
+  min-height: 188px;
+  border-radius: 14px;
+  border: 1px solid #dfe7ff;
+  background: #ffffff;
+  box-shadow: 0 10px 28px rgba(17, 63, 132, 0.08);
+  padding: 18px 16px;
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
 }
-.indexImg{
-  width: 100%;
-  max-width: 1390px;
-  height: 500px;
-  margin: auto;
+
+.infoCard::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 14px;
+  right: 14px;
+  height: 3px;
+  border-radius: 0 0 10px 10px;
+  background: linear-gradient(90deg, #2a6dff 0%, #42b2ff 100%);
+}
+
+.infoCard:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 16px 32px rgba(17, 63, 132, 0.12);
+}
+
+.cardTitleRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.cardIcon {
+  width: 38px;
+  height: 38px;
+  flex-shrink: 0;
+  border-radius: 10px;
+  border: 1px solid #d8e6ff;
+  background: linear-gradient(145deg, #f2f7ff 0%, #e7f0ff 100%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cardIcon :global(svg) {
+  width: 20px;
+  height: 20px;
+}
+
+.infoCard h3 {
+  margin: 0;
+  font-size: 1.08rem;
+  color: #12214c;
 }
-.indexImgbug{
-  object-fit: cover;
+
+.infoCard p {
+  margin: 10px 0 0;
+  color: #4f5f84;
+  font-size: 0.95rem;
+  line-height: 1.64;
+}
+
+.diagramCard {
+  overflow: hidden;
+  border-radius: 16px;
+  border: 1px solid #dfe7ff;
+  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
+  box-shadow: 0 14px 32px rgba(15, 43, 92, 0.1);
+  padding: 10px;
+}
+
+.diagramCard img {
+  display: block;
   width: 100%;
-  max-width: 2391px;
-  height: 502px;
-  margin: 0px auto -30px auto;
-}
-.indexImgPhone{
-  display: none;
-  height: 500px;
-  margin: auto;
-}
-.indexImgbugphone{
-  /* object-fit: cover; */
-  width: 1000px;
+  height: auto;
+}
+
+.certCarouselContainer {
+  --cert-slide-width: 248px;
+  --cert-slide-height: 184px;
+  overflow: hidden;
+  padding: 14px 0 10px;
+  position: relative;
+  border-radius: 18px;
+}
+
+.certCarouselContainer::before,
+.certCarouselContainer::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 42px;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.certCarouselContainer::before {
+  left: 0;
+  background: linear-gradient(90deg, rgba(249, 251, 255, 1) 0%, rgba(249, 251, 255, 0) 100%);
+}
+
+.certCarouselContainer::after {
+  right: 0;
+  background: linear-gradient(270deg, rgba(249, 251, 255, 1) 0%, rgba(249, 251, 255, 0) 100%);
+}
+
+.certTrack {
+  display: flex;
+  width: calc(var(--cert-slide-width) * 10);
+  animation: certScroll 36s linear infinite;
+}
+
+.certTrack:hover {
+  animation-play-state: paused;
+}
+
+.certSlide {
+  width: var(--cert-slide-width);
+  height: var(--cert-slide-height);
+  box-sizing: border-box;
+  padding: 0 10px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.certSlideLink {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  /* min-width: 600px; */
-  height: 502px;
-  margin: 0px auto -30px auto;
-}
-.recruitBanner{
-  padding: 0;
-  height: 500px;
-  background-color: #3227d5;
-}
-.phonetree{
-  display: none;
-}
-@media screen and (max-width: 1440px) {
-  .tree{
-    position: relative;
-    top: 140px;
-  }
-  .heroRightImage{
-    width: 160%;
-    margin-left: -20px;
-    position: relative;
-    left: 90px;
-    top: -25px;
-  }
-  .heroCenterImage{
-    margin-left: 200px;
-    width: 400px;
-    height: 500px;
-  }
-}
-@media screen and (min-width: 997px) {
-  /* Show inline table of contents on mobile only */
-  div[class^='tableOfContentsInline'] {
-    display: none;
+  height: 100%;
+  border-radius: 12px;
+  border: 1px solid #d7def3;
+  background: #ffffff;
+  box-shadow: 0 8px 20px rgba(15, 43, 92, 0.08);
+  padding: 10px;
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.certSlideLink:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 14px 28px rgba(15, 43, 92, 0.14);
+}
+
+.certSlideLink img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 8px;
+}
+
+@keyframes certScroll {
+  0% {
+    transform: translateX(0);
   }
-  div[class^='heroCenterImage'] {
-    width: 50%;
+
+  100% {
+    transform: translateX(calc(var(--cert-slide-width) * -5));
   }
-  div[class^='indexImg-phone'] {
-    display: none;
+}
+
+.compatibilityAction {
+  margin-top: 22px;
+  display: flex;
+  justify-content: center;
+  padding-bottom: 64px;
+}
+
+@media (max-width: 1200px) {
+  .heroContainer {
+    grid-template-columns: minmax(0, 1fr) 380px;
+    gap: 22px;
+  }
+
+  .heroVisual :global(svg) {
+    width: 390px;
+    transform: translateX(0);
+  }
+
+  .advantagesGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .certCarouselContainer {
+    --cert-slide-width: 220px;
+    --cert-slide-height: 168px;
   }
 }
 
-@media screen and (max-width: 997px) {
-  div[class^='heroRightImage'] {
+@media (max-width: 996px) {
+  .heroVisual {
     display: none;
   }
-  div[class^='heroLeftImage'] {
-    display: none;
+
+  .heroSection {
+    padding: 70px 0 60px;
   }
-  div[class^='heroCenterImage'] {
-    width: 100%;
-    margin-left:0px;
-    margin-top: 50px;
+
+  .heroContainer {
+    grid-template-columns: 1fr;
+  }
+
+  .heroContent {
+    gap: 18px;
+    padding-right: 0;
+    text-align: center;
+    max-width: 100%;
+  }
+
+  .slogan {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .heroBadges {
+    justify-content: center;
   }
-  div[class^='indexImg'] {
+
+  .heroIntro {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: left;
+    font-size: 0.96rem;
+    line-height: 1.84;
+    max-width: 100%;
+  }
+
+  .latestVersion {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .heroActions {
+    justify-content: center;
+  }
+
+  .section {
+    padding-top: 52px;
+  }
+
+  .scenariosGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .sectionToneCore::after,
+  .sectionToneScenario::after,
+  .sectionToneArchitecture::before,
+  .sectionToneEcosystem::before,
+  .sectionToneCertificate::before {
     display: none;
   }
-  div[class^='indexImg-phone'] {
-    display: inline;
+
+  .certCarouselContainer {
+    overflow-x: auto;
+    overflow-y: visible;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x mandatory;
+    padding: 10px 0 8px;
   }
-  div[class^='tree'] { 
+
+  .certCarouselContainer::before,
+  .certCarouselContainer::after {
     display: none;
   }
-  /* div[class^='phonetree'] {
-    display: inline-block;
-    width: 120%;
-    position: relative;
-    right: 90px;
-    top: 200px;
-  } */
-}
-.buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  align-items: center;
-  justify-content: center;
+
+  .certTrack {
+    width: max-content;
+    animation: none;
+    gap: 10px;
+    padding: 0 6px;
+  }
+
+  .certSlide {
+    width: min(48vw, 220px);
+    height: min(36vw, 168px);
+    padding: 0;
+    scroll-snap-align: start;
+  }
+
+  .certSlideLink {
+    padding: 8px;
+  }
 }
 
+@media (max-width: 640px) {
+  .heroSection {
+    padding: 58px 0 52px;
+  }
+
+  .heroContainer {
+    gap: 16px;
+  }
+
+  .heroContent {
+    gap: 16px;
+  }
+
+  .heroTitle {
+    font-size: clamp(2.1rem, 10vw, 2.6rem);
+    line-height: 1.16;
+  }
+
+  .slogan {
+    font-size: 1.06rem;
+    line-height: 1.68;
+  }
+
+  .heroBadges {
+    gap: 8px;
+  }
+
+  .heroBadge {
+    font-size: 0.78rem;
+    padding: 5px 11px;
+  }
+
+  .heroIntro {
+    font-size: 0.93rem;
+    line-height: 1.8;
+    padding: 16px 16px;
+    border-radius: 14px;
+  }
+
+  .latestVersion {
+    width: 100%;
+    justify-content: center;
+    padding: 10px 12px;
+  }
+
+  .certCarouselContainer {
+    padding: 8px 0 4px;
+  }
+
+  .certTrack {
+    gap: 8px;
+    padding: 0 4px;
+  }
+
+  .certSlide {
+    width: min(72vw, 192px);
+    height: min(54vw, 146px);
+  }
+
+  .heroActions {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    width: 100%;
+    max-width: 360px;
+    margin-left: auto;
+    margin-right: auto;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .actionButton {
+    width: 100%;
+    max-width: 360px;
+    min-width: 0;
+  }
+
+  .advantagesGrid,
+  .scenariosGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .infoCard {
+    min-height: 0;
+  }
+
+  .compatibilityAction {
+    padding-bottom: 46px;
+  }
+}
diff --git a/static/img/home-architecture.png b/static/img/home-architecture.png
new file mode 100644
index 0000000..7de7cda
Binary files /dev/null and b/static/img/home-architecture.png differ
diff --git a/static/img/home-ecosystem.png b/static/img/home-ecosystem.png
new file mode 100644
index 0000000..7842920
Binary files /dev/null and b/static/img/home-ecosystem.png differ