chore: xmas effect 2024 (#11090)

<!--
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
This PR introduces a festive `XmasEffect` component to the `V4Swap`
view, adding a snowflake animation and Christmas-themed background
elements to enhance the user interface during the holiday season.

### Detailed summary
- Added `XmasEffect` component to `V4Swap`.
- Introduced `SnowflakesWrapper`, `XmaxBg`, and `XmaxTree` styled
components.
- Implemented snowflake animation using keyframes.
- Rendered snowflakes dynamically within `XmasEffect`.

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

<!-- end pr-codex -->

apps/web/src/views/SwapSimplify/V4Swap/XmasEffect.tsx

@@ -0,0 +1,143 @@
+import { ASSET_CDN } from 'config/constants/endpoints'
+import { memo } from 'react'
+import { keyframes, styled } from 'styled-components'
+
+export const SnowflakesWrapper = styled.div`
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  user-select: none;
+  z-index: 0;
+`
+
+const XmaxBg = styled.div`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100vw;
+  height: 40.625vw;
+  background: url('${ASSET_CDN}/web/swap/xmas/xmas-bg-${({ theme }) => (theme.isDark ? 'dark' : 'light')}.png')
+    no-repeat center center fixed;
+  background-size: cover;
+`
+
+const XmaxTree = styled.div`
+  position: absolute;
+  bottom: 5%;
+  ${({ theme }) => theme.mediaQueries.md} {
+    bottom: 15%;
+  }
+
+  left: 1%;
+  width: 16vw;
+  height: 19.2vw;
+  background: url('${ASSET_CDN}/web/swap/xmas/xmas-tree-${({ theme }) => (theme.isDark ? 'dark' : 'light')}.png')
+    no-repeat center center fixed;
+  background-size: cover;
+`
+
+const snowflakeAnimation = keyframes`
+  0% {
+    transform: translateY(0px) translateX(0px);
+  }
+  10% {
+    transform: translateY(10vh) translateX(27px); 
+  }
+  20% {
+    transform: translateY(20vh) translateX(53px); 
+  }
+  30% {
+    transform: translateY(30vh) translateX(80px); 
+  }
+  40% {
+    transform: translateY(40vh) translateX(53px); 
+  }
+  50% {
+    transform: translateY(50vh) translateX(27px); 
+  }
+  60% {
+    transform: translateY(60vh) translateX(80px); 
+  }
+  70% {
+    transform: translateY(70vh) translateX(0px); 
+  }
+  80% {
+    transform: translateY(80vh) translateX(27px); 
+  }
+  90% {
+    transform: translateY(90vh) translateX(53px); 
+  }
+  100% {
+    transform: translateY(100vh) translateX(80px); 
+  }
+`
+export const Snowflake = styled.div`
+  position: fixed;
+  top: -10%;
+  z-index: 9999;
+  color: #fff;
+  font-size: 1em;
+  font-family: Arial;
+  text-shadow: 0 0 1px #000;
+  user-select: none;
+  cursor: default;
+  will-change: transform;
+  animation: ${snowflakeAnimation} 10s linear infinite;
+
+  &:nth-of-type(1) {
+    left: 1%;
+    animation-delay: 0s, 0s;
+  }
+  &:nth-of-type(2) {
+    left: 10%;
+    animation-delay: 1s, 1s;
+  }
+  &:nth-of-type(3) {
+    left: 20%;
+    animation-delay: 6s, 0.5s;
+  }
+  &:nth-of-type(4) {
+    left: 30%;
+    animation-delay: 4s, 2s;
+  }
+  &:nth-of-type(5) {
+    left: 40%;
+    animation-delay: 2s, 2s;
+  }
+  &:nth-of-type(6) {
+    left: 50%;
+    animation-delay: 8s, 3s;
+  }
+  &:nth-of-type(7) {
+    left: 60%;
+    animation-delay: 6s, 2s;
+  }
+  &:nth-of-type(8) {
+    left: 70%;
+    animation-delay: 2.5s, 1s;
+  }
+  &:nth-of-type(9) {
+    left: 80%;
+    animation-delay: 1s, 0s;
+  }
+  &:nth-of-type(10) {
+    left: 90%;
+    animation-delay: 3s, 1.5s;
+  }
+`
+
+export const XmasEffect: React.FC = memo(() => {
+  return (
+    <SnowflakesWrapper aria-hidden="true">
+      {Array.from({ length: 10 }).map((_, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Snowflake key={`SnowFlakeElements${index}`}>❄️</Snowflake>
+      ))}
+      <XmaxBg />
+      <XmaxTree />
+    </SnowflakesWrapper>
+  )
+})

apps/web/src/views/SwapSimplify/index.tsx

@@ -14,6 +14,7 @@ import PriceChartContainer from '../Swap/components/Chart/PriceChartContainer'
 import { StyledSwapContainer } from '../Swap/styles'
 import { SwapFeaturesContext } from '../Swap/SwapFeaturesContext'
 import { V4SwapForm } from './V4Swap'
+import { XmasEffect } from './V4Swap/XmasEffect'
 
 const Wrapper = styled(Box)`
   width: 100%;
@@ -118,6 +119,8 @@ export default function V4Swap() {
           height="100%"
           width={isChartDisplayed && !isMobile ? 'auto' : '100%'}
           mt={isChartExpanded && !isMobile ? '42px' : undefined}
+          position="relative"
+          zIndex={1}
         >
           <StyledSwapContainer
             justifyContent="center"
@@ -133,6 +136,7 @@ export default function V4Swap() {
       </Flex>
 
       <AdPanel.MobileCard />
+      <XmasEffect />
     </Page>
   )
 }