From 73e7ada0c3942d2509ee742238aba0b6e0624474 Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Wed, 13 Jul 2022 13:19:49 +0200 Subject: [PATCH] Landing page on desktop --- src/assets/commercial-image.svg | 4 + src/assets/uam-logo.svg | 3 + src/components/elements/CircleNumber.js | 6 ++ src/components/sections/Commercial.js | 117 ++++++++++++++++++------ src/components/sections/Csi.js | 78 ++++++++++++---- src/components/sections/Partnerships.js | 22 ++++- src/utils/containers.js | 4 +- 7 files changed, 182 insertions(+), 52 deletions(-) create mode 100644 src/assets/commercial-image.svg create mode 100644 src/assets/uam-logo.svg diff --git a/src/assets/commercial-image.svg b/src/assets/commercial-image.svg new file mode 100644 index 0000000..435480c --- /dev/null +++ b/src/assets/commercial-image.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/uam-logo.svg b/src/assets/uam-logo.svg new file mode 100644 index 0000000..716027b --- /dev/null +++ b/src/assets/uam-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/elements/CircleNumber.js b/src/components/elements/CircleNumber.js index 1fc7e5b..992bcd2 100644 --- a/src/components/elements/CircleNumber.js +++ b/src/components/elements/CircleNumber.js @@ -14,6 +14,12 @@ const CircleNumberStyle = styled(Container)` font-weight: 500; width: 24px; height: 24px; + + @media (min-width: ${({theme}) => theme.overMobile}) { + width: 36px; + height: 36px; + font-size: 22px; + } ` const CircleNumber = (props) => { diff --git a/src/components/sections/Commercial.js b/src/components/sections/Commercial.js index c9b93e5..92e69ac 100644 --- a/src/components/sections/Commercial.js +++ b/src/components/sections/Commercial.js @@ -1,7 +1,10 @@ import React from "react"; -import {FlexColumn, FlexRow} from "../../utils/containers"; +import {FlexColumn, FlexRow, ImageBackground} from "../../utils/containers"; import {Body, H2, Medium} from "../../utils/fonts"; import CircleNumber from "../elements/CircleNumber"; +import Media from "react-media"; +import theme from "../../utils/theme"; +import commercialImage from '../../assets/commercial-image.svg'; const Commercial = () => { const listItemsContent = [ @@ -11,37 +14,91 @@ const Commercial = () => { 'The company appropriately rewards users who have contributed to the required outcome', ]; - 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. - - - { - listItemsContent.map((item, index) => { - return ( - - - - {item} - - - ); - }) - } + const mobileRender = () => { + return ( + +

+ Commercial challenges +

+ + + 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. + + + { + listItemsContent.map((item, index) => { + return ( + + + + {item} + + + ); + }) + } + + + Open challenges can allow you to find the right people to work with. + Find a challenge for your team and take it on! + - - Open challenges can allow you to find the right people to work with. Find a challenge for your team - and take it on! - - + ); + }; + + const desktopRender = () => { + return ( + + +

+ Commercial challenges +

+ + + 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. + + + { + listItemsContent.map((item, index) => { + return ( + + + + {item} + + + ); + }) + } + + + Open challenges can allow you to find the right people to work with. + Find a challenge for your team and take it on! + + + + + + + ); + }; + + return ( + <> + + {mobileRender()} + + + {desktopRender()} + + ); } diff --git a/src/components/sections/Csi.js b/src/components/sections/Csi.js index 722fbcc..053eafd 100644 --- a/src/components/sections/Csi.js +++ b/src/components/sections/Csi.js @@ -1,25 +1,69 @@ import React from "react"; -import {FlexColumn} from "../../utils/containers"; +import {FlexColumn, FlexRow, Svg} from "../../utils/containers"; import {Body, H2, Medium} from "../../utils/fonts"; +import Media from "react-media"; +import theme from "../../utils/theme"; +import uamLogo from '../../assets/uam-logo.svg'; const Csi = () => { + const mobileRender = () => { + 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. + + + ); + } + + const desktopRender = () => { + 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. + + + + + ); + } + 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. - - + <> + + {mobileRender()} + + + {desktopRender()} + + ); } diff --git a/src/components/sections/Partnerships.js b/src/components/sections/Partnerships.js index 8eb90f9..6f789dd 100644 --- a/src/components/sections/Partnerships.js +++ b/src/components/sections/Partnerships.js @@ -2,15 +2,31 @@ import React from "react"; import {FlexColumn, Grid} from "../../utils/containers"; import {H2} from "../../utils/fonts"; import Placeholder from "../elements/Placeholder"; +import styled from "styled-components"; + +const PartnershipsStyle = styled(FlexColumn)` + justify-content: flex-start; + gap: 32px; + + @media (min-width: ${({theme}) => theme.overMobile}) { + gap: 64px; + + .grid { + grid-template-rows: 1fr 1fr; + grid-template-columns: 1fr 1fr; + grid-gap: 64px; + } + } +`; const Partnerships = () => { return ( - +

Our partnerships

- + 1 @@ -25,7 +41,7 @@ const Partnerships = () => { - + ); } diff --git a/src/utils/containers.js b/src/utils/containers.js index 44540b2..5e1aa4f 100644 --- a/src/utils/containers.js +++ b/src/utils/containers.js @@ -61,12 +61,12 @@ const TransBack = styled(FlexRow)` width: 100%; height: 100vh; transition: ${({transition}) => transition ? transition : 'opacity'} 0.3s ease-in-out; - background-color: ${({theme, backgroundColor}) => backgroundColor ? backgroundColor : 'transparent'}; + background-color: ${({backgroundColor}) => backgroundColor ? backgroundColor : 'transparent'}; z-index: 2; `; const ImageBackground = styled(FlexColumn)` - background-size: cover; + background-size: ${({size}) => size ? size : 'cover'}; background-position: center; background-image: url(${({image}) => image}); background-repeat: no-repeat;