diff --git a/.changeset/rare-donuts-pump.md b/.changeset/rare-donuts-pump.md
new file mode 100644
index 0000000000000..9818b832adef2
--- /dev/null
+++ b/.changeset/rare-donuts-pump.md
@@ -0,0 +1,5 @@
+---
+'@pancakeswap/widgets-internal': patch
+---
+
+Added BannerDesc Component.
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 54fecae4677ad..85c5b7250447f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -33,6 +33,7 @@
"LINEA",
"Merkl",
"multicall",
+ "Multichain",
"OPBNB",
"pancakeswap",
"preinstall",
diff --git a/apps/web/src/views/Home/components/Banners/MultichainBanner.tsx b/apps/web/src/views/Home/components/Banners/MultichainBanner.tsx
new file mode 100644
index 0000000000000..3c287005221f0
--- /dev/null
+++ b/apps/web/src/views/Home/components/Banners/MultichainBanner.tsx
@@ -0,0 +1,60 @@
+import { useTranslation } from '@pancakeswap/localization'
+import { ArrowForwardIcon, Flex, useMatchBreakpoints } from '@pancakeswap/uikit'
+import {
+ BackgroundGraphic,
+ BannerActionContainer,
+ BannerContainer,
+ BannerDesc,
+ BannerGraphics,
+ BannerMain,
+ BannerTitle,
+ GraphicDetail,
+ LinkExternalAction,
+ PancakeSwapBadge,
+} from '@pancakeswap/widgets-internal'
+import { ASSET_CDN } from 'config/constants/endpoints'
+
+const bgMobile = `${ASSET_CDN}/web/banners/multichain/bg-mobile.png`
+const bgDesktop = `${ASSET_CDN}/web/banners/multichain/bg-desktop.png`
+
+const bgSmVariant: GraphicDetail = {
+ src: bgMobile,
+ width: 272,
+ height: 224,
+}
+
+const bgXsVariant: GraphicDetail = {
+ src: bgMobile,
+ width: 218,
+ height: 182,
+}
+
+const participateLink = 'https://app.questn.com/PancakeSwap'
+
+export const MultiChainBanner = () => {
+ const { t } = useTranslation()
+ const { isMobile } = useMatchBreakpoints()
+
+ const participateAction = (
+
+
+ {t('Participate Now')}
+
+
+
+ )
+
+ return (
+
+ }
+ title={{t('PancakeSwap Multichain Celebration')}}
+ desc={isMobile ? null : {t('Starting MAR 14 - Over $3500 in prizes!')}}
+ actions={{participateAction}}
+ />
+
+
+
+
+ )
+}
diff --git a/apps/web/src/views/Home/components/Banners/WBNBFixedStakingBanner.tsx b/apps/web/src/views/Home/components/Banners/WBNBFixedStakingBanner.tsx
index b0379641662b6..69339b7388b3c 100644
--- a/apps/web/src/views/Home/components/Banners/WBNBFixedStakingBanner.tsx
+++ b/apps/web/src/views/Home/components/Banners/WBNBFixedStakingBanner.tsx
@@ -1,4 +1,4 @@
-import { Trans, useTranslation } from '@pancakeswap/localization'
+import { useTranslation } from '@pancakeswap/localization'
import { ArrowForwardIcon, Flex, Text } from '@pancakeswap/uikit'
import {
BackgroundGraphic,
@@ -49,14 +49,6 @@ const VerticalDivider = styled.span`
margin: auto 8px;
`
-const Desc = () => {
- return (
-
- $5,000 extra reward pool
-
- )
-}
-
const Floating = styled(FloatingGraphic)`
left: 3%;
top: 10%;
@@ -135,7 +127,7 @@ export function WBNBFixedStakingBanner() {
{isMobile ? t('Stake WBNB, Win Combo Rewards!') : t('Stake WBNB to Win Combo Rewards')}
}
- desc={isMobile ? null : }
+ desc={isMobile ? null : {t('$5,000 extra reward pool')}}
actions={
{stakeAction}
diff --git a/apps/web/src/views/Home/components/Banners/hooks/useMultipleBannerConfig.tsx b/apps/web/src/views/Home/components/Banners/hooks/useMultipleBannerConfig.tsx
index eec350a5844e1..9049145b1a9a6 100644
--- a/apps/web/src/views/Home/components/Banners/hooks/useMultipleBannerConfig.tsx
+++ b/apps/web/src/views/Home/components/Banners/hooks/useMultipleBannerConfig.tsx
@@ -4,6 +4,7 @@ import { ReactElement, useMemo } from 'react'
import CompetitionBanner from '../CompetitionBanner'
import { GalxeTraverseBanner } from '../GalxeTraverseBanner'
import GameBanner from '../GameBanner'
+import { MultiChainBanner } from '../MultichainBanner'
import { NemesisDownfallBanner } from '../NemesisDownfallBanner'
import NewIFOBanner from '../NewIFOBanner'
import PerpetualBanner from '../PerpetualBanner'
@@ -47,6 +48,10 @@ export const useMultipleBannerConfig = () => {
banner: ,
},
{ shouldRender: isRenderIFOBanner || Boolean(countdown), banner: },
+ {
+ shouldRender: true,
+ banner: ,
+ },
{
shouldRender: true,
banner: ,
diff --git a/packages/localization/src/config/translations.json b/packages/localization/src/config/translations.json
index 357da6ee787ef..faa8b74fa4cbc 100644
--- a/packages/localization/src/config/translations.json
+++ b/packages/localization/src/config/translations.json
@@ -3268,5 +3268,9 @@
"Registration Error": "Registration Error",
"Stake your WBNB here": "Stake your WBNB here",
"Stake WBNB, Win Combo Rewards!": "Stake WBNB, Win Combo Rewards!",
- "Stake WBNB to Win Combo Rewards": "Stake WBNB to Win Combo Rewards"
+ "Stake WBNB to Win Combo Rewards": "Stake WBNB to Win Combo Rewards",
+ "$5,000 extra reward pool": "$5,000 extra reward pool",
+ "PancakeSwap Multichain Celebration": "PancakeSwap Multichain Celebration",
+ "Starting MAR 14 - Over $3500 in prizes!": "Starting MAR 14 - Over $3500 in prizes!",
+ "Participate Now": "Participate Now"
}
diff --git a/packages/widgets-internal/components/Banner/BannerDesc.tsx b/packages/widgets-internal/components/Banner/BannerDesc.tsx
new file mode 100644
index 0000000000000..3087c2352b92d
--- /dev/null
+++ b/packages/widgets-internal/components/Banner/BannerDesc.tsx
@@ -0,0 +1,13 @@
+import { Text } from "@pancakeswap/uikit";
+import styled from "styled-components";
+
+export const BannerDesc = styled(Text)`
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 120%;
+
+ ${({ theme }) => theme.mediaQueries.sm} {
+ font-size: 16px;
+ white-space: nowrap;
+ }
+`;
diff --git a/packages/widgets-internal/components/Banner/index.ts b/packages/widgets-internal/components/Banner/index.ts
index 203788f704cde..75140033bb59a 100644
--- a/packages/widgets-internal/components/Banner/index.ts
+++ b/packages/widgets-internal/components/Banner/index.ts
@@ -1,5 +1,6 @@
export * from "./BannerActionContainer";
export * from "./BannerContainer";
+export * from "./BannerDesc";
export * from "./BannerGraphics";
export * from "./BannerMain";
export * from "./BannerTitle";