From 0316939f751e1efdc7e37b2bf68ef5621263bfba Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Wed, 6 Jul 2022 17:30:47 +0200 Subject: [PATCH] motivation section --- src/App.js | 2 +- src/assets/cube_ico.svg | 3 ++ src/components/{ => elements}/ButtonLink.js | 2 +- src/components/{ => elements}/Logo.js | 4 +- .../{ => elements}/MobileNavMenu.js | 12 +++--- src/components/{ => elements}/NavBar.js | 4 +- src/components/sections/Motivation.js | 40 +++++++++++++++++++ src/pages/LandingPage.js | 6 ++- src/utils/containers.js | 4 +- 9 files changed, 62 insertions(+), 15 deletions(-) create mode 100644 src/assets/cube_ico.svg rename src/components/{ => elements}/ButtonLink.js (89%) rename src/components/{ => elements}/Logo.js (69%) rename src/components/{ => elements}/MobileNavMenu.js (81%) rename src/components/{ => elements}/NavBar.js (89%) create mode 100644 src/components/sections/Motivation.js diff --git a/src/App.js b/src/App.js index 7a7bd14..9fe7973 100644 --- a/src/App.js +++ b/src/App.js @@ -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 ( diff --git a/src/assets/cube_ico.svg b/src/assets/cube_ico.svg new file mode 100644 index 0000000..361b4f0 --- /dev/null +++ b/src/assets/cube_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/ButtonLink.js b/src/components/elements/ButtonLink.js similarity index 89% rename from src/components/ButtonLink.js rename to src/components/elements/ButtonLink.js index f9995fa..ca511c5 100644 --- a/src/components/ButtonLink.js +++ b/src/components/elements/ButtonLink.js @@ -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}; diff --git a/src/components/Logo.js b/src/components/elements/Logo.js similarity index 69% rename from src/components/Logo.js rename to src/components/elements/Logo.js index 7880b92..2d857cb 100644 --- a/src/components/Logo.js +++ b/src/components/elements/Logo.js @@ -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 = () => { diff --git a/src/components/MobileNavMenu.js b/src/components/elements/MobileNavMenu.js similarity index 81% rename from src/components/MobileNavMenu.js rename to src/components/elements/MobileNavMenu.js index fa7c022..3caa13e 100644 --- a/src/components/MobileNavMenu.js +++ b/src/components/elements/MobileNavMenu.js @@ -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 - + Challenges diff --git a/src/components/NavBar.js b/src/components/elements/NavBar.js similarity index 89% rename from src/components/NavBar.js rename to src/components/elements/NavBar.js index 00c5640..8ee3140 100644 --- a/src/components/NavBar.js +++ b/src/components/elements/NavBar.js @@ -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)` diff --git a/src/components/sections/Motivation.js b/src/components/sections/Motivation.js new file mode 100644 index 0000000..9fc52dc --- /dev/null +++ b/src/components/sections/Motivation.js @@ -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 ( + +

+ Motivation +

+ + + + + Explore interesting solutions to problems using AI + + + + + + Train by solving our challenges + + + + + + Participate in competitions with commercial challenges + + + + + ); +} + +export default Motivation; \ No newline at end of file diff --git a/src/pages/LandingPage.js b/src/pages/LandingPage.js index 9087c42..2bd7e32 100644 --- a/src/pages/LandingPage.js +++ b/src/pages/LandingPage.js @@ -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 ( - +

@@ -24,6 +25,7 @@ const LandingPage = () => { Join us! + ); } diff --git a/src/utils/containers.js b/src/utils/containers.js index 45cdc0c..4053e93 100644 --- a/src/utils/containers.js +++ b/src/utils/containers.js @@ -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}; \ No newline at end of file