From 7c45a64b4facb1b361f89150b46edef9dd4aca76 Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Tue, 12 Jul 2022 16:12:18 +0200 Subject: [PATCH] refactor sections and init challenge page --- src/App.js | 5 +- src/components/elements/MiniChallenge.js | 13 + src/components/elements/MobileNavMenu.js | 3 +- src/components/sections/Commercial.js | 43 +-- src/components/sections/Csi.js | 4 +- src/components/sections/Motivation.js | 42 +- src/pages/Challanges/_renderChallenges.js | 3 +- src/pages/Challenge.js | 11 + src/prototypeData/challenges.js | 451 ---------------------- src/utils/globals.js | 4 +- 10 files changed, 77 insertions(+), 502 deletions(-) create mode 100644 src/pages/Challenge.js delete mode 100644 src/prototypeData/challenges.js diff --git a/src/App.js b/src/App.js index 0069aae..a13fda9 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,8 @@ import Challenges from "./pages/Challanges/Challenges"; import {BrowserRouter, Route, Routes} from "react-router-dom"; import NavBar from "./components/elements/NavBar"; import Footer from "./components/sections/Footer"; +import {CHALLENGE_PAGE, CHALLENGES_PAGE} from "./utils/globals"; +import Challenge from "./pages/Challenge"; const App = () => { return ( @@ -12,7 +14,8 @@ const App = () => { - }/> + }/> + }/> }/> }/> diff --git a/src/components/elements/MiniChallenge.js b/src/components/elements/MiniChallenge.js index 9ce2c53..6a72191 100644 --- a/src/components/elements/MiniChallenge.js +++ b/src/components/elements/MiniChallenge.js @@ -3,12 +3,16 @@ import {Container, FlexColumn, FlexRow, Grid} from "../../utils/containers"; import {Body, H3} from "../../utils/fonts"; import styled from "styled-components"; import IconLabel from "./IconLabel"; +import {Link} from "react-router-dom"; +import {CHALLENGE_PAGE} from "../../utils/globals"; const ChallengeStyle = styled(FlexColumn)` padding: 12px; border: 1px solid ${({theme}) => theme.colors.dark05}; cursor: pointer; transition: transform 0.3s ease-in-out; + position: relative; + max-width: 420px; p { width: 80%; @@ -21,6 +25,14 @@ const ChallengeStyle = styled(FlexColumn)` &:hover { transform: scale(1.05); } + + a { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } `; const Line = styled(Container)` @@ -78,6 +90,7 @@ const MiniChallenge = (props) => { {props.prize} : ''} + ); } diff --git a/src/components/elements/MobileNavMenu.js b/src/components/elements/MobileNavMenu.js index 49d20b3..0967f96 100644 --- a/src/components/elements/MobileNavMenu.js +++ b/src/components/elements/MobileNavMenu.js @@ -6,6 +6,7 @@ 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"; +import {CHALLENGES_PAGE} from "../../utils/globals"; const MobileNavMenuStyle = styled(FlexColumn)` gap: 32px; @@ -61,7 +62,7 @@ const MobileNavMenu = (props) => { Register - + Challenges diff --git a/src/components/sections/Commercial.js b/src/components/sections/Commercial.js index 282fd77..c9b93e5 100644 --- a/src/components/sections/Commercial.js +++ b/src/components/sections/Commercial.js @@ -4,6 +4,13 @@ import {Body, H2, Medium} from "../../utils/fonts"; import CircleNumber from "../elements/CircleNumber"; const Commercial = () => { + const listItemsContent = [ + 'A company comes to CSI with a business need', + 'CSI determines the need with an appropriate challenge on Gonito', + 'The challenge is solved by willing users', + 'The company appropriately rewards users who have contributed to the required outcome', + ]; + return (

@@ -16,30 +23,18 @@ const Commercial = () => { translates into an award for solving it according to the client's requirements. - - - - A company comes to CSI with a business need - - - - - - CSI determines the need with an appropriate challenge on Gonito - - - - - - The challenge is solved by willing users - - - - - - The company appropriately rewards users who have contributed to the required outcome - - + { + 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 diff --git a/src/components/sections/Csi.js b/src/components/sections/Csi.js index 2bd1940..722fbcc 100644 --- a/src/components/sections/Csi.js +++ b/src/components/sections/Csi.js @@ -9,8 +9,8 @@ const Csi = () => { Center for artificial intelligence

- Gonito.net belongs to the -  Artificial Intelligence Centre (CSI)  + 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 diff --git a/src/components/sections/Motivation.js b/src/components/sections/Motivation.js index 802d346..92252b9 100644 --- a/src/components/sections/Motivation.js +++ b/src/components/sections/Motivation.js @@ -5,33 +5,33 @@ import cubeIcon from '../../assets/cube_ico.svg'; import theme from "../../utils/theme"; const Motivation = () => { + + const content = [ + 'Explore interesting solutions to problems using AI', + 'Train by solving our challenges', + 'Participate in competitions with commercial challenges' + ]; + return (

Motivation

+ - - - - Explore interesting solutions to problems using AI - - - - - - Train by solving our challenges - - - - - - Participate in competitions with commercial challenges - - + { + content.map((paragraph, index) => { + return ( + + + + {paragraph} + + + ); + }) + } ); diff --git a/src/pages/Challanges/_renderChallenges.js b/src/pages/Challanges/_renderChallenges.js index 206d5be..db1f18d 100644 --- a/src/pages/Challanges/_renderChallenges.js +++ b/src/pages/Challanges/_renderChallenges.js @@ -9,7 +9,8 @@ const _renderChallenges = (pageNr, challenges) => { + prize={challenge.prize} deadline={challenge.deadline} + name={challenge.name}/> ); }) ) diff --git a/src/pages/Challenge.js b/src/pages/Challenge.js new file mode 100644 index 0000000..0f3ebdf --- /dev/null +++ b/src/pages/Challenge.js @@ -0,0 +1,11 @@ +import React from "react"; + +const Challenge = () => { + return ( +

+ siema +

+ ); +} + +export default Challenge; \ No newline at end of file diff --git a/src/prototypeData/challenges.js b/src/prototypeData/challenges.js deleted file mode 100644 index 5207043..0000000 --- a/src/prototypeData/challenges.js +++ /dev/null @@ -1,451 +0,0 @@ -const challenges = [ - { - title: 'Challenging America geo prediction', - describe: 'Guess publication location for a piece of text', - type: 'text', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Challenging America geo prediction', - describe: 'Guess publication location for a piece of text', - type: 'image', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Challenging America geo prediction', - describe: 'Guess publication location for a piece of text', - type: 'tabular', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 1', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'text', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 2', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'tabular', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 3', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'image', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 4', - describe: 'Guess publication location for a piece of text', - type: 'text', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 5', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'tabular', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 6', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'image', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 7', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'text', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 8', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'tabular', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 9', - describe: 'Guess publication location for a piece of text', - type: 'text', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 10', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'image', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 11', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'tabular', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Challenging America geo prediction', - describe: 'Guess publication location for a piece of text', - type: 'text', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Challenging America geo prediction', - describe: 'Guess publication location for a piece of text', - type: 'image', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Challenging America geo prediction', - describe: 'Guess publication location for a piece of text', - type: 'tabular', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 1', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'text', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 2', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'tabular', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 3', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'image', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 4', - describe: 'Guess publication location for a piece of text', - type: 'text', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 5', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'tabular', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 6', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'image', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 7', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'text', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 8', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'tabular', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 9', - describe: 'Guess publication location for a piece of text', - type: 'text', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 10', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'image', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 11', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'tabular', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Challenging America geo prediction', - describe: 'Guess publication location for a piece of text', - type: 'text', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Challenging America geo prediction', - describe: 'Guess publication location for a piece of text', - type: 'image', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Challenging America geo prediction', - describe: 'Guess publication location for a piece of text', - type: 'tabular', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 1', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'text', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 2', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'tabular', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 3', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'image', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 4', - describe: 'Guess publication location for a piece of text', - type: 'text', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 5', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'tabular', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 6', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'image', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 7', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'text', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '2 hours', - }, - { - title: 'Example 8', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'tabular', - metric: 'Haversine', - bestScore: '79%', - baseline: '55%', - prize: '5000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 9', - describe: 'Guess publication location for a piece of text', - type: 'text', - metric: 'Haversine', - bestScore: '79%', - baseline: '60%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 10', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'image', - metric: 'Haversine', - bestScore: '90%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - }, - { - title: 'Example 11', - describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, - ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, - type: 'tabular', - metric: 'RMSE', - bestScore: '79%', - baseline: '55%', - prize: '150000 PLN', - timeLeft: '6 days', - } -] - -export default challenges; \ No newline at end of file diff --git a/src/utils/globals.js b/src/utils/globals.js index 14d573d..b9668f1 100644 --- a/src/utils/globals.js +++ b/src/utils/globals.js @@ -1,4 +1,6 @@ const ELEMENTS_PER_PAGE = 12; const API = 'https://gonito.net/api'; +const CHALLENGES_PAGE = '/challenges'; +const CHALLENGE_PAGE = '/challenge'; -export {ELEMENTS_PER_PAGE, API}; \ No newline at end of file +export {ELEMENTS_PER_PAGE, API, CHALLENGES_PAGE, CHALLENGE_PAGE}; \ No newline at end of file