Add footer

CDCgov · Nov 20, 2024 · c93cbaf · c93cbaf
1 parent 7f191c9
commit c93cbaf
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 28 deletions.
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>
+    </>
   );
 }