From 8ac45fd04c1935c4e00aa6a820b38fb813a4381f Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Tue, 5 Jul 2022 13:49:29 +0200 Subject: [PATCH] mobile hero --- src/components/ButtonLink.js | 29 +++++++++++++++++++++++++++++ src/index.css | 1 + src/pages/LandingPage.js | 27 +++++++++++++++++++++++---- src/utils/containers.js | 8 +++++--- src/utils/fonts.js | 11 +++++------ 5 files changed, 63 insertions(+), 13 deletions(-) create mode 100644 src/components/ButtonLink.js diff --git a/src/components/ButtonLink.js b/src/components/ButtonLink.js new file mode 100644 index 0000000..01a2c69 --- /dev/null +++ b/src/components/ButtonLink.js @@ -0,0 +1,29 @@ +import React from "react"; +import styled from "styled-components"; +import {Label} from "../utils/fonts"; + +const ButtonLinkStyle = styled(Label)` + background-color: ${({theme}) => theme.colors.green}; + color: ${({theme}) => theme.colors.white}; + border-radius: 12px; + text-align: center; + width: 122px; + padding: 4px 0; + cursor: pointer; + transition: transform 0.3s ease-in-out; + text-decoration: none; + + &:hover { + transform: scale(1.15); + } +`; + +function ButtonLink(props) { + return ( + + {props.children} + + ); +} + +export default ButtonLink; \ No newline at end of file diff --git a/src/index.css b/src/index.css index ee465bd..4c9c51f 100644 --- a/src/index.css +++ b/src/index.css @@ -13,4 +13,5 @@ html { body { font-family: 'Roboto', sans-serif; + background-color: #FCFCFC; } \ No newline at end of file diff --git a/src/pages/LandingPage.js b/src/pages/LandingPage.js index b47a53d..acbf68b 100644 --- a/src/pages/LandingPage.js +++ b/src/pages/LandingPage.js @@ -1,11 +1,30 @@ import React from "react"; -import {Body} from "../utils/fonts"; +import {Body, H1, Label} from "../utils/fonts"; +import {Container, FlexColumn} from "../utils/containers"; +import theme from "../utils/theme"; +import {Link} from "react-router-dom"; +import ButtonLink from "../components/ButtonLink"; function LandingPage() { return ( - - Landing page - + + +

+ Welcome to + +  Gonito.net! + +

+ + A data challenge platform for machine learning research, + competition, cooperation and reproducibility. + + + Join us! + + + ); } diff --git a/src/utils/containers.js b/src/utils/containers.js index 5d69130..7339924 100644 --- a/src/utils/containers.js +++ b/src/utils/containers.js @@ -4,12 +4,14 @@ const Container = styled.div` padding: ${({setPadding}) => setPadding ? setPadding : '0'}; margin: ${({setMargin}) => setMargin ? setMargin : '0'}; width: ${({setWidth}) => setWidth ? setWidth : 'auto'}; + text-align: ${({setTextAlign}) => setTextAlign ? setTextAlign : 'left'}; max-width: ${({setMaxWidth}) => setMaxWidth ? setMaxWidth : 'auto'}; min-width: ${({setMinWidth}) => setMinWidth ? setMinWidth : 'auto'}; height: ${({setHeight}) => setHeight ? setHeight : 'auto'}; max-height: ${({setMaxHeight}) => setMaxHeight ? setMaxHeight : 'auto'}; min-height: ${({setMinHeight}) => setMinHeight ? setMinHeight : 'auto'}; background-color: ${({setBackgroundColor}) => setBackgroundColor ? setBackgroundColor : 'transparent'}; + color: ${({theme, setColor}) => setColor ? setColor : theme.colors.dark}; border-radius: ${({setBorderRadius}) => setBorderRadius ? setBorderRadius : '0'}; box-shadow: ${({shadow}) => shadow ? shadow : 'none'}; gap: ${({setGap}) => setGap ? setGap : '0'}; @@ -18,19 +20,19 @@ const Container = styled.div` display: ${({setDisplay}) => setDisplay ? setDisplay : 'block'}; opacity: ${({setOpacity}) => setOpacity ? setOpacity : '1'}; outline: ${({setOutline}) => setOutline ? setOutline : 'none'}; - transition: opacity 0.3s ease-in-out; + text-decoration: ${({setTextDecoration}) => setTextDecoration ? setTextDecoration : 'none'}; `; const FlexRow = styled(Container)` display: ${({setDisplay}) => setDisplay ? setDisplay : 'flex'}; - justify-content: ${({alignment}) => alignment ? alignment : 'center'}; + justify-content: ${({alignmentX}) => alignmentX ? alignmentX : 'center'}; align-items: ${({alignmentY}) => alignmentY ? alignmentY : 'center'}; `; const FlexColumn = styled(FlexRow)` flex-direction: column; justify-content: ${({alignmentY}) => alignmentY ? alignmentY : 'center'}; - align-items: ${({alignment}) => alignment ? alignment : 'center'}; + align-items: ${({alignmentX}) => alignmentX ? alignmentX : 'center'}; `; const Grid = styled(Container)` diff --git a/src/utils/fonts.js b/src/utils/fonts.js index df0124e..ee1faaa 100644 --- a/src/utils/fonts.js +++ b/src/utils/fonts.js @@ -6,7 +6,6 @@ const H1 = styled(Container)` font-weight: 400; font-size: 24px; line-height: 24px; - color: ${({theme, color}) => color ? color : theme.colors.dark}; @media (min-width: ${({theme}) => theme.overMobile}) { font-size: 48px; @@ -19,7 +18,6 @@ const H2 = styled(Container)` font-weight: 400; font-size: 20px; line-height: 24px; - color: ${({theme, color}) => color ? color : theme.colors.dark}; @media (min-width: ${({theme}) => theme.overMobile}) { font-size: 32px; @@ -32,7 +30,6 @@ const H3 = styled(Container)` font-weight: 400; font-size: 18px; line-height: 20px; - color: ${({theme, color}) => color ? color : theme.colors.dark}; @media (min-width: ${({theme}) => theme.overMobile}) { font-size: 24px; @@ -45,7 +42,6 @@ const Body = styled(Container)` font-weight: 300; font-size: 14px; line-height: 20px; - color: ${({theme, color}) => color ? color : theme.colors.dark}; @media (min-width: ${({theme}) => theme.overMobile}) { font-weight: 400; @@ -59,7 +55,6 @@ const Medium = styled(Container)` font-weight: 400; font-size: 14px; line-height: 20px; - color: ${({theme, color}) => color ? color : theme.colors.dark}; @media (min-width: ${({theme}) => theme.overMobile}) { font-size: 16px; @@ -73,11 +68,15 @@ const Menu = styled(Container)` font-size: 18px; line-height: 24px; font-weight: 400; - color: ${({theme, color}) => color ? color : theme.colors.dark}; `; const Label = styled(Menu)` font-weight: 300; + + @media (min-width: ${({theme}) => theme.overMobile}) { + font-size: 22px; + line-height: 24px; + } `; export {H1, H2, H3, Body, Medium, Menu, Label}; \ No newline at end of file