import React from "react";
import Container from "components/Container";
import { Button } from "components/Button/Button";
import Link from "components/typography/Link";

const NotFound = () => {
  return (
    <Container
      variant="straight"
      className="flex flex-col items-center justify-center 
      font-serif h-screen my-auto
      "
    >
      <div
        className="bg-[url('https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif')] 
        h-[450px]
        w-full text-center text-7xl "
      >
        404
      </div>
      <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;