docs: update homepage banner description

content/start/introduction/index.md

@@ -9,7 +9,7 @@ brief: Semi Design 是一个设计系统，它定义了一套中后台设计与
 
 ## 什么是 Semi
 
-Semi Design 是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。它作为全面、易用、优质的现代企业级应用 UI 解决方案，从字节跳动各业务线的复杂场景提炼而来，支撑近千计平台产品，服务内外部 10 万+ 用户。
+Semi Design 是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。它作为全面、易用、优质的现代应用 UI 解决方案，从字节跳动各业务线的复杂场景提炼而来，支撑近千计平台产品，服务内外部 10 万+ 用户。
 
 ## 我们的愿景
 

src/components/CaseDiff/index.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import cls from 'classnames';
+import { IconTickCircle, IconClear } from '@douyinfe/semi-icons';
+import './index.scss';
+
+const CaseDiff = (props) => {
+
+
+    let footerCls = cls({
+        'semi-case-diff-footer': true,
+        'semi-case-diff-footer-good': props.type === 'good',
+        'semi-case-diff-footer-bad': props.type === 'bad',
+    });
+    return (
+        <div style={{ border: '1px solid var(--semi-color-border)' }} {...props.style}>
+            <div className='semi-case-diff-content' style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                {props.children}
+            </div>
+            <div className={footerCls} style={{ height: 56 }}>
+                {props.type === 'good' ? <IconTickCircle />: null}
+                {props.type === 'bad' ? <IconClear />: null}
+                {props.title}
+            </div>
+        </div>
+    );
+};
+
+export default CaseDiff;

src/components/CaseDiff/index.scss

@@ -0,0 +1,14 @@
+
+
+
+.semi-case-diff-footer-good {
+    background-color: var(--semi-color-success-light-default);
+    border-top: 4px solid var(--semi-color-success);
+    color: var(--semi-color-success);
+}
+
+.semi-case-diff-footer-bad {
+    background-color: var(--semi-color-danger-light-default);
+    color: var(--semi-color-danger);
+    border-top: 4px solid var(--semi-color-danger);
+}

src/locale/en-US.js

@@ -99,8 +99,8 @@ const appLocale = {
         "component_design__referring_to_the_design_schemes_of_other_business_platforms__s_e47da10ff860ba8b9db1268c06011006": "Component design, referring to the design schemes of other business platforms, summarizes its own front-end specifications and unifies the delivery standards of the platform.",
         "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": "with Semi Design",
+        // "comprehensive__easy_to_use_and_high_quality": "Build your next app",
+        "enterprise_product_design_system": "Where Design & Dev Work Together",
         "content_security": "Content Security",
         "default": "Default",
         "design": "Design",

src/locale/zh-CN.js

@@ -73,9 +73,9 @@ const appLocale = {
         'icon.list.tab.stroked': '线性图标',
 
         // new  Home
-        "comprehensive__easy_to_use_and_high_quality": "全面、易用、优质的",
-        "enterprise_product_design_system": "企业级产品设计系统",
-        "home.banner.description": "由字节跳动抖音前端与 UED 团队设计、开发并维护，包含设计语言、React 组件、主题等开箱即用的中后台解决方案，帮助设计师与开发者打造高质量产品。",
+        // "comprehensive__easy_to_use_and_high_quality": "全面、易用、优质的",
+        "enterprise_product_design_system": "连接设计师与开发者",
+        "home.banner.description": "由抖音前端与 UED 团队维护，易于定制的现代化设计系统，帮助设计师与开发者打造高质量产品。",
         "start_using": "开始使用",
         "now_serving_100_000": "现已服务 10 万 + 用户",
         "user": "用户",

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

@@ -5,7 +5,7 @@ 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 { IconGithubLogo } from '@douyinfe/semi-icons';
 
 function Banner() {
     const goStart = () => {
@@ -19,13 +19,28 @@ function Banner() {
             <div className={styles.autoWrapper}>
                 <div className={styles.content}>
                     <div className={styles.headerCopy}>
-                        <p className={styles.text}>{_t("comprehensive__easy_to_use_and_high_quality", { }, "全面、易用、优质的")}<br />{_t("enterprise_product_design_system", { }, "企业级产品设计系统")}</p>
+                        <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>
-
+                        <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}>

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

@@ -28,7 +28,7 @@
 }
 
 .text {
-    width: 480px;
+    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;
@@ -41,7 +41,7 @@
 }
 
 .text_63fb91b5 {
-    width: 480px;
+    width: 596px;
     font-size: 18px;
     color: var(--semi-color-text-0);
     line-height: 32px;