Add SC routing, Start landing page

src/app/c-cda/scorecard/page.tsx

@@ -0,0 +1,5 @@
+import ScorecardHome from '@/components/c-cda/additional/ScorecardHome'
+
+export default function Scorecard() {
+  return <ScorecardHome />
+}

src/components/c-cda/CCDAHome.tsx

@@ -73,10 +73,11 @@ const CCDAHome = () => {
             description={
               'The SITE C-CDA Scorecard provides an enhanced level of interoperability for C-CDA documents by using a comprehensive scoring system, which allows implementers to improve the data quality and representation of their C-CDA documents.'
             }
-            pathname={'/c-cda/'}
+            pathname={'/c-cda/scorecard/'}
             maxWidth={maxWidth}
             imageWidth={maxWidth + 'px'}
           />
+          {/* TODO: Are we going to make a landing page for the one click scorecard or just link to the ONC page? */}
           <CardWithImage
             title={'One Click Scorecard'}
             cardImage={oneclick}
@@ -96,6 +97,7 @@ const CCDAHome = () => {
             'This area provides tools for testing conformance of artifacts to industry standards and specific criteria'
           }
         />
+        {/* TODO: Below should probably only lilst USCDI v3 and v1, nothing else... */}
         <Box paddingBottom={4} display={'flex'} width={'100%'} justifyContent={'space-between'}>
           <CardWithImage
             title={'2015 Edition'}

src/components/c-cda/additional/ScorecardHome.tsx

@@ -0,0 +1,50 @@
+import SectionHeader from '@shared/SectionHeader'
+import { Container } from '@mui/material'
+import BannerBox from '@shared/BannerBox'
+import styles from '@shared/styles.module.css'
+import Link from 'next/link'
+
+export default function ScorecardHome() {
+  return (
+    <>
+      {/* Global Header */}
+      <BannerBox
+        breadcrumbs={[
+          <Link color="inherit" href="/c-cda" key="1" className={styles.link}>
+            C-CDA
+          </Link>,
+          <Link color="inherit" href="/c-cda/scorecard" key="2" className={styles.link}>
+            Scorecard
+          </Link>,
+        ]}
+        heading={'C-CDA Scorecard'}
+        description={
+          <>
+            The SITE C-CDA Scorecard provides an enhanced level of interoperability for C-CDA documents by using a
+            comprehensive scoring system, which allows implementers to improve the data quality and representation of
+            their C-CDA documents.
+          </>
+        }
+        description2={
+          <>
+            <b>PHI Note:</b> The C-CDA Scorecard does not retain your submitted C-CDA file as the file is deleted from
+            the server immediately after processing. However, we strongly suggest that you do not include any Protected
+            Health Information (PHI) or Personally Identifiable Information (PII) in your C-CDA file submissions to the
+            Scorecard. Click{' '}
+            <a
+              href="http://www.hhs.gov/hipaa/for-professionals/privacy/special-topics/de-identification/index.html"
+              target="_blank"
+            >
+              here
+            </a>{' '}
+            for more information on how to de-identify PHI.
+          </>
+        }
+      />
+      {/* Main Content */}
+      <Container>
+        <SectionHeader header={'Run the Scorecard'} subHeader={'Upload your file or try the demo'} />
+      </Container>
+    </>
+  )
+}

src/components/shared/BannerBox.tsx

@@ -7,8 +7,9 @@ export interface BannerProps {
   subHeading?: string
   isTourButton?: boolean
   description: React.ReactNode
+  description2?: React.ReactNode
 }
-const BannerBox = ({ breadcrumbs, heading, subHeading, description, isTourButton }: BannerProps) => {
+const BannerBox = ({ breadcrumbs, heading, subHeading, description, isTourButton, description2 }: BannerProps) => {
   const subHeadingAndTourButtonBoxStyle = {
     display: 'flex',
     justifyContent: 'space-between',
@@ -34,6 +35,9 @@ const BannerBox = ({ breadcrumbs, heading, subHeading, description, isTourButton
         <Typography variant="body1" sx={{ pt: 1 }}>
           {description}
         </Typography>
+        <Typography variant="body1" sx={{ pt: 1 }}>
+          {description2}
+        </Typography>
       </Container>
     </Box>
   )