Add maintenance screen

src/app/[locale]/maintenance/page.module.css

@@ -1,3 +1,4 @@
 .main {
   min-height: 100vh;
+  margin-top: 30vh;
 }

src/app/[locale]/maintenance/page.tsx

@@ -1,18 +1,56 @@
 "use client";
 
 import { useI18n } from "@/i18n/client";
+import { Flex, Text } from "@ledgerhq/react-ui";
+import { CloseMedium } from "@ledgerhq/react-ui/assets/icons";
+import styled from "styled-components";
 import styles from "./page.module.css";
 
-export default function Home() {
+const LogoContainer = styled(Flex)`
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(p) => p.theme.colors.error.c50};
+  height: 50px;
+  width: 50px;
+`;
+
+export default function ApplicationDisabled() {
   const { t } = useI18n();
 
   return (
-    <main className={styles.main}>
-      <div>{t("welcome")}</div>
-      <br />
-      <br />
-      <br />
-      <div>Maintenance page</div>
-    </main>
+    <div className={styles.main}>
+      <Flex
+        alignItems="center"
+        justifyContent="center"
+        flexDirection="column"
+        flex={1}
+        data-testid="application-disabled-container"
+      >
+        <LogoContainer data-testid="application-disabled-logo">
+          <CloseMedium size={32} color="background.main" />
+        </LogoContainer>
+        <Text
+          variant="h4"
+          fontWeight="medium"
+          color="neutral.c100"
+          mt={10}
+          textAlign="center"
+          data-testid="application-disabled-title"
+        >
+          {t("applicationDisabled.title")}
+        </Text>
+        <Text
+          variant="bodyLineHeight"
+          fontWeight="medium"
+          color="neutral.c80"
+          mt={10}
+          textAlign="center"
+          data-testid="application-disabled-subtitle"
+        >
+          {t("applicationDisabled.desc")}
+        </Text>
+      </Flex>
+    </div>
   );
 }

src/i18n/locales/en.json

@@ -1,4 +1,8 @@
 {
   "hello": "Hello",
-  "welcome": "Welcome"
+  "welcome": "Welcome",
+  "applicationDisabled": {
+    "title": "We are currently under maintenance.",
+    "desc": "We are actively working to restore the app as soon as possible. Thank you for your understanding."
+  }
 }