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

refactor sections and init challenge page

Browse Source
This commit is contained in:
mattyl006 2022-07-12 16:12:18 +02:00
parent d9f5d87081
commit 7c45a64b4f
10 changed files with 77 additions and 502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.js
View File

@ -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 = () => {
<ThemeProvider theme={theme}>
<NavBar/>
<Routes>
<Route path='/challenges' element={<Challenges/>}/>
<Route path={`${CHALLENGE_PAGE}/:challengeId`} element={<Challenge/>}/>
<Route path={CHALLENGES_PAGE} element={<Challenges/>}/>
<Route exact path='/' element={<LandingPage/>}/>
<Route element={<LandingPage/>}/>
</Routes>

13
src/components/elements/MiniChallenge.js
View File

@ -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}
</IconLabel> : ''}
</IconsGrid>
<Container as={Link} to={`${CHALLENGE_PAGE}/${props.name}`}/>
</ChallengeStyle>
);
}

3
src/components/elements/MobileNavMenu.js
View File

@ -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
</Menu>
</FlexRow>
<FlexRow as={Link} to='/challenges' gap='16px'>
<FlexRow as={Link} to={CHALLENGES_PAGE} gap='16px'>
<Svg width='16px' height='16px' src={cupIco}/>
<Menu as='li'>
Challenges

43
src/components/sections/Commercial.js
View File

@ -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 (
<FlexColumn as='section' alignmentX='flex-start'>
<H2 as='h2' margin='0 0 24px 0'>
@ -16,30 +23,18 @@ const Commercial = () => {
translates into an award for solving it according to the client's requirements.
</Body>
<FlexColumn as='ul' gap='16px' alignmentX='flex-start'>
<FlexRow width='100%' gap='8px'>
<CircleNumber number={1}/>
<Medium width='80%' as='li'>
A company comes to CSI with a business need
</Medium>
</FlexRow>
<FlexRow width='100%' gap='8px'>
<CircleNumber number={2}/>
<Medium width='80%' as='li'>
CSI determines the need with an appropriate challenge on Gonito
</Medium>
</FlexRow>
<FlexRow width='100%' gap='8px'>
<CircleNumber number={3}/>
<Medium width='80%' as='li'>
The challenge is solved by willing users
</Medium>
</FlexRow>
<FlexRow width='100%' gap='8px'>
<CircleNumber number={4}/>
<Medium width='80%' as='li'>
The company appropriately rewards users who have contributed to the required outcome
</Medium>
</FlexRow>
{
listItemsContent.map((item, index) => {
return (
<FlexRow key={`commercial-item-${index}`} width='100%' gap='8px'>
<CircleNumber number={index + 1}/>
<Medium width='80%' as='li'>
{item}
</Medium>
</FlexRow>
);
})
}
</FlexColumn>
<Body as='p'>
Open challenges can allow you to find the right people to work with. Find a challenge for your team

4
src/components/sections/Csi.js
View File

@ -9,8 +9,8 @@ const Csi = () => {
Center for artificial intelligence
</H2>
<Body as='p' margin='0 0 16px 0'>
<Medium display='inline'>Gonito.net</Medium> belongs to the
<Medium display='inline'>&nbsp;Artificial Intelligence Centre (CSI)&nbsp;</Medium>
<Medium as='span' display='inline'>Gonito.net</Medium> belongs to the
<Medium as='span' display='inline'>&nbsp;Artificial Intelligence Centre (CSI)&nbsp;</Medium>
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

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

@ -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 (
<FlexColumn as='section' alignmentX='flex-start' gap='24px' width='100%'>
<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>
{
content.map((paragraph, index) => {
return (
<FlexRow key={`motivation-${index}`} 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'>
{paragraph}
</Body>
</FlexRow>
);
})
}
</FlexColumn>
</FlexColumn>
);

3
src/pages/Challanges/_renderChallenges.js
View File

@ -9,7 +9,8 @@ const _renderChallenges = (pageNr, challenges) => {
<MiniChallenge key={`challenge-${index}`} title={challenge.title} type={challenge.type}
description={challenge.description} metric={challenge.mainMetric}
bestScore={challenge.bestScore} baseline={challenge.baseline}
prize={challenge.prize} deadline={challenge.deadline}/>
prize={challenge.prize} deadline={challenge.deadline}
name={challenge.name}/>
);
})
)

11
src/pages/Challenge.js Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
const Challenge = () => {
return (
<p>
siema
</p>
);
}
export default Challenge;

451
src/prototypeData/challenges.js vendored
View File

@ -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;

4
src/utils/globals.js
View File

@ -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};
export {ELEMENTS_PER_PAGE, API, CHALLENGES_PAGE, CHALLENGE_PAGE};