FinalProject/src/pages/404Page.jsx

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 (
        <>
            <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>
        </>
    )
}

export default Page404