import { Footer } from '../components/footer';
import { NavBar } from '../components/navbar';
import { CenteredPage, PageTitle } from '../components/page';
import { IconLabelButton, Vierkant } from '../components/ui';

import HomeIcon from '@material-ui/icons/Home';

export default function FourOhFourPage() {
	return <div>
		<NavBar />
		<CenteredPage width={802}>
			<PageTitle>404</PageTitle>
			<Vierkant className='w100m2m pad-l bg-800 center messagePage'>
				<svg
					className='harry'
					width='24'
					height='24'
					viewBox='0 0 24 24'
					fill='none'
					xmlns='http://www.w3.org/2000/svg'
				>
					<path
						d='M11.0001 15.5003C11.0002 14.9774 11.1702 14.6194 11.3949 14.3946C11.6197 14.1698 11.9775 14 12.5001 14C13.04 14 13.571 14.1833 13.9483 14.4769C14.3149 14.7619 14.5 15.1144 14.5001 15.5003C14.5002 16.0227 14.3303 16.3806 14.1055 16.6053C13.8807 16.8301 13.5226 17 13.0001 17C12.4601 17 11.9289 16.8166 11.5514 16.5231C11.1848 16.238 11 15.8857 11.0001 15.5003Z'
						fill='var(--foreground)'
					/>
					<path
						fill-rule='evenodd'
						clip-rule='evenodd'
						d='M16.0247 2.97633L15.3785 2.38399C13.4669 0.631648 10.5328 0.631649 8.62122 2.38399L7.97503 2.97633C7.82993 3.10935 7.64879 3.19658 7.45432 3.22709L6.58832 3.36298C4.02641 3.76497 2.19705 6.05892 2.37521 8.64605L2.43543 9.52058C2.44896 9.71696 2.40422 9.91297 2.30683 10.084L1.87313 10.8458C0.590097 13.0994 1.24299 15.96 3.37677 17.4337L4.09805 17.9319C4.26002 18.0437 4.38537 18.2009 4.45839 18.3837L4.78358 19.1978C5.74557 21.606 8.38908 22.8791 10.8717 22.1297L11.7109 21.8764C11.8993 21.8195 12.1004 21.8195 12.2888 21.8764L13.128 22.1297C15.6107 22.8791 18.2542 21.606 19.2162 19.1978L19.5413 18.3837C19.6144 18.2009 19.7397 18.0437 19.9017 17.9319L20.623 17.4337C22.7567 15.96 23.4096 13.0994 22.1266 10.8458L21.6929 10.084C21.5955 9.91297 21.5508 9.71696 21.5643 9.52058L21.6245 8.64605C21.8027 6.05892 19.9733 3.76497 17.4114 3.36298L16.5454 3.22709C16.3509 3.19658 16.1698 3.10935 16.0247 2.97633ZM13.0001 7C13.0001 6.44772 12.5523 6 12.0001 6C11.4478 6 11.0001 6.44772 11.0001 7C11.0001 7.6399 11.1544 8.3754 11.3639 9.00373C11.5621 9.59854 11.8713 10.2855 12.293 10.7071C12.6835 11.0976 13.3166 11.0976 13.7072 10.7071C14.0977 10.3166 14.0977 9.68342 13.7072 9.29289C13.6288 9.21453 13.438 8.90146 13.2612 8.37127C13.0957 7.8746 13.0001 7.3601 13.0001 7ZM9.00006 8C9.00006 7.44772 8.55235 7 8.00006 7C7.44778 7 7.00006 7.44772 7.00006 8C7.00006 9.71426 7.57222 10.9864 8.29295 11.7071C8.68348 12.0976 9.31664 12.0976 9.70717 11.7071C10.0977 11.3166 10.0977 10.6834 9.70717 10.2929C9.4279 10.0136 9.00006 9.28575 9.00006 8ZM12.5001 12C11.5229 12 10.6309 12.3302 9.98071 12.9804C9.33051 13.6306 9.00031 14.5226 9.00006 15.4997C8.99977 16.6143 9.56513 17.512 10.3237 18.1019C11.0714 18.6834 12.0404 19 13.0001 19C13.9771 19 14.8693 18.6699 15.5196 18.0197C16.17 17.3694 16.5003 16.4773 16.5001 15.4997C16.4998 14.3856 15.9347 13.4881 15.1762 12.8982C14.4286 12.3167 13.4598 12 12.5001 12Z'
						fill='var(--foreground)'
					/>
				</svg>
				<p>De pagina die je probeert te bezoeken bestaat niet</p>
				<IconLabelButton href='/' text='Terug naar homepagina' icon={<HomeIcon />} />
			</Vierkant>
		</CenteredPage>
		<Footer />
	</div>;
}