error page added

src/App.js

@@ -17,6 +17,7 @@ import ContactUs from "./pages/ContactUs";
 import Recovery from "./pages/Recovery";
 import Profile from "./pages/Profile";
 import SuccessPage from "./pages/SuccessPage";
+import ErrorPage from "./pages/ErrorPage";
 
 // IMPORT PAGES
 import Main from "./pages/Main";
@@ -63,6 +64,7 @@ const App = () => {
           <Route path="/home/recovery" element={<Home ChildEl={Recovery} />} />
           <Route path="/home/profile" element={<Home ChildEl={Profile} />} />
           <Route path="/success" element={<SuccessPage />} />
+          <Route path="/error" element={<ErrorPage />} />
         </Routes>
       </div>
     </UserContext.Provider>

src/components/global/Error.js

@@ -0,0 +1,18 @@
+// IMPORT MODULES
+import React from "react";
+
+// IMPORT IMAGES
+import error from "../../images/error-cross.png";
+
+const Error = ({ message }) => {
+  return (
+    <div className="success error">
+      <div className="wrapper">
+        <img src={error} alt="error" />
+      </div>
+      <h1>{message}</h1>
+    </div>
+  );
+};
+
+export default Error;

src/pages/ErrorPage.js

@@ -0,0 +1,22 @@
+// IMPORT MODULES
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+// IMPORT COMPONENTS
+import Error from "../components/global/Error";
+
+const ErrorPage = () => {
+  const navigate = useNavigate();
+  useEffect(() => {
+    setTimeout(() => {
+      navigate("/home");
+    }, 1900);
+  }, []);
+  return (
+    <section className="success-page">
+      <Error message={"Не удалось отправить запрос"} />
+    </section>
+  );
+};
+
+export default ErrorPage;

src/styles/_recovery.scss

@@ -89,8 +89,38 @@
 }
 
 .success {
-  color: $base-green;
-  font-size: 2.2rem;
+  h1 {
+    color: $base-green;
+    font-size: 2.2rem;
+  }
+
+  &.error {
+    .wrapper {
+      animation: fade-in 2s infinite ease;
+      width: 9.6rem;
+      height: 9.6rem;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    h1 {
+      color: rgb(222, 41, 38);
+    }
+  }
+}
+
+// ANIMO
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(5rem);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0rem);
+  }
 }
 
 // MEDIA