Update landing (#131)

* feat: update landing

* fix: build issues

* add font

web/src/components/Layout.tsx

@@ -8,13 +8,14 @@ import {
   Container,
   Box,
 } from "@chakra-ui/react";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import Header from "./Header";
 import { motion } from "framer-motion";
 
 import CrtEffect from "./CrtEffect";
 
 export interface LayoutProps {
+  CustomLeftPanel?: React.FC;
   leftPanelProps?: LeftPanelProps;
   showBack?: boolean;
   actions?: ReactNode;
@@ -31,6 +32,7 @@ export interface LeftPanelProps {
 }
 
 const Layout = ({
+  CustomLeftPanel,
   leftPanelProps,
   showBack,
   showMap,
@@ -48,9 +50,14 @@ const Layout = ({
         animate={{ opacity: 1 }}
       >
         <Header back={showBack} />
-        <Container>
-          {!isSinglePanel && <LeftPanel {...leftPanelProps} />}
-          <RightPanel flex={[showMap ? "0" : "1", "1"]}>{children}</RightPanel>
+        <Container position="relative">
+          <>
+            {!isSinglePanel &&
+              (!CustomLeftPanel ? <LeftPanel {...leftPanelProps} /> : <CustomLeftPanel />)}
+            <RightPanel flex={[showMap ? "0" : "1", "1"]}>
+              {children}
+            </RightPanel>
+          </>
         </Container>
         <Box maxH="60px" h="full" display={["none", "block"]} />
       </Flex>

web/src/components/icons/ScrollDown.tsx

@@ -0,0 +1,19 @@
+import {
+  Icon as ChakraIcon,
+  IconProps as ChakraIconProps,
+} from "@chakra-ui/react";
+import { IconProps } from ".";
+
+export const ScrollDown = ({ ...props }: IconProps) => {
+  return (
+    <ChakraIcon viewBox="0 0 40 40" fill="currentColor" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M25.0033 5V6.99935H29.002V8.9987H31.0013V10.998H33.0007V14.9967H35V25.0033H33.0007V29.002H31.0013V31.0013H29.002V33.0007H25.0033V35H14.9967V33.0007H10.998V31.0013H8.9987V29.002H6.99935V25.0033H5V14.9967H6.99935V10.998H8.9987V8.9987H10.998V6.99935H14.9967V5H25.0033ZM11.0078 30.9915H15.0065V32.9909H24.9935V30.9915H28.9922V28.9922H30.9915V24.9935H32.9909V15.0065H30.9915V11.0078H28.9922V9.00846H24.9935V7.00911H15.0065V9.00846H11.0078V11.0078H9.00846V15.0065H7.00911V24.9935H9.00846V28.9922H11.0078V30.9915Z"
+      />
+      <path d="M14 20.0703H15.7216V21.7834H17.4347V23.4964H19.1478V25.2095H20.8522V23.4964H22.5653V21.7834H24.2784V20.0703H26V21.7919H24.2869V23.505H22.5739V25.2181H20.8608V26.9311H19.1392V25.2181H17.4261V23.505H15.7131V21.7919H14V20.0703Z" />
+      <path d="M14 13.0703H15.7216V14.7834H17.4347V16.4964H19.1478V18.2095H20.8522V16.4964H22.5653V14.7834H24.2784V13.0703H26V14.7919H24.2869V16.505H22.5739V18.2181H20.8608V19.9311H19.1392V18.2181H17.4261V16.505H15.7131V14.7919H14V13.0703Z" />
+    </ChakraIcon>
+  );
+};

web/src/components/icons/archive/index.tsx

@@ -35,7 +35,7 @@ export * from "./Connect";
 export * from "./Sparkle"; // has mirrored variant
 export * from "./Calendar";
 export * from "./Cigarette";
-export * from "./Cartridge";
+export * from "../branding/Cartridge";
 export * from "./Disconnect";
 
 // Template for adding new icons. When copying svg from figma, make sure to

web/src/components/icons/archive/Cartridge.tsx → web/src/components/icons/branding/Cartridge.tsx

@@ -1,12 +1,12 @@
-import { Icon, IconProps } from ".";
+import { Icon, IconProps } from "../archive";
 
 export const Cartridge = (props: IconProps) => {
   return (
     <Icon {...props}>
-      <>
+      <g transform="translate(3, 3)">
         <path d="M5.45902 6.45065H12.4672V4.68029H5.46078C5.46078 4.86117 5.45902 6.4673 5.45902 6.45065Z" />
         <path d="M17.3231 2.80379L13.0408 0.996428C12.7594 0.858954 12.4523 0.782 12.1394 0.770508H5.86057C5.54749 0.782022 5.24026 0.858972 4.95857 0.996428L0.676857 2.80379C0.469711 2.90946 0.296404 3.07143 0.176748 3.27118C0.0570915 3.47094 -0.00408502 3.70042 0.000211732 3.93338V11.164C0.000211732 11.3899 0.000210304 11.6158 0.225564 11.8418L1.57827 13.1973C1.80362 13.4232 1.97279 13.4232 2.25433 13.4232H5.35191C5.35191 13.6174 5.35191 15.247 5.35191 15.2294H12.6744V13.4208H5.35776V11.6158H2.02897C1.80362 11.6158 1.80362 11.3899 1.80362 11.3899V2.80379C1.80362 2.80379 1.80362 2.57787 2.02897 2.57787H15.9716C16.197 2.57787 16.197 2.80379 16.197 2.80379V11.3899C16.197 11.3899 16.197 11.6158 15.9716 11.6158H12.6762V13.4232H15.7463C16.0278 13.4232 16.197 13.4232 16.4223 13.1973L17.7744 11.8418C17.9998 11.6158 17.9998 11.3899 17.9998 11.164V3.93338C18.004 3.70043 17.9428 3.47098 17.8232 3.27124C17.7035 3.0715 17.5303 2.90951 17.3231 2.80379Z" />
-      </>
+      </g>
     </Icon>
   );
 };

web/src/components/icons/branding/Dojo.tsx

@@ -0,0 +1,12 @@
+import { Icon, IconProps } from "../archive";
+
+export const Dojo = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <g transform="translate(-1, 0)">
+        <path d="M18.9058 8.79337C19.192 8.79337 19.471 8.67018 19.6775 8.45279L21.2934 7.19192C21.4058 7.10496 21.4746 6.96365 21.4746 6.81873V5.95279L3.47461 5.89844V6.66293C3.47461 6.80061 3.53258 6.92742 3.63041 7.018L5.24273 8.46365C5.45287 8.69916 5.74273 8.83322 6.04345 8.83322H7.32244V11.7318L6.65577 11.0506C6.44925 10.8368 6.15939 10.7137 5.85867 10.7137L3.80432 10.7028V13.3187L7.31881 13.3586V18.4818L7.93475 17.8695C7.93475 17.8695 9.73548 16.076 9.92751 15.8839L10.0326 15.7789V10.8731C10.0181 10.6955 10.0036 10.518 9.98186 10.3405C9.96012 10.1484 9.92388 9.95279 9.89852 9.76076C9.85504 9.46728 9.78983 9.18105 9.72461 8.89481C9.72461 8.88032 9.71736 8.87308 9.72461 8.85858C9.75722 8.81148 9.97099 8.76076 10.0253 8.78612C10.3478 8.94192 10.6884 9.0325 11.0507 9.04699C11.1558 9.05061 11.2608 9.05423 11.3659 9.05423L14.105 9.04699C14.4637 9.02887 14.8007 8.94192 15.1232 8.78612C15.1775 8.76076 15.3913 8.81148 15.4239 8.85858C15.4311 8.86945 15.4239 8.88032 15.4239 8.89481C15.3587 9.18105 15.2935 9.4709 15.25 9.76076C15.221 9.95279 15.1884 10.1448 15.1666 10.3405C15.1413 10.5434 15.1268 10.7499 15.1087 10.9528V15.739L17.7282 18.4781V13.355L21.4275 13.3151V10.6992L18.9927 10.71C18.6956 10.71 18.4058 10.8332 18.1956 11.047L17.7282 11.5252V8.79699H18.9058V8.79337Z" />
+        <path d="M12.4746 13.7941C13.3949 13.7941 14.141 13.0481 14.141 12.1279C14.141 11.2074 13.3949 10.4614 12.4746 10.4614C11.5542 10.4614 10.8082 11.2074 10.8082 12.1279C10.8082 13.0481 11.5542 13.7941 12.4746 13.7941Z" />
+      </g>
+    </Icon>
+  );
+};