zeroexchange · anonymousnickname · Apr 23, 2021 · Apr 23, 2021 · Apr 23, 2021 · Apr 24, 2021
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
+    "react-slick": "^0.28.1",
     "react-toasts": "^3.0.6",
     "styled-components": "^5.2.1",
     "typescript": "^4.0.3",

diff --git a/public/avalabs.png b/public/avalabs.png
diff --git a/public/bitcoin-com.png b/public/bitcoin-com.png
diff --git a/public/bithumb.png b/public/bithumb.png
diff --git a/public/bridge.png b/public/bridge.png
diff --git a/public/bsc.png b/public/bsc.png
diff --git a/public/bscstarter.png b/public/bscstarter.png
diff --git a/public/changelly.png b/public/changelly.png
diff --git a/public/devices.png b/public/devices.png
diff --git a/public/fireblocks.png b/public/fireblocks.png
diff --git a/public/gda.png b/public/gda.png
diff --git a/public/grow.png b/public/grow.png
diff --git a/public/hypercube.png b/public/hypercube.png
diff --git a/public/indacoin.png b/public/indacoin.png
diff --git a/public/index.html b/public/index.html
@@ -1,42 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#2662FF" />
 
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon"
-    href="%PUBLIC_URL%/favicon.png" />
-  <meta name="viewport"
-    content="width=device-width, initial-scale=1" />
-  <meta name="theme-color"
-    content="#2662FF" />
+    <meta property="og:title" content="Zero Exchange - Powered by DeFi" />
 
-  <meta property="og:title"
-    content="Zero Exchange - Powered by DeFi">
+    <meta
+      property="og:description"
+      content="Zero Exchange is the worlds first multi-blockchain DEX, offering trading on Ethereum, Avalanche, Binance Smart Chain, and more. Users enjoy low fees and super-fast trade executions using 0. Gone are the days of gas wars and absurd transaction fees! Trade all of your favorite crypto tokens quickly and cheaply using Zero Exchange."
+    />
 
-  <meta property="og:description"
-    content="Zero Exchange is the worlds first multi-blockchain DEX, offering trading on Ethereum, Avalanche, Binance Smart Chain, and more. Users enjoy low fees and super-fast trade executions using 0. Gone are the days of gas wars and absurd transaction fees! Trade all of your favorite crypto tokens quickly and cheaply using Zero Exchange.">
+    <meta
+      name="description"
+      content="Zero Exchange is the worlds first multi-blockchain DEX, offering trading on Ethereum, Avalanche, Binance Smart Chain, and more. Users enjoy low fees and super-fast trade executions using 0. Gone are the days of gas wars and absurd transaction fees! Trade all of your favorite crypto tokens quickly and cheaply using Zero Exchange."
+    />
 
-  <meta name="description"
-    content="Zero Exchange is the worlds first multi-blockchain DEX, offering trading on Ethereum, Avalanche, Binance Smart Chain, and more. Users enjoy low fees and super-fast trade executions using 0. Gone are the days of gas wars and absurd transaction fees! Trade all of your favorite crypto tokens quickly and cheaply using Zero Exchange." />
+    <meta property="og:image" content="https://0.exchange/zero-swaps.jpg" />
 
-  <meta property="og:image"
-    content="https://0.exchange/zero-swaps.jpg">
+    <meta property="og:url" content="https://0.exchange" />
 
-  <meta property="og:url"
-    content="https://0.exchange">
+    <meta name="twitter:card" content="summary_large_image" />
 
-  <meta name="twitter:card"
-    content="summary_large_image">
-
-  <link rel="apple-touch-icon"
-    href="%PUBLIC_URL%/logo192.png" />
-  <!--
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest"
-    href="%PUBLIC_URL%/manifest.json" />
-  <!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -45,15 +39,29 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>Zero Exchange</title>
-</head>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      charset="UTF-8"
+      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
+    />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <title>Zero Exchange</title>
+  </head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"
-    style="background: #111;">
-  </div>
-  <!--
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root" style="background: #111"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -63,6 +71,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
-</html>
+  </body>
+</html>
diff --git a/public/kairon.png b/public/kairon.png
diff --git a/public/moonbeam.png b/public/moonbeam.png
diff --git a/public/phone.png b/public/phone.png
diff --git a/public/polkadot.png b/public/polkadot.png
diff --git a/public/tablet.png b/public/tablet.png
diff --git a/public/wasder.png b/public/wasder.png
diff --git a/public/web3api.png b/public/web3api.png
diff --git a/src/Routes.tsx b/src/Routes.tsx
@@ -4,7 +4,6 @@ import AboutUsPage from './pages/AboutUs';
 import Header from './layout/Header';
 import HomePage from './pages/Home';
 import LearnMorePage from './pages/LearnMore';
-import React from 'react';
 import ScrollToTop from './shared/components/ScrollToTop';
 
 export enum PublicRoutes {

diff --git a/src/index.css b/src/index.css
@@ -4,9 +4,7 @@ html {
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: 'Poppins', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background: #0E1130;

diff --git a/src/layout/Header/index.tsx b/src/layout/Header/index.tsx
@@ -1,24 +1,25 @@
-import './styles.scss';
+import "./styles.scss";
 
-import React, { useEffect, useState } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-
-export default function Header(props) {
+import { useEffect, useState } from "react";
+import { useHistory, useLocation } from "react-router-dom";
+import {
+  BarIcon,
+  CloseIcon,
+} from "../../pages/Home/components/MenuIcons/index";
 
+export default function Header() {
   const history = useHistory();
   const location = useLocation();
 
   const [stickyHeader, setStickyHeader] = useState(false);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [pathname, setPathname] = useState(location.pathname);
 
-  history.listen((location, action) => {
+  history.listen((location) => {
     setPathname(location.pathname);
   });
 
-  const handleScroll = (e) => {
+  const handleScroll = () => {
     const offset = window.pageYOffset;
     if (offset && offset > 40) {
       setStickyHeader(true);
@@ -28,10 +29,10 @@ export default function Header(props) {
   };
 
   useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
+    window.addEventListener("scroll", handleScroll);
     return () => {
-      window.removeEventListener('scroll', handleScroll);
-    }
+      window.removeEventListener("scroll", handleScroll);
+    };
   });
 
   const handleClick = (str) => {
@@ -40,67 +41,94 @@ export default function Header(props) {
 
   const goToSite = (str) => {
     window.open(str, "_blank");
-  }
+  };
 
   return (
-    <div id="Header" className={`animated fadeInDownTiny d300 ${stickyHeader ? "sticky" : ""}`}>
+    <div
+      id="Header"
+      className={`animated fadeInDownTiny d300 ${stickyHeader || mobileMenuOpen ? "sticky" : ""}`}
+    >
       <div className="container">
         <div className="header-container">
-
-          <div className="logo" onClick={() => handleClick('/')}>
-            <img src="/0-icon.png" alt="logo" />
+          <div className="logo" onClick={() => handleClick("/")}>
+            <svg
+              width="45"
+              height="46"
+              viewBox="0 0 45 46"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.93545 41.2241C1.40821 38.6901 0 35.3115 0 31.7312C0 28.1509 1.38307 24.7849 3.91031 22.2509L22.1794 3.93328C24.7066 1.39932 28.0637 0.0125732 31.6345 0.0125732C35.2054 0.0125732 38.5624 1.39932 41.0897 3.93328L35.1425 9.89628C33.2691 8.01787 30.0126 8.01787 28.1517 9.89628L9.8575 28.2139C8.92708 29.1468 8.41157 30.3949 8.41157 31.7186C8.41157 33.0423 8.92708 34.2904 9.8575 35.2233L3.93545 41.2241Z"
+                fill="#B368FC"
+              />
+              <path
+                d="M13.3655 45.1195C9.79466 45.1195 6.46273 43.7453 3.93549 41.2114L9.8701 35.2232C11.7435 37.1016 15 37.1016 16.8609 35.2232L35.1425 16.9055C36.0729 15.9726 36.5885 14.7246 36.5885 13.4009C36.5885 12.0771 36.0729 10.8291 35.1425 9.89617L41.0897 3.92056C43.6169 6.45452 45 9.82053 45 13.4009C45 16.9812 43.6169 20.3472 41.0897 22.8811L22.8081 41.1988C20.2934 43.7327 16.9363 45.1195 13.3655 45.1195Z"
+                fill="#1CB0F9"
+              />
+              <path
+                d="M35.1543 9.90892C34.2239 8.98862 32.9917 8.48435 31.6841 8.48435H0.225586V0.0378188L31.6967 0C35.2298 0 38.5617 1.43717 41.0889 3.9207L35.1543 9.90892Z"
+                fill="#1EF7E7"
+              />
+              <path
+                d="M44.7863 45.1322H13.3278C9.79466 45.1322 6.45015 43.7076 3.93549 41.2241L9.8701 35.2359C10.8005 36.1562 12.0327 36.6479 13.3404 36.6479L44.7863 36.6983V45.1322Z"
+                fill="#6752F7"
+              />
+            </svg>
           </div>
 
           <ul className="link-list">
-            <li className="is-hidden-touch">
-              <a href='mailto:hello@0.exchange'>
-                Contact Us
-              </a>
+            <li
+              onClick={() => goToSite("/launch_token")}
+              className="is-hidden-touch"
+            >
+              Launch your token
             </li>
-            <li onClick={() => goToSite("/Zero_Whitepaper_Final.pdf")}
-              className={`is-hidden-touch ${pathname === '/learn-more' ? 'active' : ''}`}>
-              Whitepaper
+            <li
+              onClick={() => goToSite("https://app.0.exchange")}
+              className="is-hidden-touch"
+            >
+              Use App
             </li>
-            <li onClick={() => goToSite("/Zero_Liquidity_Mining.pdf")}
-              className={`is-hidden-touch ${pathname === '/learn-more' ? 'active' : ''}`}>
-              Liquidity Mining
-            </li>
-            <li onClick={() => goToSite("https://app.0.exchange")} className="is-hidden-touch">
-              Launch App
-              <FontAwesomeIcon icon="rocket" size="sm" />
-            </li>
-            <li className="menu-toggle is-hidden-desktop" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
-              { mobileMenuOpen ? <FontAwesomeIcon icon="times" size="sm" /> :
-                <FontAwesomeIcon icon="bars" size="sm" />
-              }
+            <li
+              className="menu-toggle"
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            >
+              {mobileMenuOpen ? <CloseIcon /> : <BarIcon />}
             </li>
           </ul>
-
         </div>
 
-        { mobileMenuOpen &&
-          <ul className="mobile-menu animated fadeInUpTiny d250 is-hidden-desktop">
-            <li onClick={() => goToSite("/Zero_Whitepaper_Final.pdf")}
-              className={`${pathname === '/learn-more' ? 'active' : ''}`}>
+        {mobileMenuOpen && (
+          <ul className="mobile-menu animated fadeInUpTiny d250">
+            <li onClick={() => goToSite("/blog")}>Blog</li>
+            <li
+              onClick={() => goToSite("/Zero_Whitepaper_Final.pdf")}
+              className={`${pathname === "/learn-more" ? "active" : ""}`}
+            >
               Whitepaper
             </li>
-            <li onClick={() => goToSite("/Zero_Liquidity_Mining.pdf")}
-              className={`${pathname === '/learn-more' ? 'active' : ''}`}>
+            <li
+              onClick={() => goToSite("/Zero_Liquidity_Mining.pdf")}
+              className={`${pathname === "/learn-more" ? "active" : ""}`}
+            >
               Liquidity Mining
             </li>
-            <li>
-              <a href='mailto:hello@0.exchange'>
-                Contact Us
-              </a>
+            <li
+              onClick={() => goToSite("/launch_token")}
+              className="is-hidden-desktop"
+            >
+              Launch your token
             </li>
-            <li onClick={() => goToSite("https://app.0.exchange")}>
-              <FontAwesomeIcon icon="rocket" size="sm" />
-              Launch App
+            <li
+              onClick={() => goToSite("https://app.0.exchange")}
+              className="is-hidden-desktop"
+            >
+              Use App
             </li>
           </ul>
-        }
-
+        )}
       </div>
     </div>
-  )
+  );
 }