Added landing page.

2021-06-29 07:09:57 -07:00
parent 1e547f1815
commit 00f71eba77
38 changed files with 3113 additions and 5 deletions
--- a/client/src/landing/home/LandingNavigator.jsx
+++ b/client/src/landing/home/LandingNavigator.jsx
@@ -0,0 +1,182 @@
+import React, { useState } from "react";
+import TweenOne from "rc-tween-one";
+import { Anchor, Menu } from "antd";
+import { getChildrenToRender } from "./utils";
+import ImexOnlineLogoLight from "../../assets/ImEX Online Logo.png";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+const { Item, SubMenu } = Menu;
+
+export default function LandingNavigator({ dataSource, isMobile, ...props }) {
+  const [state, setState] = useState({ phoneOpen: undefined });
+  const { t } = useTranslation();
+  const { phoneOpen } = state;
+
+  const phoneClick = () => {
+    const phoneOpen = !state.phoneOpen;
+    setState({
+      phoneOpen,
+    });
+  };
+
+  const moment = phoneOpen === undefined ? 300 : null;
+  return (
+    <TweenOne
+      component="header"
+      animation={{ opacity: 0, type: "from" }}
+      className="header0 home-page-wrapper"
+      //   {...props}
+    >
+      <div
+        //{...dataSource.page}
+        className={`home-page ${dataSource.page.className}${
+          phoneOpen ? " open" : ""
+        }`}
+      >
+        <TweenOne
+          animation={{ x: -30, type: "from", ease: "easeOutQuad" }}
+          className="header0-logo"
+          // {...dataSource.logo}
+        >
+          <img width="100%" src={ImexOnlineLogoLight} alt="img" />
+        </TweenOne>
+        {isMobile && (
+          //Unknown what this menu does.
+          <div
+            {...dataSource.mobileMenu}
+            onClick={() => {
+              phoneClick();
+            }}
+          >
+            <em />
+            <em />
+            <em />
+          </div>
+        )}
+        <TweenOne
+          // {...dataSource.Menu}
+          className="header0-menu"
+          animation={
+            isMobile
+              ? {
+                  height: 0,
+                  duration: 300,
+                  onComplete: (e) => {
+                    if (state.phoneOpen) {
+                      e.target.style.height = "auto";
+                    }
+                  },
+                  ease: "easeInOutQuad",
+                }
+              : null
+          }
+          moment={moment}
+          reverse={!!phoneOpen}
+        >
+          <Menu
+            mode={isMobile ? "inline" : "horizontal"}
+            defaultSelectedKeys={["sub0"]}
+            theme="dark"
+          >
+            <Item className="header0-item">
+              <Link to={{ hash: "#features" }} className={`header0-item-block`}>
+                {t("landing.labels.features")}
+              </Link>
+            </Item>
+            <Item className="header0-item">
+              <Link to={{ hash: "#pricing" }} className={`header0-item-block`}>
+                {t("landing.labels.pricing")}
+              </Link>
+            </Item>
+            <Item className="header0-item">
+              <Link to={`/manage`} className={`header0-item-block`}>
+                {t("landing.labels.managemyshop")}
+              </Link>
+            </Item>
+          </Menu>
+        </TweenOne>
+      </div>
+    </TweenOne>
+  );
+}
+
+//  <SubMenu
+//     key={item.name}
+//     {...itemProps}
+//     title={
+//       <div {...a} className={`header0-item-block ${a.className}`.trim()}>
+//         {a.children.map(getChildrenToRender)}
+//       </div>
+//     }
+//     popupClassName="header0-item-child"
+//   >
+//     {subItem.map(($item, ii) => {
+//       const { children: childItem } = $item;
+//       const child = childItem.href ? (
+//         <a {...childItem}>
+//           {childItem.children.map(getChildrenToRender)}
+//         </a>
+//       ) : (
+//         <div {...childItem}>
+//           {childItem.children.map(getChildrenToRender)}
+//         </div>
+//       );
+//       return (
+//         <Item key={$item.name || ii.toString()} {...$item}>
+//           {child}
+//         </Item>
+//       );
+//     })}
+//   </SubMenu>
+//  subItem: [
+//         {
+//           name: "sub0",
+//           className: "item-sub",
+//           children: {
+//             className: "item-sub-item",
+//             children: [
+//               {
+//                 name: "image0",
+//                 className: "item-image",
+//                 children:
+//                   "https://gw.alipayobjects.com/zos/rmsportal/ruHbkzzMKShUpDYMEmHM.svg",
+//               },
+//               {
+//                 name: "title",
+//                 className: "item-title",
+//                 children: "Ant Design",
+//               },
+//               {
+//                 name: "content",
+//                 className: "item-content",
+//                 children: "企业级 UI 设计体系",
+//               },
+//             ],
+//           },
+//         },
+//         {
+//           name: "sub1",
+//           className: "item-sub",
+//           children: {
+//             className: "item-sub-item",
+//             children: [
+//               {
+//                 name: "image0",
+//                 className: "item-image",
+//                 children:
+//                   "https://gw.alipayobjects.com/zos/rmsportal/ruHbkzzMKShUpDYMEmHM.svg",
+//               },
+//               {
+//                 name: "title",
+//                 className: "item-title",
+//                 children: "Ant Design",
+//               },
+//               {
+//                 name: "content",
+//                 className: "item-content",
+//                 children: "企业级 UI 设计体系",
+//               },
+//             ],
+//           },
+//         },
+//       ],