41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import Container from "components/Container";
|
|
import { Button } from "components/Button/Button";
|
|
import Link from "components/typography/Link";
|
|
|
|
import Lottie from "react-lottie";
|
|
import animationData from "../../assets/lotties/notFoundAnimation.json";
|
|
|
|
const NotFound = () => {
|
|
const defaultOptions = {
|
|
loop: true,
|
|
autoplay: true,
|
|
animationData: animationData,
|
|
rendererSettings: {
|
|
preserveAspectRatio: "xMidYMid slice",
|
|
},
|
|
};
|
|
|
|
return (
|
|
<Container
|
|
variant="straight"
|
|
className="flex flex-col items-center justify-center
|
|
font-serif h-screen my-auto
|
|
"
|
|
>
|
|
<Lottie options={defaultOptions} height={200} width={200} />
|
|
<span className="font-bold text-5xl ">404</span>
|
|
<h3 className="font-bold text-2xl text-center">Page does not exist</h3>
|
|
<h4 className="text-center">
|
|
Maybe you got a broken link, or maybe you made a misprint in the address
|
|
bar
|
|
</h4>
|
|
<Button className="my-4">
|
|
<Link to="/">Go to home</Link>
|
|
</Button>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default NotFound;
|