Updated hero of main page (#51)

* 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,50 @@
     font-size: 13px;
   }
 }
+
+.homepage-hero {
+  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);
+    z-index: 0;
+  }
+
+  :global {
+    .usa-navbar,
+    .usa-hero {
+      position: relative;
+      z-index: 1;
+    }
+  }
+  section h1,
+  section p {
+    color: white;
+    z-index: 1;
+  }
+}
+
+.navbarLogoText {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

src/app/components/Header/Header.tsx

@@ -1,42 +1,84 @@
 'use client';
+import { useState } from 'react';
 import { Header as USWDSHeader, PrimaryNav } from '@trussworks/react-uswds';
 import Image from 'next/image';
-import React from 'react';
+import { usePathname } from 'next/navigation';
 import classNames from 'classnames';
+import styles from './Header.module.scss';
 import { basePath } from '../../utils/constants';
 import { NavigationLink } from '../NavigationLink/NavigationLink';
-import styles from './Header.module.scss';
+import Hero from '../Hero/Hero';
+
+interface HeroContent {
+  heroClass?: string;
+  heroHeader: string;
+  heroSubheader: string;
+}
+
+type SpecialContent = Record<string, HeroContent | undefined>;
+
+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 navigationItems = [
+  {
+    key: 'products',
+    href: '/our-products',
+    text: 'Our products',
+  },
+  {
+    key: 'case-studies',
+    href: '/case-studies',
+    text: 'Case studies',
+  },
+  {
+    key: 'engage',
+    href: '/engage-with-us',
+    text: 'Engage with us',
+  },
+];
 
 export default function Header() {
-  const [expanded, setExpanded] = React.useState(false);
-  const onClick = () => {
-    if (window.innerWidth < 1024) setExpanded((prvExpanded) => !prvExpanded);
+  const pathname = usePathname();
+  const customContent = specialContent[pathname];
+  const [expanded, setExpanded] = useState(false);
+
+  const handleClick = () => {
+    if (window.innerWidth < 1024) {
+      setExpanded((prev) => !prev);
+    }
   };
 
-  const testItemsMenu = [
-    <NavigationLink key="one" href="/our-products" onClick={onClick}>
-      Our products
-    </NavigationLink>,
-    <NavigationLink key="two" href="/case-studies" onClick={onClick}>
-      Case studies
-    </NavigationLink>,
-    <NavigationLink key="three" href="/engage-with-us" onClick={onClick}>
-      Engage with us
-    </NavigationLink>,
-  ];
+  const navigationLinks = navigationItems.map(({ key, href, text }) => (
+    <NavigationLink key={key} href={href} onClick={handleClick}>
+      {text}
+    </NavigationLink>
+  ));
 
   return (
-    <>
+    <div
+      className={classNames(
+        customContent?.heroClass && styles[customContent.heroClass],
+      )}
+    >
       <a className="usa-skipnav" href="#main-content">
         Skip to main content
       </a>
 
-      <USWDSHeader basic={true} className="bg-background-teal">
+      <USWDSHeader basic className="bg-background-teal">
         <div className="usa-nav-container flex-vertical-center">
           <div className="usa-navbar">
             <div className="usa-logo">
               <em className="usa-logo__text">
-                <a href={`${basePath}/`} title="<Project title>">
+                <a href={`${basePath}/`} title="DIBBs">
                   <span
                     className={classNames('sr-only', styles.navbarLogoText)}
                   >
@@ -48,6 +90,7 @@ export default function Header() {
                     alt=""
                     className="margin-x-0"
                     src={`${basePath}/images/dibbs-logo.svg`}
+                    priority
                   />
                 </a>
               </em>
@@ -57,12 +100,19 @@ export default function Header() {
             </button>
           </div>
           <PrimaryNav
-            items={testItemsMenu}
+            items={navigationLinks}
             mobileExpanded={expanded}
-            onToggleMobileNav={onClick}
+            onToggleMobileNav={handleClick}
           />
         </div>
       </USWDSHeader>
-    </>
+
+      {customContent && (
+        <Hero
+          header={customContent.heroHeader}
+          subheader={customContent.heroSubheader}
+        />
+      )}
+    </div>
   );
 }

src/app/page.tsx

@@ -2,7 +2,6 @@ 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';
 
@@ -49,11 +48,6 @@ const homeContent = {
 export default async function Home() {
   return (
     <>
-      <Hero
-        header={homeContent.hero.header}
-        subheader={homeContent.hero.subheader}
-      />
-
       <DibbsSection />
       <ValueSection />
       <JurisdictionSection />