Industry resources homepage

src/app/industry-resources/page.tsx

@@ -0,0 +1,12 @@
+import IndustryResourcesComp from '@/components/industry-resources/IndustryResourcesHome'
+import CommunicationFab from '@/components/shared/CommunicationFab'
+const IndustryResourcesHome = () => {
+  return (
+    <>
+      <IndustryResourcesComp />
+      <CommunicationFab />
+    </>
+  )
+}
+
+export default IndustryResourcesHome

src/components/cqmt/CqmHome.tsx

@@ -14,7 +14,7 @@ import cypressImagery from '@public/cqm-qrda/Cypress.svg'
 // Styles
 import palette from '@/styles/palette'
 import SectionHeader from '../shared/SectionHeader'
-import VerticalCard from './VerticalCard'
+import VerticalCard from '../shared/VerticalCard'
 import CardWithBorder from '../shared/CardWithBorder'
 // Images
 // const maxWidth: number = 320

src/components/home/SiteHomeRows.tsx

@@ -240,8 +240,8 @@ export default function SiteHomeRows() {
           </Box>
           {/* Row 3: Fixed: Industry Testing Resources */}
           <SectionHeader
-            header={'Industry Testing Resources'}
-            subHeader={'Outside tools may help you!'}
+            header={'Industry Resources'}
+            subHeader={'Empowering Your Success with Top-Tier Industry Resources'}
             isHeaderAlternateColor={true}
           />
           <Box sx={containerNoDragStyles}>
@@ -253,37 +253,37 @@ export default function SiteHomeRows() {
                 description={
                   'Assess the conformance, interoperability, and functionality of healthcare information systems implementing HL7 standards.'
                 }
-                pathname={'https://confluence.hl7.org/display/FHIR/FHIR+Tooling+Ecosystem'}
+                pathname={'/industry-resources#hl7'}
                 maxWidth={industryTestingResourceRow}
                 imageWidth={industryTestingResourceRow + 'px'}
                 buttonTitle="Access"
               />
             </Box>
             <Box p={1}>
               <CardWithImageHome
-                title={'Reference Data'}
-                cardImage={referenceDataSvg}
-                cardHeader={'Reference Data'}
+                title={'Implementation Guides'}
+                cardImage={igSvg}
+                cardHeader={'Implementation Guides'}
                 description={
-                  'Values used to standardize and categorize data elements within a system, making it easier to understand and compare data across different applications or processes.'
+                  'Implementation guides in healthcare serve as comprehensive documents outlining the specific rules, standards, and protocols for implementing interoperable health information systems.'
                 }
-                pathname={'/reference-data'}
+                pathname={'/industry-resources#ig'}
                 maxWidth={industryTestingResourceRow}
                 imageWidth={industryTestingResourceRow + 'px'}
+                buttonTitle="Learn"
               />
             </Box>
             <Box p={1}>
               <CardWithImageHome
-                title={'Implementation Guides'}
-                cardImage={igSvg}
-                cardHeader={'Implementation Guides'}
+                title={'/industry-resources#rd'}
+                cardImage={referenceDataSvg}
+                cardHeader={'Reference Data'}
                 description={
-                  'Implementation guides in healthcare serve as comprehensive documents outlining the specific rules, standards, and protocols for implementing interoperable health information systems.'
+                  'Values used to standardize and categorize data elements within a system, making it easier to understand and compare data across different applications or processes.'
                 }
-                pathname={'https://confluence.hl7.org/display/FHIR/Authoring+FHIR+Implementation+Guides+-+Introduction'}
+                pathname={'/industry-resources#rd'}
                 maxWidth={industryTestingResourceRow}
                 imageWidth={industryTestingResourceRow + 'px'}
-                buttonTitle="Learn"
               />
             </Box>
           </Box>

src/components/industry-resources/IndustryResourcesHome.tsx

@@ -0,0 +1,171 @@
+// MUI Imports
+import BannerBox from '../shared/BannerBox'
+import { Box, Container, Typography } from '@mui/material'
+// Global Imports
+import Link from 'next/link'
+// MUI Icons
+import { ArrowForward, TipsAndUpdatesOutlined } from '@mui/icons-material'
+import palette from '@/styles/palette'
+import SectionHeader from '../shared/SectionHeader'
+import SubMenu, { menuProps } from '@/components/shared/SubMenu'
+import VerticalCard from '../shared/VerticalCard'
+
+const menuItems: menuProps[] = [
+  { heading: 'HL7', href: '#hl7' },
+  { heading: 'Implementation Guides', href: '#ig' },
+  { heading: 'MITRE Github', href: '#mg' },
+  { heading: 'Referenece Data', href: '#rd' },
+]
+const IndustryResourcesHome = () => {
+  return (
+    <Box>
+      {/* Global Header */}
+      <BannerBox
+        breadcrumbs={
+          <Link color={palette.secondary} href={'/industry-resources'}>
+            Industry Resources
+          </Link>
+        }
+        heading={'Industry Resources'}
+        description={
+          <>
+            {
+              'Welcome to Your Ultimate Hub for Industry Resources, where professionals across various sectors find the tools, insights, and connections they need to excel. From comprehensive guides and research reports to the latest industry news and trends, we provide everything you need to stay ahead in your field. Join our community to access exclusive content, expert advice, and a network of like-minded professionals. Your journey to industry excellence starts here.'
+            }
+          </>
+        }
+      />
+      {/* Main Content */}
+      <Container>
+        {/* Resources Header*/}
+        <SectionHeader
+          header={'Comprehensive Insights, Expert Advice, Unmatched Connections'}
+          subHeader={'Empowering Your Success with Top-Tier Industry Resources'}
+        />
+        <Box pb={4} gap={4} display={'flex'} flexDirection={'row'}>
+          <Box
+            top={'80px'}
+            position={'sticky'}
+            height={'fit-content'}
+            width={'15vw'}
+            pb={4}
+            gap={4}
+            display={'flex'}
+            flexDirection={'column'}
+          >
+            <SubMenu menuItems={menuItems} />
+            <Box
+              border={`1px solid ${palette.grey}`}
+              borderRadius={2}
+              padding={4}
+              display={'flex'}
+              alignItems={'center'}
+              justifyContent={'space-between'}
+              flexDirection={'row'}
+              width={'100%'}
+            >
+              <Typography align="center" variant="body2" color={palette.greyDark}>
+                <TipsAndUpdatesOutlined color="primary" />
+                <br />
+                Stay tuned for future releases where additional resources may be available on this page.
+              </Typography>
+            </Box>
+          </Box>
+
+          {/* Resources*/}
+          <Box display={'flex'} gap={4} flexDirection={'column'} width={'100%'}>
+            <Box id="hl7" sx={{ scrollMarginTop: '6em' }}>
+              <VerticalCard
+                title={'HL7'}
+                description={
+                  <Box sx={{ borderTop: `1px solid ${palette.divider}` }}>
+                    <Typography pt={2} gutterBottom variant="body2" fontWeight={600}>
+                      Assess the conformance, interoperability, and functionality of healthcare information systems
+                      implementing HL7 standards.
+                    </Typography>
+                    <Typography gutterBottom variant="body2">
+                      This page describes the FHIR tooling ecosystem and the vision for its future development,
+                      including the FHIR community&apos;s collective view of what types of tooling are needed, how those
+                      tools might best interact with each other and how the tooling community itself will interact and
+                      collaborate to maximize the benefit of its collective investment. It also serves as an entry point
+                      for those who are new to the FHIR tooling community and are interested in what tooling is
+                      available and/or how they might best contribute to the community.
+                    </Typography>
+                    <Typography variant="caption">
+                      This is a living document. It will evolve as the needs and vision of the community change.
+                    </Typography>
+                  </Box>
+                }
+                buttonTitle={'ACCESS MORE INFORMATION'}
+                buttonIcon={<ArrowForward />}
+                buttonHref={'https://confluence.hl7.org/display/FHIR/FHIR+Tooling+Ecosystem'}
+              />
+            </Box>
+            <Box id="ig" sx={{ scrollMarginTop: '6em' }}>
+              <VerticalCard
+                title={'Implementation Guides'}
+                description={
+                  <Box sx={{ borderTop: `1px solid ${palette.divider}` }}>
+                    <Typography pt={2} gutterBottom variant="body2" fontWeight={600}>
+                      Implementation guides in healthcare serve as comprehensive documents outlining the specific rules,
+                      standards, and protocols for implementing interoperable health information systems.
+                    </Typography>
+                    <Typography gutterBottom variant="body2">
+                      The FHIR community publishes Implementation Guides that build on the specification and detail how
+                      FHIR is used in a particular context. An implementation guide is a combination of human readable
+                      documentation and computer processable content published as a FHIR NPM package.
+                    </Typography>
+                  </Box>
+                }
+                buttonTitle={'ACCESS GUIDES'}
+                buttonIcon={<ArrowForward />}
+                buttonHref={
+                  'https://confluence.hl7.org/display/FHIR/Authoring+FHIR+Implementation+Guides+-+Introduction'
+                }
+              />
+            </Box>
+            <Box id="mg" sx={{ scrollMarginTop: '6em' }}>
+              <VerticalCard
+                title={'MITRE Github'}
+                description={
+                  <Box sx={{ borderTop: `1px solid ${palette.divider}` }}>
+                    <Typography pt={2} gutterBottom variant="body2" fontWeight={600}>
+                      Open Source Software from the MITRE Corporation
+                    </Typography>
+                    <Typography gutterBottom variant="body2">
+                      Visit MITRE&apos;s GitHub page to explore a wealth of open-source repositories. MITRE, a leader in
+                      innovative research and technology, offers a variety of projects that span cybersecurity,
+                      artificial intelligence, healthcare, and more. By accessing their GitHub, you&apos;ll gain
+                      insights into advanced solutions and tools crafted by experts.
+                    </Typography>
+                  </Box>
+                }
+                buttonTitle={'MITRE GitHub Repositories'}
+                buttonIcon={<ArrowForward />}
+                buttonHref={'https://github.com/mitre'}
+              />
+            </Box>
+            <Box id="rd" sx={{ scrollMarginTop: '6em' }}>
+              <VerticalCard
+                title={'Reference Data'}
+                description={
+                  <Box sx={{ borderTop: `1px solid ${palette.divider}` }}>
+                    <Typography pt={2} gutterBottom variant="body2" fontWeight={600}>
+                      Values used to standardize and categorize data elements within a system, making it easier to
+                      understand and compare data across different applications or processes.
+                    </Typography>
+                  </Box>
+                }
+                buttonTitle={'DOCUMENTATION'}
+                buttonIcon={<ArrowForward />}
+                buttonHref={'#'}
+              />
+            </Box>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  )
+}
+
+export default IndustryResourcesHome

src/components/shared/SubMenu.tsx

@@ -1,6 +1,8 @@
+'use client'
 import React from 'react'
 import { Box, List, ListItemButton, ListItemText } from '@mui/material'
 import Link from 'next/link'
+import { useTheme } from '@mui/material/styles'
 import palette from '@/styles/palette'
 
 export type menuProps = {
@@ -12,17 +14,19 @@ export interface SubMenuProps {
   menuItems: menuProps[]
 }
 const SubMenu = ({ menuItems }: SubMenuProps) => {
+  const theme = useTheme()
   return (
     <Box
       sx={{
         minWidth: '200px',
         borderRadius: '4px',
-        top: '80px',
-        position: 'sticky',
         height: 'fit-content',
         border: '1px solid #E8E8E8',
         backgroundColor: '#FFFFFF',
         boxShadow: '8px 0px 32px 0px rgba(0, 0, 0, 0.16)',
+        [theme.breakpoints.down('md')]: {
+          minWidth: '100px',
+        },
       }}
     >
       <List sx={{}} component="nav">

src/components/cqmt/VerticalCard.tsx → src/components/shared/VerticalCard.tsx

@@ -1,8 +1,8 @@
-import { Card, CardHeader, CardContent, Typography, Button } from '@mui/material'
+import { Card, CardHeader, CardContent, Button } from '@mui/material'
 
 export interface VerticalCardProps {
   title: string
-  description: string
+  description: React.ReactNode
   buttonTitle: string
   buttonIcon: React.ReactNode
   buttonHref: string
@@ -15,9 +15,7 @@ const VerticalCard = ({ title, description, buttonTitle, buttonIcon, buttonHref
         titleTypographyProps={{ fontSize: '1em', fontWeight: '600' }}
         title={title}
       ></CardHeader>
-      <CardContent sx={{ pb: 1 }}>
-        <Typography variant="body2">{description}</Typography>
-      </CardContent>
+      <CardContent sx={{ pb: 1 }}>{description}</CardContent>
       <Button
         disableRipple
         href={buttonHref}

src/components/shared/nav/nav/categories/SiteNavIndustryTools.tsx

@@ -1,60 +1,27 @@
-import {
-  Biotech,
-  CloudOutlined,
-  FolderSpecialOutlined,
-  MenuBookOutlined,
-  MonitorHeartOutlined,
-} from '@mui/icons-material'
-import { useState } from 'react'
+import { CloudOutlined } from '@mui/icons-material'
+import { Divider, ListItemButton, ListItemIcon, ListItemText } from '@mui/material/'
+import Link from 'next/link'
 
 /* Custom Imports */
-import { NavListItemType } from '@/types/NavListItemType'
-import NavListHeadItem from '../NavListHeadItem'
-import NavListSubItems from '../NavListSubItems'
-
-export default function SiteNavIndustryTools() {
-  const [openIndustryTestingList, setOpenIndustryTestingList] = useState(false)
-
-  const handleClickIndustryTestingList = () => {
-    setOpenIndustryTestingList(!openIndustryTestingList)
-  }
-
-  const items: NavListItemType[] = [
-    {
-      text: 'HL7 Tools',
-      isExternalLink: true,
-      href: 'https://confluence.hl7.org/display/FHIR/FHIR+Tooling+Ecosystem',
-      icon: <MonitorHeartOutlined />,
-    },
-    {
-      text: 'Reference Data',
-      isExternalLink: true,
-      href: '/reference-data',
-      icon: <FolderSpecialOutlined />,
-    },
-    {
-      text: 'Implementation Guide Authoring Tools',
-      isExternalLink: true,
-      href: 'https://confluence.hl7.org/display/FHIR/Authoring+FHIR+Implementation+Guides+-+Introduction',
-      icon: <MenuBookOutlined />,
-    },
-    {
-      text: 'MITRE Github',
-      isExternalLink: true,
-      href: 'https://github.com/orgs/mitre',
-      icon: <Biotech />,
-    },
-  ]
+import { NAV_PADDING_LEFT_SINGLE_HEADER, NAV_THICKER_DIVIDER } from '@/constants/navConstants'
+import palette from '@/styles/palette'
 
+export default function SiteNavIndustryResources() {
   return (
-    <div id="site-nav-industry-testing">
-      <NavListHeadItem
-        text="Industry Testing Resources"
-        handleClickCategoryList={handleClickIndustryTestingList}
-        icon={<CloudOutlined />}
-        openCategoryList={openIndustryTestingList}
-      />
-      <NavListSubItems items={items} openCategoryList={openIndustryTestingList} />
-    </div>
+    <>
+      <Link href="/industry-resources" passHref>
+        <ListItemButton>
+          <ListItemIcon>
+            <CloudOutlined sx={{ strokeWidth: 0.5, stroke: `${palette.primary}` }} color="primary" />
+            <ListItemText
+              primaryTypographyProps={{ color: palette.primary, fontWeight: 500 }}
+              primary="Industry Resources"
+              sx={{ pl: NAV_PADDING_LEFT_SINGLE_HEADER, color: 'inherit' }}
+            />
+          </ListItemIcon>
+        </ListItemButton>
+      </Link>
+      <Divider sx={{ borderWidth: NAV_THICKER_DIVIDER }} />
+    </>
   )
 }