📝 Add promote link in home page

docs/react/recommendation.en-US.md

@@ -36,6 +36,19 @@ title: Third-Party Libraries
 | Keywords highlight | [react-highlight-words](https://github.com/bvaughn/react-highlight-words) |
 | Animation | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) |
 
+## Products we are using ✨
+
+There are some products to recommend for developer/designer/product manager.
+
+| Category | Recommended Products |
+| --- | --- |
+| Documentation | [🐦 Yuque](https://www.yuque.com/?chInfo=ch_antd) |
+| Icon | [Iconfont](https://www.iconfont.cn/) |
+| Sketch plugin | [Kitchen](https://kichen.alipay.com) |
+| Online Playground | [codesandbox](https://codesandbox.io/) [codepen](https://codepen.io/) |
+| Image Compressor | [tinypng](https://tinypng.com/) |
+| Charts Dictionary | [G2](https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html) [图之典](http://tuzhidian.com/) |
+
 <style>
 .markdown table td:first-child {
   font-weight: 500;

docs/react/recommendation.zh-CN.md

@@ -36,6 +36,19 @@ title: 社区精选组件
 | 关键字高亮 | [react-highlight-words](https://github.com/bvaughn/react-highlight-words) |
 | 动画 | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) |
 
+## 推荐产品 ✨
+
+还有一些常用的前端/设计/产品相关的工具推荐给大家使用。
+
+| 类型 | 推荐产品 |
+| --- | --- |
+| 文档管理 | [🐦 语雀](https://www.yuque.com/?chInfo=ch_antd) |
+| 图标 | [阿里巴巴矢量图标库](https://www.iconfont.cn/) |
+| Sketch 插件 | [Kitchen](https://kichen.alipay.com) |
+| 在线代码编辑 | [codesandbox](https://codesandbox.io/) [codepen](https://codepen.io/) |
+| 图片压缩 | [tinypng](https://tinypng.com/) |
+| 图表分类查询 | [G2](https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html) [图之典](http://tuzhidian.com/) |
+
 <style>
 .markdown table td:first-child {
   font-weight: 500;

site/theme/en-US.js

@@ -47,6 +47,8 @@ module.exports = {
     'app.home.tool-kitchen-title': 'Kitchen',
     'app.home.tool-kitchen-content': 'A Sketch tools for designers',
     'app.home.getting-started': 'Getting Started',
+    'app.home.recommend': 'Recommend',
+    'app.home.recommend.yuque': 'Yuque, our favorite documentation tool',
     'app.home.more': 'Learn more',
     'app.home.more-mobile-react': 'Ant Design Mobile of React',
     'app.home.more-mobile-angular': 'Ant Design Mobile of Angular',

site/theme/static/home.less

@@ -103,28 +103,68 @@
     align-items: center;
     min-width: 520px;
     margin-top: 24px;
+
+    .banner-btn {
+      display: inline-block;
+      height: 40px;
+      padding: 0 24px;
+      font-size: 16px;
+      font-family: Avenir, @font-family, sans-serif;
+      line-height: 40px;
+      text-align: center;
+      text-decoration: none;
+      border: 1px solid @home-bg-color;
+      border-radius: 6px;
+    }
+
+    .banner-btn.components {
+      color: #fff;
+      background: @home-bg-color;
+    }
+
+    .banner-btn.language {
+      color: @home-bg-color;
+    }
   }
 
-  .banner-btn {
-    display: inline-block;
-    height: 40px;
-    padding: 0 24px;
-    font-size: 16px;
-    font-family: Avenir, @font-family, sans-serif;
-    line-height: 40px;
-    text-align: center;
-    text-decoration: none;
-    border: 1px solid #2f54eb;
-    border-radius: 100px;
-  }
+  .banner-promote {
+    max-width: 100%;
+    margin: 48px 0 24px 0;
 
-  .banner-btn.components {
-    color: #fff;
-    background: #2f54eb;
-  }
+    .ant-divider-inner-text {
+      padding: 0 12px;
+      color: rgba(0, 0, 0, 0.25);
+      font-weight: normal;
+      font-size: 12px;
+    }
 
-  .banner-btn.language {
-    color: #2f54eb;
+    a {
+      color: @home-text-color;
+      font-size: 16px;
+      transition: all 0.3s;
+
+      .anticon {
+        position: relative;
+        left: 0;
+        transition: all 0.3s;
+      }
+
+      &:hover {
+        color: @home-bg-color;
+
+        .anticon {
+          left: 4px;
+        }
+      }
+
+      img {
+        position: relative;
+        top: -1px;
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+      }
+    }
   }
 }
 
@@ -404,12 +444,23 @@ svg {
   }
 }
 
-.github-btn {
+.github-btn-large {
+  height: 40px;
   font-family: Avenir, @font-family, sans-serif;
-  &-large {
-    .gh-btn,
-    .gh-count {
-      padding: 4px 8px 2px;
+  line-height: 40px;
+
+  .gh-btn,
+  .gh-count {
+    height: 40px;
+    padding: 9px;
+    background: transparent;
+  }
+
+  .gh-count {
+    margin-left: 10px;
+
+    &::after {
+      border-width: 7px 6px 7px 0;
     }
   }
 }

site/theme/static/responsive.less

@@ -195,18 +195,18 @@
     }
     .img-wrapper {
       position: initial;
-      margin-top: 32px;
+      margin-top: 20px;
       text-align: center;
       svg {
         width: 100%;
-        max-width: 360px;
+        max-width: 260px;
         height: auto;
         margin: 0 auto;
       }
     }
     .text-wrapper {
       min-height: 200px;
-      margin-top: 48px;
+      margin-top: 32px;
       padding: 0;
       h1 {
         display: none;
@@ -227,6 +227,19 @@
           font-size: 14px;
         }
       }
+      .banner-promote {
+        margin-top: 32px;
+        .ant-divider {
+          display: none;
+        }
+        a {
+          font-size: 14px;
+          white-space: nowrap;
+          img {
+            width: 20px;
+          }
+        }
+      }
     }
   }
   .page1 {

site/theme/template/Home/Banner.jsx

@@ -5,7 +5,7 @@ import ScrollParallax from 'rc-scroll-anim/lib/ScrollParallax';
 import { Link } from 'bisheng/router';
 import { FormattedMessage, useIntl } from 'react-intl';
 import GitHubButton from 'react-github-button';
-import { Button } from 'antd';
+import { Button, Divider, Icon } from 'antd';
 import BannerImage from './BannerImage';
 import * as utils from '../utils';
 
@@ -75,6 +75,37 @@ const Banner = ({ isMobile }) => {
               />
             )}
           </div>
+          <div
+            key="promote"
+            className="banner-promote"
+            style={{
+              width: isZhCN ? 412 : 522,
+            }}
+          >
+            <Divider>
+              <FormattedMessage id="app.home.recommend" />
+            </Divider>
+            <a
+              href="https://www.yuque.com/?chInfo=ch_antd"
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={() => {
+                if (window.gtag) {
+                  window.gtag('event', '点击', {
+                    event_category: '首页推广',
+                    event_label: 'https://www.yuque.com/?chInfo=ch_antd',
+                  });
+                }
+              }}
+            >
+              <img
+                src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
+                alt="yuque logo"
+              />
+              <FormattedMessage id="app.home.recommend.yuque" />
+              <Icon type="right" style={{ marginLeft: 6, fontSize: 12, opacity: 0.6 }} />
+            </a>
+          </div>
         </QueueAnim>
         {!isMobile && (
           <div className="img-wrapper" key="image">

site/theme/zh-CN.js

@@ -44,6 +44,8 @@ module.exports = {
     'app.home.tool-kitchen-title': 'Kitchen',
     'app.home.tool-kitchen-content': '一个为设计师提效的 Sketch 工具集',
     'app.home.getting-started': '开始使用',
+    'app.home.recommend': '推荐',
+    'app.home.recommend.yuque': '语雀，我们都喜欢的文档工具',
     'app.home.more': '查看更多',
     'app.home.more-mobile-react': 'Ant Design Mobile of React',
     'app.home.more-mobile-angular': 'Ant Design Mobile of Angular',