2020-12-14 07:09:59 -08:00
|
|
|
import React from 'react';
|
2021-01-24 09:46:44 -08:00
|
|
|
import { Link } from 'react-router-dom'
|
2020-12-16 07:31:17 -08:00
|
|
|
import styled from 'styled-components';
|
2021-01-25 00:22:44 -08:00
|
|
|
import Lottie from 'react-lottie';
|
|
|
|
|
import animationData from '../lottie/box_error';
|
2020-12-16 07:31:17 -08:00
|
|
|
|
|
|
|
|
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;
|
2021-01-25 00:22:44 -08:00
|
|
|
display:flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
2020-12-16 07:31:17 -08:00
|
|
|
`;
|
2021-01-25 00:22:44 -08:00
|
|
|
const Container = styled.div`
|
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
background-color: #66bfbf;
|
2020-12-16 07:31:17 -08:00
|
|
|
text-align: center;
|
2021-01-25 00:22:44 -08:00
|
|
|
|
2020-12-16 07:31:17 -08:00
|
|
|
|
2021-01-24 09:46:44 -08:00
|
|
|
`;
|
2021-01-25 00:22:44 -08:00
|
|
|
const Heading = styled.h1`
|
|
|
|
|
padding-top: 15%;
|
|
|
|
|
color: white;
|
|
|
|
|
font-size: 4rem;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
const defaultOptions = {
|
|
|
|
|
loop: true,
|
|
|
|
|
autoplay: true,
|
|
|
|
|
animationData: animationData,
|
|
|
|
|
rendererSettings: {
|
|
|
|
|
preserveAspectRatio: "xMidYMid slice"
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2020-12-14 07:09:59 -08:00
|
|
|
const Error404 = () => {
|
2021-01-24 09:46:44 -08:00
|
|
|
return (
|
|
|
|
|
<Body>
|
2021-01-25 00:22:44 -08:00
|
|
|
<Container>
|
|
|
|
|
<Heading>Error </Heading>
|
|
|
|
|
<br />
|
|
|
|
|
<Lottie height={500} width={500} options={defaultOptions} />
|
|
|
|
|
</Container>
|
2021-01-24 09:46:44 -08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</Body>
|
2020-12-16 07:31:17 -08:00
|
|
|
|
2020-12-14 07:09:59 -08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-01-24 09:46:44 -08:00
|
|
|
);
|
2020-12-14 07:09:59 -08:00
|
|
|
}
|
|
|
|
|
export default Error404;
|
