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

refactor by separate hero section, create csi and commercial section

Browse Source
This commit is contained in:
mattyl006 2022-07-07 11:12:59 +02:00
parent 0316939f75
commit 7249152edc
8 changed files with 147 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/elements/CircleNumber.js Normal file
View File

@ -0,0 +1,27 @@
import React from "react";
import {Container} from "../../utils/containers";
import styled from "styled-components";
const CircleNumberStyle = styled(Container)`
border-radius: 50%;
background-color: ${({theme}) => theme.colors.green};
color: ${({theme}) => theme.colors.white};
display: flex;
justify-content: center;
align-items: center;
font-family: 'Kanit', sans-serif;
font-size: 14px;
font-weight: 500;
width: 24px;
height: 24px;
`
const CircleNumber = (props) => {
return (
<CircleNumberStyle>
{props.number}
</CircleNumberStyle>
);
}
export default CircleNumber;

53
src/components/sections/Commercial.js Normal file
View File

@ -0,0 +1,53 @@
import React from "react";
import {FlexColumn, FlexRow} from "../../utils/containers";
import {Body, H2, Medium} from "../../utils/fonts";
import CircleNumber from "../elements/CircleNumber";
const Commercial = () => {
return (
<FlexColumn as='section' alignmentX='flex-start' width='80%' maxWidth='452px'>
<H2 as='h2' margin='0 0 24px 0'>
Commercial challanges
</H2>
<FlexColumn gap='20px'>
<Body as='p'>
The artificial intelligence center works with companies by accepting machine learning challenges
from them that are available to solve on Gonito. Each commercial challenge is properly scored which
translates into an award for solving it according to the client's requirements.
</Body>
<FlexColumn as='ul' gap='16px' alignmentX='flex-start'>
<FlexRow width='100%' gap='8px'>
<CircleNumber number={1}/>
<Medium width='80%' as='li'>
A company comes to CSI with a business need
</Medium>
</FlexRow>
<FlexRow width='100%' gap='8px'>
<CircleNumber number={2}/>
<Medium width='80%' as='li'>
CSI determines the need with an appropriate challenge on Gonito
</Medium>
</FlexRow>
<FlexRow width='100%' gap='8px'>
<CircleNumber number={3}/>
<Medium width='80%' as='li'>
The challenge is solved by willing users
</Medium>
</FlexRow>
<FlexRow width='100%' gap='8px'>
<CircleNumber number={4}/>
<Medium width='80%' as='li'>
The company appropriately rewards users who have contributed to the required outcome
</Medium>
</FlexRow>
</FlexColumn>
<Body as='p'>
Open challenges can allow you to find the right people to work with. Find a challenge for your team
and take it on!
</Body>
</FlexColumn>
</FlexColumn>
);
}
export default Commercial;

26
src/components/sections/Csi.js Normal file
View File

@ -0,0 +1,26 @@
import React from "react";
import {FlexColumn} from "../../utils/containers";
import {Body, H2, Medium} from "../../utils/fonts";
const Csi = () => {
return (
<FlexColumn as='section' alignmentX='flex-start' width='80%' maxWidth='452px'>
<H2 as='h2' margin='0 0 24px 0'>
Center for artificial intelligence
</H2>
<Body as='p' margin='0 0 16px 0'>
<Medium display='inline'>Gonito.net</Medium> belongs to the
<Medium display='inline'>&nbsp;Artificial Intelligence Centre (CSI)&nbsp;</Medium>
at Adam Mickiewicz University (UAM) which conducts research on the development of artificial
intelligence, carries out scientific and research and development projects, integrates the research
of scientists from various departments of Adam Mickiewicz University and outside it - from leading
scientific centers in Poland and abroad as well as those employed in business entities.
</Body>
<Medium as='p'>
CSI also cooperates with business entities in creating new solutions to be implemented in enterprises.
</Medium>
</FlexColumn>
);
}
export default Csi;

29
src/components/sections/Hero.js Normal file
View File

@ -0,0 +1,29 @@
import React from "react";
import {Body, H1} from "../../utils/fonts";
import {Container, FlexColumn} from "../../utils/containers";
import theme from "../../utils/theme";
import ButtonLink from "../elements/ButtonLink";
import {Link} from "react-router-dom";
const Hero = () => {
return (
<FlexColumn alignmentX='flex-start' gap='24px'
width='80%' maxWidth='452px' margin='90px 0 0 0'>
<H1 as="h1">
Welcome to
<Container display="inline" color={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>
);
}
export default Hero;

2
src/components/sections/Motivation.js
View File

@ -6,7 +6,7 @@ import theme from "../../utils/theme";
const Motivation = () => { const Motivation = () => {
return ( return (
<FlexColumn as='section' alignmentX='flex-start' gap='24px' width='80%' maxWidth='352px'> <FlexColumn as='section' alignmentX='flex-start' gap='24px' width='80%' maxWidth='452px'>
<H2 as='h2'> <H2 as='h2'>
Motivation Motivation
</H2> </H2>

2
src/index.css
View File

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto:wght@300;400;500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500&family=Roboto:wght@300;400;500&display=swap');
html { html {
box-sizing: border-box; box-sizing: border-box;

28
src/pages/LandingPage.js
View File

@ -1,31 +1,17 @@
import React from "react"; import React from "react";
import {Body, H1} from "../utils/fonts"; import {FlexColumn} from "../utils/containers";
import {Container, FlexColumn} from "../utils/containers";
import theme from "../utils/theme";
import {Link} from "react-router-dom";
import ButtonLink from "../components/elements/ButtonLink";
import Motivation from "../components/sections/Motivation"; import Motivation from "../components/sections/Motivation";
import Csi from "../components/sections/Csi";
import Commercial from "../components/sections/Commercial";
import Hero from "../components/sections/Hero";
const LandingPage = () => { const LandingPage = () => {
return ( return (
<FlexColumn alignmentY='flex-start' width='100%' minHeight='100vh' as='main' gap='48px'> <FlexColumn alignmentY='flex-start' width='100%' minHeight='100vh' as='main' gap='48px'>
<FlexColumn alignmentX='flex-start' gap='24px' <Hero/>
width='80%' maxWidth='352px' margin='90px 0 0 0'>
<H1 as="h1">
Welcome to
<Container display="inline" color={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>
<Motivation/> <Motivation/>
<Csi/>
<Commercial/>
</FlexColumn> </FlexColumn>
); );
} }

4
src/utils/containers.js
View File

@ -14,7 +14,6 @@ const Container = styled.div`
color: ${({theme, color}) => color ? color : theme.colors.dark}; color: ${({theme, color}) => color ? color : theme.colors.dark};
border-radius: ${({borderRadius}) => borderRadius ? borderRadius : '0'}; border-radius: ${({borderRadius}) => borderRadius ? borderRadius : '0'};
box-shadow: ${({shadow}) => shadow ? shadow : 'none'}; box-shadow: ${({shadow}) => shadow ? shadow : 'none'};
gap: ${({gap}) => gap ? gap : '0'};
border: ${({border}) => border ? border : 'none'}; border: ${({border}) => border ? border : 'none'};
cursor: ${({cursor}) => cursor ? cursor : 'auto'}; cursor: ${({cursor}) => cursor ? cursor : 'auto'};
display: ${({display}) => display ? display : 'block'}; display: ${({display}) => display ? display : 'block'};
@ -28,18 +27,21 @@ const FlexRow = styled(Container)`
display: ${({display}) => display ? display : 'flex'}; display: ${({display}) => display ? display : 'flex'};
justify-content: ${({alignmentX}) => alignmentX ? alignmentX : 'center'}; justify-content: ${({alignmentX}) => alignmentX ? alignmentX : 'center'};
align-items: ${({alignmentY}) => alignmentY ? alignmentY : 'center'}; align-items: ${({alignmentY}) => alignmentY ? alignmentY : 'center'};
gap: ${({gap}) => gap ? gap : '0'};
`; `;
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: ${({alignmentX}) => alignmentX ? alignmentX : 'center'}; align-items: ${({alignmentX}) => alignmentX ? alignmentX : 'center'};
gap: ${({gap}) => gap ? gap : '0'};
`; `;
const Grid = styled(Container)` const Grid = styled(Container)`
display: grid; display: grid;
grid-template-columns: ${({templateColumns}) => templateColumns ? templateColumns : 'auto'}; grid-template-columns: ${({templateColumns}) => templateColumns ? templateColumns : 'auto'};
grid-template-rows: ${({templateRows}) => templateRows ? templateRows : 'auto'}; grid-template-rows: ${({templateRows}) => templateRows ? templateRows : 'auto'};
grid-gap: ${({gridGap}) => gridGap ? gridGap : '0'};
`; `;
const Svg = styled(Container)` const Svg = styled(Container)`