feat: new footer

src/components/Footer/index.jsx

@@ -1,24 +1,79 @@
 /* eslint-disable max-lines-per-function */
 import React, { Component } from 'react';
-import UserContext from 'context/context';
-import './footer.scss';
-import { _t } from 'src/utils/locale';
-import { getLocale } from '../../utils/locale';
-import { IconBytedanceLogo } from '@douyinfe/semi-icons';
+import { FormattedMessage } from 'react-intl';
+
+import './index.scss';
+import { getLocale } from "../../utils/locale";
+const _t = id => <FormattedMessage id={id} />;
 
 export class Footer extends Component {
-    static contextType = UserContext;
+
 
     render() {
+        const locale = getLocale();
+        const { style } = this.props;
         return (
-            <div className='footerMini8' id="footer"><img alt="semi logo" aria-hidden src="https://lf9-static.semi.design/obj/semi-tos/images/a5768a90-324e-11ec-b393-ab4adc2e449f.svg" className='group6' />
-                <div className='links'>
-                    <a href={`/${getLocale()}/start/getting-started`} className='text'>{_t('footer.component')}</a>
-                    <a href='https://figma.com/@semi' className='figmaUIKit' target="_blank" rel="noreferrer">Figma UIKit</a>
-                    <p className='text_d3ba282e'><a href={DSM_URL?DSM_URL:"https://semi.design/dsm/landing"} className='text_8b88424e' target="_blank" rel="noreferrer">{_t('footer.dsm')}</a></p>
-                    <a href="https://github.com/DouyinFE/semi-design" className='github' target="_blank" rel="noreferrer">GitHub</a>
+            <footer className="footer" style={{ ...style, zIndex: 10 }}>
+                <div className="footer-circle" />
+                <div className="footer-link" style={{ width: "inherit" }}>
+                    {/*<Icon className="footer-icon" type="doc-semi-logo" />*/}
+                    <img alt="semi logo" style={{ height: "fit-content" }} aria-hidden src="https://lf9-static.semi.design/obj/semi-tos/images/a5768a90-324e-11ec-b393-ab4adc2e449f.svg" className='group6' />
+                    <div className="link-col">
+                        <p className="link-group">{_t('footer.design')}</p>
+                        <a href={`/${locale}/start/introduction`}>Semi UI</a>
+                        <a href={`/code`}>
+                            Semi D2C
+                        </a>
+                        <a href={`/dsm`}>Semi DSM</a>
+                        <a href={`/template`}>Semi Template</a>
+                    </div>
+                    <div className="link-col">
+                        <p className="link-group">Semi x Figma</p>
+                        <a
+                            href={`https://www.figma.com/community/file/1034817675495341827`}
+                        >
+                            Figma UIKit
+                        </a>
+                        <a
+                            href={`https://www.figma.com/community/file/1034817061440731906`}
+                        >
+                            Figma Iconset
+                        </a>
+                        <a
+                            href={`https://www.figma.com/community/plugin/1166339852662786534/semi-design`}
+                        >
+                            Figma Plugin
+                        </a>
+                    </div>
+                    <div className="link-col">
+                        <p className="link-group">{_t('footer.getInfo')}</p>
+                        <a href="https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=a12h8083-7d57-46cd-b431-5f388a0ce410">
+                            {_t('footer.getInfo.lark')}
+                        </a>
+                        <a href="https://twitter.com/SemiDesignUI">
+                            Twitter
+                        </a>
+                        <a href="https://medium.com/@semi-design">
+                            Medium
+                        </a>
+                        <a href="https://dev.to/semidesign">
+                            Dev.to
+                        </a>
+                        <a href="https://www.xiaohongshu.com/user/profile/5cf030c20000000010013636">
+                            {_t('footer.getInfo.redBook')}
+                        </a>
+                    </div>
+                    <div className="link-col">
+                        <p className="link-group">{_t('footer.friends')}</p>
+                        <a href={"https://www.rspack.dev/"}>
+                            Rspack
+                        </a>
+                        <a href={"https://www.visactor.io/"}>
+                            Visactor
+                        </a>
+
+                    </div>
                 </div>
-                <img src="https://lf9-static.semi.design/obj/semi-tos/images/a577c310-324e-11ec-8b14-8fb159794ae4.svg" className='divider' aria-hidden alt='' />
                 <div className='autoWrapper'>
                     <div className='icpWrapper'>
                         <p className={'a2021SemiDesignAllRi'}>© 2021 - {new Date().getFullYear()} Semi Design. All rights reserved.</p>
@@ -38,8 +93,9 @@ export class Footer extends Component {
                         <a href="https://dribbble.com/MetaEnterpriseDesign" className='designedDevelopedWit_6eaa79ba'>MED</a>
                     </p>
                 </div>
-            </div>
+            </footer>
         );
     }
 }
+
 export default Footer;

src/components/Footer/index.scss

@@ -0,0 +1,142 @@
+body[theme-mode='dark'] {
+    .footer {
+        background: #1C1F23;
+    }
+}
+
+.footer {
+    position: relative;
+    background: #1C1F23;
+    margin-top: 60px;
+    // width: 1440px;
+    height: 456px;
+    box-sizing: border-box;
+    padding: 64px 96px 48px 96px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+
+    &-circle {
+        position: absolute;
+        top: 204px;
+        left: -100px;
+        width: 151px;
+        height: 151px;
+        border-radius: 50%;
+        background: #FFD166;
+    }
+
+    &-icon {
+        margin-right: 100px;
+    }
+
+    &-link {
+        display: flex;
+        justify-content: space-between;
+        width: 1118px;
+
+        .semi-icons {
+            width: 112px;
+            height: 42px;
+            color: var(--color-white);
+        }
+    }
+
+    .link-col {
+        text-align: left;
+        padding-left: 50px;
+
+        &:first-of-type {
+            padding-left: 0;
+        }
+
+        // padding-right: 78px;
+        .link-group {
+            color: var(--semi-color-white);
+            font-weight: 600;
+            margin-bottom: 20px;
+            margin-top: 0;
+        }
+
+        a {
+            display: block;
+            color: var(--semi-color-white);
+            margin-top: 0;
+            margin-bottom: 16px;
+
+            &:hover {
+                color: var(--semi-color-white);
+                cursor: pointer;
+            }
+        }
+    }
+
+    .autoWrapper {
+        width: 1110px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    }
+    .icpWrapper {
+        display: flex;
+    }
+    .a2021SemiDesignAllRi {
+        margin: 0px 8px 0px 0px;
+        font-size: 14px;
+        font-family: Inter;
+        color: #d9dbe1ff;
+        line-height: 24px;
+        font-weight: 400;
+        text-align: left;
+        vertical-align: top;
+    }
+
+    .image45 {
+        width: 20px;
+        height: 20px;
+        margin: 0px 4px 0px 0px;
+    }
+
+    .beianText {
+        margin-right: 8px;
+        font-size: 14px;
+        font-family: Inter;
+        color: #d9dbe1ff;
+        line-height: 24px;
+        font-weight: 400;
+        text-align: left;
+        vertical-align: top;
+    }
+    .designedDevelopedWit {
+        min-width: 352px;
+        font-size: 14px;
+        font-family: Inter;
+        color: #000000;
+        line-height: 24px;
+        font-weight: 400;
+        text-align: left;
+        vertical-align: top;
+    }
+
+    .designedDevelopedWit_c0c5d39b {
+        font-size: 14px;
+        font-family: Inter;
+        color: #d9dbe1ff;
+        line-height: 24px;
+        font-weight: 400;
+    }
+
+    .designedDevelopedWit_6eaa79ba {
+        font-size: 14px;
+        font-family: Inter;
+        color: #01ffc3ff;
+        line-height: 24px;
+        font-weight: 400;
+        &:hover {
+            color: #01ffc3ff;
+        }
+    }
+}

src/components/FooterBak/index.jsx

@@ -0,0 +1,45 @@
+/* eslint-disable max-lines-per-function */
+import React, { Component } from 'react';
+import UserContext from 'context/context';
+import './footer.scss';
+import { _t } from 'src/utils/locale';
+import { getLocale } from '../../utils/locale';
+import { IconBytedanceLogo } from '@douyinfe/semi-icons';
+
+export class Footer extends Component {
+    static contextType = UserContext;
+
+    render() {
+        return (
+            <div className='footerMini8' id="footer"><img alt="semi logo" aria-hidden src="https://lf9-static.semi.design/obj/semi-tos/images/a5768a90-324e-11ec-b393-ab4adc2e449f.svg" className='group6' />
+                <div className='links'>
+                    <a href={`/${getLocale()}/start/getting-started`} className='text'>{_t('footer.component')}</a>
+                    <a href='https://figma.com/@semi' className='figmaUIKit' target="_blank" rel="noreferrer">Figma UIKit</a>
+                    <p className='text_d3ba282e'><a href={DSM_URL?DSM_URL:"https://semi.design/dsm/landing"} className='text_8b88424e' target="_blank" rel="noreferrer">{_t('footer.dsm')}</a></p>
+                    <a href="https://github.com/DouyinFE/semi-design" className='github' target="_blank" rel="noreferrer">GitHub</a>
+                </div>
+                <img src="https://lf9-static.semi.design/obj/semi-tos/images/a577c310-324e-11ec-8b14-8fb159794ae4.svg" className='divider' aria-hidden alt='' />
+                <div className='autoWrapper'>
+                    <div className='icpWrapper'>
+                        <p className={'a2021SemiDesignAllRi'}>© 2021 - {new Date().getFullYear()} Semi Design. All rights reserved.</p>
+                        {
+                            getLocale() !== 'en-US' ? (
+                                <>
+                                    <a href="https://beian.miit.gov.cn/" target="_blank" className={'beianText'} rel="noreferrer">京ICP备19058139号-13</a>
+                                    <img src="https://lf9-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/beian.png" className={'image45'} alt=''/>
+                                    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011002016131" target="_blank" className={'beianText'} rel="noreferrer">浙公网安备 33011002016131号</a>
+                                </>) : null
+                        }
+                    </div>
+                    <p className='designedDevelopedWit'>
+                        <span className='designedDevelopedWit_c0c5d39b'> Designed & Developed with love by </span>
+                        <span className='designedDevelopedWit_6eaa79ba'>Douyin FE</span>
+                        <span className='designedDevelopedWit_c0c5d39b'> & </span>
+                        <a href="https://dribbble.com/MetaEnterpriseDesign" className='designedDevelopedWit_6eaa79ba'>MED</a>
+                    </p>
+                </div>
+            </div>
+        );
+    }
+}
+export default Footer;

src/locale/en-US.js

@@ -22,6 +22,13 @@ const appLocale = {
         'footer.component': 'React Component Library',
         'footer.dsm': 'Theme & DSM',
 
+        //new footer
+        "footer.design": "Design System",
+        "footer.getInfo": "Get Semi News",
+        "footer.getInfo.lark": "Semi Lark Group",
+        "footer.getInfo.redBook": "xiaohongshu",
+        "footer.friends": "Friends",
+
         // search
         'search.belong.component': 'Component',
         'search.belong.material': 'Material',

src/locale/zh-CN.js

@@ -22,6 +22,15 @@ const appLocale = {
         'footer.component': 'React 组件库',
         'footer.dsm': '主题与 DSM',
 
+        //new footer
+        "footer.design": "设计系统",
+        "footer.getInfo": "获取 Semi 动态",
+        "footer.getInfo.lark": "Semi 飞书群",
+        "footer.getInfo.redBook": "小红书",
+        "footer.friends": "友情链接",
+
+
+
         // search
         'search.belong.component': '组件',
         'search.belong.material': '物料',