diff --git a/src/AppLayout.tsx b/src/AppLayout.tsx
index 0a36fcfbc..8dbd0b510 100644
--- a/src/AppLayout.tsx
+++ b/src/AppLayout.tsx
@@ -8,6 +8,7 @@ import { useMatchRoutes } from './config/routes/hooks/useMatchRoutes'
import { useAuthContext } from './context'
import { useActivityHook } from './modules/discovery/hooks/useActivityHook'
import { PlatformNavBar } from './modules/navigation/platformNavBar/PlatformNavBar'
+import { InfoBanner } from './modules/notification/InfoBanner'
import { LoadingPage } from './pages/loading'
import { dimensions, ID } from './shared/constants'
import { useLayoutAnimation } from './shared/hooks'
@@ -66,6 +67,7 @@ export const AppLayout = () => {
>
+
diff --git a/src/api/airtable.ts b/src/api/airtable.ts
index ee167f90f..7be1d36b7 100644
--- a/src/api/airtable.ts
+++ b/src/api/airtable.ts
@@ -11,3 +11,13 @@ export const fetchFeaturedProject = async () => {
},
}).then((response) => response.json())
}
+
+export const fetchInfoBannerData = async () => {
+ return fetch(`${AIRTABLE_API}/Info%20Banner?view=Grid%20view`, {
+ method: 'GET',
+ headers: {
+ Authorization: `Bearer ${VITE_APP_AIR_TABLE_KEY}`,
+ 'Content-Type': 'application/json',
+ },
+ }).then((response) => response.json())
+}
diff --git a/src/modules/notification/InfoBanner.tsx b/src/modules/notification/InfoBanner.tsx
new file mode 100644
index 000000000..44fad0a50
--- /dev/null
+++ b/src/modules/notification/InfoBanner.tsx
@@ -0,0 +1,105 @@
+import { Box, HStack, IconButton, Link, VStack } from '@chakra-ui/react'
+import { useAtom } from 'jotai'
+import { useEffect, useState } from 'react'
+import { PiX } from 'react-icons/pi'
+
+import { fetchInfoBannerData } from '@/api/airtable'
+import { GeyserLogoIcon } from '@/components/icons/svg/GeyserLogoIcon'
+import { CardLayout } from '@/shared/components/layouts'
+import { Body } from '@/shared/components/typography'
+import { lightModeColors } from '@/shared/styles'
+
+import { InfoBannerHistoryDataAtom } from './InfoBannerAtom'
+
+type AirtableInfoBannerData = {
+ id: string
+ title: string
+ description: string
+ link: string
+ linkText: string
+}
+
+export const InfoBanner = () => {
+ const [infoBannerHistoryData, setInfoBannerHistoryData] = useAtom(InfoBannerHistoryDataAtom)
+
+ const [loading, setLoading] = useState(true)
+
+ const [data, setData] = useState()
+
+ useEffect(() => {
+ const fetchFeatured = async () => {
+ try {
+ const response = await fetchInfoBannerData()
+
+ const records = response?.records || []
+
+ if (records.length > 0) {
+ const recordLength = records.length
+ const data = records[recordLength - 1]?.fields
+ if (data) {
+ setData(data)
+ }
+ }
+ } catch (error) {}
+
+ setLoading(false)
+ }
+
+ fetchFeatured()
+ }, [])
+
+ const available = data && !infoBannerHistoryData.includes(data.id)
+
+ if (loading || !available) {
+ return null
+ }
+
+ const handleInfoBannerHistoryData = () => {
+ if (data) {
+ setInfoBannerHistoryData((current) => {
+ return [...current, data.id]
+ })
+ }
+ }
+
+ return (
+
+
+ }
+ color={lightModeColors.neutral1[11]}
+ _hover={{ background: lightModeColors.neutral1[3] }}
+ onClick={handleInfoBannerHistoryData}
+ />
+
+
+
+
+
+ {data?.title}
+
+
+
+ {data?.description}{' '}
+
+
+ {data?.linkText}
+
+
+
+
+
+
+ )
+}
diff --git a/src/modules/notification/InfoBannerAtom.ts b/src/modules/notification/InfoBannerAtom.ts
new file mode 100644
index 000000000..a1b2f83f6
--- /dev/null
+++ b/src/modules/notification/InfoBannerAtom.ts
@@ -0,0 +1,7 @@
+import { atomWithStorage } from 'jotai/utils'
+
+export const InfoBannerLocalStorageKey = 'infoBannerData'
+
+export type InfoBannerHistoryDataType = string[]
+
+export const InfoBannerHistoryDataAtom = atomWithStorage(InfoBannerLocalStorageKey, [])