App directory refactoring

apps/leafcutter/app/_components/Welcome.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { Box, Grid } from "@mui/material";
+import { useSession } from "next-auth/react";
+import { useTranslate } from "react-polyglot";
+import { useAppContext } from "./AppProvider";
+
+export const Welcome = () => {
+  const t = useTranslate();
+  const { data: session } = useSession();
+  const {
+    user: { name },
+  } = session as any;
+  const {
+    colors: { white, leafcutterElectricBlue },
+    typography: { h1, h4, p },
+  } = useAppContext();
+
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        backgroundColor: leafcutterElectricBlue,
+        color: white,
+        p: 4,
+        borderRadius: "10px",
+        mb: "22px",
+      }}
+    >
+      <Grid container direction="row" spacing={3}>
+        {/*       <Grid
+          item
+          container
+          xs={3}
+          direction="column"
+          justifyContent="flex-start"
+          alignItems="center"
+        >
+          <img src={image} alt={name} width="150px" />
+        </Grid> */}
+        <Grid item xs={12}>
+          <Box component="h1" sx={{ ...h1, mb: 1 }}>
+            {t("dashboardTitle")}
+          </Box>
+          <Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>{`${t("welcome")}, ${
+            name?.split(" ")[0]
+          }! 👋`}</Box>
+          <Box component="p" sx={{ ...p }}>
+            {t("dashboardDescription")}
+          </Box>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};