import React from 'react';
import Navbar from "./Navbar";
import {Link} from "react-router-dom";

const background = require('../assets/background.png')

function NotFound(props) {
	return (
			<div className="w-screen h-screen overflow-x-hidden bg-cover bg-center text-white flex items-center flex-col"
			     style={{backgroundImage: `url(${background})`}}>
				<Navbar history={props.history}/>
				<div className="flex flex-col lg:max-w-full sm:max-w-xl text-center justify-center
												lg:px-0 md:mt-32 sm:mt-20 mt-16 px-4">

					<h1 className="md:text-3xl sm:text-2xl text-xl font-bold">
						The page you requested was not found. <br/>
						Please confirm your URL or go back to the home page.
					</h1>

					<Link to="/">
						<div className="rounded-full bg-blue-600 inline-block mt-4 sm:py-3 py-3 sm:px-8 px-4">Go Home</div>
					</Link>
				</div>
			</div>
	);
}

export default NotFound;