Created the Error.jsx state

src/states/Error/Error.jsx

@@ -0,0 +1,28 @@
+import {Box, Button, Stack, Typography, useMediaQuery, useTheme} from "@mui/material";
+import ServerDown from "@/common/assets/images/error/server_down.svg";
+import {OpenInNew} from "@mui/icons-material";
+
+export const Error = () => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("lg"));
+
+    return (
+        <Stack direction="row" alignItems="center" justifyContent="center" sx={{height: "100vh"}} gap={5} p={3}>
+            <Stack direction="column" justifyContent="center" sx={{width: "30rem"}} gap={2}>
+                <Typography variant="h2" fontWeight={700}>Oh nein..</Typography>
+                <Typography variant="h4" fontWeight={500}>Unser Backend ist derzeit nicht erreichbar.</Typography>
+
+                <Typography variant="h5" fontWeight={500}>
+                    Die Seite wird automatisch neu geladen, sobald das Backend wieder erreichbar ist.
+                </Typography>
+
+                <Box>
+                    <Button variant="outlined" color="primary" startIcon={<OpenInNew/>}
+                            href="https://status.licenseapi.de" target="_blank">Zur Statusseite</Button>
+                </Box>
+            </Stack>
+
+            {!isMobile && <img src={ServerDown} alt="Imprint" height={350}/>}
+        </Stack>
+    )
+}