PopUpMessage reminder for register
This commit is contained in:
parent
d77506e520
commit
fed6c15921
29
src/App.js
29
src/App.js
@ -25,6 +25,8 @@ const App = () => {
|
|||||||
const [loggedBarHover, setLoggedBarHover] = React.useState(false);
|
const [loggedBarHover, setLoggedBarHover] = React.useState(false);
|
||||||
const [popUpHeader, setPopUpHeader] = React.useState('');
|
const [popUpHeader, setPopUpHeader] = React.useState('');
|
||||||
const [popUpMessage, setPopUpMessage] = React.useState('');
|
const [popUpMessage, setPopUpMessage] = React.useState('');
|
||||||
|
const [confirmPopUpHandler, setConfirmPopUpHandler] = React.useState(null);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (sessionStorage.getItem('logged') !== 'yes') {
|
if (sessionStorage.getItem('logged') !== 'yes') {
|
||||||
if (KeyCloakService.isLoggedIn()) {
|
if (KeyCloakService.isLoggedIn()) {
|
||||||
@ -42,9 +44,14 @@ const App = () => {
|
|||||||
}, 1500);
|
}, 1500);
|
||||||
});
|
});
|
||||||
|
|
||||||
const popUpMessageHandler = (header, message) => {
|
const popUpMessageHandler = (header, message, confirmHandler) => {
|
||||||
setPopUpHeader(header);
|
setPopUpHeader(header);
|
||||||
setPopUpMessage(message);
|
setPopUpMessage(message);
|
||||||
|
if (confirmHandler !== null) {
|
||||||
|
setConfirmPopUpHandler(() => confirmHandler());
|
||||||
|
} else {
|
||||||
|
setConfirmPopUpHandler(null);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const popUpMessageRender = () => {
|
const popUpMessageRender = () => {
|
||||||
@ -53,6 +60,7 @@ const App = () => {
|
|||||||
<PopupMessage
|
<PopupMessage
|
||||||
header={popUpHeader}
|
header={popUpHeader}
|
||||||
message={popUpMessage}
|
message={popUpMessage}
|
||||||
|
confirmHandler={confirmPopUpHandler}
|
||||||
popUpMessageHandler={popUpMessageHandler}
|
popUpMessageHandler={popUpMessageHandler}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@ -78,7 +86,10 @@ const App = () => {
|
|||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<ThemeProvider theme={theme}>
|
<ThemeProvider theme={theme}>
|
||||||
{popUpMessageRender()}
|
{popUpMessageRender()}
|
||||||
<NavBar loggedBarVisibleHandler={loggedBarVisibleHandler} />
|
<NavBar
|
||||||
|
loggedBarVisibleHandler={loggedBarVisibleHandler}
|
||||||
|
popUpMessageHandler={popUpMessageHandler}
|
||||||
|
/>
|
||||||
{!IS_MOBILE() ? (
|
{!IS_MOBILE() ? (
|
||||||
<LoggedBar
|
<LoggedBar
|
||||||
visible={loggedBarVisible}
|
visible={loggedBarVisible}
|
||||||
@ -104,8 +115,18 @@ const App = () => {
|
|||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<Route exact path="/" element={<LandingPage />} />
|
<Route
|
||||||
<Route element={<LandingPage />} />
|
exact
|
||||||
|
path="/"
|
||||||
|
element={
|
||||||
|
<LandingPage popUpMessageHandler={popUpMessageHandler} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
element={
|
||||||
|
<LandingPage popUpMessageHandler={popUpMessageHandler} />
|
||||||
|
}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Routes>
|
</Routes>
|
||||||
|
@ -1,79 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import {FlexRow} from '../../utils/containers';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import {H3} from '../../utils/fonts';
|
|
||||||
import {Link} from 'react-router-dom';
|
|
||||||
import PropsTypes from 'prop-types';
|
|
||||||
|
|
||||||
const AuthHeaderStyle = styled(FlexRow)`
|
|
||||||
border-width: 1px 1px 0 1px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: ${({theme}) => theme.colors.dark03};
|
|
||||||
width: 260px;
|
|
||||||
height: 48px;
|
|
||||||
justify-content: flex-start;
|
|
||||||
gap: 24px;
|
|
||||||
padding: 0 20px;
|
|
||||||
box-shadow: ${({theme}) => theme.authHeaderShadow};
|
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
|
||||||
justify-content: space-around;
|
|
||||||
width: 400px;
|
|
||||||
height: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: ${({theme}) => theme.colors.green};
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-family: 'Kanit', sans-serif;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 22px;
|
|
||||||
color: ${({theme}) => theme.colors.dark};
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s ease-in-out;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: ${({theme}) => theme.colors.green};
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 26px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const AuthHeader = (props) => {
|
|
||||||
if (props.register) {
|
|
||||||
return (
|
|
||||||
<AuthHeaderStyle>
|
|
||||||
<H3 as='h1' order='2'>
|
|
||||||
Register
|
|
||||||
</H3>
|
|
||||||
<Link to='/login'>
|
|
||||||
Sign in
|
|
||||||
</Link>
|
|
||||||
</AuthHeaderStyle>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<AuthHeaderStyle>
|
|
||||||
<H3 as='h1'>
|
|
||||||
Sign in
|
|
||||||
</H3>
|
|
||||||
<Link to='/register'>
|
|
||||||
Register
|
|
||||||
</Link>
|
|
||||||
</AuthHeaderStyle>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
AuthHeader.propTypes = {
|
|
||||||
register: PropsTypes.bool.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AuthHeader;
|
|
@ -1,47 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import {FlexColumn, FlexRow} from '../../utils/containers';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import {Medium} from '../../utils/fonts';
|
|
||||||
|
|
||||||
const AuthInputStyle = styled(Medium)`
|
|
||||||
width: 188px;
|
|
||||||
height: 36px;
|
|
||||||
padding: 4px;
|
|
||||||
border: 1px solid ${({theme}) => theme.colors.dark05};
|
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
|
||||||
width: 310px;
|
|
||||||
height: 52px;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const AuthLabel = styled(FlexRow)`
|
|
||||||
position: absolute;
|
|
||||||
top: -10px;
|
|
||||||
left: 14px;
|
|
||||||
background-color: ${({theme}) => theme.colors.white};
|
|
||||||
font-size: 10px;
|
|
||||||
font-family: 'Roboto', sans-serif;
|
|
||||||
font-weight: 400;
|
|
||||||
padding: 4px;
|
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
|
||||||
font-size: 16px;
|
|
||||||
top: -14px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const AuthInput = (props) => {
|
|
||||||
return (
|
|
||||||
<FlexColumn position='relative'>
|
|
||||||
<AuthLabel as='label' htmlFor={props.label}>
|
|
||||||
{props.label}
|
|
||||||
</AuthLabel>
|
|
||||||
<AuthInputStyle as='input' id={props.label} name={props.label}/>
|
|
||||||
</FlexColumn>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AuthInput;
|
|
@ -1,58 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import {FlexRow, Svg} from '../../utils/containers';
|
|
||||||
import theme from '../../utils/theme';
|
|
||||||
import PropsTypes from 'prop-types';
|
|
||||||
import {Body} from '../../utils/fonts';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import {Link} from 'react-router-dom';
|
|
||||||
|
|
||||||
const AuthOptionStyle = styled(FlexRow)`
|
|
||||||
gap: 16px;
|
|
||||||
padding: 10px 12px;
|
|
||||||
min-width: 180px;
|
|
||||||
justify-content: flex-start;
|
|
||||||
border: 1px solid ${({theme}) => theme.colors.dark03};
|
|
||||||
box-shadow: ${({theme}) => theme.shadow};
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.3s ease-in-out;
|
|
||||||
|
|
||||||
* {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
|
||||||
width: 260px;
|
|
||||||
height: 50px;
|
|
||||||
padding: 10px 24px;
|
|
||||||
gap: 40px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const AuthOption = (props) => {
|
|
||||||
return (
|
|
||||||
<AuthOptionStyle as={Link} to={props.to}>
|
|
||||||
<Svg width='20px' height='20px' src={props.icon} backgroundColor={theme.colors.dark}/>
|
|
||||||
<Body>
|
|
||||||
{props.children}
|
|
||||||
</Body>
|
|
||||||
</AuthOptionStyle>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
AuthOption.propTypes = {
|
|
||||||
children: PropsTypes.node,
|
|
||||||
icon: PropsTypes.string,
|
|
||||||
to: PropsTypes.string,
|
|
||||||
};
|
|
||||||
|
|
||||||
AuthOption.defaultProps = {
|
|
||||||
children: '',
|
|
||||||
icon: '',
|
|
||||||
to: '#'
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AuthOption;
|
|
@ -1,6 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {Body, H1, Medium} from '../../utils/fonts';
|
import { Body, H1, Medium } from '../../utils/fonts';
|
||||||
import {Container, FlexColumn, FlexRow, Svg} from '../../utils/containers';
|
import { Container, FlexColumn, FlexRow, Svg } from '../../utils/containers';
|
||||||
import theme from '../../utils/theme';
|
import theme from '../../utils/theme';
|
||||||
import ButtonLink from '../generic/ButtonLink';
|
import ButtonLink from '../generic/ButtonLink';
|
||||||
import Media from 'react-media';
|
import Media from 'react-media';
|
||||||
@ -13,9 +13,10 @@ const TitleParagraph = styled(Medium)`
|
|||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const mobileRender = () => {
|
const Hero = (props) => {
|
||||||
|
const mobileRender = () => {
|
||||||
return (
|
return (
|
||||||
<FlexColumn alignmentX='flex-start' gap='24px' maxWidth='452px'>
|
<FlexColumn alignmentX="flex-start" gap="24px" maxWidth="452px">
|
||||||
<H1 as="h1">
|
<H1 as="h1">
|
||||||
Welcome to
|
Welcome to
|
||||||
<Container display="inline" color={theme.colors.green}>
|
<Container display="inline" color={theme.colors.green}>
|
||||||
@ -23,50 +24,68 @@ const mobileRender = () => {
|
|||||||
</Container>
|
</Container>
|
||||||
</H1>
|
</H1>
|
||||||
<Body as="p">
|
<Body as="p">
|
||||||
A data challenge platform for machine learning research,
|
A data challenge platform for machine learning research, competition,
|
||||||
competition, cooperation and reproducibility.
|
cooperation and reproducibility.
|
||||||
</Body>
|
</Body>
|
||||||
<ButtonLink as='button' onClick={KeyCloakService.doRegister}>
|
<ButtonLink
|
||||||
|
as="button"
|
||||||
|
onClick={() =>
|
||||||
|
props.popUpMessageHandler(
|
||||||
|
'Reminder',
|
||||||
|
'Remember to check your spam mailbox to confirm your account.',
|
||||||
|
() => KeyCloakService.doRegister
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
Join us!
|
Join us!
|
||||||
</ButtonLink>
|
</ButtonLink>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const desktopRender = () => {
|
const desktopRender = () => {
|
||||||
return (
|
return (
|
||||||
<FlexColumn alignmentX='flex-start' gap='24px'>
|
<FlexColumn alignmentX="flex-start" gap="24px">
|
||||||
<H1 as="h1">
|
<H1 as="h1">
|
||||||
Welcome to
|
Welcome to
|
||||||
<Container display="inline" color={theme.colors.green}>
|
<Container display="inline" color={theme.colors.green}>
|
||||||
Gonito!
|
Gonito!
|
||||||
</Container>
|
</Container>
|
||||||
</H1>
|
</H1>
|
||||||
<FlexRow gap='20px'>
|
<FlexRow gap="20px">
|
||||||
<Container>
|
<Container>
|
||||||
<TitleParagraph as="p" maxWidth='286px' margin='0 0 20px 0'>
|
<TitleParagraph as="p" maxWidth="286px" margin="0 0 20px 0">
|
||||||
A data challenge platform for machine learning research,
|
A data challenge platform for machine learning research,
|
||||||
competition, cooperation and reproducibility.
|
competition, cooperation and reproducibility.
|
||||||
</TitleParagraph>
|
</TitleParagraph>
|
||||||
<ButtonLink as='button' onClick={KeyCloakService.doRegister}>
|
<ButtonLink
|
||||||
|
as="button"
|
||||||
|
onClick={() =>
|
||||||
|
props.popUpMessageHandler(
|
||||||
|
'Reminder',
|
||||||
|
'Remember to check your spam mailbox to confirm your account.',
|
||||||
|
() => KeyCloakService.doRegister
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
Join us!
|
Join us!
|
||||||
</ButtonLink>
|
</ButtonLink>
|
||||||
</Container>
|
</Container>
|
||||||
<Svg src={codepenIco} width='180px' height='150px' size='contain' backgroundColor={theme.colors.green}/>
|
<Svg
|
||||||
|
src={codepenIco}
|
||||||
|
width="180px"
|
||||||
|
height="150px"
|
||||||
|
size="contain"
|
||||||
|
backgroundColor={theme.colors.green}
|
||||||
|
/>
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const Hero = () => {
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Media query={theme.mobile}>
|
<Media query={theme.mobile}>{mobileRender()}</Media>
|
||||||
{mobileRender()}
|
<Media query={theme.desktop}>{desktopRender()}</Media>
|
||||||
</Media>
|
|
||||||
<Media query={theme.desktop}>
|
|
||||||
{desktopRender()}
|
|
||||||
</Media>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -30,7 +30,7 @@ const Button = (props) => {
|
|||||||
return (
|
return (
|
||||||
<ButtonStyle
|
<ButtonStyle
|
||||||
as={props.as ? props.as : 'button'}
|
as={props.as ? props.as : 'button'}
|
||||||
onClick={props.handler}
|
onClick={() => props.handler()}
|
||||||
width={props.width}
|
width={props.width}
|
||||||
height={props.height}
|
height={props.height}
|
||||||
color={props.color}
|
color={props.color}
|
||||||
|
@ -1,27 +1,40 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {FlexColumn} from '../../utils/containers';
|
import { FlexColumn } from '../../utils/containers';
|
||||||
import theme from '../../utils/theme';
|
import theme from '../../utils/theme';
|
||||||
import {Body, H3} from '../../utils/fonts';
|
import { Body, H3 } from '../../utils/fonts';
|
||||||
import Button from './Button';
|
import Button from './Button';
|
||||||
|
|
||||||
|
|
||||||
const PopupMessage = (props) => {
|
const PopupMessage = (props) => {
|
||||||
|
const confirmPopUp = () => {
|
||||||
|
if (props.confirmHandler) {
|
||||||
|
props.confirmHandler();
|
||||||
|
}
|
||||||
|
props.popUpMessageHandler('', '');
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FlexColumn position='fixed' top='0' left='0' zIndex='100'
|
<FlexColumn
|
||||||
width='100%' height='100vh' backgroundColor={theme.colors.dark01}>
|
position="fixed"
|
||||||
<FlexColumn alignmentY='space-between' width='40%' height='50%' borderRadius='12px'
|
top="0"
|
||||||
backgroundColor={theme.colors.white} padding='56px' border={`4px solid ${theme.colors.green}`}>
|
left="0"
|
||||||
<FlexColumn gap='48px'>
|
zIndex="100"
|
||||||
<H3>
|
width="100%"
|
||||||
{props.header}
|
height="100vh"
|
||||||
</H3>
|
backgroundColor={theme.colors.dark01}
|
||||||
<Body>
|
>
|
||||||
{props.message}
|
<FlexColumn
|
||||||
</Body>
|
alignmentY="space-between"
|
||||||
|
width="60%"
|
||||||
|
borderRadius="12px"
|
||||||
|
backgroundColor={theme.colors.white}
|
||||||
|
padding="56px"
|
||||||
|
border={`4px solid ${theme.colors.green}`}
|
||||||
|
>
|
||||||
|
<FlexColumn gap="48px" margin="0 0 48px 0">
|
||||||
|
<H3>{props.header}</H3>
|
||||||
|
<Body>{props.message}</Body>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
<Button handler={() => props.popUpMessageHandler('', '')}>
|
<Button handler={confirmPopUp}>Ok</Button>
|
||||||
Ok
|
|
||||||
</Button>
|
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
);
|
);
|
||||||
|
@ -73,7 +73,17 @@ const MobileNavMenu = (props) => {
|
|||||||
<Menu as="li">Privacy policy</Menu>
|
<Menu as="li">Privacy policy</Menu>
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
{!KeyCloakService.isLoggedIn() ? (
|
{!KeyCloakService.isLoggedIn() ? (
|
||||||
<FlexRow as="button" onClick={KeyCloakService.doRegister} gap="16px">
|
<FlexRow
|
||||||
|
as="button"
|
||||||
|
onClick={() =>
|
||||||
|
props.popUpMessageHandler(
|
||||||
|
'Reminder',
|
||||||
|
'Remember to check your spam mailbox to confirm your account.',
|
||||||
|
() => KeyCloakService.doRegister
|
||||||
|
)
|
||||||
|
}
|
||||||
|
gap="16px"
|
||||||
|
>
|
||||||
<Svg width="16px" height="16px" src={registerIco} />
|
<Svg width="16px" height="16px" src={registerIco} />
|
||||||
<Menu as="li">Register</Menu>
|
<Menu as="li">Register</Menu>
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
|
@ -65,7 +65,13 @@ const NavBar = (props) => {
|
|||||||
{!KeyCloakService.isLoggedIn() ? (
|
{!KeyCloakService.isLoggedIn() ? (
|
||||||
<FlexRow
|
<FlexRow
|
||||||
as="button"
|
as="button"
|
||||||
onClick={KeyCloakService.doRegister}
|
onClick={() =>
|
||||||
|
props.popUpMessageHandler(
|
||||||
|
'Reminder',
|
||||||
|
'Remember to check your spam mailbox to confirm your account.',
|
||||||
|
() => KeyCloakService.doRegister
|
||||||
|
)
|
||||||
|
}
|
||||||
gap="16px"
|
gap="16px"
|
||||||
>
|
>
|
||||||
<Svg width="16px" height="16px" src={registerIco} />
|
<Svg width="16px" height="16px" src={registerIco} />
|
||||||
@ -96,6 +102,7 @@ const NavBar = (props) => {
|
|||||||
mobileMenuHoverFalse={mobileMenuHoverFalse}
|
mobileMenuHoverFalse={mobileMenuHoverFalse}
|
||||||
translateY={navMenuTranslateY}
|
translateY={navMenuTranslateY}
|
||||||
toggleNavMenu={toggleNavMenu}
|
toggleNavMenu={toggleNavMenu}
|
||||||
|
popUpMessageHandler={props.popUpMessageHandler}
|
||||||
/>
|
/>
|
||||||
</NavBarStyle>
|
</NavBarStyle>
|
||||||
);
|
);
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {FlexColumn} from '../utils/containers';
|
import { FlexColumn } from '../utils/containers';
|
||||||
import Motivation from '../components/content_sections/Motivation';
|
import Motivation from '../components/content_sections/Motivation';
|
||||||
import Csi from '../components/content_sections/Csi';
|
import Csi from '../components/content_sections/Csi';
|
||||||
import Commercial from '../components/content_sections/Commercial';
|
import Commercial from '../components/content_sections/Commercial';
|
||||||
@ -19,7 +19,7 @@ const LandingPageStyle = styled(FlexColumn)`
|
|||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
@media (min-width: ${({ theme }) => theme.overMobile}) {
|
||||||
padding: 172px 0 124px;
|
padding: 172px 0 124px;
|
||||||
|
|
||||||
.main-container {
|
.main-container {
|
||||||
@ -29,15 +29,15 @@ const LandingPageStyle = styled(FlexColumn)`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const LandingPage = () => {
|
const LandingPage = (props) => {
|
||||||
return (
|
return (
|
||||||
<LandingPageStyle as='main'>
|
<LandingPageStyle as="main">
|
||||||
<FlexColumn className='main-container'>
|
<FlexColumn className="main-container">
|
||||||
<Hero/>
|
<Hero popUpMessageHandler={props.popUpMessageHandler} />
|
||||||
<Motivation/>
|
<Motivation />
|
||||||
<Csi/>
|
<Csi />
|
||||||
<Commercial/>
|
<Commercial />
|
||||||
<Partnerships/>
|
<Partnerships />
|
||||||
</FlexColumn>
|
</FlexColumn>
|
||||||
</LandingPageStyle>
|
</LandingPageStyle>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user