feat: homepage ads

src/app/components/PatreonPlug.tsx

@@ -23,11 +23,13 @@ export function PatreonPlug() {
       py="8"
     >
       <Flex gap="1" align="center">
-        <Text size="4">Active Patreon supports go ad-free</Text>
+        <Text size="4" align="center">
+          Active Patreon supports go ad-free
+        </Text>
         <CheckIcon width="1em" height="1em" />
       </Flex>
 
-      <Flex gap="2">
+      <Flex gap="2" wrap="wrap" justify="center">
         <Link href="https://www.patreon.com/tresabhi" target="_blank">
           <Button>
             <PatreonIcon width={15} height={15} /> Support on Patreon

src/app/components/ToolCard.tsx

@@ -0,0 +1,142 @@
+import { CaretRightIcon } from '@radix-ui/react-icons';
+import {
+  Box,
+  Button,
+  Flex,
+  FlexProps,
+  Heading,
+  Link,
+  Text,
+} from '@radix-ui/themes';
+import { Tool } from '../../constants/tools';
+import { ImgurSize, imgur } from '../../core/blitzkit/imgur';
+
+type ToolCardProps = FlexProps & {
+  tool: Tool;
+};
+
+export function ToolCard({ tool, style, ...props }: ToolCardProps) {
+  const size = tool.significant
+    ? ImgurSize.HugeThumbnail
+    : ImgurSize.LargeThumbnail;
+
+  return (
+    <Flex
+      style={{
+        position: 'relative',
+        borderRadius: 'var(--radius-2)',
+        overflow: 'hidden',
+        backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        height: tool.significant ? 'min(320px, 50vh)' : '256px',
+        ...style,
+      }}
+      flexGrow={tool.significant ? undefined : '1'}
+      flexBasis={
+        tool.significant
+          ? undefined
+          : {
+              initial: undefined,
+              sm: '0',
+            }
+      }
+      {...props}
+    >
+      <Link
+        href={`/tools/${tool.id}`}
+        style={{
+          display: 'flex',
+          width: '100%',
+          height: '100%',
+          flexDirection: 'column',
+          textDecoration: 'none',
+          color: 'inherit',
+        }}
+      >
+        <Box
+          flexGrow="1"
+          style={{
+            backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+        />
+
+        <Flex
+          px={{
+            initial: '6',
+            md: tool.significant ? '8' : '6',
+          }}
+          py={{
+            initial: '4',
+            sm: tool.significant ? '6' : '4',
+          }}
+          gap="4"
+          align="center"
+          justify="between"
+          width="100%"
+          direction={{
+            initial: 'column',
+            sm: 'row',
+          }}
+          style={{
+            backgroundColor: 'var(--color-panel-translucent)',
+            backdropFilter: 'blur(64px)',
+            WebkitBackdropFilter: 'blur(64px)',
+          }}
+        >
+          <Flex
+            direction="column"
+            justify="center"
+            align={{
+              initial: 'center',
+              sm: 'start',
+            }}
+          >
+            <Heading
+              align={{
+                initial: 'center',
+                sm: 'left',
+              }}
+              size={{
+                initial: '6',
+                sm: tool.significant ? '7' : '5',
+              }}
+              weight="medium"
+            >
+              {tool.title}
+            </Heading>
+            <Text
+              align={{
+                initial: 'center',
+                sm: 'left',
+              }}
+              size={{
+                initial: '3',
+                sm: tool.significant ? '4' : '3',
+              }}
+              color="gray"
+            >
+              {tool.description}
+            </Text>
+          </Flex>
+
+          <Button
+            size={{
+              initial: undefined,
+              sm: tool.significant ? '3' : undefined,
+            }}
+            color={tool.button.color}
+            style={{
+              cursor: 'inherit',
+            }}
+          >
+            {tool.button.text}
+            <CaretRightIcon />
+          </Button>
+        </Flex>
+      </Link>
+    </Flex>
+  );
+}

src/app/page.tsx

@@ -1,11 +1,19 @@
-import { CaretRightIcon } from '@radix-ui/react-icons';
+'use client';
-import { Box, Button, Flex, Grid, Heading, Text } from '@radix-ui/themes';
+
-import Link from 'next/link';
+import { Box, Flex } from '@radix-ui/themes';
-import PageWrapper from '../components/PageWrapper';
+import { Ad, AdType } from '../components/Ad';
-import { TOOLS } from '../constants/tools';
+import { AdMidSectionResponsive } from '../components/AdMidSectionResponsive';
-import { ImgurSize, imgur } from '../core/blitzkit/imgur';
+import {
+  compareTool,
+  discordTool,
+  moreTool,
+  ratingTool,
+  sessionTool,
+  tankopediaTool,
+} from '../constants/tools';
 import { Hero } from './components/Hero';
 import { PatreonPlug } from './components/PatreonPlug';
+import { ToolCard } from './components/ToolCard';
 
 export default function Page() {
   return (
@@ -14,136 +22,46 @@ export default function Page() {
 
       <PatreonPlug />
 
-      <PageWrapper size={1028}>
+      <Flex p="4" justify="between" gap="4">
-        <Grid
+        <Ad
-          gap="4"
+          type={AdType.WideSkyscraperVerticalPurple}
-          columns={{
+          display={{
-            initial: undefined,
+            initial: 'none',
-            sm: '2',
+            lg: 'block',
-          }}
-          flow="row-dense"
-        >
-          {TOOLS.map((tool) => {
-            const size = tool.significant
-              ? ImgurSize.HugeThumbnail
-              : ImgurSize.LargeThumbnail;
-
-            return (
-              <Flex
-                key={tool.id}
-                style={{
-                  position: 'relative',
-                  borderRadius: 'var(--radius-2)',
-                  overflow: 'hidden',
-                  backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
-                  backgroundSize: 'cover',
-                  backgroundPosition: 'center',
-                  height: tool.significant ? 'min(320px, 50vh)' : '256px',
-                }}
-                gridColumn={{
-                  initial: undefined,
-                  sm: tool.significant ? '1 / 3' : undefined,
-                }}
-              >
-                <Link
-                  href={tool.href ?? `/tools/${tool.id}`}
-                  style={{
-                    display: 'flex',
-                    width: '100%',
-                    height: '100%',
-                    flexDirection: 'column',
-                    textDecoration: 'none',
-                    color: 'inherit',
-                  }}
-                >
-                  <Box
-                    flexGrow="1"
-                    style={{
-                      backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'center',
           }}
         />
 
-                  <Flex
+        <Flex maxWidth="1024px" flexGrow="1" gap="4" direction="column">
-                    px={{
+          <ToolCard tool={tankopediaTool} />
-                      initial: '6',
+
-                      md: tool.significant ? '8' : '6',
+          <AdMidSectionResponsive />
-                    }}
+
-                    py={{
+          <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-                      initial: '4',
+            <ToolCard tool={compareTool} />
-                      sm: tool.significant ? '6' : '4',
+            <ToolCard tool={sessionTool} />
-                    }}
-                    gap="4"
-                    align="center"
-                    justify="between"
-                    width="100%"
-                    direction={{
-                      initial: 'column',
-                      sm: 'row',
-                    }}
-                    style={{
-                      backgroundColor: 'var(--color-panel-translucent)',
-                      backdropFilter: 'blur(64px)',
-                      WebkitBackdropFilter: 'blur(64px)',
-                    }}
-                  >
-                    <Flex
-                      direction="column"
-                      justify="center"
-                      align={{
-                        initial: 'center',
-                        sm: 'start',
-                      }}
-                    >
-                      <Heading
-                        align={{
-                          initial: 'center',
-                          sm: 'left',
-                        }}
-                        size={{
-                          initial: '6',
-                          sm: tool.significant ? '7' : '5',
-                        }}
-                        weight="medium"
-                      >
-                        {tool.title}
-                      </Heading>
-                      <Text
-                        align={{
-                          initial: 'center',
-                          sm: 'left',
-                        }}
-                        size={{
-                          initial: '3',
-                          sm: tool.significant ? '4' : '3',
-                        }}
-                        color="gray"
-                      >
-                        {tool.description}
-                      </Text>
           </Flex>
 
-                    <Button
+          <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-                      size={{
+            <ToolCard tool={ratingTool} />
-                        initial: undefined,
+            <ToolCard tool={discordTool} />
-                        sm: tool.significant ? '3' : undefined,
-                      }}
-                      color={tool.button.color}
-                      style={{
-                        cursor: 'inherit',
-                      }}
-                    >
-                      {tool.button.text}
-                      <CaretRightIcon />
-                    </Button>
           </Flex>
-                </Link>
+
+          <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+            <ToolCard tool={moreTool} />
+            <Box flexGrow="1" flexBasis="0" />
           </Flex>
-            );
+        </Flex>
-          })}
+
-        </Grid>
+        <Ad
-      </PageWrapper>
+          type={AdType.WideSkyscraperVerticalPurple}
+          display={{
+            initial: 'none',
+            md: 'block',
+          }}
+        />
+      </Flex>
+
+      <AdMidSectionResponsive />
 
       <div style={{ flex: 1 }} />
     </>

src/constants/tools.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@radix-ui/themes';
 import { ComponentProps } from 'react';
 
-interface Tool {
+export interface Tool {
   id: string;
   image: string;
   title: string;
@@ -16,17 +16,7 @@ interface Tool {
   significant?: boolean;
 }
 
-export const TOOLS: Tool[] = [
+export const tankopediaTool: Tool = {
-  // {
-  //   id: 'statistics',
-  //   title: 'Statistics',
-  //   description: 'Periodical player statistics',
-  //   pageDescription:
-  //     'Periodical player statistics and tanks played in World of Tanks Blitz',
-  //   disabled: true,
-  //   image: '8gJGkKP'
-  // },
-  {
   id: 'tankopedia',
   title: 'Tankopedia',
   description: 'Blitz tank encyclopedia',
@@ -38,8 +28,9 @@ export const TOOLS: Tool[] = [
     color: 'purple',
   },
   significant: true,
-  },
+};
-  {
+
+export const ratingTool: Tool = {
   id: 'rating',
   title: 'Rating',
   description: 'Full rating leaderboard',
@@ -50,8 +41,9 @@ export const TOOLS: Tool[] = [
     text: 'View leaderboard',
     color: 'orange',
   },
-  },
+};
-  {
+
+export const compareTool: Tool = {
   id: 'compare',
   title: 'Compare',
   description: 'Compare tank statistics',
@@ -62,8 +54,9 @@ export const TOOLS: Tool[] = [
     text: 'Compare tanks',
     color: 'crimson',
   },
-  },
+};
-  {
+
+export const sessionTool: Tool = {
   // TODO: rename to tracker
   id: 'session',
   title: 'Session',
@@ -75,8 +68,9 @@ export const TOOLS: Tool[] = [
     text: 'Start tracking',
     color: 'blue',
   },
-  },
+};
-  {
+
+export const discordTool: Tool = {
   id: 'discord',
   title: 'Discord bot',
   description: 'Stats right in Discord',
@@ -86,8 +80,9 @@ export const TOOLS: Tool[] = [
     text: 'Install now',
     color: 'indigo',
   },
-  },
+};
-  {
+
+export const moreTool: Tool = {
   id: 'more',
   title: 'More coming soon',
   description: "What we're making",
@@ -97,5 +92,13 @@ export const TOOLS: Tool[] = [
     text: 'Join Discord',
     color: 'indigo',
   },
-  },
+};
+
+export const TOOLS: Tool[] = [
+  tankopediaTool,
+  ratingTool,
+  compareTool,
+  sessionTool,
+  discordTool,
+  moreTool,
 ];

src/hooks/useAdExempt.ts

@@ -2,8 +2,6 @@ import { use } from 'react';
 import { useApp } from '../stores/app';
 
 export function useAdExempt() {
-  return true;
-
   const patreon = useApp((state) => state.logins.patreon);
 
   if (!patreon) return false;