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

motivation section

Browse Source
This commit is contained in:
mattyl006 2022-07-06 17:30:47 +02:00
parent 525655901e
commit 0316939f75
9 changed files with 62 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -3,7 +3,7 @@ import theme from "./utils/theme";
import LandingPage from "./pages/LandingPage";
import Challenges from "./pages/Challenges";
import {BrowserRouter, Route, Routes} from "react-router-dom";
import NavBar from "./components/NavBar";
import NavBar from "./components/elements/NavBar";
const App = () => {
return (

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

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.49609 0.0880622C5.82188 -0.0293541 6.17812 -0.0293541 6.50391 0.0880622L11.0039 1.70763C11.5805 1.92256 12 2.49225 12 3.13232V8.86696C12 9.50703 11.5805 10.0762 11.0039 10.2912L6.50391 11.9114C6.17812 12.0295 5.82188 12.0295 5.49609 11.9114L0.995391 10.2912C0.398438 10.0762 0 9.50703 0 8.86696V3.13232C0 2.49225 0.398438 1.92256 0.995391 1.70763L5.49609 0.0880622ZM6 1.51159L1.92984 2.97643L6 4.4408L10.0711 2.97643L6 1.51159ZM6.75 10.218L10.5 8.86696V4.42663L6.75 5.77762V10.218Z" fill="#1B998B"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 615 B

2
src/components/ButtonLink.js → src/components/elements/ButtonLink.js
View File

@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
import {Label} from "../utils/fonts";
import {Label} from "../../utils/fonts";
const ButtonLinkStyle = styled(Label)`
background-color: ${({theme}) => theme.colors.green};

4
src/components/Logo.js → src/components/elements/Logo.js
View File

@ -1,6 +1,6 @@
import React from "react";
import {H1} from "../utils/fonts";
import theme from "../utils/theme";
import {H1} from "../../utils/fonts";
import theme from "../../utils/theme";
import {Link} from "react-router-dom";
const Logo = () => {

12
src/components/MobileNavMenu.js → src/components/elements/MobileNavMenu.js
View File

@ -1,9 +1,9 @@
import React from "react";
import {Container, FlexColumn, FlexRow, Svg} from "../utils/containers";
import {Menu} from "../utils/fonts";
import loginIco from '../assets/login_ico.svg';
import registerIco from '../assets/register_ico.svg';
import cupIco from '../assets/cup_ico.svg';
import {Container, FlexColumn, FlexRow, Svg} from "../../utils/containers";
import {Menu} from "../../utils/fonts";
import loginIco from '../../assets/login_ico.svg';
import registerIco from '../../assets/register_ico.svg';
import cupIco from '../../assets/cup_ico.svg';
import styled from "styled-components";
import {Link} from "react-router-dom";
@ -59,7 +59,7 @@ const MobileNavMenu = (props) => {
Register
</Menu>
</FlexRow>
<FlexRow as={Link} to='/' gap='16px'>
<FlexRow as={Link} to='/challenges' gap='16px'>
<Svg width='16px' height='16px' src={cupIco}/>
<Menu as='li'>
Challenges

4
src/components/NavBar.js → src/components/elements/NavBar.js
View File

@ -1,8 +1,8 @@
import React from "react";
import {Container, FlexRow} from "../utils/containers";
import {Container, FlexRow} from "../../utils/containers";
import Logo from "./Logo";
import styled from "styled-components";
import menuButtonIcon from '../assets/menu-button.svg';
import menuButtonIcon from '../../assets/menu-button.svg';
import MobileNavMenu from "./MobileNavMenu";
const NavBarStyle = styled(Container)`

40
src/components/sections/Motivation.js Normal file
View File

@ -0,0 +1,40 @@
import React from "react";
import {FlexColumn, FlexRow, Svg} from "../../utils/containers";
import {Body, H2} from "../../utils/fonts";
import cubeIcon from '../../assets/cube_ico.svg';
import theme from "../../utils/theme";
const Motivation = () => {
return (
<FlexColumn as='section' alignmentX='flex-start' gap='24px' width='80%' maxWidth='352px'>
<H2 as='h2'>
Motivation
</H2>
<FlexColumn as='ul' gap='16px' alignmentX='flex-start'>
<FlexRow as='li' gap='12px' alignmentY='flex-start'>
<Svg src={cubeIcon} width='14px' height='14px' margin='4px 0 0 0'
backgroundColor={theme.colors.green}/>
<Body as='p' maxWidth='224px'>
Explore interesting solutions to problems using AI
</Body>
</FlexRow>
<FlexRow as='li' gap='12px' alignmentY='flex-start'>
<Svg src={cubeIcon} width='14px' height='14px' margin='4px 0 0 0'
backgroundColor={theme.colors.green}/>
<Body as='p' maxWidth='224px'>
Train by solving our challenges
</Body>
</FlexRow>
<FlexRow as='li' gap='12px' alignmentY='flex-start'>
<Svg src={cubeIcon} width='14px' height='14px' margin='4px 0 0 0'
backgroundColor={theme.colors.green}/>
<Body as='p' maxWidth='224px'>
Participate in competitions with commercial challenges
</Body>
</FlexRow>
</FlexColumn>
</FlexColumn>
);
}
export default Motivation;

6
src/pages/LandingPage.js
View File

@ -3,11 +3,12 @@ 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/ButtonLink";
import ButtonLink from "../components/elements/ButtonLink";
import Motivation from "../components/sections/Motivation";
const LandingPage = () => {
return (
<FlexColumn alignmentY='flex-start' width='100%' minHeight='100vh' as='main'>
<FlexColumn alignmentY='flex-start' width='100%' minHeight='100vh' as='main' gap='48px'>
<FlexColumn alignmentX='flex-start' gap='24px'
width='80%' maxWidth='352px' margin='90px 0 0 0'>
<H1 as="h1">
@ -24,6 +25,7 @@ const LandingPage = () => {
Join us!
</ButtonLink>
</FlexColumn>
<Motivation/>
</FlexColumn>
);
}

4
src/utils/containers.js
View File

@ -4,10 +4,10 @@ const Container = styled.div`
padding: ${({padding}) => padding ? padding : '0'};
margin: ${({margin}) => margin ? margin : '0'};
width: ${({width}) => width ? width : 'auto'};
height: ${({height}) => height ? height : 'auto'};
text-align: ${({textAlign}) => textAlign ? textAlign : 'left'};
max-width: ${({maxWidth}) => maxWidth ? maxWidth : 'auto'};
min-width: ${({minWidth}) => minWidth ? minWidth : 'auto'};
height: ${({height}) => height ? height : 'auto'};
max-height: ${({maxHeight}) => maxHeight ? maxHeight : 'auto'};
min-height: ${({minHeight}) => minHeight ? minHeight : 'auto'};
background-color: ${({backgroundColor}) => backgroundColor ? backgroundColor : 'transparent'};
@ -46,6 +46,8 @@ const Svg = styled(Container)`
background-color: ${({backgroundColor, theme}) => backgroundColor ? backgroundColor : theme.colors.dark};
-webkit-mask: url(${({src}) => src}) no-repeat center;
mask: url(${({src}) => src}) no-repeat center;
width: ${({width}) => width ? width : '16px'};
height: ${({height}) => height ? height : '16px'};
`;
export {Container, FlexRow, FlexColumn, Grid, Svg};