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

motivation on desktop

Browse Source
This commit is contained in:
mattyl006 2022-07-13 12:34:08 +02:00
parent 095c901f97
commit d07bdf6f3e
3 changed files with 75 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/ellipse.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="611" height="458" viewBox="0 0 611 458" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M610.5 164.5C610.5 297.048 518.447 458 350 458C181.553 458 0 421.048 0 288.5C0 155.952 144.553 0 313 0C481.447 0 610.5 31.9517 610.5 164.5Z" fill="#1B998B" fill-opacity="0.1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 293 B

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

@ -1,8 +1,10 @@
import React from "react"; 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 {Body, H2} from "../../utils/fonts";
import cubeIcon from '../../assets/cube_ico.svg'; import cubeIcon from '../../assets/cube_ico.svg';
import theme from "../../utils/theme"; import theme from "../../utils/theme";
import Media from "react-media";
import ellipse from '../../assets/ellipse.svg'
const Motivation = () => { const Motivation = () => {
@ -12,28 +14,68 @@ const Motivation = () => {
'Participate in competitions with commercial challenges' 'Participate in competitions with commercial challenges'
]; ];
return ( const mobileRender = () => {
<FlexColumn as='section' alignmentX='flex-start' gap='24px' width='100%'> return (
<H2 as='h2'> <FlexColumn as='section' alignmentX='flex-start' gap='24px' width='100%'>
Motivation <H2 as='h2'>
</H2> Motivation
</H2>
<FlexColumn as='ul' gap='16px' alignmentX='flex-start'> <FlexColumn as='ul' gap='16px' alignmentX='flex-start'>
{ {
content.map((paragraph, index) => { content.map((paragraph, index) => {
return ( return (
<FlexRow key={`motivation-${index}`} as='li' gap='12px' alignmentY='flex-start'> <FlexRow key={`motivation-${index}`} as='li' gap='12px' alignmentY='flex-start'>
<Svg src={cubeIcon} width='14px' height='14px' margin='4px 0 0 0' <Svg src={cubeIcon} width='14px' height='14px' margin='4px 0 0 0'
backgroundColor={theme.colors.green}/> backgroundColor={theme.colors.green}/>
<Body as='p'> <Body as='p'>
{paragraph} {paragraph}
</Body> </Body>
</FlexRow> </FlexRow>
); );
}) })
} }
</FlexColumn>
</FlexColumn> </FlexColumn>
</FlexColumn> );
}
const desktopRender = () => {
return (
<ImageBackground as='section' image={ellipse}
gap='48px' width='612px' height='458px'>
<H2 as='h2'>
Motivation
</H2>
<FlexColumn as='ul' gap='22px' alignmentX='flex-start'>
{
content.map((paragraph, index) => {
return (
<FlexRow key={`motivation-${index}`} as='li' gap='16px' alignmentY='flex-start'>
<Svg src={cubeIcon} width='20px' height='20px' size='cover' margin='2px 0 0 0'
backgroundColor={theme.colors.green}/>
<Body as='p' maxWidth='380px'>
{paragraph}
</Body>
</FlexRow>
);
})
}
</FlexColumn>
</ImageBackground>
);
}
return (
<>
<Media query={theme.mobile}>
{mobileRender()}
</Media>
<Media query={theme.desktop}>
{desktopRender()}
</Media>
</>
); );
} }

10
src/utils/containers.js
View File

@ -51,6 +51,7 @@ const Svg = styled(Container)`
width: ${({width}) => width ? width : '16px'}; width: ${({width}) => width ? width : '16px'};
height: ${({height}) => height ? height : '16px'}; height: ${({height}) => height ? height : '16px'};
transform: rotate(${({rotate}) => rotate ? rotate : '0'}); transform: rotate(${({rotate}) => rotate ? rotate : '0'});
mask-size: ${({size}) => size ? size : 'auto'};
`; `;
const TransBack = styled(FlexRow)` const TransBack = styled(FlexRow)`
@ -64,4 +65,11 @@ const TransBack = styled(FlexRow)`
z-index: 2; z-index: 2;
`; `;
export {Container, FlexRow, FlexColumn, Grid, Svg, TransBack}; 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};