Added 404 page

2024-12-02 18:35:28 +01:00
parent 022c3ae552
commit d936cc0b35
8 changed files with 307 additions and 121 deletions
@@ -0,0 +1,138 @@
+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;