navbar and hero section on desktop

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>

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) => {

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>
     );
 }
 

src/components/elements/NavBar.js

@@ -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;

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;

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;

src/components/elements/NavBar/index.js

@@ -0,0 +1 @@
+export {default} from './NavBar';

src/components/sections/Hero.js

@@ -1,11 +1,19 @@
 import React from "react";
-import {Body, H1} from "../../utils/fonts";
+import {Body, H1, Medium} from "../../utils/fonts";
-import {Container, FlexColumn} from "../../utils/containers";
+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;

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%'
+        <LandingPageStyle as='main' alignmentY='flex-start' width='100%'
-                    minHeight='100vh' padding='90px 0 32px 0'>
+                          minHeight='100vh' padding='90px 0 32px 0'>
-            <FlexColumn maxWidth='452px' gap='48px' width='80%'>
+            <FlexColumn className='main-container'>
                 <Hero/>
                 <Motivation/>
                 <Csi/>
                 <Commercial/>
                 <Partnerships/>
             </FlexColumn>
-        </FlexColumn>
+        </LandingPageStyle>
     );
 }