From 88b5195ae2027bdc9b83060aedaa8f244d396cd7 Mon Sep 17 00:00:00 2001
From: Jake Wheeler <jake.wheeler@skylight.digital>
Date: Mon, 28 Oct 2024 10:46:16 -0400
Subject: [PATCH] use cards for data pipeline section

---
 src/app/our-products/page.tsx | 374 ++++++++++++++++++----------------
 1 file changed, 203 insertions(+), 171 deletions(-)

diff --git a/src/app/our-products/page.tsx b/src/app/our-products/page.tsx
index 353b33e..b53f60c 100644
--- a/src/app/our-products/page.tsx
+++ b/src/app/our-products/page.tsx
@@ -1,12 +1,8 @@
 import {
-  Button,
   Card,
   CardBody,
   CardFooter,
   CardGroup,
-  CardHeader,
-  CardMedia,
-  Grid,
   GridContainer,
   Link,
 } from '@trussworks/react-uswds';
@@ -205,174 +201,210 @@ function DataPipeline() {
             needs of your jurisdiction.
           </p>
         </div>
-      </GridContainer>
-      <DataPipelineGrid name="FOR DATA PROCESSING">
-        <DataPipelineGridItem>
-          <Image
-            src={`${basePath}/icons/orchestration.svg`}
-            width="88"
-            height="88"
-            alt="Placeholder"
-            style={{ minWidth: 88, minHeight: 88 }}
-          />
-          <h3 className="font-bold">Orchestration</h3>
-          <p>
-            Enables coordinated execution of DIBBs in any order, allowing for
-            fully automated workflows
-          </p>
-        </DataPipelineGridItem>
-        <DataPipelineGridItem>
-          <Image
-            src={`${basePath}/icons/fhirConverter.svg`}
-            width="88"
-            height="88"
-            alt="Placeholder"
-            style={{ minWidth: 88, minHeight: 88, maxHeight: 88 }}
-          />
-          <h3 className="font-bold">FHIR Converter</h3>
-          <p>
-            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
-          </p>
-        </DataPipelineGridItem>
-        <DataPipelineGridItem>
-          <Image
-            src={`${basePath}/icons/validation.svg`}
-            width="88"
-            height="88"
-            alt="Placeholder"
-            style={{ minWidth: 88, minHeight: 88 }}
-          />
-          <h3 className="font-bold">Validation</h3>
-          <p>
-            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
-          </p>
-        </DataPipelineGridItem>
-      </DataPipelineGrid>
-      <DataPipelineGrid name="FOR DATA ENRICHMENT">
-        <DataPipelineGridItem>
-          <Image
-            src={`${basePath}/icons/code.svg`}
-            width="88"
-            height="88"
-            alt="Placeholder"
-            style={{ minWidth: 88, minHeight: 88 }}
-          />
-          <h3 className="font-bold">Standardization</h3>
-          <p>
-            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)
-          </p>
-        </DataPipelineGridItem>
-        <DataPipelineGridItem>
-          <Image
-            src={`${basePath}/icons/messageParser.svg`}
-            width="88"
-            height="88"
-            alt="Placeholder"
-            style={{ minWidth: 88, minHeight: 88 }}
-          />
-          <h3 className="font-bold">Geocoding</h3>
-          <p>
-            Enriches data by providing precise geographic locations based on
-            patient street addresses from input data
-          </p>
-        </DataPipelineGridItem>
-        <DataPipelineGridItem>
-          <Image
-            src={`${basePath}/icons/link.svg`}
-            width="88"
-            height="88"
-            alt="Placeholder"
-            style={{ minWidth: 88, minHeight: 88 }}
-          />
-          <h3 className="font-bold">Record Linkage</h3>
-          <p>
-            Identifies multiple records referring to the same individual and
-            combines them into a single, more complete patient record
-          </p>
-        </DataPipelineGridItem>
-      </DataPipelineGrid>
-      <DataPipelineGrid name="FOR DATA TRANSFORMATION">
-        <DataPipelineGridItem>
-          <Image
-            src={`${basePath}/icons/code.svg`}
-            width="88"
-            height="88"
-            alt="Placeholder"
-            style={{ minWidth: 88, minHeight: 88 }}
-          />
-          <h3 className="font-bold">Flat Formatter</h3>
-          <p>
-            Extracts relevant data from a given healthcare message and exports
-            the data into a JSON file based on a user-defined parsing schema
-          </p>
-        </DataPipelineGridItem>
-        <DataPipelineGridItem>
-          <Image
-            src={`${basePath}/icons/messageParser.svg`}
-            width="88"
-            height="88"
-            alt="Placeholder"
-            style={{ minWidth: 88, minHeight: 88 }}
-          />
-          <h3 className="font-bold">PHDC Converter</h3>
-          <p>
-            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)
-          </p>
-        </DataPipelineGridItem>
-        <DataPipelineGridItem>
-          <p>Empty spot</p>
-        </DataPipelineGridItem>
-      </DataPipelineGrid>
-    </section>
-  );
-}
-
-interface DataPipelineGridProps {
-  name: string;
-  children: React.ReactNode;
-}
+        <p>FOR DATA PROCESSING</p>
+        <CardGroup>
+          <Card
+            gridLayout={{
+              tablet: {
+                col: 4,
+              },
+            }}
+            containerProps={{ className: 'border-dashed' }}
+          >
+            <CardBody>
+              <Image
+                src={`${basePath}/icons/orchestration.svg`}
+                width="88"
+                height="88"
+                alt="Placeholder"
+                style={{ minWidth: 88, minHeight: 88 }}
+              />
+              <h3 className="font-bold">Orchestration</h3>
+              <p>
+                Enables coordinated execution of DIBBs in any order, allowing
+                for fully automated workflows
+              </p>
+            </CardBody>
+          </Card>
+          <Card
+            gridLayout={{
+              tablet: {
+                col: 4,
+              },
+            }}
+            containerProps={{ className: 'border-dashed' }}
+          >
+            <CardBody>
+              <Image
+                src={`${basePath}/icons/fhirConverter.svg`}
+                width="88"
+                height="88"
+                alt="Placeholder"
+                style={{ minWidth: 88, minHeight: 88, maxHeight: 88 }}
+              />
+              <h3 className="font-bold">FHIR Converter</h3>
+              <p>
+                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
+              </p>
+            </CardBody>
+          </Card>
+          <Card
+            gridLayout={{
+              tablet: {
+                col: 4,
+              },
+            }}
+            containerProps={{ className: 'border-dashed' }}
+          >
+            <CardBody>
+              <Image
+                src={`${basePath}/icons/validation.svg`}
+                width="88"
+                height="88"
+                alt="Placeholder"
+                style={{ minWidth: 88, minHeight: 88 }}
+              />
+              <h3 className="font-bold">Validation</h3>
+              <p>
+                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
+              </p>
+            </CardBody>
+          </Card>
+        </CardGroup>
 
-function DataPipelineGrid({ name, children }: DataPipelineGridProps) {
-  return (
-    <GridContainer>
-      <p>{name}</p>
-      <Grid row gap className="usa-graphic-list__row">
-        {children}
-      </Grid>
-    </GridContainer>
-  );
-}
+        <p>FOR DATA ENRICHMENT</p>
+        <CardGroup>
+          <Card
+            gridLayout={{
+              tablet: {
+                col: 4,
+              },
+            }}
+            containerProps={{ className: 'border-dashed' }}
+          >
+            <CardBody>
+              <Image
+                src={`${basePath}/icons/code.svg`}
+                width="88"
+                height="88"
+                alt="Placeholder"
+                style={{ minWidth: 88, minHeight: 88 }}
+              />
+              <h3 className="font-bold">Standardization</h3>
+              <p>
+                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)
+              </p>
+            </CardBody>
+          </Card>
+          <Card
+            gridLayout={{
+              tablet: {
+                col: 4,
+              },
+            }}
+            containerProps={{ className: 'border-dashed' }}
+          >
+            <CardBody>
+              <Image
+                src={`${basePath}/icons/messageParser.svg`}
+                width="88"
+                height="88"
+                alt="Placeholder"
+                style={{ minWidth: 88, minHeight: 88 }}
+              />
+              <h3 className="font-bold">Geocoding</h3>
+              <p>
+                Enriches data by providing precise geographic locations based on
+                patient street addresses from input data
+              </p>
+            </CardBody>
+          </Card>
+          <Card
+            gridLayout={{
+              tablet: {
+                col: 4,
+              },
+            }}
+            containerProps={{ className: 'border-dashed' }}
+          >
+            <CardBody>
+              <Image
+                src={`${basePath}/icons/link.svg`}
+                width="88"
+                height="88"
+                alt="Placeholder"
+                style={{ minWidth: 88, minHeight: 88 }}
+              />
+              <h3 className="font-bold">Record Linkage</h3>
+              <p>
+                Identifies multiple records referring to the same individual and
+                combines them into a single, more complete patient record
+              </p>
+            </CardBody>
+          </Card>
+        </CardGroup>
 
-interface DataPipelineGridItemProps {
-  children: React.ReactNode;
-}
-function DataPipelineGridItem({ children }: DataPipelineGridItemProps) {
-  return (
-    <Grid
-      tablet={{
-        col: true,
-      }}
-    >
-      <Grid
-        style={{
-          maxWidth: '352px',
-          maxHeight: '360px',
-        }}
-        className="h-full rounded-md border border-dashed p-8"
-      >
-        <div>{children}</div>
-      </Grid>
-    </Grid>
+        <p>FOR DATA TRANSFORMATION</p>
+        <CardGroup>
+          <Card
+            gridLayout={{
+              tablet: {
+                col: 4,
+              },
+            }}
+            containerProps={{ className: 'border-dashed' }}
+          >
+            <CardBody>
+              <Image
+                src={`${basePath}/icons/code.svg`}
+                width="88"
+                height="88"
+                alt="Placeholder"
+                style={{ minWidth: 88, minHeight: 88 }}
+              />
+              <h3 className="font-bold">Flat Formatter</h3>
+              <p>
+                Extracts relevant data from a given healthcare message and
+                exports the data into a JSON file based on a user-defined
+                parsing schema
+              </p>
+            </CardBody>
+          </Card>
+          <Card
+            gridLayout={{
+              tablet: {
+                col: 4,
+              },
+            }}
+            containerProps={{ className: 'border-dashed' }}
+          >
+            <CardBody>
+              <Image
+                src={`${basePath}/icons/messageParser.svg`}
+                width="88"
+                height="88"
+                alt="Placeholder"
+                style={{ minWidth: 88, minHeight: 88 }}
+              />
+              <h3 className="font-bold">PHDC Converter</h3>
+              <p>
+                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)
+              </p>
+            </CardBody>
+          </Card>
+        </CardGroup>
+      </GridContainer>
+    </section>
   );
 }