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>
+  );
+}