feat: aggressive donate button

src/app/page.tsx

@@ -1,40 +1,36 @@
 'use client';
 
 import { CaretRightIcon } from '@radix-ui/react-icons';
-import { Flex } from '@radix-ui/themes';
+import { Button, Flex, Link as LinkRadix } from '@radix-ui/themes';
 import Link from 'next/link';
 import PageWrapper from '../components/PageWrapper';
 import { TOOLS } from '../constants/tools';
+import { PatreonIcon } from '../icons/Patreon';
 import { theme } from '../stitches.config';
 import * as styles from './page.css';
 
 export default function Page() {
   return (
     <PageWrapper>
-      {/* <Flex
+      <Flex
         direction="column"
-        gap="6"
+        gap="5"
-        align="center"
         justify="center"
-        style={{
+        align="center"
-          height: '80vh',
+        style={{ flex: 1 }}
-        }}
       >
-        <BlitzkriegWormWide
+        <LinkRadix href="https://www.patreon.com/tresabhi" target="_blank">
-          style={{
+          <Button
-            height: 48,
+            color="ruby"
-            width: '100%',
+            style={{
-          }}
+              boxShadow: `0 0 8px ${theme.colors.solidBackground_ruby}f0`,
-        />
+            }}
+          >
+            <PatreonIcon style={{ width: '1em', height: '1em' }} /> Consider
+            donating on Patreon
+          </Button>
+        </LinkRadix>
 
-        <EverythingSearch size="3" style={{ width: '100%' }} />
-
-        <Button variant="ghost">
-          All tools <CaretDownIcon />
-        </Button>
-      </Flex> */}
-
-      <Flex direction="column" gap="4" justify="center" style={{ flex: 1 }}>
         <Flex gap="3" wrap="wrap" align="center" justify="center">
           {TOOLS.map((tool) => (
             <Link

src/components/Footer/index.tsx

@@ -10,7 +10,7 @@ export function Footer() {
   return (
     <Theme radius="none">
       <Card>
-        <Flex align="center" direction="column" gap="3" justify="center">
+        <Flex justify="center" align="center" gap="3">
           <Flex
             align="center"
             justify={wideFormat ? 'between' : 'center'}

src/stitches.config.ts

@@ -9,6 +9,7 @@ import {
   orangeDark,
   purpleDark,
   redDark,
+  rubyDark,
   sandDark,
   slate,
   slateDark,
@@ -38,6 +39,7 @@ export const theme = {
     ...createColors(mauveDark, 'mauve'),
     ...createColors(sandDark, 'sand'),
     ...createColors(crimsonDark, 'crimson'),
+    ...createColors(rubyDark, 'ruby'),
   },
 
   borderStyles: {