116 lines
2.4 KiB
TypeScript
116 lines
2.4 KiB
TypeScript
import React from "react";
|
||
import { Box, Typography, Button, Card, Grid } from "@mui/material";
|
||
import ElectricCarIcon from "@mui/icons-material/ElectricCar";
|
||
import { keyframes } from "@emotion/react";
|
||
|
||
// Animation for the car icon
|
||
const pulse = keyframes`
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
transform: scale(1.1);
|
||
}
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
`;
|
||
|
||
const NotFoundPage = () => {
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
flexDirection: "column",
|
||
height: "100vh",
|
||
background:
|
||
"linear-gradient(135deg,rgb(12, 14, 15),rgb(10, 10, 10))",
|
||
padding: 2,
|
||
}}
|
||
>
|
||
<Card
|
||
sx={{
|
||
backgroundColor: "#272727",
|
||
padding: "40px",
|
||
borderRadius: "20px",
|
||
boxShadow: "0 8px 24px rgba(0, 0, 0, 0.7)",
|
||
textAlign: "center",
|
||
maxWidth: "500px",
|
||
width: "100%",
|
||
color: "#E0E0E0",
|
||
animation: `${pulse} 1.5s infinite`,
|
||
}}
|
||
>
|
||
<ElectricCarIcon
|
||
sx={{
|
||
fontSize: 100,
|
||
color: "#52ACDF",
|
||
marginBottom: 2,
|
||
}}
|
||
/>
|
||
<Typography
|
||
variant="h3"
|
||
sx={{ fontWeight: 700, color: "#FFFFFF", marginBottom: 1 }}
|
||
>
|
||
404
|
||
</Typography>
|
||
<Typography
|
||
variant="h5"
|
||
sx={{ fontWeight: 500, color: "#FFFFFF", marginBottom: 3 }}
|
||
>
|
||
Oops! Page Not Found
|
||
</Typography>
|
||
<Typography
|
||
variant="body2"
|
||
sx={{ color: "#B0B0B0", marginBottom: 4 }}
|
||
>
|
||
The path you’re looking for seems to be off the grid. Maybe
|
||
the charging station is offline? ⚡
|
||
</Typography>
|
||
|
||
<Grid container spacing={2} justifyContent="center">
|
||
<Grid item>
|
||
<Button
|
||
variant="contained"
|
||
sx={{
|
||
backgroundColor: "#52ACDF",
|
||
color: "#FFFFFF",
|
||
padding: "12px 32px",
|
||
"&:hover": {
|
||
backgroundColor: "#52ACDF",
|
||
opacity: 0.9,
|
||
},
|
||
fontWeight: 600,
|
||
}}
|
||
onClick={() => (window.location.href = "/")}
|
||
>
|
||
Back to Login
|
||
</Button>
|
||
</Grid>
|
||
<Grid item>
|
||
<Button
|
||
variant="outlined"
|
||
sx={{
|
||
borderColor: "#52ACDF",
|
||
color: "#52ACDF",
|
||
padding: "12px 32px",
|
||
"&:hover": {
|
||
backgroundColor: "#52ACDF",
|
||
color: "#FFFFFF",
|
||
},
|
||
}}
|
||
onClick={() => window.history.back()}
|
||
>
|
||
Go Back
|
||
</Button>
|
||
</Grid>
|
||
</Grid>
|
||
</Card>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default NotFoundPage;
|