Issue 456/home page structure enhancements

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,25 @@ 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
+        sx={{
+          color: 'primary.dark',
+          width: isReallySmallScreen ? '100%' : '85%',
+          marginBottom: '24px'
+        }}
+      >
+        {description}
+      </Typography>
+    )}
     {button && (
       <Button
         variant="contained"
@@ -76,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} />

src/pages/Home.jsx

@@ -1,20 +1,23 @@
 // React Imports
-import React from 'react';
+import React, { useRef } from 'react';
 // Material UI Imports
+import ArrowCircleDownOutlinedIcon from '@mui/icons-material/ArrowCircleDownOutlined';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Diversity1Icon from '@mui/icons-material/Diversity1';
+import IconButton from '@mui/material/IconButton';
 import SecurityIcon from '@mui/icons-material/Security';
 import Stack from '@mui/material/Stack';
 import SupportIcon from '@mui/icons-material/Support';
+import Typography from '@mui/material/Typography';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 // Components Import
 import { HomeSection, KeyFeatures } from '@components/Home';
 
 /**
  * Home - First Page you encounter in PASS before login.
- * Should not display if you are already logged in
+ * Should not display if you are already logged in.
  *
  * @memberof Pages
  * @name Home
@@ -23,9 +26,41 @@ import { HomeSection, KeyFeatures } from '@components/Home';
 const Home = () => {
   const theme = useTheme();
   const isReallySmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const iconSize = isReallySmallScreen ? 'medium' : 'large';
+  const aboutRef = useRef(null);
+
+  const handleClick = () => aboutRef.current.scrollIntoView({ behavior: 'smooth' });
+
+  const logoSection = isReallySmallScreen ? (
+    <Stack justifyContent="center" alignItems="center" spacing={2} mb={2}>
+      <Typography
+        variant="h1"
+        fontWeight="500"
+        fontSize="72px"
+        color="primary"
+        data-testid="testHomeH1"
+      >
+        PASS
+      </Typography>
+      <Box component="img" src="/assets/PASSLogolightmode.png" alt="PASS logo" width="50%" />
+    </Stack>
+  ) : (
+    <Stack direction="row" justifyContent="center" alignItems="center" spacing={4}>
+      <Box component="img" src="/assets/PASSLogolightmode.png" alt="PASS logo" width="150px" />
+      <Typography
+        variant="h1"
+        fontWeight="500"
+        fontSize="144px"
+        color="primary"
+        data-testid="testHomeH1"
+      >
+        PASS
+      </Typography>
+    </Stack>
+  );
 
   return (
-    <Container component="main" sx={{ width: '100vw' }}>
+    <Container sx={{ width: '100vw' }}>
       <Box
         sx={{
           margin: '18px 0',
@@ -36,48 +71,76 @@ const Home = () => {
           padding: '20px'
         }}
       >
-        <section id="home">
+        <section id="home" data-testid="testHomeSection">
           <Stack alignItems="center" justifyContent="center">
-            <HomeSection
-              isReallySmallScreen={isReallySmallScreen}
-              componentImageSrc="/assets/web-security-green.png"
-              componentImageAlt=""
-              title="Keep Your Documents Safe and Secure Using Decentralized Technology"
-              description="Our innovative solution empowers individuals to manage their critical documents and control access for trusted organizations. PASS simplifies service access, enabling seamless documents requests and secure data sharing for a smoother support process."
-              button="Request a Demo"
-              href="mailto:[email protected]"
-            />
-            <HomeSection
-              isReallySmallScreen={isReallySmallScreen}
-              componentImageSrc="/assets/app-green.png"
-              componentImageAlt=""
-              title="An App for Caseworkers"
-              description="PASS allows users to quickly and securely share documents of their clients within the app. The app helps caseworkers verify and share documents such as ID and proof of income while retaining total control of them."
-            />
-            <HomeSection
-              isReallySmallScreen={isReallySmallScreen}
-              componentImageSrc="/assets/key-features-green.png"
-              componentImageAlt=""
-              title="Key Features"
-            />
-            <KeyFeatures
-              isReallySmallScreen={isReallySmallScreen}
-              icon={<SecurityIcon fontSize={isReallySmallScreen ? 'medium' : 'large'} />}
-              title="Secure Storage"
-              description="Store vital documents like IDs, Social Security information, birth certificates, medical records, and bank statements in a valid digital format."
-            />
-            <KeyFeatures
-              isReallySmallScreen={isReallySmallScreen}
-              icon={<Diversity1Icon fontSize={isReallySmallScreen ? 'medium' : 'large'} />}
-              title="Nonprofit-Caseworker Integration"
-              description="The platform facilitates smooth communication between nonprofit organizations, case workers, and the individuals they serve. It allows nonprofit organizations to maintain a contact list, and caseworkers are assigned contacts whose data they can access securely."
-            />
-            <KeyFeatures
-              isReallySmallScreen={isReallySmallScreen}
-              icon={<SupportIcon fontSize={isReallySmallScreen ? 'medium' : 'large'} />}
-              title="Support Service"
-              description="Verified documents can be used to facilitate access to service such as housing support and shelter accommodation. The platform simplifies the process of submitting necessary documents for such services."
-            />
+            <Box
+              height="calc(100vh - 64px)"
+              display="flex"
+              flexDirection="column"
+              justifyContent="center"
+              alignItems="center"
+            >
+              {logoSection}
+              <Typography
+                variant={isReallySmallScreen ? 'h4' : 'h3'}
+                component="p"
+                fontWeight="600"
+                mb={isReallySmallScreen ? 8 : 18}
+                color="primary"
+              >
+                Personal Access System for Services
+              </Typography>
+              <Typography color="secondary.main" sx={{ fontSize: '24px' }}>
+                Learn More
+              </Typography>
+              <IconButton aria-label="Scroll down" color="secondary" onClick={handleClick}>
+                <ArrowCircleDownOutlinedIcon sx={{ fontSize: '32px' }} />
+              </IconButton>
+            </Box>
+            <div ref={aboutRef}>
+              <HomeSection
+                isReallySmallScreen={isReallySmallScreen}
+                componentImageSrc="/assets/web-security-green.png"
+                componentImageAlt=""
+                title="Keep Your Documents Safe and Secure Using Decentralized Technology"
+                description="Our innovative solution empowers individuals to manage their critical documents and control access for trusted organizations. PASS simplifies service access, enabling seamless documents requests and secure data sharing for a smoother support process."
+                button="Request a Demo"
+                href="mailto:[email protected]"
+                hasMargin
+              />
+              <HomeSection
+                isReallySmallScreen={isReallySmallScreen}
+                componentImageSrc="/assets/app-green.png"
+                componentImageAlt=""
+                title="An App for Caseworkers"
+                description="PASS allows users to quickly and securely share documents of their clients within the app. The app helps caseworkers verify and share documents such as ID and proof of income while retaining total control of them."
+                hasMargin
+              />
+              <HomeSection
+                isReallySmallScreen={isReallySmallScreen}
+                componentImageSrc="/assets/key-features-green.png"
+                componentImageAlt=""
+                title="Key Features"
+              />
+              <KeyFeatures
+                isReallySmallScreen={isReallySmallScreen}
+                icon={<SecurityIcon fontSize={iconSize} />}
+                title="Secure Storage"
+                description="Store vital documents like IDs, Social Security information, birth certificates, medical records, and bank statements in a valid digital format."
+              />
+              <KeyFeatures
+                isReallySmallScreen={isReallySmallScreen}
+                icon={<Diversity1Icon fontSize={iconSize} />}
+                title="Nonprofit-Caseworker Integration"
+                description="The platform facilitates smooth communication between nonprofit organizations, case workers, and the individuals they serve. It allows nonprofit organizations to maintain a contact list, and caseworkers are assigned contacts whose data they can access securely."
+              />
+              <KeyFeatures
+                isReallySmallScreen={isReallySmallScreen}
+                icon={<SupportIcon fontSize={iconSize} />}
+                title="Support Service"
+                description="Verified documents can be used to facilitate access to service such as housing support and shelter accommodation. The platform simplifies the process of submitting necessary documents for such services."
+              />
+            </div>
           </Stack>
         </section>
       </Box>