From 095c901f979ee4ca71635ee6bd41a7f71da58b7b Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Wed, 13 Jul 2022 11:42:27 +0200
Subject: [PATCH] navbar and hero section on desktop

---
 src/assets/codepen_ico.svg                    |  3 +
 src/components/elements/ButtonLink.js         |  7 ++
 src/components/elements/Logo.js               | 14 +++-
 src/components/elements/NavBar.js             | 52 --------------
 src/components/elements/NavBar/NavBar.js      | 71 +++++++++++++++++++
 src/components/elements/NavBar/NavBarStyle.js | 53 ++++++++++++++
 src/components/elements/NavBar/index.js       |  1 +
 src/components/sections/Hero.js               | 52 +++++++++++++-
 src/pages/LandingPage.js                      | 31 ++++++--
 9 files changed, 223 insertions(+), 61 deletions(-)
 create mode 100644 src/assets/codepen_ico.svg
 delete mode 100644 src/components/elements/NavBar.js
 create mode 100644 src/components/elements/NavBar/NavBar.js
 create mode 100644 src/components/elements/NavBar/NavBarStyle.js
 create mode 100644 src/components/elements/NavBar/index.js

diff --git a/src/assets/codepen_ico.svg b/src/assets/codepen_ico.svg
new file mode 100644
index 0000000..e9306b9
--- /dev/null
+++ b/src/assets/codepen_ico.svg
@@ -0,0 +1,3 @@
+<svg width="212" height="180" viewBox="0 0 212 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M207.977 56.1458L111.087 1.30189C107.779 -0.426044 104.25 -0.441865 100.913 1.30189L4.0222 56.1458C1.53783 57.5517 0 60.0633 0 62.5742V117.418C0 119.929 1.53783 122.44 4.02261 123.846L100.913 178.698C104.22 180.426 107.75 180.442 111.087 178.698L207.977 123.846C210.462 122.441 212 119.929 212 117.418V62.5742C212 60.0633 210.462 57.5517 207.977 56.1458ZM115.109 22.1943L186.446 62.5742L154.623 80.6547L115.109 58.2549V22.1943ZM96.8904 22.1943V58.2549L57.3769 80.6547L25.5534 62.5742L96.8904 22.1943ZM18.2187 77.0386L41.0513 89.9961L18.2187 102.954V77.0386ZM96.8904 157.798L25.5534 117.418L57.3769 99.3375L96.8904 121.737V157.798ZM106 108.277L73.821 89.9961L106 71.7148L138.179 89.9961L106 108.277ZM115.109 157.798V121.737L154.623 99.3375L186.446 117.418L115.109 157.798ZM193.781 102.954L170.948 89.9961L193.781 77.0386V102.954Z" fill="#1B998B"/>
+</svg>
diff --git a/src/components/elements/ButtonLink.js b/src/components/elements/ButtonLink.js
index ca511c5..6e5caa2 100644
--- a/src/components/elements/ButtonLink.js
+++ b/src/components/elements/ButtonLink.js
@@ -16,6 +16,13 @@ const ButtonLinkStyle = styled(Label)`
   &:hover {
     transform: scale(1.15);
   }
+
+  @media (min-width: ${({theme}) => theme.overMobile}) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 44px;
+  }
 `;
 
 const ButtonLink = (props) => {
diff --git a/src/components/elements/Logo.js b/src/components/elements/Logo.js
index 2d857cb..732e671 100644
--- a/src/components/elements/Logo.js
+++ b/src/components/elements/Logo.js
@@ -2,12 +2,22 @@ import React from "react";
 import {H1} from "../../utils/fonts";
 import theme from "../../utils/theme";
 import {Link} from "react-router-dom";
+import styled from "styled-components";
+
+const LogoStyle = styled(H1)`
+  font-size: 24px;
+
+  @media (min-width: ${({theme}) => theme.overMobile}) {
+    font-size: 32px;
+    line-height: 32px;
+  }
+`;
 
 const Logo = () => {
     return (
-        <H1 as={Link} cursor='pointer' to='/' color={theme.colors.green}>
+        <LogoStyle as={Link} cursor='pointer' to='/' color={theme.colors.green}>
             Gonito.net
-        </H1>
+        </LogoStyle>
     );
 }
 
diff --git a/src/components/elements/NavBar.js b/src/components/elements/NavBar.js
deleted file mode 100644
index afec095..0000000
--- a/src/components/elements/NavBar.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from "react";
-import {Container, FlexRow} from "../../utils/containers";
-import Logo from "./Logo";
-import styled from "styled-components";
-import menuButtonIcon from '../../assets/menu-button.svg';
-import MobileNavMenu from "./MobileNavMenu";
-
-const NavBarStyle = styled(Container)`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 42px;
-  background-color: ${({theme}) => theme.colors.white};
-  box-shadow: ${({theme}) => theme.navShadow};
-  padding: 0 10px;
-  z-index: 2;
-`;
-
-const MenuButton = styled(Container)`
-  width: 20px;
-  height: 14px;
-  background-image: url(${menuButtonIcon});
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  cursor: pointer;
-  margin-top: 4px;
-`;
-
-const NavBar = () => {
-    const [navMenuTranslateY, setNavMenuTranslateY] = React.useState('calc(-100vh - 42px)');
-
-    const toggleNavMenu = () => {
-        if (navMenuTranslateY === 'calc(-100vh - 42px)')
-            setNavMenuTranslateY('0');
-        else
-            setNavMenuTranslateY('calc(-100vh - 42px)');
-    }
-
-    return (
-        <NavBarStyle as='header'>
-            <FlexRow height='100%' alignmentX='space-between' as='nav'>
-                <Logo/>
-                <MenuButton as='button' onClick={toggleNavMenu}/>
-            </FlexRow>
-            <MobileNavMenu translateY={navMenuTranslateY} toggleNavMenu={toggleNavMenu}/>
-        </NavBarStyle>
-    );
-}
-
-export default NavBar;
\ No newline at end of file
diff --git a/src/components/elements/NavBar/NavBar.js b/src/components/elements/NavBar/NavBar.js
new file mode 100644
index 0000000..f92e5d5
--- /dev/null
+++ b/src/components/elements/NavBar/NavBar.js
@@ -0,0 +1,71 @@
+import React from "react";
+import {Container, FlexRow, Svg} from "../../../utils/containers";
+import Logo from "../Logo";
+import styled from "styled-components";
+import menuButtonIcon from '../../../assets/menu-button.svg';
+import MobileNavMenu from "../MobileNavMenu";
+import {Link} from "react-router-dom";
+import loginIco from "../../../assets/login_ico.svg";
+import {Menu} from "../../../utils/fonts";
+import registerIco from "../../../assets/register_ico.svg";
+import {CHALLENGES_PAGE} from "../../../utils/globals";
+import cupIco from "../../../assets/cup_ico.svg";
+import NavBarStyle from "./NavBarStyle";
+
+const MenuButton = styled(Container)`
+  width: 20px;
+  height: 14px;
+  background-image: url(${menuButtonIcon});
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  margin-top: 4px;
+
+  @media (min-width: ${({theme}) => theme.overMobile}) {
+    display: none;
+  }
+`;
+
+const NavBar = () => {
+    const [navMenuTranslateY, setNavMenuTranslateY] = React.useState('calc(-100vh - 42px)');
+
+    const toggleNavMenu = () => {
+        if (navMenuTranslateY === 'calc(-100vh - 42px)')
+            setNavMenuTranslateY('0');
+        else
+            setNavMenuTranslateY('calc(-100vh - 42px)');
+    }
+
+    return (
+        <NavBarStyle as='header'>
+            <FlexRow height='100%' alignmentX='space-between' as='nav'>
+                <Logo/>
+                <MenuButton as='button' onClick={toggleNavMenu}/>
+                <FlexRow as='ul' gap='32px'>
+                    <FlexRow as={Link} to='/' gap='16px'>
+                        <Svg width='16px' height='16px' src={loginIco}/>
+                        <Menu as='li'>
+                            Sign in
+                        </Menu>
+                    </FlexRow>
+                    <FlexRow as={Link} to='/' gap='16px'>
+                        <Svg width='16px' height='16px' src={registerIco}/>
+                        <Menu as='li'>
+                            Register
+                        </Menu>
+                    </FlexRow>
+                    <FlexRow as={Link} to={CHALLENGES_PAGE} gap='16px'>
+                        <Svg width='16px' height='16px' src={cupIco}/>
+                        <Menu as='li'>
+                            Challenges
+                        </Menu>
+                    </FlexRow>
+                </FlexRow>
+            </FlexRow>
+            <MobileNavMenu translateY={navMenuTranslateY} toggleNavMenu={toggleNavMenu}/>
+        </NavBarStyle>
+    );
+}
+
+export default NavBar;
\ No newline at end of file
diff --git a/src/components/elements/NavBar/NavBarStyle.js b/src/components/elements/NavBar/NavBarStyle.js
new file mode 100644
index 0000000..c1d981a
--- /dev/null
+++ b/src/components/elements/NavBar/NavBarStyle.js
@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+import {Container} from "../../../utils/containers";
+
+const NavBarStyle = styled(Container)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 42px;
+  background-color: ${({theme}) => theme.colors.white};
+  box-shadow: ${({theme}) => theme.navShadow};
+  padding: 0 10px;
+  z-index: 2;
+
+  ul {
+    display: none;
+  }
+
+  @media (min-width: ${({theme}) => theme.overMobile}) {
+    height: 48px;
+    padding: 0 16px;
+
+    ul {
+      display: flex;
+
+      a {
+        cursor: pointer;
+
+        div {
+          cursor: pointer;
+          transition: background-color 0.3s ease-in-out;
+        }
+
+        li {
+          cursor: pointer;
+          transition: color 0.3s ease-in-out;
+        }
+
+        &:hover {
+          div {
+            background-color: ${({theme}) => theme.colors.green};
+          }
+
+          li {
+            color: ${({theme}) => theme.colors.green};
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default NavBarStyle;
\ No newline at end of file
diff --git a/src/components/elements/NavBar/index.js b/src/components/elements/NavBar/index.js
new file mode 100644
index 0000000..3805d8d
--- /dev/null
+++ b/src/components/elements/NavBar/index.js
@@ -0,0 +1 @@
+export {default} from './NavBar';
\ No newline at end of file
diff --git a/src/components/sections/Hero.js b/src/components/sections/Hero.js
index 4231a6c..7ffe46b 100644
--- a/src/components/sections/Hero.js
+++ b/src/components/sections/Hero.js
@@ -1,11 +1,19 @@
 import React from "react";
-import {Body, H1} from "../../utils/fonts";
-import {Container, FlexColumn} from "../../utils/containers";
+import {Body, H1, Medium} from "../../utils/fonts";
+import {Container, FlexColumn, FlexRow, Svg} from "../../utils/containers";
 import theme from "../../utils/theme";
 import ButtonLink from "../elements/ButtonLink";
 import {Link} from "react-router-dom";
+import Media from "react-media";
+import codepenIco from '../../assets/codepen_ico.svg';
+import styled from "styled-components";
 
-const Hero = () => {
+const TitleParagraph = styled(Medium)`
+  font-size: 20px;
+  line-height: 28px;
+`;
+
+const mobileRender = () => {
     return (
         <FlexColumn alignmentX='flex-start' gap='24px' maxWidth='452px'>
             <H1 as="h1">
@@ -25,4 +33,42 @@ const Hero = () => {
     );
 }
 
+const desktopRender = () => {
+    return (
+        <FlexColumn alignmentX='flex-start' gap='24px'>
+            <H1 as="h1">
+                Welcome to
+                <Container display="inline" color={theme.colors.green}>
+                    &nbsp;Gonito.net!
+                </Container>
+            </H1>
+            <FlexRow gap='20px'>
+                <Container>
+                    <TitleParagraph as="p" maxWidth='286px' margin='0 0 20px 0'>
+                        A data challenge platform for machine learning research,
+                        competition, cooperation and reproducibility.
+                    </TitleParagraph>
+                    <ButtonLink as={Link} to='/'>
+                        Join us!
+                    </ButtonLink>
+                </Container>
+                <Svg src={codepenIco} width='212px' height='180px' backgroundColor={theme.colors.green}/>
+            </FlexRow>
+        </FlexColumn>
+    );
+}
+
+const Hero = () => {
+    return (
+        <>
+            <Media query={theme.mobile}>
+                {mobileRender()}
+            </Media>
+            <Media query={theme.desktop}>
+                {desktopRender()}
+            </Media>
+        </>
+    );
+}
+
 export default Hero;
\ No newline at end of file
diff --git a/src/pages/LandingPage.js b/src/pages/LandingPage.js
index 8b8c7ff..ce49cae 100644
--- a/src/pages/LandingPage.js
+++ b/src/pages/LandingPage.js
@@ -5,19 +5,42 @@ import Csi from "../components/sections/Csi";
 import Commercial from "../components/sections/Commercial";
 import Hero from "../components/sections/Hero";
 import Partnerships from "../components/sections/Partnerships";
+import styled from "styled-components";
+
+const LandingPageStyle = styled(FlexColumn)`
+  justify-content: flex-start;
+  width: 100%;
+  min-height: 100vh;
+  padding: 90px 0 32px;
+
+  .main-container {
+    max-width: 452px;
+    gap: 48px;
+    width: 80%;
+  }
+
+  @media (min-width: ${({theme}) => theme.overMobile}) {
+    padding: 172px 0 124px;
+
+    .main-container {
+      max-width: none;
+      gap: 124px;
+    }
+  }
+`;
 
 const LandingPage = () => {
     return (
-        <FlexColumn as='main' alignmentY='flex-start' width='100%'
-                    minHeight='100vh' padding='90px 0 32px 0'>
-            <FlexColumn maxWidth='452px' gap='48px' width='80%'>
+        <LandingPageStyle as='main' alignmentY='flex-start' width='100%'
+                          minHeight='100vh' padding='90px 0 32px 0'>
+            <FlexColumn className='main-container'>
                 <Hero/>
                 <Motivation/>
                 <Csi/>
                 <Commercial/>
                 <Partnerships/>
             </FlexColumn>
-        </FlexColumn>
+        </LandingPageStyle>
     );
 }