mirror of
https://github.com/Priyatham-sai-chand/Locaft-backend.git
synced 2026-10-05 08:51:33 -07:00
merge mismatch delete
This commit is contained in:
parent
012dc763e4
commit
0c341e2c81
35 changed files with 0 additions and 2664 deletions
51
package.json
51
package.json
|
|
@ -1,54 +1,3 @@
|
||||||
{
|
|
||||||
"name": "locaft",
|
|
||||||
"version": "0.1.0",
|
|
||||||
"private": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@fortawesome/fontawesome-svg-core": "^1.2.32",
|
|
||||||
"@fortawesome/free-brands-svg-icons": "^5.15.1",
|
|
||||||
"@fortawesome/free-solid-svg-icons": "^5.15.1",
|
|
||||||
"@fortawesome/react-fontawesome": "^0.1.13",
|
|
||||||
"@testing-library/jest-dom": "^5.11.5",
|
|
||||||
"@testing-library/react": "^11.1.0",
|
|
||||||
"@testing-library/user-event": "^12.1.10",
|
|
||||||
"axios": "^0.21.0",
|
|
||||||
"bootstrap": "^4.5.3",
|
|
||||||
"install": "^0.13.0",
|
|
||||||
"react": "^17.0.1",
|
|
||||||
"react-bootstrap": "^1.4.0",
|
|
||||||
"react-dom": "^17.0.1",
|
|
||||||
"react-lottie": "^1.2.3",
|
|
||||||
"react-router-dom": "^5.2.0",
|
|
||||||
"react-scripts": "^4.0.0",
|
|
||||||
"styled-components": "^5.2.1",
|
|
||||||
"styled-icons": "^10.22.0",
|
|
||||||
"web-vitals": "^0.2.4"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"start": "react-scripts start",
|
|
||||||
"build": "react-scripts build",
|
|
||||||
"test": "react-scripts test",
|
|
||||||
"eject": "react-scripts eject",
|
|
||||||
"dev": "npm run start && nodemon index.js"
|
|
||||||
},
|
|
||||||
"eslintConfig": {
|
|
||||||
"extends": [
|
|
||||||
"react-app",
|
|
||||||
"react-app/jest"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"browserslist": {
|
|
||||||
"production": [
|
|
||||||
">0.2%",
|
|
||||||
"not dead",
|
|
||||||
"not op_mini all"
|
|
||||||
],
|
|
||||||
"development": [
|
|
||||||
"last 1 chrome version",
|
|
||||||
"last 1 firefox version",
|
|
||||||
"last 1 safari version"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
{
|
{
|
||||||
"name": "auth",
|
"name": "auth",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
|
|
|
||||||
74
src/App.js
74
src/App.js
|
|
@ -1,74 +0,0 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import Axios from 'axios';
|
|
||||||
import HomePage from "./components/HomePage";
|
|
||||||
import PricingPlan from "./components/PricingPlan";
|
|
||||||
import LogInContainer from "./components/LogInContainer";
|
|
||||||
import { BrowserRouter, Route, Switch } from 'react-router-dom';
|
|
||||||
import UserContext from "./context/UserContext";
|
|
||||||
import Options from "./components/Options";
|
|
||||||
import Stepper from './components/Stepper';
|
|
||||||
import NavBar from "./components/NavBar";
|
|
||||||
import FillingDetails from "./components/FillingDetails";
|
|
||||||
import Error404 from './components/Error404';
|
|
||||||
import Payment from './components/Payment'
|
|
||||||
export default function App() {
|
|
||||||
const [userData, setUserData ] = useState({
|
|
||||||
token: undefined,
|
|
||||||
user: undefined
|
|
||||||
});
|
|
||||||
useEffect(() => {
|
|
||||||
const checkLoggedIn = async () => {
|
|
||||||
let token = localStorage.getItem("auth-token");
|
|
||||||
if (token == null) {
|
|
||||||
localStorage.setItem("auth-token","");
|
|
||||||
token ="";
|
|
||||||
}
|
|
||||||
const tokenRes = await Axios.post(
|
|
||||||
"https://server-locaft.herokuapp.com/users/tokenIsValid",
|
|
||||||
null,
|
|
||||||
{headers: {"x-auth-token": token }}
|
|
||||||
|
|
||||||
);
|
|
||||||
if (tokenRes.data) {
|
|
||||||
const userRes = await Axios.get("https://server-locaft.herokuapp.com/users/",
|
|
||||||
{headers:{"x-auth-token":token},
|
|
||||||
});
|
|
||||||
setUserData({
|
|
||||||
token,
|
|
||||||
user: userRes.data,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
checkLoggedIn();
|
|
||||||
|
|
||||||
},[])
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="App">
|
|
||||||
<BrowserRouter>
|
|
||||||
<UserContext.Provider value= {{userData, setUserData}}>
|
|
||||||
<Switch>
|
|
||||||
<Route exact path="/" component={HomePage} />
|
|
||||||
<Route exact path="asdf" component={NavBar} />
|
|
||||||
<Route path="/user" component={LogInContainer} />
|
|
||||||
<Route path="/pricing" component={PricingPlan} />
|
|
||||||
<Route path="/track" component={Stepper} />
|
|
||||||
<Route path="/options" component={Options} />
|
|
||||||
<Route path="/details" component={FillingDetails} />
|
|
||||||
<Route path="/payment" component={Payment} />
|
|
||||||
<Route path="/" component={Error404} />
|
|
||||||
</Switch>
|
|
||||||
</UserContext.Provider>
|
|
||||||
</BrowserRouter>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
import { render, screen } from '@testing-library/react';
|
|
||||||
import App from './App';
|
|
||||||
|
|
||||||
test('renders learn react link', () => {
|
|
||||||
render(<App />);
|
|
||||||
const linkElement = screen.getByText(/learn react/i);
|
|
||||||
expect(linkElement).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import Lottie from 'react-lottie';
|
|
||||||
import animationData from '../lottie/box_error';
|
|
||||||
|
|
||||||
const Body = styled.div`
|
|
||||||
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500);
|
|
||||||
font-size: 100%;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-family: "Roboto", sans-serif;
|
|
||||||
display:flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
`;
|
|
||||||
const Container = styled.div`
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
background-color: #66bfbf;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
const Heading = styled.h1`
|
|
||||||
padding-top: 15%;
|
|
||||||
color: white;
|
|
||||||
font-size: 4rem;
|
|
||||||
margin: 0px;
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
const defaultOptions = {
|
|
||||||
loop: true,
|
|
||||||
autoplay: true,
|
|
||||||
animationData: animationData,
|
|
||||||
rendererSettings: {
|
|
||||||
preserveAspectRatio: "xMidYMid slice"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const Error404 = () => {
|
|
||||||
return (
|
|
||||||
<Body>
|
|
||||||
<Container>
|
|
||||||
<Heading>Error </Heading>
|
|
||||||
<br />
|
|
||||||
<Lottie height={500} width={500} options={defaultOptions} />
|
|
||||||
</Container>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</Body>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
export default Error404;
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import Footer from "./Footer";
|
|
||||||
|
|
||||||
|
|
||||||
export default function ErrorNotice(props) {
|
|
||||||
const ErrorNotice = styled.div`
|
|
||||||
margin: 1rem 0;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border: 1px solid #e07c7c;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #f8d6d6;
|
|
||||||
`;
|
|
||||||
const ErrorMessage = styled.div`
|
|
||||||
color: #000000;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ErrorButton = styled.button
|
|
||||||
`
|
|
||||||
width: 17px;
|
|
||||||
height: 28px;
|
|
||||||
display:flex;
|
|
||||||
background-color: #df4343;
|
|
||||||
color: #ffffff;
|
|
||||||
`;
|
|
||||||
return (
|
|
||||||
<ErrorNotice>
|
|
||||||
<ErrorMessage>{props.message}</ErrorMessage>
|
|
||||||
<ErrorButton onClick={props.clearError}>x</ErrorButton>
|
|
||||||
</ErrorNotice>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
import React,{useState} from 'react';
|
|
||||||
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import Footer from './Footer';
|
|
||||||
import NavBar from './NavBar';
|
|
||||||
const Selector = styled.select`
|
|
||||||
|
|
||||||
width: 25%;
|
|
||||||
|
|
||||||
`;
|
|
||||||
const Container = styled.div`
|
|
||||||
|
|
||||||
padding: 50px;
|
|
||||||
|
|
||||||
`;
|
|
||||||
const Heading = styled.h1`
|
|
||||||
|
|
||||||
|
|
||||||
color: #66bfbf !important;
|
|
||||||
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
||||||
const FillingDetails = () => {
|
|
||||||
|
|
||||||
const [foodState, setFoodState] = useState(null);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Container>
|
|
||||||
<NavBar></NavBar>
|
|
||||||
<br></br>
|
|
||||||
<br></br>
|
|
||||||
<Heading>Details</Heading>
|
|
||||||
<br></br>
|
|
||||||
<div>
|
|
||||||
Source:
|
|
||||||
<Selector
|
|
||||||
className="custom-select"
|
|
||||||
value={foodState}
|
|
||||||
onChange={(e) => {
|
|
||||||
const selectedFood = e.target.value;
|
|
||||||
setFoodState(selectedFood);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="source1" >source12</option>
|
|
||||||
<option value="source2">source2</option>
|
|
||||||
<option value="source3">source3</option>
|
|
||||||
</Selector>
|
|
||||||
<br></br>
|
|
||||||
{foodState}
|
|
||||||
<br></br>
|
|
||||||
<br></br>
|
|
||||||
<br></br>
|
|
||||||
Destination:
|
|
||||||
<Selector
|
|
||||||
className="custom-select"
|
|
||||||
value={foodState}
|
|
||||||
onChange={(e) => {
|
|
||||||
const selectedFood = e.target.value;
|
|
||||||
setFoodState(selectedFood);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="dest1" >dest1</option>
|
|
||||||
<option value="dest2">dest2</option>
|
|
||||||
<option value="dest3">dest3</option>
|
|
||||||
</Selector>
|
|
||||||
<br></br>
|
|
||||||
{foodState}
|
|
||||||
</div>
|
|
||||||
<Footer />
|
|
||||||
</Container>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default FillingDetails;
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import { Facebook, Twitter, Instagram } from "@styled-icons/fa-brands";
|
|
||||||
import { Envelope } from "@styled-icons/fa-solid";
|
|
||||||
import { StyledIconBase } from '@styled-icons/styled-icon'
|
|
||||||
|
|
||||||
import {
|
|
||||||
Container
|
|
||||||
} from 'react-bootstrap';
|
|
||||||
|
|
||||||
const ContainerPadded = styled(Container)`
|
|
||||||
padding: 7% 15%;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
|
|
||||||
const WhiteSection = styled.footer`
|
|
||||||
background: ${props => props.background || "white"};
|
|
||||||
|
|
||||||
`;
|
|
||||||
const ContainerCentered = styled.div`
|
|
||||||
display:flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
`;
|
|
||||||
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"};
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
margin: 20px 10px;
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const Footer = () => {
|
|
||||||
return (
|
|
||||||
<WhiteSection>
|
|
||||||
<ContainerPadded fluid>
|
|
||||||
<ContainerCentered>
|
|
||||||
<IconStyler color="#000" width={20} height={20}><Facebook /></IconStyler>
|
|
||||||
<IconStyler color="#000" width={20} height={20}><Twitter /></IconStyler>
|
|
||||||
<IconStyler color="#000" width={20} height={20}><Instagram /></IconStyler>
|
|
||||||
<IconStyler color="#000" width={20} height={20}><Envelope /></IconStyler >
|
|
||||||
</ContainerCentered>
|
|
||||||
<p>© Copyright 2020 Locaft</p>
|
|
||||||
<p><a href="/tc">Terms and Conditions</a></p>
|
|
||||||
<p><a href="/pp">Privacy Policy</a></p>
|
|
||||||
|
|
||||||
</ContainerPadded >
|
|
||||||
</WhiteSection >
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
export default Footer;
|
|
||||||
|
|
@ -1,250 +0,0 @@
|
||||||
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';
|
|
||||||
import {Container,Row,Col,Carousel, Button} from "react-bootstrap";
|
|
||||||
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'
|
|
||||||
import Sidebar from './Sidebar';
|
|
||||||
|
|
||||||
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;
|
|
||||||
`;
|
|
||||||
const RowFix = styled(Row)`
|
|
||||||
margin: 0 0px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FeatureCol = styled(Col)`
|
|
||||||
padding: 4.5%;
|
|
||||||
|
|
||||||
`;
|
|
||||||
const ContainerPadded = styled(Container)`
|
|
||||||
padding: 5% 5%;
|
|
||||||
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;
|
|
||||||
align-content: center;
|
|
||||||
padding: 10px 50px;
|
|
||||||
font-style: italic;
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
||||||
export default function HomePage() {
|
|
||||||
const history = useHistory();
|
|
||||||
|
|
||||||
return (
|
|
||||||
|
|
||||||
<div className="HomePage">
|
|
||||||
<NavBar />
|
|
||||||
|
|
||||||
<ColoredSection >
|
|
||||||
|
|
||||||
<ContainerPadded fluid>
|
|
||||||
|
|
||||||
<Row>
|
|
||||||
|
|
||||||
<FeatureCol lg="6">
|
|
||||||
<BigHeading>Adapt to a new place easy peasy.</BigHeading>
|
|
||||||
|
|
||||||
<Button variant="info" onClick={() => {
|
|
||||||
history.push("/user/login")
|
|
||||||
}} >Log In</Button>
|
|
||||||
|
|
||||||
<Button variant="info" onClick={() => history.push("/user/register")} >Sign Up</Button>
|
|
||||||
|
|
||||||
</FeatureCol>
|
|
||||||
|
|
||||||
<FeatureCol lg="6">
|
|
||||||
|
|
||||||
<Lottie options= { defaultOptions } />
|
|
||||||
</FeatureCol>
|
|
||||||
|
|
||||||
</Row>
|
|
||||||
</ContainerPadded>
|
|
||||||
</ColoredSection>
|
|
||||||
<WhiteSection id="services">
|
|
||||||
|
|
||||||
<ContainerPadded fluid>
|
|
||||||
|
|
||||||
<Row>
|
|
||||||
<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>
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
|
|
||||||
</ContainerPadded>
|
|
||||||
</WhiteSection>
|
|
||||||
<ColoredSection>
|
|
||||||
<br/>
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
<Carousel>
|
|
||||||
<Carousel.Item>
|
|
||||||
<Carousel.Caption>
|
|
||||||
</Carousel.Caption>
|
|
||||||
<TestimonalTitle>"I had to shift from Bangalore to Hyderabad. Thanks to Locaft , it was easy to know about this place."</TestimonalTitle>
|
|
||||||
<p style={{'text-align':'center'}}>Nishant, Pune</p>
|
|
||||||
</Carousel.Item>
|
|
||||||
<Carousel.Item >
|
|
||||||
<Carousel.Caption>
|
|
||||||
</Carousel.Caption>
|
|
||||||
<TestimonalTitle>"Relocation took me 3 months previously , but thanks to Locaft , everything was done within 3 days."</TestimonalTitle>
|
|
||||||
<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>
|
|
||||||
<WhiteSection id="about-us">
|
|
||||||
|
|
||||||
<ContainerPadded fluid>
|
|
||||||
|
|
||||||
<Row>
|
|
||||||
<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>
|
|
||||||
</Row>
|
|
||||||
</ContainerPadded>
|
|
||||||
</WhiteSection>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<ColoredSection>
|
|
||||||
|
|
||||||
<ContainerPadded fluid>
|
|
||||||
<Row>
|
|
||||||
<FeatureCol lg="12">
|
|
||||||
|
|
||||||
<BigHeading>check us out</BigHeading>
|
|
||||||
<img width="200px" src="google-play-badge.png"></img>
|
|
||||||
|
|
||||||
<img width="160px" src="apple_badge.svg" ></img>
|
|
||||||
</FeatureCol>
|
|
||||||
</Row>
|
|
||||||
</ContainerPadded>
|
|
||||||
|
|
||||||
</ColoredSection>
|
|
||||||
<Sidebar />
|
|
||||||
|
|
||||||
<div id="footer">
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,113 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
|
|
||||||
const Image = styled.img`
|
|
||||||
display:block;
|
|
||||||
`;
|
|
||||||
const Tick = styled.input.attrs(props => ({
|
|
||||||
type: "radio",
|
|
||||||
name: "radiobtn"
|
|
||||||
|
|
||||||
}))`
|
|
||||||
|
|
||||||
`;
|
|
||||||
const Overlay = styled.div`
|
|
||||||
position: block;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgb(0, 0, 0);
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
color: #f1f1f1;
|
|
||||||
width: 100%;
|
|
||||||
transition: .5s ease;
|
|
||||||
opacity:0;
|
|
||||||
color: white;
|
|
||||||
font-size: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: -90px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
||||||
const Card = styled.div`
|
|
||||||
width: 300px;
|
|
||||||
height: 300px;
|
|
||||||
border-radius: 40px;
|
|
||||||
box-shadow: 4px 4px 5px 5px rgba(0,0,0,0.01), -2px -2px 5px 5px rgba(0,0,0,0.22);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.4s;
|
|
||||||
|
|
||||||
|
|
||||||
& .card_image {
|
|
||||||
width: inherit;
|
|
||||||
height:inherit;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
& .card_image ${Image} {
|
|
||||||
width: inherit;
|
|
||||||
height:inherit;
|
|
||||||
border-radius: 40px;
|
|
||||||
object-fit:cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .card_title {
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 0px 0px 40px 40px;
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 30px;
|
|
||||||
margin-top: -80px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
& .card_title {
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 0px 0px 40px 40px;
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 30px;
|
|
||||||
margin-top: -80px;
|
|
||||||
height: 40px;
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
& .card_tick {
|
|
||||||
content:'asdf';
|
|
||||||
border-radius: 0px 0px 40px 40px;
|
|
||||||
margin-top: -90px;
|
|
||||||
height: 40px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
|
|
||||||
box-shadow: 2px 2px 5px 9px rgba(0,0,0,0.22), -2px -2px 5px 5px rgba(0,0,0,0.11);
|
|
||||||
;
|
|
||||||
|
|
||||||
}
|
|
||||||
&:hover ${Overlay}{
|
|
||||||
opacity: 1;
|
|
||||||
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const HouseCard = (props) => {
|
|
||||||
|
|
||||||
return (
|
|
||||||
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<Card className="card_image"> <Image src={props.img} alt="asdf" /></Card>
|
|
||||||
<Card className="card_title">
|
|
||||||
<p>Card Title</p>
|
|
||||||
</Card>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
|
|
||||||
);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
export default HouseCard;
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
const HouseDetails = (props) => {
|
|
||||||
|
|
||||||
const contin = e => {
|
|
||||||
e.preventDefault();
|
|
||||||
this.props.nextStep();
|
|
||||||
};
|
|
||||||
|
|
||||||
const back = e => {
|
|
||||||
e.preventDefault();
|
|
||||||
this.props.prevStep();
|
|
||||||
};
|
|
||||||
const {values, handleChange} = props;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-dom';
|
|
||||||
import Register from './Register';
|
|
||||||
import Login from './Login';
|
|
||||||
import Footer from './Footer';
|
|
||||||
|
|
||||||
import '../login_reg.css';
|
|
||||||
|
|
||||||
const BaseApp = styled.div`
|
|
||||||
display: flex;
|
|
||||||
color: white;
|
|
||||||
height:100vh;
|
|
||||||
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Aside = styled.div`
|
|
||||||
width: 50%;
|
|
||||||
background-color: #66bfbf;
|
|
||||||
display:flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
`;
|
|
||||||
|
|
||||||
const LogInContainer = (props) => {
|
|
||||||
return (
|
|
||||||
<BrowserRouter basename="user">
|
|
||||||
<div className="Apper">
|
|
||||||
<div className="Apper__Aside">
|
|
||||||
<div className="Apper_logo">
|
|
||||||
<img src="/logo.jpg" alt="plane logo"></img>
|
|
||||||
</div>
|
|
||||||
<div className="Apper__Aside__text">
|
|
||||||
<h1 className="Apper_heading">locaft</h1>
|
|
||||||
<p className="Apper_quote">Sit back, let us move you</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="Apper_Aside_image">
|
|
||||||
<img src="/skyscraper.png" alt="skyscraper"></img>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="Apper__Form">
|
|
||||||
<div className="PageSwitcher">
|
|
||||||
<NavLink to="/login" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign In</NavLink>
|
|
||||||
<NavLink to="/register" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign Up</NavLink>
|
|
||||||
</div>
|
|
||||||
<div className="FormTitle">
|
|
||||||
<NavLink to="/login" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign In</NavLink> or <NavLink exact to="/register" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign Up</NavLink>
|
|
||||||
</div>
|
|
||||||
<Switch>
|
|
||||||
<Route path="/register" component={Register} />
|
|
||||||
<Route path="/login" component={Login} />
|
|
||||||
</Switch>
|
|
||||||
<p>
|
|
||||||
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<Footer background="blue"/>
|
|
||||||
</BrowserRouter>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export default withRouter(LogInContainer);
|
|
||||||
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
import React, { useState, useContext } from "react";
|
|
||||||
import UserContext from "../context/UserContext";
|
|
||||||
import Axios from "axios";
|
|
||||||
import ErrorNotice from "./ErrorNotice";
|
|
||||||
import { Link, useHistory, withRouter } from "react-router-dom";
|
|
||||||
|
|
||||||
const Login = () => {
|
|
||||||
|
|
||||||
const [email, setEmail] = useState();
|
|
||||||
const [password, setPassword] = useState();
|
|
||||||
const [error, setError] = useState();
|
|
||||||
|
|
||||||
const { userData,setUserData } = useContext(UserContext);
|
|
||||||
|
|
||||||
const history = useHistory();
|
|
||||||
|
|
||||||
const submit = async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
try {
|
|
||||||
const loginUser = { email, password };
|
|
||||||
const loginRes = await Axios.post(
|
|
||||||
"https://server-locaft.herokuapp.com/users/login",
|
|
||||||
loginUser
|
|
||||||
);
|
|
||||||
setUserData({
|
|
||||||
token: loginRes.data.token,
|
|
||||||
user: loginRes.data.user,
|
|
||||||
});
|
|
||||||
localStorage.setItem("auth-token", loginRes.data.token);
|
|
||||||
history.push("/");
|
|
||||||
} catch (err) {
|
|
||||||
err.response.data.msg && setError(err.response.data.msg);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
|
|
||||||
<div className="FormCenter">
|
|
||||||
{error && (
|
|
||||||
<ErrorNotice message={error} clearError={() => setError(undefined)} />
|
|
||||||
)}
|
|
||||||
<form className="FormFields" onSubmit={submit}>
|
|
||||||
<div className="FormField">
|
|
||||||
<label className="FormField__Label" htmlFor="email">E-Mail Address</label>
|
|
||||||
<input type="email" id="email" className="FormField__Input" value={ email } placeholder="Enter your email" name="email" onChange={(e) => setEmail(e.target.value)} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="FormField">
|
|
||||||
<label className="FormField__Label" htmlFor="password">Password</label>
|
|
||||||
<input type="password" id="password" className="FormField__Input" value={ password } placeholder="Enter your password" name="password" onChange={(e) => setPassword(e.target.value)} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="FormField">
|
|
||||||
<button className="FormField__Button mr-20" >Sign In</button> <Link exact to="/register" className="FormField__Link">Not a member?</Link>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default withRouter(Login);
|
|
||||||
|
|
@ -1,149 +0,0 @@
|
||||||
import React, {useContext,useEffect } from 'react';
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import UserContext from "../context/UserContext";
|
|
||||||
import styled,{ css } from 'styled-components';
|
|
||||||
|
|
||||||
const Header = styled.header`
|
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
|
|
||||||
background: #66bfbf;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
transition: 0.6s;
|
|
||||||
padding: 10px 15px;
|
|
||||||
z-index: 100000;
|
|
||||||
font-family: Ubuntu;
|
|
||||||
|
|
||||||
${ props => props.sticky ? css`
|
|
||||||
${Header};
|
|
||||||
padding: 3px 45px;
|
|
||||||
min-height: 3vh;
|
|
||||||
opacity: 0.85;
|
|
||||||
display: fixed;
|
|
||||||
`:css``};
|
|
||||||
|
|
||||||
|
|
||||||
& .logo {
|
|
||||||
font-family: "Ubuntu";
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: bold;
|
|
||||||
position: relative;
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
text-transform: lowercase;
|
|
||||||
transition: 0.6s;
|
|
||||||
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
const List = styled.ul`
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 13px 50px;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
margin-bottom: 0px !important;
|
|
||||||
|
|
||||||
`;
|
|
||||||
const ListElement = styled.li`
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
position:relative;
|
|
||||||
padding:3px 50px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Anchor = styled.a`
|
|
||||||
color: #fff;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: inherit;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
font-size: 1.2em;
|
|
||||||
padding: 3px ;
|
|
||||||
transition: 0.6s;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
const Linker = styled(Link)`
|
|
||||||
color:#fff;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: inherit;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
font-size: 1.2em;
|
|
||||||
padding: 3px 0;
|
|
||||||
transition: 0.6s;
|
|
||||||
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
||||||
export default function NavBar() {
|
|
||||||
const { userData, setUserData } = useContext(UserContext);
|
|
||||||
|
|
||||||
const logout = () => {
|
|
||||||
setUserData({
|
|
||||||
token: undefined,
|
|
||||||
user: undefined,
|
|
||||||
});
|
|
||||||
localStorage.setItem("auth-token", "");
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const [scrolled,setScrolled]=React.useState(false);
|
|
||||||
const handleScroll=() => {
|
|
||||||
const offset=window.scrollY;
|
|
||||||
if(offset > 200 ){
|
|
||||||
setScrolled(true);
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
setScrolled(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
useEffect(() => {
|
|
||||||
window.addEventListener('scroll',handleScroll)
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="navbar">
|
|
||||||
<Header sticky = {scrolled} >
|
|
||||||
|
|
||||||
<Anchor href="/" className="logo">locaft</Anchor>
|
|
||||||
<List>
|
|
||||||
<ListElement><Anchor href="/">Home</Anchor></ListElement>
|
|
||||||
<ListElement><Anchor href="/#about-us">About</Anchor></ListElement>
|
|
||||||
<ListElement><Anchor href="/#services">Services</Anchor></ListElement>
|
|
||||||
<ListElement><Anchor href="/#footer">Contact us</Anchor></ListElement>
|
|
||||||
{userData.user ? (
|
|
||||||
<React.Fragment>
|
|
||||||
<ListElement><Linker onClick={logout}>{userData.user.username}</Linker></ListElement>
|
|
||||||
</React.Fragment>
|
|
||||||
|
|
||||||
) : (
|
|
||||||
<React.Fragment>
|
|
||||||
<ListElement><Linker to="/user/register">Register</Linker></ListElement>
|
|
||||||
<ListElement><Linker to="/user/login">login</Linker></ListElement>
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
</List>
|
|
||||||
|
|
||||||
</Header>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,92 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import '../options.css';
|
|
||||||
import Card from './HouseCard';
|
|
||||||
import Footer from "./Footer";
|
|
||||||
import styled from 'styled-components';
|
|
||||||
|
|
||||||
const CardList = styled.div`
|
|
||||||
z-index: 0;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
`;
|
|
||||||
export default function Options() {
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const previousBtn = document.getElementById('previousBtn');
|
|
||||||
const nextBtn = document.getElementById('nextBtn');
|
|
||||||
const finishBtn = document.getElementById('finishBtn');
|
|
||||||
const content = document.getElementById('content');
|
|
||||||
const bullets = [...document.querySelectorAll('.bullet')];
|
|
||||||
|
|
||||||
const MAX_STEPS = 4;
|
|
||||||
let currentStep = 1;
|
|
||||||
nextBtn.addEventListener('click', () => {
|
|
||||||
bullets[currentStep - 1].classList.add('completed');
|
|
||||||
currentStep += 1;
|
|
||||||
previousBtn.disabled = false;
|
|
||||||
if (currentStep === MAX_STEPS) {
|
|
||||||
nextBtn.disabled = true;
|
|
||||||
finishBtn.disabled = false;
|
|
||||||
}
|
|
||||||
content.innerText = `Step Number ${currentStep}`;
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
previousBtn.addEventListener('click', () => {
|
|
||||||
bullets[currentStep - 2].classList.remove('completed');
|
|
||||||
currentStep -= 1;
|
|
||||||
nextBtn.disabled = false;
|
|
||||||
finishBtn.disabled = true;
|
|
||||||
if (currentStep === 1) {
|
|
||||||
previousBtn.disabled = true;
|
|
||||||
}
|
|
||||||
content.innerText = `Step Number ${currentStep}`;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
finishBtn.addEventListener('click', () => {
|
|
||||||
window.location.reload();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
|
|
||||||
<div className="container">
|
|
||||||
<div id="stepProgressBar">
|
|
||||||
<div className="step">
|
|
||||||
<p className="step-text">About</p>
|
|
||||||
<div className="bullet">1</div>
|
|
||||||
</div>
|
|
||||||
<div className="step">
|
|
||||||
<p className="step-text">Contact</p>
|
|
||||||
<div className="bullet">2</div>
|
|
||||||
</div>
|
|
||||||
<div className="step">
|
|
||||||
<p className="step-text">Step 3</p>
|
|
||||||
<div className="bullet">3</div>
|
|
||||||
</div>
|
|
||||||
<div className="step">
|
|
||||||
<p className="step-text">Step 4</p>
|
|
||||||
<div className="bullet ">4</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="main">
|
|
||||||
<p id="content" className="text-center">Step Number 1</p>
|
|
||||||
<button id="previousBtn" >Previous</button>
|
|
||||||
<button id="nextBtn">Next</button>
|
|
||||||
<button id="finishBtn" >Finish</button>
|
|
||||||
</div>
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import React,{ useContext } from 'react';
|
|
||||||
import NavBar from './NavBar';
|
|
||||||
import Footer from './Footer';
|
|
||||||
import UserContext from '../context/UserContext'
|
|
||||||
|
|
||||||
|
|
||||||
const Payment = (props) => {
|
|
||||||
const { userData, setUserData } = useContext(UserContext);
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
|
|
||||||
<h1>{userData.user.username}</h1>
|
|
||||||
<h2>{props.pricing}</h2>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
);
|
|
||||||
}
|
|
||||||
export default Payment;
|
|
||||||
|
|
@ -1,339 +0,0 @@
|
||||||
import React, { useState,useContext } from 'react';
|
|
||||||
import NavBar from './NavBar';
|
|
||||||
import Footer from './Footer';
|
|
||||||
import styled,{css} from 'styled-components';
|
|
||||||
import UserContext from "../context/UserContext";
|
|
||||||
import Payment from "./Payment";
|
|
||||||
import { useHistory } from "react-router-dom";
|
|
||||||
import Axios from 'axios';
|
|
||||||
|
|
||||||
const size = {
|
|
||||||
mobileS: '320px',
|
|
||||||
mobileM: '375px',
|
|
||||||
mobileL: '425px',
|
|
||||||
tablet: '768px',
|
|
||||||
laptop: '1024px',
|
|
||||||
laptopL: '1440px',
|
|
||||||
desktop: '2560px'
|
|
||||||
}
|
|
||||||
export const Device = {
|
|
||||||
mobileS: `(min-width: ${size.mobileS})`,
|
|
||||||
mobileM: `(min-width: ${size.mobileM})`,
|
|
||||||
mobileL: `(min-width: ${size.mobileL})`,
|
|
||||||
tablet: `(min-width: ${size.tablet})`,
|
|
||||||
laptop: `(min-width: ${size.laptop})`,
|
|
||||||
laptopL: `(min-width: ${size.laptopL})`,
|
|
||||||
desktop: `(min-width: ${size.desktop})`,
|
|
||||||
desktopL: `(min-width: ${size.desktop})`
|
|
||||||
};
|
|
||||||
const PricingPlanContainer = styled.div`
|
|
||||||
|
|
||||||
display:flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 10px;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
@media ${Device.laptop} {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Radio = styled.input`
|
|
||||||
display:none;
|
|
||||||
|
|
||||||
`;
|
|
||||||
const Label = styled.label`
|
|
||||||
display: relative;
|
|
||||||
cursor:pointer;
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
const Pricing = styled.section`
|
|
||||||
background: white;
|
|
||||||
border-radius: 25px;
|
|
||||||
box-shadow: 0 0 5px rgba(0,0,0,0.2);
|
|
||||||
overflow: hidden;
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: #555555;
|
|
||||||
margin: 15px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 0 15px rgba(0,0,0,0.4);
|
|
||||||
transform: scale(1.05);
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
${props => props.pricing_id === props.pricing_plan ? css`
|
|
||||||
box-shadow: 0 0 15px rgba(0,0,0,0.4);
|
|
||||||
transform: scale(1.05);
|
|
||||||
|
|
||||||
|
|
||||||
`:css``};
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Text = styled.p`
|
|
||||||
font-size: 0.9em;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 0 10px 0;
|
|
||||||
`;
|
|
||||||
const Currency = styled.p`
|
|
||||||
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 2em;
|
|
||||||
color:#000000;
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Title = styled.h1`
|
|
||||||
font-size:1.5em;
|
|
||||||
font-weight: 400;
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
||||||
const Header = styled.div`
|
|
||||||
|
|
||||||
padding:25px;
|
|
||||||
background: #009578;
|
|
||||||
color: #ffffff;
|
|
||||||
|
|
||||||
`;
|
|
||||||
const Summary = styled.h2`
|
|
||||||
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 300;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const SpecialText = styled.div`
|
|
||||||
|
|
||||||
padding: 10px;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #ffffff;
|
|
||||||
background: #007c64;
|
|
||||||
box-shadow: 0 0 10px rgba(0,0,0,0.2) inset;
|
|
||||||
|
|
||||||
&, ${Title}{
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
font-family: sans-serif;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
`;
|
|
||||||
const Description = styled.div`
|
|
||||||
display:block;
|
|
||||||
padding: 25px;
|
|
||||||
|
|
||||||
`;
|
|
||||||
const List = styled.ul`
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
text-align: left;
|
|
||||||
`;
|
|
||||||
const Feature = styled.li`
|
|
||||||
margin: 0 0 25px 0;
|
|
||||||
padding-left: 25px;
|
|
||||||
position: relative;
|
|
||||||
font-size: 0.9 em;
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-bottom: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "✓ ";
|
|
||||||
color: green;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
`;
|
|
||||||
const Actions = styled.div`
|
|
||||||
|
|
||||||
padding: 25px;
|
|
||||||
border-top: 1px solid #eeeeee;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
`;
|
|
||||||
const Button = styled.a`
|
|
||||||
|
|
||||||
display: inline-block;
|
|
||||||
margin: 15px auto;
|
|
||||||
padding: 8px 20px;
|
|
||||||
color: #009578;
|
|
||||||
background: #ffffff;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 1px solid #009578;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
|
|
||||||
background: #009578;
|
|
||||||
color: white !important;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Heading = styled.h1`
|
|
||||||
color: #66bfbf;
|
|
||||||
margin-left: 20px;
|
|
||||||
margin-top: 100px;
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
|
|
||||||
const PricingPlan = () => {
|
|
||||||
|
|
||||||
const { userData, setUserData } = useContext(UserContext);
|
|
||||||
const [ purchased, setPurchased ] = useState(false);
|
|
||||||
const [ pricing, setPricing ] = useState();
|
|
||||||
|
|
||||||
const history = useHistory();
|
|
||||||
const submit = async (props) => {
|
|
||||||
props.preventDefault();
|
|
||||||
try {
|
|
||||||
const id = userData.user.id;
|
|
||||||
const pricingRes = await Axios.put(
|
|
||||||
"https://server-locaft.herokuapp.com/users/update", {
|
|
||||||
id,
|
|
||||||
pricing
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
);
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="body">
|
|
||||||
<NavBar />
|
|
||||||
{ !purchased ? (
|
|
||||||
|
|
||||||
<React.Fragment>
|
|
||||||
<Heading>Pricing Plan</Heading>
|
|
||||||
<PricingPlanContainer onChange={event => setPricing(event.target.value)}>
|
|
||||||
|
|
||||||
<Pricing pricing_plan={pricing} pricing_id="basic">
|
|
||||||
<Radio type ="radio" value="basic" name="pricing" id = "basic"/>
|
|
||||||
<Label for="basic">
|
|
||||||
<Header>
|
|
||||||
<Title>Basic Package</Title>
|
|
||||||
<Summary>For those getting started</Summary>
|
|
||||||
|
|
||||||
</Header>
|
|
||||||
<Description>
|
|
||||||
<List>
|
|
||||||
<Feature>Feature #1</Feature>
|
|
||||||
<Feature>Feature #2</Feature>
|
|
||||||
<Feature>Feature #3</Feature>
|
|
||||||
<Feature>Feature #4</Feature>
|
|
||||||
</List>
|
|
||||||
</Description>
|
|
||||||
<Actions>
|
|
||||||
<Currency>$10</Currency>
|
|
||||||
<Text>per month</Text>
|
|
||||||
<Text>Minimum sped over 12 months</Text>
|
|
||||||
|
|
||||||
</Actions>
|
|
||||||
</Label>
|
|
||||||
</Pricing>
|
|
||||||
<Pricing pricing_plan={pricing} pricing_id="intermediate">
|
|
||||||
<Radio type="radio" value="intermediate" name="pricing" id="intermediate" />
|
|
||||||
<Label for="intermediate" >
|
|
||||||
<SpecialText>Recommended</SpecialText>
|
|
||||||
<Header>
|
|
||||||
|
|
||||||
<Title>Intermediate Package</Title>
|
|
||||||
<Summary>For those getting started</Summary>
|
|
||||||
|
|
||||||
</Header>
|
|
||||||
<Description>
|
|
||||||
<List>
|
|
||||||
<Feature>Feature #1</Feature>
|
|
||||||
<Feature>Feature #2</Feature>
|
|
||||||
<Feature>Feature #3</Feature>
|
|
||||||
<Feature>Feature #4</Feature>
|
|
||||||
</List>
|
|
||||||
</Description>
|
|
||||||
<Actions>
|
|
||||||
<Currency>$50</Currency>
|
|
||||||
<Text>per month</Text>
|
|
||||||
<Text>Minimum spend over 12 months</Text>
|
|
||||||
|
|
||||||
</Actions>
|
|
||||||
</Label>
|
|
||||||
</Pricing>
|
|
||||||
<Pricing pricing_plan={pricing} pricing_id="luxury">
|
|
||||||
<Radio type="radio" value="luxury" name="pricing" id="luxury" />
|
|
||||||
<Label for="luxury">
|
|
||||||
<Header>
|
|
||||||
<Title>Luxury Package</Title>
|
|
||||||
<Summary>For those getting started</Summary>
|
|
||||||
|
|
||||||
</Header>
|
|
||||||
<Description>
|
|
||||||
<List>
|
|
||||||
<Feature>Feature #1</Feature>
|
|
||||||
<Feature>Feature #2</Feature>
|
|
||||||
<Feature>Feature #3</Feature>
|
|
||||||
<Feature>Feature #4</Feature>
|
|
||||||
</List>
|
|
||||||
</Description>
|
|
||||||
<Actions>
|
|
||||||
<Currency>$100</Currency>
|
|
||||||
<Text>per month</Text>
|
|
||||||
<Text>Minimum spend over 12 months</Text>
|
|
||||||
|
|
||||||
</Actions>
|
|
||||||
</Label>
|
|
||||||
|
|
||||||
</Pricing>
|
|
||||||
|
|
||||||
|
|
||||||
</PricingPlanContainer>
|
|
||||||
<PricingPlanContainer>
|
|
||||||
<Button onClick={() => setPurchased(true) }>Purchase</Button>
|
|
||||||
</PricingPlanContainer>
|
|
||||||
</React.Fragment>
|
|
||||||
): (
|
|
||||||
<React.Fragment>
|
|
||||||
<PricingPlanContainer styles = "{'flex-direction':'column'}">
|
|
||||||
<Heading>user name: {userData.user.username}</Heading>
|
|
||||||
<Heading>Plan selected : {pricing}</Heading>
|
|
||||||
|
|
||||||
<Button onClick={submit}>Confirm and Pay</Button>
|
|
||||||
</PricingPlanContainer>
|
|
||||||
</React.Fragment>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
<Footer />
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
export default PricingPlan;
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import styled from "styled-components";
|
|
||||||
|
|
||||||
const RadioWrapper = styled.div`
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Mark = styled.span`
|
|
||||||
position: relative;
|
|
||||||
border: 1px solid #777777;
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
left: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-right: 5px;
|
|
||||||
vertical-align: middle;
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #03a9f4;
|
|
||||||
opacity: 0;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
position: absolute;
|
|
||||||
transition: all 110ms;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Input = styled.input`
|
|
||||||
position: absolute;
|
|
||||||
visibility: hidden;
|
|
||||||
display: none;
|
|
||||||
&:checked + ${Mark} {
|
|
||||||
&::after {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
opacity: 1;
|
|
||||||
left: 12%;
|
|
||||||
top: 12%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Label = styled.label`
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
${props =>
|
|
||||||
props.disabled &&
|
|
||||||
`
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: 0.4;
|
|
||||||
`}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Radio = ({ name, children }) => (
|
|
||||||
<RadioWrapper>
|
|
||||||
<Label>
|
|
||||||
<Input name={name} type="radio" />
|
|
||||||
<Mark />
|
|
||||||
{children}
|
|
||||||
</Label>
|
|
||||||
</RadioWrapper>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default Radio;
|
|
||||||
|
|
@ -1,102 +0,0 @@
|
||||||
import React, { useState, useContext } from "react";
|
|
||||||
import { useHistory, withRouter } from "react-router-dom";
|
|
||||||
import UserContext from "../context/UserContext";
|
|
||||||
import Axios from "axios";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import ErrorNotice from "./ErrorNotice";
|
|
||||||
|
|
||||||
const Register = () => {
|
|
||||||
const [email, setEmail] = useState();
|
|
||||||
const [password, setPassword] = useState();
|
|
||||||
const [phonenumber, setPhonenumber] = useState();
|
|
||||||
const [username, setUsername] = useState();
|
|
||||||
const [error, setError] = useState();
|
|
||||||
|
|
||||||
const { setUserData } = useContext(UserContext);
|
|
||||||
const history = useHistory();
|
|
||||||
|
|
||||||
const submit = async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
try {
|
|
||||||
const newUser = { username,email,phonenumber,password};
|
|
||||||
await Axios.post("https://server-locaft.herokuapp.com/users/register", newUser);
|
|
||||||
const loginRes = await Axios.post("https://server-locaft.herokuapp.com/users/login", {
|
|
||||||
email,
|
|
||||||
password,
|
|
||||||
});
|
|
||||||
setUserData({
|
|
||||||
token: loginRes.data.token,
|
|
||||||
user: loginRes.data.user,
|
|
||||||
});
|
|
||||||
localStorage.setItem("auth-token", loginRes.data.token);
|
|
||||||
history.push("/");
|
|
||||||
} catch (err) {
|
|
||||||
return err.response.data.msg && setError(err.response.data.msg);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="FormCenter">
|
|
||||||
{error && (
|
|
||||||
<ErrorNotice message={error} clearError={() => setError(undefined)} />
|
|
||||||
)}
|
|
||||||
<form className="FormFields" onSubmit={submit}>
|
|
||||||
<div className="FormField">
|
|
||||||
<label className="FormField__Label" htmlFor="name">UserName</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
className="FormField__Input"
|
|
||||||
placeholder="Enter your full name"
|
|
||||||
onChange= { (e) => setUsername(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="FormField">
|
|
||||||
<label className="FormField__Label" htmlFor="password">Password</label>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
id="password"
|
|
||||||
className="FormField__Input"
|
|
||||||
placeholder="Enter your password"
|
|
||||||
onChange= { (e) => setPassword(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="FormField">
|
|
||||||
<label className="FormField__Label" htmlFor="email">E-Mail Address</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
className="FormField__Input"
|
|
||||||
placeholder="Enter your email"
|
|
||||||
onChange= { (e) => setEmail(e.target.value)}
|
|
||||||
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="FormField">
|
|
||||||
<label className="FormField__Label" htmlFor="phone">Phone number</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
id="phonenumber"
|
|
||||||
className="FormField__Input"
|
|
||||||
placeholder="Enter your Phone no. (+91)"
|
|
||||||
onChange= { (e) => setPhonenumber(parseInt( e.target.value,10))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="FormField">
|
|
||||||
<label className="FormField__CheckboxLabel">
|
|
||||||
<input className="FormField__Checkbox" type="checkbox" name="hasAgreed" required="true" /> I agree all statements in <a href="/" className="FormField__TermsLink">terms of service</a>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="FormField">
|
|
||||||
<button className="FormField__Button mr-20" type="submit">Sign Up</button> <Link to="/login" className="FormField__Link">already a member?</Link>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default withRouter( Register );
|
|
||||||
|
|
@ -1,151 +0,0 @@
|
||||||
import React, {useState} from 'react';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
|
|
||||||
const StyledMenu = styled.nav`
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
background: #EFFFFA;
|
|
||||||
transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(-100%)'};
|
|
||||||
height: 100vh;
|
|
||||||
text-align: left;
|
|
||||||
padding: 2rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transition: transform 0.3s ease-in-out;
|
|
||||||
|
|
||||||
@media (max-width: 576px) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-size: 2rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
padding: 2rem 0;
|
|
||||||
font-weight: bold;
|
|
||||||
letter-spacing: 0.5rem;
|
|
||||||
color: #0D0C1D;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s linear;
|
|
||||||
|
|
||||||
@media (max-width: 576px) {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #343078;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
const Menu = ({ open }) => {
|
|
||||||
return (
|
|
||||||
<StyledMenu open={open}>
|
|
||||||
<a href="/#about-us">
|
|
||||||
<span role="img" aria-label="about us">💁🏻♂️</span>
|
|
||||||
About us
|
|
||||||
</a>
|
|
||||||
<a href="/pricing">
|
|
||||||
<span role="img" aria-label="pricing">💸</span>
|
|
||||||
Pricing
|
|
||||||
</a>
|
|
||||||
<a href="/#footer">
|
|
||||||
<span role="img" aria-label="contact us">📩</span>
|
|
||||||
Contact
|
|
||||||
</a>
|
|
||||||
</StyledMenu>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const StyledBurger = styled.button`
|
|
||||||
position: absolute;
|
|
||||||
top: 5%;
|
|
||||||
left: 2rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0;
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
|
||||||
width: 2rem;
|
|
||||||
height: 0.25rem;
|
|
||||||
background: ${({ open }) => open ? '#0D0C1D' : '#EFFFFA'};
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: all 0.3s linear;
|
|
||||||
position: relative;
|
|
||||||
transform-origin: 1px;
|
|
||||||
|
|
||||||
:first-child {
|
|
||||||
transform: ${({ open }) => open ? 'rotate(45deg)' : 'rotate(0)'};
|
|
||||||
}
|
|
||||||
|
|
||||||
:nth-child(2) {
|
|
||||||
opacity: ${({ open }) => open ? '0' : '1'};
|
|
||||||
transform: ${({ open }) => open ? 'translateX(20px)' : 'translateX(0)'};
|
|
||||||
}
|
|
||||||
|
|
||||||
:nth-child(3) {
|
|
||||||
transform: ${({ open }) => open ? 'rotate(-45deg)' : 'rotate(0)'};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media(min-width:768px){
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
const Burger = ({ open, setOpen }) => {
|
|
||||||
return (
|
|
||||||
<StyledBurger open={open} onClick={() => setOpen(!open)}>
|
|
||||||
<div />
|
|
||||||
<div />
|
|
||||||
<div />
|
|
||||||
</StyledBurger>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const Sidebar = () => {
|
|
||||||
const [open, setOpen] = React.useState(false);
|
|
||||||
const node = React.useRef();
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
|
|
||||||
<div ref={node}>
|
|
||||||
<Burger open={open} setOpen={setOpen} />
|
|
||||||
<Menu open={open} setOpen={setOpen} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const useOnClickOutside = (ref, handler) => {
|
|
||||||
React.useEffect(() => {
|
|
||||||
const listener = event => {
|
|
||||||
if (!ref.current || ref.current.contains(event.target)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
handler(event);
|
|
||||||
};
|
|
||||||
document.addEventListener('mousedown', listener);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener('mousedown', listener);
|
|
||||||
};
|
|
||||||
},
|
|
||||||
[ref, handler],
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default Sidebar;
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import Footer from './Footer';
|
|
||||||
import '../stepper.css';
|
|
||||||
import NavBar from './NavBar';
|
|
||||||
|
|
||||||
export default function Stepper() {
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
var list = document.getElementById('progress'),
|
|
||||||
next = document.getElementById('next'),
|
|
||||||
clear = document.getElementById('clear'),
|
|
||||||
children = list.children,
|
|
||||||
completed = 0;
|
|
||||||
|
|
||||||
// activating a node button
|
|
||||||
next.addEventListener('click', function() {
|
|
||||||
|
|
||||||
// count the number of completed nodes.
|
|
||||||
completed = (completed === 0) ? 1 : completed + 2;
|
|
||||||
if (completed > children.length) return;
|
|
||||||
|
|
||||||
// for each node that is completed, reflect the status
|
|
||||||
// and show a green color!
|
|
||||||
for (var i = 0; i < completed; i++) {
|
|
||||||
children[i].children[0].classList.remove('grey');
|
|
||||||
children[i].children[0].classList.add('green');
|
|
||||||
|
|
||||||
// if this child is a node and not divider,
|
|
||||||
// make it shine a little more
|
|
||||||
if (i % 2 === 0) {
|
|
||||||
children[i].children[0].classList.add('activated');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
// clear the activated state of the markers
|
|
||||||
clear.addEventListener('click', function() {
|
|
||||||
for (var i = 0; i < children.length; i++) {
|
|
||||||
children[i].children[0].classList.remove('green');
|
|
||||||
children[i].children[0].classList.remove('activated');
|
|
||||||
children[i].children[0].classList.add('grey');
|
|
||||||
}
|
|
||||||
completed = 0;
|
|
||||||
}, false);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="container">
|
|
||||||
< NavBar />
|
|
||||||
<h1 className ="relocheading">Relocation Status</h1>
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<ul id="progress">
|
|
||||||
<li className="ele"><div className="node grey"></div><p>Transport tickets confirmed</p></li>
|
|
||||||
<li className="ele" ><div className="divider grey"></div></li>
|
|
||||||
<li className="ele" ><div className="node grey"></div><p>Packers & movers due to come in a day</p></li>
|
|
||||||
<li className="ele"><div className="divider grey"></div></li>
|
|
||||||
<li className="ele"><div className="node grey"></div><p>school admission being confirmed</p></li>
|
|
||||||
<li className = "ele"><div className="divider grey"></div></li>
|
|
||||||
<li className = "ele"><div className="node grey"></div><p>House is empty</p></li>
|
|
||||||
</ul>
|
|
||||||
<input type="button" value="Next" id="next" />
|
|
||||||
<input type="button" value="Clear" id="clear" />
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,103 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import Footer from './Footer';
|
|
||||||
import '../tracking.css';
|
|
||||||
|
|
||||||
export default function Tracking() {
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const previousBtn = document.getElementById('previousBtn');
|
|
||||||
const nextBtn = document.getElementById('nextBtn');
|
|
||||||
const finishBtn = document.getElementById('finishBtn');
|
|
||||||
const content = document.getElementById('content');
|
|
||||||
const nodes = [...document.querySelectorAll('.node')];
|
|
||||||
const dividers = [...document.querySelectorAll('.divider')];
|
|
||||||
|
|
||||||
const MAX_STEPS = 4;
|
|
||||||
let currentStep = 1;
|
|
||||||
if (nextBtn) {
|
|
||||||
nextBtn.addEventListener('click', () => {
|
|
||||||
nodes[currentStep - 1].classList.add('completed');
|
|
||||||
currentStep += 1;
|
|
||||||
previousBtn.disabled = false;
|
|
||||||
if (currentStep === MAX_STEPS) {
|
|
||||||
nextBtn.disabled = true;
|
|
||||||
finishBtn.disabled = false;
|
|
||||||
}
|
|
||||||
content.innerText = `Step Number ${currentStep}`;
|
|
||||||
dividers[currentStep -1 ].classList.add('completed');
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
if (previousBtn) {
|
|
||||||
previousBtn.addEventListener('click', () => {
|
|
||||||
nodes[currentStep - 2].classList.remove('completed');
|
|
||||||
currentStep -= 1;
|
|
||||||
nextBtn.disabled = false;
|
|
||||||
finishBtn.disabled = true;
|
|
||||||
if (currentStep === 1) {
|
|
||||||
previousBtn.disabled = true;
|
|
||||||
}
|
|
||||||
content.innerText = `Step Number ${currentStep}`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (finishBtn) {
|
|
||||||
finishBtn.addEventListener('click', () => {
|
|
||||||
window.location.reload();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
return (
|
|
||||||
<div class="wrapper">
|
|
||||||
<ul class="StepProgressBar">
|
|
||||||
<li class="step">
|
|
||||||
<p class="step-text">
|
|
||||||
|
|
||||||
</p>
|
|
||||||
<div class="node">
|
|
||||||
1
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li><div class="divider"></div></li>
|
|
||||||
<li class="step">
|
|
||||||
<p class="step-text">
|
|
||||||
|
|
||||||
</p>
|
|
||||||
<div class="node">
|
|
||||||
2
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li><div class="divider"></div></li>
|
|
||||||
<li class="step">
|
|
||||||
<p class="step-text">
|
|
||||||
|
|
||||||
</p>
|
|
||||||
<div class="node">
|
|
||||||
3
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li><div class="divider"></div></li>
|
|
||||||
<li class="step">
|
|
||||||
<p class="step-text">
|
|
||||||
|
|
||||||
</p>
|
|
||||||
<div class="node">
|
|
||||||
4
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li><div class="divider"></div></li>
|
|
||||||
</ul>
|
|
||||||
<div class="main">
|
|
||||||
<p id="content" class="text-center">Step Number 1</p>
|
|
||||||
<button id="previousBtn" >Previous</button>
|
|
||||||
<button id="nextBtn">Next</button>
|
|
||||||
<button id="finishBtn" >Finish</button>
|
|
||||||
</div>
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
import { createContext } from "react";
|
|
||||||
|
|
||||||
export default createContext();
|
|
||||||
116
src/homepage.css
116
src/homepage.css
|
|
@ -1,116 +0,0 @@
|
||||||
@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
|
|
||||||
div {
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
color: white ;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: #8f8f8f;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Headings */
|
|
||||||
|
|
||||||
.big-heading {
|
|
||||||
font-family: "Montserrat-Black";
|
|
||||||
font-size: 3.5rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-heading {
|
|
||||||
font-size: 3rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
.container-fluid{
|
|
||||||
padding: 7% 15%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment{
|
|
||||||
padding-bottom: 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submit{
|
|
||||||
margin-top: 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.loginb {
|
|
||||||
margin: 5% 3% 5% 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Title Section */
|
|
||||||
|
|
||||||
#title {
|
|
||||||
background-color: #66bfbf;
|
|
||||||
color: #fff;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#title .container-fluid {
|
|
||||||
padding: 3% 15% 7%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Title Image */
|
|
||||||
|
|
||||||
.title-image {
|
|
||||||
width: 70%;
|
|
||||||
position: absolute;
|
|
||||||
right: 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Features Section */
|
|
||||||
|
|
||||||
#features {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.icon:hover {
|
|
||||||
color: #66bfbf;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Testimonial Section */
|
|
||||||
|
|
||||||
#testimonials {
|
|
||||||
background-color: #66bfbf;
|
|
||||||
}
|
|
||||||
|
|
||||||
.testimonial-text {
|
|
||||||
font-size: 3rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.testimonial-image {
|
|
||||||
width: 20%;
|
|
||||||
border-radius: 100%;
|
|
||||||
margin: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 1028px) {
|
|
||||||
|
|
||||||
#title {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-image {
|
|
||||||
position: static;
|
|
||||||
transform: rotate(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
|
|
||||||
@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: "Roboto", sans-serif;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mr-20 {
|
|
||||||
margin-right: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import ReactDOM from 'react-dom';
|
|
||||||
import App from './App';
|
|
||||||
|
|
||||||
ReactDOM.render(<App />,document.getElementById('root'));
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,178 +0,0 @@
|
||||||
@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
|
|
||||||
.Apper {
|
|
||||||
}
|
|
||||||
|
|
||||||
.Apper__Aside {
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.Apper__Form {
|
|
||||||
width: 50%;
|
|
||||||
background-color: #ffffff;
|
|
||||||
padding: 25px 40px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PageSwitcher {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-bottom: 10%;
|
|
||||||
}
|
|
||||||
.Apper_heading{
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
font-family: Ubuntu;
|
|
||||||
font-size: 5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #ffffff;
|
|
||||||
text-decoration: none;
|
|
||||||
text-transform: lowercase;
|
|
||||||
}
|
|
||||||
.Apper_logo img{
|
|
||||||
width:100px;
|
|
||||||
display:flex;
|
|
||||||
margin-bottom: 50px;
|
|
||||||
align-content: flex-start;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.Apper__Aside__text {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 25%;
|
|
||||||
|
|
||||||
}
|
|
||||||
.Apper_quote{
|
|
||||||
color:white;
|
|
||||||
font-size: 1.25em;
|
|
||||||
font-style:italic;
|
|
||||||
}
|
|
||||||
.Apper__Aside_image{
|
|
||||||
margin-top: 600px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
background-size: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PageSwitcher__Item {
|
|
||||||
background-color: #4C5D72;
|
|
||||||
color: white;
|
|
||||||
padding: 10px 25px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: .9em;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
display: inline-block;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PageSwitcher__Item--Active {
|
|
||||||
background-color: #66bfbf;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PageSwitcher__Item:first-child {
|
|
||||||
border-top-left-radius: 25px;
|
|
||||||
border-bottom-left-radius: 25px;
|
|
||||||
}
|
|
||||||
.PageSwitcher__Item:last-child {
|
|
||||||
border-top-right-radius: 25px;
|
|
||||||
border-bottom-right-radius: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FormCenter {
|
|
||||||
margin-bottom: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FormTitle {
|
|
||||||
color: #000000;
|
|
||||||
font-weight: 300;
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FormTitle__Link {
|
|
||||||
color: #707C8B;
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 1.7em;
|
|
||||||
margin: 0 10px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FormTitle__Link:first-child {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FormTitle__Link--Active {
|
|
||||||
color: #707c8b;
|
|
||||||
border-bottom: 1px solid #199087;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FormField {
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FormField__Label {
|
|
||||||
display: block;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 1.25em;
|
|
||||||
color: #4C5D72;
|
|
||||||
text-align: start;
|
|
||||||
|
|
||||||
}
|
|
||||||
.FormField__Input {
|
|
||||||
width: 85%;
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
color: #4C5D72;
|
|
||||||
outline: none;
|
|
||||||
border-bottom: 1px solid #445366;
|
|
||||||
font-size: .9em;
|
|
||||||
font-weight: 300;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FormField__Input::placeholder {
|
|
||||||
color: #616E7F;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FormField__Button {
|
|
||||||
background-color: #52C4B9;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
border-radius: 25px;
|
|
||||||
padding: 15px 70px;
|
|
||||||
font-size: .8em;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FormField__Link {
|
|
||||||
color: #66707D;
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FormField__CheckboxLabel {
|
|
||||||
color: #646F7D;
|
|
||||||
font-size: .9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FormField__Checkbox {
|
|
||||||
position: relative;
|
|
||||||
top: 1.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FormField__TermsLink {
|
|
||||||
color: #646F7D;
|
|
||||||
border-bottom: 1px solid #199087;
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
padding-bottom: 2px;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,92 +0,0 @@
|
||||||
* {
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
header{
|
|
||||||
background: #66bfbf;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
transition: 0.6s;
|
|
||||||
padding: 10px 15px;
|
|
||||||
z-index: 100000;
|
|
||||||
font-family: Ubuntu;
|
|
||||||
|
|
||||||
}
|
|
||||||
header.sticky{
|
|
||||||
|
|
||||||
padding: 3px 50px;
|
|
||||||
background: #66bfbf;
|
|
||||||
opacity: 0.85;
|
|
||||||
}
|
|
||||||
header .logo{
|
|
||||||
font-family: "Ubuntu";
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: bold;
|
|
||||||
position: relative;
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
text-transform: lowercase;
|
|
||||||
padding-left: 100px;
|
|
||||||
transition: 0.6s;
|
|
||||||
}
|
|
||||||
header ul {
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
}
|
|
||||||
header ul li {
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
header ul li a {
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
header ul li a {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
left:0;
|
|
||||||
bottom: 0;
|
|
||||||
height: 5px;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
header.sticky ul li a{
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
}
|
|
||||||
.checkbtn
|
|
||||||
{
|
|
||||||
color:white;
|
|
||||||
font-size: 30px;
|
|
||||||
float:right;
|
|
||||||
line-height: 80px;
|
|
||||||
margin-right: 40px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
#check{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
#stepProgressBar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-end;
|
|
||||||
width: 300px;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-text {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #28a745;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bullet {
|
|
||||||
border: 1px solid #28a745;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
border-radius: 100%;
|
|
||||||
color: #28a745;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
transition: background-color 500ms;
|
|
||||||
line-height:20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bullet.completed {
|
|
||||||
color: white;
|
|
||||||
background-color: #28a745;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.bullet.completed::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
right: -60px;
|
|
||||||
bottom: 10px;
|
|
||||||
height: 1px;
|
|
||||||
width: 54px;
|
|
||||||
background-color: #28a745;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Base styles and helper stuff */
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
padding: 5px 10px;
|
|
||||||
border: 1px solid black;
|
|
||||||
transition: 250ms background-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: black;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:disabled:hover {
|
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
.pricing-plan-container
|
|
||||||
{
|
|
||||||
|
|
||||||
}
|
|
||||||
.pricing-plan {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-plan:hover .pricing-plan:active {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-plan__header{
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
.pricing-plan__special-text {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-plan__title,.pricing-plan__summary{
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-plan__title{
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-plan__summary {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-plan__desc {
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-plan__list {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-plan__feature {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-plan__feature:not(:last-child) {
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
.pricing-plan__feature::before {
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-plan__actions {
|
|
||||||
|
|
||||||
}
|
|
||||||
.pricing-plan__button {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-plan__button:hover{
|
|
||||||
}
|
|
||||||
.pricing-plan__cost{
|
|
||||||
|
|
||||||
}
|
|
||||||
.pricing-plan__text {
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-plan-container{
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
const reportWebVitals = onPerfEntry => {
|
|
||||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
|
||||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
|
||||||
getCLS(onPerfEntry);
|
|
||||||
getFID(onPerfEntry);
|
|
||||||
getFCP(onPerfEntry);
|
|
||||||
getLCP(onPerfEntry);
|
|
||||||
getTTFB(onPerfEntry);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default reportWebVitals;
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
|
||||||
// allows you to do things like:
|
|
||||||
// expect(element).toHaveTextContent(/react/i)
|
|
||||||
// learn more: https://github.com/testing-library/jest-dom
|
|
||||||
import '@testing-library/jest-dom';
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
*, *:after, *:before { margin:0; padding:0; }
|
|
||||||
body {
|
|
||||||
font-family: Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="button"] {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.container{
|
|
||||||
margin-left:0px;
|
|
||||||
max-width: 100vw;
|
|
||||||
}
|
|
||||||
.relocheading{
|
|
||||||
font-family: Ubuntu;
|
|
||||||
text-align: left;
|
|
||||||
color: #66bfbf !important;
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
ul{
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
.node {
|
|
||||||
height: 12px;
|
|
||||||
width: 12px;
|
|
||||||
border-radius: 100%;
|
|
||||||
display:inline-block;
|
|
||||||
transition: all 1000ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.activated {
|
|
||||||
box-shadow: 0px 0px 0px 0px rgba(194, 255, 194, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
height: 86px;
|
|
||||||
width: 2px;
|
|
||||||
margin-left: 4px;
|
|
||||||
transition: all 800ms ease;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin-bottom: 0rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
li p {
|
|
||||||
display:inline-block;
|
|
||||||
margin-left: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style: none;
|
|
||||||
line-height: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.blue { background-color: rgba(82, 165, 255, 1); }
|
|
||||||
.green{ background-color: rgba(92, 184, 92, 1) }
|
|
||||||
.red { background-color: rgba(255, 148, 148, 1); }
|
|
||||||
.grey { background-color: rgba(201, 201, 201, 1); }
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
*, *:after, *:before { margin:0; padding:0; }
|
|
||||||
.wrapper{
|
|
||||||
max-width: 400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 40px;
|
|
||||||
|
|
||||||
}
|
|
||||||
.stepProgressBar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
width: 300px;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
li{
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
.node {
|
|
||||||
border: 1px solid #28a745;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
border-radius: 100%;
|
|
||||||
color: #28a745;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
transition: background-color 500ms;
|
|
||||||
line-height:20px;
|
|
||||||
}
|
|
||||||
.node.completed {
|
|
||||||
content: "";
|
|
||||||
color: white;
|
|
||||||
background-color: #28a745;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node.completed::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
height: 1px;
|
|
||||||
width: 54px;
|
|
||||||
background-color: #28a745;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider.completed::after{
|
|
||||||
list-style-type: none;
|
|
||||||
background-color: grey;
|
|
||||||
position: relative;
|
|
||||||
height: 80px;
|
|
||||||
width: 2px;
|
|
||||||
margin-left: 134px;
|
|
||||||
transition: all 800ms ease;
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue