chore: add & update ad components, test banner images

apps/web/src/components/AdPanel/Button.tsx

@@ -0,0 +1,12 @@
+import { Button, ButtonProps } from '@pancakeswap/uikit'
+import { PropsWithChildren } from 'react'
+
+interface AdButtonProps extends ButtonProps, PropsWithChildren {}
+
+export const AdButton = ({ children }: AdButtonProps) => {
+  return (
+    <Button scale="sm" variant="subtle" padding="3px 4px 5px 4px" height="unset">
+      {children}
+    </Button>
+  )
+}

apps/web/src/components/AdPanel/Card.tsx

@@ -5,21 +5,27 @@ const BaseCard = styled(Box)`
   position: fixed;
   bottom: 30px;
   right: 30px;
-  border: 2px solid red;
-  width: 326px;
-  height: 188px;
+  padding: 16px;
+  width: 328px;
+  height: 164px;
   background-color: ${({ theme }) => theme.colors.card};
   border-radius: ${({ theme }) => theme.radii.default};
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
 `
 
 const Content = styled(Flex)`
-  max-width: 119px;
+  position: relative;
+  width: 148px;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
 `
 
 const PositionedImage = styled(Image)`
   position: absolute;
-  top: 0;
+  bottom: 0;
   right: 0;
+  z-index: 1;
 `
 
 interface AdCardProps {
@@ -29,7 +35,7 @@ interface AdCardProps {
 }
 
 export const AdCard = ({ children, imageUrl, alt }: AdCardProps) => {
-  // Drag handle and other slots will come here as well
+  // Drag handle, Slider and other slots will come here
   return (
     <BaseCard>
       <Content>{children}</Content>

apps/web/src/components/AdPanel/CardLayouts.tsx

@@ -2,14 +2,20 @@ import { getPortalRoot, useMatchBreakpoints } from '@pancakeswap/uikit'
 import { createPortal } from 'react-dom'
 import { TitleAd } from './Variations/TitleAd'
 
+/**
+ * Renders floating Ad banners on desktop
+ */
 export const DesktopCard = () => {
   const portalRoot = getPortalRoot()
-  const { isMobile } = useMatchBreakpoints()
+  const { isDesktop } = useMatchBreakpoints()
 
-  return portalRoot && !isMobile ? createPortal(<TitleAd />, portalRoot) : null
+  return portalRoot && isDesktop ? createPortal(<TitleAd />, portalRoot) : null
 }
 
+/**
+ * Renders Ad banners on mobile and tablet
+ */
 export const MobileCard = () => {
-  const { isMobile } = useMatchBreakpoints()
-  return isMobile ? <TitleAd /> : null
+  const { isDesktop } = useMatchBreakpoints()
+  return !isDesktop ? <TitleAd /> : null
 }

apps/web/src/components/AdPanel/Title.tsx

@@ -1,11 +1,12 @@
 import { Text, TextProps } from '@pancakeswap/uikit'
+import { PropsWithChildren } from 'react'
 
-interface TitleProps extends TextProps {}
+interface TitleProps extends TextProps, PropsWithChildren {}
 
-export const Title = (props: TitleProps) => {
+export const Title = ({ children, ...props }: TitleProps) => {
   return (
-    <Text color="textSubtle" {...props}>
-      AdPanel
+    <Text fontSize="14px" mb="16px" bold {...props}>
+      {children}
     </Text>
   )
 }

apps/web/src/components/AdPanel/Variations/TitleAd.tsx

@@ -1,5 +1,13 @@
+import { AdButton } from '../Button'
 import { AdCard } from '../Card'
+import { Title } from '../Title'
 
 export const TitleAd = () => {
-  return <AdCard imageUrl="https://placehold.co/207x188" />
+  return (
+    <AdCard imageUrl="/images/adpanel-test/bannerImg1.png">
+      <Title>Enjoy Gas-Free Transactions on zkSync PancakeSwap</Title>
+
+      <AdButton>Quick start</AdButton>
+    </AdCard>
+  )
 }

apps/web/src/components/AdPanel/index.ts

@@ -1,7 +1,13 @@
+import { AdButton as Button } from './Button'
+import { AdCard as Card } from './Card'
 import { DesktopCard, MobileCard } from './CardLayouts'
+import { Title } from './Title'
 
 // TODO: Later move to widgets-internal with conventional exporting
 export const AdPanel = {
   DesktopCard,
   MobileCard,
+  Card,
+  Title,
+  Button,
 }