s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

mobile hero

Browse Source
This commit is contained in:
mattyl006 2022-07-05 13:49:29 +02:00
parent aad00a4711
commit 8ac45fd04c
5 changed files with 63 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/ButtonLink.js Normal file
View File

@ -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 (
<ButtonLinkStyle>
{props.children}
</ButtonLinkStyle>
);
}
export default ButtonLink;

1
src/index.css
View File

@ -13,4 +13,5 @@ html {
body { body {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
background-color: #FCFCFC;
} }

27
src/pages/LandingPage.js
View File

@ -1,11 +1,30 @@
import React from "react"; 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() { function LandingPage() {
return ( return (
<Body> <FlexColumn alignmentY='flex-start' setWidth='100%' setMinHeight='100vh' as='main'>
Landing page <FlexColumn alignmentX='flex-start' setGap='24px'
</Body> setWidth='80%' setMaxWidtsetCursorh='352px' setMargin='90px 0 0 0'>
<H1 as="h1">
Welcome to
<Container setDisplay="inline" setColor={theme.colors.green}>
&nbsp;Gonito.net!
</Container>
</H1>
<Body as="p">
A data challenge platform for machine learning research,
competition, cooperation and reproducibility.
</Body>
<ButtonLink as={Link} to='/'>
Join us!
</ButtonLink>
</FlexColumn>
</FlexColumn>
); );
} }

8
src/utils/containers.js
View File

@ -4,12 +4,14 @@ const Container = styled.div`
padding: ${({setPadding}) => setPadding ? setPadding : '0'}; padding: ${({setPadding}) => setPadding ? setPadding : '0'};
margin: ${({setMargin}) => setMargin ? setMargin : '0'}; margin: ${({setMargin}) => setMargin ? setMargin : '0'};
width: ${({setWidth}) => setWidth ? setWidth : 'auto'}; width: ${({setWidth}) => setWidth ? setWidth : 'auto'};
text-align: ${({setTextAlign}) => setTextAlign ? setTextAlign : 'left'};
max-width: ${({setMaxWidth}) => setMaxWidth ? setMaxWidth : 'auto'}; max-width: ${({setMaxWidth}) => setMaxWidth ? setMaxWidth : 'auto'};
min-width: ${({setMinWidth}) => setMinWidth ? setMinWidth : 'auto'}; min-width: ${({setMinWidth}) => setMinWidth ? setMinWidth : 'auto'};
height: ${({setHeight}) => setHeight ? setHeight : 'auto'}; height: ${({setHeight}) => setHeight ? setHeight : 'auto'};
max-height: ${({setMaxHeight}) => setMaxHeight ? setMaxHeight : 'auto'}; max-height: ${({setMaxHeight}) => setMaxHeight ? setMaxHeight : 'auto'};
min-height: ${({setMinHeight}) => setMinHeight ? setMinHeight : 'auto'}; min-height: ${({setMinHeight}) => setMinHeight ? setMinHeight : 'auto'};
background-color: ${({setBackgroundColor}) => setBackgroundColor ? setBackgroundColor : 'transparent'}; background-color: ${({setBackgroundColor}) => setBackgroundColor ? setBackgroundColor : 'transparent'};
color: ${({theme, setColor}) => setColor ? setColor : theme.colors.dark};
border-radius: ${({setBorderRadius}) => setBorderRadius ? setBorderRadius : '0'}; border-radius: ${({setBorderRadius}) => setBorderRadius ? setBorderRadius : '0'};
box-shadow: ${({shadow}) => shadow ? shadow : 'none'}; box-shadow: ${({shadow}) => shadow ? shadow : 'none'};
gap: ${({setGap}) => setGap ? setGap : '0'}; gap: ${({setGap}) => setGap ? setGap : '0'};
@ -18,19 +20,19 @@ const Container = styled.div`
display: ${({setDisplay}) => setDisplay ? setDisplay : 'block'}; display: ${({setDisplay}) => setDisplay ? setDisplay : 'block'};
opacity: ${({setOpacity}) => setOpacity ? setOpacity : '1'}; opacity: ${({setOpacity}) => setOpacity ? setOpacity : '1'};
outline: ${({setOutline}) => setOutline ? setOutline : 'none'}; outline: ${({setOutline}) => setOutline ? setOutline : 'none'};
transition: opacity 0.3s ease-in-out; text-decoration: ${({setTextDecoration}) => setTextDecoration ? setTextDecoration : 'none'};
`; `;
const FlexRow = styled(Container)` const FlexRow = styled(Container)`
display: ${({setDisplay}) => setDisplay ? setDisplay : 'flex'}; display: ${({setDisplay}) => setDisplay ? setDisplay : 'flex'};
justify-content: ${({alignment}) => alignment ? alignment : 'center'}; justify-content: ${({alignmentX}) => alignmentX ? alignmentX : 'center'};
align-items: ${({alignmentY}) => alignmentY ? alignmentY : 'center'}; align-items: ${({alignmentY}) => alignmentY ? alignmentY : 'center'};
`; `;
const FlexColumn = styled(FlexRow)` const FlexColumn = styled(FlexRow)`
flex-direction: column; flex-direction: column;
justify-content: ${({alignmentY}) => alignmentY ? alignmentY : 'center'}; justify-content: ${({alignmentY}) => alignmentY ? alignmentY : 'center'};
align-items: ${({alignment}) => alignment ? alignment : 'center'}; align-items: ${({alignmentX}) => alignmentX ? alignmentX : 'center'};
`; `;
const Grid = styled(Container)` const Grid = styled(Container)`

11
src/utils/fonts.js
View File

@ -6,7 +6,6 @@ const H1 = styled(Container)`
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 24px;
color: ${({theme, color}) => color ? color : theme.colors.dark};
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({theme}) => theme.overMobile}) {
font-size: 48px; font-size: 48px;
@ -19,7 +18,6 @@ const H2 = styled(Container)`
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
color: ${({theme, color}) => color ? color : theme.colors.dark};
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({theme}) => theme.overMobile}) {
font-size: 32px; font-size: 32px;
@ -32,7 +30,6 @@ const H3 = styled(Container)`
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 20px; line-height: 20px;
color: ${({theme, color}) => color ? color : theme.colors.dark};
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({theme}) => theme.overMobile}) {
font-size: 24px; font-size: 24px;
@ -45,7 +42,6 @@ const Body = styled(Container)`
font-weight: 300; font-weight: 300;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
color: ${({theme, color}) => color ? color : theme.colors.dark};
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({theme}) => theme.overMobile}) {
font-weight: 400; font-weight: 400;
@ -59,7 +55,6 @@ const Medium = styled(Container)`
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
color: ${({theme, color}) => color ? color : theme.colors.dark};
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({theme}) => theme.overMobile}) {
font-size: 16px; font-size: 16px;
@ -73,11 +68,15 @@ const Menu = styled(Container)`
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
color: ${({theme, color}) => color ? color : theme.colors.dark};
`; `;
const Label = styled(Menu)` const Label = styled(Menu)`
font-weight: 300; font-weight: 300;
@media (min-width: ${({theme}) => theme.overMobile}) {
font-size: 22px;
line-height: 24px;
}
`; `;
export {H1, H2, H3, Body, Medium, Menu, Label}; export {H1, H2, H3, Body, Medium, Menu, Label};