overlay on banner complete for all banner pages

.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/settings.json

@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

components/common/TextHeading/TextHeadingFAQ.jsx

@@ -2,16 +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/citybackgroundheader.png'
+import cityBackground from '@assets/city_background_header.png'
 
 const useStyles = makeStyles(theme => ({
   headingBackground: {
-    background: `url(${cityBackground}) no-repeat center center`,
-    backgroundPosition: 'center 56%',
-    backgroundSize: 'cover',
-    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',
@@ -33,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/index.jsx

@@ -2,23 +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/citybackgroundheader.png'
+import cityBackground from '@assets/city_background_header.png'
 
 const useStyles = makeStyles(theme => ({
   headingBackground: {
-    background: `url(${cityBackground}) no-repeat center center`,
-    backgroundPosition: 'center 56%',
-    backgroundSize: 'cover',
-    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',
     position: 'absolute',
     textAlign: 'center',
     top: '50%',
     transform: 'translate(-50%, -70%)',
+    zIndex: '1',
   },
   contentHeading: {
     fontWeight: theme.typography.fontWeightBold,
@@ -33,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>