Frikky
139 lines
4.2 KiB
React
139 lines
4.2 KiB
React
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Button, Typography } from '@mui/material';
|
|
import theme from "../theme.jsx";
|
|
|
|
const NotFound = () => {
|
|
const navigate = useNavigate();
|
|
|
|
const buttonStyle = {
|
|
borderRadius: 25,
|
|
height: 50,
|
|
fontSize: 18,
|
|
width: "100%",
|
|
marginBottom: "10px",
|
|
};
|
|
|
|
const primaryButtonStyle = {
|
|
...buttonStyle,
|
|
background: "linear-gradient(89.83deg, #FF8444 0.13%, #F2643B 99.84%)",
|
|
color: "white",
|
|
'&:hover': {
|
|
background: "linear-gradient(89.83deg, #FF8444 0.13%, #F2643B 99.84%)",
|
|
opacity: 0.9,
|
|
}
|
|
};
|
|
|
|
const secondaryButtonStyle = {
|
|
...buttonStyle,
|
|
background: "#383B40",
|
|
border: "1px solid #494949",
|
|
color: "white",
|
|
'&:hover': {
|
|
background: "#434649",
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={{paddingTop: 100, }} className="min-h-screen bg-[#1A1A1A] flex items-center justify-center">
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
maxWidth: "532px",
|
|
background: "#212121",
|
|
borderRadius: "8px",
|
|
padding: "40px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
textAlign: "center",
|
|
justifySelf: "center",
|
|
}}
|
|
>
|
|
<img
|
|
src="/images/logos/orange_logo.svg"
|
|
alt="Shuffle Logo"
|
|
style={{
|
|
height: 44,
|
|
width: 44,
|
|
marginBottom: 10,
|
|
}}
|
|
/>
|
|
|
|
<Typography
|
|
variant="h1"
|
|
style={{
|
|
fontSize: "72px",
|
|
fontWeight: 900,
|
|
background: "linear-gradient(89.83deg, #FF8444 0.13%, #F2643B 99.84%)",
|
|
WebkitBackgroundClip: "text",
|
|
WebkitTextFillColor: "transparent",
|
|
marginBottom: "10px",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
404
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="h4"
|
|
style={{
|
|
color: "white",
|
|
marginBottom: "8px",
|
|
fontWeight: 600,
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
Page Not Found
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="body1"
|
|
style={{
|
|
color: "#9E9E9E",
|
|
marginBottom: "32px",
|
|
fontSize: "16px",
|
|
textAlign: "center",
|
|
maxWidth: "400px",
|
|
}}
|
|
>
|
|
Our code doggo couldn't find the page you were looking for.
|
|
</Typography>
|
|
|
|
<iframe
|
|
src="https://giphy.com/embed/FY8c5SKwiNf1EtZKGs"
|
|
width="125"
|
|
height="165"
|
|
frameBorder="0"
|
|
className="giphy-embed"
|
|
allowFullScreen
|
|
style={{
|
|
marginBottom: 32,
|
|
borderRadius: theme.palette.borderRadius,
|
|
}}
|
|
/>
|
|
|
|
<div style={{ width: "100%", maxWidth: "400px" }}>
|
|
<Button
|
|
variant="contained"
|
|
onClick={() => navigate('/docs')}
|
|
sx={primaryButtonStyle}
|
|
>
|
|
Documentation
|
|
</Button>
|
|
|
|
<Button
|
|
variant="contained"
|
|
onClick={() => navigate('/')}
|
|
sx={secondaryButtonStyle}
|
|
>
|
|
Return Home
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NotFound;
|