Add Opacity Overlay to Hero Background Image for Improved Readability

[jeromehardaway]

This PR introduces an overlay with rgba(9, 31, 64, 0.5) background color on top of the hero area's background image. The goal of this change is to dim the background image slightly, enhancing the readability of text and the visibility of other elements in the hero area.

Changes Made:

• Added a <div> with inline styles for backgroundColor: rgba(9, 31, 64, 0.5) and absolute positioning. This div serves as an overlay on the hero background image, ensuring that the image is dimmed without affecting the opacity of the content on top.
• Ensured that the overlay covers the entire area of the background image by setting its position to absolute and extending it to all corners of the container.

Rationale: The background image of the hero area, while visually appealing, can sometimes make the overlaying text and buttons hard to read, especially when there's significant variance in the image's brightness and color. By introducing a semi-transparent overlay, we create a more uniform background that improves text visibility and the overall user experience.

Testing:

• Visual tests were conducted across multiple screen sizes to ensure the overlay correctly covers the entire background image without affecting the hero area's content.
• Tested the responsiveness to ensure that the overlay adapts correctly to different screen sizes and orientations.

This enhancement is a step towards improving the accessibility and usability of our web presence, ensuring that our content is clear and accessible to all users.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vets-who-code-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 17, 2024 1:15am

[jeromehardaway]

This pull request includes changes to the HeroArea component in src/containers/hero/layout-04/index.tsx. The changes introduce an overlay to the hero image and include a conditional rendering for a video modal.

Changes to HeroArea component:

• src/containers/hero/layout-04/index.tsx: Added a div with absolute positioning and a semi-transparent background color to create an overlay effect on the hero image.
• src/containers/hero/layout-04/index.tsx: Added conditional rendering for a ModalVideo component, which will be displayed if a video prop is provided.