diff --git a/public/icons/our-products/fhirConverter.svg b/public/icons/our-products/fhirConverter.svg new file mode 100644 index 0000000..1f77be3 --- /dev/null +++ b/public/icons/our-products/fhirConverter.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icons/our-products/flatFormatter.svg b/public/icons/our-products/flatFormatter.svg new file mode 100644 index 0000000..46a82f4 --- /dev/null +++ b/public/icons/our-products/flatFormatter.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icons/our-products/geocoding.svg b/public/icons/our-products/geocoding.svg new file mode 100644 index 0000000..b4f9bb1 --- /dev/null +++ b/public/icons/our-products/geocoding.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icons/our-products/orchestration.svg b/public/icons/our-products/orchestration.svg new file mode 100644 index 0000000..e748eaa --- /dev/null +++ b/public/icons/our-products/orchestration.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icons/our-products/phdcConverter.svg b/public/icons/our-products/phdcConverter.svg new file mode 100644 index 0000000..bb1a58a --- /dev/null +++ b/public/icons/our-products/phdcConverter.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icons/our-products/recordLinkage.svg b/public/icons/our-products/recordLinkage.svg new file mode 100644 index 0000000..975a237 --- /dev/null +++ b/public/icons/our-products/recordLinkage.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icons/our-products/standardization.svg b/public/icons/our-products/standardization.svg new file mode 100644 index 0000000..b40a21e --- /dev/null +++ b/public/icons/our-products/standardization.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icons/our-products/validation.svg b/public/icons/our-products/validation.svg new file mode 100644 index 0000000..1120256 --- /dev/null +++ b/public/icons/our-products/validation.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/app/components/ContentContainer/ContentContainer.tsx b/src/app/components/ContentContainer/ContentContainer.tsx index d2e840a..59f5beb 100644 --- a/src/app/components/ContentContainer/ContentContainer.tsx +++ b/src/app/components/ContentContainer/ContentContainer.tsx @@ -1,23 +1,24 @@ -import { GridContainer } from '@trussworks/react-uswds'; import classNames from 'classnames'; interface ContentContainerProps { children: React.ReactNode; align?: boolean; + classes?: string; } export function ContentContainer({ children, align = false, + classes = 'ml-auto mr-auto flex max-w-[87.5rem] flex-col px-10 py-4 sm:px-14 sm:py-20', }: ContentContainerProps) { return (
- {children} - +
); } diff --git a/src/app/components/Hero/Hero.module.scss b/src/app/components/Hero/Hero.module.scss index 43d7ee5..66edacf 100644 --- a/src/app/components/Hero/Hero.module.scss +++ b/src/app/components/Hero/Hero.module.scss @@ -1,17 +1,17 @@ .content { display: flex; - padding: 0px 30px; + padding: 0 3rem; align-items: center; - gap: 60px; - max-width: 1200px; + gap: 3.75rem; + max-width: 75rem; } .heading { max-width: 58.75rem; color: #224a58; - font-size: 40px; + font-size: 2.5rem; font-style: normal; font-weight: 700; line-height: normal; - margin: 0px; + margin: 0; } diff --git a/src/app/custom-styles.css b/src/app/custom-styles.css index bbd4892..750d260 100644 --- a/src/app/custom-styles.css +++ b/src/app/custom-styles.css @@ -9,7 +9,7 @@ } :root { - --background: #ffffff; + --background: #e7f2f580; --foreground: #171717; --header-teal: #224a58; --background-light-blue: #dcecf3; @@ -18,7 +18,7 @@ html, body { - background: #e7f2f580; + background: var(--background); font-family: 'Source Sans Pro', sans-serif; } @@ -57,9 +57,9 @@ body { } h1 { - font-size: 40px; + font-size: 2.5rem; font-weight: 700; - line-height: 50.28px; + line-height: 3.125rem; text-align: left; } @@ -72,6 +72,14 @@ h2 { line-height: normal; } +h3 { + color: #224a58; + font-family: 'Source Sans Pro', sans-serif; + font-weight: 700; + font-size: 1.38rem; + line-height: 1.69rem; +} + ul { margin-bottom: 1em; margin-top: 1em; diff --git a/src/app/our-products/page.tsx b/src/app/our-products/page.tsx index 0ac25cb..c78631d 100644 --- a/src/app/our-products/page.tsx +++ b/src/app/our-products/page.tsx @@ -1,23 +1,223 @@ +import Image from 'next/image'; import Link from 'next/link'; +import { basePath } from '../utils/constants'; +import Hero from '../components/Hero/Hero'; +import { ContentContainer } from '../components/ContentContainer/ContentContainer'; -export default function ProductDetail() { +export default function OurProducts() { return (
-

Our Products

- + + +
); } + +function StandaloneProducts() { + return ( + +

Standalone Products

+
+ + + + +
+ + ); +} + +interface ProductCardProps { + title: string; + text: string; + imgSrc: string; + linkText: string; + linkToHref: string; +} +function ProductCard({ + title, + text, + imgSrc, + linkText, + linkToHref, +}: ProductCardProps) { + return ( +
+
+ Placeholder +
+
+
+

{title}

+

+ {text} +

+
+
+ + {linkText} + +
+ ); +} + +interface DataPipelineCardProps { + title: string; + text: string; + imgSrc: string; +} + +function DataPipelineCard({ title, text, imgSrc }: DataPipelineCardProps) { + return ( +
+ {`${title} +
+

{title}

+

{text}

+
+
+ ); +} + +interface DataPipelineGridProps { + children: React.ReactNode; +} +function DataPipelineGrid({ children }: DataPipelineGridProps) { + return ( +
{children}
+ ); +} + +function DataPipeline() { + return ( + +
+ Placeholder +
+

DIBBs to support the entire data pipeline

+

+ 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. +

+
+
+

+ FOR DATA PROCESSING +

+ + + + + +

+ FOR DATA ENRICHMENT +

+ + + + + +

+ FOR DATA TRANSFORMATION +

+ + + + + + ); +}