diff --git a/src/components/elements/CircleNumber.js b/src/components/elements/CircleNumber.js new file mode 100644 index 0000000..1fc7e5b --- /dev/null +++ b/src/components/elements/CircleNumber.js @@ -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 ( + + {props.number} + + ); +} + +export default CircleNumber; \ No newline at end of file diff --git a/src/components/sections/Commercial.js b/src/components/sections/Commercial.js new file mode 100644 index 0000000..30cda7f --- /dev/null +++ b/src/components/sections/Commercial.js @@ -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 ( + +

+ Commercial challanges +

+ + + 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. + + + + + + A company comes to CSI with a business need + + + + + + CSI determines the need with an appropriate challenge on Gonito + + + + + + The challenge is solved by willing users + + + + + + The company appropriately rewards users who have contributed to the required outcome + + + + + Open challenges can allow you to find the right people to work with. Find a challenge for your team + and take it on! + + + + ); +} + +export default Commercial; \ No newline at end of file diff --git a/src/components/sections/Csi.js b/src/components/sections/Csi.js new file mode 100644 index 0000000..cfbed4e --- /dev/null +++ b/src/components/sections/Csi.js @@ -0,0 +1,26 @@ +import React from "react"; +import {FlexColumn} from "../../utils/containers"; +import {Body, H2, Medium} from "../../utils/fonts"; + +const Csi = () => { + return ( + +

+ Center for artificial intelligence +

+ + Gonito.net belongs to the +  Artificial Intelligence Centre (CSI)  + 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. + + + CSI also cooperates with business entities in creating new solutions to be implemented in enterprises. + + + ); +} + +export default Csi; \ No newline at end of file diff --git a/src/components/sections/Hero.js b/src/components/sections/Hero.js new file mode 100644 index 0000000..d1f105e --- /dev/null +++ b/src/components/sections/Hero.js @@ -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 ( + +

+ Welcome to + +  Gonito.net! + +

+ + A data challenge platform for machine learning research, + competition, cooperation and reproducibility. + + + Join us! + + + ); +} + +export default Hero; \ No newline at end of file diff --git a/src/components/sections/Motivation.js b/src/components/sections/Motivation.js index 9fc52dc..573db41 100644 --- a/src/components/sections/Motivation.js +++ b/src/components/sections/Motivation.js @@ -6,7 +6,7 @@ import theme from "../../utils/theme"; const Motivation = () => { return ( - +

Motivation

diff --git a/src/index.css b/src/index.css index 4c9c51f..a112ed7 100644 --- a/src/index.css +++ b/src/index.css @@ -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 { box-sizing: border-box; diff --git a/src/pages/LandingPage.js b/src/pages/LandingPage.js index 2bd7e32..ccfe02b 100644 --- a/src/pages/LandingPage.js +++ b/src/pages/LandingPage.js @@ -1,31 +1,17 @@ import React from "react"; -import {Body, H1} from "../utils/fonts"; -import {Container, FlexColumn} from "../utils/containers"; -import theme from "../utils/theme"; -import {Link} from "react-router-dom"; -import ButtonLink from "../components/elements/ButtonLink"; +import {FlexColumn} from "../utils/containers"; 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 = () => { return ( - -

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