docs: site of links

2 years ago · 857cd66e02
3 changed files with 170 additions and 4 deletions
--- 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',
  },
 };

--- a/.dumi/pages/index/index/DesignFramework.tsx
+++ 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>
+  );
+}
--- 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>
  );