Merge pull request #1871 from bphan002/1846-redesign-header

1846 redesign header

Author: bphan002

assets/city_background_header.png

@@ -2,14 +2,22 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 import Typography from '@mui/material/Typography';
+import cityBackground from '@assets/city_background_header.png'
 
 const useStyles = makeStyles(theme => ({
   headingBackground: {
-    background: theme.palette.primary.main,
-    backgroundPosition: 'top',
-    height: '30vh',
+    background: `url(${cityBackground}) center 57% / cover`,
+    backgroundPosition: 'center 57%',
+    width: '100%',
+    height: '240px',
     position: 'relative',
   },
+  backdrop: {
+    width: '100%',
+    height: '100%',
+    background: `linear-gradient(180deg, rgba(53, 82, 129, 0.4) 50%, rgba(41, 64, 79, 0.8) 100%, rgba(29, 63, 90, 0.4) 100%)`,
+    backgroundPosition: 'center',
+  },
   headingOverlayText: {
     left: '50%',
     color: 'white',
@@ -31,6 +39,7 @@ function TextHeadingFAQ({ children }) {
 
   return (
     <div className={classes.headingBackground}>
+      <div className={classes.backdrop}></div>
       <div className={classes.headingOverlayText}>
         <Typography variant="h3" className={classes.contentHeading}>
           <div>{children}</div>

components/common/TextHeading/TextHeadingFAQ.jsx

@@ -2,21 +2,30 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 import Typography from '@mui/material/Typography';
+import cityBackground from '@assets/city_background_header.png'
 
 const useStyles = makeStyles(theme => ({
   headingBackground: {
-    background: theme.palette.primary.main,
-    backgroundPosition: 'top',
-    height: '20vh',
+    background: `url(${cityBackground}) center 57% / cover`,
+    backgroundPosition: 'center 57%',
+    width: '100%',
+    height: '240px',
     position: 'relative',
   },
+  backdrop: {
+    width: '100%',
+    height: '100%',
+    background: `linear-gradient(180deg, rgba(53, 82, 129, 0.4) 50%, rgba(41, 64, 79, 0.8) 100%, rgba(29, 63, 90, 0.4) 100%)`,
+    backgroundPosition: 'center',
+  },
   headingOverlayText: {
     left: '50%',
     color: 'white',
     position: 'absolute',
     textAlign: 'center',
     top: '50%',
     transform: 'translate(-50%, -70%)',
+    zIndex: '1',
   },
   contentHeading: {
     fontWeight: theme.typography.fontWeightBold,
@@ -31,6 +40,7 @@ function TextHeading({ children }) {
 
   return (
     <div className={classes.headingBackground}>
+      <div className={classes.backdrop}></div>
       <div className={classes.headingOverlayText}>
         <Typography variant="h3" className={classes.contentHeading}>
           <div>