feat: add donate section

src/components/categories/categories.tsx

@@ -1,6 +1,7 @@
 import { AnimatePresence } from 'framer-motion';
 
 import { Category } from '@/components/category';
+import { Donate } from './donate';
 
 import type { Categories } from '@/data/types';
 
@@ -11,12 +12,16 @@ interface CategoriesProps {
 export function Categories({ categories }: CategoriesProps) {
   return (
     <AnimatePresence initial={false}>
-      {categories.map(category => (
-        <Category
-          functional={category.id !== 'favorites'}
-          {...category}
-          key={category.id}
-        />
+      {categories.map((category, index) => (
+        <>
+          <Category
+            functional={category.id !== 'favorites'}
+            {...category}
+            key={category.id}
+          />
+
+          {index === 3 && <Donate />}
+        </>
       ))}
     </AnimatePresence>
   );

src/components/categories/donate/donate.module.css

@@ -0,0 +1,63 @@
+.donate {
+  & .iconContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 15px;
+
+    & .tail {
+      width: 1px;
+      height: 75px;
+      background: linear-gradient(transparent, var(--color-neutral-300));
+    }
+
+    & .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 45px;
+      height: 45px;
+      font-size: var(--font-md);
+      background-color: var(--color-neutral-100);
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 50%;
+    }
+  }
+
+  & .title {
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+    text-align: center;
+  }
+
+  & .desc {
+    margin-top: 8px;
+    color: var(--color-foreground-subtle);
+    text-align: center;
+  }
+
+  .button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: max-content;
+    height: 40px;
+    padding: 0 20px;
+    margin: 16px auto 0;
+    font-size: var(--font-xsm);
+    font-weight: 500;
+    color: var(--color-neutral-subtle);
+    text-decoration: none;
+    cursor: pointer;
+    background-color: var(--color-neutral-50);
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 50px;
+    transition: 0.2s;
+
+    &:hover {
+      background-color: var(--color-neutral-100);
+    }
+  }
+}

src/components/categories/donate/donate.tsx

@@ -0,0 +1,27 @@
+import { FaCoffee } from 'react-icons/fa/index';
+
+import styles from './donate.module.css';
+
+export function Donate() {
+  return (
+    <div className={styles.donate}>
+      <div className={styles.iconContainer}>
+        <div className={styles.tail} />
+        <div className={styles.icon}>
+          <FaCoffee />
+        </div>
+      </div>
+
+      <h2 className={styles.title}>Support Me</h2>
+      <p className={styles.desc}>Help me keep Moodist ad-free.</p>
+      <a
+        className={styles.button}
+        href="https://buymeacoffee.com"
+        rel="noreferrer"
+        target="_blank"
+      >
+        Donate Today
+      </a>
+    </div>
+  );
+}

src/components/categories/donate/index.ts

@@ -0,0 +1 @@
+export { Donate } from './donate';