12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- import Header from "../components/Header";
- import Footer from "../components/Footer";
- import Breadcrumbs from "../components/Breadcrumbs";
- import imgUrl from "../img/not found/1.png"
- import {Box, Container, Typography, useMediaQuery} from "@mui/material";
- const Page404 = () => {
- const matches = useMediaQuery('(max-width:899px)');
- const matches2 = useMediaQuery('(max-width:450px)');
- return (
- <>
- <Header/>
- <Breadcrumbs links={['404 page']} title={'PAGE NOT FOUND'}/>
- <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
- <Container maxWidth="lg">
- <Box sx={{
- backgroundColor: "#fff",
- height: matches2 ? "250px" : "350px",
- display: "flex",
- flexDirection: "column",
- justifyContent: "center",
- alignItems: "center"
- }}>
- <img style={{
- maxWidth: matches2 ? "100px" : "150px"
- }} src={imgUrl} alt="PAGE NOT FOUND"/>
- <Typography
- variant={matches2 ? "h6" : "h5"}
- fontFamily="sarif"
- fontWeight="300"
- marginBottom="20px"
- marginTop="20px"
- textAlign="center"
- >
- OOPS! THAT PAGE CAN’T BE FOUND
- </Typography>
- <Typography
- variant={matches2 ? "body1" : "h7"}
- textAlign="center"
- fontWeight="300"
- >
- The page you are trying to reach is not available.
- </Typography>
- </Box>
- </Container>
- </main>
- <Footer/>
- </>
- )
- }
- export default Page404
|