diff --git a/site/theme/template/Home/Banner.jsx b/site/theme/template/Home/Banner.jsx
deleted file mode 100644
index 5bd376e78b..0000000000
--- a/site/theme/template/Home/Banner.jsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from 'react';
-import TweenOne from 'rc-tween-one';
-import QueueAnim from 'rc-queue-anim';
-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, Divider, Icon } from 'antd';
-import BannerImage from './BannerImage';
-import * as utils from '../utils';
-
-const loop = {
-  duration: 3000,
-  yoyo: true,
-  repeat: -1,
-};
-
-const Banner = ({ isMobile }) => {
-  const { locale } = useIntl();
-  const isZhCN = locale === 'zh-CN';
-  return (
-    <div className="home-page-wrapper banner-wrapper" id="banner">
-      <div className="banner-bg-wrapper">
-        <svg width="400px" height="576px" viewBox="0 0 400 576" fill="none">
-          <TweenOne
-            component="g"
-            animation={[
-              { opacity: 0, type: 'from' },
-              { ...loop, y: 15 },
-            ]}
-          >
-            <ellipse cx="100" cy="100" rx="6" ry="6" stroke="#2F54EB" strokeWidth="1.6" />
-          </TweenOne>
-          <TweenOne
-            component="g"
-            animation={[
-              { opacity: 0, type: 'from' },
-              { ...loop, y: -15 },
-            ]}
-          >
-            <g transform="translate(200 450)">
-              <g style={{ transformOrigin: '50% 50%', transform: 'rotate(-340deg)' }}>
-                <rect stroke="#FADB14" strokeWidth="1.6" width="9" height="9" />
-              </g>
-            </g>
-          </TweenOne>
-        </svg>
-        <ScrollParallax
-          location="banner"
-          className="banner-bg"
-          animation={{ playScale: [1, 1.5], rotate: 0 }}
-        />
-      </div>
-      <QueueAnim className="banner page" type="alpha" delay={150}>
-        {isMobile && (
-          <div className="img-wrapper" key="image">
-            <BannerImage />
-          </div>
-        )}
-        <QueueAnim className="text-wrapper" key="text" type="bottom">
-          <h1 key="h1">Ant Design</h1>
-          <p key="p">
-            <FormattedMessage id="app.home.introduce" />
-          </p>
-          <div className="banner-btns" key="buttons">
-            <Link to={utils.getLocalizedPathname('/docs/react/introduce', isZhCN)}>
-              <Button type="primary" className="banner-btn components">
-                <FormattedMessage id="app.home.getting-started" />
-              </Button>
-            </Link>
-            <Link
-              to={utils.getLocalizedPathname('/docs/spec/introduce', isZhCN)}
-              style={{ marginLeft: 16 }}
-            >
-              <Button className="banner-btn language">
-                <FormattedMessage id="app.home.design-language" />
-              </Button>
-            </Link>
-            {!isMobile && (
-              <GitHubButton
-                style={{ marginLeft: 16 }}
-                size="large"
-                type="stargazers"
-                namespace="ant-design"
-                repo="ant-design"
-              />
-            )}
-          </div>
-          <div
-            key="promote"
-            className="banner-promote"
-            style={{
-              width: isZhCN ? 412 : 522,
-            }}
-          >
-            <Divider>
-              <FormattedMessage id="app.home.recommend" />
-            </Divider>
-            <a
-              href="https://next.ant.design/"
-              target="_blank"
-              rel="noopener noreferrer"
-              onClick={() => {
-                if (window.gtag) {
-                  window.gtag('event', '点击', {
-                    event_category: '首页推广',
-                    event_label: `https://next.ant.design/?from=antd`,
-                  });
-                }
-              }}
-            >
-              <img
-                src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
-                alt="antd logo"
-              />
-              <FormattedMessage id="app.home.recommend.antd.next" />
-              <Icon type="right" style={{ marginLeft: 6, fontSize: 12, opacity: 0.6 }} />
-            </a>
-          </div>
-        </QueueAnim>
-        {!isMobile && (
-          <div className="img-wrapper" key="image">
-            <ScrollParallax
-              location="banner"
-              component={BannerImage}
-              animation={{ playScale: [1, 1.5], y: 80 }}
-            />
-          </div>
-        )}
-      </QueueAnim>
-    </div>
-  );
-};
-
-export default Banner;
diff --git a/site/theme/template/Home/Page2.jsx b/site/theme/template/Home/Page2.jsx
deleted file mode 100644
index e2e3314bf8..0000000000
--- a/site/theme/template/Home/Page2.jsx
+++ /dev/null
@@ -1,235 +0,0 @@
-import React from 'react';
-import { Row, Col } from 'antd';
-import QueueAnim from 'rc-queue-anim';
-import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
-import { Link } from 'bisheng/router';
-import { FormattedMessage } from 'react-intl';
-
-import Icon from '../Icon';
-import * as utils from '../utils';
-
-import svgBgToParallax from './util';
-
-const page2Data = [
-  {
-    img: 'https://gw.alipayobjects.com/zos/rmsportal/eYNnmGagLWdrkdMHVUuA.svg',
-    name: 'Ant Design Components',
-  },
-  {
-    img: 'https://gw.alipayobjects.com/zos/rmsportal/EPaPtDVGnJhyqyBAUZMl.svg',
-    name: 'Ant Design Pro',
-    slogan: <FormattedMessage id="app.home.product-pro-slogan" />,
-    link: 'https://pro.ant.design/index-cn',
-  },
-  {
-    img: 'https://gw.alipayobjects.com/zos/rmsportal/GobRAKexhfTSJdLFzDFY.svg',
-    name: 'Ant Design Mobile',
-    slogan: <FormattedMessage id="app.home.product-mobile-slogan" />,
-  },
-  {
-    img: 'https://gw.alipayobjects.com/zos/rmsportal/slVtnOCcgeAcLEPwtewY.svg',
-    name: 'AntV',
-    slogan: <FormattedMessage id="app.home.product-antv-slogan" />,
-    link: 'https://antv.vision',
-  },
-  {
-    img: 'https://gw.alipayobjects.com/zos/rmsportal/EAHlyTmYeDtTkZIPbUnP.svg',
-    name: 'Ant Design Landing',
-    slogan: <FormattedMessage id="app.home.product-landing-slogan" />,
-    link: 'https://landing.ant.design',
-    new: true,
-  },
-];
-
-const svgBgChild = [
-  <svg
-    key="svg-0"
-    width="100%"
-    height="100%"
-    viewBox="0 0 1401 1109"
-    stroke="none"
-    strokeWidth="1"
-    fill="none"
-    fillRule="evenodd"
-    preserveAspectRatio="xMidYMid slice"
-  >
-    <g transform="translate(-79.000000, -21.000000)">
-      <circle stroke="none" fill="#EBEDF0" fillRule="evenodd" cx="98.5" cy="98.5" r="98.5" />
-      <rect
-        id="Rectangle-33"
-        stroke="none"
-        fill="#EBEDF0"
-        fillRule="evenodd"
-        transform="translate(1261.132034, 1217.132034) rotate(45.000000) translate(-1261.132034, -1217.132034) "
-        x="1111.13203"
-        y="1007.13203"
-        width="300"
-        height="300"
-        rx="1"
-      />
-      <circle stroke="#EBEDF0" strokeWidth="16" fill="none" cx="1402" cy="151" r="70" />
-      <path
-        d="M385.032144,960.394832 L394.316344,976.475539 C394.868629,977.432124 394.540879,978.655305 393.584293,979.20759 C393.280255,979.383126 392.935367,979.475539 392.584293,979.475539 L374.015893,979.475539 C372.911323,979.475539 372.015893,978.580108 372.015893,977.475539 C372.015893,977.124466 372.108305,976.779577 372.283842,976.475539 L381.568042,960.394832 C382.120327,959.438247 383.343508,959.110497 384.300093,959.662781 C384.604131,959.838318 384.856607,960.090794 385.032144,960.394832 Z"
-        stroke="none"
-        fill="#A3B1BF"
-        fillRule="evenodd"
-        transform="translate(383.300093, 970.709623) rotate(70.000000) translate(-383.300093, -970.709623) "
-      />
-      <path
-        d="M545.537489,211.431472 L552.545207,223.569196 C553.097492,224.525781 552.769741,225.748962 551.813156,226.301246 C551.509118,226.476783 551.164229,226.569196 550.813156,226.569196 L536.79772,226.569196 C535.693151,226.569196 534.79772,225.673765 534.79772,224.569196 C534.79772,224.218122 534.890133,223.873234 535.06567,223.569196 L542.073387,211.431472 C542.625672,210.474887 543.848853,210.147137 544.805438,210.699421 C545.109477,210.874958 545.361952,211.127434 545.537489,211.431472 Z"
-        stroke="none"
-        fill="#A3B1BF"
-        fillRule="evenodd"
-        transform="translate(543.805605, 218.500167) rotate(90.000000) translate(-543.805605, -218.500167) "
-      />
-      <g id="Group-26" transform="translate(146.000000, 338.000000)" fill="#FADB14">
-        <image xlinkHref="https://gw.alipayobjects.com/zos/rmsportal/UtBesTOkoZsBUxPqfDlZ.svg" />
-      </g>
-    </g>
-  </svg>,
-  <svg
-    key="svg-1"
-    width="1311px"
-    height="920px"
-    viewBox="0 0 1311 920"
-    stroke="none"
-    strokeWidth="1"
-    fill="none"
-    fillRule="evenodd"
-  >
-    <g id="Group-29" transform="translate(283.000000, 920.000000)" fill="#2F54EB">
-      <image xlinkHref="https://gw.alipayobjects.com/zos/rmsportal/VrADJaRPMnFjmtmIhObV.svg" />
-    </g>
-    <circle stroke="#13C2C2" strokeWidth="4" opacity="0.95" cx="1096" cy="11" r="11" />
-    <circle stroke="#13C2C2" strokeWidth="4" cx="11" cy="667" r="11" />
-    <g id="Group-11" transform="translate(1207.000000, 419.000000)" fill="#13C2C2">
-      <image xlinkHref="https://gw.alipayobjects.com/zos/rmsportal/MnLEmwjipfhzPUmBJnJE.svg" />
-    </g>
-    <g id="Group-28" transform="translate(884.000000, 880.000000)" fill="#2F54EB">
-      <image xlinkHref="https://gw.alipayobjects.com/zos/rmsportal/dyNuxLOZtvjoHSVisbhQ.svg" />
-    </g>
-  </svg>,
-];
-
-const svgBgChildArray = svgBgChild.map((item, i) => {
-  const {
-    props: { children },
-  } = item;
-  return React.cloneElement(item, { children: svgBgToParallax(children, i) });
-});
-export default function Page2({ isMobile, locale }) {
-  const isZhCN = locale === 'zh-CN';
-  const componentButton = (
-    <div key="b" className="components-button-wrapper">
-      <Link to={utils.getLocalizedPathname('/docs/react/introduce', isZhCN)}>
-        Ant Design of React <Icon type="right" />
-      </Link>
-      <a href="https://ng.ant.design/" target="_blank" rel="noopener noreferrer">
-        Ant Design of Angular <Icon type="right" />
-      </a>
-      <a href="https://vue.ant.design/" target="_blank" rel="noopener noreferrer">
-        Ant Design of Vue <Icon type="right" />
-      </a>
-    </div>
-  );
-  const children = page2Data.map((item, i) => {
-    if (!isMobile && !i) {
-      return null;
-    }
-    const mobileContent = (
-      <div className="components-button-wrapper">
-        <p key="p">{item.slogan}</p>
-        <a
-          className="more-mobile-react"
-          href="https://mobile.ant.design"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <FormattedMessage id="app.home.more-mobile-react" />
-          <Icon type="right" />
-        </a>
-        <a
-          className="more-mobile-angular"
-          href="http://ng.mobile.ant.design"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <FormattedMessage id="app.home.more-mobile-angular" />
-          <Icon type="right" />
-        </a>
-      </div>
-    );
-    const moreContent =
-      i === 2
-        ? mobileContent
-        : [
-            <p key="p">{item.slogan}</p>,
-            <span className="more" key="a">
-              <FormattedMessage id="app.home.more" /> <Icon type="right" />
-            </span>,
-          ];
-    const content = isMobile && !i ? componentButton : moreContent;
-    const BlockElement = item.link ? 'a' : 'div';
-    return (
-      <BlockElement
-        className="product-block"
-        key={item.name}
-        href={item.link}
-        style={{ display: 'block' }}
-      >
-        <Row>
-          <Col
-            xs={8}
-            md={i === 2 ? 6 : 8}
-            className={`block-image-wrapper${i % 2 ? ' right' : ''}`}
-          >
-            <img src={item.img} style={isMobile && i === 2 ? { marginLeft: 16 } : {}} alt="icon" />
-          </Col>
-          <Col xs={16} md={i === 2 ? 18 : 16} className="block-text-wrapper">
-            <h4>
-              {item.name} {item.new && <span className="new">NEW</span>}
-            </h4>
-            {content}
-          </Col>
-        </Row>
-      </BlockElement>
-    );
-  });
-  return (
-    <div className="home-page-wrapper page2" id="page2">
-      <div className="page">
-        <h2>
-          <FormattedMessage id="app.home.solution" />
-        </h2>
-        <ScrollOverPack component={Row} className="page2-content" playScale="0.4">
-          <QueueAnim
-            component={Col}
-            componentProps={{ xs: 24, md: 12 }}
-            className="page2-components"
-            key="left"
-            type="bottom"
-            leaveReverse
-          >
-            <h3 key="h1">Ant Design Components</h3>
-            <p key="p">
-              <FormattedMessage id="app.home.components-explain" />
-            </p>
-            {componentButton}
-          </QueueAnim>
-          <QueueAnim
-            component={Col}
-            componentProps={{ xs: 24, md: 12 }}
-            className="page2-product"
-            key="right"
-            type="bottom"
-            leaveReverse
-          >
-            {children}
-          </QueueAnim>
-        </ScrollOverPack>
-      </div>
-      <div className="parallax-bg bottom">{svgBgChildArray[0]}</div>
-      <div className="parallax-bg top">{svgBgChildArray[1]}</div>
-    </div>
-  );
-}
diff --git a/site/theme/template/Home/Page3.jsx b/site/theme/template/Home/Page3.jsx
deleted file mode 100644
index 69a8940dcb..0000000000
--- a/site/theme/template/Home/Page3.jsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import React from 'react';
-import { Row, Col, Tag } from 'antd';
-import QueueAnim from 'rc-queue-anim';
-import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
-import { Link } from 'bisheng/router';
-import { FormattedMessage } from 'react-intl';
-import * as utils from '../utils';
-import svgBgToParallax from './util';
-
-const page3Data = [
-  {
-    title: <FormattedMessage id="app.home.tool-package-title" />,
-    content: <FormattedMessage id="app.home.tool-package-content" />,
-    img: 'https://gw.alipayobjects.com/zos/rmsportal/qggKjIGNFlVmMpwDUXPU.svg',
-    to: '/docs/spec/download',
-  },
-  {
-    title: <FormattedMessage id="app.home.tool-library-title" />,
-    content: <FormattedMessage id="app.home.tool-library-content" />,
-    img: 'https://gw.alipayobjects.com/zos/rmsportal/dgjVqwkJvptQEtlfctvk.svg',
-    link: 'http://library.ant.design/',
-  },
-  {
-    title: <FormattedMessage id="app.home.tool-kitchen-title" />,
-    content: <FormattedMessage id="app.home.tool-kitchen-content" />,
-    img: 'https://gw.alipayobjects.com/zos/rmsportal/vUxYuDdsbBBcMDxSGmwc.svg',
-    link: 'http://kitchen.alipay.com/',
-    hot: true,
-  },
-];
-
-const svgBg = [
-  <circle stroke="#13C2C2" cx="530" cy="195" r="5" key="13C2C2-530-195" />,
-  <circle fillOpacity="0.4" fill="#9EE6E6" cx="606" cy="76" r="3" key="9EE6E6-606-76" />,
-  <circle stroke="#13C2C2" cx="165" cy="540" r="5" key="13C2C2-165-540" />,
-  <circle stroke="#CED4D9" cx="701.5" cy="650" r="3.5" key="CED4D9-701-650" />,
-  <circle stroke="#F5222D" cx="526.5" cy="381.5" r="3.5" key="F5222D-526-381" />,
-  <circle fillOpacity="0.4" fill="#9EE6E6" cx="944" cy="251" r="5" key="9EE6E6-944-251" />,
-  <g transform="translate(0, 180)" key="g-180">
-    <path
-      d="M1182.79367,448.230356 L1186.00213,453.787581 C1186.55442,454.744166 1186.22667,455.967347 1185.27008,456.519632 C1184.96604,456.695168 1184.62116,456.787581 1184.27008,456.787581 L1177.85315,456.787581 C1176.74858,456.787581 1175.85315,455.89215 1175.85315,454.787581 C1175.85315,454.436507 1175.94556,454.091619 1176.1211,453.787581 L1179.32957,448.230356 C1179.88185,447.273771 1181.10503,446.946021 1182.06162,447.498305 C1182.36566,447.673842 1182.61813,447.926318 1182.79367,448.230356 Z"
-      stroke="#CED4D9"
-      transform="translate(1181.061784, 452.008801) rotate(40.000000) translate(-1181.061784, -452.008801) "
-    />
-  </g>,
-  <g transform="translate(0, 100)" key="g-100">
-    <path
-      d="M1376.79367,204.230356 L1380.00213,209.787581 C1380.55442,210.744166 1380.22667,211.967347 1379.27008,212.519632 C1378.96604,212.695168 1378.62116,212.787581 1378.27008,212.787581 L1371.85315,212.787581 C1370.74858,212.787581 1369.85315,211.89215 1369.85315,210.787581 C1369.85315,210.436507 1369.94556,210.091619 1370.1211,209.787581 L1373.32957,204.230356 C1373.88185,203.273771 1375.10503,202.946021 1376.06162,203.498305 C1376.36566,203.673842 1376.61813,203.926318 1376.79367,204.230356 Z"
-      stroke="#2F54EB"
-      transform="translate(1375.061784, 208.008801) rotate(40.000000) translate(-1375.061784, -208.008801) "
-    />
-  </g>,
-  <rect
-    key="1D39C4-942-222"
-    strokeOpacity="0.4"
-    stroke="#1D39C4"
-    transform="translate(949.801502, 129.801502) rotate(30.000000) translate(-949.801502, -129.801502) "
-    x="942.626304"
-    y="222.626304"
-    width="14.3503946"
-    height="14.3503946"
-    rx="1"
-  />,
-  <rect
-    key="CED4D9-107-254"
-    stroke="#CED4D9"
-    transform="translate(111.673081, 158.673081) rotate(30.000000) translate(-111.673081, -158.673081) "
-    x="107.288047"
-    y="254.288047"
-    width="8.77006914"
-    height="8.77006914"
-    rx="1"
-  />,
-];
-const svgChildren = svgBgToParallax(svgBg);
-
-export default function Page3({ locale }) {
-  const isZhCN = locale === 'zh-CN';
-  const children = page3Data.map((item, i) => {
-    const child = [
-      <div className="page3-img-wrapper" key="img">
-        <img src={item.img} alt="icon" />
-      </div>,
-      <div className="page3-text-wrapper" key="a">
-        <h3>
-          {item.title}
-          {item.hot ? (
-            <Tag
-              style={{
-                marginLeft: 8,
-                position: 'relative',
-                top: -3,
-                height: 18,
-                lineHeight: '16px',
-                padding: '0 2px',
-              }}
-              color="#f50"
-            >
-              HOT
-            </Tag>
-          ) : null}
-        </h3>
-        <p>{item.content}</p>
-      </div>,
-    ];
-    return (
-      <Col key={i.toString()} md={8} xs={24} className="page3-block">
-        {item.to ? (
-          <Link to={utils.getLocalizedPathname(item.to, isZhCN)}>{child}</Link>
-        ) : (
-          <a href={item.link} target="_blank" rel="noopener noreferrer">
-            {child}
-          </a>
-        )}
-      </Col>
-    );
-  });
-  return (
-    <div className="home-page-wrapper page3" id="page3">
-      <div className="parallax-bg top">
-        <svg
-          width="1440px"
-          height="557px"
-          viewBox="0 0 1440 557"
-          stroke="none"
-          strokeWidth="1"
-          fill="none"
-          fillRule="evenodd"
-        >
-          {svgChildren}
-        </svg>
-      </div>
-      <div className="page">
-        <h2>
-          <FormattedMessage id="app.home.tool-title" />
-        </h2>
-        <ScrollOverPack location="page3">
-          <QueueAnim key="queue" component={Row} type="bottom" leaveReverse>
-            {children}
-          </QueueAnim>
-        </ScrollOverPack>
-      </div>
-    </div>
-  );
-}