homepage: Add maintenance alert #46

app/homepage/intro.tsx

@@ -1,5 +1,5 @@
 import { ContentWrapper } from "@interactivethings/swiss-federal-ci/dist/components";
-import { Box, Button, Typography } from "@mui/material";
+import { Alert, AlertTitle, Box, Button, Typography } from "@mui/material";
 import NextLink from "next/link";
 import { ReactNode } from "react";
 
@@ -9,23 +9,43 @@ export const Intro = ({
   title,
   teaser,
   buttonLabel,
+  alertTitle,
+  alertText,
 }: {
   title: string;
   teaser: string;
   buttonLabel: string;
+  alertTitle?: string;
+  alertText?: string;
 }) => {
   return (
     <Box sx={{ backgroundColor: "background.paper" }}>
       <ContentWrapper sx={{ py: 20 }}>
-        <div>
+        <Box sx={{ width: "100%" }}>
+          {alertText && (
+            <Alert
+              severity="warning"
+              color="warning"
+              icon={<Icon name="warningCircle" />}
+              sx={{
+                mb: 10,
+                py: 3,
+                px: 2,
+                width: "100%",
+              }}
+            >
+              {alertTitle && <AlertTitle>{alertTitle}</AlertTitle>}
+              {alertText}
+            </Alert>
+          )}
           <Title>{title}</Title>
           <Teaser>{teaser}</Teaser>
           <NextLink href="/browse" passHref legacyBehavior>
             <Button variant="outlined" endIcon={<Icon name="arrowRight" />}>
               {buttonLabel}
             </Button>
           </NextLink>
-        </div>
+        </Box>
       </ContentWrapper>
     </Box>
   );

app/static-pages/de/index.mdx

@@ -11,6 +11,8 @@ export const contentId = "home";
   title="Visualisieren Sie Schweizer Open Government Data"
   teaser="Erstellen Sie Visualisierungen von Datensätzen, welche durch den Linked-Data Dienst (LINDAS) des Bundesarchivs bereitgestellt werden und betten Sie diese in Ihre Webseite ein."
   buttonLabel="Visualisierung erstellen"
+  alertTitle="Wartungshinweis"
+  alertText="Die LINDAS Datenbank wird am 16. März aktualisiert. Es kann vorübergehend zu Ausfällen und Verzögerungen kommen. Wir bitten um Ihr Verständnis."
 />
 <Tutorial
   headline="Daten in wenigen Schritten visualisieren…"

app/static-pages/en/index.mdx

@@ -11,6 +11,8 @@ export const contentId = "home";
   title="Visualize Swiss Open Government Data"
   teaser="Create and embed visualizations from any dataset provided by the LINDAS Linked Data Service."
   buttonLabel="Create a visualization"
+  alertTitle="Maintenance Notice"
+  alertText="The LINDAS database will be updated on March 16. Temporary outages and delays may occur. We appreciate your understanding."
 />
 <Tutorial
   headline="Visualize data in just a few steps…"

app/static-pages/fr/index.mdx

@@ -11,6 +11,8 @@ export const contentId = "home";
   title="Visualisez les données ouvertes de l’administration publique suisse"
   teaser="Créez et intégrez des visualisations à partir des jeux de données du service LINDAS (Linked Data)."
   buttonLabel="Créer une visualisation"
+  alertTitle="Avis de maintenance"
+  alertText="La base de données LINDAS sera mise à jour le 16 mars. Des interruptions et des retards temporaires peuvent survenir. Nous vous remercions de votre compréhension."
 />
 <Tutorial
   headline="Visualisez des données en quelques étapes…"

app/static-pages/it/index.mdx

@@ -12,6 +12,8 @@ export const contentId = "home";
   title="Visualizza i dati aperti dell’amministrazione pubblica svizzera"
   teaser="Crea ed incorpora visualizzazioni partendo dai dataset forniti dal servizio LINDAS (Linked Data)."
   buttonLabel="Crea una visualizzazione"
+  alertTitle="Avviso di manutenzione"
+  alertText="Il database LINDAS verrà aggiornato il 16 marzo. Potrebbero verificarsi temporanee interruzioni e ritardi. Vi ringraziamo per la vostra comprensione."
 />
 <Tutorial
   headline="Visualizza i dati in solo pochi passaggi…"