Updated hero of main page

.vscode/settings.json

@@ -18,5 +18,6 @@
   },
   "[json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "cSpell.words": ["USWDS"]
 }

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

@@ -9,3 +9,42 @@
     font-size: 13px;
   }
 }
+
+.homepage-hero {
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -20%;
+    left: -10%;
+    right: -10%;
+    bottom: 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);
+    z-index: 0;
+  }
+
+  .usa-nav-container,
+  .usa-header,
+  .usa-logo,
+  .usa-navbar {
+    position: relative;
+    z-index: 1;
+  }
+  section h1,
+  section p {
+    position: relative;
+    z-index: 1;
+    color: white !important;
+  }
+}

src/app/components/Header/Header.tsx

@@ -6,8 +6,33 @@ import classNames from 'classnames';
 import { basePath } from '../../utils/constants';
 import { NavigationLink } from '../NavigationLink/NavigationLink';
 import styles from './Header.module.scss';
+import Hero from '../Hero/Hero';
+import { usePathname } from 'next/navigation';
 
 export default function Header() {
+  interface HeroContent {
+    heroClass?: string;
+    heroHeader: string;
+    heroSubheader: string;
+  }
+
+  type SpecialContent = {
+    [key: string]: HeroContent;
+  };
+
+  const specialContent: SpecialContent = {
+    '/': {
+      heroClass: 'homepage-hero',
+      heroHeader: `Improve the way your jurisdiction collects, processes, and
+      views public health data`,
+      heroSubheader: `Turn your jurisdiction's data into meaningful intelligence that drives
+      timely public health action using CDC's free, cloud-based products built
+      from Data Integration Building Blocks, or DIBBs.`,
+    },
+  };
+  const pathname = usePathname();
+  const customContent = specialContent[pathname];
+
   const [expanded, setExpanded] = React.useState(false);
   const onClick = () => {
     if (window.innerWidth < 1024) setExpanded((prvExpanded) => !prvExpanded);
@@ -26,7 +51,11 @@ export default function Header() {
   ];
 
   return (
-    <>
+    <div
+      className={
+        customContent?.heroClass ? styles[customContent.heroClass] : ''
+      }
+    >
       <a className="usa-skipnav" href="#main-content">
         Skip to main content
       </a>
@@ -63,6 +92,12 @@ export default function Header() {
           />
         </div>
       </USWDSHeader>
-    </>
+      {customContent && (
+        <Hero
+          header={customContent.heroHeader}
+          subheader={customContent.heroSubheader}
+        />
+      )}
+    </div>
   );
 }

src/app/page.tsx

@@ -2,21 +2,12 @@ import { Grid, GridContainer } from '@trussworks/react-uswds';
 import Image from 'next/image';
 import { basePath } from './utils/constants';
 import Carousel from './components/Carousel/Carousel';
-import Hero from './components/Hero/Hero';
 import { ContentContainer } from './components/ContentContainer/ContentContainer';
 import { LinkButton } from './components/LinkButton/LinkButton';
 
 export default async function Home() {
   return (
     <>
-      <Hero
-        header="Improve the way your jurisdiction collects, processes, and views public
-      health data"
-        subheader="Turn your jurisdiction's data into meaningful intelligence that drives
-      timely public health action using CDC's free, cloud-based products built
-      from Data Integration Building Blocks, or DIBBs."
-      />
-
       <SectionOne />
       <SectionTwo />
       <SectionThree />