different headers images

src/app/components/Header/Header.module.scss

@@ -10,21 +10,14 @@
   }
 }
 
-.homepage-hero {
+%hero-base {
   position: relative;
   overflow: hidden;
 
   &::before {
     content: '';
     position: absolute;
     inset: -20% -10% 0;
-    background: linear-gradient(
-        90deg,
-        rgba(76, 43, 100, 0.85) 12%,
-        rgba(0, 94, 162, 0.85) 50%,
-        rgba(0, 129, 161, 0.85) 98%
-      ),
-      url('/images/homepage-hero-bg.jpeg');
     background-size: cover;
     background-position: center 40%;
     transform: scale(1.2);
@@ -45,6 +38,62 @@
   }
 }
 
+.homepage-hero {
+  @extend %hero-base;
+
+  &::before {
+    background: linear-gradient(
+        90deg,
+        rgba(76, 43, 100, 0.85) 12%,
+        rgba(0, 94, 162, 0.85) 50%,
+        rgba(0, 129, 161, 0.85) 98%
+      ),
+      url('/images/homepage-hero-bg.jpeg');
+  }
+}
+
+.our-products-hero {
+  @extend %hero-base;
+
+  &::before {
+    background: linear-gradient(
+        90deg,
+        rgba(76, 43, 100, 0.85) 12%,
+        rgba(0, 94, 162, 0.85) 50%,
+        rgba(0, 129, 161, 0.85) 98%
+      ),
+      url('/images/our-products-hero-bg.jpeg');
+  }
+}
+
+.case-studies-hero {
+  @extend %hero-base;
+
+  &::before {
+    background: linear-gradient(
+        90deg,
+        rgba(76, 43, 100, 0.85) 12%,
+        rgba(0, 94, 162, 0.85) 50%,
+        rgba(0, 129, 161, 0.85) 98%
+      ),
+      url('/images/case-studies-hero-bg.jpeg');
+  }
+}
+
+.engage-with-us-hero {
+  @extend %hero-base;
+
+  &::before {
+    background: linear-gradient(
+        90deg,
+        rgba(76, 43, 100, 0.85) 12%,
+        rgba(0, 94, 162, 0.85) 50%,
+        rgba(0, 129, 161, 0.85) 98%
+      ),
+      url('/images/engage-with-us-hero-bg.jpeg');
+  }
+}
+
 .navbarLogoText {
   position: absolute;
   width: 1px;

src/app/components/Header/Header.tsx

@@ -27,17 +27,17 @@ const specialContent: SpecialContent = {
       from Data Integration Building Blocks, or DIBBs.`,
   },
   '/our-products': {
-    heroClass: 'homepage-hero',
+    heroClass: 'our-products-hero',
     heroHeader: `Our ecosystem of DIBBs products`,
     heroSubheader: `Find out how DIBBs products can help empower your jurisdiction with more usable data.`,
   },
   '/case-studies': {
-    heroClass: 'homepage-hero',
+    heroClass: 'case-studies-hero',
     heroHeader: `See how DIBBs solutions have helped others`,
     heroSubheader: `Explore our case studies to see the impact of DIBBs.`,
   },
   '/engage-with-us': {
-    heroClass: 'homepage-hero',
+    heroClass: 'engage-with-us-hero',
     heroHeader: `Get started with DIBBs products`,
     heroSubheader: `Learn how your jurisdiction can start working with the DIBBs team.`,
   },
@@ -65,6 +65,7 @@ export default function Header() {
   const pathname = usePathname();
   const customContent = specialContent[pathname];
   const [expanded, setExpanded] = useState(false);
+  console.log(customContent);
 
   const handleClick = () => {
     if (window.innerWidth < 1024) {

src/app/engage-with-us/page.tsx

@@ -8,7 +8,6 @@ import {
   TextInput,
 } from '@trussworks/react-uswds';
 import { ContentContainer } from '../components/ContentContainer/ContentContainer';
-import Hero from '../components/Hero/Hero';
 
 export default function EngageWithUs() {
   return (