chore: add zksync banner (#7431)

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

<!--
copilot:all
-->
### <samp>🤖 Generated by Copilot at 611c894</samp>

### Summary
🎉🚀🛡️

<!--
1. 🎉 - This emoji represents the celebration of a new feature or
integration that benefits the users and the project. The zkSync Era
integration is a major milestone for PancakeSwap and its users, as it
enables faster and cheaper transactions on a layer 2 solution that is
compatible with Ethereum and EVM-based smart contracts.
2. 🚀 - This emoji represents the speed and scalability of the zkSync Era
solution, which can handle up to 20,000 transactions per second and
reduce gas fees by up to 100x. The rocket emoji also conveys the idea of
launching or boosting the project to new heights and reaching more users
and markets.
3. 🛡️ - This emoji represents the security and reliability of the zkSync
Era solution, which leverages zero-knowledge proofs and cryptography to
ensure the validity and finality of transactions on layer 2. The shield
emoji also conveys the idea of protecting the users and the project from
network congestion, high gas fees, and malicious attacks.
-->
This pull request adds a new banner component to the home page that
promotes the integration of PancakeSwap with zkSync Era, a layer 2
scaling solution. The component is rendered by the
`useMultipleBannerConfig` hook and uses images and styles defined in
`ZksyncBanner.tsx` and `images/index.ts`.

> _Sing, O Muse, of the swift and skillful PancakeSwap_
> _Who brought to their users a new and glorious option_
> _To trade their tokens with ease and speed on the Zksync layer_
> _And displayed a splendid banner on their homepage to declare it._

### Walkthrough
* Add a new component `ZksyncBanner` to render a banner for zkSync Era
integration
([link](https://github.com/pancakeswap/pancake-frontend/pull/7431/files?diff=unified&w=0#diff-96c8c592cb95cdeee4b804c7ef0446a64d589ec8dbd9dd9fc93826c5da873dcbR1-R141))
* Import and export the image files for the `ZksyncBanner` component in
the `images` folder and the `index.ts` file
([link](https://github.com/pancakeswap/pancake-frontend/pull/7431/files?diff=unified&w=0#diff-0ede1236551332d6554652d9afbf09aceeb9d948aa530efb754e7428f09adbeeR62-R65),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7431/files?diff=unified&w=0#diff-0ede1236551332d6554652d9afbf09aceeb9d948aa530efb754e7428f09adbeeR128-R131))
* Include the `ZksyncBanner` component in the array of banners returned
by the `useMultipleBannerConfig` hook, with a `shouldRender` property
set to `true`
([link](https://github.com/pancakeswap/pancake-frontend/pull/7431/files?diff=unified&w=0#diff-214af478b927b76b48361f0a7ba597c535ab140dcf4e7281bf15abde2a1a0e89R16),
[link](https://github.com/pancakeswap/pancake-frontend/pull/7431/files?diff=unified&w=0#diff-214af478b927b76b48361f0a7ba597c535ab140dcf4e7281bf15abde2a1a0e89R42))

apps/web/src/views/Home/components/Banners/ZksyncBanner.tsx

@@ -0,0 +1,141 @@
+import { Button, Flex, NextLinkFromReactRouter, Text, useMatchBreakpoints, OpenNewIcon } from '@pancakeswap/uikit'
+import { useTranslation } from '@pancakeswap/localization'
+import Image from 'next/legacy/image'
+import styled, { css } from 'styled-components'
+
+import { ASSET_CDN } from 'config/constants/endpoints'
+
+import { zkSyncBg, zkSyncBunny, zkSyncBgMobile, eraLogo } from './images'
+import * as S from './Styled'
+
+const pancakeSwapLogo = `${ASSET_CDN}/web/banners/ethXpancakeswap.png`
+
+const RightWrapper = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  right: 0;
+  top: 0;
+  overflow: visible;
+  > span:nth-child(1) {
+    // TradingRewardButter2
+    position: absolute !important;
+    right: -42px;
+    bottom: -60px;
+
+    ${({ theme }) => theme.mediaQueries.md} {
+      right: -42px;
+      bottom: -40px;
+    }
+    ${({ theme }) => theme.mediaQueries.lg} {
+      right: 27px;
+      bottom: 0;
+    }
+  }
+
+  > span:nth-child(2) {
+    // TradingRewardButter2
+    position: absolute !important;
+    right: 230px;
+    top: -10%;
+  }
+`
+
+const Title = styled.div`
+  position: relative;
+  font-family: 'Kanit';
+  font-size: 25.526px;
+  font-style: normal;
+  font-weight: 800;
+  line-height: 98%;
+  padding-right: 80px;
+  margin-bottom: 20px;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: 32px;
+    margin-bottom: 4px;
+    width: 100%;
+  }
+`
+
+const sharedStyle = css`
+  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.1);
+  padding: 6px 12px;
+  border-radius: 8px;
+  ${({ theme }) => theme.mediaQueries.sm} {
+    border-radius: 16px;
+    padding: 12px 24px;
+  }
+`
+
+const Divider = styled.div`
+  height: 15px;
+  width: 1px;
+  background-color: ${({ theme }) => theme.colors.white};
+`
+
+const StyledButtonLeft = styled(Button)`
+  ${sharedStyle}
+  > div {
+    color: ${({ theme }) => theme.colors.white};
+  }
+`
+
+export const ZksyncBanner = () => {
+  const { t } = useTranslation()
+  const { isMobile, isDesktop } = useMatchBreakpoints()
+
+  const title = isDesktop ? t('PancakeSwap Now Live on zkSync Era!') : t('Zksync Lormips LIVE!')
+
+  return (
+    <S.Wrapper
+      style={{
+        background: `linear-gradient(180deg, #CCA382 0%, #9DC38F 49.77%, #9FCCCF 100%)`,
+        overflow: !isDesktop ? 'hidden' : 'visible',
+      }}
+    >
+      <S.Inner>
+        <S.LeftWrapper>
+          <Flex alignItems="center" mb="8px" style={{ gap: isMobile ? 10 : 14 }}>
+            <Image
+              src={pancakeSwapLogo}
+              alt="pancakeSwapLogo"
+              width={isMobile ? 100 : 132}
+              height={isMobile ? 15 : 20}
+              unoptimized
+            />
+            <Divider />
+            <Image src={eraLogo} alt="eraLogo" width={isMobile ? 73 : 88} height={isMobile ? 14 : 16} />
+          </Flex>
+          <Title>{title}</Title>
+          {isDesktop && (
+            <Text color="white" fontSize={20} fontWeight={700} mb="8px">
+              {t('Swap and Provide Liquidity on zkSync Era Now')}
+            </Text>
+          )}
+          <Flex>
+            <NextLinkFromReactRouter
+              target="_blank"
+              to="https://blog.pancakeswap.finance/articles/pancake-swap-v3-on-zk-sync-era"
+            >
+              <StyledButtonLeft scale={['xs', 'sm', 'md']} style={{ borderRadius: isMobile && '20px' }}>
+                <Text bold fontSize={['12px', '16px']} mr="4px">
+                  {isMobile ? t('CTA') : t('Get Started')}
+                </Text>
+                <OpenNewIcon color="white" />
+              </StyledButtonLeft>
+            </NextLinkFromReactRouter>
+          </Flex>
+        </S.LeftWrapper>
+        <RightWrapper>
+          {!isDesktop ? (
+            <Image src={zkSyncBgMobile} alt="zkSyncBgMobile" width={270} height={239} placeholder="blur" />
+          ) : (
+            <Image src={zkSyncBg} alt="zkSyncBg" width={624} height={177} placeholder="blur" />
+          )}
+          {isDesktop && <Image src={zkSyncBunny} alt="zkSyncBunny" width={201} height={203} placeholder="blur" />}
+        </RightWrapper>
+      </S.Inner>
+    </S.Wrapper>
+  )
+}

apps/web/src/views/Home/components/Banners/hooks/useMultipleBannerConfig.tsx

@@ -13,6 +13,7 @@ import useIsRenderIfoBanner from './useIsRenderIFOBanner'
 import TradingRewardBanner from '../TradingRewardBanner'
 import { GalxeTraverseBanner } from '../GalxeTraverseBanner'
 import { PolygonZkEvmBanner } from '../PolygonZkEvmBanner'
+import { ZksyncBanner } from '../ZksyncBanner'
 
 interface IBannerConfig {
   shouldRender: boolean
@@ -38,6 +39,7 @@ export const useMultipleBannerConfig = () => {
 
   return useMemo(() => {
     const NO_SHUFFLE_BANNERS: IBannerConfig[] = [
+      { shouldRender: true, banner: <ZksyncBanner /> },
       { shouldRender: true, banner: <PolygonZkEvmBanner /> },
       { shouldRender: true, banner: <GalxeTraverseBanner /> },
       { shouldRender: true, banner: <PancakeProtectorBanner /> },

apps/web/src/views/Home/components/Banners/images/index.ts

@@ -59,6 +59,10 @@ import galxeLogo from './galxe-logo.png'
 import polygonZkBg from './polygon-zk-bg.png'
 import polygonZkBgMobile from './polygon-zk-bg-mobile.png'
 import polygonZkBunny from './polygon-zk-bunny.png'
+import zkSyncBgMobile from './zkSyncBgMobile.png'
+import zkSyncBg from './zkSyncBg.png'
+import zkSyncBunny from './zkSyncBunny.png'
+import eraLogo from './eraLogo.png'
 
 export {
   lotteryImage,
@@ -121,4 +125,8 @@ export {
   polygonZkBg,
   polygonZkBgMobile,
   polygonZkBunny,
+  zkSyncBgMobile,
+  zkSyncBg,
+  zkSyncBunny,
+  eraLogo,
 }

packages/localization/src/config/translations.json

@@ -2609,5 +2609,9 @@
   "My Rank": "My Rank",
   "Current Round": "Current Round",
   "Previous Rounds": "Previous Rounds",
-  "Round #%round%  |  %startTime% - %endTime%": "Round #%round%  |  %startTime% - %endTime%"
+  "Round #%round%  |  %startTime% - %endTime%": "Round #%round%  |  %startTime% - %endTime%",
+  "Swap and Provide Liquidity on zkSync Era Now": "Swap and Provide Liquidity on zkSync Era Now",
+  "PancakeSwap Now Live on zkSync Era!": "PancakeSwap Now Live on zkSync Era!",
+  "Zksync Lormips LIVE!": "Zksync Lormips LIVE!",
+  "CTA": "CTA"
 }