docs: update home landing

src/locale/en-US.js

@@ -81,7 +81,10 @@ const appLocale = {
         "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.desc": "Design with real code components，convert your deisgn to code with one click",
+        "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",
+        "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.",

src/locale/zh-CN.js

@@ -115,7 +115,10 @@ const appLocale = {
         "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": "公测",
 
         "default": "默认",
         "feishu_universe_design_theme": "飞书 Universe Design 主题",

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

@@ -1,23 +1,61 @@
-import { _t } from "src/utils/locale";
+import { _t } from 'src/utils/locale';
 import React from 'react';
+import { Button, Tag } from '@douyinfe/semi-ui';
 import styles from './pro.module.scss';
+import { navigate } from 'gatsby-link';
+import { getLocale } from '../../../../utils/locale';
 
 function Pro(props) {
+    const goD2CStart = () => {
+        navigate(`/code/${getLocale()}/start/quick-start`);
+    };
+    const isInternal = process.env.D2C_URL;
+
     return (
         <div {...props} className={styles.macBookPro2}>
             <div className={styles.frame14294}>
                 <div className={styles.frame4151}>
-                    <p className={styles.semiPro}>Semi Pro</p>
-                </div>
-                <p className={styles.text}><span className={styles.text_4c571d3f}>{_t("home.pro.desc", { }, "基于")}</span></p>
-                <div className={styles.buttonSecondarySolid}>
-                    <p className={styles.text_001dc6a1}>{_t("under_construction", { }, "建设中")}</p>
+                    <p className={styles.semiPro}>{_t('home.pro.title')}</p>
+                    {isInternal && (
+                        <Tag style={{ color: '#F0B114', background: '#41464C', marginLeft: 12 }}>
+                            {_t('beta', {}, '公测')}
+                        </Tag>
+                    )}
                 </div>
+                <p className={styles.text}>
+                    <span className={styles.text_4c571d3f}>{_t('home.pro.desc', {}, '基于')}</span>
+                </p>
+                {isInternal ? (
+                    <Button onClick={goD2CStart} size="large" theme="solid" className={styles.extraLarge}>
+                        {_t('home.pro.start', {}, '快速开始')}
+                    </Button>
+                ) : (
+                    <div className={styles.buttonSecondarySolid}>
+                        <p className={styles.text_001dc6a1}>{_t('under_construction', {}, '建设中')}</p>
+                    </div>
+                )}
             </div>
-            <div className={styles.autoWrapper}><img src="https://lf9-static.semi.design/obj/semi-tos/images/homepage-pro-code.jpg" className={styles.syntaxHighlighter} />
+            <div className={styles.autoWrapper}>
+                <img
+                    src="https://lf9-static.semi.design/obj/semi-tos/images/homepage-pro-code.jpg"
+                    className={styles.syntaxHighlighter}
+                />
                 <div className={styles.rectangle1080}></div>
                 <div className={styles.frame14295}>
-                    <div className={styles.autoWrapper}><img src="https://lf9-static.semi.design/obj/semi-tos/images/5de23960-3242-11ec-8b14-8fb159794ae4.png" className={styles.chromeStandart} /><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>
+                    <div className={styles.autoWrapper}>
+                        <img
+                            src="https://lf9-static.semi.design/obj/semi-tos/images/5de23960-3242-11ec-8b14-8fb159794ae4.png"
+                            className={styles.chromeStandart}
+                        />
+                        <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>
                 </div>
             </div>
         </div>

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

@@ -23,7 +23,7 @@
 }
 
 .semiPro {
-    width: 321px;
+    // width: 321px;
     font-size: 32px;
     font-family: Inter;
     color: var(--semi-color-white);
@@ -82,6 +82,17 @@
     vertical-align: top;
 }
 
+.extraLarge {
+    height: 48px;
+    padding: 12px 24px;
+    border-radius: 6px;
+
+    :global(.semi-button-content) {
+        font-size: 16px;
+        line-height: 22px;
+    }
+}
+
 .autoWrapper {
     position: relative;
     line-height: 0;