feat: Added Route Not Found

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import { CompaniesList } from "./pages/CompaniesList";
 import { CreateCompany } from "./pages/CreateCompany";
 import { UpdateCompany } from "./pages/UpdateCompany";
 import { ForgotPassword } from "./pages/ForgotPassword";
+import { NotFound } from "./pages/NotFound";
 import { Login } from "./pages/Login";
 import "./styles.css";
 
@@ -19,6 +20,7 @@ const Layout: FC = () => {
         <Route path="/companies" element={<CompaniesList />} />
         <Route path="/companies/new" element={<CreateCompany />} />
         <Route path="/companies/:id" element={<UpdateCompany />} />
+        <Route path="*" element={<NotFound />} />
       </Routes>
       <Footer />
     </AntLayout>

frontend/src/pages/NotFound/index.tsx

@@ -0,0 +1,57 @@
+import { Layout, Typography } from "antd";
+import { FC, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button } from "../../components/Button";
+import { ACCESS_TOKEN_KEY } from "../../config";
+import "./styles.css";
+
+export const NotFound: FC = () => {
+  const navigate = useNavigate();
+
+  const [isUserLogged, setIsUserLogged] = useState<boolean>(false);
+
+  const [animateParagraph, setAnimateParagraph] = useState<boolean>(false);
+  const [animateButton, setAnimateButton] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsUserLogged(localStorage[ACCESS_TOKEN_KEY] ? true : false);
+
+    setTimeout(() => {
+      setAnimateParagraph(true);
+
+      setTimeout(() => {
+        setAnimateButton(true);
+      }, 800);
+    }, 800);
+  }, []);
+
+  const handleRedirect = () => navigate(isUserLogged ? "/companies" : "/");
+
+  return (
+    <Layout.Content className="content">
+      <div className="container">
+        <Typography.Title className="title element-animation">
+          Ups, parece que andas perdido.
+        </Typography.Title>
+        <Typography.Paragraph
+          className={
+            animateParagraph ? "element-animation paragraph" : "paragraph"
+          }
+        >
+          Mas não te preocupes, nós ajudamos-te a voltar ao caminho certo.
+        </Typography.Paragraph>
+
+        {animateButton && (
+          <div className="element-animation">
+            <Button
+              htmlType="button"
+              styles={{ width: "100px", height: "40px" }}
+              onClick={handleRedirect}
+              children="Voltar"
+            />
+          </div>
+        )}
+      </div>
+    </Layout.Content>
+  );
+};

frontend/src/pages/NotFound/styles.css

@@ -0,0 +1,34 @@
+.container {
+  background-color: #ffffff !important;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-top: 24%;
+}
+
+.title {
+  font-size: 2.5rem !important;
+  font-weight: 700;
+}
+
+.paragraph {
+  font-size: 1.1rem;
+  font-weight: 500;
+  opacity: 0;
+}
+
+.element-animation {
+  animation: renderTextAnimation 1s ease-in-out;
+  opacity: 1;
+}
+
+@keyframes renderTextAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}