From c460182001df3c86bbd5bbb8ea81496d753eb82a Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Mon, 9 Dec 2024 09:42:40 -0500
Subject: [PATCH] remove sections from content container

---
 .../ContentContainer/ContentContainer.tsx     |  17 +-
 src/app/page.tsx                              | 124 +++++-----
 src/app/products/page.tsx                     | 216 +++++++++---------
 3 files changed, 183 insertions(+), 174 deletions(-)

diff --git a/src/app/components/ContentContainer/ContentContainer.tsx b/src/app/components/ContentContainer/ContentContainer.tsx
index 4ef3380..ea95744 100644
--- a/src/app/components/ContentContainer/ContentContainer.tsx
+++ b/src/app/components/ContentContainer/ContentContainer.tsx
@@ -10,19 +10,16 @@ export function ContentContainer({
   children,
   align = false,
   classes = '',
-  sectionClasses = '',
 }: ContentContainerProps) {
   const defaultClasses =
     'ml-auto mr-auto flex max-w-[87.5rem] flex-col px-10 py-4 sm:px-14 sm:py-20';
   return (
-    <section className={sectionClasses}>
-      <div
-        className={classNames(defaultClasses, classes, {
-          'md:px-32': !align,
-        })}
-      >
-        {children}
-      </div>
-    </section>
+    <div
+      className={classNames(defaultClasses, classes, {
+        'md:px-32': !align,
+      })}
+    >
+      {children}
+    </div>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c64b7a6..bb91614 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,63 +12,69 @@ import styles from './_styles/Homepage.module.scss';
 import { InvitationCta } from './components/InvitationCta/InvitationCta';
 const DibbsSection = () => (
   <ContentContainer align>
-    <ImageCard
-      imageUrl={`${basePath}/images/homepage-1.jpeg`}
-      imageAlt=""
-      imageFirst={true}
-      imageStyle={{
-        transform: 'scale(1.4) translate(-8%, 3%)',
-      }}
-    >
-      <Heading className="min-w-full text-center xl:text-left">
-        Introducing Data Integration Building Blocks
-      </Heading>
-      <div className="flex flex-col gap-2">
-        <Paragraph className="m-0 max-w-[39.7rem] p-0">
-          {homeContent.dibbs.description}
-        </Paragraph>
-        <ul className="text-base font-semibold leading-relaxed text-[#224a58]">
-          {homeContent.dibbs.benefits.map((benefit, index) => (
-            <li className="min-w-full" key={`benefit-${index}`}>
-              {benefit}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </ImageCard>
-  </ContentContainer>
-);
-
-const ValueSection = () => {
-  const { valueSection } = homeContent;
-
-  return (
-    <ContentContainer sectionClasses={styles.valueSection} align>
+    <section>
       <ImageCard
-        imageFirst={false}
-        imageUrl={`${basePath}/images/homepage-2.jpeg`}
-        xlHideImage={true}
+        imageUrl={`${basePath}/images/homepage-1.jpeg`}
         imageAlt=""
+        imageFirst={true}
         imageStyle={{
           transform: 'scale(1.4) translate(-8%, 3%)',
         }}
-        cardBackground="none"
       >
-        <div className="my-auto flex flex-col gap-2">
-          <Heading className="text-center xl:max-w-[23.25rem] xl:text-start">
-            {valueSection.title}
-          </Heading>
-          <Paragraph className="xl:max-w-[28.13rem]">
-            {valueSection.description}
+        <Heading className="min-w-full text-center xl:text-left">
+          Introducing Data Integration Building Blocks
+        </Heading>
+        <div className="flex flex-col gap-2">
+          <Paragraph className="m-0 max-w-[39.7rem] p-0">
+            {homeContent.dibbs.description}
           </Paragraph>
-          <div>
-            <LinkButton href={valueSection.ctaHref} variant="primary">
-              {valueSection.ctaText}
-            </LinkButton>
-          </div>
+          <ul className="text-base font-semibold leading-relaxed text-[#224a58]">
+            {homeContent.dibbs.benefits.map((benefit, index) => (
+              <li className="min-w-full" key={`benefit-${index}`}>
+                {benefit}
+              </li>
+            ))}
+          </ul>
         </div>
       </ImageCard>
-    </ContentContainer>
+    </section>
+  </ContentContainer>
+);
+
+const ValueSection = () => {
+  const { valueSection } = homeContent;
+
+  return (
+    <div className={styles.valueSection}>
+      <ContentContainer align>
+        <section>
+          <ImageCard
+            imageFirst={false}
+            imageUrl={`${basePath}/images/homepage-2.jpeg`}
+            xlHideImage={true}
+            imageAlt=""
+            imageStyle={{
+              transform: 'scale(1.4) translate(-8%, 3%)',
+            }}
+            cardBackground="none"
+          >
+            <div className="my-auto flex flex-col gap-2">
+              <Heading className="text-center xl:max-w-[23.25rem] xl:text-start">
+                {valueSection.title}
+              </Heading>
+              <Paragraph className="xl:max-w-[28.13rem]">
+                {valueSection.description}
+              </Paragraph>
+              <div>
+                <LinkButton href={valueSection.ctaHref} variant="primary">
+                  {valueSection.ctaText}
+                </LinkButton>
+              </div>
+            </div>
+          </ImageCard>
+        </section>
+      </ContentContainer>
+    </div>
   );
 };
 
@@ -77,17 +83,19 @@ const JurisdictionSection = () => {
 
   return (
     <>
-      <ContentContainer align classes="px-14 pt-20 pb-10 sm:pb-10">
-        <Grid row gap>
-          <Grid col={12}>
-            <div className="flex flex-col items-center">
-              <Heading className="text-center">{jurisdictions.title}</Heading>
-              <Paragraph className="text-center">
-                {jurisdictions.description}
-              </Paragraph>
-            </div>
+      <ContentContainer align classes="sm:pb-10">
+        <section>
+          <Grid row gap>
+            <Grid col={12}>
+              <div className="flex flex-col items-center">
+                <Heading className="text-center">{jurisdictions.title}</Heading>
+                <Paragraph className="text-center">
+                  {jurisdictions.description}
+                </Paragraph>
+              </div>
+            </Grid>
           </Grid>
-        </Grid>
+        </section>
       </ContentContainer>
       <div className="ml-8 mr-8 pb-20 pt-0">
         <Carousel />
diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
index 8d9fc2d..a5cc7ad 100644
--- a/src/app/products/page.tsx
+++ b/src/app/products/page.tsx
@@ -23,53 +23,55 @@ function StandaloneProducts() {
 
   return (
     <ContentContainer>
-      <h2>Standalone Products</h2>
-      <div className="mt-5 grid grid-cols-1 gap-10 md:grid-cols-2">
-        <ProductCard
-          title="eCR Viewer"
-          text="Makes it easier for public health staff to find relevant
+      <section>
+        <h2>Standalone Products</h2>
+        <div className="mt-5 grid grid-cols-1 gap-10 md:grid-cols-2">
+          <ProductCard
+            title="eCR Viewer"
+            text="Makes it easier for public health staff to find relevant
                 information in eCR documents. It combines both the eICR and RR
                 records into a single view and highlights relevant lab or
                 clinical information for conditions present in the eCR."
-          imgSrc={`${basePath}/images/placeholder.png`}
-          linkText="Learn more about eCR Viewer"
-          linkToHref="/products/ecr-viewer"
-          linkVariant="primary"
-        />
-        <ProductCard
-          title="Query Connector"
-          text="Allows public health staff to query a wide network of healthcare
+            imgSrc={`${basePath}/images/placeholder.png`}
+            linkText="Learn more about eCR Viewer"
+            linkToHref="/products/ecr-viewer"
+            linkVariant="primary"
+          />
+          <ProductCard
+            title="Query Connector"
+            text="Allows public health staff to query a wide network of healthcare
               organizations for data relevant to a given condition. It gives
               staff access to more complete and timely data without the need for
               a direct connection to a healthcare provider."
-          imgSrc={`${basePath}/images/placeholder.png`}
-          linkText="Learn more about Query Connector"
-          linkToHref=""
-          linkVariant="primary"
-        />
-        <ProductCard
-          title="eCR Parser"
-          text="Enables public health staff to extract relevant data from eCR
+            imgSrc={`${basePath}/images/placeholder.png`}
+            linkText="Learn more about Query Connector"
+            linkToHref=""
+            linkVariant="primary"
+          />
+          <ProductCard
+            title="eCR Parser"
+            text="Enables public health staff to extract relevant data from eCR
               messages based on a user-defined parsing schema. It exports that
               data into a simple JSON file that can be easily loaded into a
               tabular format (like a spreadsheet)."
-          imgSrc={`${basePath}/images/placeholder.png`}
-          linkText="Learn more about eCR Parser"
-          linkToHref=""
-          linkVariant="secondary"
-        />
-        <ProductCard
-          title="eCR Refiner"
-          text="Reduces eCR files down to only the most useful, necessary
+            imgSrc={`${basePath}/images/placeholder.png`}
+            linkText="Learn more about eCR Parser"
+            linkToHref=""
+            linkVariant="secondary"
+          />
+          <ProductCard
+            title="eCR Refiner"
+            text="Reduces eCR files down to only the most useful, necessary
               information to alleviate performance and storage burden on disease
               surveillance systems and bring focus to pertinent data for a given
               condition."
-          imgSrc={`${basePath}/images/placeholder.png`}
-          linkText="Learn more about eCR Refiner"
-          linkToHref=""
-          linkVariant="secondary"
-        />
-      </div>
+            imgSrc={`${basePath}/images/placeholder.png`}
+            linkText="Learn more about eCR Refiner"
+            linkToHref=""
+            linkVariant="secondary"
+          />
+        </div>
+      </section>
     </ContentContainer>
   );
 }
@@ -150,82 +152,84 @@ function DataPipelineGrid({ children }: DataPipelineGridProps) {
 function DataPipeline() {
   return (
     <ContentContainer>
-      <div className="flex flex-col gap-y-6 pb-6">
-        <Image
-          className="max-h-[10rem]"
-          src={`${basePath}/images/placeholder.png`}
-          width="1120"
-          height="160"
-          alt="Placeholder"
-        />
-        <div className="flex flex-col gap-y-2">
-          <h2>DIBBs to support the entire data pipeline</h2>
-          <p className="max-w-[48rem] text-base font-normal leading-relaxed text-[#224a58]">
-            These are the underlying services that power each of our products;
-            they can be configured in a variety of ways to support the unique
-            needs of your jurisdiction.
-          </p>
+      <section>
+        <div className="flex flex-col gap-y-6 pb-6">
+          <Image
+            className="max-h-[10rem]"
+            src={`${basePath}/images/placeholder.png`}
+            width="1120"
+            height="160"
+            alt="Placeholder"
+          />
+          <div className="flex flex-col gap-y-2">
+            <h2>DIBBs to support the entire data pipeline</h2>
+            <p className="max-w-[48rem] text-base font-normal leading-relaxed text-[#224a58]">
+              These are the underlying services that power each of our products;
+              they can be configured in a variety of ways to support the unique
+              needs of your jurisdiction.
+            </p>
+          </div>
         </div>
-      </div>
-      <p className="text-2xl font-normal uppercase text-[#224a58]">
-        FOR DATA PROCESSING
-      </p>
-      <DataPipelineGrid>
-        <DataPipelineCard
-          title="Orchestration"
-          text="Enables coordinated execution of DIBBs in any order, allowing for
+        <p className="text-2xl font-normal uppercase text-[#224a58]">
+          FOR DATA PROCESSING
+        </p>
+        <DataPipelineGrid>
+          <DataPipelineCard
+            title="Orchestration"
+            text="Enables coordinated execution of DIBBs in any order, allowing for
               fully automated workflows"
-          imgSrc={`${basePath}/icons/our-products/orchestration.svg`}
-        />
-        <DataPipelineCard
-          title="FHIR Converter"
-          text="Converts incoming messages into the FHIR (Fast Healthcare
+            imgSrc={`${basePath}/icons/our-products/orchestration.svg`}
+          />
+          <DataPipelineCard
+            title="FHIR Converter"
+            text="Converts incoming messages into the FHIR (Fast Healthcare
                 Interoperability Resources) standard; acts as a common language
                 between data streams that allows for ease of processing data in
                 all the different DIBBs"
-          imgSrc={`${basePath}/icons/our-products/fhirConverter.svg`}
-        />
-        <DataPipelineCard
-          title="Validation"
-          text="Reads and validates all eCR fields of interest based on specified, custom preferences; ensures that its XML structure is valid, that the required fields are present and in the correct format, and that the data is trustworthy"
-          imgSrc={`${basePath}/icons/our-products/validation.svg`}
-        />
-      </DataPipelineGrid>
-      <p className="pt-8 text-2xl font-normal uppercase text-[#224a58]">
-        FOR DATA ENRICHMENT
-      </p>
-      <DataPipelineGrid>
-        <DataPipelineCard
-          title="Standardization"
-          text="Standardizes data fields (including record name, date of birth, phone number, and geolocation) based on preset defaults to ensure consistency; for example, standardizing phone formats (888-555-1234 vs. (888)555-1234)"
-          imgSrc={`${basePath}/icons/our-products/standardization.svg`}
-        />
-        <DataPipelineCard
-          title="Geocoding"
-          text="Enriches data by providing precise geographic locations based on patient street addresses from input data"
-          imgSrc={`${basePath}/icons/our-products/geocoding.svg`}
-        />
-        <DataPipelineCard
-          title="Record Linkage"
-          text="Identifies multiple records referring to the same individual and combines them into a single, more complete patient record"
-          imgSrc={`${basePath}/icons/our-products/recordLinkage.svg`}
-        />
-      </DataPipelineGrid>
-      <p className="pt-8 text-2xl font-normal uppercase text-[#224a58]">
-        FOR DATA TRANSFORMATION
-      </p>
-      <DataPipelineGrid>
-        <DataPipelineCard
-          title="Flat Formatter"
-          text="Extracts relevant data from a given healthcare message and exports the data into a JSON file based on a user-defined parsing schema"
-          imgSrc={`${basePath}/icons/our-products/flatFormatter.svg`}
-        />
-        <DataPipelineCard
-          title="PHDC Converter"
-          text="Converts a FHIR bundle to the Public Health Document Container (PHDC) format for ingestion into the National Electronic Disease Surveillance System (NEDSS) Base System (NBS)"
-          imgSrc={`${basePath}/icons/our-products/phdcConverter.svg`}
-        />
-      </DataPipelineGrid>
+            imgSrc={`${basePath}/icons/our-products/fhirConverter.svg`}
+          />
+          <DataPipelineCard
+            title="Validation"
+            text="Reads and validates all eCR fields of interest based on specified, custom preferences; ensures that its XML structure is valid, that the required fields are present and in the correct format, and that the data is trustworthy"
+            imgSrc={`${basePath}/icons/our-products/validation.svg`}
+          />
+        </DataPipelineGrid>
+        <p className="pt-8 text-2xl font-normal uppercase text-[#224a58]">
+          FOR DATA ENRICHMENT
+        </p>
+        <DataPipelineGrid>
+          <DataPipelineCard
+            title="Standardization"
+            text="Standardizes data fields (including record name, date of birth, phone number, and geolocation) based on preset defaults to ensure consistency; for example, standardizing phone formats (888-555-1234 vs. (888)555-1234)"
+            imgSrc={`${basePath}/icons/our-products/standardization.svg`}
+          />
+          <DataPipelineCard
+            title="Geocoding"
+            text="Enriches data by providing precise geographic locations based on patient street addresses from input data"
+            imgSrc={`${basePath}/icons/our-products/geocoding.svg`}
+          />
+          <DataPipelineCard
+            title="Record Linkage"
+            text="Identifies multiple records referring to the same individual and combines them into a single, more complete patient record"
+            imgSrc={`${basePath}/icons/our-products/recordLinkage.svg`}
+          />
+        </DataPipelineGrid>
+        <p className="pt-8 text-2xl font-normal uppercase text-[#224a58]">
+          FOR DATA TRANSFORMATION
+        </p>
+        <DataPipelineGrid>
+          <DataPipelineCard
+            title="Flat Formatter"
+            text="Extracts relevant data from a given healthcare message and exports the data into a JSON file based on a user-defined parsing schema"
+            imgSrc={`${basePath}/icons/our-products/flatFormatter.svg`}
+          />
+          <DataPipelineCard
+            title="PHDC Converter"
+            text="Converts a FHIR bundle to the Public Health Document Container (PHDC) format for ingestion into the National Electronic Disease Surveillance System (NEDSS) Base System (NBS)"
+            imgSrc={`${basePath}/icons/our-products/phdcConverter.svg`}
+          />
+        </DataPipelineGrid>
+      </section>
     </ContentContainer>
   );
 }