added stylized header to other pages (#52)

* added styleized header to other pages - add footer
CDCgov · Nov 20, 2024 · d52837a · d52837a
1 parent 575bd17
commit d52837a
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 60 deletions.
diff --git a/public/images/case-studies-hero-bg.jpeg b/public/images/case-studies-hero-bg.jpeg
diff --git a/public/images/engage-with-us-hero-bg.jpeg b/public/images/engage-with-us-hero-bg.jpeg
diff --git a/public/images/our-products-hero-bg.jpeg b/public/images/our-products-hero-bg.jpeg
diff --git a/src/app/case-studies/page.tsx b/src/app/case-studies/page.tsx
@@ -1,4 +1,3 @@
-import Hero from '../components/Hero/Hero';
 import { LinkButton } from '../components/LinkButton/LinkButton';
 import Image from 'next/image';
 import { basePath } from '../utils/constants';
@@ -7,10 +6,6 @@ import React from 'react';
 export default function CaseStudies() {
   return (
     <div>
-      <Hero
-        header="See how DIBBs solutions have helped others"
-        subheader="Explore our case studies to see the impact of DIBBs."
-      />
       <div className="ml-auto mr-auto flex max-w-[75rem] flex-col py-20 pl-10">
         <div className="flex flex-col gap-[7.5rem]">
           {/* Section 1 */}

diff --git a/src/app/components/Footer/Footer.module.scss b/src/app/components/Footer/Footer.module.scss
@@ -9,3 +9,31 @@
     font-size: 13px;
   }
 }
+
+.footer-phdi {
+  display: flex;
+  width: 100%;
+  padding-top: 2.5rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3.75rem;
+  background: linear-gradient(90deg, #0081a1 2%, #005ea2 50%, #4c2b64 96%);
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: url('/images/homepage-hero-bg.jpeg');
+    background-size: 120%;
+    background-position: center;
+    background-repeat: no-repeat;
+    opacity: 0.15;
+    z-index: 0;
+  }
+
+  // Keep content above background
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+}
diff --git a/src/app/components/Footer/Footer.tsx b/src/app/components/Footer/Footer.tsx
@@ -29,35 +29,47 @@ export default function Footer() {
   ];
 
   return (
-    <footer className="usa-header--basic 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="http://cdc.gov" title="<Project title>">
-                <span className={classNames('sr-only', styles.navbarLogoText)}>
-                  CDC US center for disease control and prevention
-                </span>
-                <Image
-                  width={200}
-                  height={40}
-                  alt=""
-                  className="margin-x-0"
-                  src={`${basePath}/images/CDC.svg`}
-                />
-              </a>
-            </em>
+    <>
+      <div
+        className={classNames(
+          styles['footer-phdi'],
+          'usa-header--basic bg-background-teal',
+        )}
+      ></div>
+      <footer
+        className={classNames('usa-header--basic bg-background-dark-blue')}
+      >
+        <div className="usa-nav-container flex-vertical-center">
+          <div className="usa-navbar">
+            <div className="usa-logo">
+              <em className="usa-logo__text">
+                <a href="http://cdc.gov" title="<Project title>">
+                  <span
+                    className={classNames('sr-only', styles.navbarLogoText)}
+                  >
+                    CDC US center for disease control and prevention
+                  </span>
+                  <Image
+                    width={200}
+                    height={40}
+                    alt=""
+                    className="margin-x-0"
+                    src={`${basePath}/images/CDC.svg`}
+                  />
+                </a>
+              </em>
+            </div>
+            <button type="button" className="usa-menu-btn">
+              Menu
+            </button>
           </div>
-          <button type="button" className="usa-menu-btn">
-            Menu
-          </button>
+          <PrimaryNav
+            items={testItemsMenu}
+            mobileExpanded={expanded}
+            onToggleMobileNav={onClick}
+          />
         </div>
-        <PrimaryNav
-          items={testItemsMenu}
-          mobileExpanded={expanded}
-          onToggleMobileNav={onClick}
-        />
-      </div>
-    </footer>
+      </footer>
+    </>
   );
 }
diff --git a/src/app/components/Header/Header.module.scss b/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;

diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
@@ -9,15 +9,15 @@ import { basePath } from '../../utils/constants';
 import { NavigationLink } from '../NavigationLink/NavigationLink';
 import Hero from '../Hero/Hero';
 
-interface HeroContent {
+interface HeroObject {
   heroClass?: string;
   heroHeader: string;
   heroSubheader: string;
 }
 
-type SpecialContent = Record<string, HeroContent | undefined>;
+type HeroContent = Record<string, HeroObject | undefined>;
 
-const specialContent: SpecialContent = {
+const heroContent: HeroContent = {
   '/': {
     heroClass: 'homepage-hero',
     heroHeader: `Improve the way your jurisdiction collects, processes, and
@@ -26,6 +26,21 @@ const specialContent: SpecialContent = {
       timely public health action using CDC's free, cloud-based products built
       from Data Integration Building Blocks, or DIBBs.`,
   },
+  '/products': {
+    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: '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: 'engage-with-us-hero',
+    heroHeader: `Get started with DIBBs products`,
+    heroSubheader: `Learn how your jurisdiction can start working with the DIBBs team.`,
+  },
 };
 
 const navigationItems = [
@@ -48,7 +63,7 @@ const navigationItems = [
 
 export default function Header() {
   const pathname = usePathname();
-  const customContent = specialContent[pathname];
+  const customHeroContent = heroContent[pathname];
   const [expanded, setExpanded] = useState(false);
 
   const handleClick = () => {
@@ -66,7 +81,9 @@ export default function Header() {
   return (
     <div
       className={classNames(
-        customContent?.heroClass && styles[customContent.heroClass],
+        customHeroContent?.heroClass
+          ? styles[customHeroContent.heroClass]
+          : styles['homepage-hero'],
       )}
     >
       <a className="usa-skipnav" href="#main-content">
@@ -106,10 +123,11 @@ export default function Header() {
           />
         </div>
       </USWDSHeader>
-      {customContent && (
+
+      {customHeroContent && (
         <Hero
-          header={customContent.heroHeader}
-          subheader={customContent.heroSubheader}
+          header={customHeroContent.heroHeader}
+          subheader={customHeroContent.heroSubheader}
         />
       )}
     </div>

diff --git a/src/app/custom-styles.css b/src/app/custom-styles.css
@@ -13,6 +13,7 @@
   --foreground: #171717;
   --header-teal: #224a58;
   --background-light-blue: #dcecf3;
+  --background-dark-blue: #0e1e25;
   --ifm-color-primary: #2e8555;
   font-size: 16px; /* base value for rem */
 }
@@ -31,6 +32,10 @@ body {
   background-color: var(--header-teal);
 }
 
+.bg-background-dark-blue {
+  background-color: var(--background-dark-blue);
+}
+
 @media (min-width: 64em) {
   .usa-logo {
     margin-top: 2rem;

diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
@@ -8,15 +8,10 @@ import {
   TextInput,
 } from '@trussworks/react-uswds';
 import { ContentContainer } from '../components/ContentContainer/ContentContainer';
-import Hero from '../components/Hero/Hero';
 
 export default function EngageWithUs() {
   return (
     <div>
-      <Hero
-        header="Get started with DIBBs products"
-        subheader="Learn how your jurisdiction can start working with the DIBBs team."
-      />
       <ContentContainer>
         <div className="grid grid-cols-1 justify-items-center gap-6 lg:grid-cols-2 lg:justify-items-start">
           <div>

diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
@@ -1,17 +1,11 @@
 import Image from 'next/image';
 import { basePath } from '../utils/constants';
-import Hero from '../components/Hero/Hero';
 import { ContentContainer } from '../components/ContentContainer/ContentContainer';
 import { LinkButton } from '../components/LinkButton/LinkButton';
 
 export default function OurProducts() {
   return (
     <div>
-      <Hero
-        header="Our ecosystem of DIBBs products"
-        subheader="Find out how DIBBs products can help empower your jurisdiction with
-            more usable data."
-      />
       <StandaloneProducts />
       <DataPipeline />
     </div>