feat: more ads

src/components/Ad.tsx

@@ -42,7 +42,6 @@ export function Ad({ type, style, ...props }: AdProps) {
       position="relative"
       width={`${dimensions[0]}px`}
       height={`${dimensions[1]}px`}
-      // overflow="hidden"
       style={{
         outline: '1px solid var(--gray-3)',
         borderRadius: 'var(--radius-1)',

src/components/MidSectionAd.tsx

@@ -0,0 +1,23 @@
+import { Flex, FlexProps } from '@radix-ui/themes';
+import { Ad, AdType } from './Ad';
+
+export function MidSectionAd(props: FlexProps) {
+  return (
+    <Flex justify="center" py="4" gap="4" {...props}>
+      <Ad
+        display={{
+          initial: 'none',
+          sm: 'block',
+        }}
+        type={AdType.LeaderboardHorizontalPurple}
+      />
+      <Ad
+        display={{
+          initial: 'block',
+          sm: 'none',
+        }}
+        type={AdType.MediumRectangleHorizontalPurple}
+      />
+    </Flex>
+  );
+}