feat: homepage ads

src/app/components/PatreonPlug.tsx

@@ -11,8 +11,6 @@ export function PatreonPlug() {
   const patreon = useApp((state) => state.logins.patreon);
   const exempt = useAdExempt();
 
-  if (exempt) return null;
-
   return (
     <Flex
       gap="2"
@@ -24,18 +22,21 @@ export function PatreonPlug() {
     >
       <Flex gap="1" align="center">
         <Text size="4" align="center">
-          Active Patreon supports go ad-free
+          {exempt
+            ? 'You are supporting BlitzKit, thank you!'
+            : 'Active Patreon supports go ad-free'}
         </Text>
-        <CheckIcon width="1em" height="1em" />
+        {!exempt && <CheckIcon width="1em" height="1em" />}
       </Flex>
 
       <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
+            <PatreonIcon width={15} height={15} />{' '}
+            {exempt ? 'Manage membership' : 'Support on Patreon'}
           </Button>
         </Link>
-        {!patreon && (
+        {!patreon && !exempt && (
           <Link href={patreonLoginUrl()}>
             <Button variant="outline">Log in with Patreon</Button>
           </Link>

src/app/page.tsx

@@ -11,30 +11,56 @@ import {
   sessionTool,
   tankopediaTool,
 } from '../constants/tools';
+import { useAdExempt } from '../hooks/useAdExempt';
 import { Hero } from './components/Hero';
 import { PatreonPlug } from './components/PatreonPlug';
 import { ToolCard } from './components/ToolCard';
 
 export default function Page() {
+  const exempt = useAdExempt();
+
   return (
     <>
       <Hero />
 
       <PatreonPlug />
 
-      <Flex p="4" justify="between" gap="4">
+      <Flex
-        <Ad
+        p="4"
-          type={AdType.WideSkyscraperVerticalPurple}
+        justify={
-          display={{
+          exempt
-            initial: 'none',
+            ? 'center'
-            lg: 'block',
+            : {
-          }}
+                initial: 'center',
-        />
+                lg: 'between',
+              }
+        }
+        gap="4"
+      >
+        {!exempt && (
+          <Ad
+            type={AdType.WideSkyscraperVerticalPurple}
+            display={{
+              initial: 'none',
+              lg: 'block',
+            }}
+          />
+        )}
 
         <Flex maxWidth="1024px" flexGrow="1" gap="4" direction="column">
           <ToolCard tool={tankopediaTool} />
 
-          <AdMidSectionResponsive />
+          {!exempt && (
+            <Flex
+              justify="center"
+              display={{
+                initial: 'flex',
+                lg: 'none',
+              }}
+            >
+              <AdMidSectionResponsive />
+            </Flex>
+          )}
 
           <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
             <ToolCard tool={compareTool} />
@@ -46,22 +72,36 @@ export default function Page() {
             <ToolCard tool={discordTool} />
           </Flex>
 
+          {!exempt && (
+            <Flex
+              justify="center"
+              display={{
+                initial: 'flex',
+                md: 'none',
+              }}
+            >
+              <AdMidSectionResponsive />
+            </Flex>
+          )}
+
           <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
             <ToolCard tool={moreTool} />
             <Box flexGrow="1" flexBasis="0" />
           </Flex>
         </Flex>
 
-        <Ad
+        {!exempt && (
-          type={AdType.WideSkyscraperVerticalPurple}
+          <Ad
-          display={{
+            type={AdType.WideSkyscraperVerticalPurple}
-            initial: 'none',
+            display={{
-            md: 'block',
+              initial: 'none',
-          }}
+              lg: 'block',
-        />
+            }}
+          />
+        )}
       </Flex>
 
-      <AdMidSectionResponsive />
+      {!exempt && <AdMidSectionResponsive />}
 
       <div style={{ flex: 1 }} />
     </>