better

packages/website/src/components/Beg/index.module.css

@@ -2,12 +2,35 @@
   padding: 0 var(--space-4);
   margin-top: var(--space-3);
 
-  .center {
-    background-color: var(--blue-3);
+  img {
+    width: 1.25em;
+    height: 1.25em;
 
-    max-width: 80rem;
+    border-radius: 50%;
+  }
+
+  .center {
+    position: relative;
+
+    background-color: var(--gray-3);
+    box-shadow: var(--shadow-3);
+
+    max-width: 40rem;
 
     padding: var(--space-5);
     border-radius: var(--radius-4);
+
+    .important {
+      position: absolute;
+
+      top: 0;
+      left: 50%;
+
+      transform: translate(-50%, -50%);
+
+      background-color: inherit;
+
+      padding: var(--space-3);
+    }
   }
 }

packages/website/src/components/Beg/index.tsx

@@ -1,32 +1,41 @@
-import { Flex, Heading, Text } from "@radix-ui/themes";
+import { Button, Em, Flex, Strong, Text } from "@radix-ui/themes";
 import styles from "./index.module.css";
 
 export function Beg() {
   return (
-    <Flex justify="center" className={styles.outer}>
-      <Flex direction="column" className={styles.center} gap="4">
-        <Flex direction="column">
-          <Heading>We want to add the following features:</Heading>
+    <Flex align="center" gap="4" direction="column" className={styles.outer}>
+      <Text size="3" className={styles.important}>
+        <Flex gap="2" align="center">
+          <img src="https://github.com/tresabhi.png" />
+          <Em>We need your attention</Em>
+        </Flex>
+      </Text>
 
-          <Text>
-            <ul>
-              <li>Tank modules</li>
-              <li>Player statistics</li>
-              <li>Tank change logs over updates</li>
-              <li>Multiple game versions</li>
-              <li>Bring back the Discord bot</li>
-              <li>And many unannounced features</li>
-            </ul>
+      <Flex direction="column" className={styles.center} gap="4">
+        <Flex direction="column" gap="3">
+          <Text color="tomato">
+            We can no longer keep BlitzKit sustainable for <Strong>free</Strong>
+            .
           </Text>
 
           <Text>
-            But we can no longer keep updating BlitzKit sustainably for free.
-            So, we ask you to donate. 100% of your funds go back into
-            maintaining BlitzKit. We are a non-profit.
+            We want to add tank modules, player statistics, rebalancing patch
+            notes, bring back the Discord bot, and more.
+          </Text>
+
+          <Text>
+            But paying out of pocket makes than impossible.{" "}
+            <Strong>We are a non-profit</Strong>, so consider donating to make
+            the above possible. 100% of your money goes back into BlitzKit.
           </Text>
         </Flex>
 
-        <Flex gap="3">asd</Flex>
+        <Flex gap="3">
+          <Button size="3">$5</Button>
+          <Button size="3">$10</Button>
+          <Button size="3">$25</Button>
+          <Button size="3">Custom</Button>
+        </Flex>
       </Flex>
     </Flex>
   );