✨ feat: 导出 Footer、Hero、Feature 组件

src/components/Features/index.tsx

@@ -7,7 +7,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 import { Feature } from '../../types';
 import { useStyles } from './style';
 
-interface FeaturesProps {
+export interface FeaturesProps {
   items: Feature[];
   style?: CSSProperties;
 }

src/components/Footer/index.tsx

@@ -0,0 +1,21 @@
+import RcFooter, { FooterProps as RcProps } from 'rc-footer';
+import { type FC } from 'react';
+
+import { useStyles } from './style';
+
+export interface FooterProps {
+  columns: RcProps['columns'];
+  bottom?: RcProps['bottom'];
+  theme?: RcProps['theme'];
+}
+const Footer: FC<FooterProps> = ({ columns, bottom, theme }) => {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.container}>
+      <RcFooter theme={theme} className={styles.footer} columns={columns} bottom={bottom} />
+    </div>
+  );
+};
+
+export default Footer;

src/components/Footer/style.ts

@@ -0,0 +1,161 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, responsive, token }) => {
+  const prefix = `rc-footer`;
+
+  return {
+    container: css`
+      grid-area: footer;
+      border-top: 1px solid ${token.colorSplit};
+      color: ${token.colorTextDescription};
+      text-align: center;
+      align-self: stretch;
+
+      ${responsive.mobile} {
+        border: none;
+        flex-direction: column;
+      }
+    `,
+    footer: css`
+      color: ${token.colorTextSecondary};
+      font-size: 14px;
+      line-height: 1.5;
+      background-color: ${token.colorBgLayout};
+
+      &.${prefix} {
+        a {
+          color: ${token.colorTextTertiary};
+          text-decoration: none;
+          transition: all 0.3s;
+
+          &:hover {
+            color: ${token.colorLinkHover};
+          }
+        }
+      }
+
+      .${prefix} {
+        &-container {
+          width: 100%;
+          max-width: ${token.contentMaxWidth}px;
+          margin: auto;
+          padding: 60px 0 20px;
+        }
+
+        &-columns {
+          display: flex;
+          justify-content: space-around;
+        }
+
+        &-column {
+          //margin-bottom: 60px;
+
+          h2 {
+            position: relative;
+            margin: 0 auto;
+            color: ${token.colorText};
+            font-weight: 500;
+            font-size: 16px;
+          }
+
+          &-icon {
+            position: relative;
+            top: -1px;
+            display: inline-block;
+            width: 22px;
+            text-align: center;
+            vertical-align: middle;
+            margin-inline-end: 0.5em;
+
+            > span,
+            > svg,
+            img {
+              display: block;
+              width: 100%;
+            }
+          }
+        }
+
+        &-item {
+          margin: 12px 0;
+
+          &-icon {
+            position: relative;
+            top: -1px;
+            display: inline-block;
+            width: 16px;
+            text-align: center;
+            vertical-align: middle;
+            margin-inline-end: 0.4em;
+
+            > span,
+            > svg,
+            img {
+              display: block;
+              width: 100%;
+            }
+          }
+
+          &-separator {
+            margin: 0 0.3em;
+          }
+        }
+
+        &-bottom {
+          &-container {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 16px 0;
+            font-size: 16px;
+            line-height: 32px;
+            text-align: center;
+            border-top: 1px solid ${token.colorBorderSecondary};
+          }
+        }
+
+        &-light {
+          color: rgba(0, 0, 0, 0.85);
+          background-color: transparent;
+
+          h2,
+          a {
+            color: rgba(0, 0, 0, 0.85);
+          }
+        }
+
+        &-light &-bottom-container {
+          border-top-color: #e8e8e8;
+        }
+
+        &-light &-item-separator,
+        &-light &-item-description {
+          color: rgba(0, 0, 0, 0.45);
+        }
+      }
+
+      ${responsive.mobile} {
+        .${prefix} {
+          text-align: center;
+
+          &-container {
+            padding: 40px 0;
+          }
+
+          &-columns {
+            display: block;
+          }
+
+          &-column {
+            display: block;
+            margin-bottom: 40px;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+          }
+        }
+      }
+    `,
+  };
+});

src/components/Hero/index.tsx

@@ -0,0 +1,57 @@
+import { Button, ConfigProvider } from 'antd';
+import { Link } from 'dumi';
+import { type FC } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import HeroButton from './HeroButton';
+
+import { useStyles } from './style';
+
+export interface HeroProps {
+  title?: string;
+  description?: string;
+  actions?: { text: string; link: string }[];
+}
+
+const Hero: FC<HeroProps> = ({ title, description, actions }) => {
+  const { styles, cx } = useStyles();
+
+  return (
+    <Flexbox horizontal distribution={'center'} className={styles.container}>
+      <div className={styles.canvas}></div>
+      <Center>
+        {title && (
+          <div className={styles.titleContainer}>
+            <h1 className={styles.title} dangerouslySetInnerHTML={{ __html: title }} />
+            <div
+              className={cx(styles.titleShadow)}
+              dangerouslySetInnerHTML={{ __html: title }}
+            ></div>
+          </div>
+        )}
+        {description && (
+          <p className={styles.desc} dangerouslySetInnerHTML={{ __html: description }} />
+        )}
+        {Boolean(actions?.length) && (
+          <ConfigProvider theme={{ token: { fontSize: 16, controlHeight: 40 } }}>
+            <Flexbox horizontal gap={24} className={styles.actions}>
+              {actions!.map(({ text, link }, index) => (
+                <Link key={text} to={link}>
+                  {index === 0 ? (
+                    <HeroButton>{text}</HeroButton>
+                  ) : (
+                    <Button size={'large'} shape={'round'} type={'default'}>
+                      {text}
+                    </Button>
+                  )}
+                </Link>
+              ))}
+            </Flexbox>
+          </ConfigProvider>
+        )}
+      </Center>
+    </Flexbox>
+  );
+};
+
+export default Hero;

src/index.ts

@@ -0,0 +1,3 @@
+export { default as Features } from './components/Features';
+export { default as Footer } from './components/Footer';
+export { default as Hero } from './components/Hero';