| import React from "react"; |
| import Head from "next/head"; |
| import { useRouter } from "next/router"; |
| import { Button, Text, Title } from "@mantine/core"; |
| import styled from "styled-components"; |
| import Layout from "src/layout/Layout"; |
|
|
| const StyledNotFound = styled.div` |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| flex-direction: column; |
| margin-top: 0 40px; |
| text-align: center; |
| `; |
|
|
| const StyledMessage = styled.h4` |
| color: ${({ theme }) => theme.FULL_WHITE}; |
| font-size: 25px; |
| font-weight: 800; |
| margin: 10px 0; |
| `; |
|
|
| const StyledSubMessage = styled.div` |
| width: 50%; |
| color: ${({ theme }) => theme.SILVER}; |
| margin-bottom: 25px; |
| `; |
|
|
| const StyledImageWrapper = styled.div` |
| width: 300px; |
| `; |
|
|
| const NotFound: React.FC = () => { |
| const router = useRouter(); |
|
|
| return ( |
| <Layout> |
| <Head> |
| <meta name="robots" content="noindex,nofollow" /> |
| </Head> |
| <StyledNotFound> |
| <StyledImageWrapper> |
| <img src="/assets/404.svg" alt="not found" width={300} height={400} /> |
| </StyledImageWrapper> |
| <Title c="dark">WIZARDS BEHIND CURTAINS?</Title> |
| <Text c="dark">Looks like you're lost, let's head back to the home!</Text> |
| <Button mt="lg" size="lg" type="button" onClick={() => router.push("/")}> |
| Go Home |
| </Button> |
| </StyledNotFound> |
| </Layout> |
| ); |
| }; |
|
|
| export default NotFound; |
|
|
