From d07bdf6f3eff1a3b51a3cb999252a4399c44070d Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Wed, 13 Jul 2022 12:34:08 +0200 Subject: [PATCH] motivation on desktop --- src/assets/ellipse.svg | 3 + src/components/sections/Motivation.js | 84 ++++++++++++++++++++------- src/utils/containers.js | 10 +++- 3 files changed, 75 insertions(+), 22 deletions(-) create mode 100644 src/assets/ellipse.svg diff --git a/src/assets/ellipse.svg b/src/assets/ellipse.svg new file mode 100644 index 0000000..7276c3d --- /dev/null +++ b/src/assets/ellipse.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/sections/Motivation.js b/src/components/sections/Motivation.js index 92252b9..51b7336 100644 --- a/src/components/sections/Motivation.js +++ b/src/components/sections/Motivation.js @@ -1,8 +1,10 @@ import React from "react"; -import {FlexColumn, FlexRow, Svg} from "../../utils/containers"; +import {FlexColumn, FlexRow, ImageBackground, Svg} from "../../utils/containers"; import {Body, H2} from "../../utils/fonts"; import cubeIcon from '../../assets/cube_ico.svg'; import theme from "../../utils/theme"; +import Media from "react-media"; +import ellipse from '../../assets/ellipse.svg' const Motivation = () => { @@ -12,28 +14,68 @@ const Motivation = () => { 'Participate in competitions with commercial challenges' ]; - return ( - -

- Motivation -

+ const mobileRender = () => { + return ( + +

+ Motivation +

- - { - content.map((paragraph, index) => { - return ( - - - - {paragraph} - - - ); - }) - } + + { + content.map((paragraph, index) => { + return ( + + + + {paragraph} + + + ); + }) + } + - + ); + } + + const desktopRender = () => { + return ( + +

+ Motivation +

+ + + { + content.map((paragraph, index) => { + return ( + + + + {paragraph} + + + ); + }) + } + + + ); + } + + return ( + <> + + {mobileRender()} + + + {desktopRender()} + + ); } diff --git a/src/utils/containers.js b/src/utils/containers.js index 272ea21..44540b2 100644 --- a/src/utils/containers.js +++ b/src/utils/containers.js @@ -51,6 +51,7 @@ const Svg = styled(Container)` width: ${({width}) => width ? width : '16px'}; height: ${({height}) => height ? height : '16px'}; transform: rotate(${({rotate}) => rotate ? rotate : '0'}); + mask-size: ${({size}) => size ? size : 'auto'}; `; const TransBack = styled(FlexRow)` @@ -64,4 +65,11 @@ const TransBack = styled(FlexRow)` z-index: 2; `; -export {Container, FlexRow, FlexColumn, Grid, Svg, TransBack}; \ No newline at end of file +const ImageBackground = styled(FlexColumn)` + background-size: cover; + background-position: center; + background-image: url(${({image}) => image}); + background-repeat: no-repeat; +`; + +export {Container, FlexRow, FlexColumn, Grid, Svg, TransBack, ImageBackground}; \ No newline at end of file