Merge pull request #658 from codeforpdx/issue-635/discovery-landing-p…

…age-styling-adjustments Issue 635/discovery landing page styling adjustments
codeforpdx · Jul 9, 2024 · 71790a5 · 71790a5
2 parents cadcc02 + 57a0e12
commit 71790a5
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 34 deletions.
diff --git a/public/assets/app-blue.webp b/public/assets/app-blue.webp
diff --git a/public/assets/app-green.png b/public/assets/app-green.png
diff --git a/public/assets/key-features-blue.webp b/public/assets/key-features-blue.webp
diff --git a/public/assets/key-features-green.png b/public/assets/key-features-green.png
diff --git a/public/assets/web-security-blue.webp b/public/assets/web-security-blue.webp
diff --git a/public/assets/web-security-green.png b/public/assets/web-security-green.png
diff --git a/src/components/Home/KeyFeatures.jsx b/src/components/Home/KeyFeatures.jsx
@@ -14,43 +14,49 @@ import Typography from '@mui/material/Typography';
  * @param {string} Props.icon - Icon
  * @param {string} Props.title - Key feature title
  * @param {string} Props.description - Key feature description
+ * @param {string} Props.isReallySmallScreen - Screen size based on media query
  * @returns {React.JSX.Element} The KeyFeatures section component
  */
-const KeyFeatures = ({ icon, title, description }) => (
-  <Stack alignItems="center">
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: '10px',
-        marginBottom: '14px',
-        color: 'primary.main'
-      }}
-    >
-      {icon}
+const KeyFeatures = ({ icon, title, description, isReallySmallScreen }) => {
+  const flexDirection = isReallySmallScreen ? 'column' : 'row';
+
+  return (
+    <Stack alignItems="center">
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection,
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '10px',
+          marginBottom: '14px',
+          color: 'primary.main'
+        }}
+      >
+        {icon}
+        <Typography
+          variant="h6"
+          component="h3"
+          sx={{
+            color: 'primary.main',
+            textAlign: 'center'
+          }}
+        >
+          <strong>{title}</strong>
+        </Typography>
+      </Box>
       <Typography
-        variant="h6"
-        component="h3"
+        variant="body1"
         sx={{
-          color: 'primary.main',
-          textAlign: 'center'
+          textAlign: 'center',
+          color: 'primary.dark',
+          marginBottom: '50px'
         }}
       >
-        <strong>{title}</strong>
+        {description}
       </Typography>
-    </Box>
-    <Typography
-      variant="body1"
-      sx={{
-        textAlign: 'center',
-        color: 'primary.dark',
-        marginBottom: '50px'
-      }}
-    >
-      {description}
-    </Typography>
-  </Stack>
-);
+    </Stack>
+  );
+};
 
 export default KeyFeatures;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -136,7 +136,7 @@ const Home = () => {
             <div ref={aboutRef}>
               <HomeSection
                 isReallySmallScreen={isReallySmallScreen}
-                componentImageSrc="/assets/web-security-green.png"
+                componentImageSrc="/assets/web-security-blue.webp"
                 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."
@@ -146,15 +146,15 @@ const Home = () => {
               />
               <HomeSection
                 isReallySmallScreen={isReallySmallScreen}
-                componentImageSrc="/assets/app-green.png"
+                componentImageSrc="/assets/app-blue.webp"
                 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"
+                componentImageSrc="/assets/key-features-blue.webp"
                 componentImageAlt=""
                 title="Key Features"
               />