Merge pull request #62 from ristekoss/staging

Release : revamp landing page and Schedule View

package.json

@@ -9,6 +9,7 @@
     "@emotion/styled": "^11",
     "@fontsource/poppins": "^4.4.5",
     "@heroicons/react": "^1.0.2",
+    "@react-spring/web": "^9.7.3",
     "axios": "^0.19.0",
     "copy-image-clipboard": "^2.1.2",
     "framer-motion": "^4",
@@ -18,6 +19,7 @@
     "react": "^16.8.6",
     "react-burger-menu": "^2.6.10",
     "react-copy-to-clipboard": "^5.0.1",
+    "react-countup": "^6.4.2",
     "react-dom": "^16.8.6",
     "react-ga": "^3.3.0",
     "react-helmet": "^5.2.1",

src/assets/ListMatkulIcon.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+export const ListMatkulIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      fill="currentColor"
+      viewBox="0 0 24 25"
+    >
+      <path d="M21.375 5H7.687a.188.188 0 00-.187.188V6.5c0 .103.084.188.188.188h13.687a.188.188 0 00.188-.188V5.187A.188.188 0 0021.375 5zm0 6.656H7.687a.188.188 0 00-.187.188v1.312c0 .103.084.188.188.188h13.687a.188.188 0 00.188-.188v-1.312a.188.188 0 00-.188-.188zm0 6.656H7.687a.188.188 0 00-.187.188v1.313c0 .103.084.187.188.187h13.687a.188.188 0 00.188-.188V18.5a.188.188 0 00-.188-.188zM2.437 5.845a1.312 1.312 0 102.625 0 1.312 1.312 0 00-2.625 0zm0 6.656a1.313 1.313 0 102.626 0 1.313 1.313 0 00-2.625 0zm0 6.656a1.312 1.312 0 102.625 0 1.312 1.312 0 00-2.625 0z"></path>
+    </svg>
+  );
+};

src/components/Illustration.js

@@ -0,0 +1,51 @@
+import React from "react";
+import styled from "styled-components";
+import { useSelector } from "react-redux";
+
+import illustrationDesktop from "assets/Beta/illustration-lg.svg";
+import illustrationMobile from "assets/Beta/illustration-sm.svg";
+
+const AssetIllustration = styled.img`
+  position: absolute;
+  right: 0;
+  top: ${({ isPrivate }) => (isPrivate ? "81px" : "0")};
+  display:none
+
+  @media (min-width: 1200px) {
+    display: block
+    width: 40rem;
+  }
+
+  ${(props) =>
+    props.isMobile &&
+    `
+    width: 100%;
+    display: block;
+
+    @media (min-width: 480px) {
+      display: none;
+    }
+  `}
+`;
+
+export const Illustration = ({ isPrivate }) => {
+  const isMobile = useSelector((state) => state.appState.isMobile);
+
+  return (
+    <>
+      {isMobile ? (
+        <AssetIllustration
+          isMobile={isMobile}
+          src={illustrationMobile}
+          alt="illustration-sm"
+        />
+      ) : (
+        <AssetIllustration
+          isPrivate={isPrivate}
+          src={illustrationDesktop}
+          alt="illustration-lg"
+        />
+      )}
+    </>
+  );
+};