From 1504bd2fb39f98f3a1fe11d627d09d7b5bd5e774 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Tue, 29 Oct 2024 16:21:04 -0400
Subject: [PATCH 01/34] implement custom uswds settings, increase container
 width from 'desktop' to 'widescreen'

---
 next.config.js                        |  4 +++-
 src/app/{globals.css => globals.scss} |  6 ++++--
 src/app/layout.tsx                    |  4 +---
 src/app/uswds-settings.scss           | 21 +++++++++++++++++++++
 4 files changed, 29 insertions(+), 6 deletions(-)
 rename src/app/{globals.css => globals.scss} (94%)
 create mode 100644 src/app/uswds-settings.scss

diff --git a/next.config.js b/next.config.js
index b53467a..8ee7474 100644
--- a/next.config.js
+++ b/next.config.js
@@ -14,7 +14,9 @@ const nextConfig = {
   basePath: '/dibbs-site',
   assetPrefix: '/dibbs-site',
   sassOptions: {
-    includePaths: [path.join(__dirname, 'styles')],
+    includePaths: [
+      path.join(__dirname, './', 'node_modules', '@uswds', 'uswds', 'packages'),
+    ],
   },
 };
 
diff --git a/src/app/globals.css b/src/app/globals.scss
similarity index 94%
rename from src/app/globals.css
rename to src/app/globals.scss
index c5f16b8..a3ac581 100644
--- a/src/app/globals.css
+++ b/src/app/globals.scss
@@ -1,8 +1,10 @@
+@forward "uswds-settings";
+@forward "uswds";
+
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import '@trussworks/react-uswds/lib/uswds.css';
-@import '@trussworks/react-uswds/lib/index.css';
 
 :root {
   --background: #ffffff;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6f50d2b..cd45059 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,10 +1,9 @@
 import type { Metadata } from 'next';
-import './globals.css';
-import Script from 'next/script';
 import Header from './components/Header';
 import Footer from './components/Footer';
 import USABanner from './components/UsaBanner';
 import { basePath } from './utils/constants';
+import './globals.scss';
 
 export const metadata: Metadata = {
   title: 'DIBBS Site',
@@ -27,7 +26,6 @@ export default function RootLayout({
           <main id="main-content">{children}</main>
           <Footer />
         </div>
-        <Script src="https://cdn.jsdelivr.net/npm/uswds@3.1.0/dist/js/uswds.min.js" />
       </body>
     </html>
   );
diff --git a/src/app/uswds-settings.scss b/src/app/uswds-settings.scss
new file mode 100644
index 0000000..23349fc
--- /dev/null
+++ b/src/app/uswds-settings.scss
@@ -0,0 +1,21 @@
+@use "uswds-core" with (
+    // General
+    $theme-show-compile-warnings: true,
+    $theme-show-notifications: false,
+    $theme-image-path: "../../../../../../dist/img",
+
+    // Color
+    // Component
+    $theme-hero-image: "../../../../dist/img/hero.jpg",
+    $theme-accordion-button-background-color: "blue-cool-60",
+
+    // Spacing
+    $theme-grid-container-max-width: "widescreen",
+    $theme-header-max-width: "widescreen",
+    
+    
+    // Typography
+    $theme-font-path: "../../../../../../dist/fonts",
+
+    // Utilities
+  );
\ No newline at end of file

From 589bf69d6eae4f436d6cb8fd38eb11e0690bb330 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Tue, 29 Oct 2024 16:29:19 -0400
Subject: [PATCH 02/34] Remove uneeded custom settings

---
 src/app/uswds-settings.scss | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/app/uswds-settings.scss b/src/app/uswds-settings.scss
index 23349fc..7a7a7fd 100644
--- a/src/app/uswds-settings.scss
+++ b/src/app/uswds-settings.scss
@@ -1,21 +1,15 @@
 @use "uswds-core" with (
     // General
-    $theme-show-compile-warnings: true,
-    $theme-show-notifications: false,
     $theme-image-path: "../../../../../../dist/img",
 
     // Color
     // Component
     $theme-hero-image: "../../../../dist/img/hero.jpg",
-    $theme-accordion-button-background-color: "blue-cool-60",
 
     // Spacing
     $theme-grid-container-max-width: "widescreen",
     $theme-header-max-width: "widescreen",
     
-    
     // Typography
     $theme-font-path: "../../../../../../dist/fonts",
-
-    // Utilities
   );
\ No newline at end of file

From fc7760bac3f9396a5b3a9dce28042c7602aab32a Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Wed, 30 Oct 2024 09:01:53 -0400
Subject: [PATCH 03/34] load tailwind in its own file to prevent constant
 compiling, causing very slow refresh

---
 src/app/custom-styles.css | 114 ++++++++++++++++++++++++++++++++++++++
 src/app/globals.scss      | 113 -------------------------------------
 src/app/layout.tsx        |   1 +
 3 files changed, 115 insertions(+), 113 deletions(-)
 create mode 100644 src/app/custom-styles.css

diff --git a/src/app/custom-styles.css b/src/app/custom-styles.css
new file mode 100644
index 0000000..778120e
--- /dev/null
+++ b/src/app/custom-styles.css
@@ -0,0 +1,114 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+    .text-balance {
+      text-wrap: balance;
+    }
+  }
+
+  h1 {
+    margin: 2rem 0 2rem 0;
+    font-size: larger;
+  }
+
+  :root {
+    --background: #ffffff;
+    --foreground: #171717;
+    --header-teal: #224a58;
+    --background-light-blue: #dcecf3;
+  }
+  
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: #0a0a0a;
+      --foreground: #ededed;
+    }
+  }
+  
+  body {
+    /* color: var(--foreground);
+    background: var(--background); */
+    font-family: Arial, Helvetica, sans-serif;
+  }
+  
+  
+  
+  .usa-logo a {
+    color: #ffffff;
+  }
+  
+  .bg-background-teal {
+    background-color: var(--header-teal);
+  }
+  
+  @media (min-width: 64em) {
+    .usa-logo {
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+    }
+  }
+  
+  .height-100 {
+    height: 100%;
+  }
+  
+  .flex-vertical-center {
+    display: flex;
+    align-items: center !important;
+    vertical-align: center;
+    height: auto;
+  }
+  
+  .flex-center {
+    text-align: center;
+  }
+  
+  .usa-section--light-blue {
+    background-color: var(--background-light-blue);
+  }
+  
+  h1 {
+    font-family: 'Source Sans Pro', sans-serif;
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 50.28px;
+    text-align: left;
+  }
+  
+  h2 {
+    color: #224a58;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-size: 2rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+  }
+  
+  ul {
+    margin-bottom: 1em;
+    margin-top: 1em;
+    line-height: 1.5;
+    padding-left: 3ch;
+    list-style: disc;
+  }
+  ul:last-child {
+    margin-bottom: 0;
+  }
+  ul,
+  ol {
+    margin-top: 0.25em;
+  }
+  ul li {
+    margin-bottom: 0.25em;
+    max-width: 68ex;
+  }
+  ul li:last-child {
+    margin-bottom: 0;
+  }
+  
+  p {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
\ No newline at end of file
diff --git a/src/app/globals.scss b/src/app/globals.scss
index a3ac581..b529bff 100644
--- a/src/app/globals.scss
+++ b/src/app/globals.scss
@@ -1,115 +1,2 @@
 @forward "uswds-settings";
 @forward "uswds";
-
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-  --header-teal: #224a58;
-  --background-light-blue: #dcecf3;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  /* color: var(--foreground);
-  background: var(--background); */
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-h1 {
-  margin: 2rem 0 2rem 0;
-  font-size: larger;
-}
-
-.usa-logo a {
-  color: #ffffff;
-}
-
-.bg-background-teal {
-  background-color: var(--header-teal);
-}
-
-@media (min-width: 64em) {
-  .usa-logo {
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-  }
-}
-
-.height-100 {
-  height: 100%;
-}
-
-.flex-vertical-center {
-  display: flex;
-  align-items: center !important;
-  vertical-align: center;
-  height: auto;
-}
-
-.flex-center {
-  text-align: center;
-}
-
-.usa-section--light-blue {
-  background-color: var(--background-light-blue);
-}
-
-h1 {
-  font-family: 'Source Sans Pro', sans-serif;
-  font-size: 40px;
-  font-weight: 700;
-  line-height: 50.28px;
-  text-align: left;
-}
-
-h2 {
-  color: #224a58;
-  font-family: 'Source Sans Pro', sans-serif;
-  font-size: 2rem;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
-}
-
-ul {
-  margin-bottom: 1em;
-  margin-top: 1em;
-  line-height: 1.5;
-  padding-left: 3ch;
-  list-style: disc;
-}
-ul:last-child {
-  margin-bottom: 0;
-}
-ul,
-ol {
-  margin-top: 0.25em;
-}
-ul li {
-  margin-bottom: 0.25em;
-  max-width: 68ex;
-}
-ul li:last-child {
-  margin-bottom: 0;
-}
-
-p {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index cd45059..d511a5a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import Footer from './components/Footer';
 import USABanner from './components/UsaBanner';
 import { basePath } from './utils/constants';
 import './globals.scss';
+import './custom-styles.css';
 
 export const metadata: Metadata = {
   title: 'DIBBS Site',

From dbb9ac5eb569587bb240253c8360a88cb044fa2e Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Wed, 30 Oct 2024 09:02:51 -0400
Subject: [PATCH 04/34] add ref link

---
 src/app/uswds-settings.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/uswds-settings.scss b/src/app/uswds-settings.scss
index 7a7a7fd..9683925 100644
--- a/src/app/uswds-settings.scss
+++ b/src/app/uswds-settings.scss
@@ -1,3 +1,5 @@
+// reference: https://github.com/CDCgov/dibbs-query-connector/blob/main/query-connector/src/styles/uswds-settings.scss
+
 @use "uswds-core" with (
     // General
     $theme-image-path: "../../../../../../dist/img",

From 21d31c0bfe15ae4129ffb6d833cb51e70bb25815 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Wed, 30 Oct 2024 10:32:00 -0400
Subject: [PATCH 05/34] hero component

---
 src/app/components/Hero.tsx     | 24 ++++++++++++++++++++++++
 src/app/page.tsx                | 13 ++++++++-----
 src/app/styles/Hero.module.scss | 18 ++++++++++++++++++
 3 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 src/app/components/Hero.tsx
 create mode 100644 src/app/styles/Hero.module.scss

diff --git a/src/app/components/Hero.tsx b/src/app/components/Hero.tsx
new file mode 100644
index 0000000..c743539
--- /dev/null
+++ b/src/app/components/Hero.tsx
@@ -0,0 +1,24 @@
+import { GridContainer } from '@trussworks/react-uswds';
+import styles from '../styles/Hero.module.scss';
+
+interface HeroProps {
+  header: string;
+  subheader: string;
+}
+
+export default function Hero({ header, subheader }: HeroProps) {
+  return (
+    <section className="usa-graphic-list usa-section usa-section--light-blue">
+      <GridContainer>
+        <div className={styles.content}>
+          <div className="flex flex-col items-start gap-3 self-start">
+            <h1 className={styles.heading}>{header}</h1>
+            <p className="font-['Source Sans Pro'] max-w-[862px] text-[22px] font-light leading-[33px] text-[#224a58]">
+              {subheader}
+            </p>
+          </div>
+        </div>
+      </GridContainer>
+    </section>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6667fc4..742fc6c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,15 +2,18 @@ import MarkdownContent from './components/MarkdownComponent';
 import { Grid } from '@trussworks/react-uswds';
 import Image from 'next/image';
 import { basePath } from './utils/constants';
+import Hero from './components/Hero';
 
 export default async function Home() {
   return (
     <>
-      <section className="usa-graphic-list usa-section usa-section--light-blue">
-        <div className="grid-container">
-          {MarkdownContent('homepage/section_1.md')}
-        </div>
-      </section>
+      <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."
+      />
       <section className="usa-section">
         <div className="grid-container">
           <Grid row>
diff --git a/src/app/styles/Hero.module.scss b/src/app/styles/Hero.module.scss
new file mode 100644
index 0000000..df87bed
--- /dev/null
+++ b/src/app/styles/Hero.module.scss
@@ -0,0 +1,18 @@
+.content {
+    display: flex;
+    padding: 0px 30px;
+    align-items: center;
+    gap: 60px;
+    max-width: 1200px;
+}
+
+.heading {
+    max-width: 965px;
+    color: #224A58;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    margin: 0px;
+}
\ No newline at end of file

From e2e63c9d0bd90a12398f4cf4496d899642b883c5 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Wed, 30 Oct 2024 13:54:35 -0400
Subject: [PATCH 06/34] Remove margin from hero subtext

---
 src/app/components/Hero.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/Hero.tsx b/src/app/components/Hero.tsx
index c743539..abc574f 100644
--- a/src/app/components/Hero.tsx
+++ b/src/app/components/Hero.tsx
@@ -13,7 +13,7 @@ export default function Hero({ header, subheader }: HeroProps) {
         <div className={styles.content}>
           <div className="flex flex-col items-start gap-3 self-start">
             <h1 className={styles.heading}>{header}</h1>
-            <p className="font-['Source Sans Pro'] max-w-[862px] text-[22px] font-light leading-[33px] text-[#224a58]">
+            <p className="font-['Source Sans Pro'] m-0 max-w-[862px] text-[22px] font-light leading-[33px] text-[#224a58]">
               {subheader}
             </p>
           </div>

From da64fee30fb4c540363c8258ac8b6f44cab07bb6 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Wed, 30 Oct 2024 13:54:51 -0400
Subject: [PATCH 07/34] add invitation cta component

---
 src/app/components/InvitationCta.tsx | 28 ++++++++++++++++++++++++++++
 src/app/page.tsx                     |  2 ++
 2 files changed, 30 insertions(+)
 create mode 100644 src/app/components/InvitationCta.tsx

diff --git a/src/app/components/InvitationCta.tsx b/src/app/components/InvitationCta.tsx
new file mode 100644
index 0000000..ec8a554
--- /dev/null
+++ b/src/app/components/InvitationCta.tsx
@@ -0,0 +1,28 @@
+import { GridContainer } from '@trussworks/react-uswds';
+import Link from 'next/link';
+
+export default function InvitationCta() {
+  return (
+    <section className="usa-graphic-list usa-section usa-section--light-blue">
+      <GridContainer>
+        <div className="flex flex-col items-center justify-center gap-5 self-stretch">
+          <div className="font-['Source Sans Pro'] self-stretch text-center text-[32px] font-bold text-[#224a58]">
+            Interested in getting started with DIBBs?
+          </div>
+          <div className="font-['Source Sans Pro'] self-stretch text-center text-base font-normal leading-relaxed text-[#224a58]">
+            Contact our team to learn more about how our products can help
+            improve your data workflows
+          </div>
+          <Link
+            href="#"
+            className="usa-btn inline-flex items-center justify-start gap-2.5 rounded border-2 border-[#224a58] bg-white px-5 py-3"
+          >
+            <span className="text-center text-base font-bold leading-none text-[#224a58]">
+              Engage with us
+            </span>
+          </Link>
+        </div>
+      </GridContainer>
+    </section>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 742fc6c..2624487 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,6 +3,7 @@ import { Grid } from '@trussworks/react-uswds';
 import Image from 'next/image';
 import { basePath } from './utils/constants';
 import Hero from './components/Hero';
+import InvitationCta from './components/InvitationCta';
 
 export default async function Home() {
   return (
@@ -53,6 +54,7 @@ export default async function Home() {
           </Grid>
         </div>
       </section>
+      <InvitationCta />
     </>
   );
 }

From d631dae4278fa8b2b589f66a2baa833cc053cfac Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Wed, 30 Oct 2024 13:55:31 -0400
Subject: [PATCH 08/34] set usa banner width to widescreen

---
 src/app/uswds-settings.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/uswds-settings.scss b/src/app/uswds-settings.scss
index 9683925..fe951b3 100644
--- a/src/app/uswds-settings.scss
+++ b/src/app/uswds-settings.scss
@@ -11,6 +11,7 @@
     // Spacing
     $theme-grid-container-max-width: "widescreen",
     $theme-header-max-width: "widescreen",
+    $theme-banner-max-width: "widescreen",
     
     // Typography
     $theme-font-path: "../../../../../../dist/fonts",

From 71e92467ef514b0b045288502c3fa08fc29e096b Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Wed, 30 Oct 2024 19:41:33 -0400
Subject: [PATCH 09/34] update section 2 text

---
 src/content/homepage/section_2.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/content/homepage/section_2.md b/src/content/homepage/section_2.md
index f48c4bb..7a4916b 100644
--- a/src/content/homepage/section_2.md
+++ b/src/content/homepage/section_2.md
@@ -1,10 +1,9 @@
 ---
 ---
 
-## Introducing PHDI
+## Introducing Data Integration Building Blocks
 
-Introducing Data Integration Building Blocks
-DIBBs are modular, open-source software that can be configured as a pipeline to clean, transform, and enrich data. We build cloud-enabled products that leverage DIBBs to provide the following benefits to public health jurisdictions:
+DIBBs are modular, open-source software that can be configured to clean, transform, and enrich data. We build cloud-enabled products that leverage DIBBs to provide the following benefits to public health jurisdictions:
 
 - Better, higher quality data for use in data analysis
 - Time-savings for public health staff thanks to reduced manual work

From 93f1115d5cdd756d262d0e412446f138def7fb04 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Wed, 30 Oct 2024 19:52:55 -0400
Subject: [PATCH 10/34] add hero to other pages

---
 src/app/case-studies/page.tsx   | 12 ++++++++++++
 src/app/engage-with-us/page.tsx | 12 ++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 src/app/case-studies/page.tsx
 create mode 100644 src/app/engage-with-us/page.tsx

diff --git a/src/app/case-studies/page.tsx b/src/app/case-studies/page.tsx
new file mode 100644
index 0000000..f6611fb
--- /dev/null
+++ b/src/app/case-studies/page.tsx
@@ -0,0 +1,12 @@
+import Hero from '../components/Hero';
+
+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>
+  );
+}
diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
new file mode 100644
index 0000000..5fc1d4a
--- /dev/null
+++ b/src/app/engage-with-us/page.tsx
@@ -0,0 +1,12 @@
+import Hero from '../components/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."
+      />
+    </div>
+  );
+}

From 9780828554b5f6d335a98896880b753e2e99e75f Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Thu, 31 Oct 2024 09:51:28 -0400
Subject: [PATCH 11/34] refactor component structure, scss files for specific
 component styling

---
 src/app/case-studies/page.tsx                 |   2 +-
 src/app/components/Footer/Footer.module.scss  |  11 +
 src/app/components/{ => Footer}/Footer.tsx    |  22 +-
 src/app/components/Header/Header.module.scss  |  11 +
 src/app/components/{ => Header}/Header.tsx    |   6 +-
 .../Hero}/Hero.module.scss                    |   0
 src/app/components/{ => Hero}/Hero.tsx        |   2 +-
 .../{ => InvitationCta}/InvitationCta.tsx     |   0
 .../MarkdownComponent.tsx                     |   2 +-
 .../NavigationLink/NavigationLink.module.scss |  11 +
 .../{ => NavigationLink}/NavigationLink.tsx   |   2 +-
 .../components/{ => UsaBanner}/UsaBanner.tsx  |   2 +-
 src/app/engage-with-us/page.tsx               |   2 +-
 src/app/layout.tsx                            |   6 +-
 src/app/page.tsx                              |   6 +-
 src/app/styles/Home.module.scss               | 286 ------------------
 16 files changed, 55 insertions(+), 316 deletions(-)
 create mode 100644 src/app/components/Footer/Footer.module.scss
 rename src/app/components/{ => Footer}/Footer.tsx (74%)
 create mode 100644 src/app/components/Header/Header.module.scss
 rename src/app/components/{ => Header}/Header.tsx (92%)
 rename src/app/{styles => components/Hero}/Hero.module.scss (100%)
 rename src/app/components/{ => Hero}/Hero.tsx (93%)
 rename src/app/components/{ => InvitationCta}/InvitationCta.tsx (100%)
 rename src/app/components/{ => MarkdownComponent}/MarkdownComponent.tsx (84%)
 create mode 100644 src/app/components/NavigationLink/NavigationLink.module.scss
 rename src/app/components/{ => NavigationLink}/NavigationLink.tsx (93%)
 rename src/app/components/{ => UsaBanner}/UsaBanner.tsx (97%)
 delete mode 100644 src/app/styles/Home.module.scss

diff --git a/src/app/case-studies/page.tsx b/src/app/case-studies/page.tsx
index f6611fb..11448d8 100644
--- a/src/app/case-studies/page.tsx
+++ b/src/app/case-studies/page.tsx
@@ -1,4 +1,4 @@
-import Hero from '../components/Hero';
+import Hero from '../components/Hero/Hero';
 
 export default function CaseStudies() {
   return (
diff --git a/src/app/components/Footer/Footer.module.scss b/src/app/components/Footer/Footer.module.scss
new file mode 100644
index 0000000..4aed8ce
--- /dev/null
+++ b/src/app/components/Footer/Footer.module.scss
@@ -0,0 +1,11 @@
+@media (min-width: 1024px) {
+  .navbarLogoText {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .navbarLogoText {
+    font-size: 13px;
+  }
+}
diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer/Footer.tsx
similarity index 74%
rename from src/app/components/Footer.tsx
rename to src/app/components/Footer/Footer.tsx
index 2c22c29..4330005 100644
--- a/src/app/components/Footer.tsx
+++ b/src/app/components/Footer/Footer.tsx
@@ -3,10 +3,10 @@ import { PrimaryNav } from '@trussworks/react-uswds';
 import Link from 'next/link';
 import Image from 'next/image';
 import React from 'react';
-import styles from '../styles/Home.module.scss';
-import { NavigationLink } from './NavigationLink';
+import { NavigationLink } from '../NavigationLink/NavigationLink';
 import classNames from 'classnames';
-import { basePath } from '../utils/constants';
+import { basePath } from '../../utils/constants';
+import styles from './Footer.module.scss';
 
 export default function Footer() {
   const [expanded, setExpanded] = React.useState(false);
@@ -15,24 +15,16 @@ export default function Footer() {
   };
 
   const testItemsMenu = [
-    <Link
-      key="one"
-      href="/"
-      className={classNames('usa-nav__link', styles.homeNavItem)}
-      onClick={onClick}
-    >
-      <span className={styles.navbarItemText}>Home</span>
-    </Link>,
-    <NavigationLink key="two" href="/" onClick={onClick}>
+    <NavigationLink key="one" href="/" onClick={onClick}>
       Home
     </NavigationLink>,
-    <NavigationLink key="three" href="/our-products" onClick={onClick}>
+    <NavigationLink key="two" href="/our-products" onClick={onClick}>
       Our products
     </NavigationLink>,
-    <NavigationLink key="four" href="/case-studies" onClick={onClick}>
+    <NavigationLink key="three" href="/case-studies" onClick={onClick}>
       Case studies
     </NavigationLink>,
-    <NavigationLink key="five" href="/engage-with-us" onClick={onClick}>
+    <NavigationLink key="four" href="/engage-with-us" onClick={onClick}>
       Engage with us
     </NavigationLink>,
   ];
diff --git a/src/app/components/Header/Header.module.scss b/src/app/components/Header/Header.module.scss
new file mode 100644
index 0000000..4aed8ce
--- /dev/null
+++ b/src/app/components/Header/Header.module.scss
@@ -0,0 +1,11 @@
+@media (min-width: 1024px) {
+  .navbarLogoText {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .navbarLogoText {
+    font-size: 13px;
+  }
+}
diff --git a/src/app/components/Header.tsx b/src/app/components/Header/Header.tsx
similarity index 92%
rename from src/app/components/Header.tsx
rename to src/app/components/Header/Header.tsx
index 0f09875..c1b816c 100644
--- a/src/app/components/Header.tsx
+++ b/src/app/components/Header/Header.tsx
@@ -2,10 +2,10 @@
 import { Header as USWDSHeader, PrimaryNav } from '@trussworks/react-uswds';
 import Image from 'next/image';
 import React from 'react';
-import styles from '../styles/Home.module.scss';
 import classNames from 'classnames';
-import { basePath } from '../utils/constants';
-import { NavigationLink } from './NavigationLink';
+import { basePath } from '../../utils/constants';
+import { NavigationLink } from '../NavigationLink/NavigationLink';
+import styles from './Header.module.scss';
 
 export default function Header() {
   const [expanded, setExpanded] = React.useState(false);
diff --git a/src/app/styles/Hero.module.scss b/src/app/components/Hero/Hero.module.scss
similarity index 100%
rename from src/app/styles/Hero.module.scss
rename to src/app/components/Hero/Hero.module.scss
diff --git a/src/app/components/Hero.tsx b/src/app/components/Hero/Hero.tsx
similarity index 93%
rename from src/app/components/Hero.tsx
rename to src/app/components/Hero/Hero.tsx
index abc574f..c5ae672 100644
--- a/src/app/components/Hero.tsx
+++ b/src/app/components/Hero/Hero.tsx
@@ -1,5 +1,5 @@
 import { GridContainer } from '@trussworks/react-uswds';
-import styles from '../styles/Hero.module.scss';
+import styles from './Hero.module.scss';
 
 interface HeroProps {
   header: string;
diff --git a/src/app/components/InvitationCta.tsx b/src/app/components/InvitationCta/InvitationCta.tsx
similarity index 100%
rename from src/app/components/InvitationCta.tsx
rename to src/app/components/InvitationCta/InvitationCta.tsx
diff --git a/src/app/components/MarkdownComponent.tsx b/src/app/components/MarkdownComponent/MarkdownComponent.tsx
similarity index 84%
rename from src/app/components/MarkdownComponent.tsx
rename to src/app/components/MarkdownComponent/MarkdownComponent.tsx
index 2e3df72..e3e6df7 100644
--- a/src/app/components/MarkdownComponent.tsx
+++ b/src/app/components/MarkdownComponent/MarkdownComponent.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-import { getMarkdownContent } from '../utils/markdown';
+import { getMarkdownContent } from '../../utils/markdown';
 
 export default async function MarkdownContent(fileName: string) {
   const markdownContent = await getMarkdownContent(fileName);
diff --git a/src/app/components/NavigationLink/NavigationLink.module.scss b/src/app/components/NavigationLink/NavigationLink.module.scss
new file mode 100644
index 0000000..ba5f421
--- /dev/null
+++ b/src/app/components/NavigationLink/NavigationLink.module.scss
@@ -0,0 +1,11 @@
+@media (min-width: 1024px) {
+  .navbarItemText {
+    color: #f0f0f0;
+  }
+}
+
+@media (max-width: 1024px) {
+  .navbarItemText {
+    color: #565c65;
+  }
+}
diff --git a/src/app/components/NavigationLink.tsx b/src/app/components/NavigationLink/NavigationLink.tsx
similarity index 93%
rename from src/app/components/NavigationLink.tsx
rename to src/app/components/NavigationLink/NavigationLink.tsx
index baf5df1..18ce846 100644
--- a/src/app/components/NavigationLink.tsx
+++ b/src/app/components/NavigationLink/NavigationLink.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import Link, { LinkProps } from 'next/link';
 import { usePathname } from 'next/navigation';
-import styles from '../styles/Home.module.scss';
+import styles from './NavigationLink.module.scss';
 
 interface NavigationLinkProps extends Pick<LinkProps, 'href' | 'onClick'> {
   children: React.ReactNode;
diff --git a/src/app/components/UsaBanner.tsx b/src/app/components/UsaBanner/UsaBanner.tsx
similarity index 97%
rename from src/app/components/UsaBanner.tsx
rename to src/app/components/UsaBanner/UsaBanner.tsx
index edeeb4c..df04f53 100644
--- a/src/app/components/UsaBanner.tsx
+++ b/src/app/components/UsaBanner/UsaBanner.tsx
@@ -11,7 +11,7 @@ import {
   MediaBlockBody,
   Icon,
 } from '@trussworks/react-uswds';
-import { basePath } from '../utils/constants';
+import { basePath } from '../../utils/constants';
 
 export default function USABanner() {
   const [isOpen, setIsOpen] = useState(false);
diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
index 5fc1d4a..6bd4e8e 100644
--- a/src/app/engage-with-us/page.tsx
+++ b/src/app/engage-with-us/page.tsx
@@ -1,4 +1,4 @@
-import Hero from '../components/Hero';
+import Hero from '../components/Hero/Hero';
 
 export default function EngageWithUs() {
   return (
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d511a5a..ee9f752 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
-import Header from './components/Header';
-import Footer from './components/Footer';
-import USABanner from './components/UsaBanner';
+import Header from './components/Header/Header';
+import Footer from './components/Footer/Footer';
+import USABanner from './components/UsaBanner/UsaBanner';
 import { basePath } from './utils/constants';
 import './globals.scss';
 import './custom-styles.css';
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2624487..8755b05 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,9 @@
-import MarkdownContent from './components/MarkdownComponent';
+import MarkdownContent from './components/MarkdownComponent/MarkdownComponent';
 import { Grid } from '@trussworks/react-uswds';
 import Image from 'next/image';
 import { basePath } from './utils/constants';
-import Hero from './components/Hero';
-import InvitationCta from './components/InvitationCta';
+import Hero from './components/Hero/Hero';
+import InvitationCta from './components/InvitationCta/InvitationCta';
 
 export default async function Home() {
   return (
diff --git a/src/app/styles/Home.module.scss b/src/app/styles/Home.module.scss
deleted file mode 100644
index b1c5946..0000000
--- a/src/app/styles/Home.module.scss
+++ /dev/null
@@ -1,286 +0,0 @@
-.productOfferingsLink {
-  width: 300px;
-  background-color: deeppink !important;
-}
-
-.desktopHeroImage2 {
-  margin-bottom: -132px;
-}
-
-.dekstopHeroImage1 {
-  margin-bottom: -2px;
-}
-
-.buildingBlockImage {
-  margin-bottom: -68px;
-}
-
-.buidlingBlockInfoImage {
-  margin-bottom: 0px;
-}
-
-.productOfferingsImage {
-  margin-bottom: -8px;
-}
-
-.sdkInfoMaxWidth {
-  max-width: 100%;
-}
-
-.letterSpacingNeg1 {
-  letter-spacing: -0.2px;
-}
-
-.footerBar {
-  width: 100px;
-  height: 0px;
-  border: 0.5px solid #ffffff;
-}
-
-.getStartedHeader {
-  line-height: 38px;
-}
-
-.buildingBlockItemHeaderText {
-  font-size: 22px;
-}
-
-@media (min-width: 1024px) {
-  .desktopHeroImage3 {
-    margin-top: -289px;
-    margin-bottom: 0px;
-  }
-
-  .backgroundInvitation {
-    background-color: white !important;
-  }
-
-  .navbarItemText {
-    color: #f0f0f0;
-  }
-
-  .navbarItemText:hover {
-    // border-bottom: 2px solid white !important;
-    // padding-bottom: 8px;
-  }
-
-  .headerText,
-  .buildingBlockItemHeader {
-    text-align: left;
-  }
-
-  .partnerItemHeaders {
-    font-family: 'Public Sans', sans-serif;
-    font-weight: 700;
-    font-size: 32px;
-    line-height: 38px;
-  }
-
-  .dynamicHeader {
-    font-size: 40px;
-  }
-
-  .copyrightText {
-    font-size: 14px;
-    text-align: right;
-  }
-
-  .subBodyTextLineHeight {
-    line-height: 25.92px;
-  }
-
-  .homeNavItem {
-    display: none !important;
-  }
-
-  .dynamicShadow {
-    box-shadow: 0 1px 0.25rem 0 rgba(0, 0, 0, 0.1);
-  }
-
-  .navbarLogoText {
-    font-size: 22px;
-  }
-}
-
-@media (max-width: 1024px) {
-  .desktopHeroImage3 {
-    margin-top: 0px;
-  }
-
-  .backgroundInvitation {
-    background-color: #28a0cb;
-  }
-
-  .navbarItemText {
-    color: #565c65;
-  }
-
-  .headerText,
-  .buildingBlockItemHeader {
-    text-align: center;
-  }
-
-  .partnerItemHeaders {
-    font-family: 'Public Sans', sans-serif;
-    font-weight: 400;
-    font-size: 22px;
-    line-height: 26px;
-  }
-
-  .dynamicHeader {
-    font-size: 32px;
-  }
-
-  .copyrightText {
-    font-size: 12px;
-    text-align: center;
-  }
-
-  .subBodyTextLineHeight {
-    line-height: 22.68px;
-  }
-
-  .homeNavItem {
-    display: inline;
-  }
-
-  .dynamicShadow {
-    box-shadow: none;
-  }
-
-  .navbarLogoText {
-    font-size: 13px;
-  }
-}
-
-.main {
-  min-height: 100vh;
-  padding: 4rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  display: flex;
-  flex: 1;
-  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family:
-    Menlo,
-    Monaco,
-    Lucida Console,
-    Liberation Mono,
-    DejaVu Sans Mono,
-    Bitstream Vera Sans Mono,
-    Courier New,
-    monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-}
-
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition:
-    color 0.15s ease,
-    border-color 0.15s ease;
-  max-width: 300px;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}
-
-.buttonAccent {
-  background-color: white !important;
-  box-shadow: none !important;
-}
-
-.buttonAccent:hover {
-  background-color: rgb(245, 245, 245) !important;
-  box-shadow: none !important;
-}

From 59c4e769d3f1d89cd7d8020fc8b9c3033e42d8d2 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Thu, 31 Oct 2024 10:06:11 -0400
Subject: [PATCH 12/34] add extension recommendations and sane default
 workspace settings

---
 .vscode/extensions.json |  5 +++++
 .vscode/settings.json   | 22 ++++++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 .vscode/extensions.json
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..0f148de
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "esbenp.prettier-vscode"
+    ]
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..223187e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,22 @@
+{
+  "editor.formatOnSave": true,
+  "css.format.enable": true,
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

From f0f729edd60bc6d9dd2f493f7c7d0fe5ffd16eac Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Thu, 31 Oct 2024 10:09:11 -0400
Subject: [PATCH 13/34] Remove unused import

---
 src/app/components/Footer/Footer.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/components/Footer/Footer.tsx b/src/app/components/Footer/Footer.tsx
index 4330005..bd64504 100644
--- a/src/app/components/Footer/Footer.tsx
+++ b/src/app/components/Footer/Footer.tsx
@@ -1,6 +1,5 @@
 'use client';
 import { PrimaryNav } from '@trussworks/react-uswds';
-import Link from 'next/link';
 import Image from 'next/image';
 import React from 'react';
 import { NavigationLink } from '../NavigationLink/NavigationLink';

From 790e472e07886409ae613615be6dad6dc3bfe495 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Thu, 31 Oct 2024 10:12:06 -0400
Subject: [PATCH 14/34] cleanup

---
 src/app/components/Footer/Footer.tsx | 60 +++++++++++++---------------
 1 file changed, 28 insertions(+), 32 deletions(-)

diff --git a/src/app/components/Footer/Footer.tsx b/src/app/components/Footer/Footer.tsx
index bd64504..55697fb 100644
--- a/src/app/components/Footer/Footer.tsx
+++ b/src/app/components/Footer/Footer.tsx
@@ -29,39 +29,35 @@ 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>
-            <button type="button" className="usa-menu-btn">
-              Menu
-            </button>
+    <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>
-          <PrimaryNav
-            items={testItemsMenu}
-            mobileExpanded={expanded}
-            onToggleMobileNav={onClick}
-          />
+          <button type="button" className="usa-menu-btn">
+            Menu
+          </button>
         </div>
-      </footer>
-    </>
+        <PrimaryNav
+          items={testItemsMenu}
+          mobileExpanded={expanded}
+          onToggleMobileNav={onClick}
+        />
+      </div>
+    </footer>
   );
 }

From 1ea4382692211e21ada95da1cd249391e31f62f2 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Thu, 31 Oct 2024 15:24:07 -0400
Subject: [PATCH 15/34] content container, some work on home page

---
 .../ContentContainer/ContentContainer.tsx     |  12 ++
 src/app/page.tsx                              | 135 ++++++++++++------
 2 files changed, 107 insertions(+), 40 deletions(-)
 create mode 100644 src/app/components/ContentContainer/ContentContainer.tsx

diff --git a/src/app/components/ContentContainer/ContentContainer.tsx b/src/app/components/ContentContainer/ContentContainer.tsx
new file mode 100644
index 0000000..4132dfb
--- /dev/null
+++ b/src/app/components/ContentContainer/ContentContainer.tsx
@@ -0,0 +1,12 @@
+import { GridContainer } from '@trussworks/react-uswds';
+
+interface ContentContainerProps {
+  children: React.ReactNode;
+}
+export function ContentContainer({ children }: ContentContainerProps) {
+  return (
+    <section>
+      <GridContainer className="px-14 py-20">{children}</GridContainer>
+    </section>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8755b05..2bc11db 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,10 @@
-import MarkdownContent from './components/MarkdownComponent/MarkdownComponent';
 import { Grid } from '@trussworks/react-uswds';
 import Image from 'next/image';
 import { basePath } from './utils/constants';
 import Hero from './components/Hero/Hero';
 import InvitationCta from './components/InvitationCta/InvitationCta';
+import { ContentContainer } from './components/ContentContainer/ContentContainer';
+import Link from 'next/link';
 
 export default async function Home() {
   return (
@@ -15,46 +16,100 @@ export default async function Home() {
       timely public health action using CDC's free, cloud-based products built
       from Data Integration Building Blocks, or DIBBs."
       />
-      <section className="usa-section">
-        <div className="grid-container">
-          <Grid row>
-            <Grid col={5} className="flex-vertical-center padding-x-1">
-              <Image
-                src={`${basePath}/images/placeholder.png`}
-                width={480}
-                height={320}
-                alt="Placeholder"
-              />
-            </Grid>
-            <Grid col={7}>{MarkdownContent('homepage/section_2.md')}</Grid>
-          </Grid>
-        </div>
-      </section>
-      <section className="usa-section">
-        <div className="grid-container">
-          <Grid row>
-            <Grid col={5}>{MarkdownContent('homepage/section_3.md')}</Grid>
-            <Grid col={7} className="flex-vertical-center padding-x-1">
-              <Image
-                src={`${basePath}/images/placeholder.png`}
-                width={525}
-                height={312}
-                alt="Placeholder"
-              />
-            </Grid>
-          </Grid>
-        </div>
-      </section>
-      <section className="usa-section">
-        <div className="grid-container">
-          <Grid row>
-            <Grid col={12} className="flex-center">
-              {MarkdownContent('homepage/section_4.md')}
-            </Grid>
-          </Grid>
-        </div>
-      </section>
+
+      <SectionOne />
+      <SectionTwo />
+      <SectionThree />
       <InvitationCta />
     </>
   );
 }
+
+function SectionOne() {
+  return (
+    <ContentContainer>
+      <Grid row gap>
+        <Image
+          className="max-h-[320px] max-w-[480px]"
+          src={`${basePath}/images/placeholder.png`}
+          width={480}
+          height={320}
+          alt="Placeholder"
+        />
+        <div className="flex max-w-screen-md flex-col gap-5">
+          <h2 className="font-['Source Sans Pro'] text-[32px] font-bold text-[#224a58]">
+            Introducing Data Integration Building Blocks
+          </h2>
+          <div className="flex flex-col gap-2">
+            <p className="font-['Source Sans Pro'] m-0 max-w-[635px] p-0 text-base font-normal leading-relaxed text-[#224a58]">
+              DIBBs are modular, open-source software that can be configured to
+              clean, transform, and enrich data. We build cloud-enabled products
+              that leverage DIBBs to provide the following benefits to public
+              health jurisdictions:
+            </p>
+            <ul className="font-['Source Sans Pro'] text-base font-semibold leading-relaxed text-[#224a58]">
+              <li>Better, higher quality data for use in data analysis</li>
+              <li>
+                Time-savings for public health staff thanks to reduced manual
+                work
+              </li>
+              <li>More usable data that makes case investigation easier</li>
+              <li>Automated data processing that streamlines data workflows</li>
+              <li>
+                Flexible cloud deployment options, including free central
+                hosting through CDC
+              </li>
+            </ul>
+          </div>
+        </div>
+      </Grid>
+    </ContentContainer>
+  );
+}
+
+function SectionTwo() {
+  return (
+    <ContentContainer>
+      <Grid row gap>
+        <div>
+          <h2 className="font-['Source Sans Pro'] max-w-[372px] text-[32px] font-bold text-[#224a58]">
+            Unlock the value of your jurisdiction's data
+          </h2>
+          <p className="font-['Source Sans Pro'] max-w-[450px] text-base font-normal leading-relaxed text-[#224a58]">
+            DIBBs products help jurisdictions make the most of their data. From
+            improving the usability of electronic case reporting (eCR) data to
+            streamlining data collection from healthcare providers without the
+            need for a direct connection, our products save jurisdictions time
+            and effort for case investigation and analysis.
+          </p>
+          <Link className="usa-button usa-button--active" href="/">
+            Find out more about our products
+          </Link>
+        </div>
+        <Image
+          className="max-h-[320px] max-w-[480px]"
+          src={`${basePath}/images/placeholder.png`}
+          width={480}
+          height={320}
+          alt="Placeholder"
+        />
+      </Grid>
+    </ContentContainer>
+  );
+}
+
+function SectionThree() {
+  return (
+    <ContentContainer>
+      <div className="flex flex-col items-center">
+        <h2 className="font-['Source Sans Pro'] text-center text-[32px] font-bold text-[#224a58]">
+          Jurisdictions working with DIBBs
+        </h2>
+        <p className="font-['Source Sans Pro'] text-center text-base font-normal leading-relaxed text-[#224a58]">
+          State and local public health jurisdictions across the United States
+          used DIBBs to solve their toughest data challenges
+        </p>
+      </div>
+    </ContentContainer>
+  );
+}

From a2f6b9d297cbefeb5d38195a07d9ed0a19d7afd8 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Thu, 31 Oct 2024 15:29:46 -0400
Subject: [PATCH 16/34] formatting

---
 .vscode/extensions.json                  |   6 +-
 src/app/components/Hero/Hero.module.scss |  28 ++--
 src/app/custom-styles.css                | 202 +++++++++++------------
 src/app/globals.scss                     |   4 +-
 src/app/uswds-settings.scss              |  28 ++--
 5 files changed, 132 insertions(+), 136 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 0f148de..c83e263 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,5 +1,3 @@
 {
-    "recommendations": [
-        "esbenp.prettier-vscode"
-    ]
-}
\ No newline at end of file
+  "recommendations": ["esbenp.prettier-vscode"]
+}
diff --git a/src/app/components/Hero/Hero.module.scss b/src/app/components/Hero/Hero.module.scss
index df87bed..7da2446 100644
--- a/src/app/components/Hero/Hero.module.scss
+++ b/src/app/components/Hero/Hero.module.scss
@@ -1,18 +1,18 @@
 .content {
-    display: flex;
-    padding: 0px 30px;
-    align-items: center;
-    gap: 60px;
-    max-width: 1200px;
+  display: flex;
+  padding: 0px 30px;
+  align-items: center;
+  gap: 60px;
+  max-width: 1200px;
 }
 
 .heading {
-    max-width: 965px;
-    color: #224A58;
-    font-family: 'Source Sans Pro', sans-serif;
-    font-size: 40px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-    margin: 0px;
-}
\ No newline at end of file
+  max-width: 965px;
+  color: #224a58;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  margin: 0px;
+}
diff --git a/src/app/custom-styles.css b/src/app/custom-styles.css
index 778120e..5999070 100644
--- a/src/app/custom-styles.css
+++ b/src/app/custom-styles.css
@@ -3,112 +3,110 @@
 @tailwind utilities;
 
 @layer utilities {
-    .text-balance {
-      text-wrap: balance;
-    }
+  .text-balance {
+    text-wrap: balance;
   }
+}
 
-  h1 {
-    margin: 2rem 0 2rem 0;
-    font-size: larger;
-  }
+h1 {
+  margin: 2rem 0 2rem 0;
+  font-size: larger;
+}
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+  --header-teal: #224a58;
+  --background-light-blue: #dcecf3;
+}
 
+@media (prefers-color-scheme: dark) {
   :root {
-    --background: #ffffff;
-    --foreground: #171717;
-    --header-teal: #224a58;
-    --background-light-blue: #dcecf3;
+    --background: #0a0a0a;
+    --foreground: #ededed;
   }
-  
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --background: #0a0a0a;
-      --foreground: #ededed;
-    }
-  }
-  
-  body {
-    /* color: var(--foreground);
+}
+
+body {
+  /* color: var(--foreground);
     background: var(--background); */
-    font-family: Arial, Helvetica, sans-serif;
-  }
-  
-  
-  
-  .usa-logo a {
-    color: #ffffff;
-  }
-  
-  .bg-background-teal {
-    background-color: var(--header-teal);
-  }
-  
-  @media (min-width: 64em) {
-    .usa-logo {
-      margin-top: 2rem;
-      margin-bottom: 2rem;
-    }
-  }
-  
-  .height-100 {
-    height: 100%;
-  }
-  
-  .flex-vertical-center {
-    display: flex;
-    align-items: center !important;
-    vertical-align: center;
-    height: auto;
-  }
-  
-  .flex-center {
-    text-align: center;
-  }
-  
-  .usa-section--light-blue {
-    background-color: var(--background-light-blue);
-  }
-  
-  h1 {
-    font-family: 'Source Sans Pro', sans-serif;
-    font-size: 40px;
-    font-weight: 700;
-    line-height: 50.28px;
-    text-align: left;
-  }
-  
-  h2 {
-    color: #224a58;
-    font-family: 'Source Sans Pro', sans-serif;
-    font-size: 2rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-  }
-  
-  ul {
-    margin-bottom: 1em;
-    margin-top: 1em;
-    line-height: 1.5;
-    padding-left: 3ch;
-    list-style: disc;
-  }
-  ul:last-child {
-    margin-bottom: 0;
-  }
-  ul,
-  ol {
-    margin-top: 0.25em;
-  }
-  ul li {
-    margin-bottom: 0.25em;
-    max-width: 68ex;
-  }
-  ul li:last-child {
-    margin-bottom: 0;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.usa-logo a {
+  color: #ffffff;
+}
+
+.bg-background-teal {
+  background-color: var(--header-teal);
+}
+
+@media (min-width: 64em) {
+  .usa-logo {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
   }
-  
-  p {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
\ No newline at end of file
+}
+
+.height-100 {
+  height: 100%;
+}
+
+.flex-vertical-center {
+  display: flex;
+  align-items: center !important;
+  vertical-align: center;
+  height: auto;
+}
+
+.flex-center {
+  text-align: center;
+}
+
+.usa-section--light-blue {
+  background-color: var(--background-light-blue);
+}
+
+h1 {
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 50.28px;
+  text-align: left;
+}
+
+h2 {
+  color: #224a58;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 2rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+ul {
+  margin-bottom: 1em;
+  margin-top: 1em;
+  line-height: 1.5;
+  padding-left: 3ch;
+  list-style: disc;
+}
+ul:last-child {
+  margin-bottom: 0;
+}
+ul,
+ol {
+  margin-top: 0.25em;
+}
+ul li {
+  margin-bottom: 0.25em;
+  max-width: 68ex;
+}
+ul li:last-child {
+  margin-bottom: 0;
+}
+
+p {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
diff --git a/src/app/globals.scss b/src/app/globals.scss
index b529bff..576d4f2 100644
--- a/src/app/globals.scss
+++ b/src/app/globals.scss
@@ -1,2 +1,2 @@
-@forward "uswds-settings";
-@forward "uswds";
+@forward 'uswds-settings';
+@forward 'uswds';
diff --git a/src/app/uswds-settings.scss b/src/app/uswds-settings.scss
index fe951b3..e64f1a5 100644
--- a/src/app/uswds-settings.scss
+++ b/src/app/uswds-settings.scss
@@ -1,18 +1,18 @@
 // reference: https://github.com/CDCgov/dibbs-query-connector/blob/main/query-connector/src/styles/uswds-settings.scss
 
-@use "uswds-core" with (
-    // General
-    $theme-image-path: "../../../../../../dist/img",
+@use 'uswds-core' with (
+  // General
+  $theme-image-path: '../../../../../../dist/img',
 
-    // Color
-    // Component
-    $theme-hero-image: "../../../../dist/img/hero.jpg",
+  // Color
+  // Component
+  $theme-hero-image: '../../../../dist/img/hero.jpg',
 
-    // Spacing
-    $theme-grid-container-max-width: "widescreen",
-    $theme-header-max-width: "widescreen",
-    $theme-banner-max-width: "widescreen",
-    
-    // Typography
-    $theme-font-path: "../../../../../../dist/fonts",
-  );
\ No newline at end of file
+  // Spacing
+  $theme-grid-container-max-width: 'widescreen',
+  $theme-header-max-width: 'widescreen',
+  $theme-banner-max-width: 'widescreen',
+
+  // Typography
+  $theme-font-path: '../../../../../../dist/fonts'
+);

From 08440a55606291482610173d6b99e9270b1eab1d Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Thu, 31 Oct 2024 15:32:13 -0400
Subject: [PATCH 17/34] add ignore rule

---
 .eslintrc.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 2502e77..b89e1b1 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -9,6 +9,7 @@
   ],
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "react/no-unescaped-entities": "off"
   }
 }

From a93dee78807d3f0a9d125be7c0290f79937dcbed Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Thu, 31 Oct 2024 15:35:44 -0400
Subject: [PATCH 18/34] link to engage with us page from invitationcta

---
 src/app/components/InvitationCta/InvitationCta.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/InvitationCta/InvitationCta.tsx b/src/app/components/InvitationCta/InvitationCta.tsx
index ec8a554..a317be0 100644
--- a/src/app/components/InvitationCta/InvitationCta.tsx
+++ b/src/app/components/InvitationCta/InvitationCta.tsx
@@ -14,7 +14,7 @@ export default function InvitationCta() {
             improve your data workflows
           </div>
           <Link
-            href="#"
+            href="/engage-with-us"
             className="usa-btn inline-flex items-center justify-start gap-2.5 rounded border-2 border-[#224a58] bg-white px-5 py-3"
           >
             <span className="text-center text-base font-bold leading-none text-[#224a58]">

From cf713368b93192b40be95d02f610759f9a79b8f6 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Thu, 31 Oct 2024 15:46:40 -0400
Subject: [PATCH 19/34] move invitationcta component into home page file

---
 .../InvitationCta/InvitationCta.tsx           | 28 ------------------
 src/app/page.tsx                              | 29 +++++++++++++++++--
 src/content/homepage/section_2.md             |  5 ++--
 3 files changed, 30 insertions(+), 32 deletions(-)
 delete mode 100644 src/app/components/InvitationCta/InvitationCta.tsx

diff --git a/src/app/components/InvitationCta/InvitationCta.tsx b/src/app/components/InvitationCta/InvitationCta.tsx
deleted file mode 100644
index a317be0..0000000
--- a/src/app/components/InvitationCta/InvitationCta.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { GridContainer } from '@trussworks/react-uswds';
-import Link from 'next/link';
-
-export default function InvitationCta() {
-  return (
-    <section className="usa-graphic-list usa-section usa-section--light-blue">
-      <GridContainer>
-        <div className="flex flex-col items-center justify-center gap-5 self-stretch">
-          <div className="font-['Source Sans Pro'] self-stretch text-center text-[32px] font-bold text-[#224a58]">
-            Interested in getting started with DIBBs?
-          </div>
-          <div className="font-['Source Sans Pro'] self-stretch text-center text-base font-normal leading-relaxed text-[#224a58]">
-            Contact our team to learn more about how our products can help
-            improve your data workflows
-          </div>
-          <Link
-            href="/engage-with-us"
-            className="usa-btn inline-flex items-center justify-start gap-2.5 rounded border-2 border-[#224a58] bg-white px-5 py-3"
-          >
-            <span className="text-center text-base font-bold leading-none text-[#224a58]">
-              Engage with us
-            </span>
-          </Link>
-        </div>
-      </GridContainer>
-    </section>
-  );
-}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2bc11db..8975cdf 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,8 +1,7 @@
-import { Grid } from '@trussworks/react-uswds';
+import { Grid, GridContainer } from '@trussworks/react-uswds';
 import Image from 'next/image';
 import { basePath } from './utils/constants';
 import Hero from './components/Hero/Hero';
-import InvitationCta from './components/InvitationCta/InvitationCta';
 import { ContentContainer } from './components/ContentContainer/ContentContainer';
 import Link from 'next/link';
 
@@ -113,3 +112,29 @@ function SectionThree() {
     </ContentContainer>
   );
 }
+
+export function InvitationCta() {
+  return (
+    <section className="usa-graphic-list usa-section usa-section--light-blue">
+      <GridContainer>
+        <div className="flex flex-col items-center justify-center gap-5 self-stretch">
+          <div className="font-['Source Sans Pro'] self-stretch text-center text-[32px] font-bold text-[#224a58]">
+            Interested in getting started with DIBBs?
+          </div>
+          <div className="font-['Source Sans Pro'] self-stretch text-center text-base font-normal leading-relaxed text-[#224a58]">
+            Contact our team to learn more about how our products can help
+            improve your data workflows
+          </div>
+          <Link
+            href="/engage-with-us"
+            className="usa-btn inline-flex items-center justify-start gap-2.5 rounded border-2 border-[#224a58] bg-white px-5 py-3"
+          >
+            <span className="text-center text-base font-bold leading-none text-[#224a58]">
+              Engage with us
+            </span>
+          </Link>
+        </div>
+      </GridContainer>
+    </section>
+  );
+}
diff --git a/src/content/homepage/section_2.md b/src/content/homepage/section_2.md
index 7a4916b..f48c4bb 100644
--- a/src/content/homepage/section_2.md
+++ b/src/content/homepage/section_2.md
@@ -1,9 +1,10 @@
 ---
 ---
 
-## Introducing Data Integration Building Blocks
+## Introducing PHDI
 
-DIBBs are modular, open-source software that can be configured to clean, transform, and enrich data. We build cloud-enabled products that leverage DIBBs to provide the following benefits to public health jurisdictions:
+Introducing Data Integration Building Blocks
+DIBBs are modular, open-source software that can be configured as a pipeline to clean, transform, and enrich data. We build cloud-enabled products that leverage DIBBs to provide the following benefits to public health jurisdictions:
 
 - Better, higher quality data for use in data analysis
 - Time-savings for public health staff thanks to reduced manual work

From 2cdc703cb74192892703ff2f673d8d56ce611547 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Fri, 1 Nov 2024 10:54:39 -0400
Subject: [PATCH 20/34] cta component should not be exported

---
 src/app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8975cdf..35352eb 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -113,7 +113,7 @@ function SectionThree() {
   );
 }
 
-export function InvitationCta() {
+function InvitationCta() {
   return (
     <section className="usa-graphic-list usa-section usa-section--light-blue">
       <GridContainer>

From e2fde13c1f257cc5c826d9cdfa2283747efffb99 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Fri, 1 Nov 2024 10:54:53 -0400
Subject: [PATCH 21/34] WIP engage with us page layout

---
 src/app/engage-with-us/page.tsx | 123 ++++++++++++++++++++++++++++++++
 1 file changed, 123 insertions(+)

diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
index 6bd4e8e..9a8506f 100644
--- a/src/app/engage-with-us/page.tsx
+++ b/src/app/engage-with-us/page.tsx
@@ -1,3 +1,14 @@
+'use client';
+import {
+  Button,
+  ComboBox,
+  Form,
+  Grid,
+  Label,
+  Textarea,
+  TextInput,
+} from '@trussworks/react-uswds';
+import { ContentContainer } from '../components/ContentContainer/ContentContainer';
 import Hero from '../components/Hero/Hero';
 
 export default function EngageWithUs() {
@@ -7,6 +18,118 @@ export default function EngageWithUs() {
         header="Get started with DIBBs products"
         subheader="Learn how your jurisdiction can start working with the DIBBs team."
       />
+      <ContentContainer>
+        <Grid
+          row
+          gap="lg"
+          className="px-10"
+          tablet={{
+            col: true,
+          }}
+        >
+          <Grid>
+            <Left />
+          </Grid>
+          <Grid>
+            <Right />
+          </Grid>
+        </Grid>
+      </ContentContainer>
     </div>
   );
 }
+
+function Left() {
+  return (
+    <>
+      <h2>Contact Us</h2>
+      <p>Fill out the form below to get in touch with us</p>
+      <Form
+        onSubmit={() => {}}
+        className="align-start flex min-w-[500px] flex-col gap-y-2"
+      >
+        <Label
+          htmlFor="name"
+          className="font-['Source Sans Pro'] self-stretch text-base font-bold leading-relaxed text-[#224a58]"
+        >
+          Name
+        </Label>
+        <TextInput id="name" name="name" type="text" />
+        <Label
+          htmlFor="email"
+          className="font-['Source Sans Pro'] self-stretch text-base font-bold leading-relaxed text-[#224a58]"
+        >
+          Email Address
+        </Label>
+        <TextInput id="email" name="email" type="email" />
+        <Label
+          htmlFor="organization"
+          className="font-['Source Sans Pro'] self-stretch text-base font-bold leading-relaxed text-[#224a58]"
+        >
+          Organization
+        </Label>
+        <TextInput id="organization" name="organization" type="text" />
+        <Label
+          htmlFor="inquiry"
+          className="font-['Source Sans Pro'] self-stretch text-base font-bold leading-relaxed text-[#224a58]"
+        >
+          Type of inquiry
+        </Label>
+        <ComboBox
+          id="inquiry"
+          name="inquiry"
+          options={[
+            {
+              label: 'General interest in DIBBs products',
+              value: 'general-interest',
+            },
+          ]}
+          defaultValue="general-interest"
+          onChange={() => {}}
+        />
+        <Label
+          htmlFor="message"
+          className="font-['Source Sans Pro'] self-stretch text-base font-bold leading-relaxed text-[#224a58]"
+        >
+          Message
+        </Label>
+        <Textarea id="message" name="message" className="resize-none" />
+      </Form>
+      <Button
+        type="submit"
+        className="font-['Source Sans Pro'] mt-6 inline-flex h-11 items-center justify-start gap-2.5 rounded bg-[#224a58] px-5 py-3 text-right text-base font-bold text-white"
+      >
+        Send inquiry
+      </Button>
+    </>
+  );
+}
+
+function Right() {
+  return (
+    <>
+      <div id="content" className="flex max-w-[524px] flex-col gap-10 pt-4">
+        <div className="border border-dashed bg-white p-2 text-center">
+          <p className="font-['Source Sans Pro'] text-center text-[22px] font-bold leading-[33px] text-black">
+            All consultations with the DIBBs team are 100% free. There's no cost
+            to use our products beyond costs to host within your jurisdiction
+            should you choose to do so.
+          </p>
+        </div>
+        <div>
+          <div className="w-[500px]">
+            <p className="font-['Source Sans Pro'] text-[22px] font-bold leading-[33px] text-[#224a58]">
+              "Our epidemiologists waste 80% of their time cleaning data and
+              can't do useful analysis. The end goal of DIBBs infrastructure is
+              to free up that 80% of their time to do actual public health
+              work."
+            </p>
+            <p className="font-['Source Sans Pro'] text-[22px] font-light leading-[33px] text-[#224a58]">
+              - Public Health Official, Virginia Department of Health
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

From 6fbefdcd43b67e06919cec67d5656407eaa51103 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Fri, 1 Nov 2024 11:59:26 -0400
Subject: [PATCH 22/34] update styles

---
 src/app/custom-styles.css | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/src/app/custom-styles.css b/src/app/custom-styles.css
index 5999070..304a28c 100644
--- a/src/app/custom-styles.css
+++ b/src/app/custom-styles.css
@@ -8,29 +8,18 @@
   }
 }
 
-h1 {
-  margin: 2rem 0 2rem 0;
-  font-size: larger;
-}
-
 :root {
   --background: #ffffff;
   --foreground: #171717;
   --header-teal: #224a58;
   --background-light-blue: #dcecf3;
+  font-size: 16px; /* base value for rem */
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
+html,
 body {
-  /* color: var(--foreground);
-    background: var(--background); */
-  font-family: Arial, Helvetica, sans-serif;
+  background: var(--background);
+  font-family: 'Source Sans Pro', sans-serif;
 }
 
 .usa-logo a {

From 526c88dc5375a486d05e3a50d8a5a441853ac0bc Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Fri, 1 Nov 2024 12:00:05 -0400
Subject: [PATCH 23/34] removed unused styling from engage with us

---
 src/app/engage-with-us/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
index 9a8506f..29ef258 100644
--- a/src/app/engage-with-us/page.tsx
+++ b/src/app/engage-with-us/page.tsx
@@ -109,22 +109,22 @@ function Right() {
   return (
     <>
       <div id="content" className="flex max-w-[524px] flex-col gap-10 pt-4">
-        <div className="border border-dashed bg-white p-2 text-center">
-          <p className="font-['Source Sans Pro'] text-center text-[22px] font-bold leading-[33px] text-black">
+        <div className="border border-dashed p-2 text-center">
+          <p className="text-center text-[22px] font-bold leading-[33px] text-black">
             All consultations with the DIBBs team are 100% free. There's no cost
             to use our products beyond costs to host within your jurisdiction
             should you choose to do so.
           </p>
         </div>
         <div>
-          <div className="w-[500px]">
-            <p className="font-['Source Sans Pro'] text-[22px] font-bold leading-[33px] text-[#224a58]">
+          <div className="max-w-[500px]">
+            <p className="text-[22px] font-bold leading-[33px] text-[#224a58]">
               "Our epidemiologists waste 80% of their time cleaning data and
               can't do useful analysis. The end goal of DIBBs infrastructure is
               to free up that 80% of their time to do actual public health
               work."
             </p>
-            <p className="font-['Source Sans Pro'] text-[22px] font-light leading-[33px] text-[#224a58]">
+            <p className="text-[22px] font-light leading-[33px] text-[#224a58]">
               - Public Health Official, Virginia Department of Health
             </p>
           </div>

From 5554a71d88beebd3830745a53fc29013ca634ce6 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Fri, 1 Nov 2024 12:05:43 -0400
Subject: [PATCH 24/34] clean up styling

---
 src/app/engage-with-us/page.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
index 29ef258..93e9d1d 100644
--- a/src/app/engage-with-us/page.tsx
+++ b/src/app/engage-with-us/page.tsx
@@ -50,28 +50,28 @@ function Left() {
       >
         <Label
           htmlFor="name"
-          className="font-['Source Sans Pro'] self-stretch text-base font-bold leading-relaxed text-[#224a58]"
+          className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
         >
           Name
         </Label>
         <TextInput id="name" name="name" type="text" />
         <Label
           htmlFor="email"
-          className="font-['Source Sans Pro'] self-stretch text-base font-bold leading-relaxed text-[#224a58]"
+          className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
         >
           Email Address
         </Label>
         <TextInput id="email" name="email" type="email" />
         <Label
           htmlFor="organization"
-          className="font-['Source Sans Pro'] self-stretch text-base font-bold leading-relaxed text-[#224a58]"
+          className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
         >
           Organization
         </Label>
         <TextInput id="organization" name="organization" type="text" />
         <Label
           htmlFor="inquiry"
-          className="font-['Source Sans Pro'] self-stretch text-base font-bold leading-relaxed text-[#224a58]"
+          className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
         >
           Type of inquiry
         </Label>
@@ -89,7 +89,7 @@ function Left() {
         />
         <Label
           htmlFor="message"
-          className="font-['Source Sans Pro'] self-stretch text-base font-bold leading-relaxed text-[#224a58]"
+          className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
         >
           Message
         </Label>
@@ -97,7 +97,7 @@ function Left() {
       </Form>
       <Button
         type="submit"
-        className="font-['Source Sans Pro'] mt-6 inline-flex h-11 items-center justify-start gap-2.5 rounded bg-[#224a58] px-5 py-3 text-right text-base font-bold text-white"
+        className="mt-6 inline-flex h-11 items-center justify-start gap-2.5 rounded bg-[#224a58] px-5 py-3 text-right text-base font-bold text-white"
       >
         Send inquiry
       </Button>

From a9a914674cc9403a584dbbc09497e35fbc61369d Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Fri, 1 Nov 2024 12:09:48 -0400
Subject: [PATCH 25/34] px -> rem on engage with us

---
 src/app/engage-with-us/page.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
index 93e9d1d..6c5372a 100644
--- a/src/app/engage-with-us/page.tsx
+++ b/src/app/engage-with-us/page.tsx
@@ -22,7 +22,6 @@ export default function EngageWithUs() {
         <Grid
           row
           gap="lg"
-          className="px-10"
           tablet={{
             col: true,
           }}
@@ -46,7 +45,7 @@ function Left() {
       <p>Fill out the form below to get in touch with us</p>
       <Form
         onSubmit={() => {}}
-        className="align-start flex min-w-[500px] flex-col gap-y-2"
+        className="align-start flex min-w-[31.25rem] flex-col gap-y-2"
       >
         <Label
           htmlFor="name"
@@ -108,23 +107,23 @@ function Left() {
 function Right() {
   return (
     <>
-      <div id="content" className="flex max-w-[524px] flex-col gap-10 pt-4">
+      <div id="content" className="flex max-w-[32.75rem] flex-col gap-10 pt-4">
         <div className="border border-dashed p-2 text-center">
-          <p className="text-center text-[22px] font-bold leading-[33px] text-black">
+          <p className="text-center text-[1.38rem] font-bold leading-[2rem] text-black">
             All consultations with the DIBBs team are 100% free. There's no cost
             to use our products beyond costs to host within your jurisdiction
             should you choose to do so.
           </p>
         </div>
         <div>
-          <div className="max-w-[500px]">
-            <p className="text-[22px] font-bold leading-[33px] text-[#224a58]">
+          <div className="max-w-[31.25rem]">
+            <p className="text-[1.38rem] font-bold leading-[2rem] text-[#224a58]">
               "Our epidemiologists waste 80% of their time cleaning data and
               can't do useful analysis. The end goal of DIBBs infrastructure is
               to free up that 80% of their time to do actual public health
               work."
             </p>
-            <p className="text-[22px] font-light leading-[33px] text-[#224a58]">
+            <p className="text-[1.38rem] font-light leading-[2rem] text-[#224a58]">
               - Public Health Official, Virginia Department of Health
             </p>
           </div>

From 09a551f5860f011f151d08569bdb2018534e29da Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Fri, 1 Nov 2024 13:10:29 -0400
Subject: [PATCH 26/34] add "align" to content container, continue cleanup

---
 .../ContentContainer/ContentContainer.tsx     |  15 ++-
 src/app/engage-with-us/page.tsx               | 103 +++++++++---------
 src/app/page.tsx                              |   6 +-
 3 files changed, 68 insertions(+), 56 deletions(-)

diff --git a/src/app/components/ContentContainer/ContentContainer.tsx b/src/app/components/ContentContainer/ContentContainer.tsx
index 4132dfb..d2e840a 100644
--- a/src/app/components/ContentContainer/ContentContainer.tsx
+++ b/src/app/components/ContentContainer/ContentContainer.tsx
@@ -1,12 +1,23 @@
 import { GridContainer } from '@trussworks/react-uswds';
+import classNames from 'classnames';
 
 interface ContentContainerProps {
   children: React.ReactNode;
+  align?: boolean;
 }
-export function ContentContainer({ children }: ContentContainerProps) {
+export function ContentContainer({
+  children,
+  align = false,
+}: ContentContainerProps) {
   return (
     <section>
-      <GridContainer className="px-14 py-20">{children}</GridContainer>
+      <GridContainer
+        className={classNames('px-14 py-20', {
+          'px-32': !align,
+        })}
+      >
+        {children}
+      </GridContainer>
     </section>
   );
 }
diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
index 6c5372a..4de1d02 100644
--- a/src/app/engage-with-us/page.tsx
+++ b/src/app/engage-with-us/page.tsx
@@ -19,17 +19,11 @@ export default function EngageWithUs() {
         subheader="Learn how your jurisdiction can start working with the DIBBs team."
       />
       <ContentContainer>
-        <Grid
-          row
-          gap="lg"
-          tablet={{
-            col: true,
-          }}
-        >
-          <Grid>
+        <Grid row>
+          <Grid col={6}>
             <Left />
           </Grid>
-          <Grid>
+          <Grid col={6}>
             <Right />
           </Grid>
         </Grid>
@@ -41,51 +35,58 @@ export default function EngageWithUs() {
 function Left() {
   return (
     <>
-      <h2>Contact Us</h2>
+      <h2>Contact us</h2>
       <p>Fill out the form below to get in touch with us</p>
       <Form
         onSubmit={() => {}}
         className="align-start flex min-w-[31.25rem] flex-col gap-y-2"
       >
-        <Label
-          htmlFor="name"
-          className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
-        >
-          Name
-        </Label>
-        <TextInput id="name" name="name" type="text" />
-        <Label
-          htmlFor="email"
-          className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
-        >
-          Email Address
-        </Label>
-        <TextInput id="email" name="email" type="email" />
-        <Label
-          htmlFor="organization"
-          className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
-        >
-          Organization
-        </Label>
-        <TextInput id="organization" name="organization" type="text" />
-        <Label
-          htmlFor="inquiry"
-          className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
-        >
-          Type of inquiry
-        </Label>
-        <ComboBox
-          id="inquiry"
-          name="inquiry"
-          options={[
-            {
-              label: 'General interest in DIBBs products',
-              value: 'general-interest',
-            },
-          ]}
-          defaultValue="general-interest"
-          onChange={() => {}}
-        />
+        <div className="max-w-[70%]">
+          <Label
+            htmlFor="name"
+            className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
+          >
+            Name
+          </Label>
+          <TextInput
+            id="name"
+            name="name"
+            type="text"
+            className="max-w-[2rem]"
+          />
+          <Label
+            htmlFor="email"
+            className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
+          >
+            Email Address
+          </Label>
+          <TextInput id="email" name="email" type="email" />
+          <Label
+            htmlFor="organization"
+            className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
+          >
+            Organization
+          </Label>
+          <TextInput id="organization" name="organization" type="text" />
+          <Label
+            htmlFor="inquiry"
+            className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
+          >
+            Type of inquiry
+          </Label>
+          <ComboBox
+            id="inquiry"
+            name="inquiry"
+            options={[
+              {
+                label: 'General interest in DIBBs products',
+                value: 'general-interest',
+              },
+            ]}
+            defaultValue="general-interest"
+            onChange={() => {}}
+          />
+        </div>
         <Label
           htmlFor="message"
           className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
@@ -116,8 +117,8 @@ function Right() {
           </p>
         </div>
         <div>
-          <div className="max-w-[31.25rem]">
-            <p className="text-[1.38rem] font-bold leading-[2rem] text-[#224a58]">
+          <div className="ml-2 flex max-w-[31.25rem] flex-col gap-2">
+            <p className="text-[1.38rem] font-bold italic leading-[2rem] text-[#224a58]">
               "Our epidemiologists waste 80% of their time cleaning data and
               can't do useful analysis. The end goal of DIBBs infrastructure is
               to free up that 80% of their time to do actual public health
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 35352eb..6419e5d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -26,7 +26,7 @@ export default async function Home() {
 
 function SectionOne() {
   return (
-    <ContentContainer>
+    <ContentContainer align>
       <Grid row gap>
         <Image
           className="max-h-[320px] max-w-[480px]"
@@ -68,7 +68,7 @@ function SectionOne() {
 
 function SectionTwo() {
   return (
-    <ContentContainer>
+    <ContentContainer align>
       <Grid row gap>
         <div>
           <h2 className="font-['Source Sans Pro'] max-w-[372px] text-[32px] font-bold text-[#224a58]">
@@ -99,7 +99,7 @@ function SectionTwo() {
 
 function SectionThree() {
   return (
-    <ContentContainer>
+    <ContentContainer align>
       <div className="flex flex-col items-center">
         <h2 className="font-['Source Sans Pro'] text-center text-[32px] font-bold text-[#224a58]">
           Jurisdictions working with DIBBs

From 6c5fdf044ffc3cabcd8fe5d356e9b93d137f7e64 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Fri, 1 Nov 2024 13:19:35 -0400
Subject: [PATCH 27/34] clean up and use rem values on home page

---
 src/app/page.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6419e5d..9934fe0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,24 +29,24 @@ function SectionOne() {
     <ContentContainer align>
       <Grid row gap>
         <Image
-          className="max-h-[320px] max-w-[480px]"
+          className="max-h-[20rem] max-w-[30rem]"
           src={`${basePath}/images/placeholder.png`}
           width={480}
           height={320}
           alt="Placeholder"
         />
         <div className="flex max-w-screen-md flex-col gap-5">
-          <h2 className="font-['Source Sans Pro'] text-[32px] font-bold text-[#224a58]">
+          <h2 className="text-[2rem] font-bold text-[#224a58]">
             Introducing Data Integration Building Blocks
           </h2>
           <div className="flex flex-col gap-2">
-            <p className="font-['Source Sans Pro'] m-0 max-w-[635px] p-0 text-base font-normal leading-relaxed text-[#224a58]">
+            <p className="m-0 max-w-[39.7rem] p-0 text-base font-normal leading-relaxed text-[#224a58]">
               DIBBs are modular, open-source software that can be configured to
               clean, transform, and enrich data. We build cloud-enabled products
               that leverage DIBBs to provide the following benefits to public
               health jurisdictions:
             </p>
-            <ul className="font-['Source Sans Pro'] text-base font-semibold leading-relaxed text-[#224a58]">
+            <ul className="text-base font-semibold leading-relaxed text-[#224a58]">
               <li>Better, higher quality data for use in data analysis</li>
               <li>
                 Time-savings for public health staff thanks to reduced manual
@@ -71,10 +71,10 @@ function SectionTwo() {
     <ContentContainer align>
       <Grid row gap>
         <div>
-          <h2 className="font-['Source Sans Pro'] max-w-[372px] text-[32px] font-bold text-[#224a58]">
+          <h2 className="font-['Source Sans Pro'] max-w-[23.25rem] text-[2rem] font-bold text-[#224a58]">
             Unlock the value of your jurisdiction's data
           </h2>
-          <p className="font-['Source Sans Pro'] max-w-[450px] text-base font-normal leading-relaxed text-[#224a58]">
+          <p className="font-['Source Sans Pro'] max-w-[28.13rem] text-base font-normal leading-relaxed text-[#224a58]">
             DIBBs products help jurisdictions make the most of their data. From
             improving the usability of electronic case reporting (eCR) data to
             streamlining data collection from healthcare providers without the
@@ -86,7 +86,7 @@ function SectionTwo() {
           </Link>
         </div>
         <Image
-          className="max-h-[320px] max-w-[480px]"
+          className="max-h-[20rem] max-w-[30rem]"
           src={`${basePath}/images/placeholder.png`}
           width={480}
           height={320}
@@ -101,10 +101,10 @@ function SectionThree() {
   return (
     <ContentContainer align>
       <div className="flex flex-col items-center">
-        <h2 className="font-['Source Sans Pro'] text-center text-[32px] font-bold text-[#224a58]">
+        <h2 className="text-center text-[2rem] font-bold text-[#224a58]">
           Jurisdictions working with DIBBs
         </h2>
-        <p className="font-['Source Sans Pro'] text-center text-base font-normal leading-relaxed text-[#224a58]">
+        <p className="text-center text-base font-normal leading-relaxed text-[#224a58]">
           State and local public health jurisdictions across the United States
           used DIBBs to solve their toughest data challenges
         </p>
@@ -118,10 +118,10 @@ function InvitationCta() {
     <section className="usa-graphic-list usa-section usa-section--light-blue">
       <GridContainer>
         <div className="flex flex-col items-center justify-center gap-5 self-stretch">
-          <div className="font-['Source Sans Pro'] self-stretch text-center text-[32px] font-bold text-[#224a58]">
+          <div className="self-stretch text-center text-[2rem] font-bold text-[#224a58]">
             Interested in getting started with DIBBs?
           </div>
-          <div className="font-['Source Sans Pro'] self-stretch text-center text-base font-normal leading-relaxed text-[#224a58]">
+          <div className="self-stretch text-center text-base font-normal leading-relaxed text-[#224a58]">
             Contact our team to learn more about how our products can help
             improve your data workflows
           </div>

From f538793cec4472822bbfdaad680ccdb296c3fc00 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Fri, 1 Nov 2024 13:22:57 -0400
Subject: [PATCH 28/34] replace px with rem in hero

---
 src/app/components/Hero/Hero.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/Hero/Hero.tsx b/src/app/components/Hero/Hero.tsx
index c5ae672..901c416 100644
--- a/src/app/components/Hero/Hero.tsx
+++ b/src/app/components/Hero/Hero.tsx
@@ -13,7 +13,7 @@ export default function Hero({ header, subheader }: HeroProps) {
         <div className={styles.content}>
           <div className="flex flex-col items-start gap-3 self-start">
             <h1 className={styles.heading}>{header}</h1>
-            <p className="font-['Source Sans Pro'] m-0 max-w-[862px] text-[22px] font-light leading-[33px] text-[#224a58]">
+            <p className="m-0 max-w-[53.9rem] text-[1.38rem] font-light leading-[2rem] text-[#224a58]">
               {subheader}
             </p>
           </div>

From 2c5fa881d42802956440fe062ca693cfbd9c34f8 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Fri, 1 Nov 2024 13:30:43 -0400
Subject: [PATCH 29/34] list items use entire line space

---
 src/app/page.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9934fe0..f7b2979 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -35,7 +35,7 @@ function SectionOne() {
           height={320}
           alt="Placeholder"
         />
-        <div className="flex max-w-screen-md flex-col gap-5">
+        <div className="flex max-w-screen-lg flex-col gap-5">
           <h2 className="text-[2rem] font-bold text-[#224a58]">
             Introducing Data Integration Building Blocks
           </h2>
@@ -47,14 +47,20 @@ function SectionOne() {
               health jurisdictions:
             </p>
             <ul className="text-base font-semibold leading-relaxed text-[#224a58]">
-              <li>Better, higher quality data for use in data analysis</li>
-              <li>
+              <li className="min-w-full">
+                Better, higher quality data for use in data analysis
+              </li>
+              <li className="min-w-full">
                 Time-savings for public health staff thanks to reduced manual
                 work
               </li>
-              <li>More usable data that makes case investigation easier</li>
-              <li>Automated data processing that streamlines data workflows</li>
-              <li>
+              <li className="min-w-full">
+                More usable data that makes case investigation easier
+              </li>
+              <li className="min-w-full">
+                Automated data processing that streamlines data workflows
+              </li>
+              <li className="min-w-full">
                 Flexible cloud deployment options, including free central
                 hosting through CDC
               </li>

From ca92317526e4ac071465d03d34c4563d9f04948a Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Fri, 1 Nov 2024 13:45:33 -0400
Subject: [PATCH 30/34] more engage with us adjustments

---
 src/app/engage-with-us/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
index 4de1d02..019dfb0 100644
--- a/src/app/engage-with-us/page.tsx
+++ b/src/app/engage-with-us/page.tsx
@@ -19,7 +19,7 @@ export default function EngageWithUs() {
         subheader="Learn how your jurisdiction can start working with the DIBBs team."
       />
       <ContentContainer>
-        <Grid row>
+        <Grid row gap={6}>
           <Grid col={6}>
             <Left />
           </Grid>
@@ -108,8 +108,8 @@ function Left() {
 function Right() {
   return (
     <>
-      <div id="content" className="flex max-w-[32.75rem] flex-col gap-10 pt-4">
-        <div className="border border-dashed p-2 text-center">
+      <div id="content" className="flex flex-col gap-10 pt-4">
+        <div className="border border-dashed p-4 text-center">
           <p className="text-center text-[1.38rem] font-bold leading-[2rem] text-black">
             All consultations with the DIBBs team are 100% free. There's no cost
             to use our products beyond costs to host within your jurisdiction
@@ -117,14 +117,14 @@ function Right() {
           </p>
         </div>
         <div>
-          <div className="ml-2 flex max-w-[31.25rem] flex-col gap-2">
+          <div className="ml-2 flex min-w-[35.25rem] flex-col gap-2">
             <p className="text-[1.38rem] font-bold italic leading-[2rem] text-[#224a58]">
               "Our epidemiologists waste 80% of their time cleaning data and
               can't do useful analysis. The end goal of DIBBs infrastructure is
               to free up that 80% of their time to do actual public health
               work."
             </p>
-            <p className="text-[1.38rem] font-light leading-[2rem] text-[#224a58]">
+            <p className="min-w-full text-[1.38rem] font-light leading-[2rem] text-[#224a58]">
               - Public Health Official, Virginia Department of Health
             </p>
           </div>

From 2b9e5a06308d354238cd29dbe19dd33751fc5eb6 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Fri, 1 Nov 2024 15:06:59 -0400
Subject: [PATCH 31/34] fix h1 font

---
 src/app/components/Hero/Hero.module.scss | 3 +--
 src/app/custom-styles.css                | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/components/Hero/Hero.module.scss b/src/app/components/Hero/Hero.module.scss
index 7da2446..43d7ee5 100644
--- a/src/app/components/Hero/Hero.module.scss
+++ b/src/app/components/Hero/Hero.module.scss
@@ -7,9 +7,8 @@
 }
 
 .heading {
-  max-width: 965px;
+  max-width: 58.75rem;
   color: #224a58;
-  font-family: 'Source Sans Pro', sans-serif;
   font-size: 40px;
   font-style: normal;
   font-weight: 700;
diff --git a/src/app/custom-styles.css b/src/app/custom-styles.css
index 304a28c..02d2156 100644
--- a/src/app/custom-styles.css
+++ b/src/app/custom-styles.css
@@ -57,7 +57,6 @@ body {
 }
 
 h1 {
-  font-family: 'Source Sans Pro', sans-serif;
   font-size: 40px;
   font-weight: 700;
   line-height: 50.28px;

From 50de6ce39cc299a9d2fcffaaeaf37a668ac87b02 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Mon, 4 Nov 2024 09:16:08 -0500
Subject: [PATCH 32/34] update site background color to match design

---
 src/app/custom-styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/custom-styles.css b/src/app/custom-styles.css
index 02d2156..bbd4892 100644
--- a/src/app/custom-styles.css
+++ b/src/app/custom-styles.css
@@ -18,7 +18,7 @@
 
 html,
 body {
-  background: var(--background);
+  background: #e7f2f580;
   font-family: 'Source Sans Pro', sans-serif;
 }
 

From 7d355d3b895e19a7704f5787a8b5736a82aa284a Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Mon, 4 Nov 2024 09:16:24 -0500
Subject: [PATCH 33/34] engage with us text background should be white

---
 src/app/engage-with-us/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
index 019dfb0..7ad46ec 100644
--- a/src/app/engage-with-us/page.tsx
+++ b/src/app/engage-with-us/page.tsx
@@ -109,7 +109,7 @@ function Right() {
   return (
     <>
       <div id="content" className="flex flex-col gap-10 pt-4">
-        <div className="border border-dashed p-4 text-center">
+        <div className="border border-dashed bg-white p-4 text-center">
           <p className="text-center text-[1.38rem] font-bold leading-[2rem] text-black">
             All consultations with the DIBBs team are 100% free. There's no cost
             to use our products beyond costs to host within your jurisdiction

From 0c6ee08d383a8c35c4f9149337dcaedd7ff16898 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Mon, 4 Nov 2024 11:00:26 -0500
Subject: [PATCH 34/34] fill out form text styling

---
 src/app/engage-with-us/page.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
index 7ad46ec..0e0ae43 100644
--- a/src/app/engage-with-us/page.tsx
+++ b/src/app/engage-with-us/page.tsx
@@ -36,7 +36,9 @@ function Left() {
   return (
     <>
       <h2>Contact us</h2>
-      <p>Fill out the form below to get in touch with us</p>
+      <p className="text-base font-normal leading-relaxed text-[#224a58]">
+        Fill out the form below to get in touch with us
+      </p>
       <Form
         onSubmit={() => {}}
         className="align-start flex min-w-[31.25rem] flex-col gap-y-2"
@@ -110,7 +112,7 @@ function Right() {
     <>
       <div id="content" className="flex flex-col gap-10 pt-4">
         <div className="border border-dashed bg-white p-4 text-center">
-          <p className="text-center text-[1.38rem] font-bold leading-[2rem] text-black">
+          <p className="text-center text-[1.40rem] font-bold leading-[2rem] text-black">
             All consultations with the DIBBs team are 100% free. There's no cost
             to use our products beyond costs to host within your jurisdiction
             should you choose to do so.