- 
-
+
{title}
{location}
diff --git a/frontend/app/src/components/LogoSpinner/index.js b/frontend/app/src/components/LogoSpinner/index.js
index c36a5a22..3f74cadc 100644
--- a/frontend/app/src/components/LogoSpinner/index.js
+++ b/frontend/app/src/components/LogoSpinner/index.js
@@ -2,24 +2,27 @@ import React, { useState, useEffect } from 'react'
import './style.scss'
const LogoSpinner = () => {
+ const [loaded, setLoaded] = useState(false)
- const [loaded, setLoaded] = useState(false)
+ useEffect(() => {
+ const timeout = setTimeout(() => {
+ setLoaded(true)
+ }, 500)
- useEffect(() => {
- const timeout = setTimeout(() => {
- setLoaded(true)
- }, 500)
+ return () => {
+ clearTimeout(timeout)
+ }
+ })
- return () => {
- clearTimeout(timeout)
- }
- })
-
- return (
-
- })
-
- )
+ return (
+
-
+
+
+ )
}
-export default LogoSpinner
\ No newline at end of file
+export default LogoSpinner
diff --git a/frontend/app/src/components/TeamCard/index.js b/frontend/app/src/components/TeamCard/index.js
index de477253..dcf46c34 100644
--- a/frontend/app/src/components/TeamCard/index.js
+++ b/frontend/app/src/components/TeamCard/index.js
@@ -1,17 +1,15 @@
-import "./style.scss";
-import React from "react";
+import './style.scss'
+import React from 'react'
export default ({ name, title, mail, img }) => {
- return (
-
+
-
- );
-};
+ return (
+
- ![]({require("../../assets/images/junction-heads-petrus.png")})
-
-
- {name}
-{title}
-{mail}
-
+
+ )
+}
diff --git a/frontend/app/src/pages/Connected/Challenges/index.js b/frontend/app/src/pages/Connected/Challenges/index.js
index 09b0d1c4..c4e083db 100644
--- a/frontend/app/src/pages/Connected/Challenges/index.js
+++ b/frontend/app/src/pages/Connected/Challenges/index.js
@@ -248,7 +248,7 @@ class Challenges extends PureComponent {
Tracks
-
+ ![]()
+
+ {name}
+{title}
+{mail}
+
+ {hubs?.map((hub) => (
+
+ )
+}
+
+const mapStateToProps = (state) => ({
+ hubs: mapHubs(state),
+})
+
+export default connect(mapStateToProps)(HubSelector)
diff --git a/frontend/app/src/pages/Connected/EventInfo/index.js b/frontend/app/src/pages/Connected/EventInfo/index.js
index 0a864bf2..0b1b3aee 100644
--- a/frontend/app/src/pages/Connected/EventInfo/index.js
+++ b/frontend/app/src/pages/Connected/EventInfo/index.js
@@ -103,12 +103,12 @@ const EventInfo = (props) => {
alt="Junction Journey"
/>
+
+ ))}
+ changeHub(hub.id)}>
+ {hub.name}
+
+
+ {moment(moment(), 'h:mm a').utcOffset(hub.timezone)}
+
+
+
+ {hub.country}
+
+ {hub.address}
+
+ {hub.contact}
+
The Junction Journey
@@ -141,14 +141,13 @@ const EventInfo = (props) => { alt="FAQ" />
diff --git a/frontend/app/src/pages/Connected/Home/index.js b/frontend/app/src/pages/Connected/Home/index.js
index 4ab3d211..089f1402 100644
--- a/frontend/app/src/pages/Connected/Home/index.js
+++ b/frontend/app/src/pages/Connected/Home/index.js
@@ -1,19 +1,13 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
import './style.scss'
-import KEYS from '../../../redux/staticcontent/keys'
-import MEDIA_KEYS from '../../../redux/staticmedia/keys'
import { updateEvents } from '../../../redux/events/actions'
import SectionImage from '../../../components/SectionImage'
import NewsLetterForm from '../../../components/NewsLetterForm'
import BlockSection from '../../../components/BlockSection'
-
-import DividerLine from '../../../components/DividerLine'
+import { Grid } from '@material-ui/core'
import HeaderSection from '../../../components/HeaderSection'
-import Grid from '@material-ui/core/Grid'
-
-import HeaderVideo from '../../../components/HeaderVideo'
import { content as selectContent } from '../../../redux/staticcontent/selectors'
import { connect } from 'react-redux'
@@ -27,8 +21,34 @@ import Button from '../../../components/Button'
//HELMET
import { Helmet } from 'react-helmet'
+import HubSelector from '../Components/HubSelector'
+
const textsJSON = require('./texts.json')
+const hubs = [
+ {
+ name: 'Chengdu',
+ country: 'China',
+ address: 'Chengduroad 1',
+ contact: 'Eero Kere',
+ timezone: '+0800',
+ },
+ {
+ name: 'Budapest',
+ country: 'Hungary',
+ address: 'Budapestalley 1',
+ contact: 'Mari Rautanen',
+ timezone: '+0200',
+ },
+ {
+ name: 'Moscow',
+ country: 'Russia',
+ address: 'Moscowstreet 1',
+ contact: 'Virva Brax',
+ timezone: '+0300',
+ },
+]
+
const ConnectedHome = (props) => {
useEffect(() => {
props.updateEvents()
@@ -39,8 +59,8 @@ const ConnectedHome = (props) => {
// metaDescKey={KEYS.whoAreWeBody}
className="Connected ConnectedContent ConnectedHome"
pageTitle="Junction 2020 Connected"
- // metaDescKey={KEYS.whoAreWeBody}
- // ogImageKey={MEDIA_KEYS.homePageHeaderImage}
+ // metaDescKey={KEYS.whoAreWeBody}
+ // ogImageKey={MEDIA_KEYS.homePageHeaderImage}
>
@@ -76,330 +96,365 @@ const ConnectedHome = (props) => {
content={require('../../../assets/images/photo-hub-visualisation.svg')}
/>
-
- })
+ })
+ })
+ })
-
+ })
-
- })
-
-
-
+ Apply now!
-
+
+ })
+ })
+
+
+
+ + ALL OVER THE WORLD +
++ NOVEMBER 6-8 +
+
+
+ + HACK THE FUTURE +
+
+
+
+
+ })
+ })
- }
- >
+ })
+
+
+ {props.HeaderBody}
-
-
-
+
-
-
+
- }
- >
+
+ {props.Section1Title}
+{props.Section1Body}
+ +
-
-
-
-
- {' '}
-
- {props.Section2Title}
+{props.Section2Body}
+ + + +
+ })
+
+
+
+
+
+
- }
- >
+ {props.YouTubeWrapperTitle}
+{props.YouTubeWrapperBody}
+
+ })
-
-
Challenges
++ The hackathon is divided into challenges based on different industries + and themes. You can choose to work on multiple challenges during the + hackathon: and you can even combine them and submit your project to + multiple ones! +
+
-
-
-
-
-
-
- */}
+
-
+
-
+ {props.YouTubeWrapperTitle}
-{props.YouTubeWrapperBody}
-{props.YouTubeWrapperSubBody}
- +
+ })
- {props.Section3Title}
+{props.Section3Body}
+
+
+
Main Partners
-
-
-
- })
-
-
+
-
-
+
+
+
+
+
+
+
-
+
+
-
- })
-
-
+
-
-
+
+
+
+
-
+
+
-
- })
-
-
+
-
-
+
+
+
+
-
+
+
-
- })
-
-
+
-
-
+
+
+
+
-
+
+
-
- 
-
-
+
+
+
+
+
-
-
- })
-
-
-
-
-
-
- })
-
-
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
-
- })
-
-
+
-
-
+
+
+
+
-
+
+
-
- })
-
-
+
-
-
+
+
+
+
-
+
+ })
- Online Partners
-
-
-
- })
-
-
-
-
-
-
- })
-
-
+
-
-
+
+
})
- })
- })
- })
- Supporting Partners
diff --git a/frontend/app/src/pages/Connected/Home/style.scss b/frontend/app/src/pages/Connected/Home/style.scss
index c8345605..760c2117 100644
--- a/frontend/app/src/pages/Connected/Home/style.scss
+++ b/frontend/app/src/pages/Connected/Home/style.scss
@@ -1,8 +1,18 @@
@import '../../../styles/main';
.ConnectedHome {
+ overflow-x: hidden;
+
+ .HubInfo {
+ p.centered,
+ h1.centered {
+ margin: 5% 10%;
+ text-align: center;
+ }
+ }
.HeaderSection {
height: 90vh;
+
@include bp-med {
height: auto;
}
@@ -26,44 +36,25 @@
font-weight: 600;
line-height: 1.5em;
}
- }
-
- .RemoveBorder {
- border-top: unset;
- min-height: unset;
- height: 50vh;
- padding: 0;
-
- @include bp-small-only {
- display: none;
+ .Button-row {
+ display: flex;
+ flex-direction: column;
}
+ }
+ .chainRow {
+ display: none;
@include bp-med {
- height: 90vh;
- justify-content: center;
- }
-
- &--transform {
- -webkit-transform: rotate(-90deg);
- -moz-transform: rotate(-90deg);
- -o-transform: rotate(-90deg);
- -ms-transform: rotate(-90deg);
- transform: rotate(-90deg);
+ display: flex;
+ flex-direction: row;
+ margin: 5% 0 5% 0;
+ justify-content: space-evenly;
}
+ }
- img {
- @extend .RemoveBorder--transform;
-
- -webkit-transform: rotate(-90deg);
- -moz-transform: rotate(-90deg);
- -o-transform: rotate(-90deg);
- -ms-transform: rotate(-90deg);
- transform: rotate(-90deg);
-
- @include bp-small-only {
- display: none;
- }
- }
+ .RemoveBorder {
+ border-top: unset;
+ border-bottom: unset;
h2 {
color: $connected-blue;
@@ -78,8 +69,7 @@
padding: 20px;
}
&--inside {
- height: 100vh;
- width: 90%;
+ width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
@@ -87,11 +77,22 @@
text-align: center;
iframe {
+ width: 100%;
+ height: 30vh;
border-radius: 34px;
}
@include bp-med {
- height: 100vh;
+ iframe {
+ height: 50vh;
+ }
+ width: 90%;
+ height: 50vh;
+ padding-bottom: 20px;
+ }
+
+ @include bp-full {
+ height: 80vh;
padding-bottom: 20px;
}
@@ -132,9 +133,109 @@
display: none;
}
}
+
+ .challengesSection {
+ margin: 2% 10%;
+ text-align: center;
+ justify-content: space-between;
+ display: flex;
+ flex-direction: column;
+
+ p {
+ text-align: center;
+ }
+
+ .challengesImage {
+ width: 80%;
+ margin: auto;
+ margin-top: 5%;
+ border-radius: 2em;
+ object-fit: cover;
+
+ height: 20em;
+
+ @include bp-full {
+ height: 25em;
+ }
+ }
+ }
+
+ .NewsLetter {
+ padding: 10% 10% 0 10%;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ &--content {
+ margin-top: 2%;
+ width: 60%;
+ @include bp-small-only {
+ width: 100%;
+ margin-bottom: 15vh;
+ }
+ }
+ img.Chain-2part {
+ position: absolute;
+ z-index: 10;
+ right: 10%;
+ bottom: -30%;
+ @include bp-small-only {
+ height: 25vh;
+ bottom: -15%;
+ right: 5%;
+ }
+ }
+
+ .FormRow {
+ display: flex;
+ justify-content: left;
+ margin-top: 0.5em;
+ @include bp-small-only {
+ justify-content: center;
+ width: 100%;
+ }
+ }
+
+ h1 {
+ text-align: left;
+ }
+
+ input.TextInput--inputbox,
+ select.DropDown--input {
+ margin-right: 2em;
+ border-color: $connected-blue;
+ color: $connected-teal;
+ color: $connected-teal;
+ padding: 0.6em;
+ padding-left: 0.9em;
+ max-width: 10em;
+
+ &::placeholder {
+ color: $connected-teal;
+ }
+
+ @include bp-small-only {
+ width: 100%;
+ max-width: unset;
+ }
+ }
+
+ button.SubmitButton--button {
+ background-color: $connected-orange;
+
+ span.SubmitButton--button__text {
+ color: $connected-blue;
+ }
+ }
+ }
+
.PartnerSection {
height: auto;
background: $connected-blue;
+
+ .HeaderSection--content {
+ display: flex;
+ flex-direction: column;
+ }
}
.logoBGR {
justify-content: center;
@@ -215,6 +316,91 @@
width: 8em;
}
}
+
+ .HubSection {
+ display: flex;
+ flex-direction: column;
+ margin: 10%;
+ justify-content: center;
+ text-align: center;
+
+ @include bp-med {
+ text-align: left;
+ justify-content: space-between;
+ flex-direction: row;
+ }
+
+ .HubListElem {
+ margin: 0;
+ &.visible {
+ .HubName {
+ cursor: default;
+ color: $connected-teal;
+ }
+ .HubDetails {
+ p {
+ text-align: left;
+ }
+ text-align: left;
+ display: block;
+ }
+
+ .LocalTime {
+ display: inline-block;
+ color: $connected-teal;
+ @include bp-small-only {
+ display: none;
+ }
+ }
+ }
+
+ .LocalTime {
+ display: none;
+ }
+
+ .HubName {
+ cursor: pointer;
+ color: $connected-orange;
+ text-decoration: underline;
+ margin-right: 0.3em;
+ font-size: 1.7em;
+ margin-bottom: 0.2em;
+ display: inline-block;
+ }
+
+ .HubDetails {
+ display: none;
+ p {
+ color: $connected-teal;
+ @include bp-small-only {
+ text-align: center;
+ }
+ text-align: left;
+ }
+
+ &--country {
+ margin: 0;
+ font-size: 1.3em;
+ }
+ }
+ }
+ }
+
+ .hubsIllustration {
+ display: none;
+ @include bp-med {
+ margin: 5% auto;
+ display: block;
+ }
+ }
+
+ .hubsIllustrationMobile {
+ display: block;
+ margin: auto;
+ @include bp-med {
+ display: none;
+ }
+ }
}
.Button-apply {
diff --git a/frontend/app/src/pages/Connected/HubInfo/index.js b/frontend/app/src/pages/Connected/HubInfo/index.js
index c5977553..235d30b1 100644
--- a/frontend/app/src/pages/Connected/HubInfo/index.js
+++ b/frontend/app/src/pages/Connected/HubInfo/index.js
@@ -71,7 +71,6 @@ const HubInfo = (props) => {
subtitle={props.Section1Subtitle}
center
halfpage
- className="ScrollSnapElem"
>
+
+ {
halfpage
title={props.Section4Title}
subtitle={props.Section4Subtitle}
- className="ScrollSnapElem"
+
>
{props.Section3Cities.split(', ').map((city) => {
- return
{city}
+ return{city}
})}
+
-
- );
-};
+ return (
+
-
- {/* Static pages */}
-
-
-
-
+
+ )
+}
-export default withRouter(Junction);
+export default withRouter(Junction)
+
+ {/* Static pages */}
+
+
+
+