Issue 456/home page structure enhancements

package.json

@@ -35,6 +35,7 @@
     "@mui/material": "^5.12.2",
     "@mui/styled-engine-sc": "^5.12.0",
     "@mui/system": "^5.12.1",
+    "@mui/utils": "^5.14.18",
     "@mui/x-data-grid": "^6.16.2",
     "@mui/x-date-pickers": "^6.5.0",
     "@tanstack/react-query": "^4.32.0",

src/components/Home/HomeSection.jsx

@@ -2,14 +2,15 @@
 import React from 'react';
 // Material UI Imports
 import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 /**
  * Represents a home section component
  *
  * @memberof Home
- * @name HomeSecton
+ * @name HomeSection
  * @param {object} Props - the component props
  * @param {string} Props.componentImageSrc - image src
  * @param {string} Props.componentImageAlt - image alt
@@ -19,6 +20,7 @@ import Button from '@mui/material/Button';
  * @param {string} Props.href - section button href
  * @param {string} Props.label - section button aria-label
  * @param {boolean} Props.isReallySmallScreen - screen size
+ * @param {boolean} Props.hasMargin - gives marginBottom
  * @returns {React.JSX.Element} - the home section component
  */
 const HomeSection = ({
@@ -29,9 +31,10 @@ const HomeSection = ({
   button,
   href,
   label,
-  isReallySmallScreen
+  isReallySmallScreen,
+  hasMargin
 }) => (
-  <>
+  <Stack mb={hasMargin ? 8 : null} alignItems="center">
     <Box
       component="img"
       src={componentImageSrc}
@@ -42,25 +45,26 @@ const HomeSection = ({
     />
     <Typography
       variant="h2"
+      mb="24px"
       sx={{
         color: 'primary.main',
-        textAlign: 'center',
-        marginBottom: '24px',
         fontSize: '28px'
       }}
     >
       <strong>{title}</strong>
     </Typography>
-    <Typography
-      sx={{
-        color: 'primary.dark',
-        width: isReallySmallScreen ? '100%' : '85%',
-        marginBottom: '24px',
-        textAlign: 'center'
-      }}
-    >
-      {description}
-    </Typography>
+    {description && (
+      <Typography
+        data-testid="testDescription"
+        sx={{
+          color: 'primary.dark',
+          width: isReallySmallScreen ? '100%' : '85%',
+          marginBottom: '24px'
+        }}
+      >
+        {description}
+      </Typography>
+    )}
     {button && (
       <Button
         variant="contained"
@@ -75,7 +79,7 @@ const HomeSection = ({
         {button}
       </Button>
     )}
-  </>
+  </Stack>
 );
 
 export default HomeSection;

src/components/Home/KeyFeatures.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 // Material UI Imports
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
 /**
@@ -17,31 +18,41 @@ import Typography from '@mui/material/Typography';
  * @returns {React.JSX.Element} the KeyFeatures section component
  */
 const KeyFeatures = ({ icon, title, description, isReallySmallScreen }) => (
-  <>
+  <Stack alignItems="center">
     <Box
       sx={{
         display: 'flex',
         alignItems: 'center',
+        justifyContent: 'center',
         gap: '10px',
         marginBottom: '14px',
         color: 'primary.main'
       }}
     >
       {icon}
-      <strong>{title}</strong>
+      <Typography
+        variant="h6"
+        component="h3"
+        sx={{
+          color: 'primary.main',
+          textAlign: 'center'
+        }}
+      >
+        <strong>{title}</strong>
+      </Typography>
     </Box>
     <Typography
       variant="body1"
       sx={{
-        width: isReallySmallScreen ? 1 : '67%',
+        width: isReallySmallScreen ? 1 : '85%',
         textAlign: 'center',
         color: 'primary.dark',
         marginBottom: '50px'
       }}
     >
       {description}
     </Typography>
-  </>
+  </Stack>
 );
 
 export default KeyFeatures;

src/layouts/Layout.jsx

@@ -35,7 +35,7 @@ const Layout = ({ ariaLabel, children }) => {
     >
       <NavBar />
       {session.info.isLoggedIn && <Breadcrumbs />}
-      {children}
+      <main>{children}</main>
       {session.info.isLoggedIn && <InactivityMessage />}
       <Footer />
       <NotificationContainer notifications={state.notifications} />