2021-06-04 20:43:13 +00:00
|
|
|
import React, { useContext, useEffect, useState } from 'react';
|
|
|
|
import Carousel from 'react-bootstrap/Carousel';
|
|
|
|
import Button from 'react-bootstrap/Button';
|
|
|
|
import styled from 'styled-components';
|
2021-06-04 07:57:48 +00:00
|
|
|
import { AppContext } from './_app';
|
2021-06-04 20:43:13 +00:00
|
|
|
import Login from 'components/Login';
|
|
|
|
import { useRouter } from 'next/router';
|
|
|
|
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
|
|
|
import EnteSpinner from 'components/EnteSpinner';
|
|
|
|
import SignUp from 'components/SignUp';
|
|
|
|
import constants from 'utils/strings/constants';
|
|
|
|
|
|
|
|
const Container = styled.div`
|
|
|
|
display: flex;
|
|
|
|
flex: 1;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2021-06-04 21:20:53 +00:00
|
|
|
background-color: #000;
|
2021-06-04 20:43:13 +00:00
|
|
|
|
|
|
|
@media(max-width: 1024px) {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const SlideContainer = styled.div`
|
|
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
@media(max-width: 1024px) {
|
|
|
|
flex-grow: 0;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const DesktopBox = styled.div`
|
2021-06-04 20:53:26 +00:00
|
|
|
flex: 1;
|
2021-06-04 20:43:13 +00:00
|
|
|
height: 100%;
|
|
|
|
padding: 10px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
background-color: #242424;
|
|
|
|
|
|
|
|
@media(max-width: 1024px) {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const MobileBox = styled.div`
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
@media(max-width: 1024px) {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2021-06-04 21:20:53 +00:00
|
|
|
padding: 40px 10px;
|
2021-06-04 20:43:13 +00:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const SideBox = styled.div`
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2021-06-04 20:58:08 +00:00
|
|
|
min-width: 320px;
|
2021-06-04 20:43:13 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const TextContainer = styled.div`
|
|
|
|
padding: 20px;
|
|
|
|
max-width: 300px;
|
|
|
|
margin: 0 auto;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const UpperText = styled(TextContainer)`
|
|
|
|
font-size: 24px;
|
|
|
|
max-width: 100%;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const FeatureText = styled.div`
|
|
|
|
color: #2dc262;
|
|
|
|
font-weight: bold;
|
|
|
|
padding-top: 20px;
|
|
|
|
font-size: 24px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Img = styled.img`
|
|
|
|
height: 250px;
|
|
|
|
object-fit: contain;
|
2021-06-04 22:15:36 +00:00
|
|
|
|
|
|
|
@media(max-width: 400px) {
|
|
|
|
height: 180px;
|
|
|
|
}
|
2021-06-04 20:43:13 +00:00
|
|
|
`;
|
2021-05-29 06:27:52 +00:00
|
|
|
|
2021-06-04 07:57:48 +00:00
|
|
|
export default function LandingPage() {
|
2021-06-04 20:43:13 +00:00
|
|
|
const router = useRouter();
|
2021-06-04 07:57:48 +00:00
|
|
|
const appContext = useContext(AppContext);
|
2021-06-04 20:43:13 +00:00
|
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const [showLogin, setShowLogin] = useState(true);
|
2020-11-21 12:18:03 +00:00
|
|
|
|
2020-09-12 21:53:41 +00:00
|
|
|
useEffect(() => {
|
2021-06-04 20:43:13 +00:00
|
|
|
const main = async () =>{
|
|
|
|
const user = getData(LS_KEYS.USER);
|
|
|
|
if (user?.email) {
|
|
|
|
await router.push('/verify');
|
|
|
|
}
|
|
|
|
setLoading(false);
|
|
|
|
};
|
|
|
|
main();
|
2021-06-04 07:57:48 +00:00
|
|
|
appContext.showNavBar(false);
|
2020-09-12 21:53:41 +00:00
|
|
|
}, []);
|
|
|
|
|
2021-06-04 20:43:13 +00:00
|
|
|
const signUp = () => setShowLogin(false);
|
|
|
|
const login = () => setShowLogin(true);
|
|
|
|
|
|
|
|
return <Container>
|
|
|
|
{loading ? <EnteSpinner /> :
|
|
|
|
(<>
|
|
|
|
<SlideContainer>
|
|
|
|
<UpperText>
|
2021-06-04 21:20:53 +00:00
|
|
|
{constants.HERO_HEADER()}
|
2021-06-04 20:43:13 +00:00
|
|
|
</UpperText>
|
|
|
|
<Carousel controls={false}>
|
|
|
|
<Carousel.Item>
|
|
|
|
<Img src="/images/slide-1.png" />
|
2021-06-04 21:20:53 +00:00
|
|
|
<FeatureText>{constants.HERO_SLIDE_1_TITLE}</FeatureText>
|
|
|
|
<TextContainer>{constants.HERO_SLIDE_1}</TextContainer>
|
2021-06-04 20:43:13 +00:00
|
|
|
</Carousel.Item>
|
|
|
|
<Carousel.Item>
|
|
|
|
<Img src="/images/slide-2.png" />
|
2021-06-04 21:20:53 +00:00
|
|
|
<FeatureText>{constants.HERO_SLIDE_2_TITLE}</FeatureText>
|
|
|
|
<TextContainer>{constants.HERO_SLIDE_2}</TextContainer>
|
2021-06-04 20:43:13 +00:00
|
|
|
</Carousel.Item>
|
|
|
|
<Carousel.Item>
|
|
|
|
<Img src="/images/slide-3.png" />
|
2021-06-04 21:20:53 +00:00
|
|
|
<FeatureText>{constants.HERO_SLIDE_3_TITLE}</FeatureText>
|
|
|
|
<TextContainer>{constants.HERO_SLIDE_3}</TextContainer>
|
2021-06-04 20:43:13 +00:00
|
|
|
</Carousel.Item>
|
|
|
|
</Carousel>
|
|
|
|
</SlideContainer>
|
|
|
|
<MobileBox>
|
|
|
|
<Button
|
|
|
|
variant="outline-success"
|
|
|
|
size="lg"
|
|
|
|
style={{ color: '#fff', padding: '10px 50px' }}
|
|
|
|
onClick={() => router.push('signup')}
|
|
|
|
>
|
|
|
|
{constants.SIGN_UP}
|
|
|
|
</Button>
|
|
|
|
<br/>
|
|
|
|
<Button
|
|
|
|
variant="link"
|
|
|
|
size="lg"
|
|
|
|
style={{ color: '#fff', padding: '10px 50px' }}
|
|
|
|
onClick={() => router.push('login')}
|
|
|
|
>
|
|
|
|
{constants.SIGN_IN}
|
|
|
|
</Button>
|
|
|
|
</MobileBox>
|
|
|
|
<DesktopBox>
|
|
|
|
<SideBox>
|
|
|
|
{ showLogin ? <Login signUp={signUp} /> : <SignUp login={login} />}
|
|
|
|
</SideBox>
|
|
|
|
</DesktopBox>
|
|
|
|
</>)}
|
|
|
|
</Container>;
|
2020-09-09 21:09:51 +00:00
|
|
|
}
|