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 @@
+
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 (
-
+
Gonito.net
-
+
);
}
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 (
-
-
-
-
-
-
-
- );
-}
-
-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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+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 (
@@ -25,4 +33,42 @@ const Hero = () => {
);
}
+const desktopRender = () => {
+ return (
+
+
+ Welcome to
+
+ Gonito.net!
+
+
+
+
+
+ A data challenge platform for machine learning research,
+ competition, cooperation and reproducibility.
+
+
+ Join us!
+
+
+
+
+ );
+}
+
+const Hero = () => {
+ return (
+ <>
+
+ {mobileRender()}
+
+
+ {desktopRender()}
+
+
+ );
+}
+
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 (
-
-
+
+
-
+
);
}