-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8e939d5
commit 65c4147
Showing
1 changed file
with
281 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,287 @@ | ||
import Link from 'next/link'; | ||
import { Button, Grid, GridContainer } from '@trussworks/react-uswds'; | ||
import Image from 'next/image'; | ||
import { basePath } from '../utils/constants'; | ||
|
||
export default function ProductDetail() { | ||
export default function OurProducts() { | ||
return ( | ||
<div> | ||
<h1>Our Products</h1> | ||
<ul> | ||
<li> | ||
<Link href="/">Home</Link> | ||
</li> | ||
<li> | ||
<Link href="/our-products">Our products</Link> | ||
</li> | ||
<li> | ||
<Link href="/product-detail">Product detail</Link> | ||
</li> | ||
<li> | ||
<Link href="/resources">Resources</Link> | ||
</li> | ||
</ul> | ||
<section className="usa-graphic-list usa-section usa-section--light-blue"> | ||
<GridContainer> | ||
<div> | ||
<h1>Our ecosystem of DIBBs products</h1> | ||
<p className="grid-container p-0"> | ||
Find out how DIBBs products can help empower your jurisdiction | ||
</p> | ||
</div> | ||
</GridContainer> | ||
</section> | ||
<section className="usa-section"> | ||
<GridContainer> | ||
<h2>Standalone Products</h2> | ||
<Grid row gap className="usa-graphic-list__row"> | ||
<Grid | ||
tablet={{ | ||
col: true, | ||
}} | ||
> | ||
<Image | ||
src={`${basePath}/images/placeholder.png`} | ||
width="540" | ||
height="280" | ||
alt="Placeholder" | ||
/> | ||
<div> | ||
<h2 className="usa-graphic-list__heading">eCR Viewer</h2> | ||
<p> | ||
Graphic headings can be used a few different ways, depending | ||
on what your landing page is for. Highlight your values, | ||
specific program areas, or results. | ||
</p> | ||
<Button type="button">Learn more about eCR Viewer</Button> | ||
</div> | ||
</Grid> | ||
<Grid | ||
tablet={{ | ||
col: true, | ||
}} | ||
> | ||
<Image | ||
src={`${basePath}/images/placeholder.png`} | ||
width="540" | ||
height="280" | ||
alt="Placeholder" | ||
/> | ||
<div> | ||
<h2 className="usa-graphic-list__heading">Query Connector</h2> | ||
<p> | ||
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. | ||
</p> | ||
<Button type="button">Learn more about Query Connector</Button> | ||
</div> | ||
</Grid> | ||
</Grid> | ||
<Grid row gap="lg" className="usa-graphic-list__row"> | ||
<Grid | ||
tablet={{ | ||
col: true, | ||
}} | ||
> | ||
<Image | ||
src={`${basePath}/images/placeholder.png`} | ||
width="540" | ||
height="280" | ||
alt="Placeholder" | ||
/> | ||
<div> | ||
<h2 className="usa-graphic-list__heading">eCR Parser</h2> | ||
<p> | ||
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). | ||
</p> | ||
<Button type="button">Learn more about eCR Parser</Button> | ||
</div> | ||
</Grid> | ||
<Grid | ||
tablet={{ | ||
col: true, | ||
}} | ||
> | ||
<Image | ||
src={`${basePath}/images/placeholder.png`} | ||
width="540" | ||
height="280" | ||
alt="Placeholder" | ||
/> | ||
<div> | ||
<h2 className="usa-graphic-list__heading">eCR Refiner</h2> | ||
<p> | ||
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. | ||
</p> | ||
<Button type="button">Learn more about eCR Parser</Button> | ||
</div> | ||
</Grid> | ||
</Grid> | ||
</GridContainer> | ||
</section> | ||
<section className="usa-section"> | ||
<GridContainer> | ||
<Grid> | ||
<Image | ||
src={`${basePath}/images/placeholder.png`} | ||
width="1120" | ||
height="160" | ||
style={{ maxHeight: '160px' }} | ||
alt="Placeholder" | ||
/> | ||
<h2>DIBBs to support the entire data pipeline</h2> | ||
<p> | ||
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> | ||
</Grid> | ||
</GridContainer> | ||
<GridContainer> | ||
<h3>For Data Processing</h3> | ||
<Grid row gap="lg" className="usa-graphic-list__row"> | ||
<Grid | ||
tablet={{ | ||
col: true, | ||
}} | ||
> | ||
<Image | ||
src={`${basePath}/icons/orchestration.svg`} | ||
width="88" | ||
height="88" | ||
alt="Placeholder" | ||
/> | ||
<p className="font-bold">Orchestration</p> | ||
<p> | ||
Enables coordinated execution of DIBBs in any order, allowing | ||
for fully automated workflows | ||
</p> | ||
</Grid> | ||
<Grid | ||
tablet={{ | ||
col: true, | ||
}} | ||
> | ||
<Image | ||
src={`${basePath}/icons/fhirConverter.svg`} | ||
width="88" | ||
height="88" | ||
alt="Placeholder" | ||
/> | ||
<p className="font-bold">FHIR Converter</p> | ||
<p> | ||
Enables coordinated execution of DIBBs in any order, allowing | ||
for fully automated workflows | ||
</p> | ||
</Grid> | ||
<Grid | ||
tablet={{ | ||
col: true, | ||
}} | ||
> | ||
<Image | ||
src={`${basePath}/icons/validation.svg`} | ||
width="88" | ||
height="88" | ||
alt="Placeholder" | ||
/> | ||
<p className="font-bold">Validation</p> | ||
<p> | ||
Enables coordinated execution of DIBBs in any order, allowing | ||
for fully automated workflows | ||
</p> | ||
</Grid> | ||
</Grid> | ||
</GridContainer> | ||
<GridContainer> | ||
<h3>For Data Enrichment</h3> | ||
<Grid row gap="lg" className="usa-graphic-list__row"> | ||
<Grid | ||
tablet={{ | ||
col: true, | ||
}} | ||
> | ||
<Image | ||
src={`${basePath}/icons/code.svg`} | ||
width="88" | ||
height="88" | ||
alt="Placeholder" | ||
/> | ||
<p className="font-bold">Standardization</p> | ||
<p> | ||
Enables coordinated execution of DIBBs in any order, allowing | ||
for fully automated workflows | ||
</p> | ||
</Grid> | ||
<Grid | ||
tablet={{ | ||
col: true, | ||
}} | ||
> | ||
<Image | ||
src={`${basePath}/icons/messageParser.svg`} | ||
width="88" | ||
height="88" | ||
alt="Placeholder" | ||
/> | ||
<p className="font-bold">Geocoding</p> | ||
<p> | ||
Enables coordinated execution of DIBBs in any order, allowing | ||
for fully automated workflows | ||
</p> | ||
</Grid> | ||
<Grid | ||
tablet={{ | ||
col: true, | ||
}} | ||
> | ||
<Image | ||
src={`${basePath}/icons/link.svg`} | ||
width="88" | ||
height="88" | ||
alt="Placeholder" | ||
/> | ||
<p className="font-bold">Record Linkage</p> | ||
<p> | ||
Enables coordinated execution of DIBBs in any order, allowing | ||
for fully automated workflows | ||
</p> | ||
</Grid> | ||
</Grid> | ||
</GridContainer> | ||
<GridContainer> | ||
<h3>For Data Transformation</h3> | ||
<Grid row gap="lg" className="usa-graphic-list__row"> | ||
<Grid | ||
tablet={{ | ||
col: true, | ||
}} | ||
> | ||
<Image | ||
src={`${basePath}/icons/code.svg`} | ||
width="88" | ||
height="88" | ||
alt="Placeholder" | ||
/> | ||
<p className="font-bold">Flat Formatter</p> | ||
<p> | ||
Enables coordinated execution of DIBBs in any order, allowing | ||
for fully automated workflows | ||
</p> | ||
</Grid> | ||
<Grid | ||
tablet={{ | ||
col: true, | ||
}} | ||
> | ||
<Image | ||
src={`${basePath}/icons/messageParser.svg`} | ||
width="88" | ||
height="88" | ||
alt="Placeholder" | ||
/> | ||
<p className="font-bold">PHDC Converter</p> | ||
<p> | ||
Enables coordinated execution of DIBBs in any order, allowing | ||
for fully automated workflows | ||
</p> | ||
</Grid> | ||
</Grid> | ||
</GridContainer> | ||
</section> | ||
</div> | ||
); | ||
} |