feat: multichain-banner (#9449)

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to add a `MultiChainBanner` component and update
translations and banners for a PancakeSwap Multichain Celebration.

### Detailed summary
- Added `MultiChainBanner` component
- Updated translations and banners for Multichain Celebration
- Added new banner components and configurations

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

.changeset/rare-donuts-pump.md

@@ -0,0 +1,5 @@
+---
+'@pancakeswap/widgets-internal': patch
+---
+
+Added BannerDesc Component.

.vscode/settings.json

@@ -33,6 +33,7 @@
     "LINEA",
     "Merkl",
     "multicall",
+    "Multichain",
     "OPBNB",
     "pancakeswap",
     "preinstall",

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 = (
+    <LinkExternalAction href={participateLink} color="white" showExternalIcon={false}>
+      <Flex alignItems="center" style={{ whiteSpace: 'nowrap' }}>
+        {t('Participate Now')}
+        <ArrowForwardIcon color="white" ml="4px" />
+      </Flex>
+    </LinkExternalAction>
+  )
+
+  return (
+    <BannerContainer background="radial-gradient(338.53% 307.7% at 0% -37.33%, #5C6BB4 0%, #5AE1EC 100%)">
+      <BannerMain
+        badges={<PancakeSwapBadge whiteText />}
+        title={<BannerTitle variant="orange">{t('PancakeSwap Multichain Celebration')}</BannerTitle>}
+        desc={isMobile ? null : <BannerDesc color="white">{t('Starting MAR 14 - Over $3500 in prizes!')}</BannerDesc>}
+        actions={<BannerActionContainer>{participateAction}</BannerActionContainer>}
+      />
+      <BannerGraphics>
+        <BackgroundGraphic src={bgDesktop} width={468} height={224} sm={bgSmVariant} xs={bgXsVariant} />
+      </BannerGraphics>
+    </BannerContainer>
+  )
+}

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 (
-    <BannerDesc>
-      <Trans>$5,000 extra reward pool</Trans>
-    </BannerDesc>
-  )
-}
-
 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')}
           </BannerTitle>
         }
-        desc={isMobile ? null : <Desc />}
+        desc={isMobile ? null : <BannerDesc>{t('$5,000 extra reward pool')}</BannerDesc>}
         actions={
           <BannerActionContainer>
             {stakeAction}

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: <UserBanner />,
       },
       { shouldRender: isRenderIFOBanner || Boolean(countdown), banner: <NewIFOBanner /> },
+      {
+        shouldRender: true,
+        banner: <MultiChainBanner />,
+      },
       {
         shouldRender: true,
         banner: <WBNBFixedStakingBanner />,

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"
 }

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;
+  }
+`;

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";