From 857cd66e029248ce9bc9e34455a3882ea1352dd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Mon, 24 Oct 2022 16:16:39 +0800
Subject: [PATCH] docs: site of links

---
 .dumi/pages/index/index/Banner.tsx          |   7 +-
 .dumi/pages/index/index/DesignFramework.tsx | 162 ++++++++++++++++++++
 .dumi/pages/index/index/index.tsx           |   5 +-
 3 files changed, 170 insertions(+), 4 deletions(-)
 create mode 100644 .dumi/pages/index/index/DesignFramework.tsx

diff --git a/.dumi/pages/index/index/Banner.tsx b/.dumi/pages/index/index/Banner.tsx
index d1d5f8e6ce..e28eb3c0eb 100644
--- a/.dumi/pages/index/index/Banner.tsx
+++ b/.dumi/pages/index/index/Banner.tsx
@@ -11,9 +11,10 @@ const locales = {
     designLanguage: '设计语言',
   },
   en: {
-    slogan: '助力设计开发者「更灵活」的搭建出「更美」的产品，让用户「快乐工作」～',
-    start: '开始使用',
-    designLanguage: '设计语言',
+    slogan:
+      'Help design developers "more flexible" to build "more beautiful" products, helping users to "work happily"~',
+    start: 'Get Start',
+    designLanguage: 'Design Language',
   },
 };
 
diff --git a/.dumi/pages/index/index/DesignFramework.tsx b/.dumi/pages/index/index/DesignFramework.tsx
new file mode 100644
index 0000000000..1c294c6d49
--- /dev/null
+++ b/.dumi/pages/index/index/DesignFramework.tsx
@@ -0,0 +1,162 @@
+import useSiteToken from '../../../hooks/useSiteToken';
+import { Col, Row, Typography } from 'antd';
+import React from 'react';
+import { css } from '@emotion/react';
+import useLocale from '../../../hooks/useLocale';
+
+const MAINLY_LIST = [
+  {
+    img: 'https://gw.alipayobjects.com/zos/bmw-prod/36a89a46-4224-46e2-b838-00817f5eb364.svg',
+    key: 'values',
+  },
+  {
+    img: 'https://gw.alipayobjects.com/zos/bmw-prod/8379430b-e328-428e-8a67-666d1dd47f7d.svg',
+    key: 'guide',
+  },
+  {
+    img: 'https://gw.alipayobjects.com/zos/bmw-prod/1c363c0b-17c6-4b00-881a-bc774df1ebeb.svg',
+    key: 'lib',
+  },
+];
+
+const SECONDARY_LIST = [
+  {
+    img: 'https://gw.alipayobjects.com/zos/bmw-prod/b874caa9-4458-412a-9ac6-a61486180a62.svg',
+    key: 'mobile',
+    url: 'https://mobile.ant.design/',
+    imgScale: 1.5,
+  },
+  {
+    img: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+    key: 'antv',
+    url: 'https://antv.vision/',
+  },
+  {
+    img: 'https://gw.alipayobjects.com/zos/bmw-prod/af1ea898-bf02-45d1-9f30-8ca851c70a5b.svg',
+    key: 'kitchen',
+    url: 'https://kitchen.alipay.com/',
+  },
+];
+
+const locales = {
+  cn: {
+    values: '设计价值观',
+    valuesDesc: '确定性、意义感、生长性、自然',
+    guide: '设计指引',
+    guideDesc: '全局样式、设计模式',
+    lib: '组件库',
+    libDesc: 'Ant Design of React / Angular / Vue',
+
+    // Secondary
+    mobile: 'Ant Design Mobile',
+    mobileDesc: '基于 Preact / React / React Native 的 UI 组件库',
+    antv: 'AntV',
+    antvDesc: '全新一代数据可视化解决方案',
+    kitchen: 'Kitchen',
+    kitchenDesc: '一款为设计者提升工作效率的 Sketch 工具集',
+  },
+  en: {
+    values: 'Design values',
+    valuesDesc: 'Certainty, Meaningfulness, Growth, Naturalness',
+    guide: 'Design guide',
+    guideDesc: 'Global style and design pattern',
+    lib: 'Components Libraries',
+    libDesc: 'Ant Design of React / Angular / Vue',
+
+    // Secondary
+    mobile: 'Ant Design Mobile',
+    mobileDesc: 'Mobile UI component library',
+    antv: 'AntV',
+    antvDesc: 'New generation of data visualization solutions',
+    kitchen: 'Kitchen',
+    kitchenDesc: 'Sketch Tool set for designers',
+  },
+};
+
+const useStyle = () => {
+  const { token } = useSiteToken();
+
+  return {
+    card: css`
+      padding: ${token.paddingSM}px;
+      border-radius: ${token.radiusBase * 2}px;
+      background: #fff;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
+        0 2px 4px rgba(0, 0, 0, 0.02);
+
+      img {
+        width: 100%;
+        vertical-align: top;
+        border-radius: ${token.radiusBase}px;
+      }
+    `,
+
+    cardMini: css`
+      display: block;
+      border-radius: ${token.radiusBase * 2}px;
+      padding: ${token.paddingTmp}px ${token.paddingLG}px;
+      background: rgba(0, 0, 0, 0.02);
+      border: 1px solid rgba(0, 0, 0, 0.06);
+
+      img {
+        height: 48px;
+      }
+    `,
+  };
+};
+
+export default function DesignFramework() {
+  const [locale] = useLocale(locales);
+  const { token } = useSiteToken();
+  const style = useStyle();
+
+  return (
+    <Row gutter={[token.marginXL, token.marginXL]}>
+      {MAINLY_LIST.map(({ img, key }, index) => {
+        const title = locale[key as keyof typeof locale];
+        const desc = locale[`${key}Desc` as keyof typeof locale];
+
+        return (
+          <Col key={index} span={8}>
+            <div css={style.card}>
+              <img alt={title} src={img} />
+
+              <Typography.Title
+                level={4}
+                style={{ marginTop: token.margin, marginBottom: token.marginXS }}
+              >
+                {title}
+              </Typography.Title>
+              <Typography.Paragraph type="secondary" style={{ margin: 0 }}>
+                {desc}
+              </Typography.Paragraph>
+            </div>
+          </Col>
+        );
+      })}
+
+      {SECONDARY_LIST.map(({ img, key, url, imgScale = 1 }, index) => {
+        const title = locale[key as keyof typeof locale];
+        const desc = locale[`${key}Desc` as keyof typeof locale];
+
+        return (
+          <Col key={index} span={8}>
+            <a css={style.cardMini} target="_blank" href={url}>
+              <img alt={title} src={img} style={{ transform: `scale(${imgScale})` }} />
+
+              <Typography.Title
+                level={4}
+                style={{ marginTop: token.margin, marginBottom: token.marginXS }}
+              >
+                {title}
+              </Typography.Title>
+              <Typography.Paragraph type="secondary" style={{ margin: 0 }}>
+                {desc}
+              </Typography.Paragraph>
+            </a>
+          </Col>
+        );
+      })}
+    </Row>
+  );
+}
diff --git a/.dumi/pages/index/index/index.tsx b/.dumi/pages/index/index/index.tsx
index af21455b45..d170c07872 100644
--- a/.dumi/pages/index/index/index.tsx
+++ b/.dumi/pages/index/index/index.tsx
@@ -10,6 +10,7 @@ import useSiteToken from '../../../hooks/useSiteToken';
 import Theme from './Theme';
 import BannerRecommends from './BannerRecommends';
 import ComponentsList from './ComponentsList';
+import DesignFramework from './DesignFramework';
 
 const useStyle = () => {
   const { token } = useSiteToken();
@@ -77,7 +78,9 @@ const Homepage: FC = () => {
               />
             </>
           }
-        />
+        >
+          <DesignFramework />
+        </Group>
       </div>
     </section>
   );