| 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; | |