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,