Merge pull request #1519 from lakikowolfe/PORTALS-3384

PORTALS-3384

apps/portals/elportal/src/pages/HomePageV2.tsx

@@ -11,6 +11,8 @@ import {
 } from 'synapse-react-client'
 import ELContributeYourData from '@sage-bionetworks/synapse-portal-framework/components/elportal/ELContributeYourData'
 import ELGettingStarted from '@sage-bionetworks/synapse-portal-framework/components/elportal/ELGettingStarted'
+import ELSupportedByNIH from '@sage-bionetworks/synapse-portal-framework/components/elportal/ELSupportedByNIH'
+
 import {
   topPublicationsSql,
   whatWeDoSql,
@@ -141,7 +143,8 @@ export default function HomePage() {
       <SectionLayout
         ContainerProps={{
           className: 'home-spacer',
-          style: { maxWidth: '100%', padding: 0 },
+          maxWidth: false,
+          style: { padding: 0 },
         }}
       >
         <ELGettingStarted />
@@ -259,6 +262,17 @@ export default function HomePage() {
           link="/Explore/Computational Tools"
         />
       </SectionLayout>
+      <div className={'home-bg-dark'}>
+        <SectionLayout
+          ContainerProps={{
+            className: 'home-spacer',
+            maxWidth: false,
+            style: { padding: 0 },
+          }}
+        >
+          <ELSupportedByNIH />
+        </SectionLayout>
+      </div>
     </>
   )
 }

apps/synapse-portal-framework/src/components/elportal/ELSupportedByNIH.tsx

@@ -0,0 +1,92 @@
+import { Box, Button, Typography } from '@mui/material'
+import React from 'react'
+import NIHLogo from './assets/nia_logo.png'
+
+const ELSupportedByNIH: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: {
+          xs: '100%',
+          sm: '50% 50%',
+          md: '25% 75%',
+        },
+        position: 'relative',
+        p: '80px',
+      }}
+    >
+      <Box
+        sx={{
+          width: '100%',
+          height: '100%',
+          borderTop: '3px solid #B5D3CE',
+          py: '30px',
+        }}
+      >
+        <Typography
+          variant="headline2"
+          sx={{
+            fontSize: '28px',
+            mb: '20px',
+          }}
+        >
+          Supported by the NIA’s Division of Geriatrics and Clinical Gerontology
+          (DGCG)
+        </Typography>
+        <Button
+          variant="contained"
+          href="https://www.nia.nih.gov/research/dgcg"
+          rel="noopener noreferrer"
+          target="_blank"
+          sx={theme => ({
+            padding: '6px 24px',
+            fontWeight: '600',
+            [theme.breakpoints.down('sm')]: {
+              width: '100%',
+            },
+          })}
+        >
+          Visit the DCGC Website
+        </Button>
+      </Box>
+      <Box
+        sx={{
+          width: '100%',
+          height: '100%',
+          pl: { xs: 'none', md: '80px' },
+        }}
+      >
+        <Box
+          sx={{
+            width: 'auto',
+            height: '50px',
+            backgroundImage: `url(${NIHLogo})`,
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: 'contain',
+          }}
+        ></Box>
+        <Typography
+          variant="body1"
+          sx={{
+            pt: '32px',
+          }}
+        >
+          The National Institute on Aging (NIA) is a leading research
+          organization dedicated understanding the nature of aging, and extend
+          the healthy, active years of life. As part of the National Institutes
+          of Health (NIH), NIA supports cutting-edge research on aging and
+          age-related diseases, including Alzheimer's disease and other forms of
+          dementia. With a mission to improve the health and well-being of older
+          populations, NIA funds innovative scientific studies, promotes
+          training for the next generation of researchers, and provides trusted
+          health information to the public. By fostering collaboration across
+          disciplines, NIA aims to advance our understanding of aging, extend
+          healthspan, and ensure healthier lives for individuals of all ages.
+        </Typography>
+      </Box>
+    </Box>
+  )
+}
+
+export default ELSupportedByNIH

apps/synapse-portal-framework/src/components/index.ts

@@ -1,5 +1,4 @@
 import { Navigate as Redirect } from 'react-router'
-import ARKWelcomePage from './arkportal/ARKWelcomePage'
 import ChallengeDataDownloadWrapper from './challengeportal/ChallengeDataDownloadWrapper'
 import ChallengeDetailPageWrapper from './challengeportal/ChallengeDetailPageWrapper'
 import ChallengeParticipantGoogleMap from './challengeportal/ChallengeParticipantGoogleMap'
@@ -18,6 +17,9 @@ import ELBetaLaunchBanner from './elportal/ELBetaLaunchBanner'
 import ELBrowseToolsPage from './elportal/ELBrowseToolsPage'
 import ELContributeYourData from './elportal/ELContributeYourData'
 import ELGettingStarted from './elportal/ELGettingStarted'
+import ELSupportedByNIH from './elportal/ELSupportedByNIH'
+import ARKWelcomePage from './arkportal/ARKWelcomePage'
+
 import ExploreWrapper from './Explore/ExploreWrapper'
 import GenieHomePageHeader from './genie/GenieHomePageHeader'
 import Header from './Header'
@@ -51,6 +53,7 @@ const PortalComponents = {
   ELBetaLaunchBanner,
   ELContributeYourData,
   ELGettingStarted,
+  ELSupportedByNIH,
   ARKWelcomePage,
   GenieHomePageHeader,
   TabbedSynapseObjects,