diff --git a/package.json b/package.json index 5b9868e..b279f55 100644 --- 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/devices.png b/public/devices.png new file mode 100644 index 0000000..9ffc3fb Binary files /dev/null and b/public/devices.png differ diff --git a/public/index.html b/public/index.html index fb287fd..ee0d86c 100644 --- a/public/index.html +++ b/public/index.html @@ -1,42 +1,36 @@ + + + + + - - - - - + - + - + - + - + - + - - - - - - - Zero Exchange - + + + + + Zero Exchange + - - -
-
- - - - \ No newline at end of file + + diff --git a/public/phone.png b/public/phone.png new file mode 100644 index 0000000..0a6f07f Binary files /dev/null and b/public/phone.png differ diff --git a/public/tablet.png b/public/tablet.png new file mode 100644 index 0000000..c66b7cb Binary files /dev/null and b/public/tablet.png differ diff --git a/src/Routes.tsx b/src/Routes.tsx index 4973d0b..a5c56ca 100644 --- 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 index 2e2fa7c..110c7c2 100644 --- 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 index e1177bc..325becb 100644 --- a/src/layout/Header/index.tsx +++ b/src/layout/Header/index.tsx @@ -1,12 +1,13 @@ -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(); @@ -14,11 +15,11 @@ export default function Header(props) { 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 ( -