Merge branch 'release' into js2css

.eslintrc.js

@@ -19,24 +19,27 @@ module.exports = {
             plugins: ['react', 'react-hooks', 'jest', 'import'],
             rules: {
                 // 因为历史原因，现有项目基本全部是4个空格
-                indent: ['error', 4, { 'SwitchCase': 1 }],
-                'comma-spacing': ["error", { "before": false, "after": true }],
-                'no-multi-spaces': ["error", { ignoreEOLComments: true }],
+                indent: ['error', 4, {'SwitchCase': 1}],
+                'comma-spacing': ["error", {"before": false, "after": true}],
+                'no-multi-spaces': ["error", {ignoreEOLComments: true}],
                 'react/display-name': 'off',
-                'key-spacing': ["error", { "beforeColon": false }],
+                'key-spacing': ["error", {"beforeColon": false}],
                 'react/jsx-indent': ['error', 4],
                 'react/jsx-indent-props': ['error', 4],
-                'react/prefer-stateless-function': ['warn'],
                 'react/no-find-dom-node': ['warn'],
                 'react/prop-types': 'off',
                 'react/prefer-stateless-function': 'off',
-                'operator-linebreak': ['warn', 'after', { 'overrides': { '?': 'before', ':': 'before' } }],
+                'jsx-a11y/alt-text': ["warn"],
+                'operator-linebreak': ['warn', 'after', {'overrides': {'?': 'before', ':': 'before'}}],
                 'import/no-unresolved': 'off',
                 'semi': ['error', 'always'],
-                'keyword-spacing': ["error", { "before": true, "after": true }],
+                'keyword-spacing': ["error", {"before": true, "after": true}],
                 'jsx-a11y/click-events-have-key-events': ['warn'],
                 'jsx-a11y/no-noninteractive-element-interactions': ['warn'],
                 'jsx-a11y/no-autofocus': ['warn'],
+                'jsx-a11y/no-static-element-interactions': ['warn'],
+                'jsx-a11y/html-has-lang': ['warn'],
+                'jsx-a11y/mouse-events-have-key-events': ['warn'],
                 'object-curly-spacing': ['error', 'always'],
             },
             globals: {
@@ -55,17 +58,16 @@ module.exports = {
             rules: {
                 // 因为历史原因，现有项目基本全部是4个空格
                 indent: 'off',
-                'comma-spacing': ["error", { "before": false, "after": true }],
-                'no-multi-spaces': ["error", { ignoreEOLComments: true }],
-                'key-spacing': ["error", { "beforeColon": false, "afterColon": true }],
+                'comma-spacing': ["error", {"before": false, "after": true}],
+                'no-multi-spaces': ["error", {ignoreEOLComments: true}],
+                'key-spacing': ["error", {"beforeColon": false, "afterColon": true}],
                 '@typescript-eslint/indent': ['error', 4],
                 'react/display-name': 'off',
                 'react/jsx-indent': ['error', 4],
                 'react/jsx-indent-props': ['error', 4],
-                'react/prefer-stateless-function': ['warn'],
                 'react/no-find-dom-node': ['warn'],
                 'react/prop-types': 'off',
-                'react-hooks/rules-of-hooks': 'error', 
+                'react-hooks/rules-of-hooks': 'error',
                 'react-hooks/exhaustive-deps': 'warn',
                 'react/prefer-stateless-function': 'off',
                 '@typescript-eslint/explicit-module-boundary-types': 'off',
@@ -76,14 +78,17 @@ module.exports = {
                 '@typescript-eslint/no-var-requires': 'warn',
                 '@typescript-eslint/no-inferrable-types': 'off',
                 '@typescript-eslint/no-this-alias': 'off',
-                 // In scenarios where specific rest props need to be passed, some keys may be taken out first, so set 'no-unused-vars' to off
+                // In scenarios where specific rest props need to be passed, some keys may be taken out first, so set 'no-unused-vars' to off
                 '@typescript-eslint/no-unused-vars': 'off',
                 'import/no-unresolved': 'off',
                 'semi': ['error', 'always'],
-                'keyword-spacing': ["error", { "before": true, "after": true }],
+                'keyword-spacing': ["error", {"before": true, "after": true}],
                 'jsx-a11y/click-events-have-key-events': ['warn'],
                 'jsx-a11y/no-noninteractive-element-interactions': ['warn'],
                 'jsx-a11y/no-autofocus': ['warn'],
+                'jsx-a11y/alt-text': ["warn"],
+                'jsx-a11y/mouse-events-have-key-events': ["warn"],
+                'jsx-a11y/html-has-lang': ['warn'],
                 'object-curly-spacing': ['error', 'always'],
                 'semi-design/no-import': 'error',
                 "@typescript-eslint/member-delimiter-style": [

content/input/select/index-en-US.md

@@ -955,7 +955,7 @@ import { Select } from '@douyinfe/semi-ui';
 Turn on list virtualization when passing in `virtualize` to optimize performance when there are a large number of Option nodes
 virtualize is an object containing the following values:
 
-- height: Option list height value, default 300
+- height: Option list height value, default 270 （before v2.20.8 was 300）
 - width: Option list width value, default 100%
 - itemSize: The height of each line of Option, must be passed
 
@@ -975,7 +975,7 @@ class VirtualizeDemo extends React.Component {
     render() {
         let { groups, optionList } = this.state;
         let virtualize = {
-            height: 300,
+            height: 270,
             width: '100%',
             itemSize: 36, // px
         };
@@ -1278,7 +1278,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | loading | Does the drop-down list show the loading animation | boolean | false |
 | max | Maximum number of choices, effective only in multi-selection mode | number |  |
 | maxTagCount | In multi-selection mode, when the option is beyond maxTag Count, the subsequent option is rendered in the form of + N | number |  |
-| maxHeight | Maximum height of `optionList` in the pop-up layer | string | number | 300 |
+| maxHeight | Maximum height of `optionList` in the pop-up layer | string | number | 270 |
 | multiple | Whether allow multiple selection | boolean | false |
 | outerBottomSlot | Rendered at the bottom of the pop-up layer, custom slot level with optionList | ReactNode |  |
 | outerTopSlot | Rendered at the top of the pop-up layer, custom slot level with optionList <br/>**supported after v1.6.0** |

content/input/select/index.md

@@ -1018,7 +1018,7 @@ import { Select } from '@douyinfe/semi-ui';
 传入`virtualize`时开启列表虚拟化，用于大量 Option 节点的情况优化性能  
 virtualize 是一个包含下列值的对象：
 
--   height: Option 列表高度值，默认 300
+-   height: Option 列表高度值，默认 270 (v2.20.8 前为 300)
 -   width: Option 列表宽度值，默认 100%
 -   itemSize: 每行 Option 的高度，必传
  
@@ -1051,7 +1051,7 @@ class VirtualizeDemo extends React.Component {
     render() {
         let { groups, optionList } = this.state;
         let virtualize = {
-            height: 300,
+            height: 270,
             width: '100%',
             itemSize: 36, // px
         };
@@ -1332,7 +1332,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | loading                  | 下拉列表是否展示加载动画                                                                                                                                                                                  | boolean                               | false                             |
 | maxTagCount              | 多选模式下，已选项超出 maxTagCount 时，后续选项会被渲染成+N 的形式                                                                                                                                        | number                                |                                   |
 | max                      | 最多可选几项，仅在多选模式下生效                                                                                                                                                                          | number                                |                                   |
-| maxHeight                | 下拉菜单中 `optionList` 的最大高度                                                                                                                                                                        | string\|number                        | 300                               |
+| maxHeight                | 下拉菜单中 `optionList` 的最大高度                                                                                                                                                                        | string\|number                        | 270                               |
 | multiple                 | 是否多选                                                                                                                                                                                                  | boolean                               | false                             |
 | outerTopSlot             | 渲染在弹出层顶部，与 optionList 平级的自定义 slot                                                                                                                          | ReactNode                             |                                   |
 | outerBottomSlot          | 渲染在弹出层底部，与 optionList 平级的自定义 slot                                                                                                                                                         | ReactNode                             |                                   |

content/start/changelog/index-en-US.md

@@ -16,6 +16,39 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 
 ---
 
+#### 🎉 2.21.0 (2022-10-12)
+- 【Fix】
+  - Fix the problem that the timer is not updated when carousel switches the index through the left and right buttons or methods
+- 【Docs】
+  - Update docsite homepage, add showcase
+
+#### 🎉 2.21.0-beta.1 (2022-10-10)
+- 【Fix】
+  - fix AutoComplete e.target is null in onBlur callback
+
+#### 🎉 2.21.0-beta.0 (2022-10-08)
+- 【Feat】
+  - Table adds header sticky API
+  - AutoComplete add new API onKeyDown
+  - the Upload component exposes the openFileDialog method so that the user can manually open the file selection dialog.
+  - LocaleProvider added Romanian(ro) [@jacob-lcs](https://github.com/jacob-lcs)
+- 【Fix】
+  - fix the problem that children onKeydown cannot get events under Dropdown
+  - fix the problem that the timer is not updated when Carousel switches the index through the left and right buttons or methods
+  - fix Select when the filter is true and the input box is empty, after closing panel trigger onSearch function issue
+- 【Style】
+  - add rounded corners to square avatars
+#### 🎉 2.20.8 (2022-10-11)
+- 【Fix】
+  - Fixed the problem that the position of the first Option option is offset when the Select is virtualized  [#1178](https://github.com/DouyinFE/semi-design/pull/1178)
+- 【Style】
+  - The default maxHeight value of Select (the max height of the Option floating layer), the default height of virtualization is `300px` -> `270px`
+  - Select Design Token changed, abandoned `$spacing-select_option_first-marginTop`、`$spacing-select_option_last-marginBottom` ；
+Change ：`$spacing-select_option_list-paddingTop` 、`$spacing-select_option_list-paddingBottom` ， from 0 to `$spacing-extra-tight` (4px)
+- 【Chore】
+    - Form export RuleItem Interface  
+
+
 
 #### 🎉 2.20.7 (2022-10-10)
 - 【Fix】

content/start/changelog/index.md

@@ -16,6 +16,41 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 
 ---
 
+#### 🎉 2.21.0 (2022-10-12)
+- 【Fix】
+  - 修复 Carousel 通过左右按钮或者方法切换 index 时没有更新计时器问题
+- 【Docs】
+  - 文档站点首页更新，增加 showcase
+
+
+#### 🎉 2.21.0-beta.1 (2022-10-10)
+- 【Fix】
+  - 修复 AutoComplete 在 onBlur 回调中 e.target 是 null 的问题
+
+#### 🎉 2.21.0-beta.0 (2022-10-08)
+- 【Feat】
+  - Table 新增表头 sticky API
+  - AutoComplete 新增 onKeyDown API
+  - Upload 组件对外暴露 openFileDialog 方法，使用户可以手动打开文件选择窗口。
+  - LocaleProvider 新增罗马尼亚语（ro） [@jacob-lcs](https://github.com/jacob-lcs)
+- 【Fix】
+  - 修复 Dropdown 下 children onKeydown 拿不到事件问题
+  - 修复 Carousel 通过左右按钮或者方法切换 index 时没有更新计时器问题
+  - 修复 Select 在 filter 为 true, input 框为空情况下，关闭面板后触发 onSearch 问题
+- 【Style】
+  - Avatar 方形头像增加圆角
+  
+#### 🎉 2.20.8 (2022-10-11)
+- 【Fix】
+  - 修复 Select 虚拟化时，第一个 Option 选项位置偏移的问题  [#1178](https://github.com/DouyinFE/semi-design/pull/1178)
+- 【Style】
+  - Select 的 maxHeight 默认值 （Option 浮层最大高度）、虚拟化默认高度由 300px -> 270px
+  - Select Design Token 变更，废弃 `$spacing-select_option_first-marginTop`、`$spacing-select_option_last-marginBottom` 两个 Token ；
+修改 以下 Token 默认值：`$spacing-select_option_list-paddingTop` 、`$spacing-select_option_list-paddingBottom` ， 由 0 变更为 `$spacing-extra-tight` (4px)
+- 【Chore】
+    - Form 增加 RuleItem Interface export 
+
+
 #### 🎉 2.20.7 (2022-10-10)
 - 【Fix】
   - 修复只引入 ImagePreview 单独使用，未引入 Image 组件时样式丢失的问题 [#1175](https://github.com/DouyinFE/semi-design/pull/1175)

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.20.7"
+    "version": "2.20.8"
 }

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-react",
-  "version": "2.20.7",
+  "version": "2.21.0",
   "description": "motion library for semi-ui-react",
   "keywords": [
     "motion",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@douyinfe/semi-animation": "2.12.0",
-    "@douyinfe/semi-animation-styled": "2.20.7",
+    "@douyinfe/semi-animation-styled": "2.21.0",
     "classnames": "^2.2.6"
   },
   "devDependencies": {

packages/semi-animation-styled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-styled",
-  "version": "2.20.7",
+  "version": "2.21.0",
   "description": "semi styled animation",
   "keywords": [
     "semi",

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation",
-  "version": "2.20.7",
+  "version": "2.21.0",
   "description": "animation base library for semi-ui",
   "keywords": [
     "animation",

packages/semi-eslint-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-semi-design",
-  "version": "2.20.7",
+  "version": "2.21.0",
   "description": "semi ui eslint plugin",
   "keywords": [
     "semi",

packages/semi-foundation/modal/modalContentFoundation.ts

@@ -50,7 +50,7 @@ export default class ModalContentFoundation extends BaseFoundation<ModalContentA
         this._adapter.notifyDialogMouseUp();
     }
 
-    handleKeyDown(e: any) {
+    handleKeyDown = (e: any) => {
         const { closeOnEsc } = this.getProps();
         if (closeOnEsc && e.keyCode === KeyCode.ESC) {
             e.stopPropagation();

packages/semi-foundation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.20.7",
+    "version": "2.21.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",

packages/semi-foundation/select/constants.ts

@@ -16,6 +16,6 @@ const strings = {
     STATUS: VALIDATE_STATUS,
 } as const;
 
-const numbers = { LIST_HEIGHT: 300 };
+const numbers = { LIST_HEIGHT: 270 };
 
 export { cssClasses, strings, numbers };

packages/semi-foundation/select/option.scss

@@ -85,11 +85,11 @@ $multiple: #{$module}-multiple;
         background-color: $color-select_option-bg-hover;
     }
 
-    &:first-of-type {
-        margin-top: $spacing-select_option_first-marginTop;
-    }
+    // &:first-of-type {
+    // margin-top: $spacing-select_option_first-marginTop;
+    // }
 
-    &:last-of-type {
-        margin-bottom: $spacing-select_option_last-marginBottom;
-    }
+    // &:last-of-type {
+    // margin-bottom: $spacing-select_option_last-marginBottom;
+    // }
 }

packages/semi-foundation/select/select.scss

@@ -22,9 +22,8 @@ $multiple: #{$module}-multiple;
     position: relative;
     outline: none;
     cursor: pointer;
-    transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg,
-    border $transition_duration-select-border $transition_function-select-border $transition_delay-select-border;
-    transform:scale($transform_scale-select);
+    transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg, border $transition_duration-select-border $transition_function-select-border $transition_delay-select-border;
+    transform: scale($transform_scale-select);
     &:hover {
         background-color: $color-select-bg-hover;
         border: $width-select-border-hover solid $color-select-border-hover;
@@ -394,10 +393,16 @@ $multiple: #{$module}-multiple;
     }
 }
 
+.#{$module}-option-list-wrapper {
+    padding-top: $spacing-select_option_list-paddingTop;
+    padding-bottom: $spacing-select_option_list-paddingBottom;
+    padding-left: $spacing-select_option_list-paddingLeft;
+    padding-right: $spacing-select_option_list-paddingRight;
+}
+
 .#{$module}-option-list {
     overflow-x: hidden;
     overflow-y: auto;
-    padding: $spacing-select_option_list-paddingTop $spacing-select_option_list-paddingRight $spacing-select_option_list-paddingBottom $spacing-select_option_list-paddingLeft;
     &-chosen {
         .#{$module}-option-icon {
             display: flex;

packages/semi-foundation/select/variables.scss

@@ -84,16 +84,21 @@ $spacing-select_option-paddingLeft: $spacing-base-tight; // 选择器菜单项
 $spacing-select_option-paddingRight: $spacing-base-tight; // 选择器菜单项右侧内边距
 $spacing-select_option-paddingTop: $spacing-tight; // 选择器菜单项顶部内边距
 $spacing-select_option-paddingBottom: $spacing-tight; // 选择器菜单项底部内边距
-$spacing-select_option_first-marginTop: $spacing-extra-tight; // 选择器第一个菜单项顶部外边距
-$spacing-select_option_last-marginBottom: $spacing-extra-tight; // 选择器最后一个菜单项顶部外边距
+
+
+// $spacing-select_option_first-marginTop: $spacing-extra-tight; // 选择器第一个菜单项顶部外边距
+// $spacing-select_option_last-marginBottom: $spacing-extra-tight; // 选择器最后一个菜单项顶部外边距
+
+
 $spacing-select_tag-marginTop: $spacing-super-tight - 1px; // 多项选择器标签顶部外边距
 $spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签右侧外边距
 $spacing-select_tag-marginBottom: $spacing-super-tight - 1px; // 多项选择器标签底部外边距
 $spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
 $spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
-$spacing-select_option_list-paddingTop: 0px; // 选择器内容区顶部内边距
+
+$spacing-select_option_list-paddingTop: $spacing-extra-tight; // 选择器内容区顶部内边距
 $spacing-select_option_list-paddingRight: 0px; // 选择器内容区右侧内边距
-$spacing-select_option_list-paddingBottom: 0px; // 选择器内容区底部内边距
+$spacing-select_option_list-paddingBottom: $spacing-extra-tight; // 选择器内容区底部内边距
 $spacing-select_option_list-paddingLeft: 0px; // 选择器内容区左侧内边距
 
 // Radius

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-icons",
-  "version": "2.20.7",
+  "version": "2.21.0",
   "description": "semi icons",
   "keywords": [
     "semi",
@@ -35,7 +35,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
-    "@douyinfe/semi-webpack-plugin": "2.20.7",
+    "@douyinfe/semi-webpack-plugin": "2.21.0",
     "babel-loader": "^8.2.2",
     "css-loader": "4.3.0",
     "del": "^6.0.0",

packages/semi-illustrations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-illustrations",
-  "version": "2.20.7",
+  "version": "2.21.0",
   "description": "semi illustrations",
   "keywords": [
     "semi",

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.20.7",
+    "version": "2.21.0",
     "description": "Plugin that support Semi Design in Next.js",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",
@@ -23,7 +23,7 @@
         "typescript": "^4"
     },
     "dependencies": {
-        "@douyinfe/semi-webpack-plugin": "2.20.7"
+        "@douyinfe/semi-webpack-plugin": "2.21.0"
     },
     "gitHead": "eb34a4f25f002bb4cbcfa51f3df93bed868c831a"
 }

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-scss-compile",
-  "version": "2.20.7",
+  "version": "2.21.0",
   "description": "compile semi scss to css",
   "author": "[email protected]",
   "license": "MIT",

packages/semi-theme-default/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-theme-default",
-    "version": "2.20.7",
+    "version": "2.21.0",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

packages/semi-ui/form/interface.ts

@@ -15,7 +15,7 @@ import { RadioProps } from '../radio/index';
 import { ErrorMessageProps, ReactFieldError as FieldError } from './errorMessage';
 import { LabelProps } from './label';
 
-export { FormState, FormApi, WithFieldOption };
+export { FormState, FormApi, WithFieldOption, RuleItem };
 
 export type CommonFieldProps = {
     /** Field is required (except Form. Checkbox within the Group, Form. Radio) */

packages/semi-ui/modal/ModalContent.tsx

@@ -79,12 +79,12 @@ export default class ModalContent extends BaseComponent<ModalContentReactProps,
             },
             addKeyDownEventListener: () => {
                 if (this.props.closeOnEsc) {
-                    document.addEventListener('keydown', this.foundation.handleKeyDown.bind(this.foundation));
+                    document.addEventListener('keydown', this.foundation.handleKeyDown);
                 }
             },
             removeKeyDownEventListener: () => {
                 if (this.props.closeOnEsc) {
-                    document.removeEventListener('keydown', this.foundation.handleKeyDown.bind(this.foundation));
+                    document.removeEventListener('keydown', this.foundation.handleKeyDown);
                 }
             },
             getMouseState: () => this.state.dialogMouseDown,

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.20.7",
+    "version": "2.21.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -18,11 +18,11 @@
     ],
     "dependencies": {
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.20.7",
-        "@douyinfe/semi-foundation": "2.20.7",
-        "@douyinfe/semi-icons": "2.20.7",
+        "@douyinfe/semi-animation-react": "2.21.0",
+        "@douyinfe/semi-foundation": "2.21.0",
+        "@douyinfe/semi-icons": "2.21.0",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.20.7",
+        "@douyinfe/semi-theme-default": "2.21.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.20.7",
+        "@douyinfe/semi-scss-compile": "2.21.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",

packages/semi-ui/select/index.tsx

@@ -25,14 +25,14 @@ import Spin from '../spin';
 import Trigger from '../trigger';
 import { IconChevronDown, IconClear } from '@douyinfe/semi-icons';
 import { isSemiIcon, getFocusableElements, getActiveElement } from '../_utils';
-import { Subtract } from 'utility-types';
-
 import warning from '@douyinfe/semi-foundation/utils/warning';
 import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 
 import '@douyinfe/semi-foundation/select/select.scss';
-import { Locale } from '../locale/interface';
-import { Position, TooltipProps } from '../tooltip';
+import type { Locale } from '../locale/interface';
+import type { Position, TooltipProps } from '../tooltip';
+import type { Subtract } from 'utility-types';
+
 
 export type { OptionProps } from './option';
 export type { OptionGroupProps } from './optionGroup';
@@ -303,7 +303,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         onBlur: noop,
         onClear: noop,
         onListScroll: noop,
-        maxHeight: 300,
+        maxHeight: numbers.LIST_HEIGHT,
         dropdownMatchSelectWidth: true,
         defaultActiveFirstOption: true, // In order to meet the needs of A11y, change to true
         showArrow: true,
@@ -867,8 +867,8 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             <div 
                 id={`${prefixcls}-${this.selectOptionListID}`} 
-                className={dropdownClassName} 
-                style={style} 
+                className={cls(`${prefixcls}-option-list-wrapper`, dropdownClassName)} 
+                style={style}
                 ref={this.setOptionContainerEl} 
                 onKeyDown={e => this.foundation.handleContainerKeyDown(e)}
             >

packages/semi-webpack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-webpack-plugin",
-    "version": "2.20.7",
+    "version": "2.21.0",
     "description": "",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",

src/components/Footer/footer.scss

@@ -1,6 +1,6 @@
 body[theme-mode='dark'] {
     .footer {
-        background: #1C1F23;
+        background: #1c1f23;
     }
 }
 .footerMini8 {
@@ -28,7 +28,7 @@ body[theme-mode='dark'] {
         min-width: 48px;
         margin: 0px 80px 0px 0px;
         font-size: 16px;
-        font-family: PingFang SC;
+        font-family: 'Inter', 'PingFang SC';
         color: #ffffffff;
         line-height: 26px;
         font-weight: 400;
@@ -61,7 +61,7 @@ body[theme-mode='dark'] {
 
     .text_8b88424e {
         font-size: 16px;
-        font-family: PingFang SC;
+        font-family: 'Inter', 'PingFang SC';
         color: #ffffffff;
         line-height: 26px;
         font-weight: 400;
@@ -97,7 +97,7 @@ body[theme-mode='dark'] {
         align-items: center;
         justify-content: space-between;
     }
-    .icpWrapper{
+    .icpWrapper {
         display: flex;
     }
     .a2021SemiDesignAllRi {
@@ -110,14 +110,14 @@ body[theme-mode='dark'] {
         text-align: left;
         vertical-align: top;
     }
-    
+
     .image45 {
         width: 20px;
         height: 20px;
         margin: 0px 4px 0px 0px;
     }
 
-    .beianText{
+    .beianText {
         margin-right: 8px;
         font-size: 14px;
         font-family: Inter;
@@ -155,5 +155,5 @@ body[theme-mode='dark'] {
         &:hover {
             color: #01ffc3ff;
         }
-    } 
+    }
 }

src/locale/en-US.js

@@ -6,21 +6,23 @@ const appLocale = {
     locale: 'en-US',
     messages: {
 
-        'apiDoc':'API doc',
-        'designDoc':'Design doc',
+        "apiDoc": "API doc",
+        "designDoc": "Design doc",
 
         // designToken
         'designToken.variable': 'variable',
         'designToken.defaultValue': 'defaultValue',
         'designToken.usage': 'usage',
         'designToken.WIP': 'WIP',
+
         // app
-        'app.next': '下一步',
+        'app.next': 'Next step',
 
         // footer
         'footer.component': 'React Component Library',
         'footer.dsm': 'Theme & DSM',
 
+        // search
         'search.belong.component': 'Component',
         'search.belong.material': 'Material',
         'search.belong.design': 'Design',
@@ -71,28 +73,108 @@ const appLocale = {
         'icon.list.tab.fill': 'Fill Icons',
         'icon.list.tab.stroked': 'Stroked Icons',
 
-        "home.banner.description": "A modern, comprehensive, flexible design system that gives you all modular blocks you need to build sensible web apps & SaaS products.",
+        // new Home
+        // page one
+        "enterprise_product_design_system": "Where Design & Dev Work Together",
+        "home_banner_description": "Maintained by the Douyin front-end and UED teams, an easy-to-customize modern design system that helps designers and developers create high-quality products.",
         "start_using": "Get Started",
+        // page two: Products
+        "now_serving_100_000": "Serving 100,000+ users now",
+        // page three: Feature
+        "feature_title": "Smooth Dev Experience",
+        "feature_subtitle": "Focus on the essentials and we’ll take care of the rest",
+        "feature_FA": "Easy-to-contribute FA architecture",
+        "feature_FA_description": "Semi is designed based on FA architecture, and the main logic is extracted as Foundation package, which is easy to migrate to other frameworks",
+        "feature_a11y": "Complete accessibility support",
+        "feature_a11y_description": "Semi follows W3C standards to provide keyboard interaction, focus management and semantics for all components",
+        "feature_language": "Internationalization and Multilingualism",
+        "feature_language_description": "Semi provides complete multi-language, multi-time zone, RTL support to easily create global applications",
+        "feature_live_code": "Live Code component",
+        "feature_live_code_description": "LiveCode allows you to instantly demonstrate your UI components using an online code editor",
+        "feature_test": "Stable quality assurance",
+        "feature_test_description": "Semi uses a variety of methods such as unit testing to ensure the stability and quality of components, and the code coverage rate reaches 90%",
+        "feature_SSR": "SSR support",
+        "feature_SSR_description": "Semi component library supports SSR scenarios and can be used in frameworks like Next.js and Gatsby",
+        // page four: Theme
+        "home.theme": "Theming",
+        "home.theme.desc": "Create variations of UI Styles that suit your brand with full flexibility",
+        // page five: DSM
+        "semi_dsm": "Semi Design System Management",
+        "powerful_theme_editor__real_time_effect__one_click_synchronization_of_design_too_d77f5776bf126331e801d6d6aa0146f2": "Powerful theme editor, effective in real time, one-click synchronization of design tools",
+        // page six: C to D to C
+        "home.pro.title": "Make design and code homologous",
+        "home.pro.desc": "Based on 40+ real component code design, massive page template front-end code one-click transfer",
+        "home.pro.start": "Get Started",
+        "beta": "public beta",
+        "example_upload_report": "Upload report",
+        "example_doc_name_zh": "Document Chinese name",
+        "example_doc_name_zh_desc": "Please enter the Chinese name of the document",
+        "example_doc_name_en": "Document English name",
+        "example_doc_name_en_desc": "Please enter the English name of the document",
+        "example_doc_link": "Documentation link",
+        "example_doc_lark_link": "Please enter the Feishu Cloud document link",
+        "example_report_tag": "Report tag",
+        "example_business_line": "Please select a line of business",
+        "example_result": "Conclusion",
+        "example_result_desc": "Please enter conclusion",
+        "example_remark": "Note",
+        "example_remark_desc": "Please enter a note",
+        "example_upload_consist": "Continuous upload",
+        "example_cancel": "Cancel",
+        "example_confirm": "Confirm",
+        // page seven: Web application
+        "application_title": "Build State of the Art Apps",
+        "application_subtitle": "Modern design vibes compile with next-gen OS and browsers",
+        "feishu_program": "Feishu project is a single product released by Feishu in the spring of 2022. It supports large teams to disassemble and visualize complex project processes, visually present collaboration standards, and allow members to clarify their responsibilities and easily grasp upstream and downstream information.",
+        "douyin_creator": "Douyin Creation Service Platform is an exclusive service platform for Douyin creators. It supports two login methods for users as creators and management agencies, and provides a variety of functions to help users operate efficiently.",
+        "anyweb": "Anyweb is a free website builder that makes it easy to create professional websites. With no programming skills required, you can set up custom websites quickly and easily with the Anyweb drag-and-drop editor.",
+        "star_river": "Douyin Music is a one-stop musician service platform under Douyin. In the vast galaxy of music, warm music creators are allowed to settle in and create value for excellent music works.",
+        "cap_cut": "Capcut connects all participants in the video creation industry chain, builds a material library (templates, props, sound effects, flower characters, special effects, etc.), and provides services such as material sharing, cooperation and exchange, and commercial realization.",
+        // page eight: Deep content
+        "content_title": "In-depth interpretation of content",
+        "content_subtitle": "Learn about our thinking behind accessibility, theme customization, automation solutions",
+        "content_a11y": "Accessible Design in Semi Design",
+        "content_ally_info": "\"A front-end open source UI component library that does not support Accessibility is a disaster\"",
+        "content_theme": "In-depth explanation of Semi theming scheme",
+        "content_theme_info": "Compatible with diverse brand languages ​​and product forms to avoid meaningless re-creation",
+        // page nine: Comment
+        "grow_with_users": "Grow together with users",
+        "grow_with_users_description": "Semi Design value our users, any kind of contribution is welcome",
+        "download": "Downloads",
+        "contributor": "Contributors",
+        "thanks": "Special thanks",
+        "access_is_simple_and_easy_to_use": "The access is simple and easy to use; the Semi UI is beautiful in style and has a unified theme; the API is rich and comprehensive.",
+        "beautiful_style_and_unified_theme": "Beautiful style, unified theme;",
+        "rich_and_comprehensive_": "Rich and comprehensive.",
+        "front_end__bytedance": "front end, ByteDance",
+        "the_components_are_quite_complete__covering_a_wide_range_and_the_overall_style_i_e10d9214b403886d249f00b8c4dbb975": "Semi components are quite complete, covering a wide range, and the overall style is also good.",
+        "design_resources_are_obviously_helpful_to_improve_efficiency_": "Design resources can significantly help improve efficiency.",
+        "design__bytedance": "Designer, ByteDance",
+        "there_are_many_other_business_uses_within_the_company__there_are_more_sample_ref_c5fe7051d5fbf1a547084c91f7c4fd8e": "Semi is used by many other businesses in the company, and there are many sample references. We rely on Semi's component design, refer to the design schemes of other business platforms, summarize our own front-end specifications, and unify the delivery standards of the platform.",
+        "component_design__referring_to_the_design_schemes_of_other_business_platforms__s_e47da10ff860ba8b9db1268c06011006": "Component design, referring to the design schemes of other business platforms, summarizing its own front-end specifications, and unifying the delivery standards of the platform.",
+        "product_manager__bytedance": "Product Manager, ByteDance",
+        "super_good!_strong_push_": "Semi is super easy to use! highly recommended.",
+        "as_an_excellent_benchmarking_industry": "As a benchmarking industry's excellent UI library, Semi does a very good job. It has a good guarantee for the response speed of problems and the efficiency of problem solving.",
+        "the_library_did_a_really_good_job__it_has_a_good_guarantee_for_the_corresponding_61cb34deb7e27e6561dd9a5bce00de72": "The library is really doing a good job. It has a good guarantee for the response speed of the problem and the efficiency of solving the problem.",
+        "easy_to_use__beautiful_style_": "Semi Design is easy to use and beautiful in style.",
+        "uniform_style_and_high_fidelity_prototype_facilitate_communication_with_front_en_95d0c0ccece05c104b98ac0dae9fb53b": "Semi unified style, high-fidelity prototype is easy to communicate with front-end students.",
+        "the_documentation_is_very_detailed_and_the_details_of_the_components_are_well_th_aadc51a1122c41cf69ebd4b15e83e864": "The documentation is very detailed and the details of the components are well thought out.",
+        // page ten: Resource
+        "resource_subtitle": "Start using Semi Design on your next project today",
         "home.resource.rd": "Dev",
         "home.resource.rd.desc": "Semi UI for React, live code demo with full documentation that speed up your workflow.",
-        "component_documentation": "API Docs",
+        "component_documentation": "Component Documentation",
         "home.resource.design": "Design",
         "home.resource.design.desc": "Fully synced design tokens and component variants, powered by Figma.",
-        "home.theme": "Theming",
-        "home.theme.desc": "Create variations of UI Styles that suit your brand with full flexibility",
+    
         "volcengine_theme": "Volce Engine Theme",
-        "home.pro.title": "Semi Design D2C",
-        "home.pro.desc": "Design with real code components，convert your design to code with one click",
-        "home.pro.start": "Get Started",
+        "capCut_theme": "CapCut Theme",
         "beta": "Beta",
 
         "semi_design_share_2code": "#Semi Design2Code# Topic Activity is now open!",
-        "access_is_simple_and_easy_to_use;": "Semi is easy to get started; the UI is beautiful and consistent; and the API is comprehensive, too.",
         "apple_account": "Apple Account",
-        "as_an_excellent_benchmarking_industry": "As a benchmark among various UI libraries, Semi is doing really well. It also has a good guarantee for the fast respond as well as the efficiency of customer support.",
-        "based_on": "Based on",
-        "based_on_design_language_development__capable_of_online_debugging": "Based on design language development, capable of online debugging",
-        "beautiful_style_and_unified_theme;": "Beautiful style and unified theme;",
+        // "based_on": "Based on",
+        // "based_on_design_language_development__capable_of_online_debugging": "Based on design language development, capable of online debugging",
         "beijing__china": "Beijing, China",
         "big_v": "KOL",
         "build__fully_aligned_design_resources_with_component_library_code__using": "Build, fully aligned design resources with component library code, using",
@@ -103,8 +185,7 @@ const appLocale = {
         "component_library_to_help_developers_build_applications_efficiently": "Component library to help developers build applications efficiently",
         "components__themes_and_other_out_of_the_box_middle_and_back_office_solutions_hel_a50de9f9d8f3b5008c2df45dcfa19886": "Components, themes and other out-of-the-box middle and back-office solutions help designers and developers create high-quality products.",
         // "comprehensive__easy_to_use_and_high_quality": "Build your next app",
-        "enterprise_product_design_system": "Where Design & Dev Work Together",
-        "content_security": "Content Security",
+        // "content_security": "Content Security",
         "default": "Default",
         "design": "Design",
         "design__bytedance": "Design, ByteDance",
@@ -113,8 +194,8 @@ const appLocale = {
         "douyin_creative_service_theme": "Douyin Creator Theme",
         "douyin_little_assistant": "Douyin Little Assistant",
         "easy_to_use__beautiful_style_": "Semi Design is easy-to-use and stylish.",
-        "excellent_design_of_mid_background_enterprise_applications": "Excellent design of mid-background enterprise applications",
-        "experience_monitoring": "Experience Monitoring",
+        // "excellent_design_of_mid_background_enterprise_applications": "Excellent design of mid-background enterprise applications",
+        // "experience_monitoring": "Experience Monitoring",
         "fast_cloning_or_in_depth_customization__flexible_deployment_of_design_styles_in__cf414f060a2bb3eb0a80dca86d00bcbe": "Fast cloning or in-depth customization, flexible deployment of design styles in line with brand tonality",
         "feishu_universe_design_theme": "Feishu Universe Design Theme",
         "front_end__bytedance": "Developer, ByteDance",
@@ -122,7 +203,7 @@ const appLocale = {
         "grow_with_users": "Stride along with Users",
         "home.useNow": "home.use Now",
         "learn_more": "Learn more",
-        "live_open_platform": "Live Open Platform",
+        // "live_open_platform": "Live Open Platform",
         "now_serving_100_000": "Trusted by 100,000 + users",
         "official_topics": "Official Topics",
         "pay_attention_to_our_users__join_and_help_us_to_continuously_improve": "value our users, any kind of contribution is welcome",
@@ -131,12 +212,12 @@ const appLocale = {
         "private_message_content": "Private message content",
         "private_message_management": "Private Message Management",
         "product_manager__bytedance": "Product Manager, ByteDance",
-        "real_component_code_design__massive_page_template_front_end_code_one_click": "Real component code design, massive page template front-end code one click",
+        // "real_component_code_design__massive_page_template_front_end_code_one_click": "Real component code design, massive page template front-end code one click",
         "rich_and_comprehensive_": "Rich and comprehensive.",
         "semi_design_share_presentation": "Semi Design Share Presentation",
         "send": "Send",
         "sender": "Sender",
-        "smart_translation": "Smart Translation",
+        // "smart_translation": "Smart Translation",
         "super_good!_strong_push_": "Semi is super easy-to-use, highly recommended.",
         "system_notification": "System Notification",
         "the_components_are_quite_complete__covering_a_wide_range_and_the_overall_style_i_e10d9214b403886d249f00b8c4dbb975": "The component coverage are quite complete, covering a wide range, and the overall style is decent as well.",
@@ -149,8 +230,8 @@ const appLocale = {
         "user": "User",
         "video_compression_algorithm": "Video compression algorithm",
         "volcano_little_helper": "Volcano Little",
-        "theme_store":'Theme Store',
-        'semi_dsm':'Semi DSM'
+        "theme_store": "Theme Store",
+        "semi_dsm": "Managing Themes"
     },
 };
 

src/locale/zh-CN.js

@@ -6,8 +6,8 @@ const appLocale = {
     locale: 'zh-CN',
     messages: {
 
-        'apiDoc':'API 文档',
-        'designDoc':'设计文档',
+        "apiDoc": "API 文档",
+        "designDoc": "设计文档",
 
         // designToken
         'designToken.variable': '变量',
@@ -17,9 +17,11 @@ const appLocale = {
 
         // app
         'app.next': '下一步',
+
         // footer
         'footer.component': 'React 组件库',
-        'footer.dsm': '主题与DSM',
+        'footer.dsm': '主题与 DSM',
+
         // search
         'search.belong.component': '组件',
         'search.belong.material': '物料',
@@ -34,6 +36,7 @@ const appLocale = {
         'search.msg.peopleSearch': '大家在搜',
         'search.input.placeholder': '搜索组件/物料/资源',
 
+        // common
         component: '组件',
         themeStore: '主题商店',
         designLanguage: '设计语言',
@@ -73,20 +76,77 @@ const appLocale = {
         'icon.list.tab.stroked': '线性图标',
 
         // new  Home
-        // "comprehensive__easy_to_use_and_high_quality": "全面、易用、优质的",
+        // page one
         "enterprise_product_design_system": "连接设计师与开发者",
-        "home.banner.description": "由抖音前端与 UED 团队维护，易于定制的现代化设计系统，帮助设计师与开发者打造高质量产品。",
+        "home_banner_description": "由抖音前端与 UED 团队维护，易于定制的现代化设计系统，帮助设计师与开发者打造高质量产品。",
         "start_using": "开始使用",
+        // page two: products
         "now_serving_100_000": "现已服务 10 万 + 用户",
-        "user": "用户",
-        "smart_translation": "智能翻译",
-        "live_open_platform": "直播开放平台",
-        "experience_monitoring": "体验监测",
-        "content_security": "内容安全",
+        // page three: feature
+        "feature_title": "完善的开发者体验",
+        "feature_subtitle": "开箱即用的底层能力支持，为开发者节省精力，避免重造",
+        "feature_FA": "易于贡献的 FA 架构",
+        "feature_FA_description": "Semi 基于 FA 架构设计，主逻辑抽为 Foundation 包，易于迁移到其他框架",
+        "feature_a11y": "完备的无障碍支持",
+        "feature_a11y_description": "Semi 遵循 W3C 标准为所有组件提供键盘交互、焦点管理和语义化",
+        "feature_language": "国际化与多语言",
+        "feature_language_description": "Semi 提供完备的多语言、多时区、RTL支持，轻松打造全球化应用",
+        "feature_live_code": "Live Code 组件",
+        "feature_live_code_description": "LiveCode 允许你使用在线代码编辑器即时演示你的 UI 组件",
+        "feature_test": "稳定的质量保障",
+        "feature_test_description": "Semi 使用了单元测试等多种方法保证组件的稳定和质量，代码覆盖率达到 90%",
+        "feature_SSR": "支持 SSR",
+        "feature_SSR_description": "Semi 组件库支持 SSR 场景，可以在 Next.js 和 Gatsby 等框架中使用",
+        // page four: theme
+        "home.theme": "百变主题",
+        "home.theme.desc": "快速克隆或深度定制，灵活调配符合品牌调性的设计风格",
+        // page five: DSM
+        "semi_dsm": "Semi 设计系统管理",
+        "powerful_theme_editor__real_time_effect__one_click_synchronization_of_design_too_d77f5776bf126331e801d6d6aa0146f2": "强大的主题编辑器，实时生效，设计工具一键同步",
+        // page six: C to D to C
+        "home.pro.title": "让设计与代码同源",
+        "home.pro.desc": "基于 40+ 真实组件代码设计，海量页面模板前端代码一键转",
+        "home.pro.start": "了解更多",
+        "beta": "公测",
+        "example_upload_report": "上传报告",
+        "example_doc_name_zh": "文档中文名",
+        "example_doc_name_zh_desc": "请输入文档中文名",
+        "example_doc_name_en": "文档英文名",
+        "example_doc_name_en_desc": "请输入文档英文名",
+        "example_doc_link": "文档链接",
+        "example_doc_lark_link": "请输入飞书云文档链接",
+        "example_report_tag": "报告标签",
+        "example_business_line": "请选择业务线",
+        "example_result": "结论",
+        "example_result_desc": "请输入结论",
+        "example_remark": "备注",
+        "example_remark_desc": "请输入备注",
+        "example_upload_consist": "连续上传",
+        "example_cancel": "取消",
+        "example_confirm": "确定",
+        // page seven: Web application
+        "application_title": "打造现代 Web 应用",
+        "application_subtitle": "使用 Semi 与现代操作系统、浏览器更贴近的设计语言",
+        "feishu_program": "飞书项目是 2022 年春季飞书发布的单品，支持大型团队将复杂项目拆解流程并可视化，直观呈现协作标准，让成员明晰权责，轻松掌握上下游信息。",
+        "douyin_creator": "抖音创作服务平台是抖音创作者的专属服务平台，支持用户作为创作者和管理机构两种登录方式，提供多种功能助力用户高效运营",
+        "anyweb": "Anyweb 是一个免费的网站构建器，可以轻松创建专业网站。无需编程技能，您可以通过 Anyweb 拖放编辑器快速轻松地设置自定义网站。",
+        "star_river": "炙热星河是抖音旗下一站式音乐人服务平台，在音乐的·浩瀚星河，让有温度的音乐创作人入驻，为优秀音乐作品创造价值。",
+        "cap_cut": "剪映黑罐头连接视频创作产业链中的所有参与者，构建素材库（模板、道具、音效、花字、特效等），提供素材分享、合作交流、商业变现等服务。",
+        // page eight: deep content
+        "content_title": "内容深度解读",
+        "content_subtitle": "了解我们在无障碍、主题定制、自动化方案背后的思考",
+        "content_a11y": "Semi Design 中的无障碍设计",
+        "content_ally_info": "「不支持 Accessibility 的前端开源 UI 组件库，就是灾难」",
+        "content_theme": "深入浅出 Semi 主题化方案",
+        "content_theme_info": "兼容多元的品牌语言和产品形态，避免无意义的重造",
+        // page nine: comment
         "grow_with_users": "与用户共同成长",
-        "pay_attention_to_our_users__join_and_help_us_to_continuously_improve": "重视我们的用户，加入并助力我们不断完善",
-        "access_is_simple_and_easy_to_use;": "接入简单易上手；Semi UI 样式美观，主题统一；API 丰富全面。",
-        "beautiful_style_and_unified_theme;": "样式美观，主题统一；",
+        "grow_with_users_description": "Semi Design 重视我们的用户，加入并助力我们不断完善",
+        "download": "下载",
+        "contributor": "贡献者",
+        "thanks": "特别鸣谢",
+        "access_is_simple_and_easy_to_use": "接入简单易上手；Semi UI 样式美观，主题统一；API 丰富全面。",
+        "beautiful_style_and_unified_theme": "样式美观，主题统一；",
         "rich_and_comprehensive_": "丰富全面。",
         "front_end__bytedance": "前端, 字节跳动",
         "the_components_are_quite_complete__covering_a_wide_range_and_the_overall_style_i_e10d9214b403886d249f00b8c4dbb975": "Semi 组件挺全的，覆盖的比较广泛，整体风格也不错。",
@@ -101,28 +161,39 @@ const appLocale = {
         "easy_to_use__beautiful_style_": "Semi Design使用方便，样式美观。",
         "uniform_style_and_high_fidelity_prototype_facilitate_communication_with_front_en_95d0c0ccece05c104b98ac0dae9fb53b": "Semi 统一的样式，高保真的原型便于与前端同学进行沟通。",
         "the_documentation_is_very_detailed_and_the_details_of_the_components_are_well_th_aadc51a1122c41cf69ebd4b15e83e864": "文档非常详细，对组件的细节思考非常充足。",
-        "powerful_theme_editor__real_time_effect__one_click_synchronization_of_design_too_d77f5776bf126331e801d6d6aa0146f2": "强大的主题编辑器，实时生效，设计工具一键同步",
-        "learn_more": "了解更多",
-        "based_on": "基于",
-        "real_component_code_design__massive_page_template_front_end_code_one_click": "真实组件代码设计，海量页面模板前端代码一键转",
-        "under_construction": "建设中",
-        "home.resource.rd": "研发",
+        // page ten: resource
+        "resource_subtitle": "今天起，在下一个项目中使用 Semi Design",
+        "home.resource.rd": "我是开发者",
         "home.resource.rd.desc": "基于设计语言开发，能够在线调试的 React UI 组件库, 帮助开发者高效构建应用",
         "component_documentation": "组件文档",
-        "home.resource.design": "设计",
+        "home.resource.design": "我是设计师",
         "home.resource.design.desc": "基于 Figma 构建，与组件库代码完全对齐的设计资源，使用 Semi 设计出色的中后台企业应用",
+        
+        "user": "用户",
+        // "smart_translation": "智能翻译",
+        // "live_open_platform": "直播开放平台",
+        // "experience_monitoring": "体验监测",
+        // "content_security": "内容安全",
+       
+       
+        "learn_more": "了解更多",
+        // "based_on": "基于",
+        // "real_component_code_design__massive_page_template_front_end_code_one_click": "真实组件代码设计，海量页面模板前端代码一键转",
+        "under_construction": "建设中",
+        
 
-        "excellent_design_of_mid_background_enterprise_applications": "设计出色的中后台企业应用",
-        "home.theme": "百变主题",
-        "home.theme.desc": "快速克隆或深度定制，灵活调配符合品牌调性的设计风格",
-        "home.pro.title": "Semi Design 设计稿转代码",
-        "home.pro.desc": "基于 40+ 真实组件代码设计，海量页面模板前端代码一键转",
-        "home.pro.start": "快速开始",
-        "beta": "公测",
+        // "excellent_design_of_mid_background_enterprise_applications": "设计出色的中后台企业应用",
+
+        // "home.pro.title": "Semi Design 设计稿转代码",
+        // "home.pro.desc": "基于 40+ 真实组件代码设计，海量页面模板前端代码一键转",
+        // "home.pro.start": "快速开始",
+        // "beta": "公测",
 
         "default": "默认",
+        "design": "设计",
         "feishu_universe_design_theme": "飞书 Universe Design 主题",
         "douyin_creative_service_theme": "抖音创作服务主题",
+        "capCut_theme": "剪映主题",
         "volcengine_theme": "火山引擎主题",
         "system_notification": "系统通知",
         "semi_design_share_2code": "#Semi Design2Code# 技术分享开讲啦！根据活动规则，恭喜 13 位...",
@@ -144,8 +215,7 @@ const appLocale = {
         "sender": "发信人",
         "private_message_content": "私信内容",
         "time_of_dispatch": "发信时间",
-        "theme_store":'主题商店',
-        'semi_dsm':'Semi 设计系统管理'
+        "theme_store": "主题商店",
     },
 };
 

src/sitePages/newHome/components/application/application.jsx

@@ -0,0 +1,100 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { _t } from "src/utils/locale";
+import { Carousel } from '@douyinfe/semi-ui';
+import React, { useRef } from 'react';
+import styles from "./application.module.scss";
+import { AnyWebBigSvg, StarRiverBigSvg, CapCutBigSvg } from '../svg.jsx';
+import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+import classnames from 'classnames';
+
+function Application(props) {
+
+    const classForDarkImage = classnames(styles.showInDark, styles.hideInLight);
+
+    const imgList = [
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/feishuProject-page.png',
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/douyinCreate-page.png',
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/anyweb-page.png',
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/starRive-page.png',
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/capCut-page.png'
+    ];
+
+    const imgInfo = [_t("feishu_program"), _t("douyin_creator"), _t("anyweb"), _t("star_river"), _t("cap_cut")];
+
+    const logoNode = [
+        <div key="lark" className={classnames(styles.group720)}>
+            {/* eslint-disable-next-line */}
+            <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/feishu-logo.png" width={64} height={64} style={{ marginRight: 16 }}/>
+            <p className={styles.larkProject}>飞书项目</p>
+        </div>,
+        <div key='douyinCreator'>
+            {/* eslint-disable-next-line */}
+            <img src="https://lf9-static.semi.design/obj/semi-tos/images/16cf36e0-321a-11ec-b393-ab4adc2e449f.png" className={styles.hideInDark} height={64} width={275}/>   
+            {/* eslint-disable-next-line */}       
+            <img src="https://lf9-static.semi.design/obj/semi-tos/images/a50bd6f0-3474-11ec-b008-15e09471f238.png" className={classForDarkImage} height={64} width={275} />              
+        </div>,
+        <div key="anyWeb" className={classnames(styles.group720)}>
+            <AnyWebBigSvg />
+        </div>,
+        <div key="starRiver" className={classnames(styles.group720)}>
+            <StarRiverBigSvg />
+        </div>,
+        <div key="clip" className={classnames(styles.group720)}>
+            <CapCutBigSvg />
+        </div>  
+    ];
+
+    const carouselRef = useRef(null);
+
+    const clickPrev = () => {
+        carouselRef.current.prev();
+    };
+
+    const clickNext = () => {
+        carouselRef.current.next();
+    };
+    
+    return (
+        <div {...props} className={styles.frame14373}>
+            <div className={styles.titleWrapper}>
+                <p className={styles.title} data-locale={"en-US"}>{_t("application_title")}</p>
+                <p className={styles.subTitle}>{_t("application_subtitle")}</p>
+            </div>
+            <div className={styles.container}>
+                <div className={styles.carouselWrapper}>
+                    <Carousel 
+                        ref={carouselRef}
+                        style={{ width: 1200, height: 948 }}
+                        autoPlay={{ interval: 1500, hoverToPause: true }}
+                        showArrow={false}
+                        showIndicator={false} 
+                        animation='fade'
+                    >
+                        {
+                            imgList.map((src, index) => {
+                                return (
+                                    <div key={index} className={styles.application}>
+                                        <div className={classnames(styles.imgWrapper, styles[`imgBg${index}`])}>
+                                            {/* eslint-disable-next-line */}
+                                            <img src={src} className={styles.img}/>
+                                        </div>
+                                        <div className={styles.imgInfo}>
+                                            <div className={styles.logo}>{logoNode[index]}</div>
+                                            <p className={styles.imgInfoText}>{imgInfo[index]}</p>
+                                        </div>
+                                    </div>
+                                );
+                            })
+                        }
+                    </Carousel>
+                    {/* eslint-disable-next-line */}
+                    <div className={classnames(styles.arrow, styles.leftArrow)} onClick={clickPrev}><IconChevronLeft size="extra-large"/></div>
+                    {/* eslint-disable-next-line */}
+                    <div className={classnames(styles.arrow, styles.rightArrow)} onClick={clickNext}><IconChevronRight size="extra-large"/></div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Application;

src/sitePages/newHome/components/application/application.module.scss

@@ -0,0 +1,164 @@
+.frame14373 {
+    height: 1004px;
+    width: 100%;
+    border-bottom: 1px solid var(--semi-color-border);
+    padding: 100px 0;
+}
+
+.titleWrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-Bottom: 64px;
+}
+
+.title {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 44px;
+    letter-spacing: 0em;
+}
+
+.title_en {
+    font-weight: 700;
+}
+
+.subTitle {
+    margin-top: 16px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 32px;
+}
+
+.application {
+    width: 100%;
+    display: flex !important; 
+    align-items: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.imgWrapper {
+    width: 1200px;
+    height: 680px;
+    border-radius: 24px;
+}
+
+.imgBg0 {
+    background-color: rgba(237, 239, 248, 1);
+}
+
+.imgBg1 {
+    background-color: rgba(var(--semi-pink-0));
+}
+
+.imgBg2 {
+    background-color: rgba(var(--semi-grey-1));
+}
+
+.imgBg3 {
+    background-color: rgba(var(--semi-violet-0));
+}
+
+.imgBg4 {
+    background-color: rgba(var(--semi-amber-1));
+}
+
+.img {
+    width: 1120px;
+    margin: 40px 40px -40px 40px;
+    border-radius: 12px;
+}
+
+.arrow {
+    z-index: 100;
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--semi-color-text-0);;
+    color: var(--semi-color-bg-0);
+    cursor: pointer;
+
+    &:hover {
+        color: var(--semi-color-primary);
+    }
+}
+
+.leftArrow {
+    position: absolute;
+    left: -56px;
+    top: 35%;
+}
+
+.rightArrow {
+    position: absolute;
+    right: -56px;
+    top: 35%;
+}
+
+.imgInfo {
+    margin-top: 104px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.logo {
+    margin-right: 64px;
+}
+
+.group720 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: var(--semi-color-text-0);
+    background-color: var(--semi-color-bg-0);
+}
+
+.larkProject {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 44px;
+}
+
+.imgInfoText {
+    width: 640px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 32px;
+}
+
+.hideInLight {
+    display: none;
+}
+
+body[theme-mode="dark"] {
+
+    .showInDark {
+        display: block;
+    }
+
+    .hideInDark {
+        display: none;
+    }
+}
+
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.carouselWrapper {
+    position: relative;
+}

src/sitePages/newHome/components/banner/banner.jsx

@@ -1,60 +1,36 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { _t } from "src/utils/locale";
-import { Button } from '@douyinfe/semi-ui';
-import { navigate } from 'gatsby-link';
 import React from 'react';
-import { getLocale } from '../../../../utils/locale';
 import styles from "./banner.module.scss";
-import { IconGithubLogo } from '@douyinfe/semi-icons';
+import OperateButton from "../operateButton/operateButton.jsx";
+import classnames from 'classnames';
 
 function Banner() {
-    const goStart = () => {
-        navigate(`/${getLocale()}/start/getting-started`);
-    };
-    const goGithub = () => {
-        window.open('https://github.com/DouyinFE/semi-design');
-    };
+
     return (
-        <div className={styles.frame4565}>
-            <div className={styles.autoWrapper}>
-                <div className={styles.content}>
-                    <div className={styles.headerCopy}>
-                        <p className={styles.text}>
-                            {_t("enterprise_product_design_system", { }, "连接设计师与开发者")}
-                        </p>
-                        <p className={styles.text_63fb91b5}><span className={styles.text_70c95f84}>{_t("home.banner.description")}</span></p>
-                    </div>
-                    <div className={styles.group2835}>
-                        <Button onClick={goStart} size="large" theme="solid" className={styles.extraLarge}>{_t("start_using", { }, "开始使用")}</Button>
-                        <Button
-                            onClick={goGithub} 
-                            size="large"
-                            type={'tertiary'}
-                            theme="borderless"
-                            style={{
-                                border:'1px solid var(--semi-color-border)',
-                                color:'var(--semi-color-text-0)',
-                                marginLeft:'16px'
-                            }}
-                            className={styles.extraLarge} 
-                            icon={<IconGithubLogo size={'large'}/>}
-                        >
-                            GitHub
-                        </Button>
-                    </div>
-                </div>
-                <div className={styles.autoWrapper_4fa00029}>
-                    <div className={styles.background}></div>
-                    <img
-                        src="https://lf9-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/37361.png"
-                        alt="semi application demo"
-                        className={styles.group3736} />
-                    <img
-                        src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/desk-dark.png"
-                        alt="semi application demo"
-                        className={`${styles.group3736dark}`} />
+        <div className={classnames(styles.frame4565, styles.frame4565_pos)}>
+            <div className={classnames(styles.content, styles.content_pos)}>
+                <p className={styles.title} data-locale={"en-US"}>{_t("enterprise_product_design_system")}</p>
+                <p className={styles.subtitle}>{_t("home_banner_description")}</p>
+                <OperateButton />
+                <div className={styles.frameworksWrapper}>
+                    <img className={styles.frameworks} src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/arch.png" alt="semi web arch"/>
+                    <svg width="82" height="48" viewBox="0 0 82 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M15.4876 14.442H27.8676V15.4282H16.6227V22.85H27.1969V23.8362H16.6227V31.9847H27.9964V32.9709H15.4876V14.442V14.442ZM28.9764 14.442H30.292L36.1209 22.5905L42.0787 14.442L50.1822 4.0918L36.8689 23.4469L43.7293 32.9709H42.3622L36.1209 24.3034L29.8538 32.9709H28.5124L35.4244 23.4469L28.9769 14.442H28.9764ZM44.2196 15.4282V14.442H58.3271V15.4282H51.828V32.9705H50.6929V15.4282H44.22H44.2196ZM0 14.442H1.41867L20.9791 43.7767L12.8956 32.9709L1.18622 15.8434L1.13467 32.9709H0V14.442V14.442ZM58.2133 31.6869C57.9809 31.6869 57.8071 31.5069 57.8071 31.2745C57.8071 31.0416 57.9809 30.8616 58.2129 30.8616C58.4476 30.8616 58.6187 31.0416 58.6187 31.2745C58.6187 31.5069 58.4476 31.6869 58.2129 31.6869H58.2133ZM59.328 30.6011H59.9356C59.944 30.9309 60.1844 31.1522 60.5373 31.1522C60.932 31.1522 61.1556 30.9145 61.1556 30.4682V27.6434H61.7738V30.4709C61.7738 31.2745 61.3102 31.7371 60.5427 31.7371C59.8227 31.7371 59.3284 31.2882 59.3284 30.6011H59.328ZM62.5822 30.5656H63.1951C63.2476 30.9447 63.6173 31.1856 64.1502 31.1856C64.6467 31.1856 65.0111 30.9278 65.0111 30.5736C65.0111 30.2691 64.7796 30.086 64.252 29.9616L63.7387 29.8371C63.0187 29.6682 62.6898 29.3189 62.6898 28.7318C62.6898 28.0198 63.2693 27.546 64.1387 27.546C64.9476 27.546 65.5387 28.0198 65.5742 28.6927H64.9724C64.9147 28.3247 64.5947 28.0945 64.1307 28.0945C63.6418 28.0945 63.3164 28.33 63.3164 28.69C63.3164 28.9754 63.5262 29.1389 64.0453 29.2607L64.484 29.3687C65.3009 29.5598 65.6378 29.8922 65.6378 30.4931C65.6378 31.2576 65.0467 31.7371 64.1031 31.7371C63.22 31.7371 62.6262 31.2798 62.5822 30.5651V30.5656Z" fill="currentColor"/>
+                    </svg>
                 </div>
             </div>
+            <div className={classnames(styles.autoWrapper_4fa00029, styles.autoWrapper_4fa00029_pos)}>
+                <div className={styles.background}></div>
+                <img
+                    src="https://lf9-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/37361.png"
+                    alt="semi application demo"
+                    className={styles.group3736} />
+                <img
+                    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/desk-dark.png"
+                    alt="semi application demo"
+                    className={`${styles.group3736dark}`} />
+            </div>
         </div>
     );
 }

src/sitePages/newHome/components/banner/banner.module.scss

@@ -1,138 +1,90 @@
 .frame4565 {
-    padding: 68px 0 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    height: 750px;
+    width: 100%;
     border-bottom: 1px solid var(--semi-color-border);
 }
 
-.autoWrapper {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin: 0 0 64px 160px;
-}
-
 .content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin: 0 120px 0 0;
+    width: 480px;
 }
 
-.headerCopy {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin: 0 0 80px;
+.autoWrapper_4fa00029 {
+    position: relative;
+    width: 721px;
 }
 
-.text {
-    width: 580px;
-    margin: 0 0 32px;
-    font-size: 48px;
-    font-family: Inter, PingFang SC, system,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,wenquanyi micro hei,Hiragino Sans GB,Hiragino Sans GB W3,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
-    color: var(--semi-color-text-0);
-    line-height: normal;
-    font-weight: bold;
-    text-align: left;
-    vertical-align: top;
-
-}
+@media screen and (max-width: 1440px) {
 
-.text_63fb91b5 {
-    width: 596px;
-    font-size: 18px;
-    color: var(--semi-color-text-0);
-    line-height: 32px;
-    font-weight: 400;
-    text-align: left;
-    vertical-align: top;
-}
+    .frame4565_pos {
+        position: relative;
+    }
 
-.text_70c95f84 {
-    font-size: 18px;
-    font-family: Inter,PingFang SC,system,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,wenquanyi micro hei,Hiragino Sans GB,Hiragino Sans GB W3,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
-    color: var(--semi-color-text-0);
-    line-height: 32px;
-    font-weight: 400;
-}
+    .content_pos {
+        position: absolute;
+        top: 172px;
+        left: 160px; 
+    }
 
-.text_8e955bee {
-    font-size: 18px;
-    font-family: Inter;
-    color: var(--semi-color-text-0);
-    line-height: 32px;
-    font-weight: 400;
+    .autoWrapper_4fa00029_pos {
+        position: absolute;
+        top: 89px;
+        left: 760px;
+    }
 }
 
-.group2835 {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
+@media screen and (min-width: 1441px) {
+    
+    .frame4565_pos {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 
-.extraLarge {
-    height: 48px;
-    padding: 12px 24px;
-    border-radius: 6px;
+    .content_pos {
+        flex-shrink: 0;
+        margin-right: 120px;
+    }
 
-    :global(.semi-button-content) {
-        font-size: 16px;
-        line-height: 22px;
+    .autoWrapper_4fa00029_pos {
+        flex-shrink: 0;
     }
+       
 }
 
-.text_333c518e {
-    min-width: 64px;
-    font-size: 16px;
-    font-family: 'PingFang SC';
-    color: var(--semi-color-white);
-    line-height: 22px;
-    font-weight: 600;
+.title {
+    width: 480px;
+    font-size: 48px;
+    color: var(--semi-color-text-0);
     text-align: left;
     vertical-align: top;
+    font-weight: 600;
+    line-height: 67px;
+    letter-spacing: 0em;
 }
 
-.buttonSecondarySolid_4427b030 {
-    border-radius: 6px;
-    border: 1px solid var(--semi-color-border);
-    padding: 11px 23px;
-    background-color: var(--semi-bg-2);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-left: 16px;
-    cursor: pointer;
-
-    &:hover {
-        background-color: var(--semi-color-fill-0);
-    }
-}
-
-.semiIconsGithubLogo {
-    margin: 0 8px 0 0;
+.title_en {
+    font-weight: 700;
 }
 
-
-.text_bff7eaeb {
-    min-width: 52px;
-    margin-left: 9px;
-    font-size: 16px;
-    font-family: Inter;
+.subtitle {
+    width: 480px;
+    font-size: 18px;
     color: var(--semi-color-text-0);
-    line-height: 22px;
-    font-weight: 600;
-    letter-spacing: -.32px;
+    line-height: 32px;
     text-align: left;
     vertical-align: top;
+    font-weight: 400;
+    margin-top: 32px;
 }
 
+.frameworksWrapper {
+    margin-top: 64px;
+    color: var(--semi-color-text-0);
+}
 
-
-.autoWrapper_4fa00029 {
-    position: relative;
-    width: 721px;
+.frameworks {
+    width: 224px;
+    height: 48px;
 }
 
 .background {

src/sitePages/newHome/components/comments/comments.jsx

@@ -1,36 +1,133 @@
 import { _t } from "src/utils/locale";
-import { Button } from '@douyinfe/semi-ui';
-import { navigate } from 'gatsby-link';
-import React from 'react';
-import { getLocale } from '../../../../utils/locale';
-import styles from './comments.module.scss';
-import {IconGithubLogo} from '@douyinfe/semi-icons';
+import React, { useEffect } from 'react';
+import styles from "./comments.module.scss";
+import classnames from 'classnames';
 
-function Comments(props) {
-    const goStart = () => {
-        navigate(`/${getLocale()}/start/getting-started`);
-    }
-    const goGithub = () => {
-        window.open('https://github.com/DouyinFE/semi-design')
+// 将 number 转换为千分位 string
+function getNumString(number) {
+    let str = number.toString();
+    let len = str.length;
+    if (len <= 3) {
+        return str;
+    } else {
+        let n = len % 3;
+        if (n === 0) {
+            return str.match(/\d{3}/g).join(',');
+        } else {
+            return str.slice(0, n) + ',' + str.slice(n).match(/\d{3}/g).join(',');
+        }
     }
+}
+
+// 出现在视口的回调函数，在 s 秒中完成数据从 0 递增到 number
+function numberAnimation(number, s, dom) {
+    var handle, 
+        content = 0;
+    // requestAnimationFrame 回调函数执行次数通常是每秒 60 次
+    // time 为每次执行会调函数需要增加的大小
+    var time = number / (s * 60); 
+    var fn = () => {
+        if (number - time <= content) {
+            // 精度问题，最后一次结果不一定相等
+            cancelAnimationFrame(handle);
+            content = number;
+        } else {
+            content += time;
+            handle = requestAnimationFrame(fn);
+        }
+        dom && (dom.innerHTML = `${getNumString(parseInt(content))}+`);
+    };
+    requestAnimationFrame(fn);
+}
+
+const realNumber = [6200, 400, 3000000, 60];
+
+function Comments(props) {
+    useEffect(()=> {
+        const allElement = ["starNum", "forkNum", "downloadNum", "contributorNum"].map((item) => document.getElementById(item));
+        const observer = new IntersectionObserver(entries => {
+            entries.forEach((item, index) => {
+                if (item.isIntersecting) {
+                    numberAnimation(realNumber[index], 2, allElement[index]);
+                    observer.unobserve(item.target);
+                }
+            });
+        },
+        {
+            // root: document.body,
+            // 距离视口上边距100px， 下边距500px时候触发回调
+            rootMargin: "-100px 0px -500px 0px",  
+        }
+        );
+        allElement.forEach(item => observer.observe(item));
+    }, []);
+    
     return (
-        <div {...props} className={styles.frame4571} style={{marginTop: 120}}>
-            <div className={styles.frame4570}>
-                <p className={styles.text}>{_t("grow_with_users", { }, "与用户共同成长")}</p>
-                <p className={styles.text_cd35ea6d}><span className={styles.text_8e955bee}>Semi Design </span><span className={styles.text_70c95f84}>{_t("pay_attention_to_our_users__join_and_help_us_to_continuously_improve", { }, "重视我们的用户，加入并助力我们不断完善")}</span></p>
-                <div className={styles.group3737}>
-                    <Button onClick={goStart} size="large" theme="solid" className={styles.extraLarge}>{_t("start_using", { }, "开始使用")}</Button>
-                    <div onClick={goGithub} className={styles.buttonSecondarySolid_4427b030}>
-                        <IconGithubLogo size="extra-large" /><p className={styles.text_bff7eaeb}>GitHub</p>
-                    </div>
+        <div {...props} className={styles.frame}>
+            <p className={styles.title} data-locale={"en-US"}>{_t("grow_with_users")}</p>
+            <p className={styles.text_008e1ad6}>{_t("grow_with_users_description")}</p>
+            <div className={styles.data}>
+                <div className={styles.descriptionVerticalL}>
+                    <p className={styles.key}>Stars</p>
+                    <p id={"starNum"} className={styles.value}>0+</p>
                 </div>
+                <div className={styles.descriptionVerticalL}>
+                    <p className={styles.key}>Fork</p>
+                    <p id={"forkNum"} className={styles.value}>0+</p>
+                </div>
+                <div className={styles.descriptionVerticalL}>
+                    <p className={styles.key}>{_t("download")}</p>
+                    <p id={"downloadNum"} className={styles.value}>0+</p>
+                </div>
+                <div className={styles.descriptionVerticalL}>
+                    <p className={styles.key}>{_t("contributor")}</p>
+                    <p id={"contributorNum"} className={styles.value}>0+</p>
+                </div>
+            </div>
+            <p className={styles.text_2}>{_t("thanks")}</p>
+            <div style={{
+                width: 389,
+                height: 41,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                marginTop: '32px',
+            }}>
+                <span key='chromatic'>
+                    <img
+                        src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/chromatic.png"
+                        alt="semi application demo"
+                        className={styles.group3736} 
+                    />
+                    <img
+                        src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/chromatic-dark.png"
+                        alt="semi application demo"
+                        className={`${styles.group3736dark}`} 
+                    />
+                </span>
+                <span key='cypress'>
+                    <img
+                        src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/cypress.png"
+                        alt="semi application demo"
+                        className={styles.group3736} 
+                    />
+                    <img
+                        src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/cypress-dark.png"
+                        alt="semi application demo"
+                        className={`${styles.group3736dark}`} 
+                    />
+                </span>
             </div>
-            <div className={styles.frame4569}>
+            <div className={styles.comment}>
                 <div className={styles.autoWrapper}>
-                    <div className={styles.testimonial1}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1756c0-321a-11ec-adec-e911cea4cf98.png" className={styles.mColorCN} />
-                        <div className={styles.frame4569}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e19c7c0-321a-11ec-b393-ab4adc2e449f.svg" className={styles.quoteMark} />
+                    <div className={styles.testimonial1}>
+                        {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                        <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1756c0-321a-11ec-adec-e911cea4cf98.png" className={styles.mColorCN} />
+                        <div className={styles.frame4569}>
+                            {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                            <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e19c7c0-321a-11ec-b393-ab4adc2e449f.svg" className={styles.quoteMark} />
                             <div className={styles.feedbackPersonDetail}>
-                                <p className={styles.feedback}><span className={styles.feedback_3a905c13}>{_t("access_is_simple_and_easy_to_use;", { }, "接入简单易上手；")}</span></p>
+                                <p className={styles.feedback}><span className={styles.feedback_3a905c13}>{_t("access_is_simple_and_easy_to_use", { }, "接入简单易上手；")}</span></p>
                                 <div className={styles.personDetails}>
                                     <p className={styles.aMengzhou}>@Mengzhou</p>
                                     <p className={styles.text_18f690df}>{_t("front_end__bytedance", { }, "前端, 字节跳动")}</p>
@@ -40,11 +137,15 @@ function Comments(props) {
                     </div>
                     <div className={styles.testimonial1}>
                         <div className={styles.mColorCN_beba3295}>
-                            <div className={styles.autoWrapper_4fa00029}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e17a4e1-321a-11ec-9c23-a9f1bde3758e.svg" className={styles.autoWrapper_4fa00029} />
+                            <div className={styles.autoWrapper_4fa00029}>
+                                {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                                <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e17a4e1-321a-11ec-9c23-a9f1bde3758e.svg" className={styles.autoWrapper_4fa00029} />
                                 <p className={styles.text_b1d6cd66}>C</p>
                             </div>
                         </div>
-                        <div className={styles.frame4569}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e190470-321a-11ec-b008-15e09471f238.svg" className={styles.quoteMark} />
+                        <div className={styles.frame4569}>
+                            {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                            <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e190470-321a-11ec-b008-15e09471f238.svg" className={styles.quoteMark} />
                             <div className={styles.feedbackPersonDetail}>
                                 <p className={styles.feedback}>{_t("the_components_are_quite_complete__covering_a_wide_range_and_the_overall_style_i_e10d9214b403886d249f00b8c4dbb975", { }, "组件挺全的，覆盖的比较广泛，整体风格也不错。")}</p>
                                 <div className={styles.personDetails}>
@@ -56,11 +157,15 @@ function Comments(props) {
                     </div>
                     <div className={styles.testimonial7}>
                         <div className={styles.mColorCN_beba3295}>
-                            <div className={styles.autoWrapper_4fa00029}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1ab220-321a-11ec-ab65-77a60c02a0b5.svg" className={styles.autoWrapper_4fa00029} />
+                            <div className={styles.autoWrapper_4fa00029}>
+                                {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                                <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1ab220-321a-11ec-ab65-77a60c02a0b5.svg" className={styles.autoWrapper_4fa00029} />
                                 <p className={styles.text_11043f46}>M</p>
                             </div>
                         </div>
-                        <div className={styles.frame4569}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1ad930-321a-11ec-ab65-77a60c02a0b5.svg" className={styles.quoteMark} />
+                        <div className={styles.frame4569}>
+                            {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                            <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1ad930-321a-11ec-ab65-77a60c02a0b5.svg" className={styles.quoteMark} />
                             <div className={styles.feedbackPersonDetail}>
                                 <p className={styles.feedback_daa8760d}>{_t("design_resources_are_obviously_helpful_to_improve_efficiency_", { }, "设计资源对提效有明显帮助。")}</p>
                                 <div className={styles.personDetails}>
@@ -74,11 +179,15 @@ function Comments(props) {
                 <div className={styles.autoWrapper}>
                     <div className={styles.testimonial1}>
                         <div className={styles.mColorCN_beba3295}>
-                            <div className={styles.autoWrapper_4fa00029}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e190470-321a-11ec-8b14-8fb159794ae4.svg" className={styles.autoWrapper_4fa00029} />
+                            <div className={styles.autoWrapper_4fa00029}>
+                                {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                                <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e190470-321a-11ec-8b14-8fb159794ae4.svg" className={styles.autoWrapper_4fa00029} />
                                 <p className={styles.text_f8842908}>Y</p>
                             </div>
                         </div>
-                        <div className={styles.frame4569}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1b0040-321a-11ec-ab65-77a60c02a0b5.svg" className={styles.quoteMark} />
+                        <div className={styles.frame4569}>
+                            {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                            <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1b0040-321a-11ec-ab65-77a60c02a0b5.svg" className={styles.quoteMark} />
                             <div className={styles.feedbackPersonDetail}>
                                 <p className={styles.feedback}>{_t("there_are_many_other_business_uses_within_the_company__there_are_more_sample_ref_c5fe7051d5fbf1a547084c91f7c4fd8e", { }, "有很多公司内的其他业务使用，有比较多的样例参考，我们依托")}</p>
                                 <div className={styles.personDetails_53392045}>
@@ -88,8 +197,12 @@ function Comments(props) {
                             </div>
                         </div>
                     </div>
-                    <div className={styles.testimonial1}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e190471-321a-11ec-b008-15e09471f238.png" className={styles.mColorCN} />
-                        <div className={styles.frame4569}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1a15e0-321a-11ec-b393-ab4adc2e449f.svg" className={styles.quoteMark} />
+                    <div className={styles.testimonial1}>
+                        {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                        <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e190471-321a-11ec-b008-15e09471f238.png" className={styles.mColorCN} />
+                        <div className={styles.frame4569}>
+                            {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                            <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1a15e0-321a-11ec-b393-ab4adc2e449f.svg" className={styles.quoteMark} />
                             <div className={styles.feedbackPersonDetail}>
                                 <p className={styles.feedback}>{_t("super_good!_strong_push_", { }, "超级好用！强推。")}</p>
                                 <div className={styles.personDetails}>
@@ -99,8 +212,12 @@ function Comments(props) {
                             </div>
                         </div>
                     </div>
-                    <div className={styles.testimonial7}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e192b80-321a-11ec-8b14-8fb159794ae4.png" className={styles.mColorCN} />
-                        <div className={styles.frame4569}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1979a0-321a-11ec-adec-e911cea4cf98.svg" className={styles.quoteMark} />
+                    <div className={styles.testimonial7}>
+                        {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                        <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e192b80-321a-11ec-8b14-8fb159794ae4.png" className={styles.mColorCN} />
+                        <div className={styles.frame4569}>
+                            {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                            <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1979a0-321a-11ec-adec-e911cea4cf98.svg" className={styles.quoteMark} />
                             <div className={styles.feedbackPersonDetail}>
                                 <p className={styles.feedback}>{_t("as_an_excellent_benchmarking_industry", { }, "作为对标业界优秀的")}</p>
                                 <div className={styles.personDetails}>
@@ -112,8 +229,12 @@ function Comments(props) {
                     </div>
                 </div>
                 <div className={styles.frame4571}>
-                    <div className={styles.testimonial3}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1b2750-321a-11ec-ab65-77a60c02a0b5.png" className={styles.mColorCN} />
-                        <div className={styles.frame4569}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1a3cf0-321a-11ec-b393-ab4adc2e449f.svg" className={styles.quoteMark} />
+                    <div className={styles.testimonial3}>
+                        {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                        <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1b2750-321a-11ec-ab65-77a60c02a0b5.png" className={styles.mColorCN} />
+                        <div className={styles.frame4569}>
+                            {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                            <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1a3cf0-321a-11ec-b393-ab4adc2e449f.svg" className={styles.quoteMark} />
                             <div className={styles.feedbackPersonDetail}>
                                 <p className={styles.feedback}>{_t("easy_to_use__beautiful_style_", { }, "使用方便，样式美观。")}</p>
                                 <div className={styles.personDetails}>
@@ -125,11 +246,15 @@ function Comments(props) {
                     </div>
                     <div className={styles.testimonial1}>
                         <div className={styles.mColorCN_beba3295}>
-                            <div className={styles.autoWrapper_4fa00029}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1b9c80-321a-11ec-ab65-77a60c02a0b5.svg" className={styles.autoWrapper_4fa00029} />
+                            <div className={styles.autoWrapper_4fa00029}>
+                                {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                                <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1b9c80-321a-11ec-ab65-77a60c02a0b5.svg" className={styles.autoWrapper_4fa00029} />
                                 <p className={styles.text_b1d6cd66}>G</p>
                             </div>
                         </div>
-                        <div className={styles.frame4569}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e19a0b0-321a-11ec-9c23-a9f1bde3758e.svg" className={styles.quoteMark} />
+                        <div className={styles.frame4569}>
+                            {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                            <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e19a0b0-321a-11ec-9c23-a9f1bde3758e.svg" className={styles.quoteMark} />
                             <div className={styles.feedbackPersonDetail}>
                                 <p className={styles.feedback}>{_t("uniform_style_and_high_fidelity_prototype_facilitate_communication_with_front_en_95d0c0ccece05c104b98ac0dae9fb53b", { }, "统一的样式，高保真的原型便于与前端同学进行沟通。")}</p>
                                 <div className={styles.personDetails}>
@@ -139,8 +264,12 @@ function Comments(props) {
                             </div>
                         </div>
                     </div>
-                    <div className={styles.testimonial7}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1979a1-321a-11ec-adec-e911cea4cf98.png" className={styles.mColorCN} />
-                        <div className={styles.frame4569}><img src="https://lf9-static.semi.design/obj/semi-tos/images/7e19c7c0-321a-11ec-9c23-a9f1bde3758e.svg" className={styles.quoteMark} />
+                    <div className={styles.testimonial7}>
+                        {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                        <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e1979a1-321a-11ec-adec-e911cea4cf98.png" className={styles.mColorCN} />
+                        <div className={styles.frame4569}>
+                            {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                            <img src="https://lf9-static.semi.design/obj/semi-tos/images/7e19c7c0-321a-11ec-9c23-a9f1bde3758e.svg" className={styles.quoteMark} />
                             <div className={styles.feedbackPersonDetail}>
                                 <p className={styles.feedback_daa8760d}>{_t("the_documentation_is_very_detailed_and_the_details_of_the_components_are_well_th_aadc51a1122c41cf69ebd4b15e83e864", { }, "文档非常详细，对组件的细节思考非常充足。")}</p>
                                 <div className={styles.personDetails}>

src/sitePages/newHome/components/comments/comments.module.scss

@@ -1,104 +1,96 @@
-.frame4571 {
+.frame {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-bottom: 120px;
+    overflow: hidden;
+    padding: 120px 120px 0;
+}
+
+.text_008e1ad6 {
+    font-size: 18px;
+    color: var(--semi-color-text-0);
+    line-height: 32px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 400;
+    margin-top: 16px;
 }
 
-.frame4570 {
+.data {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: 0 0 72px;
+    align-items: flex-start;
+    column-gap: 120px;
+    margin-top: 48px;
 }
 
-.text {
-    min-width: 321px;
-    margin: 0 0 16px;
-    font-size: 32px;
-    font-family: PingFang SC;
-    color: var(--semi-color-text-0);
-    line-height: 44px;
-    font-weight: bold;
-    text-align: center;
-    vertical-align: middle;
+.descriptionVerticalL {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow: hidden;
+    width: 180px;
 }
 
-.text_cd35ea6d {
-    min-width: 453px;
-    margin: 0 0 32px;
-    font-size: 18px;
-    color: var(--semi-color-text-0);
-    line-height: 32px;
-    font-weight: 400;
+.key {
+    flex-shrink: 0;
+    font-family: "Inter","PingFang SC";
+    font-size: 14px;
+    color: var(--semi-color-text-2);
+    line-height: 20px;
     text-align: left;
     vertical-align: top;
+    font-weight: 400;
 }
 
-.text_8e955bee {
-    font-size: 18px;
-    font-family: Inter;
-    color: var(--semi-color-text-0);
-    line-height: 32px;
-    font-weight: 400;
+.value {
+    flex-shrink: 0;
+    font-family: "Inter";
+    font-size: 32px;
+    color: rgba(var(--semi-violet-5), 1);
+    line-height: 44px;
+    letter-spacing: -1.28px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 600;
 }
 
-.text_70c95f84 {
+.text_2 {
+    margin-top: 64px;
     font-size: 18px;
-    font-family: PingFang SC;
-    color: var(--semi-color-text-0);
-    line-height: 32px;
     font-weight: 400;
+    line-height: 32px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: var(--semi-color-text-0);
 }
 
-.group3737 {
+.frame4571 {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     align-items: center;
+    margin-bottom: 120px;
 }
 
-.extraLarge {
-    height: 48px;
-    padding: 12px 24px;
-    border-radius: 6px;
-    margin-right: 16px;
+.title {
+    min-width: 321px;
+    font-size: 32px;
+    color: var(--semi-color-text-0);
+    line-height: 44px;
+    font-weight: 600;
+    text-align: center;
+    vertical-align: middle;
+}
 
-    :global(.semi-button-content) {
-        font-size: 16px;
-        line-height: 22px;
-    }
+.title_en {
+    font-weight: 700;
 }
 
-.buttonSecondarySolid_4427b030 {
-    border-radius: 6px;
-    border: 1px solid var(--semi-color-border);
-    padding: 11px 23px;
-    background-color: var(--semi-bg-2);
+.comment {
     display: flex;
     flex-direction: row;
-    align-items: center;
-    cursor: pointer;
-
-    &:hover {
-        background-color: var(--semi-color-fill-0);
-    }
-}
-
-.semiIconsGithubLogo {
-    margin: 0 8px 0 0;
-}
-
-.text_bff7eaeb {
-    min-width: 52px;
-    margin-left: 9px;
-    font-size: 16px;
-    font-family: Inter;
-    color: var(--semi-color-text-0);
-    line-height: 22px;
-    font-weight: 600;
-    letter-spacing: -.32px;
-    text-align: left;
-    vertical-align: top;
+    align-items: flex-start;
+    margin-top: 80px;
 }
 
 .frame4569 {
@@ -154,19 +146,11 @@
 
 .feedback_3a905c13 {
     font-size: 16px;
-    font-family: PingFang SC;
     color: var(--semi-color-text-0);
     line-height: 24px;
     font-weight: 400;
 }
 
-.feedback_c8d9f421 {
-    font-size: 16px;
-    font-family: Inter;
-    color: var(--semi-color-text-0);
-    line-height: 24px;
-    font-weight: 400;
-}
 
 .personDetails {
     display: flex;
@@ -178,7 +162,7 @@
 .aMengzhou {
     min-width: 113px;
     font-size: 18px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-text-0);
     line-height: 28px;
     font-weight: 700;
@@ -189,7 +173,7 @@
 .text_18f690df {
     min-width: 92px;
     font-size: 14px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-disabled-text);
     line-height: 24px;
     font-weight: 500;
@@ -214,7 +198,7 @@
     top: 12px;
     min-width: 14px;
     font-size: 18px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-white);
     line-height: 24px;
     font-weight: 600;
@@ -226,7 +210,7 @@
 .aChangyi {
     min-width: 92px;
     font-size: 18px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-text-0);
     line-height: 28px;
     font-weight: 700;
@@ -250,7 +234,7 @@
     top: 12px;
     min-width: 17px;
     font-size: 18px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-white);
     line-height: 24px;
     font-weight: 600;
@@ -274,7 +258,7 @@
 .aMiaomiao {
     min-width: 105px;
     font-size: 18px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-text-0);
     line-height: 28px;
     font-weight: 700;
@@ -288,7 +272,7 @@
     top: 12px;
     min-width: 13px;
     font-size: 18px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-white);
     line-height: 24px;
     font-weight: 600;
@@ -307,7 +291,7 @@
 .aYinfeng {
     min-width: 88px;
     font-size: 18px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-text-0);
     line-height: 28px;
     font-weight: 700;
@@ -318,7 +302,7 @@
 .text_05913fb1 {
     min-width: 120px;
     font-size: 14px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-disabled-text);
     line-height: 24px;
     font-weight: 500;
@@ -329,7 +313,7 @@
 .aJingyu {
     min-width: 79px;
     font-size: 18px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-text-0);
     line-height: 28px;
     font-weight: 700;
@@ -351,7 +335,7 @@
 .aYucang {
     min-width: 86px;
     font-size: 18px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-text-0);
     line-height: 28px;
     font-weight: 700;
@@ -362,7 +346,7 @@
 .aGuangye {
     min-width: 98px;
     font-size: 18px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-text-0);
     line-height: 28px;
     font-weight: 700;
@@ -373,10 +357,31 @@
 .aBaifu {
     min-width: 64px;
     font-size: 18px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-text-0);
     line-height: 28px;
     font-weight: 700;
     text-align: left;
     vertical-align: top;
 }
+
+.group3736 {
+    position: relative;
+    height: 41px;
+}
+
+.group3736dark {
+    display: none;
+    position: relative;
+    height: 41px;
+}
+
+body[theme-mode='dark'] {
+    .group3736 {
+        display: none;
+    }
+
+    .group3736dark {
+        display: inline;
+    }
+}

src/sitePages/newHome/components/deepContent/deepContent.jsx

@@ -0,0 +1,47 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { _t, getLocale } from "../../../../utils/locale";
+import { navigate } from 'gatsby-link';
+import React from 'react';
+import styles from "./deepContent.module.scss";
+import classnames from 'classnames';
+
+function DeepContent(props) {
+
+    const goA11y = () => {
+        const local = getLocale();
+        if (local === 'zh-CN') {
+            window.open("https://mp.weixin.qq.com/s/O3js-SZDNPEOjGxh-aAkbw");
+        } else {
+            window.open("https://medium.com/@semi-design/accessibility-1808f1ed34d2");
+        }
+    };
+
+    const goTheme = () => {
+        window.open('https://mp.weixin.qq.com/s/noHoWRuA25PgqFNcurhIUA');
+    };
+
+    return (
+        <div {...props} className={styles.frame}>
+            <p className={styles.title} data-locale={"en-US"}>{_t("content_title")}</p>
+            <p className={styles.subtitle}>{_t("content_subtitle")}</p>
+            <div className={styles.autoWrapper}>
+                <div className={styles.frame1312316425} onClick={goA11y}> 
+                    <img className={styles.frame1312316426} src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/a11y-detail.png" />
+                    <div className={styles.details}>
+                        <p className={styles.headline}> {_t("content_a11y")} </p>
+                        <p className={styles.description}>{_t("content_ally_info")}</p>
+                    </div>
+                </div>
+                <div className={styles.frame1312316425} onClick={goTheme}>
+                    <img className={styles.frame1312316426} src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dsm-detail.png" />
+                    <div className={styles.details}>
+                        <p className={styles.headline}>{_t("content_theme")}</p>
+                        <p className={styles.description}>{_t("content_theme_info")}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default DeepContent;

src/sitePages/newHome/components/deepContent/deepContent.module.scss

@@ -0,0 +1,92 @@
+.frame {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+    padding: 120px 120px 141px;
+}
+
+.title {
+    font-size: 32px;
+    color: var(--semi-color-text-0);
+    line-height: 44px;
+    letter-spacing: -1.28px;
+    text-align: center;
+    vertical-align: middle;
+    font-weight: 600;
+    letter-spacing: 0em;
+}
+
+.title_en {
+    font-weight: 700;
+}
+
+.subtitle {
+    font-size: 18px;
+    color: var(--semi-color-text-0);
+    line-height: 32px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 400;
+    margin-top: 16px;
+}
+
+.autoWrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 1200px;
+    height: 495px;
+    margin: 48px 0px 0px;
+
+    :hover {
+        .headline {
+            color: var(--semi-color-primary);
+        }
+    }
+}
+
+.frame1312316425 {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 29px;
+    cursor: pointer;
+}
+
+.frame1312316426 {
+    flex-shrink: 0;
+    width: 588px;
+    height: 398px;
+}
+
+.details {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 12px;
+    overflow: hidden;
+}
+
+.headline {
+    flex-shrink: 0;
+    font-size: 20px;
+    color: var(--semi-color-text-0);
+    line-height: 28px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 600;
+}
+
+.description {
+    flex-shrink: 0;
+    min-width: 525px;
+    font-size: 20px;
+    color: var(--semi-color-text-2);
+    line-height: 28px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 400;
+}

src/sitePages/newHome/components/dsm/dsm.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 import styles from './dsm.module.scss';
 
 function Dsm(props) {
+
     const goDsm = () => {
         location.href = DSM_URL?DSM_URL:"https://semi.design/dsm/landing";
     };
@@ -14,20 +15,21 @@ function Dsm(props) {
         <div {...props} className={styles.frame14293}>
             <div className={styles.frame14291}>
                 <div className={styles.autoWrapper}>
-
-                    <p className={styles.semiDSM}>{_t('semi_dsm',{},'Semi 设计系统管理')}</p>
+                    <p className={styles.semiDSM} data-locale={"en-US"}>{_t('semi_dsm', {}, 'Semi 设计系统管理')}</p>
                 </div>
                 <p className={styles.text_86d8f999}>{_t("powerful_theme_editor__real_time_effect__one_click_synchronization_of_design_too_d77f5776bf126331e801d6d6aa0146f2", { }, "强大的主题编辑器，实时生效，设计工具一键同步")}</p>
-                <div style={{display:'flex'}}>
-                <a onClick={goDsm} className={styles.buttonSecondarySolid} style={{marginRight:'20px'}} href='/dsm'>
-                    <p className={styles.text_8f6c2dc2}>{_t("learn_more", { }, "了解更多")}</p>
-                </a>
-                <a onClick={goThemeStore} className={styles.buttonSecondarySolid} href="/dsm_store">
-                    <p className={styles.text_8f6c2dc2} style={{color:'var(--semi-color-primary)'}}>{_t("theme_store", { }, "主题商店")}</p>
-                </a>
+                <div style={{ display: 'flex' }}>
+                    <a onClick={goDsm} className={styles.buttonSecondarySolid} style={{ marginRight: '20px' }} href='/dsm'>
+                        <p className={styles.text_8f6c2dc2}>{_t("learn_more", { }, "了解更多")}</p>
+                    </a>
+                    <a onClick={goThemeStore} className={styles.buttonSecondarySolid} href="/dsm_store">
+                        <p className={styles.text_8f6c2dc2} style={{ color: 'var(--semi-color-primary)' }}>{_t("theme_store", { }, "主题商店")}</p>
+                    </a>
                 </div>
             </div>
-            <video autoPlay loop muted src="https://lf9-static.semi.design/obj/semi-tos/images/homepage-dsm.mp4" type="video/mp4" className={styles.frame4160}></video>
+            <div style={{ width: 1280, height: 750, overflow: 'hidden', }}>
+                <video autoPlay loop muted src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dsm.mp4" type="video/mp4" className={styles.frame4160}></video>
+            </div>
         </div>
     );
 }

src/sitePages/newHome/components/dsm/dsm.module.scss

@@ -32,7 +32,7 @@
 .text {
     min-width: 41px;
     font-size: 16px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-white);
     line-height: 22px;
     font-weight: 600;
@@ -45,20 +45,24 @@
     position: relative;
     width: 321px;
     font-size: 32px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-text-0);
     line-height: 44px;
     font-weight: 700;
-    letter-spacing: -1.28px;
+    letter-spacing: 0em;
     text-align: center;
     vertical-align: middle;
 }
 
+.title_en {
+    font-weight: 700;
+}
+
 .text_86d8f999 {
     min-width: 396px;
     margin: 0 0 32px;
     font-size: 18px;
-    font-family: PingFang SC;
+    font-family: "PingFang SC";
     color: var(--semi-color-text-0);
     line-height: 32px;
     font-weight: 400;
@@ -84,7 +88,7 @@
 .text_8f6c2dc2 {
     min-width: 64px;
     font-size: 16px;
-    font-family: PingFang SC;
+    font-family: "PingFang SC";
     color: var(--semi-color-text-0);
     line-height: 22px;
     font-weight: 600;
@@ -95,4 +99,5 @@
 .frame4160 {
     width: 1282px;
     height: 783px;
+    margin-top: -50px;
 }

src/sitePages/newHome/components/feature/feature.jsx

@@ -0,0 +1,76 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { _t } from "../../../../utils/locale";
+import React from 'react';
+import styles from "./feature.module.scss";
+
+function Feature(props) {
+
+    return (
+        <div {...props} className={styles.frame14370}>
+            <p className={styles.title} data-locale={"en-US"}>{_t("feature_title")}</p>
+            <p className={styles.subtitle}>{_t("feature_subtitle")}</p>
+            <div className={styles.featuresList}>
+                <div className={styles.row1}>
+                    <div className={styles.iconDetails}>
+                        <img className={styles.icon} src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/fa-icon.png" />
+                        <div className={styles.details}>
+                            <p className={styles.headline}>{_t("feature_FA")}</p>
+                            <p className={styles.description}>
+                                {_t("feature_FA_description")}
+                            </p>
+                        </div>
+                    </div>
+                    <div className={styles.iconDetails}>
+                        <img className={styles.icon} src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/a11y-icon.png" />
+                        <div className={styles.details}>
+                            <p className={styles.headline}>{_t("feature_a11y")}</p>
+                            <p className={styles.description}>
+                                {_t("feature_a11y_description")}
+                            </p>
+                        </div>
+                    </div>
+                    <div className={styles.iconDetails}>
+                        <img className={styles.icon} src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/language-icon.png" />
+                        <div className={styles.details}>
+                            <p className={styles.headline}>{_t("feature_language")}</p>
+                            <p className={styles.description}>
+                                {_t("feature_language_description")}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div className={styles.row1}>
+                    <div className={styles.iconDetails}>
+                        <img className={styles.icon} src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/livecode-icon.png" />
+                        <div className={styles.details}>
+                            <p className={styles.headline}>{_t("feature_live_code")}</p> 
+                            <p className={styles.description}>
+                                {_t("feature_live_code_description")}
+                            </p>
+                        </div>
+                    </div>
+                    <div className={styles.iconDetails}>
+                        <img className={styles.table} src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/ssr-icon.png" />
+                        <div className={styles.details}>
+                            <p className={styles.headline}>{_t("feature_test")}</p>
+                            <p className={styles.description}>
+                                {_t("feature_test_description")}
+                            </p>
+                        </div>
+                    </div>
+                    <div className={styles.iconDetails}>
+                        <img className={styles.table} src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/a11y-icon.png" />
+                        <div className={styles.details}>
+                            <p className={styles.headline}>{_t("feature_SSR")}</p>
+                            <p className={styles.description}>
+                                {_t("feature_SSR_description")}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Feature;

src/sitePages/newHome/components/feature/feature.module.scss

@@ -0,0 +1,107 @@
+.frame14370 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+    padding: 120px;
+    border-bottom: 1px solid var(--semi-color-border);
+}
+
+.title {
+    font-size: 32px;
+    color: var(--semi-color-text-0);
+    line-height: 44px;
+    text-align: center;
+    vertical-align: middle;
+    font-weight: 600;
+    letter-spacing: 0em;
+    width: fit-content;
+}
+
+.title_en {
+    font-weight: 700;
+}
+
+.subtitle {
+    font-size: 18px;
+    color: var(--semi-color-text-0);
+    line-height: 32px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 400;
+    margin-top: 16px;
+}
+
+.featuresList {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 30px;
+    overflow: hidden;
+    margin-top: 64px;
+}
+
+.row1 {
+    flex-shrink: 0;
+    display: flex;
+    align-items: stretch;
+    column-gap: 30px;
+    overflow: hidden;
+}
+
+.iconDetails {
+    width: 332px;
+    padding: 39px 23px;
+    background: var(--semi-color-bg-0);
+    border-radius: 8px;
+    border: 1px solid var(--semi-color-border);
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 64px;
+    overflow: hidden;
+}
+
+.icon {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    overflow: hidden;
+}
+
+.details {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 12px;
+    overflow: hidden;
+}
+
+.headline {
+    flex-shrink: 0;
+    font-size: 20px;
+    color: var(--semi-color-text-0);
+    line-height: 28px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 600;
+}
+
+.description {
+    flex-shrink: 0;
+    font-size: 18px;
+    color:var(--semi-color-text-2);
+    line-height: 32px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 400;
+}
+
+.table {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    overflow: hidden;
+}

src/sitePages/newHome/components/operateButton/operateButton.jsx

@@ -0,0 +1,39 @@
+import { _t } from "src/utils/locale";
+import { Button } from '@douyinfe/semi-ui';
+import { navigate } from 'gatsby-link';
+import React from 'react';
+import { getLocale } from '../../../../utils/locale';
+import styles from "./operateButton.module.scss";
+import { IconGithubLogo } from '@douyinfe/semi-icons';
+
+function OperateButton() {
+    const goStart = () => {
+        navigate(`/${getLocale()}/start/getting-started`);
+    };
+    const goGithub = () => {
+        window.open('https://github.com/DouyinFE/semi-design');
+    };
+    return (<div className={styles.group2835}>
+        <Button onClick={goStart} size="large" theme="solid" className={styles.extraLarge}>{_t("start_using", { }, "开始使用")}</Button>
+        <Button
+            onClick={goGithub} 
+            size="large"
+            type={"tertiary"}
+            theme="borderless"
+            style={{
+                border: "1px solid var(--semi-color-border)",
+                color: "var(--semi-color-text-0)",
+                marginLeft: "16px"
+            }}
+            className={styles.extraLarge} 
+            icon={<IconGithubLogo size={'large'}/>}
+        >
+            <span style={{ display: 'flex' }}>
+                GitHub
+                <span className={styles.badge}>6.2k</span>
+            </span>
+        </Button>
+    </div>);
+}
+
+export default OperateButton;

src/sitePages/newHome/components/operateButton/operateButton.module.scss

@@ -0,0 +1,36 @@
+.group2835 {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 48px;
+    margin-top: 80px;
+}
+
+.extraLarge {
+    height: 48px;
+    padding: 12px 24px;
+    border-radius: 6px;
+
+    :global(.semi-button-content) {
+        font-size: 16px;
+        line-height: 22px;
+    }
+}
+
+.badge {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--semi-color-text-0);
+    border-radius: 16px;
+    padding: 2px 6px;
+    border: 1px solid var(--semi-color-bg-1);
+    margin-left: 8px;
+    font-size: 12px;
+    line-height: 16px;
+    text-align: left;
+    font-weight: 600;
+    color: var(--semi-color-bg-0);
+}

src/sitePages/newHome/components/pro/d2cApplication.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Input, Select, Checkbox, Button } from '@douyinfe/semi-ui';
+import cls from 'classnames';
+import { _t } from 'src/utils/locale';
+import { useIntl } from 'react-intl';
+
+import styles from './index.module.scss';
+
+const Component = () => {
+    const intl = useIntl();
+    return (
+        <div className={cls(styles.chromeStandart, 'semi-always-light')}>
+            <div className={styles.appContainer}></div>
+            <div className={styles.modalHeader}>
+                <p className={styles.title}>{_t('example_upload_report')}</p>
+            </div>
+            <div className={styles.contentContainer}>
+                <div className={styles.formField3frEnabled}>
+                    <div className={styles.label}>
+                        <p className={styles.text}>{_t('example_doc_name_zh')}</p>
+                        <p className={styles.required}>*</p>
+                    </div>
+                    <Input placeholder={intl.formatMessage({ id: 'example_doc_name_zh_desc' })}/>
+                </div>
+                <div className={styles.formField3frEnabled_d6a65c7a}>
+                    <div className={styles.label}>
+                        <p className={styles.text}>{_t('example_doc_name_en')}</p>
+                    </div>
+                    <Input placeholder={intl.formatMessage({ id: 'example_doc_name_en_desc' })} />
+                </div>
+                <div className={styles.formField3frEnabled}>
+                    <div className={styles.label}>
+                        <p className={styles.text_d5545fb6}>{_t('example_doc_link')}</p>
+                        <p className={styles.required}>*</p>
+                    </div>
+                    <Input placeholder={intl.formatMessage({ id: 'example_doc_lark_link' })} />
+                    <div className={styles.helperText}></div>
+                </div>
+                <div className={styles.formField}>
+                    <div className={styles.autoLayoutHorizontal}>
+                        <p className={styles.text_d5545fb6}>{_t('example_report_tag')}</p>
+                    </div>
+                    <Select
+                        className={styles.select}
+                        multiple
+                        defaultValue={['lan', 'john']}
+                        placeholder={intl.formatMessage({ id: 'example_business_line' })}
+                    >
+                        <Select.Option value="lan">兰超然</Select.Option>
+                        <Select.Option value="john">John Smitch</Select.Option>
+                    </Select>
+                </div>
+                <div className={styles.formField3frEnabled}>
+                    <div className={styles.label}>
+                        <p className={styles.text_d6dd221e}>{_t('example_result')}</p>
+                    </div>
+                    <Input placeholder={intl.formatMessage({ id: 'example_result_desc' })} />
+                </div>
+                <div className={styles.formField3frEnabled}>
+                    <div className={styles.label}>
+                        <p className={styles.text_d6dd221e}>{_t('example_remark')}</p>
+                    </div>
+                    <Input placeholder={intl.formatMessage({ id: 'example_remark_desc' })} />
+                </div>
+            </div>
+            <div className={styles.modalFooter}>
+                <Checkbox>{_t('example_upload_consist')}</Checkbox>
+                <div className={styles.actions}>
+                    <Button type="tertiary" theme="light">{_t('example_cancel')}</Button>
+                    <Button type="secondary" theme='solid'>{_t('example_confirm')}</Button>
+                </div>
+            </div>
+            {/* eslint-disable-next-line */}
+            <img
+                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/tab-head.png"
+                className={styles.tabBar}
+            />
+        </div>
+    );
+};
+
+export default Component;

src/sitePages/newHome/components/pro/index.module.scss

@@ -0,0 +1,461 @@
+.chromeStandart {
+    box-sizing: border-box;
+    width: 757px;
+    height: 616px;
+    position: relative;
+    border-radius: 12px 12px 0px 0px;
+}
+
+.appContainer {
+    box-sizing: content-box;
+    width: 757px;
+    height: 616px;
+    position: absolute;
+    background: #ffffffff;
+    color: #ffffffff;
+    box-shadow: 0px 8px 40px 0px #272f591f;
+    border-style: solid;
+    border-color: #1c1f2314;
+    border-radius: 12px;
+}
+
+.modalHeader {
+    box-sizing: border-box;
+    width: 684px;
+    height: 72px;
+    position: absolute;
+    left: 36px;
+    top: 26px;
+    display: flex;
+    align-items: flex-start;
+    overflow: hidden;
+    padding: 24px 588px 24px 24px;
+}
+
+.title {
+    min-width: 72px;
+    color: #1c1f23ff;
+    font-family: PingFang SC;
+    font-size: 18px;
+    line-height: 24px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.contentContainer {
+    box-sizing: content-box;
+    width: 636px;
+    position: absolute;
+    left: 36px;
+    top: 98px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 24px;
+    padding: 0px 24px;
+}
+
+.formField3frEnabled {
+    box-sizing: content-box;
+    width: 636px;
+    height: 56px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 4px;
+}
+
+.label {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    column-gap: 4px;
+    overflow: hidden;
+}
+
+.text {
+    min-width: 70px;
+    flex-shrink: 0;
+    color: #1c1f23ff;
+    font-family: PingFang SC;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 600;
+}
+
+.required {
+    min-width: 8px;
+    flex-shrink: 0;
+    color: #f93920ff;
+    font-family: PingFang SC;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+    vertical-align: middle;
+    font-weight: 600;
+}
+
+.input {
+    box-sizing: border-box;
+    width: 636px;
+    height: 32px;
+    flex-shrink: 0;
+    background: #2e32380d;
+    color: #2e32380d;
+    display: flex;
+    align-items: flex-start;
+    overflow: hidden;
+    padding: 6px 512px 6px 12px;
+    border-radius: 3px;
+}
+
+.content {
+    display: flex;
+    align-items: flex-start;
+    column-gap: 8px;
+}
+
+.value {
+    min-width: 112px;
+    flex-shrink: 0;
+    color: #1c1f2399;
+    font-family: PingFang SC;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 400;
+}
+
+.helperText {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 10px;
+}
+
+.formField3frEnabled_d6a65c7a {
+    box-sizing: content-box;
+    width: 636px;
+    height: 56px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 4px;
+    border-radius: 3px;
+}
+
+.text_d5545fb6 {
+    min-width: 56px;
+    flex-shrink: 0;
+    color: #1c1f23ff;
+    font-family: PingFang SC;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 600;
+}
+
+.input_937c42af {
+    box-sizing: border-box;
+    width: 636px;
+    height: 32px;
+    flex-shrink: 0;
+    background: #2e32380d;
+    color: #2e32380d;
+    display: flex;
+    align-items: flex-start;
+    overflow: hidden;
+    padding: 6px 484px 6px 12px;
+    border-radius: 3px;
+}
+
+.value_d4fd31be {
+    min-width: 140px;
+    flex-shrink: 0;
+    color: #1c1f2399;
+    font-family: PingFang SC;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 400;
+}
+
+.formField {
+    box-sizing: content-box;
+    width: 402px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 4px;
+}
+
+.autoLayoutHorizontal {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    column-gap: 4px;
+}
+
+.frame {
+    box-sizing: border-box;
+    height: 32px;
+    align-self: stretch;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.rectangle {
+    box-sizing: content-box;
+    width: 402px;
+    height: 32px;
+    position: absolute;
+    background: #2e32380d;
+    color: #2e32380d;
+    border-radius: 3px;
+}
+
+.autoLayoutHorizontal_648efbe3 {
+    box-sizing: content-box;
+    height: 20px;
+    position: absolute;
+    left: 378px;
+    top: 6px;
+    display: flex;
+    align-items: center;
+}
+
+.autoLayoutHorizontal_0f741f37 {
+    position: absolute;
+    left: 8px;
+    top: 6px;
+    display: flex;
+    align-items: flex-start;
+    column-gap: 8px;
+}
+
+.tagWhite {
+    flex-shrink: 0;
+    background: #ffffffff;
+    color: #ffffffff;
+    display: flex;
+    align-items: flex-start;
+    border-style: dashed;
+    padding: 2px 4px;
+    border-color: #1c1f2314;
+    border-radius: 3px;
+}
+
+.autoLayoutHorizontal_6e970f31 {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    column-gap: 4px;
+    padding: 0px 4px;
+}
+
+.content_fb38d9dc {
+    min-width: 36px;
+    flex-shrink: 0;
+    color: #1c1f23ff;
+    font-family: PingFang SC;
+    font-size: 12px;
+    line-height: 16px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 400;
+}
+
+.close {
+    box-sizing: content-box;
+    width: 12px;
+    height: 12px;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+
+.content_903cc813 {
+    min-width: 64px;
+    flex-shrink: 0;
+    color: #1c1f23ff;
+    font-family: Inter;
+    font-size: 12px;
+    line-height: 16px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 400;
+}
+
+.text_d6dd221e {
+    min-width: 28px;
+    flex-shrink: 0;
+    color: #1c1f23ff;
+    font-family: PingFang SC;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 600;
+}
+
+.input_cb9ae1f3 {
+    box-sizing: border-box;
+    width: 636px;
+    height: 32px;
+    flex-shrink: 0;
+    background: #2e32380d;
+    color: #2e32380d;
+    display: flex;
+    align-items: flex-start;
+    overflow: hidden;
+    padding: 6px 554px 6px 12px;
+    border-radius: 3px;
+}
+
+.value_099b4ce1 {
+    min-width: 70px;
+    flex-shrink: 0;
+    color: #1c1f2399;
+    font-family: PingFang SC;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 400;
+}
+
+.modalFooter {
+    box-sizing: border-box;
+    width: 684px;
+    height: 80px;
+    position: absolute;
+    left: 36px;
+    bottom: -18px;
+    display: flex;
+    align-items: flex-start;
+    padding: 24px;
+}
+
+.checkbox {
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+    overflow: hidden;
+    margin: 6px 0px 0px;
+}
+
+.checkboxUnchecked {
+    box-sizing: border-box;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: flex-start;
+}
+
+.rectangle_ccc4dcea {
+    box-sizing: content-box;
+    width: 16px;
+    height: 16px;
+    background: #ffffffff;
+    color: #ffffffff;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #1c1f2359;
+    border-radius: 3px;
+}
+
+.text_0d8642be {
+    min-width: 56px;
+    flex-shrink: 0;
+    color: #1c1f23ff;
+    font-family: PingFang SC;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 400;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    column-gap: 12px;
+    margin: 0px 0px 0px 440px;
+}
+
+.buttonTertiaryLight {
+    flex-shrink: 0;
+    background: #2e32380d;
+    color: #2e32380d;
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+    overflow: hidden;
+    padding: 6px 12px;
+    border-radius: 3px;
+}
+
+.text_285c38e5 {
+    min-width: 28px;
+    flex-shrink: 0;
+    color: #6b7075ff;
+    font-family: PingFang SC;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 600;
+}
+
+.buttonSecondarySolid {
+    flex-shrink: 0;
+    background: #0095eeff;
+    color: #0095eeff;
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+    overflow: hidden;
+    padding: 6px 12px;
+    border-radius: 3px;
+}
+
+.text_4ac5204f {
+    min-width: 28px;
+    flex-shrink: 0;
+    color: #ffffffff;
+    font-family: PingFang SC;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 600;
+}
+
+.tabBar {
+    box-sizing: content-box;
+    width: 757px;
+    height: 26px;
+    position: absolute;
+    background: #ffffffff;
+    color: #ffffffff;
+    border-radius: 12px 12px 0px 0px;
+}
+
+.__d2c__placeholder {
+    font-size: 12px;
+}
+
+.select {
+    width: 402px;
+}

src/sitePages/newHome/components/pro/pro.jsx

@@ -4,8 +4,11 @@ import { Button, Tag } from '@douyinfe/semi-ui';
 import styles from './pro.module.scss';
 import { navigate } from 'gatsby-link';
 import { getLocale } from '../../../../utils/locale';
+import classnames from 'classnames';
+import Component from './d2cApplication.jsx';
 
 function Pro(props) {
+
     const goD2CStart = () => {
         navigate(`/code/${getLocale()}/start/quick-start`);
     };
@@ -15,7 +18,7 @@ function Pro(props) {
         <div {...props} className={styles.macBookPro2}>
             <div className={styles.frame14294}>
                 <div className={styles.frame4151}>
-                    <p className={styles.semiPro}>{_t('home.pro.title')}</p>
+                    <p className={styles.semiPro} data-locale={"en-US"}>{_t('home.pro.title')}</p>
                     {isInternal && (
                         <Tag style={{ color: '#F0B114', background: '#41464C', marginLeft: 12 }}>
                             {_t('beta', {}, '公测')}
@@ -27,7 +30,7 @@ function Pro(props) {
                 </p>
                 {isInternal ? (
                     <Button onClick={goD2CStart} size="large" theme="solid" className={styles.extraLarge}>
-                        {_t('home.pro.start', {}, '快速开始')}
+                        {_t('home.pro.start', {}, '了解更多')}
                     </Button>
                 ) : (
                     <div className={styles.buttonSecondarySolid}>
@@ -36,6 +39,7 @@ function Pro(props) {
                 )}
             </div>
             <div className={styles.autoWrapper}>
+                {/* eslint-disable-next-line */}
                 <img
                     src="https://lf9-static.semi.design/obj/semi-tos/images/homepage-pro-code.jpg"
                     className={styles.syntaxHighlighter}
@@ -43,18 +47,19 @@ function Pro(props) {
                 <div className={styles.rectangle1080}></div>
                 <div className={styles.frame14295}>
                     <div className={styles.autoWrapper}>
+                        {/* eslint-disable-next-line */}
                         <img
                             src="https://lf9-static.semi.design/obj/semi-tos/images/5de23960-3242-11ec-8b14-8fb159794ae4.png"
                             className={styles.chromeStandart}
                         />
+                        {/* eslint-disable-next-line */}
                         <img
                             src="https://lf9-static.semi.design/obj/semi-tos/images/5ddb0d70-3242-11ec-adec-e911cea4cf98.png"
                             className={styles.chromeStandart_2167fd7e}
                         />
-                        <img
-                            src="https://lf9-static.semi.design/obj/semi-tos/images/5ddc6d00-3242-11ec-9c23-a9f1bde3758e.png"
-                            className={styles.chromeStandart_07210c83}
-                        />
+                        <div className={styles.chromeStandart_07210c83}>
+                            <Component></Component>
+                        </div>
                     </div>
                 </div>
             </div>

src/sitePages/newHome/components/pro/pro.module.scss

@@ -25,13 +25,18 @@
 .semiPro {
     // width: 321px;
     font-size: 32px;
-    font-family: Inter;
+    font-family: 'Inter';
     color: var(--semi-color-white);
     line-height: 44px;
     font-weight: 700;
     letter-spacing: -1.28px;
     text-align: center;
     vertical-align: middle;
+    letter-spacing: 0em;
+}
+
+.title_en {
+    font-weight: 700;
 }
 
 .text {
@@ -47,7 +52,7 @@
 
 .text_4c571d3f {
     font-size: 18px;
-    font-family: PingFang SC;
+    font-family: 'PingFang SC';
     color: var(--semi-color-white);
     line-height: 32px;
     font-weight: 400;
@@ -55,7 +60,7 @@
 
 .text_a65a6883 {
     font-size: 18px;
-    font-family: Inter;
+    font-family: 'Inter';
     color: var(--semi-color-white);
     line-height: 32px;
     font-weight: 400;
@@ -74,7 +79,7 @@
 .text_001dc6a1 {
     min-width: 48px;
     font-size: 16px;
-    font-family: PingFang SC;
+    font-family: 'PingFang SC';
     color: var(--semi-color-tertiary-hover);
     line-height: 22px;
     font-weight: 600;
@@ -86,6 +91,7 @@
     height: 48px;
     padding: 12px 24px;
     border-radius: 6px;
+    background-color: rgba(84, 169, 255, 1);
 
     :global(.semi-button-content) {
         font-size: 16px;
@@ -100,7 +106,7 @@
 
 .syntaxHighlighter {
     position: absolute;
-    left: 340px;
+    left: 310px;
     top: -117px;
     width: 579px;
     height: 398px;
@@ -123,6 +129,7 @@
     flex-direction: row;
     align-items: center;
     margin-top: -30px;
+    overflow: hidden;
 }
 
 .chromeStandart {
@@ -142,7 +149,9 @@
 }
 
 .chromeStandart_07210c83 {
+    margin-top: 30px;
     position: relative;
-    width: 839px;
-    height: 454px;
+    height: 410px;
+    box-sizing: content-box;
+    border-radius: 12px 12px 0px 0px;
 }

src/sitePages/newHome/components/products/products.jsx

@@ -1,57 +1,39 @@
 import { _t } from "src/utils/locale";
 import React from 'react';
-import styles from './products.module.scss'
-import classnames from 'classnames'
+import styles from './products.module.scss';
+import classnames from 'classnames';
+import { ByteHiSvg, StarRiverSvg, AnyWebSvg, CapCutSvg, LarkProgramSvg } from '../svg.jsx';
 
 function Products(props) {
-    const classForDarkImage = classnames(styles.showInDark, styles.hideInLight)
+    const classForDarkImage = classnames(styles.showInDark, styles.hideInLight);
     return (
-        <div {...props} className={styles.frame4567}>
-            <p className={styles.text}><span className={styles.text_ff23e7f4}>{_t("now_serving_100_000", { }, "现已服务 10 万")}</span></p>
-            <div className={styles.frame4149}>
-                <div className={styles.autoWrapper}>
-                    <div className={styles.autoWrapper_9fdc909b}>
-                        <div className={classnames(styles.group720, styles.hideInDark)}>
-                            <img src="https://lf9-static.semi.design/obj/semi-tos/images/16cec1b0-321a-11ec-adec-e911cea4cf98.png" className={styles.logo} />
-                            <img src="https://lf9-static.semi.design/obj/semi-tos/images/16cf0fd0-321a-11ec-ab65-77a60c02a0b5.svg" className={styles.font} />
-                        </div>
-                        <img className={classForDarkImage} src="https://lf9-static.semi.design/obj/semi-tos/images/b11ce620-3472-11ec-b393-ab4adc2e449f.png" style={{width: 143, height: 36, marginRight: 56}} />     
-                        <img src="https://lf9-static.semi.design/obj/semi-tos/images/16cf36e0-321a-11ec-b393-ab4adc2e449f.png" className={classnames(styles.image42, styles.hideInDark)} />      
-                        <img className={classForDarkImage} src="https://lf9-static.semi.design/obj/semi-tos/images/a50bd6f0-3474-11ec-b008-15e09471f238.png" style={{width: 155, height: 36}} />        
-                    </div>
-                    <div className={styles.frame4146}>
-                        <img src="https://lf9-static.semi.design/obj/semi-tos/images/16d10ba0-321a-11ec-8b14-8fb159794ae4.svg" className={styles.group4} />
-                        <p className={styles.developer}><span className={styles.developer_e897b799}>Starling </span><span className={styles.developer_e5fdd783}>智能翻译</span></p>
-                    </div>
+        <div {...props} className={styles.frame14368}>
+            <p className={styles.text_ff23e7f4}>{_t("now_serving_100_000", { }, "现已服务 10 万")}</p>
+            <div className={styles.frame14369}>
+                <div key='douyinCreator'>
+                    <img src="https://lf9-static.semi.design/obj/semi-tos/images/16cf36e0-321a-11ec-b393-ab4adc2e449f.png" className={classnames(styles.image42, styles.hideInDark)} />          
+                    <img className={classForDarkImage} src="https://lf9-static.semi.design/obj/semi-tos/images/a50bd6f0-3474-11ec-b008-15e09471f238.png" style={{ width: 155, height: 36 }} />              
                 </div>
-                <div className={styles.autoWrapper_d646fb63}>
-                    <img src="https://lf9-static.semi.design/obj/semi-tos/images/16d02140-321a-11ec-b008-15e09471f238.svg" className={classnames(styles.frame4143, styles.hideInDark)} />
-                    <img className={classnames(styles.frame4143, classForDarkImage)} src="https://lf9-static.semi.design/obj/semi-tos/images/1f988530-3475-11ec-9c23-a9f1bde3758e.svg" />
-                    <div className={styles.frame4148}><img src="https://lf9-static.semi.design/obj/semi-tos/images/16d159c0-321a-11ec-8b14-8fb159794ae4.svg" className={styles.logoB156da711} />
-                        <p className={styles.developer_165d0e27}>直播开放平台</p>
-                    </div>
+                <div key="lark" className={classnames(styles.group720)}>
+                    <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/lark.png" className={styles.logo_lark} />
+                    <LarkProgramSvg />
                 </div>
-                <div className={styles.autoWrapper_98c3cb88}>
-                    <div className={styles.frame4144}><img src="https://lf9-static.semi.design/obj/semi-tos/images/16d06f60-321a-11ec-9c23-a9f1bde3758e.png" className={styles.image2} />
-                        <p className={styles.developer_11777484}>Bytedance SSO</p>
-                    </div>
-                    <div className={classnames(styles.frame4147, styles.hideInDark)}>
-                        <img src="https://lf9-static.semi.design/obj/semi-tos/images/16d09670-321a-11ec-9c23-a9f1bde3758e.svg" className={styles.group525} />
-                        <p className={styles.developer_29f0558c}><span className={styles.developer_7514e1b3}>VEDEM</span><span className={styles.developer_49b20e45}> </span><span className={styles.developer_27d00334}>体验监测</span></p>
-                    </div>
-                    <img src="https://lf9-static.semi.design/obj/semi-tos/images/e52c5ab0-3475-11ec-9c23-a9f1bde3758e.svg" className={classnames(styles.frame4147, classForDarkImage)} />
+                <div key="byteHi" className={classnames(styles.group720)}>
+                    <img src="https://lf9-static.semi.design/obj/semi-tos/images/16cec1b0-321a-11ec-adec-e911cea4cf98.png" className={styles.logo_bytehi} />
+                    <ByteHiSvg />
                 </div>
-                <div className={styles.autoWrapper_bd7d4723}>
-                    <img src="https://lf9-static.semi.design/obj/semi-tos/images/16d02140-321a-11ec-adec-e911cea4cf98.svg" className={classnames(styles.frame3214, styles.hideInDark)} />
-                    <img src="https://lf9-static.semi.design/obj/semi-tos/images/a4aad5c0-3475-11ec-8b14-8fb159794ae4.svg" className={classnames(styles.frame3214, classForDarkImage)} />
-                    <div className={styles.frame598}>
-                        <div className={styles.frame4148}><img src="https://lf9-static.semi.design/obj/semi-tos/images/16d159c0-321a-11ec-ab65-77a60c02a0b5.svg" className={styles.sun} />
-                            <p className={styles.text_c4b32e0c}>内容安全</p>
-                        </div>
-                    </div>
+                <div key="starRiver" className={classnames(styles.group720)}>
+                    <StarRiverSvg />
                 </div>
-                <div className={styles.frame4145}><img src="https://lf9-static.semi.design/obj/semi-tos/images/16d132b0-321a-11ec-b393-ab4adc2e449f.svg" className={styles.frame} />
-                    <p className={styles.developer_697ea731}>字节项目</p>
+                <div key="anyWeb" className={classnames(styles.group720)}>
+                    <AnyWebSvg />
+                </div>
+                <div className={styles.frame4144}>
+                    <img src="https://lf9-static.semi.design/obj/semi-tos/images/16d06f60-321a-11ec-9c23-a9f1bde3758e.png" className={styles.logo_sso} />
+                    <p className={styles.developer_11777484}>Bytedance SSO</p>
+                </div>
+                <div key="capcut" className={classnames(styles.group720)}>
+                    <CapCutSvg />
                 </div>
             </div>
         </div>

src/sitePages/newHome/components/products/products.module.scss

@@ -1,170 +1,61 @@
-
-.frame4567 {
+.frame14368 {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 48px;
+    width: 100%;
+    overflow: hidden;
+    padding: 54px 0;
     border-bottom: 1px solid var(--semi-color-border);
 }
 
-.text {
-    width: 480px;
-    margin: 0 0 48px;
-    font-size: 18px;
-    color: var(--semi-color-disabled-text);
-    line-height: 24px;
-    font-weight: 400;
-    text-align: center;
-    vertical-align: top;
+.frame14369 {
+    display: flex;
+    align-items: center;
+    column-gap: 48px;
+    margin: 54px 0px 0px;
 }
 
 .text_ff23e7f4 {
-    font-size: 18px;
-    font-family: PingFang SC;
-    color: var(--semi-color-disabled-text);
-    line-height: 24px;
+    font-style: normal;
     font-weight: 600;
-}
-
-.text_7e19b7d7 {
     font-size: 18px;
-    font-family: Inter;
-    color: var(--semi-color-disabled-text);
     line-height: 24px;
-    font-weight: 600;
-    letter-spacing: -.54px;
-}
-
-.frame4149 {
-    padding: 0 1.9px 0 0;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    margin: 0 0 60px;
-}
-
-.autoWrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin: 0 12.529999999999973px 0 0;
+    text-align: center;
+    color: var(--semi-color-disabled-text);
 }
 
-.autoWrapper_9fdc909b {
+.group720 {
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin: 0 0 59px;
+    color: var(--semi-color-text-0);
 }
 
-.group720 {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin: 0 56.28999999999999px 0 0;
+.logo_lark {
+    height: 32px;
+    width: 40.25px;
+    margin-right: 15px;
 }
 
-.logo {
+.logo_bytehi {
     width: 36px;
     height: 36px;
     margin: 0 9px 0 0;
 }
 
-.font {}
-
 .image42 {
     width: 155px;
     height: 36px;
 }
 
-.frame4146 {
-    padding: .6px 0 4.6px 9px;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    margin: 0 0 0 108px;
-}
-
-.group4 {
-    margin: 0 12.599999999999998px 0 0;
-}
-
-.developer {
-    min-width: 152px;
-    margin: 3.6px 0 0;
-    font-size: 19px;
-    color: var(--semi-color-text-0);
-    line-height: 23px;
-    font-weight: 400;
-    text-align: left;
-    vertical-align: top;
-}
-
-.developer_e897b799 {
-    font-size: 19px;
-    font-family: Inter;
-    color: var(--semi-color-text-0);
-    line-height: 23px;
-    font-weight: 600;
-}
-
-.developer_e5fdd783 {
-    font-size: 19px;
-    font-family: PingFang SC;
-    color: var(--semi-color-text-0);
-    line-height: 23px;
-    font-weight: 600;
-}
-
-.autoWrapper_d646fb63 {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin: 0 34.00000000000003px 0 0;
-}
-
-.frame4143 {
-    margin: 0 0 56px 44.6px;
-}
-
-.frame4148 {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.logoB156da711 {
-    margin: 0 10.800000000000004px 0 0;
-}
-
-.developer_165d0e27 {
-    width: 115.4px;
-    height: 22.5px;
-    font-size: 19px;
-    font-family: PingFang SC;
-    color: #4f6bffff;
-    line-height: 23px;
-    font-weight: 600;
-    text-align: left;
-    vertical-align: top;
-}
-
-.autoWrapper_98c3cb88 {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin: 0 14.900000000000006px 0 0;
-}
-
 .frame4144 {
     padding: 4px 0 3.2px .68px;
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin: 0 0 56px;
 }
 
-.image2 {
+.logo_sso {
     width: 28.5px;
     height: 29px;
     margin: 0 10.770000000000003px 0 0;
@@ -173,7 +64,7 @@
 .developer_11777484 {
     min-width: 138px;
     font-size: 19px;
-    font-family: Inter;
+    font-family: "Inter";
     color: #3370ffff;
     line-height: 23px;
     font-weight: 600;
@@ -182,110 +73,6 @@
     vertical-align: top;
 }
 
-.frame4147 {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin: 0 0 0 22px;
-}
-
-.group525 {
-    margin: 0 10.799999999999997px 0 0;
-}
-
-.developer_29f0558c {
-    width: 150.3px;
-    height: 22.5px;
-    font-size: 19px;
-    color: #03201fff;
-    line-height: 23px;
-    font-weight: 400;
-    text-align: left;
-    vertical-align: top;
-}
-
-.developer_7514e1b3 {
-    font-size: 19px;
-    font-family: Inter;
-    color: #03201fff;
-    line-height: 23px;
-    font-weight: 800;
-}
-
-.developer_49b20e45 {
-    font-size: 19px;
-    font-family: Inter;
-    color: #03201fff;
-    line-height: 23px;
-    font-weight: 600;
-}
-
-.developer_27d00334 {
-    font-size: 19px;
-    font-family: PingFang SC;
-    color: #03201fff;
-    line-height: 23px;
-    font-weight: 600;
-}
-
-.autoWrapper_bd7d4723 {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin: 0 18.30000000000001px 0 0;
-}
-
-.frame3214 {
-    margin: 0 0 40.71px;
-}
-
-.frame598 {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 36px;
-    margin: 0 0 0 41.1px;
-}
-
-.sun {
-    margin: 0 10.8px 0 0;
-}
-
-.text_c4b32e0c {
-    min-width: 72px;
-    font-size: 18px;
-    font-family: PingFang SC;
-    color: var(--semi-color-text-0);
-    line-height: 25px;
-    font-weight: 600;
-    text-align: left;
-    vertical-align: middle;
-}
-
-.frame4145 {
-    padding: 2.7px 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.frame {
-    margin: 0 9.900000000000002px 0 0;
-}
-
-.developer_697ea731 {
-    width: 80px;
-    height: 22.5px;
-    font-size: 19px;
-    font-family: Inter;
-    color: var(--semi-color-text-0);
-    line-height: 23px;
-    font-weight: 800;
-    text-align: left;
-    vertical-align: top;
-}
-
-
 .hideInLight {
     display: none;
 }

src/sitePages/newHome/components/resource/resource.jsx

@@ -2,35 +2,45 @@ import { _t } from "src/utils/locale";
 import { navigate } from 'gatsby-link';
 import React from 'react';
 import { getLocale } from '../../../../utils/locale';
-import styles from './resource.module.scss'
+import styles from './resource.module.scss';
+import OperateButton from '../operateButton/operateButton.jsx';
+import classnames from 'classnames';
 
 function Resource(props) {
     const goComponentsOverview = () => {
         navigate(`/${getLocale()}/start/overview`);
-    }
+    };
 
     const goFigma = () => {
-        window.open('https://figma.com/@semi')
-    }
+        window.open('https://figma.com/@semi');
+    };
+
     return (
-        <div {...props} className={styles.frame4574}>
-            <div className={styles.frame22}>
-                <div className={styles.group21}>
-                    <p className={styles.text}>{_t("home.resource.rd", { }, "研发")}</p>
-                    <p className={styles.text_00d74f5e}>
-                        <span className={styles.text_70c95f84}>{_t("home.resource.rd.desc")}</span>
-                    </p>
-                    <p onClick={goComponentsOverview} className={styles.text_0aedd7ef}>{_t("component_documentation", { }, "组件文档")}</p>
-                </div><img src="https://lf9-static.semi.design/obj/semi-tos/images/homepage-code.png" className={styles.frame} />
+        <div {...props} className={styles.container}>
+            <div className={styles.frame1}>
+                <p className={styles.title} data-locale={"en-US"}>{_t("enterprise_product_design_system")}</p>
+                <p className={styles.text_008e1ad6}>{_t("resource_subtitle")}</p>
+                <OperateButton />
             </div>
-            <div className={styles.frame23}>
-                <div className={styles.group20}>
-                    <p className={styles.text}>{_t("home.resource.design")}</p>
-                    <p className={styles.text_00d74f5e}>
-                        <span className={styles.text_70c95f84}>{_t("home.resource.design.desc")}</span>
-                    </p>
-                    <p onClick={goFigma} className={styles.figmaUIKit}>Figma UIKit</p>
-                </div><img src="https://lf9-static.semi.design/obj/semi-tos/images/a05515c0-323c-11ec-9c23-a9f1bde3758e.png" className={styles.frame4573} />
+            <div className={styles.frame4574}>
+                <div className={styles.frame22}>
+                    <div className={styles.group21}>
+                        <p className={styles.text} data-locale={"en-US"}>{_t("home.resource.rd", { }, "研发")}</p>
+                        <p className={styles.text_00d74f5e}>
+                            <span className={styles.text_70c95f84}>{_t("home.resource.rd.desc")}</span>
+                        </p>
+                        <p onClick={goComponentsOverview} className={styles.text_0aedd7ef}>{_t("component_documentation", { }, "组件文档")}</p>
+                    </div><img src="https://lf9-static.semi.design/obj/semi-tos/images/homepage-code.png" className={styles.frame} />
+                </div>
+                <div className={styles.frame23}>
+                    <div className={styles.group20}>
+                        <p className={styles.text} data-locale={"en-US"}>{_t("home.resource.design")}</p>
+                        <p className={styles.text_00d74f5e}>
+                            <span className={styles.text_70c95f84}>{_t("home.resource.design.desc")}</span>
+                        </p>
+                        <p onClick={goFigma} className={styles.figmaUIKit}>Figma UIKit</p>
+                    </div><img src="https://lf9-static.semi.design/obj/semi-tos/images/a05515c0-323c-11ec-9c23-a9f1bde3758e.png" className={styles.frame4573} />
+                </div>
             </div>
         </div>
     );

src/sitePages/newHome/components/resource/resource.module.scss

@@ -1,5 +1,40 @@
+.container {
+    margin-top: 92px;
+    width: 100%;
+    height: auto;
+}
+
+.frame1 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 92px;
+}
+
+.title {
+    font-size: 32px;
+    letter-spacing: 0em;
+    color: var(--semi-color-text-0);
+    line-height: 44px;
+    letter-spacing: -1.28px;
+    text-align: center;
+    vertical-align: middle;
+    font-weight: 600;
+}
+
+.text_008e1ad6 {
+    font-size: 18px;
+    color: var(--semi-color-text-0);
+    line-height: 32px;
+    text-align: left;
+    vertical-align: top;
+    font-weight: 400;
+    margin-top: 16px;
+}
+
 .frame4574 {
-    margin-top: 72px;
+    margin-top: 40px;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -22,13 +57,12 @@
 }
 
 .text {
-    width: 321px;
+    width: fit-content;
     margin: 0 0 16px;
     font-size: 32px;
-    font-family: PingFang SC;
     color: var(--semi-color-text-0);
     line-height: 44px;
-    font-weight: bold;
+    font-weight: 600;
     text-align: left;
     vertical-align: middle;
 }
@@ -51,18 +85,10 @@
     font-weight: 400;
 }
 
-.text_8e955bee {
-    font-size: 18px;
-    font-family: Inter;
-    color: var(--semi-color-text-0);
-    line-height: 32px;
-    font-weight: 400;
-}
 
 .text_0aedd7ef {
     min-width: 80px;
     font-size: 20px;
-    font-family: PingFang SC;
     color: var(--semi-color-primary);
     line-height: 32px;
     font-weight: 600;
@@ -94,7 +120,7 @@
 .figmaUIKit {
     min-width: 112px;
     font-size: 20px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-primary);
     line-height: 32px;
     font-weight: 600;
@@ -107,3 +133,7 @@
     width: 632px;
     height: 269px;
 }
+
+.text_en {
+    font-weight: 700;
+}

src/sitePages/newHome/components/svg.jsx

@@ -0,0 +1,151 @@
+import React from 'react';
+
+export function LarkProgramSvg() {
+    return (
+        <svg width="88" height="22" viewBox="0 0 88 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M20.99 17.7865L19.3667 16.1535C18.6529 17.4149 17.8313 18.1679 17.1176 18.1679C14.1839 18.1679 13.1375 12.5353 12.9224 8.38901C12.97 8.49983 13.04 8.59969 13.1278 8.68236L14.4088 9.97319L18.428 13.9923C18.5945 14.1571 18.8195 14.2496 19.0537 14.2496C19.2881 14.2496 19.5131 14.1571 19.6797 13.9923L21.0194 12.6624L16.3743 8.0174L18.8387 5.59222C18.9227 5.51108 18.9895 5.41383 19.035 5.30631C19.0807 5.19879 19.1043 5.08318 19.1043 4.96639C19.1043 4.84958 19.0807 4.73398 19.035 4.62645C18.9895 4.51893 18.9227 4.42171 18.8387 4.34054L17.5283 3.0106L13.1278 7.41111C13.0227 7.51397 12.9453 7.64182 12.9028 7.78272C12.9028 7.40134 12.9028 7.02973 12.9028 6.69725V1.93493C12.9028 1.67558 12.7998 1.42683 12.6164 1.24345C12.433 1.06005 12.1842 0.957031 11.9251 0.957031H0.493408V3.11817C0.495949 3.32915 0.581644 3.53059 0.731784 3.67886C0.881923 3.82713 1.08427 3.91028 1.29539 3.91026H9.97902V6.69725C9.97902 12.0757 11.2111 21.1016 17.1176 21.1016C17.8974 21.0567 18.6562 20.832 19.3346 20.4453C20.0132 20.0585 20.5932 19.52 21.0291 18.872C21.16 18.7191 21.2286 18.5227 21.2213 18.3216C21.2141 18.1206 21.1314 17.9296 20.99 17.7865Z" fill="currentcolor"/>
+            <path d="M43.55 6.27701L41.1443 2.14054C41.0025 1.90068 40.801 1.70164 40.5592 1.56285C40.3176 1.42402 40.0441 1.35015 39.7655 1.34845H37.7608C37.7324 1.34637 37.704 1.35207 37.6786 1.36496C37.6532 1.37785 37.6319 1.39741 37.6167 1.42155C37.6017 1.44571 37.5933 1.47352 37.5929 1.50198C37.5924 1.53046 37.5998 1.55853 37.6141 1.58313L38.8952 3.79316H33.2333V0.595459H30.1725V3.74426H24.706V5.70006C24.706 5.91014 24.7894 6.1116 24.9379 6.26015C25.0865 6.40869 25.2881 6.49215 25.4981 6.49215H30.1822V10.257H23.1023V12.2128C23.1023 12.4255 23.1868 12.6294 23.3372 12.7798C23.4876 12.9302 23.6915 13.0147 23.904 13.0147H30.1725V21.405H33.2333V13.0538H39.9709L39.8926 15.2736C39.8824 15.6013 39.7452 15.9123 39.5096 16.1404C39.2742 16.3686 38.9592 16.4961 38.6312 16.496H35.5801V18.4517C35.5801 18.6627 35.6632 18.8652 35.8115 19.0153C35.9598 19.1654 36.1612 19.251 36.3724 19.2536H39.3745C40.2552 19.2542 41.1022 18.9132 41.7368 18.3022C42.3715 17.6913 42.7445 16.858 42.7773 15.9777L42.9339 11.2447C42.9339 10.9854 42.8309 10.7366 42.6475 10.5532C42.4641 10.3698 42.2153 10.2668 41.956 10.2668H39.6286L39.8046 5.31868L40.0295 5.70983C40.17 5.951 40.3712 6.1511 40.6132 6.29011C40.8551 6.42911 41.1293 6.50215 41.4083 6.50192H43.3643C43.3941 6.51185 43.4264 6.5125 43.4567 6.50379C43.4869 6.49508 43.5139 6.47739 43.534 6.45307C43.5541 6.42874 43.5664 6.39892 43.5691 6.36751C43.5722 6.33609 43.5655 6.30454 43.55 6.27701ZM36.7048 10.2766H33.2333V6.51171H36.8611L36.7048 10.2766Z" fill="currentcolor"/>
+            <path d="M86.5574 1.28955H70.2852V19.9673C70.2852 20.1636 70.3616 20.3522 70.4988 20.4929C70.6358 20.6336 70.8222 20.7151 71.0185 20.7203H86.5574C86.6549 20.719 86.7512 20.6985 86.8411 20.6599C86.9307 20.6214 87.012 20.5656 87.0799 20.4957C87.148 20.4257 87.2019 20.3431 87.2379 20.2524C87.2742 20.1618 87.2919 20.0649 87.2908 19.9673V2.03274C87.2919 1.93561 87.2739 1.83918 87.2377 1.74907C87.2014 1.65896 87.1476 1.57694 87.0794 1.50781C87.0113 1.43867 86.93 1.38377 86.8404 1.3463C86.7507 1.30884 86.6544 1.28955 86.5574 1.28955ZM84.3374 17.9137H73.2383V14.9996H84.357L84.3374 17.9137ZM84.3374 12.4766H73.2383V9.57229H84.357L84.3374 12.4766ZM84.357 7.02977H73.2383V4.09611H84.357V7.02977Z" fill="currentcolor"/>
+            <path d="M54.3948 3.70554H58.6292L57.8859 4.99636H54.3177V15.1078H57.2523V7.65624H62.5276V15.1078H65.5126V5.73955C65.5126 5.54245 65.4343 5.35341 65.2948 5.21404C65.1555 5.07466 64.8404 4.99636 64.6432 4.99636H60.5947L61.338 3.70554H65.4842C65.6761 3.70554 65.8602 3.6293 65.9958 3.49359C66.1316 3.35789 66.2078 3.17382 66.2078 2.98192V1.02612H53.6714V2.98192C53.6714 3.17382 53.7476 3.35789 53.8832 3.49359C54.019 3.6293 54.2029 3.70554 54.3948 3.70554Z" fill="currentcolor"/>
+            <path d="M51.0306 4.80073V12.8977L48.0578 14.5992V4.82029H46.6888C46.4968 4.82029 46.3127 4.74407 46.1769 4.60834C46.0413 4.47264 45.9651 4.28859 45.9651 4.09666V2.14087H53.1233V4.0771C53.1233 4.26902 53.0471 4.45307 52.9113 4.5888C52.7754 4.7245 52.5916 4.80073 52.3996 4.80073H51.0306Z" fill="currentcolor"/>
+            <path fillRule="evenodd" clipRule="evenodd" d="M58.4619 8.71191H61.3956L61.3859 14.4912C61.3859 16.4275 59.3225 18.1192 57.9535 19.0971C56.9875 19.7432 55.961 20.4048 54.8911 20.8579C54.7148 20.9266 54.5204 20.9309 54.3413 20.8701C54.1626 20.8093 54.0108 20.6872 53.9131 20.5254L52.7903 18.4615C55.4207 17.6694 58.1099 15.8603 58.4619 13.9925C58.5503 12.2334 58.5503 10.471 58.4619 8.71191ZM61.4446 16.7306L62.843 15.3322L66.8425 19.322L65.454 20.7204C65.3205 20.8427 65.1459 20.9106 64.965 20.9106C64.7839 20.9106 64.6095 20.8427 64.476 20.7204L61.4446 17.7085C61.3222 17.575 61.2545 17.4006 61.2545 17.2196C61.2545 17.0385 61.3222 16.8641 61.4446 16.7306Z" fill="currentcolor"/>
+            <path d="M52.8674 14.8228L51.6817 15.5073L49.1171 17.0107L47.9315 17.6952C47.7652 17.7911 47.5677 17.8172 47.3822 17.7675C47.1969 17.7178 47.0389 17.5965 46.9428 17.4303L45.9651 15.7366L52.1643 12.1575L53.1323 13.8343C53.2282 14.0005 53.2543 14.198 53.2046 14.3834C53.155 14.5688 53.0337 14.7268 52.8674 14.8228Z" fill="currentcolor"/>
+        </svg>
+    );
+}
+
+export function ByteHiSvg() {
+    return ( <svg width="70" height="36" viewBox="0 0 70 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_12624_88691)">
+            <path d="M9.99323 17.9018C10.3704 17.6137 10.6935 17.2667 10.9487 16.8755C11.3344 16.278 11.535 15.5887 11.5273 14.8871C11.5434 14.0742 11.3296 13.2721 10.9083 12.5652C10.4716 11.8577 9.85043 11.27 9.10507 10.859C8.58118 10.583 8.01268 10.3923 7.42295 10.2946C6.53231 10.1672 5.63201 10.1114 4.73156 10.1278H0.290771V26.997H6.83085C8.35741 27.0432 9.84798 26.5498 11.016 25.6116C11.5566 25.1833 11.9904 24.6457 12.286 24.0377C12.5816 23.4297 12.7315 22.7667 12.725 22.0966C12.7813 21.2171 12.5535 20.3423 12.0723 19.5899C11.5911 18.8376 10.8796 18.2439 10.0336 17.8889L9.99323 17.9018ZM9.62989 21.994C9.65531 22.3187 9.59613 22.6444 9.45761 22.9421C9.31909 23.2398 9.10553 23.5002 8.83593 23.7002C8.05552 24.1625 7.14182 24.378 6.22528 24.3159H3.38587V19.6977H6.37331C7.26662 19.6375 8.15698 19.8486 8.91667 20.3007C9.17141 20.506 9.36957 20.7677 9.49388 21.0629C9.6182 21.358 9.66489 21.6777 9.62989 21.994V21.994ZM3.38587 17.0551V12.7319H5.71392C6.49961 12.6764 7.28196 12.8753 7.93432 13.2964C8.16895 13.4958 8.35183 13.7445 8.46858 14.0227C8.58534 14.301 8.63277 14.6012 8.60716 14.8999C8.62558 15.1941 8.57471 15.4885 8.45828 15.7615C8.34186 16.0346 8.16283 16.2793 7.93432 16.4778C7.33753 16.8991 6.60277 17.1037 5.86195 17.0551H3.38587Z" fill="currentcolor"/>
+            <path d="M28.9774 12.375H26.3566V15.0576H22.0793L19.1989 22.2969C19.1989 22.4253 19.0629 22.682 18.9269 23.1055L18.8527 23.3494L18.7785 23.067C18.7126 22.8033 18.6257 22.5458 18.5189 22.2969L15.6756 15.0576H12.7334L17.3445 26.507L15.3047 31.5H18.0492L24.0325 17.5092H26.4184V24.2222C26.3837 24.6306 26.4305 25.0421 26.556 25.4308C26.6815 25.8195 26.883 26.1772 27.1478 26.4813C27.7991 27.0134 28.622 27.266 29.4472 27.1872H30.8318V24.5688H29.4472C29.3331 24.5806 29.2188 24.5486 29.1258 24.4789C29.0444 24.3406 29.0096 24.178 29.0269 24.0169V17.5991H30.8318V15.0576H28.9774V12.375Z" fill="currentcolor"/>
+            <path d="M38.1309 14.6296C37.3072 14.5972 36.4858 14.7359 35.7198 15.0368C34.9537 15.3377 34.2602 15.7941 33.684 16.3765C33.1079 16.9822 32.6595 17.6949 32.3648 18.4733C32.0702 19.2518 31.9351 20.0803 31.9676 20.9107C31.9723 21.6699 32.1131 22.4223 32.3837 23.1329C32.6517 23.8392 33.0532 24.4887 33.567 25.0468C34.1568 25.6787 34.8805 26.1743 35.6864 26.4982C36.5111 26.8337 37.3951 27.0039 38.2869 26.9992C39.3387 27.0149 40.3813 26.8045 41.3426 26.3826C42.2963 25.9168 43.1419 25.2608 43.8261 24.4559L44.0992 24.1348L42.0447 22.5035L41.7847 22.7989C41.3492 23.3286 40.8096 23.7656 40.1983 24.0834C39.6223 24.3566 38.991 24.4971 38.352 24.4944C37.4231 24.5223 36.5148 24.2216 35.7904 23.6467C35.2606 23.1815 34.9189 22.5428 34.8282 21.8484H44.3982V21.3346C44.4804 19.5621 43.8654 17.8269 42.6819 16.4921C42.1038 15.8762 41.3979 15.391 40.6124 15.0695C39.827 14.7481 38.9805 14.598 38.1309 14.6296V14.6296ZM35.7904 17.995C36.4263 17.4676 37.2359 17.1888 38.0659 17.2114C38.8739 17.189 39.6616 17.4637 40.2764 17.9821C40.7623 18.3959 41.1074 18.9476 41.2646 19.562H34.7632C34.931 18.9463 35.2903 18.3981 35.7904 17.995V17.995Z" fill="currentcolor"/>
+            <path d="M46.6677 27V10.125H49.4956V17.4375H56.8481V10.125H59.6759V27H56.8481V20.25H49.4956V27H46.6677Z" fill="currentcolor"/>
+            <path d="M65.6213 16.1379H62.9083V27H65.6213V16.1379Z" fill="currentcolor"/>
+            <ellipse cx="64.2006" cy="12.9375" rx="1.69672" ry="1.6875" fill="currentcolor"/>
+        </g>
+    </svg>);
+}
+
+export function StarRiverSvg() {
+    return (<svg width="155" height="24" viewBox="0 0 155 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_12624_88698)">
+            <path d="M34.378 5.10373C32.7699 2.96052 30.468 1.39277 27.8341 0.646905C24.6257 -0.22138 21.1912 0.164117 18.276 1.71973C16.1882 2.87341 14.4967 4.59056 13.4102 6.65934C12.3237 8.72812 11.8897 11.058 12.1618 13.3616C12.1914 13.5897 12.2753 13.8081 12.407 13.9998C12.5386 14.1915 12.7144 14.3514 12.9207 14.4669C13.127 14.5825 13.3583 14.6506 13.5964 14.6659C13.8345 14.6812 14.0731 14.6434 14.2935 14.5554C16.0121 13.855 17.311 12.7695 18.6594 11.6362C19.5312 10.8762 20.4495 10.1672 21.4092 9.51281C23.3426 8.23943 25.9172 10.1495 25.1504 12.2792C25.0779 12.4915 25.0757 12.7203 25.144 12.9339C25.2122 13.1476 25.3477 13.3355 25.5316 13.4718C25.7156 13.608 25.9389 13.686 26.1708 13.6947C26.4026 13.7035 26.6316 13.6427 26.8261 13.5208C27.7309 12.9017 28.5911 12.2242 29.4007 11.4929C30.7959 10.2703 32.3775 9.26107 34.0905 8.50047C34.4922 8.33151 34.9298 8.25671 35.3674 8.28219C35.805 8.30768 36.2301 8.43274 36.6077 8.6471C36.9854 8.86146 37.305 9.15901 37.5401 9.51536C37.7753 9.8717 37.9194 10.2767 37.9606 10.697C38.0003 11.1109 38.0201 11.5184 38.0234 11.9163C38.0276 12.175 38.1021 12.4281 38.2394 12.6504C38.3768 12.8727 38.5722 13.0564 38.8063 13.1833C39.0403 13.3102 39.3048 13.3758 39.5734 13.3736C39.8419 13.3713 40.1052 13.3014 40.3369 13.1706C45.9125 10.0349 49.3232 6.51718 48.3912 4.48933C47.3667 2.28002 41.3912 2.62064 34.378 5.10373Z" fill="currentcolor"/>
+            <path d="M34.5408 9.64202C32.8222 10.3424 31.5267 11.4279 30.1749 12.5612C29.3038 13.322 28.3855 14.0311 27.4252 14.6846C25.4917 15.958 22.9204 14.0479 23.6839 11.9182C23.7567 11.7062 23.7593 11.4777 23.6913 11.2643C23.6232 11.0509 23.488 10.8631 23.3042 10.727C23.1205 10.591 22.8973 10.5133 22.6657 10.5049C22.4341 10.4964 22.2055 10.5576 22.0116 10.6798C21.1053 11.2971 20.245 11.9747 19.437 12.7077C18.0388 13.9282 16.4564 14.9372 14.7438 15.7001C14.342 15.8685 13.9045 15.9427 13.4671 15.9167C13.0297 15.8908 12.605 15.7653 12.2277 15.5507C11.8503 15.336 11.5312 15.0383 11.2964 14.6819C11.0617 14.3255 10.9179 13.9206 10.877 13.5004C10.8373 13.0865 10.8175 12.679 10.8142 12.2811C10.81 12.0224 10.7356 11.7693 10.5982 11.547C10.4609 11.3247 10.2654 11.141 10.0314 11.0141C9.79732 10.8872 9.53283 10.8216 9.26427 10.8238C8.9957 10.8261 8.73242 10.896 8.50069 11.0268C2.92845 14.1721 -0.48231 17.6866 0.449701 19.7017C1.47756 21.9301 7.44969 21.5831 14.4662 19.1C16.073 21.2432 18.3738 22.811 21.0068 23.5569C24.2169 24.4223 27.6517 24.0357 30.5682 22.4809C32.6551 21.3264 34.3457 19.609 35.4315 17.5404C36.5174 15.4717 36.9511 13.1422 36.6792 10.839C36.6509 10.6095 36.5677 10.3895 36.436 10.1964C36.3043 10.0032 36.1277 9.84224 35.9203 9.72614C35.7129 9.61003 35.4803 9.54199 35.2409 9.52739C35.0014 9.51279 34.7618 9.55204 34.5408 9.64202V9.64202Z" fill="currentcolor"/>
+            <path d="M136.431 0.213623L137.571 3.54669H149.717V20.1643C149.718 20.2359 149.703 20.3069 149.675 20.3731C149.647 20.4393 149.605 20.4995 149.553 20.5501C149.5 20.6008 149.438 20.6409 149.369 20.6681C149.3 20.6953 149.226 20.7091 149.152 20.7086H148.27V23.8603H149.674C150.6 23.8586 151.486 23.5033 152.14 22.8725C152.794 22.2416 153.161 21.3867 153.161 20.4954V3.53395H154.285V0.213623H136.431Z" fill="currentcolor"/>
+            <path d="M138.413 18.0633H147.998V5.19263H138.413V18.0633ZM141.864 8.09911H144.547V15.1568H141.864V8.09911Z" fill="currentcolor"/>
+            <path d="M136.388 4.80735L134.838 0.210449H131.097L132.647 4.80735H136.388Z" fill="currentcolor"/>
+            <path d="M131.327 6.31567L132.877 10.9094H136.618L135.068 6.31567H131.327Z" fill="currentcolor"/>
+            <path d="M131.327 23.991H135.068L136.618 12.4192H132.877L131.327 23.991Z" fill="currentcolor"/>
+            <path d="M86.2378 11.727V8.3812H84.6184V5.60842H86.2378V2.25943H84.6184V0.349365H81.1581V2.25943H79.0825V5.60523H81.1581V8.37802H79.0825V11.7238H81.1581V15.353C81.1581 15.4492 81.1184 15.5415 81.0477 15.6096C80.977 15.6776 80.8812 15.7159 80.7813 15.7159H80.0476V18.3804H82.5065C83.0666 18.3804 83.6038 18.1661 83.9998 17.7846C84.3959 17.4031 84.6184 16.8857 84.6184 16.3462V11.727H86.2378Z" fill="currentcolor"/>
+            <path d="M78.6157 23.9644H82.5652L83.8905 19.5999H79.941L78.6157 23.9644Z" fill="currentcolor"/>
+            <path d="M84.9312 19.5999L86.2565 23.9644H90.2059L88.8806 19.5999H84.9312Z" fill="currentcolor"/>
+            <path d="M90.5464 19.5999L91.8717 23.9644H95.8245L94.4992 19.5999H90.5464Z" fill="currentcolor"/>
+            <path d="M96.1663 19.5999L97.4916 23.9644H101.441L100.116 19.5999H96.1663Z" fill="currentcolor"/>
+            <path d="M88.8246 18.3839H92.2849L92.9459 11.7274H95.2297V8.38155H93.283L93.564 5.60877H96.3137V15.5348C96.3137 16.2946 96.6271 17.0234 97.1849 17.5607C97.7428 18.098 98.4993 18.3999 99.2882 18.3999H100.842V15.5029H100.124C100.037 15.5029 99.9527 15.4694 99.8907 15.4097C99.8287 15.35 99.7939 15.269 99.7939 15.1846V2.25979H93.9077L94.0862 0.477055L90.6324 0.231934L90.4308 2.25979H87.3208V5.60559H90.097L89.8227 8.37837H87.3208V11.7242H89.4889L88.8246 18.3839Z" fill="currentcolor"/>
+            <path d="M72.8555 17.757L73.9032 13.5771H69.8347L68.7341 17.757H72.8555Z" fill="currentcolor"/>
+            <path d="M65.9771 13.8003V11.209L65.8647 11.2472C64.7741 11.6133 63.6372 11.9571 62.4771 12.2723L61.6277 12.4951V13.8003C61.6277 17.092 60.9039 20.4442 52.2646 20.4442H51.9937V23.9682H52.2646C56.2901 23.9682 59.3638 23.1756 61.403 21.6157C62.424 20.8499 63.2024 19.8244 63.6504 18.6551C63.9679 19.783 64.6342 20.7911 65.5607 21.5456C67.4974 23.1533 70.6339 23.9682 74.8808 23.9682H75.1617V20.4473H74.8907C66.6579 20.4473 65.9771 17.3881 65.9771 13.8003Z" fill="currentcolor"/>
+            <path d="M54.2944 17.757H58.4124L57.3152 13.5771H53.2434L54.2944 17.757Z" fill="currentcolor"/>
+            <path d="M118.127 21.0425V19.7691H125.223V16.8022H118.127V15.6689H126.3V12.7019H118.127V11.2534H114.399V12.7019H109.554C109.414 12.7019 109.28 12.6487 109.181 12.5538C109.082 12.459 109.026 12.3303 109.025 12.1957V11.645H105.578V12.7369C105.578 13.5145 105.899 14.2603 106.47 14.8101C107.04 15.36 107.815 15.6689 108.622 15.6689H114.399V16.7767H107.303V19.7691H114.399V21.0425H104.881V24.0063H127.639V21.0425H118.127Z" fill="currentcolor"/>
+            <path d="M125.583 0.213623H106.956V10.5025H125.596L125.583 0.213623ZM122.093 7.2745H110.439V6.2176H122.093V7.2745ZM122.093 3.11055V4.17064H110.4V3.11374H122.093V3.11055Z" fill="currentcolor"/>
+            <path d="M52.0012 10.3656L52.9167 13.0142L52.9465 13.097C55.5555 12.7902 58.1387 12.3062 60.6769 11.6485C67.9479 9.76389 72.8459 6.96883 74.5149 5.91829C74.8752 5.69227 75.09 5.54583 75.1396 5.51081V3.21554L72.9153 2.14272L68.4569 -0.00610352L68.3643 0.0320963L67.8421 0.239018L67.1282 0.512795C60.2472 3.11685 52.7779 4.37432 52.1929 4.46982H52.1566L52.1764 4.53031L53.0985 7.07707L53.1282 7.1662C53.819 7.04523 55.1608 6.80011 56.8959 6.41491L60.4323 8.75793L60.2175 8.81841C57.5257 9.54341 54.7783 10.0608 52.0012 10.3656ZM68.0206 3.21554L68.3511 3.09776L71.2958 4.51757C70.9653 4.69584 70.6084 4.88685 70.2085 5.08741C69.921 5.23067 69.6136 5.38347 69.2864 5.53946L69.1443 5.60313L66.4177 3.79811C66.9398 3.61347 67.4819 3.42247 68.0206 3.21554ZM60.6967 5.51717L61.1825 5.38984C61.6882 5.25295 62.2005 5.11288 62.7227 4.96007L62.8978 4.90914L65.9847 6.95291C65.4162 7.17575 64.8247 7.39541 64.2 7.61507L63.9786 7.69147L60.6967 5.51717Z" fill="currentcolor"/>
+        </g>
+        <defs>
+            <clipPath id="clip0_12624_88698">
+                <rect width="154" height="24" fill="white" transform="translate(0.290771)"/>
+            </clipPath>
+        </defs> 
+    </svg>);
+}
+
+export function StarRiverBigSvg() {
+    return (
+        <svg width="246" height="38">
+            <g transform='scale(1.58 1.58)'>
+                <StarRiverSvg></StarRiverSvg>
+            </g>
+        </svg>
+    );
+}
+
+export function AnyWebSvg() {
+    return (<svg width="123" height="32" viewBox="0 0 123 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_12624_88699)">
+            <path d="M59.0168 9.6853C56.7312 9.6853 55.5578 11.0764 55.2999 11.6374V10.0323H52.5552V22.1585H55.2999V15.1975C55.2999 14.4614 55.7284 12.1768 58.0044 12.1768C59.9044 12.1768 60.455 13.6734 60.455 15.2336V22.1585H63.1997V14.8692C63.1997 12.5715 62.3939 9.6853 59.0168 9.6853Z" fill="currentcolor"/>
+            <path d="M107.499 12.9967C107.03 12.0102 106.31 11.1762 105.419 10.5848C104.554 10.0217 103.559 9.71292 102.54 9.69116H102.017C101.02 9.72443 100.046 10.0135 99.1821 10.5327C98.2585 11.0849 97.4926 11.8834 96.963 12.8463C96.4277 13.8403 96.1475 14.9614 96.1494 16.1014C96.1514 17.2413 96.4354 18.3614 96.9741 19.3533C97.5117 20.3172 98.2845 21.1154 99.214 21.6669C100.09 22.1875 101.074 22.4765 102.082 22.5085H102.604C103.514 22.4973 104.414 22.2973 105.25 21.92C106.1 21.5118 106.866 20.9369 107.508 20.2267L107.676 20.0445L105.873 17.9637L105.683 18.2327C105.31 18.7488 104.837 19.1774 104.296 19.4907C103.697 19.8369 103.022 20.0119 102.337 19.9983C101.708 20.0104 101.087 19.8414 100.543 19.5098C99.9995 19.1782 99.554 18.6968 99.2556 18.1185C99.0548 17.7433 98.9143 17.3364 98.8395 16.9139H108.228V16.0015V15.9914C108.194 14.9502 107.946 13.9288 107.499 12.9967ZM105.323 14.5497H99.042C99.0993 14.389 99.1669 14.2324 99.2445 14.0812C99.5299 13.504 99.9616 13.0194 100.493 12.68C101.012 12.3532 101.609 12.1862 102.215 12.1985H102.343C103.361 12.2274 104.133 12.6106 104.701 13.3669C104.97 13.7221 105.181 14.1219 105.323 14.5497Z" fill="currentcolor"/>
+            <path d="M90.4111 18.4583L87.5762 10.0339H84.8495L82.0591 18.4583L79.7207 10.0339H76.7014L80.9717 22.1587H83.2435L86.2129 13.4089L89.228 22.1587H91.4998L95.7229 10.0339H92.7064L90.4111 18.4583Z" fill="currentcolor"/>
+            <path d="M69.0818 27.8342L76.2202 10.0339H73.2314L70.0498 19.0208L66.8266 10.0339H63.6895L68.6948 21.8825L66.1401 27.8342H69.0818Z" fill="currentcolor"/>
+            <path d="M47.1839 10.0323V11.6374C47.1839 11.6374 46.1742 9.6853 43.3935 9.6853C40.7583 9.6853 39.0205 11.902 38.5185 12.8752C38.0544 13.7847 37.7981 14.7938 37.7695 15.8236V16.3687C37.802 17.3844 38.0537 18.3793 38.506 19.2795C38.9997 20.2614 40.6238 22.5056 43.3935 22.5056C46.1285 22.5056 47.1839 20.5506 47.1839 20.5506V22.1585H49.9286V10.0323H47.1839ZM46.9925 18.088C46.7079 18.6626 46.2801 19.1466 45.754 19.4892C45.2418 19.8213 44.6499 19.9957 44.0467 19.9924C43.4327 19.9972 42.8296 19.8224 42.3061 19.4877C41.776 19.1478 41.3446 18.6639 41.0579 18.088C40.757 17.4709 40.6002 16.7884 40.6002 16.0961C40.6002 15.4039 40.757 14.7214 41.0579 14.1043C41.3442 13.5277 41.7757 13.0433 42.3061 12.7031C42.8301 12.3698 43.4329 12.1955 44.0467 12.1999C44.6499 12.1966 45.2418 12.371 45.754 12.7031C46.2801 13.0457 46.7079 13.5297 46.9925 14.1043C47.2943 14.7211 47.4516 15.4037 47.4516 16.0961C47.4516 16.7886 47.2943 17.4712 46.9925 18.088Z" fill="currentcolor"/>
+            <path d="M110.128 4.58521V22.1541H112.872V20.5505C112.872 20.5505 113.928 22.5055 116.664 22.5055C119.438 22.5055 121.057 20.2613 121.55 19.2795C122.003 18.3795 122.255 17.3844 122.287 16.3687V15.8235C122.26 14.7935 122.003 13.7842 121.538 12.8751C121.037 11.902 119.304 9.68525 116.664 9.68525C113.882 9.68525 112.872 11.6374 112.872 11.6374V4.58521H110.128ZM112.606 16.091C112.599 15.3981 112.756 14.7141 113.064 14.0999C113.349 13.5252 113.777 13.0412 114.304 12.6987C114.816 12.3668 115.407 12.1924 116.01 12.1955C116.624 12.1911 117.227 12.3654 117.752 12.6987C118.282 13.0387 118.714 13.5232 119 14.0999C119.302 14.7167 119.459 15.3993 119.459 16.0918C119.459 16.7842 119.302 17.4668 119 18.0836C118.714 18.66 118.282 19.144 117.752 19.4834C117.228 19.818 116.624 19.9928 116.01 19.988C115.407 19.9917 114.815 19.8172 114.304 19.4848C113.777 19.1423 113.349 18.6583 113.064 18.0836C112.757 17.4701 112.6 16.7873 112.606 16.0954V16.091Z" fill="currentcolor"/>
+            <path d="M22.7352 23.1437C27.767 23.5081 30.8209 18.8216 30.452 13.7331C29.8515 5.42727 23.3566 -0.00390625 15.6023 -0.00390625C7.39317 -0.00390625 0.290771 7.40395 0.290771 16.0322C0.290771 23.9852 6.37794 31.9946 15.6717 31.9946C17.713 32.0004 19.735 31.5813 21.619 30.7619C23.503 29.9425 25.2112 28.7393 26.6435 27.2228L24.8738 25.3994C23.6726 26.6703 22.2402 27.6783 20.6606 28.3646C19.0809 29.0509 17.3857 29.4016 15.6744 29.3962C8.70934 29.3962 2.85934 23.2883 2.85934 16.0366C2.85934 9.37775 8.18648 2.60323 15.7438 2.60323C21.6396 2.60323 27.3939 7.08584 27.889 13.6608C28.2232 18.0726 25.9751 21.1496 22.6284 20.6349C18.6785 20.029 18.7145 15.1401 19.5301 11.5135C19.9073 9.83468 17.9781 8.84273 16.7964 10.0487L6.92855 20.3327L8.69271 22.1734L16.9407 13.5509C15.9698 18.2475 18.3623 22.8285 22.7352 23.1437Z" fill="currentcolor"/>
+        </g>
+        <defs>
+            <clipPath id="clip0_12624_88699">
+                <rect width="122" height="32" fill="white" transform="translate(0.290771)"/>
+            </clipPath>
+        </defs>
+    </svg>);
+}
+
+export function AnyWebBigSvg() {
+    return (
+        <svg width="246" height="64">
+            <g transform='scale(2 2)'>
+                <AnyWebSvg></AnyWebSvg>
+            </g>
+        </svg>
+    );
+}
+
+export function CapCutBigSvg() {
+    return (
+        <svg width="168" height="48">
+            <g transform='scale(2 2)'>
+                <CapCutSvg></CapCutSvg>
+            </g>
+        </svg>
+    );
+}
+
+export function CapCutSvg() {
+    return (
+        <svg width="84" height="24" viewBox="0 0 84 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M58.8765 2.07812H38.5073V4.34627H58.8765V2.07812Z" fill="currentcolor"/>
+            <path d="M83.2907 14.6536H70.197V16.9473H83.2907V14.6536Z" fill="currentcolor"/>
+            <path d="M68.8572 10.855H63.6814V13.1231H68.8572V10.855Z" fill="currentcolor"/>
+            <path d="M68.8572 2.07812H63.6814V3.95181H68.8572V2.07812Z" fill="currentcolor"/>
+            <path d="M68.8572 20.0261H63.6814V21.8998H68.8572V20.0261Z" fill="currentcolor"/>
+            <path d="M56.7989 16.5308H39.1021V18.7989H56.7989V16.5308Z" fill="currentcolor"/>
+            <path d="M47.3209 8.88257H40.7686V10.7563H47.3209V8.88257Z" fill="currentcolor"/>
+            <path d="M47.3209 11.885H40.7686V13.7587H47.3209V11.885Z" fill="currentcolor"/>
+            <path d="M41.3779 15.278V5.60645H39.0984V15.278H41.3779Z" fill="currentcolor"/>
+            <path d="M65.3259 21.8998V2.07812H63.0464V21.8998H65.3259Z" fill="currentcolor"/>
+            <path d="M69.4775 21.8998V2.07812H67.198V21.8998H69.4775Z" fill="currentcolor"/>
+            <path d="M73.4641 15.3365V5.60278H71.1846V15.3365H73.4641Z" fill="currentcolor"/>
+            <path d="M77.7773 14.6753V0.142334L75.5675 0.142334V14.6753H77.7773Z" fill="currentcolor"/>
+            <path d="M54.5596 3.01679V0.145996L52.3498 0.145996V3.01679H54.5596Z" fill="currentcolor"/>
+            <path d="M45.0303 3.01679V0.145996L42.8205 0.145996V3.01679H45.0303Z" fill="currentcolor"/>
+            <path d="M71.1846 1.97949V4.24764H79.5466C79.6803 4.24764 79.8086 4.30024 79.9035 4.39397C79.9984 4.48771 80.0522 4.61498 80.0532 4.74802V15.5445H82.3327V4.38278C82.3327 3.74636 82.0786 3.136 81.6264 2.68598C81.1741 2.23596 80.5606 1.98314 79.921 1.98314L71.1846 1.97949Z" fill="currentcolor"/>
+            <path d="M53.6272 13.6161V6.40991H51.3476V13.6161H53.6272Z" fill="currentcolor"/>
+            <path d="M40.7686 5.60278V7.48012H46.5427C46.678 7.48012 46.8078 7.53361 46.9035 7.62882C46.9992 7.72403 47.0529 7.85316 47.0529 7.98781V12.4511C47.0529 13.3852 46.8991 14.313 46.5978 15.1977L46.5721 15.2744H48.8479C49.1681 14.3671 49.3319 13.4126 49.3325 12.4511V7.54952C49.3325 7.03321 49.1264 6.53805 48.7594 6.17297C48.3925 5.80789 47.8949 5.60278 47.376 5.60278H40.7686Z" fill="currentcolor"/>
+            <path d="M55.3083 15.2744L55.3634 15.0735C55.8205 13.682 56.0377 12.2236 56.0058 10.76V5.60278H58.289V10.76C58.3199 12.2033 58.1077 13.6415 57.6613 15.015L57.5916 15.2744H55.3083Z" fill="currentcolor"/>
+            <path d="M55.2202 23.7698L55.3964 23.138C55.8034 21.8372 56.0101 20.4826 56.0094 19.1203V16.5271H57.1878C57.4798 16.5271 57.7599 16.6425 57.9664 16.848C58.173 17.0535 58.289 17.3322 58.289 17.6228V19.124C58.2894 20.4687 58.0864 21.8058 57.687 23.0905L57.4961 23.7771L55.2202 23.7698Z" fill="currentcolor"/>
+            <path d="M71.7314 23.8538H74.4809C74.876 23.3238 75.2435 22.774 75.5821 22.2066C76.8191 20.1101 77.6194 17.6301 77.7258 15.6943C77.7442 15.3693 77.7809 13.9777 77.7809 13.9741L75.5784 13.9485C75.5824 14.7681 75.5432 15.5874 75.461 16.4029C75.1759 17.9908 74.5985 19.5126 73.7577 20.8917C73.1489 21.9226 72.472 22.9121 71.7314 23.8538Z" fill="currentcolor"/>
+            <path d="M82.8612 23.8538L80.0163 18.9121H77.5496L80.1411 23.8538H82.8612Z" fill="currentcolor"/>
+            <path d="M42.5634 16.5308C42.2665 18.0719 41.6973 19.5484 40.8822 20.8917C40.2769 21.9223 39.6037 22.9118 38.8669 23.8538H41.6164C41.6164 23.8538 42.189 23.0978 42.7176 22.2066C43.7512 20.4581 44.4483 18.5333 44.7732 16.5308H42.5634Z" fill="currentcolor"/>
+            <path d="M17.6096 12.4729L31.588 19.3577V18.8098C31.5875 18.801 31.585 18.7924 31.5805 18.7848C31.576 18.7771 31.5698 18.7707 31.5623 18.766L18.1933 12.1917L17.7638 12.4035L17.6096 12.4729Z" fill="#00F7EF"/>
+            <path d="M13.9864 10.6832L23.6295 5.93509V5.20461C23.6287 4.97857 23.5546 4.75882 23.4184 4.57791C23.2822 4.397 23.0911 4.26455 22.8733 4.2002C22.8733 4.2002 22.8733 4.24037 22.8733 4.25863V4.98912L13.2302 9.73725L13.1935 9.71899L4.25513 5.31053V5.88761L13.9497 10.665L13.9864 10.6832Z" fill="#00F7EF"/>
+            <path d="M5.31607 0.942322H22.5687C23.6635 0.949613 24.714 1.37296 25.5054 2.1257C25.1285 1.48427 24.5908 0.951161 23.9448 0.578548C23.2988 0.205935 22.5666 0.00658343 21.8199 0L4.56723 0C3.43334 0.00096718 2.34617 0.449577 1.54439 1.24735C0.74261 2.04512 0.291744 3.12684 0.290772 4.25506V6.44651C0.290706 6.58994 0.330871 6.73054 0.406746 6.8525C0.482621 6.97445 0.591196 7.07292 0.720253 7.13681L1.02493 7.30482V5.19738C1.02492 4.63737 1.13602 4.08286 1.35185 3.56566C1.56768 3.04846 1.884 2.57873 2.28266 2.18342C2.68132 1.78811 3.15449 1.47499 3.67503 1.26202C4.19557 1.04904 4.75324 0.9404 5.31607 0.942322Z" fill="#00F7EF"/>
+            <path d="M26.7643 4.38279L26.8634 4.33531L31.5877 2.00142V0.766901C31.5869 0.759225 31.5841 0.75188 31.5797 0.745505C31.5753 0.73913 31.5694 0.733917 31.5626 0.730318C31.5557 0.726719 31.548 0.724843 31.5403 0.724854C31.5325 0.724864 31.5249 0.72676 31.518 0.730377L26.3789 3.28707C26.5466 3.60627 26.6701 3.9466 26.746 4.29878C26.7533 4.30974 26.757 4.34627 26.7643 4.38279Z" fill="#00F7EF"/>
+            <path d="M21.8198 19.8545H4.56713C4.4636 19.8523 4.36096 19.8351 4.26245 19.8033C4.27744 20.0714 4.39491 20.3237 4.59078 20.5084C4.78665 20.6931 5.0461 20.7963 5.31596 20.7968H22.5686C22.8493 20.7968 23.1186 20.6861 23.3175 20.4889C23.5163 20.2918 23.6285 20.0242 23.6295 19.7449V19.0144L22.8953 18.6492V18.8026C22.8944 18.942 22.8658 19.0798 22.8111 19.2082C22.7565 19.3366 22.677 19.453 22.5771 19.5507C22.4771 19.6484 22.3588 19.7256 22.2289 19.7777C22.0989 19.8298 21.9599 19.8559 21.8198 19.8545Z" fill="#00F7EF"/>
+            <path d="M1.02495 17.5317C1.02428 17.3886 1.06424 17.2482 1.14022 17.1268C1.2162 17.0053 1.32512 16.9076 1.45443 16.845L10.3451 12.4621L9.01623 11.8047L0.720272 15.9137C0.591772 15.9773 0.483567 16.0752 0.40773 16.1964C0.331893 16.3177 0.291407 16.4575 0.290791 16.6003V18.7918C0.289026 19.3692 0.406002 19.9408 0.634524 20.4716C0.863046 21.0023 1.19828 21.481 1.61961 21.878C1.2346 21.2322 1.02935 20.496 1.02495 19.745V17.5317Z" fill="#00F7EF"/>
+            <path d="M26.0156 3.43695L26.1184 3.38581L26.3716 3.26163C26.1523 2.83814 25.8632 2.45419 25.5164 2.12573C25.7333 2.50154 25.8918 2.90793 25.9862 3.33103C25.9981 3.36572 26.0079 3.40109 26.0156 3.43695Z" fill="#FF004F"/>
+            <path d="M1.0249 7.30493V7.40355C1.02484 7.54698 1.065 7.68758 1.14088 7.80953C1.21675 7.93149 1.32533 8.02995 1.45438 8.09385L9.01619 11.823L9.59984 11.5344L1.0249 7.30493Z" fill="#FF004F"/>
+            <path d="M32.2669 1.66919L31.5878 2.00156V4.26241L17.0148 11.4504L16.8606 11.5271L18.1931 12.1845L32.3109 5.22299C32.3184 5.21829 32.3247 5.21185 32.3292 5.20421C32.3336 5.19658 32.3362 5.18799 32.3366 5.17916V1.71302C32.3369 1.70472 32.335 1.69649 32.3311 1.68914C32.3272 1.68179 32.3215 1.67559 32.3144 1.67115C32.3073 1.66672 32.2992 1.6642 32.2909 1.66386C32.2825 1.66352 32.2743 1.66535 32.2669 1.66919Z" fill="#FF004F"/>
+            <path d="M13.1972 13.3313L3.51001 18.1123V18.7989C3.51062 19.0245 3.5841 19.2439 3.7196 19.4248C3.85509 19.6056 4.04543 19.7383 4.26252 19.8033C4.26252 19.8033 4.26252 19.7632 4.26252 19.7449V19.0546L13.946 14.2772L13.9827 14.259L22.8807 18.6419V18.0684L13.2376 13.3203L13.1972 13.3313Z" fill="#FF004F"/>
+            <path d="M26.0193 19.617L25.9863 19.7229C25.77 20.6658 25.2395 21.5081 24.4811 22.1128C23.7226 22.7176 22.7809 23.0493 21.8089 23.0539H4.55625C3.462 23.0512 2.41065 22.6301 1.61963 21.8778C1.99478 22.5229 2.53376 23.0585 3.18254 23.4309C3.83131 23.8034 4.56709 23.9996 5.3161 23.9999H22.5688C23.5404 23.994 24.4815 23.6618 25.2397 23.0572C25.9978 22.4527 26.5287 21.6111 26.7461 20.6689C26.754 20.6339 26.7601 20.5986 26.7645 20.563L32.2706 23.2731C32.278 23.2769 32.2863 23.2787 32.2947 23.2784C32.303 23.278 32.3111 23.2755 32.3182 23.2711C32.3252 23.2667 32.331 23.2605 32.3349 23.2531C32.3388 23.2458 32.3407 23.2375 32.3404 23.2292V19.7667C32.3403 19.7578 32.3379 19.7491 32.3334 19.7414C32.3289 19.7337 32.3224 19.7274 32.3147 19.7229L31.5805 19.3577V22.3526L26.0193 19.617Z" fill="#FF004F"/>
+            <path d="M5.31603 4.14545H22.5687C22.6723 4.14728 22.7749 4.16452 22.8734 4.19658C22.8584 3.92848 22.7409 3.67624 22.545 3.49153C22.3492 3.30683 22.0897 3.20364 21.8199 3.20312H4.56719C4.28681 3.20312 4.01791 3.31395 3.81965 3.51122C3.62139 3.70849 3.51001 3.97604 3.51001 4.25502V4.94167L4.24417 5.30691V5.19734C4.24513 5.05824 4.27361 4.9207 4.328 4.79256C4.38239 4.66441 4.46161 4.54818 4.56114 4.45051C4.66067 4.35283 4.77857 4.27561 4.90809 4.22327C5.03762 4.17093 5.17624 4.14448 5.31603 4.14545Z" fill="#FF004F"/>
+            <path d="M17.0148 11.4504L31.5878 4.26245V2.0016L26.8635 4.33184L26.7644 4.37932C26.7644 4.34645 26.7644 4.30993 26.7424 4.2734C26.6665 3.92122 26.543 3.58089 26.3753 3.26169L26.122 3.38587L26.0192 3.437C26.0213 3.40172 26.0213 3.36636 26.0192 3.33108C25.9213 2.90737 25.7592 2.50095 25.5384 2.12579C24.747 1.37304 23.6965 0.949695 22.6017 0.942404H5.34908C4.78349 0.936123 4.22226 1.04155 3.69789 1.25257C3.17353 1.46359 2.69645 1.77602 2.29427 2.17177C1.8921 2.56752 1.57282 3.03871 1.35493 3.55808C1.13704 4.07745 1.02487 4.63466 1.0249 5.19746V7.3049L9.61453 11.5271L9.03087 11.8156L10.3597 12.4731L1.46907 16.856C1.33869 16.9157 1.22786 17.0107 1.1493 17.1302C1.07074 17.2498 1.02763 17.3889 1.0249 17.5317V19.7231C1.02538 20.4815 1.23077 21.2258 1.61957 21.878C2.41059 22.6303 3.46194 23.0514 4.55619 23.0541H21.8089C22.7808 23.0495 23.7226 22.7178 24.481 22.113C25.2395 21.5083 25.77 20.666 25.9862 19.7231L26.0082 19.6172L31.5768 22.3638V19.3579L17.6095 12.4731L17.7637 12.3964L18.1931 12.1845L16.8606 11.5271L17.0148 11.4504ZM4.25519 5.88777V5.31069L3.52103 4.94545V4.25514C3.52103 3.97616 3.63241 3.70861 3.83067 3.51134C4.02894 3.31407 4.29783 3.20325 4.57822 3.20325H21.8309C22.1007 3.20376 22.3602 3.30695 22.5561 3.49165C22.7519 3.67636 22.8694 3.9286 22.8844 4.1967C23.1022 4.26106 23.2933 4.3935 23.4295 4.57441C23.5657 4.75533 23.6397 4.97508 23.6406 5.20112V5.9316L13.9974 10.6797L13.9607 10.6615L4.25519 5.88777ZM22.8807 18.0686V18.6456L23.6149 19.0109V19.7414C23.6139 20.0207 23.5017 20.2882 23.3029 20.4854C23.104 20.6826 22.8347 20.7933 22.554 20.7933H5.30136C5.0315 20.7927 4.77205 20.6896 4.57618 20.5049C4.38031 20.3202 4.26284 20.0679 4.24785 19.7998C4.03076 19.7348 3.84042 19.6021 3.70492 19.4212C3.56943 19.2404 3.49595 19.021 3.49534 18.7954V18.1124L13.1972 13.3314H13.2376L22.8807 18.0686Z" fill="currentcolor"/>
+        </svg>
+    );
+}

src/sitePages/newHome/components/theme/components/demo/index.module.scss

@@ -108,7 +108,7 @@
     border-radius: 3px;
 
     .table {
-        margin-top: 32px;
+        margin-top: 32px !important;
     }
 }
 

src/sitePages/newHome/components/theme/theme.jsx

@@ -1,34 +1,38 @@
 import { _t } from "src/utils/locale";
-import React, {useCallback, useState, useEffect, useRef} from 'react';
-import styles from './theme.module.scss'
+import React, { useCallback, useState, useEffect, useRef } from 'react';
+import styles from './theme.module.scss';
 import Demo from './components/demo';
 import classnames from 'classnames';
-import themeStyles from './themeConfig.module.scss'
+import themeStyles from './themeConfig.module.scss';
 import TopBar from "./components/topBar";
-import {compile, insertStyleToDocument, removeStyleFromDocument} from '../../utils/compileScss'
+import { compile, insertStyleToDocument, removeStyleFromDocument } from '../../utils/compileScss';
 // import { customCssVariables } from "./cutsomCssVariable";
 import { Spin } from "@douyinfe/semi-ui";
-import { larkTheme, douyinTheme, huoshanTheme } from "./theme";
+import { larkTheme, douyinTheme, huoshanTheme, capCutTheme } from "./theme";
 
 const MAP_CLASS = {
     'lark': themeStyles.demoWrapperLark,
     'douyin': themeStyles.demoWrapperDouyin,
-    'huoshan': themeStyles.demoWrapperHuoshan
-}
+    'huoshan': themeStyles.demoWrapperHuoshan,
+    'capCut': themeStyles.demoWrapperCapCut,
+};
 
 const MAP_THEME = {
     'lark': larkTheme,
     'douyin': douyinTheme,
-    'huoshan': huoshanTheme
-}
+    'huoshan': huoshanTheme,
+    'capCut': capCutTheme,
+};
 
 
 function Theme(props) {
+
     // const cache = useRef({})
     const [themeType, setThemeType] = useState('default');
     const [loading, setLoading] = useState(false);
+    
     const onChangeTheme = useCallback(async (type) => {
-        setThemeType(type)
+        setThemeType(type);
         // 添加缓存
         let css = MAP_THEME[type] || '';
         // let css;
@@ -40,55 +44,79 @@ function Theme(props) {
         //     setLoading(false)
         //     cache.current[type] = css;
         // }
-        insertStyleToDocument(css)
-    })
+        insertStyleToDocument(css);
+    });
 
     useEffect(() => {
         return () => {
-            removeStyleFromDocument()
-        }
-    }, [])
+            removeStyleFromDocument();
+        };
+    }, []);
+    
     return (
         <div {...props} className={styles.frame14296}>
             <div className={styles.group4218}>
-                <p className={styles.text}>{_t("home.theme")}</p>
+                <p className={styles.text} data-locale={"en-US"}>{_t("home.theme")}</p>
                 <p className={styles.text_5f990524}>{_t("home.theme.desc")}</p>
                 <div className={styles.frame4150}>
+                    {/* eslint-disable-next-line */}
                     <div onClick={() => onChangeTheme('default')} className={classnames(styles.selectTrigger, {[styles.selected]: themeType === 'default'})}>
                         {
                             loading && themeType === 'default'
                                 ? <Spin wrapperClassName={styles.loadingSpin}></Spin>
+                                // eslint-disable-next-line jsx-a11y/alt-text
                                 : <img src="https://lf9-static.semi.design/obj/semi-tos/images/5c4bb380-3245-11ec-ab65-77a60c02a0b5.svg" className={styles.frame3059} />
                         }
                         <div className={styles.frame4155}>
                             <p className={styles.value}><span className={styles.value_c28b964d}>Semi Design </span><span className={styles.value_79ae18fb}>{_t("default", { }, "默认")}</span></p>
                         </div>
                     </div>
+                    {/* eslint-disable-next-line */}
                     <div onClick={() => onChangeTheme('lark')} className={classnames(styles.selectTrigger_eecab517, {[styles.selected]: themeType === 'lark'})} >
                         {
                             loading && themeType === 'lark'
                                 ? <Spin wrapperClassName={styles.loadingSpin}></Spin>
-                                : <img src="https://lf9-static.semi.design/obj/semi-tos/images/5c4bb380-3245-11ec-b008-15e09471f238.svg" className={styles.frame3059} />
+                                : <div className={classnames(styles.imageWrapper, styles.frame3059)}>
+                                    {/* eslint-disable-next-line jsx-a11y/alt-text */}
+                                    <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/icon_lark-logo_colorful.svg" />
+                                </div>
                         }
                         <div className={styles.frame4155}>
                             <p className={styles.value_ee5552b6}>{_t("feishu_universe_design_theme", { }, "飞书 Universe Design 主题")}</p>
                         </div>
                     </div>
+                    {/* eslint-disable-next-line */}
                     <div onClick={() => onChangeTheme('douyin')} className={classnames(styles.selectTrigger_eecab517, {[styles.selected]: themeType === 'douyin'})}>
                         {
                             loading && themeType === 'douyin'
                                 ? <Spin wrapperClassName={styles.loadingSpin}></Spin>
-                                : <img src="https://lf9-static.semi.design/obj/semi-tos/images/douyin-logo.png" className={styles.frame3059} style={{width: 30}} />
+                                // eslint-disable-next-line jsx-a11y/alt-text
+                                : <img src="https://lf9-static.semi.design/obj/semi-tos/images/douyin-logo.png" className={styles.frame3059} style={{ width: 30 }} />
                         }
                         
                         <div className={styles.frame4155}>
                             <p className={styles.value_acee012f}>{_t("douyin_creative_service_theme", { }, "抖音创作服务主题")}</p>
                         </div>
                     </div>
+                    {/* eslint-disable-next-line */}
+                    <div onClick={() => onChangeTheme('capCut')} className={classnames(styles.selectTrigger, {[styles.selected]: themeType === 'capCut'})}>
+                        {
+                            loading && themeType === 'capCut'
+                                ? <Spin wrapperClassName={styles.loadingSpin}></Spin>
+                                // eslint-disable-next-line jsx-a11y/alt-text
+                                : <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/capcut.svg" className={styles.frame3059} />
+                        }
+                        
+                        <div className={styles.frame4155}>
+                            <p className={styles.value_79ae18fb}>{_t("capCut_theme", { }, "剪映主题")}</p>
+                        </div>
+                    </div>
+                    {/* eslint-disable-next-line */}
                     <div onClick={() => onChangeTheme('huoshan')} className={classnames(styles.selectTrigger_042dad83, {[styles.selected]: themeType === 'huoshan'})}>
                         {
                             loading && themeType === 'huoshan'
                                 ? <Spin wrapperClassName={styles.loadingSpin}></Spin>
+                                // eslint-disable-next-line jsx-a11y/alt-text
                                 : <img src="https://lf9-static.semi.design/obj/semi-tos/images/5c4d8840-3245-11ec-b393-ab4adc2e449f.svg" className={styles.frame3059} />
                         }
                         
@@ -98,7 +126,7 @@ function Theme(props) {
                     </div>
                 </div>
             </div>
-            <div className={styles.demoWrapper}>
+            <div className={styles.demoWrapper} data-theme={"theme"}>
                 <TopBar></TopBar>
                 <Demo className={MAP_CLASS[themeType]}></Demo>
             </div>

src/sitePages/newHome/components/theme/theme.module.scss

@@ -16,19 +16,24 @@
     width: 321px;
     margin: 0 0 16px;
     font-size: 32px;
-    font-family: PingFang SC;
+    font-family: "PingFang SC";
     color: var(--semi-color-text-0);
     line-height: 44px;
     font-weight: bold;
     text-align: center;
     vertical-align: middle;
+    letter-spacing: 0em;
+}
+
+.title_en {
+    font-weight: 700;
 }
 
 .text_5f990524 {
     min-width: 450px;
     margin: 0 0 32px;
     font-size: 18px;
-    font-family: PingFang SC;
+    font-family: "PingFang SC";
     color: var(--semi-color-text-0);
     line-height: 32px;
     font-weight: 400;
@@ -81,7 +86,7 @@
 
 .value_c28b964d {
     font-size: 14px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-text-0);
     line-height: 20px;
     font-weight: 400;
@@ -90,10 +95,11 @@
 
 .value_79ae18fb {
     font-size: 14px;
-    font-family: PingFang SC;
+    font-family: "PingFang SC";
     color: var(--semi-color-text-0);
     line-height: 20px;
     font-weight: 400;
+    white-space: nowrap;
 }
 
 .selectTrigger_eecab517 {
@@ -115,7 +121,7 @@
 .value_ee5552b6 {
     min-width: 169px;
     font-size: 14px;
-    font-family: Inter;
+    font-family: "Inter";
     color: var(--semi-color-text-0);
     line-height: 20px;
     font-weight: 400;
@@ -146,7 +152,7 @@
 .value_acee012f {
     min-width: 112px;
     font-size: 14px;
-    font-family: PingFang SC;
+    font-family: "PingFang SC";
     color: var(--semi-color-text-0);
     line-height: 20px;
     font-weight: 400;
@@ -182,7 +188,7 @@
 .value_2b63d90d {
     min-width: 84px;
     font-size: 14px;
-    font-family: PingFang SC;
+    font-family: "PingFang SC";
     color: var(--semi-color-text-0);
     line-height: 20px;
     font-weight: 400;
@@ -207,3 +213,15 @@
     height: 30px;
     margin-right: 8px;
 }
+
+.imageWrapper {
+    width: 30px;
+    height: 30px;
+    box-sizing: border-box;
+    border: 1px solid var(--semi-color-border);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #FFFFFF
+}

src/sitePages/newHome/components/theme/themeConfig.module.scss

@@ -98,7 +98,36 @@ body .demoWrapperHuoshan {
     --semi-color-primary-light-default: #e8f3ff;
 }
 
-
+body .demoWrapperCapCut {
+    // palette
+    --semi-blue-8: 212,235,255;
+    --semi-purple-8: 240,206,239;
+    --semi-orange-8: 255,241,208;
+    --semi-blue-5: 84,166,255;
+    --semi-purple-5: 187,83,194;
+    --semi-orange-5: 255,182,67;
+    --semi-pink-5: 239,86,122;
+    --semi-teal-5: 51,194,187;
+    --semi-grey-9: 249,249,249;
+     
+    // global
+    --semi-color-success-light-default: rgba(18,60,27, 0.15);
+    --semi-border-radius-extra-small: 3px;
+    --semi-border-radius-small: 3px;
+    --semi-color-text-0: rgba(249, 249, 249, 1);
+    --semi-color-text-2: rgba(249, 249, 249, 0.6);
+    --semi-color-disabled-text: rgba(249, 249, 249, 0.35);;
+    --semi-color-bg-0: rgb(22, 22, 26);
+    --semi-color-bg-2: rgb(53, 54, 60);
+    --semi-color-border: rgba(59, 58, 52, 1);
+    --semi-color-fill-0: rgba(234, 234, 230,  0.05);
+    --semi-color-fill-1: rgba(234, 234, 230, 0.09);
+    --semi-color-fill-2: rgba(234, 234, 230, 0.13);
+    --semi-color-primary: rgba(253, 224, 67, 1);
+    --semi-color-primary-hover: rgba(253,236,113, 1);
+    --semi-color-primary-active: rgba(254, 246, 160, 1);
+    --semi-color-primary-light-default: rgba(84, 74, 3, 1);
+}
 
 body[theme-mode='dark'] {
     .demoWrapperLark {
@@ -191,4 +220,34 @@ body[theme-mode='dark'] {
         --semi-color-primary-light-default: rgb(239,248,255);
     }
 
-}
+    .demoWrapperCapCut {
+        // palette
+        --semi-blue-8: 212,235,255;
+        --semi-purple-8: 240,206,239;
+        --semi-orange-8: 255,241,208;
+        --semi-blue-5: 84,166,255;
+        --semi-purple-5: 187,83,194;
+        --semi-orange-5: 255,182,67;
+        --semi-pink-5: 239,86,122;
+        --semi-teal-5: 51,194,187;
+        --semi-grey-9: 249,249,249;
+         
+        // global
+        --semi-color-success-light-default: rgba(18,60,27, 0.15);
+        --semi-border-radius-extra-small: 3px;
+        --semi-border-radius-small: 3px;
+        --semi-color-text-0: rgba(249, 249, 249, 1);
+        --semi-color-text-2: rgba(249, 249, 249, 0.6);
+        --semi-color-disabled-text: rgba(249, 249, 249, 0.35);;
+        --semi-color-bg-0: rgb(22, 22, 26);
+        --semi-color-bg-2: rgb(53, 54, 60);
+        --semi-color-border: rgba(59, 58, 52, 1);
+        --semi-color-fill-0: rgba(234, 234, 230,  0.05);
+        --semi-color-fill-1: rgba(234, 234, 230, 0.09);
+        --semi-color-fill-2: rgba(234, 234, 230, 0.13);
+        --semi-color-primary: rgba(253, 224, 67, 1);
+        --semi-color-primary-hover: rgba(253,236,113, 1);
+        --semi-color-primary-active: rgba(254, 246, 160, 1);
+        --semi-color-primary-light-default: rgba(84, 74, 3, 1);
+    }
+}

src/sitePages/newHome/index.jsx

@@ -1,31 +1,43 @@
-import React, { useEffect } from 'react';
-import Banner from './components/banner/banner.jsx'
+import React, { useEffect, useState } from 'react';
+import Banner from './components/banner/banner.jsx';
 import Products from './components/products/products.jsx';
+import Feature from './components/feature/feature.jsx';
 import Comments from './components/comments/comments.jsx';
-import Resource from './components/resource/resource.jsx'
+import DeepContent from './components/deepContent/deepContent.jsx';
+import Resource from './components/resource/resource.jsx';
 import Dsm from './components/dsm/dsm.jsx';
 import Pro from './components/pro/pro.jsx';
-import Theme from './components/theme/theme.jsx'
-import styles from './index.module.scss'
+import Application from './components/application/application.jsx';
+import Theme from './components/theme/theme.jsx';
+import styles from './index.module.scss';
 import { getLocale } from '../../utils/locale.js';
-import classnames from 'classnames'
+import classnames from 'classnames';
 import AOS from 'aos';
 import 'aos/dist/aos.css';
 
 function NewHome() {
-    const locale = getLocale();
+    const [locale, setLocale] = useState('');
+
+    useEffect(() => {
+        AOS.init();
+    }, []);
+
     useEffect(() => {
-        AOS.init()
-    }, [])
+        setLocale(getLocale());
+    }, []);
+
     return (
-        <div className={classnames(styles.homePage, {[styles.homeEnglish]: locale === 'en-US'})}>
+        <div className={classnames(styles.homePage, { [styles.homeEnglish]: locale === 'en-US' })}>
             <Banner></Banner>
             <Products data-aos="fade-in"></Products>
-            <Resource data-aos="fade-in"></Resource>
+            <Feature data-aos="fade-in"></Feature>
             <Theme data-aos="fade-in"></Theme>
             <Dsm data-aos="fade-in"></Dsm>
             <Pro data-aos="fade-in"></Pro>
+            <Application data-aos="fade-in"></Application>
+            <DeepContent data-aos="fade-in"></DeepContent>
             <Comments data-aos="fade-in"></Comments>
+            <Resource data-aos="fade-in"></Resource>
         </div>
     );
 }

src/sitePages/newHome/index.module.scss

@@ -4,6 +4,7 @@ p {
 
 .homePage {
     overflow-x: hidden;
+    font-family: "Inter","PingFang SC";
 }
 
 .homeEnglish {
@@ -12,4 +13,8 @@ p {
     span {
         font-family: 'Inter' !important;
     }
+
+    *[data-locale=en-US] {
+        font-weight: 700;
+    }
 }