eCR Viewer page layout

src/app/components/Footer/Footer.tsx

@@ -17,7 +17,7 @@ export default function Footer() {
     <NavigationLink key="one" href="/" onClick={onClick}>
       Home
     </NavigationLink>,
-    <NavigationLink key="two" href="/our-products" onClick={onClick}>
+    <NavigationLink key="two" href="/products" onClick={onClick}>
       Our products
     </NavigationLink>,
     <NavigationLink key="three" href="/case-studies" onClick={onClick}>

src/app/components/Header/Header.tsx

@@ -31,7 +31,7 @@ const specialContent: SpecialContent = {
 const navigationItems = [
   {
     key: 'products',
-    href: '/our-products',
+    href: '/products',
     text: 'Our products',
   },
   {
@@ -106,7 +106,6 @@ export default function Header() {
           />
         </div>
       </USWDSHeader>
-
       {customContent && (
         <Hero
           header={customContent.heroHeader}

src/app/page.tsx

@@ -29,7 +29,7 @@ const homeContent = {
     description:
       '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.',
     ctaText: 'Find out more about our products',
-    ctaHref: '/our-products',
+    ctaHref: '/products',
   },
   jurisdictions: {
     title: 'Jurisdictions working with DIBBs',
@@ -104,11 +104,7 @@ function ValueSection() {
           <p className="text-base font-normal leading-relaxed text-[#224a58] xl:max-w-[28.13rem]">
             {valueSection.description}
           </p>
-          <LinkButton
-            href={valueSection.ctaHref}
-            variant="primary"
-            className="justify-self-start"
-          >
+          <LinkButton href={valueSection.ctaHref} variant="primary">
             {valueSection.ctaText}
           </LinkButton>
         </div>

src/app/products/ecr-viewer/styles.scss

@@ -0,0 +1,28 @@
+li.usa-process-list__item {
+  border-left-color: #dae9ee;
+
+  &:before {
+    background-color: var(--background);
+    color: #6499af;
+    box-shadow: 0 0;
+    border-color: #6499af;
+  }
+
+  h4 {
+    color: #224a58;
+  }
+}
+
+button.usa-accordion__button {
+  background-color: #dae9ee;
+
+  &:hover {
+    background-color: #cce0e7; // placeholder color
+  }
+}
+
+.list__full-width {
+  li {
+    min-width: 100%;
+  }
+}

src/app/our-products/page.tsx → src/app/products/page.tsx

@@ -31,7 +31,7 @@ function StandaloneProducts() {
                 clinical information for conditions present in the eCR."
           imgSrc={`${basePath}/images/placeholder.png`}
           linkText="Learn more about eCR Viewer"
-          linkToHref="#"
+          linkToHref="/products/ecr-viewer"
         />
         <ProductCard
           title="Query Connector"

src/app/resources/page.tsx

@@ -9,7 +9,7 @@ export default function ProductDetail() {
           <Link href="/">Home</Link>
         </li>
         <li>
-          <Link href="/our-products">Our products</Link>
+          <Link href="/products">Our products</Link>
         </li>
         <li>
           <Link href="/product-detail">Product detail</Link>