Add maintence banner in the top of the page

src/App.js

@@ -52,6 +52,7 @@ import CollectionPage from "./Pages/CollectionPage.js";
 import FormationMaterialPage from "./Pages/FormationMaterialPage.js";
 import FormationMaterialIframe from "./Pages/FormationMaterialIframe.js";
 import MaterialPage from "./Pages/MaterialPage";
+import Maintence from './Components/maintenance'
 
 import NoteVariables from "./Admin/Pages/Pages/SubPages/NoteVariables";
 import Institution from "./Admin/Pages/Pages/SubPages/Institutions";
@@ -92,6 +93,7 @@ import EditRole from "./Admin/Components/Components/Inputs/EditRoles";
 import CreateRole from "./Admin/Components/Components/Inputs/CreateRole";
 import BlockedUser from "./Admin/Pages/Pages/SubPages/BlockedUsers";
 import AppBarAdmin from './Admin/Components/Components/AppBar'
+import Maintenance from "./Components/maintenance";
 
 export default function App() {
   // eslint-disable-next-line
@@ -147,6 +149,7 @@ export default function App() {
 
   return (
     <BrowserRouter basename="/react">
+      <Maintenance />
       <Header />
       <div
         style={{

src/Components/maintenance.js

+import React from 'react'
+import styled from 'styled-components'
+
+export default function Maintenance() {
+  return (
+    <MaintenanceDiv>
+      Estamos em manuntenção. Em breve voltaremos!
+    </MaintenanceDiv>
+  )
+}
+
+const MaintenanceDiv = styled.div`
+  z-index: 1000;
+  position: fixed;
+  color:white;
+  background-color: red; 
+  text-align: center;
+  width: 100%;
+`
\ No newline at end of file