diff --git a/docusaurus.config.js b/docusaurus.config.js
index 1c8007e98..3ba29d3ec 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -19,7 +19,6 @@
 const path = require('path')
 // TODO: [remove] 代码块只用dark主题
 const darkTheme = require('prism-react-renderer/themes/vsDark')
-const tailwindPlugin = require('./plugins/tailwind-config.cjs')
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -314,17 +313,17 @@ const config = {
         sidebarPath: require.resolve('./sidebars.js'),
       },
     ],
-    tailwindPlugin,
-    // async function tailwindcss(context, options) {
-    //   return {
-    //     name: "docusaurus-tailwindcss",
-    //     configurePostCss(postcssOptions) {
-    //       postcssOptions.plugins.push(require("tailwindcss"));
-    //       postcssOptions.plugins.push(require("autoprefixer"));
-    //       return postcssOptions;
-    //     },
-    //   };
-    // },
+    async function tailwindcssPlugin(context, options) {
+      return {
+          name: 'docusaurus-tailwindcss',
+          configurePostCss(postcssOptions) {
+              // Appends TailwindCSS and AutoPrefixer.
+              postcssOptions.plugins.push(require('tailwindcss'));
+              postcssOptions.plugins.push(require('autoprefixer'));
+              return postcssOptions;
+          },
+      };
+  },
     // load github info
     path.resolve(__dirname, 'plugins', 'github-info')
   ],
diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/current/get-started/3.dockerDeployment.md b/i18n/zh-CN/docusaurus-plugin-content-docs/current/get-started/3.dockerDeployment.md
index 618d018fe..e67d6c67e 100644
--- a/i18n/zh-CN/docusaurus-plugin-content-docs/current/get-started/3.dockerDeployment.md
+++ b/i18n/zh-CN/docusaurus-plugin-content-docs/current/get-started/3.dockerDeployment.md
@@ -30,7 +30,7 @@ wget https://raw.githubusercontent.com/apache/incubator-streampark/dev/docker/do
 wget https://raw.githubusercontent.com/apache/incubator-streampark/dev/docker/.env
 docker-compose up -d
 ```
-服务启动后，可以通过 http://localhost:10000 访问 StreamPark，同时也可以通过 http://localhost:8081访问Flink。访问StreamPark链接后会跳转到登陆页面，StreamPark 默认的用户和密码分别为 admin 和 streampark。想要了解更多操作请参考用户手册快速上手。
+服务启动后，可以通过 http://localhost:10000 访问 StreamPark，同时也可以通过 http://localhost:8081 访问Flink。访问StreamPark链接后会跳转到登陆页面，StreamPark 默认的用户和密码分别为 admin 和 streampark。想要了解更多操作请参考用户手册快速上手。
 ![](/doc/image/streampark_docker-compose.png)
 
 该部署方式会自动给你启动一个flink-session集群供你去进行flink任务使用，同时也会挂载本地docker服务以及~/.kube来用于k8s模式的任务提交
diff --git a/package.json b/package.json
index 5fa106e34..25fbfbe29 100644
--- a/package.json
+++ b/package.json
@@ -16,12 +16,12 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "3.3.2",
-    "@docusaurus/plugin-content-docs": "3.3.2",
-    "@docusaurus/preset-classic": "3.3.2",
-    "@docusaurus/theme-common": "3.3.2",
-    "@docusaurus/theme-mermaid": "3.3.2",
-    "@docusaurus/utils-common": "3.3.2",
+    "@docusaurus/core": "3.4.0",
+    "@docusaurus/plugin-content-docs": "3.4.0",
+    "@docusaurus/preset-classic": "3.4.0",
+    "@docusaurus/theme-common": "3.4.0",
+    "@docusaurus/theme-mermaid": "3.4.0",
+    "@docusaurus/utils-common": "3.4.0",
     "@easyops-cn/docusaurus-search-local": "^0.36.0",
     "@mdx-js/react": "^3.0.1",
     "@svgr/webpack": "^6.5.1",
@@ -30,7 +30,6 @@
     "clsx": "^1.2.1",
     "file-loader": "^6.2.0",
     "framer-motion": "^10.18.0",
-    "module-type-aliases@3.3.2": "link:docusaurus/module-type-aliases@3.3.2",
     "postcss": "^8.4.39",
     "prism-react-renderer": "^1.3.5",
     "prismjs": "^1.29.0",
@@ -44,12 +43,12 @@
     "url-loader": "^4.1.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.3",
-    "@tsconfig/docusaurus": "^1.0.7",
+    "@docusaurus/module-type-aliases": "3.4.0",
+    "@tsconfig/docusaurus": "^2.0.3",
     "docusaurus-plugin-less": "^2.0.2",
     "less": "^4.2.0",
     "less-loader": "^10.2.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.5.3"
   },
   "browserslist": {
     "production": [
diff --git a/plugins/tailwind-config.cjs b/plugins/tailwind-config.cjs
deleted file mode 100644
index a2fb24717..000000000
--- a/plugins/tailwind-config.cjs
+++ /dev/null
@@ -1,14 +0,0 @@
-function tailwindPlugin(context, options) {
-  return {
-    name: 'tailwind-plugin',
-    configurePostCss(postcssOptions) {
-      postcssOptions.plugins = [
-        require('tailwindcss'),
-        require('autoprefixer'),
-      ];
-      return postcssOptions;
-    },
-  };
-}
-
-module.exports = tailwindPlugin;
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8fe9ba491..9d08c058b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,26 +6,26 @@ settings:
 
 dependencies:
   '@docusaurus/core':
-    specifier: 3.3.2
-    version: 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
+    specifier: 3.4.0
+    version: 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
   '@docusaurus/plugin-content-docs':
-    specifier: 3.3.2
-    version: 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
+    specifier: 3.4.0
+    version: 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
   '@docusaurus/preset-classic':
-    specifier: 3.3.2
-    version: 3.3.2(@algolia/client-search@4.23.3)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.13.0)(typescript@4.9.5)
+    specifier: 3.4.0
+    version: 3.4.0(@algolia/client-search@4.23.3)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.13.0)(typescript@5.5.3)
   '@docusaurus/theme-common':
-    specifier: 3.3.2
-    version: 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
+    specifier: 3.4.0
+    version: 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
   '@docusaurus/theme-mermaid':
-    specifier: 3.3.2
-    version: 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
+    specifier: 3.4.0
+    version: 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
   '@docusaurus/utils-common':
-    specifier: 3.3.2
-    version: 3.3.2(@docusaurus/types@3.3.2)
+    specifier: 3.4.0
+    version: 3.4.0(@docusaurus/types@3.4.0)
   '@easyops-cn/docusaurus-search-local':
     specifier: ^0.36.0
-    version: 0.36.0(@docusaurus/theme-common@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
+    version: 0.36.0(@docusaurus/theme-common@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
   '@mdx-js/react':
     specifier: ^3.0.1
     version: 3.0.1(@types/react@18.3.2)(react@18.3.1)
@@ -47,9 +47,6 @@ dependencies:
   framer-motion:
     specifier: ^10.18.0
     version: 10.18.0(react-dom@18.3.1)(react@18.3.1)
-  module-type-aliases@3.3.2:
-    specifier: link:docusaurus/module-type-aliases@3.3.2
-    version: link:docusaurus/module-type-aliases@3.3.2
   postcss:
     specifier: ^8.4.39
     version: 8.4.39
@@ -86,14 +83,14 @@ dependencies:
 
 devDependencies:
   '@docusaurus/module-type-aliases':
-    specifier: 2.4.3
-    version: 2.4.3(react-dom@18.3.1)(react@18.3.1)
+    specifier: 3.4.0
+    version: 3.4.0(react-dom@18.3.1)(react@18.3.1)
   '@tsconfig/docusaurus':
-    specifier: ^1.0.7
-    version: 1.0.7
+    specifier: ^2.0.3
+    version: 2.0.3
   docusaurus-plugin-less:
     specifier: ^2.0.2
-    version: 2.0.2(@docusaurus/core@3.3.2)(less-loader@10.2.0)(less@4.2.0)
+    version: 2.0.2(@docusaurus/core@3.4.0)(less-loader@10.2.0)(less@4.2.0)
   less:
     specifier: ^4.2.0
     version: 4.2.0
@@ -101,8 +98,8 @@ devDependencies:
     specifier: ^10.2.0
     version: 10.2.0(less@4.2.0)(webpack@5.91.0)
   typescript:
-    specifier: ^4.9.5
-    version: 4.9.5
+    specifier: ^5.5.3
+    version: 5.5.3
 
 packages:
 
@@ -605,7 +602,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.9
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.24.5
       '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.12.9)
       '@babel/plugin-transform-parameters': 7.24.5(@babel/core@7.12.9)
     dev: false
@@ -1600,7 +1597,7 @@ packages:
       - '@algolia/client-search'
     dev: false
 
-  /@docusaurus/core@2.4.3(@docusaurus/types@2.4.3)(debug@4.3.4)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
+  /@docusaurus/core@2.4.3(@docusaurus/types@2.4.3)(debug@4.3.4)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
     resolution: {integrity: sha512-dWH5P7cgeNSIg9ufReX6gaCl/TmrGKD38Orbwuz05WPhAQtFXHd5B8Qym1TiXfvUNvwoYKkAJOJuGe8ou0Z7PA==}
     engines: {node: '>=16.14'}
     hasBin: true
@@ -1656,10 +1653,10 @@ packages:
       lodash: 4.17.21
       mini-css-extract-plugin: 2.9.0(webpack@5.91.0)
       postcss: 8.4.39
-      postcss-loader: 7.3.4(postcss@8.4.39)(typescript@4.9.5)(webpack@5.91.0)
+      postcss-loader: 7.3.4(postcss@8.4.39)(typescript@5.5.3)(webpack@5.91.0)
       prompts: 2.4.2
       react: 18.3.1
-      react-dev-utils: 12.0.1(typescript@4.9.5)(webpack@5.91.0)
+      react-dev-utils: 12.0.1(typescript@5.5.3)(webpack@5.91.0)
       react-dom: 18.3.1(react@18.3.1)
       react-helmet-async: 1.3.0(react-dom@18.3.1)(react@18.3.1)
       react-loadable: /@docusaurus/react-loadable@5.5.2(react@18.3.1)
@@ -1701,8 +1698,8 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/core@3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
-    resolution: {integrity: sha512-PzKMydKI3IU1LmeZQDi+ut5RSuilbXnA8QdowGeJEgU8EJjmx3rBHNT1LxQxOVqNEwpWi/csLwd9bn7rUjggPA==}
+  /@docusaurus/core@3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
+    resolution: {integrity: sha512-g+0wwmN2UJsBqy2fQRQ6fhXruoEa62JDeEa5d8IdTJlMoaDaEDfHh7WjwGRn4opuTQWpjAwP/fbcgyHKlE+64w==}
     engines: {node: '>=18.0'}
     hasBin: true
     peerDependencies:
@@ -1719,12 +1716,12 @@ packages:
       '@babel/runtime': 7.24.5
       '@babel/runtime-corejs3': 7.24.5
       '@babel/traverse': 7.24.5
-      '@docusaurus/cssnano-preset': 3.3.2
-      '@docusaurus/logger': 3.3.2
-      '@docusaurus/mdx-loader': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/utils': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
-      '@docusaurus/utils-common': 3.3.2(@docusaurus/types@3.3.2)
-      '@docusaurus/utils-validation': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
+      '@docusaurus/cssnano-preset': 3.4.0
+      '@docusaurus/logger': 3.4.0
+      '@docusaurus/mdx-loader': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/utils': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
+      '@docusaurus/utils-common': 3.4.0(@docusaurus/types@3.4.0)
+      '@docusaurus/utils-validation': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
       autoprefixer: 10.4.19(postcss@8.4.39)
       babel-loader: 9.1.3(@babel/core@7.24.5)(webpack@5.91.0)
       babel-plugin-dynamic-import-node: 2.3.3
@@ -1755,10 +1752,10 @@ packages:
       mini-css-extract-plugin: 2.9.0(webpack@5.91.0)
       p-map: 4.0.0
       postcss: 8.4.39
-      postcss-loader: 7.3.4(postcss@8.4.39)(typescript@4.9.5)(webpack@5.91.0)
+      postcss-loader: 7.3.4(postcss@8.4.39)(typescript@5.5.3)(webpack@5.91.0)
       prompts: 2.4.2
       react: 18.3.1
-      react-dev-utils: 12.0.1(typescript@4.9.5)(webpack@5.91.0)
+      react-dev-utils: 12.0.1(typescript@5.5.3)(webpack@5.91.0)
       react-dom: 18.3.1(react@18.3.1)
       react-helmet-async: 1.3.0(react-dom@18.3.1)(react@18.3.1)
       react-loadable: /@docusaurus/react-loadable@6.0.0(react@18.3.1)
@@ -1808,8 +1805,8 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /@docusaurus/cssnano-preset@3.3.2:
-    resolution: {integrity: sha512-+5+epLk/Rp4vFML4zmyTATNc3Is+buMAL6dNjrMWahdJCJlMWMPd/8YfU+2PA57t8mlSbhLJ7vAZVy54cd1vRQ==}
+  /@docusaurus/cssnano-preset@3.4.0:
+    resolution: {integrity: sha512-qwLFSz6v/pZHy/UP32IrprmH5ORce86BGtN0eBtG75PpzQJAzp9gefspox+s8IEOr0oZKuQ/nhzZ3xwyc3jYJQ==}
     engines: {node: '>=18.0'}
     dependencies:
       cssnano-preset-advanced: 6.1.2(postcss@8.4.39)
@@ -1825,8 +1822,8 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /@docusaurus/logger@3.3.2:
-    resolution: {integrity: sha512-Ldu38GJ4P8g4guN7d7pyCOJ7qQugG7RVyaxrK8OnxuTlaImvQw33aDRwaX2eNmX8YK6v+//Z502F4sOZbHHCHQ==}
+  /@docusaurus/logger@3.4.0:
+    resolution: {integrity: sha512-bZwkX+9SJ8lB9kVRkXw+xvHYSMGG4bpYHKGXeXFvyVc79NMeeBSGgzd4TQLHH+DYeOJoCdl8flrFJVxlZ0wo/Q==}
     engines: {node: '>=18.0'}
     dependencies:
       chalk: 4.1.2
@@ -1867,16 +1864,16 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/mdx-loader@3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
-    resolution: {integrity: sha512-AFRxj/aOk3/mfYDPxE3wTbrjeayVRvNSZP7mgMuUlrb2UlPRbSVAFX1k2RbgAJrnTSwMgb92m2BhJgYRfptN3g==}
+  /@docusaurus/mdx-loader@3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
+    resolution: {integrity: sha512-kSSbrrk4nTjf4d+wtBA9H+FGauf2gCax89kV8SUSJu3qaTdSIKdWERlngsiHaCFgZ7laTJ8a67UFf+xlFPtuTw==}
     engines: {node: '>=18.0'}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@docusaurus/logger': 3.3.2
-      '@docusaurus/utils': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
-      '@docusaurus/utils-validation': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
+      '@docusaurus/logger': 3.4.0
+      '@docusaurus/utils': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
+      '@docusaurus/utils-validation': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
       '@mdx-js/mdx': 3.0.1
       '@slorber/remark-comment': 1.0.0
       escape-html: 1.0.3
@@ -1930,14 +1927,15 @@ packages:
       - esbuild
       - uglify-js
       - webpack-cli
+    dev: false
 
-  /@docusaurus/module-type-aliases@3.3.2(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-b/XB0TBJah5yKb4LYuJT4buFvL0MGAb0+vJDrJtlYMguRtsEBkf2nWl5xP7h4Dlw6ol0hsHrCYzJ50kNIOEclw==}
+  /@docusaurus/module-type-aliases@3.4.0(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-A1AyS8WF5Bkjnb8s+guTDuYmUiwJzNrtchebBHpc0gz0PyHJNMaybUlSrmJjHVcGrya0LKI4YcR3lBDQfXRYLw==}
     peerDependencies:
       react: '*'
       react-dom: '*'
     dependencies:
-      '@docusaurus/types': 3.3.2(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/types': 3.4.0(react-dom@18.3.1)(react@18.3.1)
       '@types/history': 4.7.11
       '@types/react': 18.3.2
       '@types/react-router-config': 5.0.11
@@ -1952,22 +1950,21 @@ packages:
       - supports-color
       - uglify-js
       - webpack-cli
-    dev: false
 
-  /@docusaurus/plugin-content-blog@3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
-    resolution: {integrity: sha512-fJU+dmqp231LnwDJv+BHVWft8pcUS2xVPZdeYH6/ibH1s2wQ/sLcmUrGWyIv/Gq9Ptj8XWjRPMghlxghuPPoxg==}
+  /@docusaurus/plugin-content-blog@3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
+    resolution: {integrity: sha512-vv6ZAj78ibR5Jh7XBUT4ndIjmlAxkijM3Sx5MAAzC1gyv0vupDQNhzuFg1USQmQVj3P5I6bquk12etPV3LJ+Xw==}
     engines: {node: '>=18.0'}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@docusaurus/core': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/logger': 3.3.2
-      '@docusaurus/mdx-loader': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/types': 3.3.2(react-dom@18.3.1)(react@18.3.1)
-      '@docusaurus/utils': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
-      '@docusaurus/utils-common': 3.3.2(@docusaurus/types@3.3.2)
-      '@docusaurus/utils-validation': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
+      '@docusaurus/core': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/logger': 3.4.0
+      '@docusaurus/mdx-loader': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/types': 3.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/utils': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
+      '@docusaurus/utils-common': 3.4.0(@docusaurus/types@3.4.0)
+      '@docusaurus/utils-validation': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
       cheerio: 1.0.0-rc.12
       feed: 4.2.2
       fs-extra: 11.2.0
@@ -1999,14 +1996,14 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/plugin-content-docs@2.4.3(debug@4.3.4)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
+  /@docusaurus/plugin-content-docs@2.4.3(debug@4.3.4)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
     resolution: {integrity: sha512-N7Po2LSH6UejQhzTCsvuX5NOzlC+HiXOVvofnEPj0WhMu1etpLEXE6a4aTxrtg95lQ5kf0xUIdjX9sh3d3G76A==}
     engines: {node: '>=16.14'}
     peerDependencies:
       react: ^16.8.4 || ^17.0.0
       react-dom: ^16.8.4 || ^17.0.0
     dependencies:
-      '@docusaurus/core': 2.4.3(@docusaurus/types@2.4.3)(debug@4.3.4)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
+      '@docusaurus/core': 2.4.3(@docusaurus/types@2.4.3)(debug@4.3.4)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
       '@docusaurus/logger': 2.4.3
       '@docusaurus/mdx-loader': 2.4.3(@docusaurus/types@2.4.3)(react-dom@18.3.1)(react@18.3.1)
       '@docusaurus/module-type-aliases': 2.4.3(react-dom@18.3.1)(react@18.3.1)
@@ -2043,21 +2040,21 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/plugin-content-docs@3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
-    resolution: {integrity: sha512-Dm1ri2VlGATTN3VGk1ZRqdRXWa1UlFubjaEL6JaxaK7IIFqN/Esjpl+Xw10R33loHcRww/H76VdEeYayaL76eg==}
+  /@docusaurus/plugin-content-docs@3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
+    resolution: {integrity: sha512-HkUCZffhBo7ocYheD9oZvMcDloRnGhBMOZRyVcAQRFmZPmNqSyISlXA1tQCIxW+r478fty97XXAGjNYzBjpCsg==}
     engines: {node: '>=18.0'}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@docusaurus/core': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/logger': 3.3.2
-      '@docusaurus/mdx-loader': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/module-type-aliases': 3.3.2(react-dom@18.3.1)(react@18.3.1)
-      '@docusaurus/types': 3.3.2(react-dom@18.3.1)(react@18.3.1)
-      '@docusaurus/utils': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
-      '@docusaurus/utils-common': 3.3.2(@docusaurus/types@3.3.2)
-      '@docusaurus/utils-validation': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
+      '@docusaurus/core': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/logger': 3.4.0
+      '@docusaurus/mdx-loader': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/module-type-aliases': 3.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/types': 3.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/utils': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
+      '@docusaurus/utils-common': 3.4.0(@docusaurus/types@3.4.0)
+      '@docusaurus/utils-validation': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
       '@types/react-router-config': 5.0.11
       combine-promises: 1.2.0
       fs-extra: 11.2.0
@@ -2087,18 +2084,18 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/plugin-content-pages@3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
-    resolution: {integrity: sha512-EKc9fQn5H2+OcGER8x1aR+7URtAGWySUgULfqE/M14+rIisdrBstuEZ4lUPDRrSIexOVClML82h2fDS+GSb8Ew==}
+  /@docusaurus/plugin-content-pages@3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
+    resolution: {integrity: sha512-h2+VN/0JjpR8fIkDEAoadNjfR3oLzB+v1qSXbIAKjQ46JAHx3X22n9nqS+BWSQnTnp1AjkjSvZyJMekmcwxzxg==}
     engines: {node: '>=18.0'}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@docusaurus/core': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/mdx-loader': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/types': 3.3.2(react-dom@18.3.1)(react@18.3.1)
-      '@docusaurus/utils': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
-      '@docusaurus/utils-validation': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
+      '@docusaurus/core': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/mdx-loader': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/types': 3.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/utils': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
+      '@docusaurus/utils-validation': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
       fs-extra: 11.2.0
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -2123,16 +2120,16 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/plugin-debug@3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
-    resolution: {integrity: sha512-oBIBmwtaB+YS0XlmZ3gCO+cMbsGvIYuAKkAopoCh0arVjtlyPbejzPrHuCoRHB9G7abjNZw7zoONOR8+8LM5+Q==}
+  /@docusaurus/plugin-debug@3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
+    resolution: {integrity: sha512-uV7FDUNXGyDSD3PwUaf5YijX91T5/H9SX4ErEcshzwgzWwBtK37nUWPU3ZLJfeTavX3fycTOqk9TglpOLaWkCg==}
     engines: {node: '>=18.0'}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@docusaurus/core': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/types': 3.3.2(react-dom@18.3.1)(react@18.3.1)
-      '@docusaurus/utils': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
+      '@docusaurus/core': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/types': 3.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/utils': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
       fs-extra: 11.2.0
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -2157,16 +2154,16 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/plugin-google-analytics@3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
-    resolution: {integrity: sha512-jXhrEIhYPSClMBK6/IA8qf1/FBoxqGXZvg7EuBax9HaK9+kL3L0TJIlatd8jQJOMtds8mKw806TOCc3rtEad1A==}
+  /@docusaurus/plugin-google-analytics@3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
+    resolution: {integrity: sha512-mCArluxEGi3cmYHqsgpGGt3IyLCrFBxPsxNZ56Mpur0xSlInnIHoeLDH7FvVVcPJRPSQ9/MfRqLsainRw+BojA==}
     engines: {node: '>=18.0'}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@docusaurus/core': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/types': 3.3.2(react-dom@18.3.1)(react@18.3.1)
-      '@docusaurus/utils-validation': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
+      '@docusaurus/core': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/types': 3.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/utils-validation': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       tslib: 2.6.2
@@ -2189,16 +2186,16 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/plugin-google-gtag@3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
-    resolution: {integrity: sha512-vcrKOHGbIDjVnNMrfbNpRQR1x6Jvcrb48kVzpBAOsKbj9rXZm/idjVAXRaewwobHdOrJkfWS/UJoxzK8wyLRBQ==}
+  /@docusaurus/plugin-google-gtag@3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
+    resolution: {integrity: sha512-Dsgg6PLAqzZw5wZ4QjUYc8Z2KqJqXxHxq3vIoyoBWiLEEfigIs7wHR+oiWUQy3Zk9MIk6JTYj7tMoQU0Jm3nqA==}
     engines: {node: '>=18.0'}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@docusaurus/core': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/types': 3.3.2(react-dom@18.3.1)(react@18.3.1)
-      '@docusaurus/utils-validation': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
+      '@docusaurus/core': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/types': 3.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/utils-validation': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
       '@types/gtag.js': 0.0.12
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -2222,16 +2219,16 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/plugin-google-tag-manager@3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
-    resolution: {integrity: sha512-ldkR58Fdeks0vC+HQ+L+bGFSJsotQsipXD+iKXQFvkOfmPIV6QbHRd7IIcm5b6UtwOiK33PylNS++gjyLUmaGw==}
+  /@docusaurus/plugin-google-tag-manager@3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
+    resolution: {integrity: sha512-O9tX1BTwxIhgXpOLpFDueYA9DWk69WCbDRrjYoMQtFHSkTyE7RhNgyjSPREUWJb9i+YUg3OrsvrBYRl64FCPCQ==}
     engines: {node: '>=18.0'}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@docusaurus/core': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/types': 3.3.2(react-dom@18.3.1)(react@18.3.1)
-      '@docusaurus/utils-validation': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
+      '@docusaurus/core': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/types': 3.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/utils-validation': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       tslib: 2.6.2
@@ -2254,19 +2251,19 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/plugin-sitemap@3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
-    resolution: {integrity: sha512-/ZI1+bwZBhAgC30inBsHe3qY9LOZS+79fRGkNdTcGHRMcdAp6Vw2pCd1gzlxd/xU+HXsNP6cLmTOrggmRp3Ujg==}
+  /@docusaurus/plugin-sitemap@3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
+    resolution: {integrity: sha512-+0VDvx9SmNrFNgwPoeoCha+tRoAjopwT0+pYO1xAbyLcewXSemq+eLxEa46Q1/aoOaJQ0qqHELuQM7iS2gp33Q==}
     engines: {node: '>=18.0'}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@docusaurus/core': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/logger': 3.3.2
-      '@docusaurus/types': 3.3.2(react-dom@18.3.1)(react@18.3.1)
-      '@docusaurus/utils': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
-      '@docusaurus/utils-common': 3.3.2(@docusaurus/types@3.3.2)
-      '@docusaurus/utils-validation': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
+      '@docusaurus/core': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/logger': 3.4.0
+      '@docusaurus/types': 3.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/utils': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
+      '@docusaurus/utils-common': 3.4.0(@docusaurus/types@3.4.0)
+      '@docusaurus/utils-validation': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
       fs-extra: 11.2.0
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -2291,26 +2288,26 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/preset-classic@3.3.2(@algolia/client-search@4.23.3)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.13.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-1SDS7YIUN1Pg3BmD6TOTjhB7RSBHJRpgIRKx9TpxqyDrJ92sqtZhomDc6UYoMMLQNF2wHFZZVGFjxJhw2VpL+Q==}
+  /@docusaurus/preset-classic@3.4.0(@algolia/client-search@4.23.3)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.13.0)(typescript@5.5.3):
+    resolution: {integrity: sha512-Ohj6KB7siKqZaQhNJVMBBUzT3Nnp6eTKqO+FXO3qu/n1hJl3YLwVKTWBg28LF7MWrKu46UuYavwMRxud0VyqHg==}
     engines: {node: '>=18.0'}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@docusaurus/core': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/plugin-content-blog': 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/plugin-content-docs': 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/plugin-content-pages': 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/plugin-debug': 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/plugin-google-analytics': 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/plugin-google-gtag': 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/plugin-google-tag-manager': 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/plugin-sitemap': 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/theme-classic': 3.3.2(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/theme-common': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/theme-search-algolia': 3.3.2(@algolia/client-search@4.23.3)(@docusaurus/types@3.3.2)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.13.0)(typescript@4.9.5)
-      '@docusaurus/types': 3.3.2(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/core': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/plugin-content-blog': 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/plugin-content-docs': 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/plugin-content-pages': 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/plugin-debug': 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/plugin-google-analytics': 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/plugin-google-gtag': 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/plugin-google-tag-manager': 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/plugin-sitemap': 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/theme-classic': 3.4.0(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/theme-common': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/theme-search-algolia': 3.4.0(@algolia/client-search@4.23.3)(@docusaurus/types@3.4.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.13.0)(typescript@5.5.3)
+      '@docusaurus/types': 3.4.0(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
@@ -2343,6 +2340,7 @@ packages:
       '@types/react': 18.3.2
       prop-types: 15.8.1
       react: 18.3.1
+    dev: false
 
   /@docusaurus/react-loadable@6.0.0(react@18.3.1):
     resolution: {integrity: sha512-YMMxTUQV/QFSnbgrP3tjDzLHRg7vsbMn8e9HAa8o/1iXoiomo48b7sk/kkmWEuWNDPJVlKSJRB6Y2fHqdJk+SQ==}
@@ -2352,25 +2350,25 @@ packages:
       '@types/react': 18.3.2
       react: 18.3.1
 
-  /@docusaurus/theme-classic@3.3.2(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
-    resolution: {integrity: sha512-gepHFcsluIkPb4Im9ukkiO4lXrai671wzS3cKQkY9BXQgdVwsdPf/KS0Vs4Xlb0F10fTz+T3gNjkxNEgSN9M0A==}
+  /@docusaurus/theme-classic@3.4.0(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
+    resolution: {integrity: sha512-0IPtmxsBYv2adr1GnZRdMkEQt1YW6tpzrUPj02YxNpvJ5+ju4E13J5tB4nfdaen/tfR1hmpSPlTFPvTf4kwy8Q==}
     engines: {node: '>=18.0'}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@docusaurus/core': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/mdx-loader': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/module-type-aliases': 3.3.2(react-dom@18.3.1)(react@18.3.1)
-      '@docusaurus/plugin-content-blog': 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/plugin-content-docs': 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/plugin-content-pages': 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/theme-common': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/theme-translations': 3.3.2
-      '@docusaurus/types': 3.3.2(react-dom@18.3.1)(react@18.3.1)
-      '@docusaurus/utils': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
-      '@docusaurus/utils-common': 3.3.2(@docusaurus/types@3.3.2)
-      '@docusaurus/utils-validation': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
+      '@docusaurus/core': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/mdx-loader': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/module-type-aliases': 3.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/plugin-content-blog': 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/plugin-content-docs': 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/plugin-content-pages': 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/theme-common': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/theme-translations': 3.4.0
+      '@docusaurus/types': 3.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/utils': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
+      '@docusaurus/utils-common': 3.4.0(@docusaurus/types@3.4.0)
+      '@docusaurus/utils-validation': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
       '@mdx-js/react': 3.0.1(@types/react@18.3.2)(react@18.3.1)
       clsx: 2.1.1
       copy-text-to-clipboard: 3.2.0
@@ -2406,20 +2404,20 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/theme-common@3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
-    resolution: {integrity: sha512-kXqSaL/sQqo4uAMQ4fHnvRZrH45Xz2OdJ3ABXDS7YVGPSDTBC8cLebFrRR4YF9EowUHto1UC/EIklJZQMG/usA==}
+  /@docusaurus/theme-common@3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
+    resolution: {integrity: sha512-0A27alXuv7ZdCg28oPE8nH/Iz73/IUejVaCazqu9elS4ypjiLhK3KfzdSQBnL/g7YfHSlymZKdiOHEo8fJ0qMA==}
     engines: {node: '>=18.0'}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@docusaurus/mdx-loader': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/module-type-aliases': 3.3.2(react-dom@18.3.1)(react@18.3.1)
-      '@docusaurus/plugin-content-blog': 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/plugin-content-docs': 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/plugin-content-pages': 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/utils': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
-      '@docusaurus/utils-common': 3.3.2(@docusaurus/types@3.3.2)
+      '@docusaurus/mdx-loader': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/module-type-aliases': 3.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/plugin-content-blog': 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/plugin-content-docs': 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/plugin-content-pages': 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/utils': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
+      '@docusaurus/utils-common': 3.4.0(@docusaurus/types@3.4.0)
       '@types/history': 4.7.11
       '@types/react': 18.3.2
       '@types/react-router-config': 5.0.11
@@ -2450,18 +2448,18 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/theme-mermaid@3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
-    resolution: {integrity: sha512-JY6q7owe5S5iH2N9oTjNDkqmuPW/+4j/zrX46Xag4RYOzt+WtMkeJilbzak8QGG8I2wDJXjUvX7Lu/jWuDAwUg==}
+  /@docusaurus/theme-mermaid@3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
+    resolution: {integrity: sha512-3w5QW0HEZ2O6x2w6lU3ZvOe1gNXP2HIoKDMJBil1VmLBc9PmpAG17VmfhI/p3L2etNmOiVs5GgniUqvn8AFEGQ==}
     engines: {node: '>=18.0'}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@docusaurus/core': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/module-type-aliases': 3.3.2(react-dom@18.3.1)(react@18.3.1)
-      '@docusaurus/theme-common': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/types': 3.3.2(react-dom@18.3.1)(react@18.3.1)
-      '@docusaurus/utils-validation': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
+      '@docusaurus/core': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/module-type-aliases': 3.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/theme-common': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/types': 3.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/utils-validation': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
       mermaid: 10.9.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -2485,21 +2483,21 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/theme-search-algolia@3.3.2(@algolia/client-search@4.23.3)(@docusaurus/types@3.3.2)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.13.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-qLkfCl29VNBnF1MWiL9IyOQaHxUvicZp69hISyq/xMsNvFKHFOaOfk9xezYod2Q9xx3xxUh9t/QPigIei2tX4w==}
+  /@docusaurus/theme-search-algolia@3.4.0(@algolia/client-search@4.23.3)(@docusaurus/types@3.4.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.13.0)(typescript@5.5.3):
+    resolution: {integrity: sha512-aiHFx7OCw4Wck1z6IoShVdUWIjntC8FHCw9c5dR8r3q4Ynh+zkS8y2eFFunN/DL6RXPzpnvKCg3vhLQYJDmT9Q==}
     engines: {node: '>=18.0'}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
       '@docsearch/react': 3.6.0(@algolia/client-search@4.23.3)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.13.0)
-      '@docusaurus/core': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/logger': 3.3.2
-      '@docusaurus/plugin-content-docs': 3.3.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/theme-common': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/theme-translations': 3.3.2
-      '@docusaurus/utils': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
-      '@docusaurus/utils-validation': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
+      '@docusaurus/core': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/logger': 3.4.0
+      '@docusaurus/plugin-content-docs': 3.4.0(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/theme-common': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/theme-translations': 3.4.0
+      '@docusaurus/utils': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
+      '@docusaurus/utils-validation': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
       algoliasearch: 4.23.3
       algoliasearch-helper: 3.19.0(algoliasearch@4.23.3)
       clsx: 2.1.1
@@ -2541,8 +2539,8 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /@docusaurus/theme-translations@3.3.2:
-    resolution: {integrity: sha512-bPuiUG7Z8sNpGuTdGnmKl/oIPeTwKr0AXLGu9KaP6+UFfRZiyWbWE87ti97RrevB2ffojEdvchNujparR3jEZQ==}
+  /@docusaurus/theme-translations@3.4.0:
+    resolution: {integrity: sha512-zSxCSpmQCCdQU5Q4CnX/ID8CSUUI3fvmq4hU/GNP/XoAWtXo9SAVnM3TzpU8Gb//H3WCsT8mJcTfyOk3d9ftNg==}
     engines: {node: '>=18.0'}
     dependencies:
       fs-extra: 11.2.0
@@ -2570,9 +2568,10 @@ packages:
       - esbuild
       - uglify-js
       - webpack-cli
+    dev: false
 
-  /@docusaurus/types@3.3.2(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-5p201S7AZhliRxTU7uMKtSsoC8mgPA9bs9b5NQg1IRdRxJfflursXNVsgc3PcMqiUTul/v1s3k3rXXFlRE890w==}
+  /@docusaurus/types@3.4.0(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-4jcDO8kXi5Cf9TcyikB/yKmz14f2RZ2qTRerbHAsS+5InE9ZgSLBNLsewtFTcTOXSVcbU3FoGOzcNWAmU1TR0A==}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
@@ -2608,8 +2607,8 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /@docusaurus/utils-common@3.3.2(@docusaurus/types@3.3.2):
-    resolution: {integrity: sha512-QWFTLEkPYsejJsLStgtmetMFIA3pM8EPexcZ4WZ7b++gO5jGVH7zsipREnCHzk6+eDgeaXfkR6UPaTt86bp8Og==}
+  /@docusaurus/utils-common@3.4.0(@docusaurus/types@3.4.0):
+    resolution: {integrity: sha512-NVx54Wr4rCEKsjOH5QEVvxIqVvm+9kh7q8aYTU5WzUU9/Hctd6aTrcZ3G0Id4zYJ+AeaG5K5qHA4CY5Kcm2iyQ==}
     engines: {node: '>=18.0'}
     peerDependencies:
       '@docusaurus/types': '*'
@@ -2617,7 +2616,7 @@ packages:
       '@docusaurus/types':
         optional: true
     dependencies:
-      '@docusaurus/types': 3.3.2(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/types': 3.4.0(react-dom@18.3.1)(react@18.3.1)
       tslib: 2.6.2
 
   /@docusaurus/utils-validation@2.4.3(@docusaurus/types@2.4.3):
@@ -2638,15 +2637,17 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/utils-validation@3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5):
-    resolution: {integrity: sha512-itDgFs5+cbW9REuC7NdXals4V6++KifgVMzoGOOOSIifBQw+8ULhy86u5e1lnptVL0sv8oAjq2alO7I40GR7pA==}
+  /@docusaurus/utils-validation@3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3):
+    resolution: {integrity: sha512-hYQ9fM+AXYVTWxJOT1EuNaRnrR2WGpRdLDQG07O8UOpsvCPWUVOeo26Rbm0JWY2sGLfzAb+tvJ62yF+8F+TV0g==}
     engines: {node: '>=18.0'}
     dependencies:
-      '@docusaurus/logger': 3.3.2
-      '@docusaurus/utils': 3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5)
-      '@docusaurus/utils-common': 3.3.2(@docusaurus/types@3.3.2)
+      '@docusaurus/logger': 3.4.0
+      '@docusaurus/utils': 3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3)
+      '@docusaurus/utils-common': 3.4.0(@docusaurus/types@3.4.0)
+      fs-extra: 11.2.0
       joi: 17.13.1
       js-yaml: 4.1.0
+      lodash: 4.17.21
       tslib: 2.6.2
     transitivePeerDependencies:
       - '@docusaurus/types'
@@ -2691,8 +2692,8 @@ packages:
       - webpack-cli
     dev: false
 
-  /@docusaurus/utils@3.3.2(@docusaurus/types@3.3.2)(typescript@4.9.5):
-    resolution: {integrity: sha512-f4YMnBVymtkSxONv4Y8js3Gez9IgHX+Lcg6YRMOjVbq8sgCcdYK1lf6SObAuz5qB/mxiSK7tW0M9aaiIaUSUJg==}
+  /@docusaurus/utils@3.4.0(@docusaurus/types@3.4.0)(typescript@5.5.3):
+    resolution: {integrity: sha512-fRwnu3L3nnWaXOgs88BVBmG1yGjcQqZNHG+vInhEa2Sz2oQB+ZjbEMO5Rh9ePFpZ0YDiDUhpaVjwmS+AU2F14g==}
     engines: {node: '>=18.0'}
     peerDependencies:
       '@docusaurus/types': '*'
@@ -2700,10 +2701,10 @@ packages:
       '@docusaurus/types':
         optional: true
     dependencies:
-      '@docusaurus/logger': 3.3.2
-      '@docusaurus/types': 3.3.2(react-dom@18.3.1)(react@18.3.1)
-      '@docusaurus/utils-common': 3.3.2(@docusaurus/types@3.3.2)
-      '@svgr/webpack': 8.1.0(typescript@4.9.5)
+      '@docusaurus/logger': 3.4.0
+      '@docusaurus/types': 3.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@docusaurus/utils-common': 3.4.0(@docusaurus/types@3.4.0)
+      '@svgr/webpack': 8.1.0(typescript@5.5.3)
       escape-string-regexp: 4.0.0
       file-loader: 6.2.0(webpack@5.91.0)
       fs-extra: 11.2.0
@@ -2719,6 +2720,7 @@ packages:
       shelljs: 0.8.5
       tslib: 2.6.2
       url-loader: 4.1.1(file-loader@6.2.0)(webpack@5.91.0)
+      utility-types: 3.11.0
       webpack: 5.91.0
     transitivePeerDependencies:
       - '@swc/core'
@@ -2735,7 +2737,7 @@ packages:
       immediate: 3.3.0
     dev: false
 
-  /@easyops-cn/docusaurus-search-local@0.36.0(@docusaurus/theme-common@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5):
+  /@easyops-cn/docusaurus-search-local@0.36.0(@docusaurus/theme-common@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3):
     resolution: {integrity: sha512-4R8tLYQc1aLTJcqIYHd7Np/wh6/psfHmGbNuJMwAFW7bJ6KyStlagBdXzv3k3SCqpo5emW2IUNYmHmN+8xvB6A==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -2743,8 +2745,8 @@ packages:
       react: ^16.14.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@docusaurus/plugin-content-docs': 2.4.3(debug@4.3.4)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
-      '@docusaurus/theme-common': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
+      '@docusaurus/plugin-content-docs': 2.4.3(debug@4.3.4)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
+      '@docusaurus/theme-common': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
       '@docusaurus/theme-translations': 2.4.3
       '@docusaurus/utils': 2.4.3(@docusaurus/types@2.4.3)
       '@docusaurus/utils-common': 2.4.3(@docusaurus/types@2.4.3)
@@ -3362,14 +3364,14 @@ packages:
       - supports-color
     dev: false
 
-  /@svgr/core@8.1.0(typescript@4.9.5):
+  /@svgr/core@8.1.0(typescript@5.5.3):
     resolution: {integrity: sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==}
     engines: {node: '>=14'}
     dependencies:
       '@babel/core': 7.24.5
       '@svgr/babel-preset': 8.1.0(@babel/core@7.24.5)
       camelcase: 6.3.0
-      cosmiconfig: 8.3.6(typescript@4.9.5)
+      cosmiconfig: 8.3.6(typescript@5.5.3)
       snake-case: 3.0.4
     transitivePeerDependencies:
       - supports-color
@@ -3413,7 +3415,7 @@ packages:
     dependencies:
       '@babel/core': 7.24.5
       '@svgr/babel-preset': 8.1.0(@babel/core@7.24.5)
-      '@svgr/core': 8.1.0(typescript@4.9.5)
+      '@svgr/core': 8.1.0(typescript@5.5.3)
       '@svgr/hast-util-to-babel-ast': 8.0.0
       svg-parser: 2.0.4
     transitivePeerDependencies:
@@ -3431,14 +3433,14 @@ packages:
       svgo: 2.8.0
     dev: false
 
-  /@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0)(typescript@4.9.5):
+  /@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0)(typescript@5.5.3):
     resolution: {integrity: sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==}
     engines: {node: '>=14'}
     peerDependencies:
       '@svgr/core': '*'
     dependencies:
-      '@svgr/core': 8.1.0(typescript@4.9.5)
-      cosmiconfig: 8.3.6(typescript@4.9.5)
+      '@svgr/core': 8.1.0(typescript@5.5.3)
+      cosmiconfig: 8.3.6(typescript@5.5.3)
       deepmerge: 4.3.1
       svgo: 3.3.2
     transitivePeerDependencies:
@@ -3460,7 +3462,7 @@ packages:
       - supports-color
     dev: false
 
-  /@svgr/webpack@8.1.0(typescript@4.9.5):
+  /@svgr/webpack@8.1.0(typescript@5.5.3):
     resolution: {integrity: sha512-LnhVjMWyMQV9ZmeEy26maJk+8HTIbd59cH4F2MJ439k9DqejRisfFNGAPvRYlKETuh9LrImlS8aKsBgKjMA8WA==}
     engines: {node: '>=14'}
     dependencies:
@@ -3469,9 +3471,9 @@ packages:
       '@babel/preset-env': 7.24.5(@babel/core@7.24.5)
       '@babel/preset-react': 7.24.1(@babel/core@7.24.5)
       '@babel/preset-typescript': 7.24.1(@babel/core@7.24.5)
-      '@svgr/core': 8.1.0(typescript@4.9.5)
+      '@svgr/core': 8.1.0(typescript@5.5.3)
       '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0)
-      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0)(typescript@4.9.5)
+      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0)(typescript@5.5.3)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -3493,8 +3495,8 @@ packages:
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
 
-  /@tsconfig/docusaurus@1.0.7:
-    resolution: {integrity: sha512-ffTXxGIP/IRMCjuzHd6M4/HdIrw1bMfC7Bv8hMkTadnePkpe0lG0oDSdbRpSDZb2rQMAgpbWiR10BvxvNYwYrg==}
+  /@tsconfig/docusaurus@2.0.3:
+    resolution: {integrity: sha512-3l1L5PzWVa7l0691TjnsZ0yOIEwG9DziSqu5IPZPlI5Dowi7z42cEym8Y35GHbgHvPcBfNxfrbxm7Cncn4nByQ==}
     dev: true
 
   /@tybys/wasm-util@0.9.0:
@@ -3600,7 +3602,7 @@ packages:
   /@types/hast@3.0.4:
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 3.0.2
 
   /@types/history@4.7.11:
     resolution: {integrity: sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==}
@@ -3650,7 +3652,7 @@ packages:
   /@types/mdast@4.0.4:
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 3.0.2
 
   /@types/mdx@2.0.13:
     resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
@@ -4764,7 +4766,7 @@ packages:
       yaml: 1.10.2
     dev: false
 
-  /cosmiconfig@8.3.6(typescript@4.9.5):
+  /cosmiconfig@8.3.6(typescript@5.5.3):
     resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -4777,7 +4779,7 @@ packages:
       js-yaml: 4.1.0
       parse-json: 5.2.0
       path-type: 4.0.0
-      typescript: 4.9.5
+      typescript: 5.5.3
 
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
@@ -5590,14 +5592,14 @@ packages:
     dependencies:
       '@leichtgewicht/ip-codec': 2.0.5
 
-  /docusaurus-plugin-less@2.0.2(@docusaurus/core@3.3.2)(less-loader@10.2.0)(less@4.2.0):
+  /docusaurus-plugin-less@2.0.2(@docusaurus/core@3.4.0)(less-loader@10.2.0)(less@4.2.0):
     resolution: {integrity: sha512-ez6WSSvGS8HoJslYHeG5SflyShWvHFXeTTHXPBd3H1T3zgq9wp6wD7scXm+rXyyfhFhP5VNiIqhYB78z4OLjwg==}
     peerDependencies:
       '@docusaurus/core': '>=2.0.0-beta.9'
       less: '>=4.0.0'
       less-loader: '>=10.0.0'
     dependencies:
-      '@docusaurus/core': 3.3.2(@docusaurus/types@3.3.2)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)
+      '@docusaurus/core': 3.4.0(@docusaurus/types@3.4.0)(react-dom@18.3.1)(react@18.3.1)(typescript@5.5.3)
       less: 4.2.0
       less-loader: 10.2.0(less@4.2.0)(webpack@5.91.0)
     dev: true
@@ -6090,7 +6092,7 @@ packages:
       signal-exit: 4.1.0
     dev: false
 
-  /fork-ts-checker-webpack-plugin@6.5.3(typescript@4.9.5)(webpack@5.91.0):
+  /fork-ts-checker-webpack-plugin@6.5.3(typescript@5.5.3)(webpack@5.91.0):
     resolution: {integrity: sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==}
     engines: {node: '>=10', yarn: '>=1.0.0'}
     peerDependencies:
@@ -6117,7 +6119,7 @@ packages:
       schema-utils: 2.7.0
       semver: 7.6.2
       tapable: 1.1.3
-      typescript: 4.9.5
+      typescript: 5.5.3
       webpack: 5.91.0
 
   /form-data-encoder@2.1.4:
@@ -6266,6 +6268,7 @@ packages:
 
   /glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
     dependencies:
       fs.realpath: 1.0.0
       inflight: 1.0.6
@@ -6833,6 +6836,7 @@ packages:
 
   /inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
     dependencies:
       once: 1.4.0
       wrappy: 1.0.2
@@ -8984,14 +8988,14 @@ packages:
       yaml: 2.4.5
     dev: false
 
-  /postcss-loader@7.3.4(postcss@8.4.39)(typescript@4.9.5)(webpack@5.91.0):
+  /postcss-loader@7.3.4(postcss@8.4.39)(typescript@5.5.3)(webpack@5.91.0):
     resolution: {integrity: sha512-iW5WTTBSC5BfsBJ9daFMPVrLT36MrNiC6fqOZTTaHjBNX6Pfd5p+hSBqe/fEeNd7pc13QiAyGt7VdGMw4eRC4A==}
     engines: {node: '>= 14.15.0'}
     peerDependencies:
       postcss: ^7.0.0 || ^8.0.1
       webpack: ^5.0.0
     dependencies:
-      cosmiconfig: 8.3.6(typescript@4.9.5)
+      cosmiconfig: 8.3.6(typescript@5.5.3)
       jiti: 1.21.0
       postcss: 8.4.39
       semver: 7.6.2
@@ -9709,7 +9713,7 @@ packages:
       react: 18.3.1
     dev: false
 
-  /react-dev-utils@12.0.1(typescript@4.9.5)(webpack@5.91.0):
+  /react-dev-utils@12.0.1(typescript@5.5.3)(webpack@5.91.0):
     resolution: {integrity: sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -9728,7 +9732,7 @@ packages:
       escape-string-regexp: 4.0.0
       filesize: 8.0.7
       find-up: 5.0.0
-      fork-ts-checker-webpack-plugin: 6.5.3(typescript@4.9.5)(webpack@5.91.0)
+      fork-ts-checker-webpack-plugin: 6.5.3(typescript@5.5.3)(webpack@5.91.0)
       global-modules: 2.0.0
       globby: 11.1.0
       gzip-size: 6.0.0
@@ -9743,7 +9747,7 @@ packages:
       shell-quote: 1.8.1
       strip-ansi: 6.0.1
       text-table: 0.2.0
-      typescript: 4.9.5
+      typescript: 5.5.3
       webpack: 5.91.0
     transitivePeerDependencies:
       - eslint
@@ -10203,6 +10207,7 @@ packages:
 
   /rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
     dependencies:
       glob: 7.2.3
@@ -10997,9 +11002,9 @@ packages:
     dependencies:
       is-typedarray: 1.0.0
 
-  /typescript@4.9.5:
-    resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
-    engines: {node: '>=4.2.0'}
+  /typescript@5.5.3:
+    resolution: {integrity: sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==}
+    engines: {node: '>=14.17'}
     hasBin: true
 
   /undici-types@5.26.5:
diff --git a/src/components/AchievementBanner/index.tsx b/src/components/AchievementBanner/index.tsx
new file mode 100644
index 000000000..1521c8ba7
--- /dev/null
+++ b/src/components/AchievementBanner/index.tsx
@@ -0,0 +1,169 @@
+import React from 'react';
+import clsx from 'clsx';
+
+import './styles.less';
+import { useDOMVisibilityChange } from '@site/src/hooks/useDomVisibilityChange';
+import { useCacheStorage } from '@site/src/hooks/useCacheStorage';
+
+interface AchievementBannerProps {
+  className?: string;
+}
+
+export default function AchievementBanner(props: AchievementBannerProps) {
+  const [githubState, setGitHubState] = React.useState({
+    stars: 3710,
+    forks: 963,
+    downloads: 9900,
+  });
+
+  const cacheStorage = useCacheStorage<{
+    stars: number;
+    forks: number;
+    downloads: number;
+  }>();
+
+  function startAnimation() {
+    const { stars, forks, downloads } = githubState;
+    console.log('stars: ', stars);
+
+    numberIncrementAnimation(stars, {
+      callback: (current) => {
+        setGitHubState((state) => ({
+          ...state,
+          stars: current,
+        }));
+      },
+    });
+    numberIncrementAnimation(forks, {
+      callback: (current) => {
+        setGitHubState((state) => ({
+          ...state,
+          forks: current,
+        }));
+      },
+    });
+    numberIncrementAnimation(downloads, {
+      callback: (current) => {
+        setGitHubState((state) => ({
+          ...state,
+          downloads: current,
+        }));
+      },
+    });
+  }
+
+  function cacheGithubState() {
+    setTimeout(() => {
+      cacheStorage.setItem('sp-github-state', githubState);
+    }, 500);
+  }
+
+  function fetchGithubState() {
+    fetch('https://api.github.com/repos/apache/incubator-streampark')
+      .then((res) => res.json())
+      .then((data) => {
+        setGitHubState((state) => ({
+          ...state,
+          stars: data.stargazers_count,
+          forks: data.forks_count,
+        }));
+        cacheGithubState();
+      });
+
+    fetch('https://api.github.com/repos/apache/incubator-streampark/releases')
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data);
+        let totalDownloads = 0;
+        for (let i = 0; i < data.length; ++i) {
+          for (let j = 0; j < data[i].assets.length; ++j) {
+            totalDownloads += data[i].assets[j].download_count;
+          }
+        }
+
+        setGitHubState((state) => ({
+          ...state,
+          downloads: totalDownloads,
+        }));
+
+        cacheGithubState();
+      });
+  }
+
+  React.useEffect(() => {
+    const cached = cacheStorage.getItem('sp-github-state');
+    console.log('githubState: ', cached);
+    if (cached) {
+      setGitHubState(cached);
+    } else {
+      fetchGithubState();
+    }
+  }, []);
+
+  const containerRef = React.useRef<HTMLDivElement>();
+
+  // useDOMVisibilityChange(containerRef.current, {
+  //   onChange: (visible) => {
+  //     if (visible) {
+  //       startAnimation()
+  //     }
+  //   }
+  // })
+
+  return (
+    <section
+      ref={containerRef}
+      className={clsx('achievement-banner', props.className)}
+      data-aos="fade-up"
+    >
+      <div className="achievement-banner-item">
+        <div className="achievement-banner-item__highlight">
+          {formatNumber(githubState.stars)}
+        </div>
+        <div>Github stars</div>
+      </div>
+      <div className="achievement-banner-item">
+        <div className="achievement-banner-item__highlight">
+          {formatNumber(githubState.forks)}
+        </div>
+        <div>Github forks</div>
+      </div>
+      <div className="achievement-banner-item">
+        <div className="achievement-banner-item__highlight">
+          {formatNumber(githubState.downloads)}
+        </div>
+        <div>Total downloads</div>
+      </div>
+    </section>
+  );
+}
+
+function formatNumber(num: number) {
+  if (num < 1000) {
+    return num;
+  } else if (num < 1000_000) {
+    return (num / 1000).toFixed(1) + 'k+';
+  } else {
+    return (num / 1000_000).toFixed(1) + 'm+';
+  }
+}
+
+function numberIncrementAnimation(
+  end = 0,
+  { start = 0, duration = 1000, rate = 50, callback = undefined } = {},
+) {
+  const step = ((end - start) / duration) * rate;
+  let current = start;
+  const timer = setInterval(() => {
+    current += parseInt(step.toFixed(0));
+    if (current >= end) {
+      clearInterval(timer);
+      current = end;
+    }
+    callback(current);
+  }, rate);
+  if (typeof callback === 'function') {
+    callback(current);
+  }
+  return current;
+}
diff --git a/src/components/AchievementBanner/styles.less b/src/components/AchievementBanner/styles.less
new file mode 100644
index 000000000..cd477e642
--- /dev/null
+++ b/src/components/AchievementBanner/styles.less
@@ -0,0 +1,55 @@
+.achievement-banner-wrapper {
+  // background-image: url("/home/bg-blue-with-side-dots.png");
+  height: 200px;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 100px;
+
+  .achievement-banner {
+    width: 70%;
+  }
+
+  .achievement-banner-item {
+    height: 200px;
+    color: #ddd;
+  }
+
+  .achievement-banner-item__highlight {
+    color: #fff;
+  }
+}
+
+.achievement-banner {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  margin: 0 auto;
+}
+
+.achievement-banner-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #4c576c;
+  line-height: 1.6;
+  font-size: 0.75rem;
+}
+
+.achievement-banner-item__highlight {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+@media screen and (min-width: 767px) {
+  .achievement-banner-item__highlight {
+    font-size: 2.5rem;
+    font-weight: 600;
+  }
+  .achievement-banner-item {
+    line-height: 1.6;
+    font-size: 1.25rem;
+  }
+}
diff --git a/src/components/BannerTitle/index.tsx b/src/components/BannerTitle/index.tsx
new file mode 100644
index 000000000..bb63b206c
--- /dev/null
+++ b/src/components/BannerTitle/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+
+interface BannerProps {
+  className?: string;
+}
+
+export default function BannerTitle({
+  title = 'Apache StreamPark™',
+  subTitle = 'Make stream processing easier! Easy-to-use streaming application development framework and operation platform, with Apache Flink® and Apache Spark™ supported, provides full lifecycle support for stream processing applications.',
+}) {
+  return (
+    <div
+      className={'md:px-16 py-8 text-center h-auto bg-shadow-element'}
+      data-aos="fade-right"
+    >
+      <h1 className="mt-10 text-2xl xs:text-xl md:text-4xl lg:text-6xl font-bold relative inline-block text-black dark:text-white">
+        Apache StreamPark™
+        <span className="project-badge absolute text-xs right-[1.5em] md:right-[2em] lg:right-[3em] -top-5 lg:text-sm px-3 leading-5 bg-blue-100 text-blue-800 rounded-full rounded-bl-none font-medium">
+          Incubating
+        </span>
+      </h1>
+      <p className="lg:text-base mt-6 text-slate-600 text-center max-w-3xl mx-auto dark:text-slate-400">
+        {subTitle}
+      </p>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/BannerVideo/index.tsx b/src/components/BannerVideo/index.tsx
new file mode 100644
index 000000000..421ffaee0
--- /dev/null
+++ b/src/components/BannerVideo/index.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import SPDashboardImage from '@site/static/home/dashboard.svg';
+import VideoPlayIcon from '@site/static/icons/video-play.svg';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import './styles.less';
+
+interface BannerVideoProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default function BannerVideo(props: BannerVideoProps) {
+  const [isShowVideo, setIsShowVideo] = useState(false);
+
+  const videoURL =
+    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
+
+  return (
+    <div className={clsx('BannerVideo', props.className)} style={props.style}>
+      {isShowVideo ? (
+        <video src={videoURL} className="w-full h-full bg-transparent" autoPlay controls />
+      ) : (
+        <CoverImage show={!isShowVideo} onPlay={() => setIsShowVideo(true)} />
+      )}
+    </div>
+  );
+}
+
+function CoverImage({ show, onPlay }: { show: boolean; onPlay: () => void }) {
+  return (
+    <div className="cover-image-wrapper relative">
+      <img
+        src={useBaseUrl('/home/screenshot.png')}
+        alt="dashboard screenshot"
+        className="w-full h-full"
+      />
+      <div
+        className="play-icon-wrapper absolute-center w-24 h-24 rounded-full before:backdrop-blur-lg cursor-pointer"
+        onClick={onPlay}
+      >
+        <VideoPlayIcon className="absolute-center w-20 h-20 cursor-pointer" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/BannerVideo/styles.less b/src/components/BannerVideo/styles.less
new file mode 100644
index 000000000..e6f892607
--- /dev/null
+++ b/src/components/BannerVideo/styles.less
@@ -0,0 +1,10 @@
+.cover-image-wrapper {
+  &:hover .play-icon-wrapper {
+    opacity: 1;
+    transition: opacity 0.3s;
+  }
+}
+.play-icon-wrapper {
+  opacity: 0;
+  transition: opacity 0.3s;
+}
diff --git a/src/components/Button/GetStart.tsx b/src/components/Button/GetStart.tsx
new file mode 100644
index 000000000..7179dc9b2
--- /dev/null
+++ b/src/components/Button/GetStart.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import clsx from 'clsx';
+import './styles.less';
+
+interface GetStartButtonProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default function GetStartButton(props: GetStartButtonProps) {
+  return (
+    <a
+      href="/docs/get-started/intro"
+      className="bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-blue-50 text-white font-semibold h-10 px-6 rounded-lg flex-center sm:w-auto dark:bg-sky-500 dark:highlight-white/20 dark:hover:bg-sky-400 start-button hover:no-underline cursor-pointer"
+    >
+      {props.children}
+    </a>
+  );
+}
diff --git a/src/components/Button/GitHub.tsx b/src/components/Button/GitHub.tsx
new file mode 100644
index 000000000..3e07ff64b
--- /dev/null
+++ b/src/components/Button/GitHub.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import clsx from 'clsx';
+
+interface ButtonProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default function Index(props: ButtonProps) {
+  return (
+    <a
+      href="https://github.com/apache/incubator-streampark"
+      className="text-white font-semibold h-10 px-6 rounded-lg text-center flex-center bg-slate-900 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50  sm:w-auto dark:bg-black dark:highlight-white/20 dark:hover:bg-gray-900 hover:no-underline cursor-pointer"
+    >
+      {props.children}
+    </a>
+  );
+}
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
new file mode 100644
index 000000000..0498e05e0
--- /dev/null
+++ b/src/components/Button/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import clsx from 'clsx';
+
+interface ButtonProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default function Button(props: ButtonProps) {
+  return (
+    <button className="text-white font-semibold h-10 px-6 rounded-lg text-center bg-slate-900 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50  sm:w-auto dark:bg-sky-500 dark:highlight-white/20 dark:hover:bg-sky-400">
+      {props.children}
+    </button>
+  );
+}
diff --git a/src/components/Button/styles.less b/src/components/Button/styles.less
new file mode 100644
index 000000000..986d66821
--- /dev/null
+++ b/src/components/Button/styles.less
@@ -0,0 +1,3 @@
+.start-button {
+  background: linear-gradient(95deg, #5a3fff, #3483ff 39.04%, #0cf);
+}
\ No newline at end of file
diff --git a/src/components/Development/index.jsx b/src/components/Development/index.jsx
new file mode 100644
index 000000000..2fddf1d71
--- /dev/null
+++ b/src/components/Development/index.jsx
@@ -0,0 +1,98 @@
+import React from 'react';
+
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Coding from '@site/static/home/coding.svg';
+
+import config from './languages.json';
+import './styles.less';
+import { useColorMode } from '@docusaurus/theme-common';
+
+export default function () {
+  const isBrowser = useIsBrowser();
+  const language =
+    isBrowser && location.pathname.indexOf('/zh-CN/') === 0 ? 'zh-CN' : 'en';
+  const dataSource = config?.[language];
+
+  const { colorMode } = useColorMode();
+
+  return (
+    <div className="section py-6 py-md-7 overflow-hidden performance">
+      <div className="container">
+        <div className="row performance-block-first">
+          <div className="col-md-6 col-sm-12">
+            <ol className="process-vertical ps-0">
+              {dataSource.development.map((item, i) => (
+                <li
+                  className="process-vertical-item"
+                  key={i}
+                  data-aos="zoom-in"
+                  data-aos-delay={i * 150}
+                >
+                  <div className="process-vertical-icon">
+                    <div className="process-vertical-icon-bg me-auto rounded-circle p-2 shadow">
+                      <i className={item.icon}></i>
+                    </div>
+                  </div>
+
+                  <div className="process-vertical-content ms-lg-4">
+                    <h3 className="h5">{item.title}</h3>
+                    <p>{item.description}</p>
+                  </div>
+                </li>
+              ))}
+            </ol>
+          </div>
+
+          <div className="col-md-6 col-sm-12 mb-5 align-self-center">
+            <div
+              className="mb-5 my-lg-0 coder-bg"
+              data-aos="fade-left"
+              data-aos-delay="100"
+            >
+              <img
+                src={
+                  colorMode === 'dark'
+                    ? useBaseUrl('/home/coder2.png')
+                    : useBaseUrl('/home/coder1.png')
+                }
+                className="coder"
+                width="70%"
+              ></img>
+            </div>
+          </div>
+        </div>
+        <div className="border-dot"></div>
+        <div className="row mb-5 mt-5 mb-lg-7">
+          <div className="col-md-6 col-sm-12 align-self-center">
+            <div
+              className="px-5 px-md-7 mb-5 my-lg-0 coder-bg"
+              data-aos="fade-up"
+              data-aos-delay="100"
+            >
+              <Coding className="img-fluid-coding" />
+            </div>
+          </div>
+
+          <div className="col-md-6 col-sm-12">
+            <div
+              className="mb-5 my-lg-0 coder-bg"
+              data-aos="fade-up"
+              data-aos-delay="200"
+            >
+              <img
+                src={
+                  colorMode === 'dark'
+                    ? useBaseUrl('/home/code2.png')
+                    : useBaseUrl('/home/code1.png')
+                }
+                className="code"
+                alt="QuickStart DataStream"
+              ></img>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Development/languages.json b/src/components/Development/languages.json
new file mode 100644
index 000000000..014e10762
--- /dev/null
+++ b/src/components/Development/languages.json
@@ -0,0 +1,127 @@
+{
+  "zh-CN": {
+    "common": {
+      "getStart": "快速开始",
+      "architecture": "系统架构",
+      "learnMore": "了解更多",
+      "coreFeatures": "核 心 特 性",
+      "coreFeaturesDesc": "StreamPark™ 让流处理作业开发 & 管理更简单的核心特性",
+      "development": "开 发 框 架",
+      "developmentDesc": "StreamPark™ 提供了开发框架，可快速完成流处理作业开发",
+      "ourUsers": "Our Users",
+      "readMore": "阅读更多",
+      "download": "下载",
+      "releaseDate": "发布日期",
+      "newFeatures": "新特性",
+      "enhancement": "增强点",
+      "bugFixs": "问题修复",
+      "changeLog": "详细变更"
+    },
+    "slogan": {
+      "key": "让流处理更简单!",
+      "description": "Apache StreamPark™ 是一个流处理应用程序开发管理框架，旨在轻松构建和管理流处理应用程序，提供使用 Apache Flink® 和 Apache Spark™ 编写流处理应用的开发框架和一站式实时计算平台，核心能力包括不限于应用开发、部署、管理、运维、实时数仓等。"
+    },
+    "feature": [
+      {
+        "title": "简单易用",
+        "icon": "lni-layers",
+        "details": "Apache StreamPark™ 提供了一系列快捷 API 和 Connector，开箱即用，作业状态自动追踪，快速完成作业的开发和管理。"
+      },
+      {
+        "title": "流批一体",
+        "icon": "lni-shuffle",
+        "details": "Apache StreamPark™  同时支持 Apache Flink® & Apache Spark™，无缝支持流式处理和批处理，连接互通，创造无限可能。"
+      },
+      {
+        "title": "一站式解决方案",
+        "icon": "lni-display-alt",
+        "details": "Apache StreamPark™  为流处理作业提供全生命周期支持，从开发到部署，集等众多功能于一身，是一站式流处理平台。"
+      }
+    ],
+    "development": [
+      {
+        "icon": "lni-code",
+        "title": "编写代码",
+        "description": "1. 使用 Apache StreamPark™ 提供的快捷 API 开发流处理作业。"
+      },
+      {
+        "icon": "lni-bug",
+        "title": "调试代码",
+        "description": "2. 传入 Apache StreamPark™ 约定的配置，进行本地作业开发调试。"
+      },
+      {
+        "icon": "lni-bolt-alt",
+        "title": "部署作业",
+        "description": "3. 使用 Apache StreamPark™ 提供的平台来部署和管理你的作业。"
+      }
+    ],
+    "users": {
+      "title": "Apache StreamPark™ 赢得了诸多用户的信赖",
+      "description": "Apache StreamPark™ 已经被广泛应用于金融、电商、物流、互联网、制造等行业，帮助用户快速构建和管理流处理作业，提升数据处理效率。",
+      "more": "更多合作伙伴"
+    }
+  },
+  "en": {
+    "common": {
+      "getStart": "Quick Start",
+      "architecture": "System Architecture",
+      "description": "Description",
+      "learnMore": "Learn More",
+      "coreFeatures": "Key Features",
+      "coreFeaturesDesc": "The key features of StreamPark™ is to make your stream processing easier.",
+      "development": "Development Framework",
+      "developmentDesc": "StreamPark™ provided a development framework to quickly develop stream processing applications.",
+      "ourUsers": "Our Users",
+      "readMore": "Read More",
+      "download": "Download",
+      "releaseDate": "Release Date",
+      "newFeatures": "New Features",
+      "enhancement": "Enhancement point",
+      "bugFixs": "Bug Fix",
+      "changeLog": "Changelog"
+    },
+    "slogan": {
+      "key": "make stream processing easier!",
+      "description":  "Make stream processing easier! Easy-to-use streaming application development framework and operation platform, with Apache Flink® and Apache Spark™ supported, provides full lifecycle support for stream processing applications."
+    },
+    "feature": [
+      {
+        "title": "Easy to use",
+        "icon": "lni-layers",
+        "details": "Only one service, easy deployment. Automatic application status tracking, enabling development and management of applications within minutes."
+      },
+      {
+        "title": "Unified Batch & Streaming",
+        "icon": "lni-shuffle",
+        "details": "StreamPark™ supports both Apache Flink® and Apache Spark™, making it easier to seamlessly support streaming and batch processing."
+      },
+      {
+        "title": "One-stop Solution",
+        "icon": "lni-display-alt",
+        "details": "StreamPark™ provides full lifecycle support for stream processing applications.from development to deployment, It is an one-stop streaming platform."
+      }
+    ],
+    "development": [
+      {
+        "icon": "lni-code",
+        "title": "Write Code",
+        "description": "1. Develop your code quickly using the StreamPark™ API"
+      },
+      {
+        "icon": "lni-bug",
+        "title": "Debug Application",
+        "description": "2. Debug your code with the application configuration"
+      },
+      {
+        "icon": "lni-bolt-alt",
+        "title": "Deploy Application",
+        "description": "3. Deploy and manage your applications using StreamPark™"
+      }
+    ],
+    "users": {
+      "title": "Apache StreamPark™ is trust by",
+      "description": "StreamPark™ has been widely used in finance, e-commerce, logistics, Internet, manufacturing and other industries, helping users quickly build and manage stream processing jobs and improve data processing efficiency.",
+      "more": "More Partners"
+    }
+  }
+}    
diff --git a/src/components/Development/styles.less b/src/components/Development/styles.less
new file mode 100644
index 000000000..753af8218
--- /dev/null
+++ b/src/components/Development/styles.less
@@ -0,0 +1,101 @@
+/*------------------------------------
+  Process
+------------------------------------*/
+
+@import url('/src/css/bootstrap.min.css');
+@import url('/src/css/lineicons.min.css');
+
+.performance {
+  .performance-block-first {
+    margin-bottom: 1rem;
+
+    & > div:first-child {
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  .process-vertical {
+    list-style: none;
+    margin: 0;
+
+    .process-vertical-item {
+      display: -ms-flexbox;
+      display: flex;
+
+      &:last-child .process-vertical-icon::before {
+        display: none;
+      }
+
+      .process-vertical-icon {
+        position: relative;
+        width: 4rem;
+        -ms-flex-negative: 0;
+        flex-shrink: 0;
+        text-align: center;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 45%;
+          top: 4rem;
+          bottom: -4rem;
+          border-left: 2px dashed #e5e7eb;
+        }
+
+        .process-vertical-icon-bg {
+          background: #f9fafb;
+          border: #e5e7eb 1px solid;
+          height: 4rem;
+          line-height: 4rem;
+          width: 4rem;
+          color: #333;
+
+          i {
+            font-size: 2rem;
+          }
+        }
+
+        span {
+          font-size: 1.3rem;
+        }
+      }
+    }
+
+    .process-vertical-content {
+      margin-left: 1rem;
+      margin-bottom: 3rem;
+    }
+  }
+
+  .border-dot {
+    --width: min(100%, 500px);
+    width: var(--width);
+    margin-left: max(calc((100% / 2 - var(--width)) / 2), 0); // 取中
+    border: 1px dashed #e8e8e8;
+    opacity: 0.7;
+    margin-bottom: 5rem;
+  }
+}
+
+[data-theme='dark'] .performance {
+  .process-vertical {
+    .process-vertical-item {
+      .process-vertical-icon {
+        &::before {
+          border-left: 2px dashed #666;
+        }
+
+        .process-vertical-icon-bg {
+          background: #242526;
+          border: #666 1px solid;
+          color: unset;
+        }
+      }
+    }
+  }
+
+  .border-dot {
+    border: 1px dashed #666;
+  }
+}
diff --git a/src/components/FeatureCard/styles.module.css b/src/components/FeatureCard/styles.module.css
index 16e5cc5d9..1fd78565f 100644
--- a/src/components/FeatureCard/styles.module.css
+++ b/src/components/FeatureCard/styles.module.css
@@ -1,6 +1,7 @@
 .feature-card-wrapper {
   position: relative;
   min-width: 387px;
+  max-width: 400px;
   padding: 40px;
   background: var(--secondary-bg-color);
 
@@ -47,7 +48,7 @@
 .feature-icon-wrapper {
   position: absolute;
   top: -32px;
-  left: 40px;
+  left: 24px;
   background-color: var(--bg-color);
   padding: 8px;
   width: 64px;
diff --git a/src/components/MacBrowser/index.tsx b/src/components/MacBrowser/index.tsx
new file mode 100644
index 000000000..13e510e1c
--- /dev/null
+++ b/src/components/MacBrowser/index.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'clsx';
+import './styles.less';
+
+interface MacBrowserProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default function MacBrowser(props: MacBrowserProps) {
+  const [url, setUrl] = useState('https://streampark.apache.org/');
+
+  useEffect(() => {
+    setUrl(window.location.origin);
+  }, []);
+
+  return (
+    <div
+      className={classNames('mac-browser', props.className)}
+      style={props.style}
+      data-aos="fade-up"
+    >
+      <div className="mac-browser__header">
+        <div className="mac-browser__buttons">
+          <i className="mac-browser__button mac-browser__button--close"></i>
+          <i className="mac-browser__button mac-browser__button--minimize"></i>
+          <i className="mac-browser__button mac-browser__button--zoom"></i>
+        </div>
+        <div className="mac-browser__address-bar">
+          <span className="mac-browser__address-bar__text">{url}</span>
+        </div>
+      </div>
+      <div className="mac-browser__content">{props.children}</div>
+    </div>
+  );
+}
diff --git a/src/components/MacBrowser/styles.less b/src/components/MacBrowser/styles.less
new file mode 100644
index 000000000..f5a071ba6
--- /dev/null
+++ b/src/components/MacBrowser/styles.less
@@ -0,0 +1,67 @@
+.mac-browser {
+  --browser-bg-color: #323030;
+  --browser-header-button-bg-color: #423f40;
+  --browser-address-bar-bg-color: #413f3f;
+  --browser-address-bar-text-color: #fff;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: min(800px, 80%);
+  height: 400px;
+  margin: 40px auto;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 2px solid var(--browser-bg-color);
+}
+
+// [data-theme='dark'] .mac-browser {
+//   --browser-bg-color: #ffffff;
+//   --browser-header-button-bg-color: #e0e0e0;
+//   --browser-address-bar-bg-color: #dfdfdf;
+//   --browser-address-bar-text-color: #414141;
+// }
+
+.mac-browser__header {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  background-color: var(--browser-bg-color);
+  padding: 6px 12px;
+}
+
+.mac-browser__buttons {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+}
+
+.mac-browser__button {
+  display: inline-block;
+  background-color: var(--browser-header-button-bg-color);
+  height: 12px;
+  width: 12px;
+  border-radius: 50%;
+}
+
+.mac-browser__address-bar {
+  background-color: var(--browser-address-bar-bg-color);
+  color: var(--browser-address-bar-text-color);
+  width: 40%;
+  height: 20px;
+  text-align: center;
+  // justify-self: center;
+  margin: auto;
+  border-radius: 4px;
+  font-size: 10px;
+  line-height: 20px;
+}
+
+.mac-browser__content {
+  overflow: hidden;
+  height: calc(100% - 36px);
+  background-color: var(--browser-header-button-bg-color);
+  flex: 1;
+  padding: 0;
+  // border: 2px solid var(--browser-bg-color);
+}
diff --git a/src/components/ScreenMonitor/index.tsx b/src/components/ScreenMonitor/index.tsx
new file mode 100644
index 000000000..2f8b29c36
--- /dev/null
+++ b/src/components/ScreenMonitor/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import { useWindowSize } from '@docusaurus/theme-common';
+import MonitorImage from '@site/static/home/dashboard.svg';
+import './styles.less'
+
+interface ScreenMonitorProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default function ScreenMonitor(props: ScreenMonitorProps) {
+  const windowSize = useWindowSize();
+
+  if (windowSize === 'mobile') return null;
+
+  return (
+    <div
+      className={clsx(props.className, 'monitor-container overflow-hidden h-96')}
+      style={props.style}
+    >
+      <div className="text-center" data-aos="fade-up" data-aos-delay="100">
+        <MonitorImage className="" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ScreenMonitor/styles.less b/src/components/ScreenMonitor/styles.less
new file mode 100644
index 000000000..d838f9947
--- /dev/null
+++ b/src/components/ScreenMonitor/styles.less
@@ -0,0 +1,5 @@
+.monitor-container {
+  max-width: 800px;
+  height: 300px;
+  background: url('/static/home/dashboard.svg')
+}
\ No newline at end of file
diff --git a/src/components/SectionTitle/index.tsx b/src/components/SectionTitle/index.tsx
index 6bc3c585f..14ce018d7 100644
--- a/src/components/SectionTitle/index.tsx
+++ b/src/components/SectionTitle/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
+import styles from './style.module.css';
 
 interface TitleProps {
   className?: string;
@@ -8,16 +9,16 @@ interface TitleProps {
   description: React.ReactNode;
 }
 
-export default function Index(props: TitleProps) {
+export default function SectionTitle(props: TitleProps) {
   return (
-    <div className="row text-center">
+    <div className="text-center">
       <div className="col-12">
         <div className="mb-5 pt-6">
-          <h2 className="article-title h3 fw-bold">
+          <h2 className="article-title text-lg lg:text-2xl font-semibold">
             {props.title}
           </h2>
-          <hr className="divider my-4" />
-          <p className="lead desc">{props.description}</p>
+          <hr className={clsx(styles['divider'], 'my-4')} />
+          <p className="text-base">{props.description}</p>
         </div>
       </div>
     </div>
diff --git a/src/components/SectionTitle/style.module.css b/src/components/SectionTitle/style.module.css
new file mode 100644
index 000000000..0ee929ed2
--- /dev/null
+++ b/src/components/SectionTitle/style.module.css
@@ -0,0 +1,17 @@
+hr.divider {
+  margin-left: auto;
+  margin-right: auto;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  max-width: 8rem;
+  height: 0.2rem;
+  opacity: 0.85;
+  background: linear-gradient(90deg, #e24997, #2d2ed4)
+}
+
+hr.divider.double-hr {
+  border-style: solid;
+  height: 0.25rem;
+  max-width: 7rem;
+  opacity: 0.85;
+}
\ No newline at end of file
diff --git a/src/components/ShellCommand/index.tsx b/src/components/ShellCommand/index.tsx
index 955331c1e..afe057d3a 100644
--- a/src/components/ShellCommand/index.tsx
+++ b/src/components/ShellCommand/index.tsx
@@ -10,11 +10,7 @@ interface Props {
   command: string;
 }
 
-export default function ShellCommand({
-  className,
-  style,
-  command = `curl -L https://github.com/apache/streampark/raw/dev/streampark.sh | sh`,
-}: Props) {
+export default function ShellCommand({ className, style, command }: Props) {
   const [copied, setCopied] = useState(false);
 
   function copyCommand() {
@@ -28,7 +24,6 @@ export default function ShellCommand({
     <div
       className={clsx(styles['shell-command-block'], className)}
       style={style}
-      data-aos="fade-up"
     >
       {Highlighter(command)}
       <button className={styles['copy-icon']} onClick={copyCommand}>
@@ -59,14 +54,15 @@ function Highlighter(command: string): React.ReactNode {
 
   return (
     <pre>
+      <code key={'$'} className="select-none mr-1">
+        $
+      </code>
       {tokens.map((token, index) => {
         return (
-          <>
-            <code className={styles[getCodeStyleName(token, index)]}>
-              {token}
-            </code>
+          <code key={token} className={styles[getCodeStyleName(token, index)]}>
+            {token}
             {index < tokens.length && ' '}
-          </>
+          </code>
         );
       })}
     </pre>
diff --git a/src/components/ShellCommand/styles.module.css b/src/components/ShellCommand/styles.module.css
index 70dc471bb..5c053792b 100644
--- a/src/components/ShellCommand/styles.module.css
+++ b/src/components/ShellCommand/styles.module.css
@@ -4,11 +4,9 @@
   color: #000;
   font-size: 16px;
   border-radius: 8px;
-  margin: 20px auto;
   background-color: #f6f8fa;
   height: 40px;
-  max-width: 80%;
-  /* padding: 4px; */
+  width: max-content;
 }
 
 [data-theme='dark'] .shell-command-block {
@@ -19,6 +17,7 @@
 .shell-command-block pre {
   flex: 1;
   min-width: 0;
+  width: fit-content;
   border-radius: 4px;
   padding: 10px 0 10px 20px;
   color: inherit;
@@ -46,6 +45,7 @@
   outline: none;
   border: none;
   background-color: transparent;
+  cursor: pointer;
 }
 
 .shell-command-block .copy-icon:hover {
@@ -55,6 +55,12 @@
   transition: all 0.3s;
 }
 
+.shell-command-block .copy-icon svg {
+  display: inline;
+  line-height: 32px;
+  vertical-align: -0.05em;
+}
+
 [data-theme='dark'] .shell-command-block .copy-icon:hover {
   background-color: #45494f;
 }
diff --git a/src/components/TrustedUsers/index.tsx b/src/components/TrustedUsers/index.tsx
new file mode 100644
index 000000000..9f77d269a
--- /dev/null
+++ b/src/components/TrustedUsers/index.tsx
@@ -0,0 +1,100 @@
+import React, { useRef } from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { useColorMode, useThemeConfig } from '@docusaurus/theme-common';
+import config from './languages.json';
+// import images from './images.json';
+import row1 from './row1.json';
+import row2 from './row2.json';
+import AOS from 'aos';
+import 'aos/dist/aos.css';
+import Marquee from 'react-fast-marquee';
+import styles from './styles.module.css';
+import RightArrowIcon from '@site/static/icons/arrow-right.svg';
+import { useTranslation } from '@site/src/hooks/useTranslation';
+
+export default function TrustedUsers() {
+  const { t, language } = useTranslation(config);
+
+  const { colorMode } = useColorMode();
+
+  // const row1 = images.slice(0, images.length / 2);
+  // const row2 = images.slice(images.length / 2);
+
+  const gradientColor = colorMode === 'dark' ? '#1f1f1c' : '#fff';
+
+  return (
+    <BrowserOnly>
+      {() => (
+        <section className={styles['trusted-users']}>
+          {/* <h3 className={styles['title']}>{ t.users.title }</h3>
+          <hr
+            className="divider my-4 mx-auto"
+            style={{ maxWidth: '10rem' }}
+          /> */}
+          <div data-aos="slide-left">
+            <Marquee
+              direction="left"
+              speed={30}
+              pauseOnHover
+              gradient
+              gradientWidth="10%"
+              gradientColor={gradientColor}
+              className={styles['carousel-container']}
+              style={{ marginTop: 40 }}
+            >
+              {row1.map((img, i) => (
+                <div className={styles['swiper-item']}>
+                  <img
+                    src={
+                      colorMode === 'dark'
+                        ? useBaseUrl('/home/brands/plain/' + img.imgUrl)
+                        : useBaseUrl('/home/brands/colorful/' + img.imgUrl)
+                    }
+                    alt={img.imgUrl}
+                  />
+                </div>
+              ))}
+            </Marquee>
+          </div>
+
+          <div data-aos="slide-right">
+            <Marquee
+              direction="right"
+              speed={30}
+              gradient
+              gradientWidth="10%"
+              gradientColor={gradientColor}
+              pauseOnHover
+              className={styles['carousel-container']}
+              style={{ marginTop: 16 }}
+            >
+              {row2.map((img, i) => (
+                <div className={styles['swiper-item']}>
+                  <img
+                    src={
+                      colorMode === 'dark'
+                        ? useBaseUrl('/home/brands/plain/' + img.imgUrl)
+                        : useBaseUrl('/home/brands/colorful/' + img.imgUrl)
+                    }
+                    alt={img.imgUrl}
+                  />
+                </div>
+              ))}
+            </Marquee>
+          </div>
+
+          <div className={styles['more-link']}>
+            <a
+              href={language === 'zh-CN' ? '/zh-CN/user' : '/user'}
+              className={styles['more-link-btn']}
+            >
+              {t.users.more}
+              <RightArrowIcon className={styles['more-link-icon']} />
+            </a>
+          </div>
+        </section>
+      )}
+    </BrowserOnly>
+  );
+}
diff --git a/src/components/TrustedUsers/languages.json b/src/components/TrustedUsers/languages.json
new file mode 100644
index 000000000..689ffa13f
--- /dev/null
+++ b/src/components/TrustedUsers/languages.json
@@ -0,0 +1,127 @@
+{
+  "zh-CN": {
+    "common": {
+      "getStart": "快速开始",
+      "architecture": "系统架构",
+      "learnMore": "了解更多",
+      "coreFeatures": "核 心 特 性",
+      "coreFeaturesDesc": "StreamPark™ 让流处理作业开发 & 管理更简单的核心特性",
+      "development": "开 发 框 架",
+      "developmentDesc": "StreamPark™ 提供了开发框架，可快速完成流处理作业开发",
+      "ourUsers": "Our Users",
+      "readMore": "阅读更多",
+      "download": "下载",
+      "releaseDate": "发布日期",
+      "newFeatures": "新特性",
+      "enhancement": "增强点",
+      "bugFixs": "问题修复",
+      "changeLog": "详细变更"
+    },
+    "slogan": {
+      "key": "让流处理更简单!",
+      "description": "Apache StreamPark™ 是一个流处理应用程序开发管理框架，旨在轻松构建和管理流处理应用程序，提供使用 Apache Flink® 和 Apache Spark™ 编写流处理应用的开发框架和一站式实时计算平台，核心能力包括不限于应用开发、部署、管理、运维、实时数仓等。"
+    },
+    "feature": [
+      {
+        "title": "简单易用",
+        "icon": "lni-layers",
+        "details": "Apache StreamPark™ 提供了一系列快捷 API 和 Connector，开箱即用，作业状态自动追踪，快速完成作业的开发和管理。"
+      },
+      {
+        "title": "流批一体",
+        "icon": "lni-shuffle",
+        "details": "Apache StreamPark™  同时支持 Apache Flink® & Apache Spark™，无缝支持流式处理和批处理，连接互通，创造无限可能。"
+      },
+      {
+        "title": "一站式解决方案",
+        "icon": "lni-display-alt",
+        "details": "Apache StreamPark™  为流处理作业提供全生命周期支持，从开发到部署，集等众多功能于一身，是一站式流处理平台。"
+      }
+    ],
+    "development": [
+      {
+        "icon": "lni-code",
+        "title": "编写代码",
+        "description": "1. 使用 Apache StreamPark™ 提供的快捷 API 开发流处理作业。"
+      },
+      {
+        "icon": "lni-bug",
+        "title": "调试代码",
+        "description": "2. 传入 Apache StreamPark™ 约定的配置，进行本地作业开发调试。"
+      },
+      {
+        "icon": "lni-bolt-alt",
+        "title": "部署作业",
+        "description": "3. 使用 Apache StreamPark™ 提供的平台来部署和管理你的作业。"
+      }
+    ],
+    "users": {
+      "title": "Apache StreamPark™ 赢得了诸多用户的信赖",
+      "description": "Apache StreamPark™ 已经被广泛应用于金融、电商、物流、互联网、制造等行业，帮助用户快速构建和管理流处理作业，提升数据处理效率。",
+      "more": "更多合作伙伴"
+    }
+  },
+  "en": {
+    "common": {
+      "getStart": "Quick Start",
+      "architecture": "System Architecture",
+      "description": "Description",
+      "learnMore": "Learn More",
+      "coreFeatures": "Key Features",
+      "coreFeaturesDesc": "The key features of StreamPark™ is to make your stream processing easier.",
+      "development": "Development Framework",
+      "developmentDesc": "StreamPark™ provided a development framework to quickly develop stream processing applications.",
+      "ourUsers": "Our Users",
+      "readMore": "Read More",
+      "download": "Download",
+      "releaseDate": "Release Date",
+      "newFeatures": "New Features",
+      "enhancement": "Enhancement point",
+      "bugFixs": "Bug Fix",
+      "changeLog": "Changelog"
+    },
+    "slogan": {
+      "key": "make stream processing easier!",
+      "description":  "Make stream processing easier! Easy-to-use streaming application development framework and operation platform, with Apache Flink® and Apache Spark™ supported, provides full lifecycle support for stream processing applications."
+    },
+    "feature": [
+      {
+        "title": "Easy to use",
+        "icon": "lni-layers",
+        "details": "Only one service, easy deployment. Automatic application status tracking, enabling development and management of applications within minutes."
+      },
+      {
+        "title": "Unified Batch & Streaming",
+        "icon": "lni-shuffle",
+        "details": "StreamPark™ supports both Apache Flink® and Apache Spark™, making it easier to seamlessly support streaming and batch processing."
+      },
+      {
+        "title": "One-stop Solution",
+        "icon": "lni-display-alt",
+        "details": "StreamPark™ provides full lifecycle support for stream processing applications.from development to deployment, It is an one-stop streaming platform."
+      }
+    ],
+    "development": [
+      {
+        "icon": "lni-code",
+        "title": "Write Code",
+        "description": "1. Develop your code quickly using the StreamPark™ API"
+      },
+      {
+        "icon": "lni-bug",
+        "title": "Debug Application",
+        "description": "2. Debug your code with the application configuration"
+      },
+      {
+        "icon": "lni-bolt-alt",
+        "title": "Deploy Application",
+        "description": "3. Deploy and manage your applications using StreamPark™"
+      }
+    ],
+    "users": {
+      "title": "Apache StreamPark™ is trust by",
+      "description": "StreamPark™ has been widely used in finance, e-commerce, logistics, Internet, manufacturing and other industries, helping users quickly build and manage stream processing jobs and improve data processing efficiency.",
+      "more": "More Partners"
+    }
+  }
+}
diff --git a/src/pages/home/_users/row1.json b/src/components/TrustedUsers/row1.json
similarity index 100%
rename from src/pages/home/_users/row1.json
rename to src/components/TrustedUsers/row1.json
diff --git a/src/pages/home/_users/row2.json b/src/components/TrustedUsers/row2.json
similarity index 100%
rename from src/pages/home/_users/row2.json
rename to src/components/TrustedUsers/row2.json
diff --git a/src/components/TrustedUsers/styles.module.css b/src/components/TrustedUsers/styles.module.css
new file mode 100644
index 000000000..d082f04f2
--- /dev/null
+++ b/src/components/TrustedUsers/styles.module.css
@@ -0,0 +1,84 @@
+.trusted-users {
+  /* padding: 40px 0; */
+  /* margin-top: 40px; */
+  /* margin-bottom: 40px; */
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.swiper-item {
+  padding: 0 20px;
+  height: 86px;
+  max-width: 180px;
+  box-sizing: border-box;
+  background-color: #f9fbfd;
+  margin: 0 16px;
+  border-radius: 8px;
+  line-height: 86px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+[data-theme='dark'] .swiper-item {
+  background-color: #1a1a1a;
+}
+
+.swiper-item img {
+  display: block;
+  height: auto;
+  max-width: 90%;
+  max-height: 90%;
+  margin: auto;
+}
+
+@media only screen and (max-width: 767px) {
+  .trusted-users .swiper-item {
+    height: 64px;
+    line-height: 64px;
+  }
+
+  .trusted-users .swiper-item img {
+    height: 48px;
+  }
+}
+
+.more-link {
+  margin-top: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.more-link-btn {
+  font-size: 16px;
+  color: #706e6e;
+  line-height: 22px;
+}
+
+.more-link-btn:hover {
+  color: #000000;
+  text-decoration: none;
+}
+
+[data-theme='dark'] .more-link-btn:hover {
+  color: #ffffff;
+}
+
+.more-link-icon {
+  display: inline;
+  vertical-align: -0.25em;
+  font-size: 18px;
+  margin-left: 2px;
+  transition: transform 0.3s;
+}
+
+.more-link-btn:hover .more-link-icon {
+  transform: translateX(6px);
+  transition: transform 0.3s;
+}
diff --git a/src/css/custom/index.less b/src/css/custom/index.less
index 70a2ddfc6..b15d0f03c 100644
--- a/src/css/custom/index.less
+++ b/src/css/custom/index.less
@@ -1,5 +1,6 @@
-@import "colors.less";
-@import "default.less";
+@import "./tailwind.less";
+@import "./colors.less";
+@import "./default.less";
 
 /* Attemps to fix active link on KB page in dark mode */
 .sidebarItemLink_node_modules-\@docusaurus-theme-classic-lib-theme-BlogSidebar-Desktop-styles-module .sidebarItemLinkActive_node_modules-\@docusaurus-theme-classic-lib-theme-BlogSidebar-Desktop-styles-module {
diff --git a/src/css/custom/tailwind.less b/src/css/custom/tailwind.less
new file mode 100644
index 000000000..ddd8d450e
--- /dev/null
+++ b/src/css/custom/tailwind.less
@@ -0,0 +1,19 @@
+/* You can ignore the warnings in the editor about the unknown at-rules */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom styles here */
+.flex-center {
+  @apply flex items-center justify-center;
+}
+
+.postion-center {
+  @apply top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+}
+
+.absolute-center {
+  @apply absolute;
+  .postion-center();
+}
diff --git a/src/hooks/useCacheStorage.ts b/src/hooks/useCacheStorage.ts
new file mode 100644
index 000000000..71b72a4bb
--- /dev/null
+++ b/src/hooks/useCacheStorage.ts
@@ -0,0 +1,35 @@
+export function useCacheStorage<T = any>({
+  expires = 24 * 60 * 60 * 1000,
+} = {}) {
+  // can be support sessionStorage or cookies
+  const storage = window.localStorage;
+
+  function setItem(key: string, value: T) {
+    storage.setItem(
+      key,
+      JSON.stringify({
+        data: value,
+        expires,
+      }),
+    );
+  }
+
+  function getItem(key: string): T | null {
+    const cached = storage.getItem(key);
+    if (cached) {
+      const parsed = JSON.parse(cached);
+      if (Date.now() < parsed.expires) {
+        return parsed.data;
+      } else {
+        storage.removeItem(key);
+      }
+    }
+    return null;
+  }
+
+  return {
+    setItem,
+    getItem,
+    clear: storage.clear,
+  };
+}
diff --git a/src/hooks/useDomVisibilityChange.ts b/src/hooks/useDomVisibilityChange.ts
new file mode 100644
index 000000000..69d792e1a
--- /dev/null
+++ b/src/hooks/useDomVisibilityChange.ts
@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+
+export function useDOMVisibilityChange(
+  dom: HTMLElement,
+  options: {
+    onChange?: (
+      visible: boolean,
+      entry: IntersectionObserverEntry,
+      observer: IntersectionObserver,
+    ) => void;
+  },
+) {
+  const observer = new IntersectionObserver(
+    (entries, observer) => {
+      entries.forEach((entry) => {
+        options.onChange?.(entry.isIntersecting, entry, observer);
+      });
+    },
+    {
+      threshold: [0],
+    },
+  );
+
+  useEffect(() => {
+    if (!dom) return;
+    console.log('dom: ', dom)
+    observer.observe(dom);
+
+    return () => {
+      observer.disconnect();
+    };
+  });
+
+  return observer;
+}
diff --git a/src/pages/home/_users/index.tsx b/src/pages/_home/_users/index.tsx
similarity index 100%
rename from src/pages/home/_users/index.tsx
rename to src/pages/_home/_users/index.tsx
diff --git a/src/pages/_home/_users/row1.json b/src/pages/_home/_users/row1.json
new file mode 100644
index 000000000..06f8b0475
--- /dev/null
+++ b/src/pages/_home/_users/row1.json
@@ -0,0 +1,118 @@
+[
+  {
+    "imgUrl": "tencent.png",
+    "linkid": "1221793407"
+  },
+  {
+    "imgUrl": "baidu.png",
+    "linkid": "919051523"
+  },
+  {
+    "imgUrl": "china-unicon.png",
+    "linkid": "1110504908"
+  },
+  {
+    "imgUrl": "mafengwo.png",
+    "linkid": "1820333093"
+  },
+  {
+    "imgUrl": "yto.png",
+    "linkid": "1139312118"
+  },
+  {
+    "imgUrl": "zto.png",
+    "linkid": "1698698427"
+  },
+  {
+    "imgUrl": "ziroom.png",
+    "linkid": "1139258870"
+  },
+  {
+    "imgUrl": "ctyun.png",
+    "linkid": "1200959475"
+  },
+  {
+    "imgUrl": "apollo.png",
+    "linkid": "1099889737"
+  },
+  {
+    "imgUrl": "yonghui.png",
+    "linkid": "1200950246"
+  },
+  {
+    "imgUrl": "grow.png",
+    "linkid": "1439373911"
+  },
+  {
+    "imgUrl": "longping.png",
+    "linkid": "1702009279"
+  },
+  {
+    "imgUrl": "gigacloud_technology.png",
+    "linkid": "1201920672"
+  },
+  {
+    "imgUrl": "shunwang.png",
+    "linkid": "1209045211"
+  },
+  {
+    "imgUrl": "joy_u.png",
+    "linkid": "1288722017"
+  },
+  {
+    "imgUrl": "wondersgroup.png",
+    "linkid": "1439405452"
+  },
+  {
+    "imgUrl": "lydigi.png",
+    "linkid": "1621433984"
+  },
+  {
+    "imgUrl": "china_entercom.jpg",
+    "linkid": "1627571263"
+  },
+  {
+    "imgUrl": "changan.png",
+    "linkid": "1519024880"
+  },
+  {
+    "imgUrl": "zhengzhou.png",
+    "linkid": "1702043138"
+  },
+  {
+    "imgUrl": "doctorglasses.png",
+    "linkid": "1139380442"
+  },
+  {
+    "imgUrl": "kcbebank.png",
+    "linkid": "1436777947"
+  },
+  {
+    "imgUrl": "itcast.png",
+    "linkid": "1202869920"
+  },
+  {
+    "imgUrl": "dtsclouds.png",
+    "linkid": "1060163177"
+  },
+  {
+    "imgUrl": "dustess.png",
+    "linkid": "1053560178"
+  },
+  {
+    "imgUrl": "bondex.png",
+    "linkid": "1209046845"
+  },
+  {
+    "imgUrl": "relx.png",
+    "linkid": "1190134660"
+  },
+  {
+    "imgUrl": "shudui.png",
+    "linkid": "1699279960"
+  },
+  {
+    "imgUrl": "atguigu.png",
+    "linkid": "1072426004"
+  }
+]
\ No newline at end of file
diff --git a/src/pages/_home/_users/row2.json b/src/pages/_home/_users/row2.json
new file mode 100644
index 000000000..29b427947
--- /dev/null
+++ b/src/pages/_home/_users/row2.json
@@ -0,0 +1,98 @@
+[
+  {
+    "imgUrl": "yunlizhi.png",
+    "linkid": "902445724"
+  },
+  {
+    "imgUrl": "zoomlion.png",
+    "linkid": "1053940469"
+  },
+  {
+    "imgUrl": "zehoo.png",
+    "linkid": "1080401301"
+  },
+  {
+    "imgUrl": "deepway.png",
+    "linkid": "1226705335"
+  },
+  {
+    "imgUrl": "lccomputing.png",
+    "linkid": "1490021808"
+  },
+  {
+    "imgUrl": "belle.png",
+    "linkid": "981537659"
+  },
+  {
+    "imgUrl": "treeroot.png",
+    "linkid": "1863927696"
+  },
+  {
+    "imgUrl": "fy-data.png",
+    "linkid": "845603591"
+  },
+  {
+    "imgUrl": "dyrs.png",
+    "linkid": "1903038628"
+  },
+  {
+    "imgUrl": "vlion.png",
+    "linkid": "1813618317"
+  },
+  {
+    "imgUrl": "haibo.png",
+    "linkid": "919246964"
+  },
+  {
+    "imgUrl": "hopson.png",
+    "linkid": "919802000"
+  },
+  {
+    "imgUrl": "joyme.png",
+    "linkid": "976162112"
+  },
+  {
+    "imgUrl": "sobot.png",
+    "linkid": "1099833774"
+  },
+  {
+    "imgUrl": "yipage.png",
+    "linkid": "1241823645"
+  },
+  {
+    "imgUrl": "yucun.png",
+    "linkid": "1080345217"
+  },
+  {
+    "imgUrl": "banggood.png",
+    "linkid": "1177373719"
+  },
+  {
+    "imgUrl": "esign.png",
+    "linkid": "1436652912"
+  },
+  {
+    "imgUrl": "vixtel.png",
+    "linkid": "1441115997"
+  },
+  {
+    "imgUrl": "supcon.png",
+    "linkid": "1463391398"
+  },
+  {
+    "imgUrl": "hrfax.png",
+    "linkid": "1436669048"
+  },
+  {
+    "imgUrl": "alpha.png",
+    "linkid": "1439634257"
+  },
+  {
+    "imgUrl": "cloudview.png",
+    "linkid": "1439378199"
+  },
+  {
+    "imgUrl": "yingzi.png",
+    "linkid": "1370407899"
+  }
+]
\ No newline at end of file
diff --git a/src/pages/home/_users/styles.module.css b/src/pages/_home/_users/styles.module.css
similarity index 100%
rename from src/pages/home/_users/styles.module.css
rename to src/pages/_home/_users/styles.module.css
diff --git a/src/pages/home/feature.jsx b/src/pages/_home/feature.jsx
similarity index 100%
rename from src/pages/home/feature.jsx
rename to src/pages/_home/feature.jsx
diff --git a/src/pages/home/hero.jsx b/src/pages/_home/hero.jsx
similarity index 58%
rename from src/pages/home/hero.jsx
rename to src/pages/_home/hero.jsx
index 97c0a8d9a..da650c5b6 100644
--- a/src/pages/home/hero.jsx
+++ b/src/pages/_home/hero.jsx
@@ -8,6 +8,7 @@ import WaveTop from '../../../static/home/wave-top.svg';
 import WaveButton from '../../../static/home/wave-buttom.svg';
 import clsx from 'clsx';
 import { ShellCommand } from '@site/src/components';
+import ScreenMonitor from '@site/src/components/ScreenMonitor';
 
 export default function () {
   const isBrowser = useIsBrowser();
@@ -78,7 +79,8 @@ export default function () {
         </div>
         <div className="d-flex flex-row justify-content-center">
           {/* hero image */}
-          {HeroImage()}
+          {/* {HeroImage()} */}
+          <ScreenMonitor />
         </div>
 
         <div className="d-flex justify-content-center pt-4">
@@ -127,119 +129,3 @@ function Button({
   );
 }
 
-function AchievementBanner() {
-  const formatNumber = (num) => {
-    if (num < 1000) {
-      return num;
-    } else if (num < 1000_000) {
-      return (num / 1000).toFixed(1) + 'k+';
-    } else {
-      return (num / 1000_000).toFixed(1) + 'm+';
-    }
-  };
-
-  const numberIncrementAnimation = (
-    end = 0,
-    { start = 0, duration = 1000, rate = 50, callback } = {},
-  ) => {
-    const step = ((end - start) / duration) * rate;
-    let current = start;
-    const timer = setInterval(() => {
-      current += parseInt(step.toFixed(0));
-      if (current >= end) {
-        clearInterval(timer);
-        current = end;
-      }
-      callback(current);
-    }, rate);
-    if (typeof callback === 'function') {
-      callback(current);
-    }
-    return current;
-  };
-
-  const [counter, setCounter] = React.useState({
-    stars: 3710,
-    forks: 963,
-    downloads: 9900,
-  });
-
-  React.useEffect(() => {
-    numberIncrementAnimation(3710, {
-      callback: (current) => {
-        setCounter((state) => ({
-          ...state,
-          stars: current,
-        }));
-      },
-    });
-    numberIncrementAnimation(963, {
-      callback: (current) => {
-        setCounter((state) => ({
-          ...state,
-          forks: current,
-        }));
-      },
-    });
-    numberIncrementAnimation(9900, {
-      callback: (current) => {
-        setCounter((state) => ({
-          ...state,
-          downloads: current,
-        }));
-      },
-    });
-  }, []);
-
-  // FIXME: 需要解决 github api 请求速率限制的问题
-  /* React.useEffect(() => {
-    fetch('https://api.github.com/repos/apache/incubator-streampark')
-      .then(res => res.json())
-      .then(data => {
-        setCounter(state => ({
-          ...state,
-          stars: data.stargazers_count,
-          forks: data.forks_count,
-        }))
-      })
-    fetch('https://api.github.com/repos/apache/incubator-streampark/releases')
-      .then(res => res.json())
-      .then(data => {
-        console.log(data);
-        let totalDownloads = 0;
-        for (let i = 0; i < data.length; ++i) {
-          for (let j = 0; j < data[i].assets.length; ++j) {
-            totalDownloads += data[i].assets[j].download_count;
-          }
-        }
-
-        setCounter(state => ({
-          ...state,
-          downloads: totalDownloads
-        }))
-      })
-  }, []) */
-
-  return (
-    <section className="achievement-banner">
-      <div className="achievement-banner-item">
-        <div className="achievement-banner-item__highlight">
-          {formatNumber(counter.stars)}
-        </div>
-        <div>Github stars</div>
-      </div>
-      <div className="achievement-banner-item">
-        <div className="achievement-banner-item__highlight">
-          {formatNumber(counter.forks)}
-        </div>
-        <div>Github forks</div>
-      </div>
-      <div className="achievement-banner-item">
-        <div className="achievement-banner-item__highlight">
-          {formatNumber(counter.downloads)}
-        </div>
-        <div>Total downloads</div>
-      </div>
-    </section>
-  );
-}
diff --git a/src/pages/home/index.less b/src/pages/_home/index.less
similarity index 100%
rename from src/pages/home/index.less
rename to src/pages/_home/index.less
diff --git a/src/pages/_home/index.tsx b/src/pages/_home/index.tsx
new file mode 100644
index 000000000..2666de227
--- /dev/null
+++ b/src/pages/_home/index.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import AOS from 'aos';
+
+import Hero from './hero';
+import Feature from './feature';
+import Performance from './performance';
+import TrustUsers from './_users';
+
+import 'aos/dist/aos.css';
+import './theme.less';
+import './index.less';
+
+export default function HomePage() {
+  useEffect(() => {
+    AOS.init({
+      offset: 100,
+      duration: 700,
+      easing: 'ease-out-quad',
+      once: !0,
+    });
+    window.addEventListener('load', AOS.refresh);
+  
+    return () => {
+      window.removeEventListener('load', AOS.refresh);
+    };
+  }, []);
+
+  return (
+    <div className="home-wrap overflow-hidden">
+      <Hero />
+      <TrustUsers />
+      <Feature />
+      <Performance />
+    </div>
+  );
+}
diff --git a/src/pages/_home/languages.json b/src/pages/_home/languages.json
new file mode 100644
index 000000000..689ffa13f
--- /dev/null
+++ b/src/pages/_home/languages.json
@@ -0,0 +1,127 @@
+{
+  "zh-CN": {
+    "common": {
+      "getStart": "快速开始",
+      "architecture": "系统架构",
+      "learnMore": "了解更多",
+      "coreFeatures": "核 心 特 性",
+      "coreFeaturesDesc": "StreamPark™ 让流处理作业开发 & 管理更简单的核心特性",
+      "development": "开 发 框 架",
+      "developmentDesc": "StreamPark™ 提供了开发框架，可快速完成流处理作业开发",
+      "ourUsers": "Our Users",
+      "readMore": "阅读更多",
+      "download": "下载",
+      "releaseDate": "发布日期",
+      "newFeatures": "新特性",
+      "enhancement": "增强点",
+      "bugFixs": "问题修复",
+      "changeLog": "详细变更"
+    },
+    "slogan": {
+      "key": "让流处理更简单!",
+      "description": "Apache StreamPark™ 是一个流处理应用程序开发管理框架，旨在轻松构建和管理流处理应用程序，提供使用 Apache Flink® 和 Apache Spark™ 编写流处理应用的开发框架和一站式实时计算平台，核心能力包括不限于应用开发、部署、管理、运维、实时数仓等。"
+    },
+    "feature": [
+      {
+        "title": "简单易用",
+        "icon": "lni-layers",
+        "details": "Apache StreamPark™ 提供了一系列快捷 API 和 Connector，开箱即用，作业状态自动追踪，快速完成作业的开发和管理。"
+      },
+      {
+        "title": "流批一体",
+        "icon": "lni-shuffle",
+        "details": "Apache StreamPark™  同时支持 Apache Flink® & Apache Spark™，无缝支持流式处理和批处理，连接互通，创造无限可能。"
+      },
+      {
+        "title": "一站式解决方案",
+        "icon": "lni-display-alt",
+        "details": "Apache StreamPark™  为流处理作业提供全生命周期支持，从开发到部署，集等众多功能于一身，是一站式流处理平台。"
+      }
+    ],
+    "development": [
+      {
+        "icon": "lni-code",
+        "title": "编写代码",
+        "description": "1. 使用 Apache StreamPark™ 提供的快捷 API 开发流处理作业。"
+      },
+      {
+        "icon": "lni-bug",
+        "title": "调试代码",
+        "description": "2. 传入 Apache StreamPark™ 约定的配置，进行本地作业开发调试。"
+      },
+      {
+        "icon": "lni-bolt-alt",
+        "title": "部署作业",
+        "description": "3. 使用 Apache StreamPark™ 提供的平台来部署和管理你的作业。"
+      }
+    ],
+    "users": {
+      "title": "Apache StreamPark™ 赢得了诸多用户的信赖",
+      "description": "Apache StreamPark™ 已经被广泛应用于金融、电商、物流、互联网、制造等行业，帮助用户快速构建和管理流处理作业，提升数据处理效率。",
+      "more": "更多合作伙伴"
+    }
+  },
+  "en": {
+    "common": {
+      "getStart": "Quick Start",
+      "architecture": "System Architecture",
+      "description": "Description",
+      "learnMore": "Learn More",
+      "coreFeatures": "Key Features",
+      "coreFeaturesDesc": "The key features of StreamPark™ is to make your stream processing easier.",
+      "development": "Development Framework",
+      "developmentDesc": "StreamPark™ provided a development framework to quickly develop stream processing applications.",
+      "ourUsers": "Our Users",
+      "readMore": "Read More",
+      "download": "Download",
+      "releaseDate": "Release Date",
+      "newFeatures": "New Features",
+      "enhancement": "Enhancement point",
+      "bugFixs": "Bug Fix",
+      "changeLog": "Changelog"
+    },
+    "slogan": {
+      "key": "make stream processing easier!",
+      "description":  "Make stream processing easier! Easy-to-use streaming application development framework and operation platform, with Apache Flink® and Apache Spark™ supported, provides full lifecycle support for stream processing applications."
+    },
+    "feature": [
+      {
+        "title": "Easy to use",
+        "icon": "lni-layers",
+        "details": "Only one service, easy deployment. Automatic application status tracking, enabling development and management of applications within minutes."
+      },
+      {
+        "title": "Unified Batch & Streaming",
+        "icon": "lni-shuffle",
+        "details": "StreamPark™ supports both Apache Flink® and Apache Spark™, making it easier to seamlessly support streaming and batch processing."
+      },
+      {
+        "title": "One-stop Solution",
+        "icon": "lni-display-alt",
+        "details": "StreamPark™ provides full lifecycle support for stream processing applications.from development to deployment, It is an one-stop streaming platform."
+      }
+    ],
+    "development": [
+      {
+        "icon": "lni-code",
+        "title": "Write Code",
+        "description": "1. Develop your code quickly using the StreamPark™ API"
+      },
+      {
+        "icon": "lni-bug",
+        "title": "Debug Application",
+        "description": "2. Debug your code with the application configuration"
+      },
+      {
+        "icon": "lni-bolt-alt",
+        "title": "Deploy Application",
+        "description": "3. Deploy and manage your applications using StreamPark™"
+      }
+    ],
+    "users": {
+      "title": "Apache StreamPark™ is trust by",
+      "description": "StreamPark™ has been widely used in finance, e-commerce, logistics, Internet, manufacturing and other industries, helping users quickly build and manage stream processing jobs and improve data processing efficiency.",
+      "more": "More Partners"
+    }
+  }
+}
diff --git a/src/pages/home/performance.jsx b/src/pages/_home/performance.jsx
similarity index 100%
rename from src/pages/home/performance.jsx
rename to src/pages/_home/performance.jsx
diff --git a/src/pages/home/performance.less b/src/pages/_home/performance.less
similarity index 100%
rename from src/pages/home/performance.less
rename to src/pages/_home/performance.less
diff --git a/src/pages/home/screenshot.jsx b/src/pages/_home/screenshot.jsx
similarity index 100%
rename from src/pages/home/screenshot.jsx
rename to src/pages/_home/screenshot.jsx
diff --git a/src/pages/home/screenshot.less b/src/pages/_home/screenshot.less
similarity index 100%
rename from src/pages/home/screenshot.less
rename to src/pages/_home/screenshot.less
diff --git a/src/pages/home/theme.less b/src/pages/_home/theme.less
similarity index 100%
rename from src/pages/home/theme.less
rename to src/pages/_home/theme.less
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 2666de227..ad06b553f 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -1,16 +1,37 @@
 import React, { useEffect } from 'react';
 import AOS from 'aos';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
-import Hero from './hero';
-import Feature from './feature';
-import Performance from './performance';
-import TrustUsers from './_users';
+import TopWaveImage from '@site/static/home/wave-top.svg';
+import BottomWaveImage from '@site/static/home/wave-buttom.svg';
+import BannerTitle from '@site/src/components/BannerTitle';
+import Button from '@site/src/components/Button';
+import GetStartButton from '@site/src/components/Button/GetStart';
+import GitHubButton from '@site/src/components/Button/GitHub';
+import config from './languages.json';
 
-import 'aos/dist/aos.css';
-import './theme.less';
-import './index.less';
+// import Hero from './hero';
+// import Feature from './feature';
+// import Performance from './performance';
+import TrustedUsers from '@site/src/components/TrustedUsers';
+import ShellCommand from '@site/src/components/ShellCommand';
+import SectionTitle from '@site/src/components/SectionTitle';
+import FeatureCard from '@site/src/components/FeatureCard';
+import Development from '@site/src/components/Development';
+import ScreenMonitor from '@site/src/components/ScreenMonitor';
+import AchievementBanner from '@site/src/components/AchievementBanner';
+import Browser from '@site/src/components/MacBrowser';
+import { useTranslation } from '@site/src/hooks/useTranslation';
+
+import './style.less';
+import BannerVideo from '@site/src/components/BannerVideo';
 
 export default function HomePage() {
+  const INSTALL_COMMAND = `curl -L https://github.com/apache/streampark/raw/dev/streampark.sh | sh`;
+
+  const { t, language } = useTranslation(config);
+
   useEffect(() => {
     AOS.init({
       offset: 100,
@@ -19,18 +40,92 @@ export default function HomePage() {
       once: !0,
     });
     window.addEventListener('load', AOS.refresh);
-  
+
     return () => {
       window.removeEventListener('load', AOS.refresh);
     };
   }, []);
-
   return (
-    <div className="home-wrap overflow-hidden">
-      <Hero />
-      <TrustUsers />
-      <Feature />
-      <Performance />
+    <div className="homepage-wrapper overflow-hidden">
+      <div
+        data-aos="fade-down"
+        className="absolute top-[60px] right-0 h-[300px] w-[300px] overflow-hidden z-[-1]"
+      >
+        <TopWaveImage className="absolute bottom-0 right-0  w-[1400px] -rotate-6" />
+      </div>
+      <section className="banner-section container mt-16 flex flex-col">
+        <BannerTitle />
+        <div
+          className="flex justify-center space-x-6 text-sm"
+          data-aos="fade-right"
+          data-aos-duration="6000"
+          data-aos-offset="100"
+        >
+          {/* <Button>Get Start</Button> */}
+          <GetStartButton>Get Start</GetStartButton>
+          <GitHubButton>View on GitHub</GitHubButton>
+        </div>
+      </section>
+      {/* <ScreenMonitor /> */}
+      <Browser className="aspect-video !h-auto bg-shadow-primary">
+        {/* <SPDashboardImage /> */}
+        <BannerVideo />
+      </Browser>
+      <section data-aos="fade-up" className="flex flex-col items-start my-10">
+        <div className="text-base lg:text-xl text-neutral-600 dark:text-neutral-400 mx-auto mb-4">
+          Start using Apache StreamPark™ in minutes
+        </div>
+        <div className="mx-auto px-2">
+          <ShellCommand command={INSTALL_COMMAND} className="max-w-[80%]" />
+          <p className="text-xs md:text-sm text-neutral-400 dark:text-neutral-600 mx-auto mt-2 pl-2">
+            <span>Or install other release version from the&nbsp;</span>
+            <a href="/download" className="text-primary-400">
+              download page
+            </a>
+            <span>.</span>
+          </p>
+        </div>
+      </section>
+      <div className="flex justify-end" data-aos="slide-left">
+        <BottomWaveImage className="h-[120px] md:h-[250px] w-full shrink-0 mt-[36px] md:mt-[75px]" />
+        <BottomWaveImage className="h-[120px] md:h-[250px] w-full shrink-0" />
+      </div>
+      <section className="lg:pb-16 lg:px-20">
+        <BrowserOnly>{() => <AchievementBanner />}</BrowserOnly>
+      </section>
+      <section className="lg:pb-20">
+        <SectionTitle title={t.users.title} description={''} />
+        <BrowserOnly>{() => <TrustedUsers />}</BrowserOnly>
+      </section>
+      <section className="lg:py-20 bg-[#f7f9fe] dark:bg-[#1a1b1c]">
+        <div className="w-full overflow-hidden">
+          <SectionTitle
+            title={t.common.coreFeatures}
+            description={t.common.coreFeaturesDesc}
+          />
+          <div className="flex-center flex-wrap">
+            {t.feature.map((feature, i) => (
+              <FeatureCard
+                key={i}
+                title={feature.title}
+                icon={feature.icon}
+                content={feature.details}
+                animationDelay={(i % 3) * 100}
+                className="hover:-translate-y-[10px] transition-transform ease-in-out duration-300"
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+      <section className="lg:py-20">
+        <div className="w-full overflow-hidden">
+          <SectionTitle
+            title={t.common.development}
+            description={t.common.developmentDesc}
+          />
+          <BrowserOnly>{() => <Development />}</BrowserOnly>
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/src/pages/home/languages.json b/src/pages/home/languages.json
index 689ffa13f..014e10762 100644
--- a/src/pages/home/languages.json
+++ b/src/pages/home/languages.json
@@ -124,4 +124,4 @@
       "more": "More Partners"
     }
   }
-}
+}    
diff --git a/src/pages/home/style.less b/src/pages/home/style.less
new file mode 100644
index 000000000..53942156f
--- /dev/null
+++ b/src/pages/home/style.less
@@ -0,0 +1,73 @@
+body {
+  background-color: transparent;
+  // background-image: linear-gradient(180deg, #66a6ff 0, #f8f8f8 800px);
+}
+
+.banner-bg-shadow-element {
+  position: relative;
+
+  --sp-bg-shadow-color: #3891bb8f;
+  --sp-bg-shadow-size: 280px;
+  --sp-bg-shadow-left: 240px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    position: absolute;
+    left: var(--sp-bg-shadow-left);
+    top: var(--sp-bg-shadow-size);
+    width: var(--sp-bg-shadow-size);
+    height: var(--sp-bg-shadow-size);
+    transform: translate3d(-50%, -50%, 0);
+    // box-shadow: 0 0 250px 140px var(--sp-bg-shadow-color);
+    background-image: linear-gradient(-45deg, #47caff 50%, #bd34fe 50%);
+    filter: blur(calc(var(--sp-bg-shadow-size) / 1.75));
+    z-index: -1;
+  }
+}
+
+.bg-shadow-element {
+  position: relative;
+
+  --sp-bg-shadow-color: #3891bb8f;
+  --sp-bg-shadow-size: 280px;
+  --sp-bg-shadow-left: 10%;
+
+  &::before {
+    content: '';
+    position: absolute;
+    position: absolute;
+    left: var(--sp-bg-shadow-left);
+    top: 40%;
+    width: var(--sp-bg-shadow-size);
+    height: var(--sp-bg-shadow-size);
+    transform: translate3d(-50%, -50%, 0);
+    // box-shadow: 0 0 250px 140px var(--sp-bg-shadow-color);
+    background-image: linear-gradient(-45deg, #47caff 50%, #bd34fe 50%);
+    filter: blur(calc(var(--sp-bg-shadow-size) / 1.75));
+    z-index: -1;
+  }
+}
+
+.bg-shadow-primary {
+  box-shadow: 1px 1px 500px 0 rgba(#47caff, 0.27);
+}
+
+.homepage-wrapper {
+  --primary-color: #2872ff;
+  --primay-color-lighten: #588af2;
+  --primay-color-deepen: #0d6efd;
+
+  --bg-color: #fff;
+  --secondary-bg-color: #f7f9fe;
+
+  font-family: 'Poppins', sans-serif !important;
+}
+
+[data-theme='dark'] .homepage-wrapper {
+  --primary-color: #5e44ee;
+  --primay-color-lighten: #563ced;
+  --primay-color-deepen: #4c32db;
+  --bg-color: #141618;
+  --secondary-bg-color: #1a1b1c;
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a09b6f834..ff4977e38 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,36 +1,39 @@
 import React, { useEffect } from 'react';
 import Layout from '@theme/Layout';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Home from './home'
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import "../css/font.css"
-import "../css/font-awesome.min.css"
-export default function () {
-    const isBrowser = useIsBrowser();
-    const { siteConfig } = useDocusaurusContext();
 
-    const pathname = isBrowser && location.pathname
+import Home from './home';
+import '../css/font.css';
+import '../css/font-awesome.min.css';
 
-    useEffect(() => {
-        if (isBrowser) {
-            const nav = document.getElementsByTagName('nav')[0];
-            const classList = nav && nav.classList;
-            if (!classList) return;
-            if (pathname === '/' || pathname === '/zh-CN/') {
-                classList.add('index-nav');
-            } else {
-                classList.remove('index-nav');
-            }
-        }
-    }, [isBrowser, pathname])
+export default function IndexPage() {
+  const isBrowser = useIsBrowser();
+  const { siteConfig } = useDocusaurusContext();
 
-    return (
-        <Layout
-            title={siteConfig.title}
-            description="Description will go into a meta tag in <head />">
-            <main>
-                <Home />
-            </main>
-        </Layout>
-    );
+  const pathname = isBrowser && location.pathname;
+
+  useEffect(() => {
+    if (isBrowser) {
+      const nav = document.getElementsByTagName('nav')[0];
+      const classList = nav && nav.classList;
+      if (!classList) return;
+      if (pathname === '/' || pathname === '/zh-CN/') {
+        classList.add('index-nav');
+      } else {
+        classList.remove('index-nav');
+      }
+    }
+  }, [isBrowser, pathname]);
+
+  return (
+    <Layout
+      title={siteConfig.title}
+      description="Description will go into a meta tag in <head />"
+    >
+      <main>
+        <Home />
+      </main>
+    </Layout>
+  );
 }
diff --git a/static/home/screenshot.png b/static/home/screenshot.png
new file mode 100644
index 000000000..a62b8b7f1
Binary files /dev/null and b/static/home/screenshot.png differ
diff --git a/static/icons/video-play.svg b/static/icons/video-play.svg
new file mode 100644
index 000000000..e67241b19
--- /dev/null
+++ b/static/icons/video-play.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></svg>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index b51f7ddb8..816db1128 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,14 +1,21 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  corePlugins: {
-    preflight: false,
-    container: false,
-  },
-  content: ["./src/**/*.{jsx,tsx,html}"],
-  darkMode: ["class", '[data-theme="dark"]'],
+  content: ['./src/**/*.{js,jsx,ts,tsx,html}'],
+  // corePlugins: {
+  //   preflight: false,
+  //   container: false,
+  // },
+  darkMode: ['class', '[data-theme="dark"]'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: {
+          400: '#588af2',
+          500: '#2872ff',
+          600: '#0d6efd',
+        },
+      },
+    },
   },
   plugins: [],
-}
-
+};