diff --git a/apps/portals/elportal/src/pages/HomePageV2.tsx b/apps/portals/elportal/src/pages/HomePageV2.tsx index 7d33a120ca..f0d186055f 100644 --- a/apps/portals/elportal/src/pages/HomePageV2.tsx +++ b/apps/portals/elportal/src/pages/HomePageV2.tsx @@ -13,6 +13,7 @@ import { ImageCardGridWithLinks, } 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 { partnersSql, peopleSql, @@ -225,6 +226,7 @@ export default function HomePage() { style: { maxWidth: '100%', padding: 0 }, }} > + diff --git a/apps/portals/elportal/src/themes/HomePageThemeProvider.tsx b/apps/portals/elportal/src/themes/HomePageThemeProvider.tsx index ad4cea0adb..6267065685 100644 --- a/apps/portals/elportal/src/themes/HomePageThemeProvider.tsx +++ b/apps/portals/elportal/src/themes/HomePageThemeProvider.tsx @@ -14,6 +14,9 @@ export function HomePageThemeProvider({ children }: React.PropsWithChildren) { headline2: { fontFamily: "'Merriweather', serif", }, + headline3: { + fontFamily: "'Merriweather', serif", + }, }, } const mergedTheme = deepmerge(theme, homePageOverrides) diff --git a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx new file mode 100644 index 0000000000..e26201bb73 --- /dev/null +++ b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx @@ -0,0 +1,135 @@ +import { Box, Button, Typography } from '@mui/material' +import React from 'react' +import exploreIcon from './assets/explore_icon.png' +import uncoverIcon from './assets/uncover_icon.png' +import accessIcon from './assets/access_icon.png' + +const ELGettingStarted: React.FC = () => { + return ( + + + + Getting Started + + + We provide all the help you need for navigating the portal and + accelerating your research. + + + + + + + + ) +} + +export default ELGettingStarted + +export function IconSquare({ iconUrl, headline, description }) { + return ( + + + + {headline} + + + {description} + + + ) +} diff --git a/apps/synapse-portal-framework/src/components/elportal/assets/access_icon.png b/apps/synapse-portal-framework/src/components/elportal/assets/access_icon.png new file mode 100644 index 0000000000..6823bb5bb1 Binary files /dev/null and b/apps/synapse-portal-framework/src/components/elportal/assets/access_icon.png differ diff --git a/apps/synapse-portal-framework/src/components/elportal/assets/explore_icon.png b/apps/synapse-portal-framework/src/components/elportal/assets/explore_icon.png new file mode 100644 index 0000000000..505bd76aea Binary files /dev/null and b/apps/synapse-portal-framework/src/components/elportal/assets/explore_icon.png differ diff --git a/apps/synapse-portal-framework/src/components/elportal/assets/uncover_icon.png b/apps/synapse-portal-framework/src/components/elportal/assets/uncover_icon.png new file mode 100644 index 0000000000..3fa0467b7a Binary files /dev/null and b/apps/synapse-portal-framework/src/components/elportal/assets/uncover_icon.png differ diff --git a/apps/synapse-portal-framework/src/components/index.ts b/apps/synapse-portal-framework/src/components/index.ts index e958c70de6..b8672a045c 100644 --- a/apps/synapse-portal-framework/src/components/index.ts +++ b/apps/synapse-portal-framework/src/components/index.ts @@ -10,6 +10,7 @@ import NFBrowseToolsPage from './nf/NFBrowseToolsPage' import ELBrowseToolsPage from './elportal/ELBrowseToolsPage' import ELBetaLaunchBanner from './elportal/ELBetaLaunchBanner' import ELContributeYourData from './elportal/ELContributeYourData' +import ELGettingStarted from './elportal/ELGettingStarted' import ARKWelcomePage from './arkportal/ARKWelcomePage' import GenieHomePageHeader from './genie/GenieHomePageHeader' import ParticipantsBarPlot from './crc-researcher/ParticipantsBarPlot' @@ -47,6 +48,7 @@ const PortalComponents = { ELBrowseToolsPage, ELBetaLaunchBanner, ELContributeYourData, + ELGettingStarted, ARKWelcomePage, GenieHomePageHeader, TabbedSynapseObjects,