2021-03-17 18:44:15 -07:00
|
|
|
import React from 'react';
|
|
|
|
|
import NavBar from './NavBar';
|
|
|
|
|
import Footer from './Footer';
|
|
|
|
|
import { useHistory } from "react-router-dom";
|
|
|
|
|
import Lottie from 'react-lottie';
|
|
|
|
|
import animationData from '../lottie/plane_gif';
|
2021-03-19 05:12:44 -07:00
|
|
|
import {Container,Row,Col,Carousel, Button} from "react-bootstrap";
|
2021-03-17 18:44:15 -07:00
|
|
|
import styled from 'styled-components';
|
|
|
|
|
import { CheckCircle, Heart, AddressCard, ChartLine } from '@styled-icons/fa-solid';
|
|
|
|
|
import { Bullseye } from "@styled-icons/fa-solid";
|
|
|
|
|
import { StyledIconBase } from '@styled-icons/styled-icon'
|
2021-03-25 10:36:27 -07:00
|
|
|
import Sidebar from './Sidebar';
|
2021-03-17 18:44:15 -07:00
|
|
|
|
2021-03-29 05:47:28 -07:00
|
|
|
const Body = styled.div`
|
|
|
|
|
`;
|
|
|
|
|
|
2021-03-17 18:44:15 -07:00
|
|
|
const IconStyler = styled.div`
|
|
|
|
|
${StyledIconBase} {
|
|
|
|
|
width: ${props => props.width ? props.width : 26}px;
|
|
|
|
|
height: ${props => props.height ? props.height : 26};
|
|
|
|
|
color: ${ props => props.color ? props.color: "white"};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
const defaultOptions = {
|
|
|
|
|
loop: true,
|
|
|
|
|
autoplay: true,
|
|
|
|
|
animationData: animationData,
|
|
|
|
|
rendererSettings: {
|
|
|
|
|
preserveAspectRatio: "xMidYMid slice"
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const ColoredSection = styled.section`
|
|
|
|
|
|
|
|
|
|
background-color:#66bfbf;
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
const WhiteSection = styled.section`
|
|
|
|
|
background:#fff;
|
|
|
|
|
`;
|
|
|
|
|
const PressSection = styled(ColoredSection)`
|
|
|
|
|
padding-bottom: 3%;
|
|
|
|
|
align-items:center;
|
|
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
const PressLogo = styled.img`
|
|
|
|
|
width: 18%;
|
|
|
|
|
height: 18%;
|
|
|
|
|
margin: 20px 20px 50px;
|
|
|
|
|
`;
|
2021-03-24 01:37:34 -07:00
|
|
|
const RowFix = styled(Row)`
|
|
|
|
|
margin: 0 0px;
|
|
|
|
|
`;
|
2021-03-17 18:44:15 -07:00
|
|
|
|
|
|
|
|
const FeatureCol = styled(Col)`
|
|
|
|
|
padding: 4.5%;
|
|
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
const ContainerPadded = styled(Container)`
|
2021-03-19 05:12:44 -07:00
|
|
|
padding: 5% 5%;
|
2021-03-17 18:44:15 -07:00
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
const BigHeading = styled.h1`
|
|
|
|
|
font-size: 5rem;
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
font-family: "Ubuntu";
|
|
|
|
|
color: white;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
const FeatureTitle = styled.h3`
|
|
|
|
|
font-size: 1.5rem;
|
|
|
|
|
color:#8f8f8f;
|
|
|
|
|
align-self: center;
|
|
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
const TestimonalTitle = styled.h2`
|
|
|
|
|
font-size: 3rem;
|
|
|
|
|
color:#fff;
|
|
|
|
|
line-height: 1.5;
|
2021-03-19 05:12:44 -07:00
|
|
|
align-content: center;
|
|
|
|
|
padding: 10px 50px;
|
2021-03-21 10:28:11 -07:00
|
|
|
font-style: italic;
|
2021-03-17 18:44:15 -07:00
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function HomePage() {
|
|
|
|
|
const history = useHistory();
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
2021-03-29 05:47:28 -07:00
|
|
|
<Body>
|
2021-03-17 18:44:15 -07:00
|
|
|
|
2021-03-21 10:28:11 -07:00
|
|
|
<ColoredSection >
|
2021-03-17 18:44:15 -07:00
|
|
|
|
|
|
|
|
<ContainerPadded fluid>
|
|
|
|
|
|
2021-03-24 01:42:24 -07:00
|
|
|
<Row>
|
2021-03-17 18:44:15 -07:00
|
|
|
|
|
|
|
|
<FeatureCol lg="6">
|
|
|
|
|
<BigHeading>Adapt to a new place easy peasy.</BigHeading>
|
|
|
|
|
|
2021-03-19 05:12:44 -07:00
|
|
|
<Button variant="info" onClick={() => {
|
2021-03-17 18:44:15 -07:00
|
|
|
history.push("/user/login")
|
2021-03-19 05:12:44 -07:00
|
|
|
}} >Log In</Button>
|
2021-03-17 18:44:15 -07:00
|
|
|
|
2021-03-19 05:12:44 -07:00
|
|
|
<Button variant="info" onClick={() => history.push("/user/register")} >Sign Up</Button>
|
2021-03-17 18:44:15 -07:00
|
|
|
|
|
|
|
|
</FeatureCol>
|
|
|
|
|
|
|
|
|
|
<FeatureCol lg="6">
|
|
|
|
|
|
2021-03-24 00:31:07 -07:00
|
|
|
<Lottie options= { defaultOptions } />
|
2021-03-17 18:44:15 -07:00
|
|
|
</FeatureCol>
|
|
|
|
|
|
2021-03-24 01:42:24 -07:00
|
|
|
</Row>
|
2021-03-17 18:44:15 -07:00
|
|
|
</ContainerPadded>
|
|
|
|
|
</ColoredSection>
|
2021-03-19 05:12:44 -07:00
|
|
|
<WhiteSection id="services">
|
2021-03-17 18:44:15 -07:00
|
|
|
|
|
|
|
|
<ContainerPadded fluid>
|
|
|
|
|
|
2021-03-24 01:42:24 -07:00
|
|
|
<Row>
|
2021-03-17 18:44:15 -07:00
|
|
|
<FeatureCol lg="4">
|
|
|
|
|
<IconStyler color="#66bfbf" width={50} height={50}><CheckCircle /></IconStyler>
|
|
|
|
|
<br/>
|
|
|
|
|
<FeatureTitle>Easy to use.</FeatureTitle>
|
|
|
|
|
<p>Get relocated.We'll take care of everything.</p>
|
|
|
|
|
</FeatureCol>
|
|
|
|
|
|
|
|
|
|
<FeatureCol lg="4">
|
|
|
|
|
<IconStyler color="#66bfbf" width={50} height={50}><Bullseye /></IconStyler>
|
|
|
|
|
<br />
|
|
|
|
|
<FeatureTitle>Efficient</FeatureTitle>
|
|
|
|
|
<p>Get highest number of services for lowest cost possible.</p>
|
|
|
|
|
</FeatureCol>
|
|
|
|
|
|
|
|
|
|
<FeatureCol lg="4">
|
|
|
|
|
<IconStyler color="#66bfbf" width={50} height={50}><Heart /></IconStyler>
|
|
|
|
|
<br />
|
|
|
|
|
<FeatureTitle>Relax</FeatureTitle>
|
|
|
|
|
<p>Sit back , we'll do the dirty work.</p>
|
|
|
|
|
</FeatureCol>
|
2021-03-24 01:42:24 -07:00
|
|
|
</Row>
|
2021-03-17 18:44:15 -07:00
|
|
|
|
|
|
|
|
|
|
|
|
|
</ContainerPadded>
|
|
|
|
|
</WhiteSection>
|
|
|
|
|
<ColoredSection>
|
|
|
|
|
<br/>
|
|
|
|
|
<br/>
|
|
|
|
|
|
|
|
|
|
<Carousel>
|
|
|
|
|
<Carousel.Item>
|
|
|
|
|
<Carousel.Caption>
|
|
|
|
|
</Carousel.Caption>
|
2021-03-21 10:28:11 -07:00
|
|
|
<TestimonalTitle>"I had to shift from Bangalore to Hyderabad. Thanks to Locaft , it was easy to know about this place."</TestimonalTitle>
|
2021-03-17 18:44:15 -07:00
|
|
|
<p style={{'text-align':'center'}}>Nishant, Pune</p>
|
|
|
|
|
</Carousel.Item>
|
|
|
|
|
<Carousel.Item >
|
|
|
|
|
<Carousel.Caption>
|
|
|
|
|
</Carousel.Caption>
|
2021-03-21 10:28:11 -07:00
|
|
|
<TestimonalTitle>"Relocation took me 3 months previously , but thanks to Locaft , everything was done within 3 days."</TestimonalTitle>
|
2021-03-17 18:44:15 -07:00
|
|
|
<p style={{'text-align': 'center'}}>Mani, Hyderabad</p>
|
|
|
|
|
</Carousel.Item>
|
|
|
|
|
|
|
|
|
|
</Carousel>
|
|
|
|
|
|
|
|
|
|
</ColoredSection>
|
|
|
|
|
<PressSection>
|
|
|
|
|
<ContainerPadded fluid>
|
|
|
|
|
|
|
|
|
|
<BigHeading>Our Partners</BigHeading>
|
|
|
|
|
<PressLogo src="/indigo_optimized.jpg" alt="indigo-brand" />
|
|
|
|
|
<PressLogo src="/avasa_optmized.jpg" alt="avassa-brand" />
|
|
|
|
|
<PressLogo src="/vrl_optmized.jpg" alt="vrl-brand" />
|
|
|
|
|
|
|
|
|
|
</ContainerPadded>
|
|
|
|
|
</PressSection>
|
2021-03-19 05:12:44 -07:00
|
|
|
<WhiteSection id="about-us">
|
2021-03-17 18:44:15 -07:00
|
|
|
|
|
|
|
|
<ContainerPadded fluid>
|
|
|
|
|
|
2021-03-24 01:42:24 -07:00
|
|
|
<Row>
|
2021-03-17 18:44:15 -07:00
|
|
|
<FeatureCol lg="4">
|
|
|
|
|
<IconStyler color="#66bfbf" width={50} height={50}><AddressCard /></IconStyler>
|
|
|
|
|
<br />
|
|
|
|
|
<FeatureTitle>About Us</FeatureTitle>
|
|
|
|
|
<p>Adapting to a new place is always hard in any phase of life. We aim to make it easy. </p>
|
|
|
|
|
</FeatureCol>
|
|
|
|
|
|
|
|
|
|
<FeatureCol lg="4">
|
|
|
|
|
<IconStyler color="#66bfbf" width={50} height={50}><Bullseye /></IconStyler>
|
|
|
|
|
<br />
|
|
|
|
|
<FeatureTitle>Vision</FeatureTitle>
|
|
|
|
|
<p>Bringing all the basic amenities to the new place before your arrival.</p>
|
|
|
|
|
</FeatureCol>
|
|
|
|
|
|
|
|
|
|
<FeatureCol lg="4">
|
|
|
|
|
<IconStyler color="#66bfbf" width={50} height={50}><ChartLine /></IconStyler>
|
|
|
|
|
< br/>
|
|
|
|
|
<FeatureTitle>Mission</FeatureTitle>
|
|
|
|
|
<p>Getting adapted and familiar to the new place made easy.</p>
|
|
|
|
|
</FeatureCol>
|
2021-03-24 01:42:24 -07:00
|
|
|
</Row>
|
2021-03-17 18:44:15 -07:00
|
|
|
</ContainerPadded>
|
|
|
|
|
</WhiteSection>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ColoredSection>
|
|
|
|
|
|
|
|
|
|
<ContainerPadded fluid>
|
2021-03-24 01:42:24 -07:00
|
|
|
<Row>
|
|
|
|
|
<FeatureCol lg="12">
|
2021-03-17 18:44:15 -07:00
|
|
|
|
2021-03-24 02:04:16 -07:00
|
|
|
<BigHeading>check us out</BigHeading>
|
2021-03-19 05:12:44 -07:00
|
|
|
<img width="200px" src="google-play-badge.png"></img>
|
2021-03-17 18:44:15 -07:00
|
|
|
|
2021-03-19 05:12:44 -07:00
|
|
|
<img width="160px" src="apple_badge.svg" ></img>
|
2021-03-24 01:22:25 -07:00
|
|
|
</FeatureCol>
|
2021-03-24 01:42:24 -07:00
|
|
|
</Row>
|
2021-03-17 18:44:15 -07:00
|
|
|
</ContainerPadded>
|
2021-03-24 01:22:25 -07:00
|
|
|
|
2021-03-17 18:44:15 -07:00
|
|
|
</ColoredSection>
|
2021-03-29 05:47:28 -07:00
|
|
|
<Sidebar logout="{logout}" />
|
2021-03-28 11:24:40 -07:00
|
|
|
<NavBar />
|
2021-03-17 18:44:15 -07:00
|
|
|
|
2021-03-19 05:12:44 -07:00
|
|
|
<div id="footer">
|
|
|
|
|
<Footer />
|
|
|
|
|
</div>
|
2021-03-17 18:44:15 -07:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-03-29 05:47:28 -07:00
|
|
|
</Body>
|
2021-03-17 18:44:15 -07:00
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
