Add Patreon support alongside Buy Me a Coffee

- Add Patreon button next to Buy Me a Coffee
- Update styling with gradient buttons for both platforms
- Add animations: steam for coffee, pulse for Patreon
- Responsive design: stack buttons on mobile
- Update Buy Me a Coffee link to https://buymeacoffee.com/brewkits

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: Nguyễn Tuấn Việt

src/components/BuyMeACoffee/index.tsx

@@ -3,15 +3,25 @@ import styles from './styles.module.css';
 
 export default function BuyMeACoffee(): JSX.Element {
   return (
-    <div className={styles.coffeeContainer}>
+    <div className={styles.supportContainer}>
       <a
         href="https://www.buymeacoffee.com/brewkits"
         target="_blank"
         rel="noopener noreferrer"
         className={styles.coffeeButton}
       >
         <span className={styles.coffeeIcon}>☕</span>
-        <span className={styles.coffeeText}>Buy Me a Coffee</span>
+        <span className={styles.buttonText}>Buy Me a Coffee</span>
+      </a>
+
+      <a
+        href="https://www.patreon.com/brewkits"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={styles.patreonButton}
+      >
+        <span className={styles.patreonIcon}>🎨</span>
+        <span className={styles.buttonText}>Support on Patreon</span>
       </a>
     </div>
   );

src/components/BuyMeACoffee/styles.module.css

@@ -1,17 +1,19 @@
-.coffeeContainer {
+.supportContainer {
   display: flex;
   justify-content: center;
   align-items: center;
+  gap: 1rem;
   padding: 2rem 0;
+  flex-wrap: wrap;
 }
 
-.coffeeButton {
+/* Common button styles */
+.coffeeButton,
+.patreonButton {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem 1.5rem;
-  background: linear-gradient(135deg, #FFDD00 0%, #FBB034 100%);
-  color: #000;
   border-radius: 8px;
   text-decoration: none;
   font-weight: 600;
@@ -20,19 +22,43 @@
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
+/* Buy Me a Coffee styling */
+.coffeeButton {
+  background: linear-gradient(135deg, #FFDD00 0%, #FBB034 100%);
+  color: #000;
+}
+
 .coffeeButton:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
   text-decoration: none;
   color: #000;
 }
 
+/* Patreon styling */
+.patreonButton {
+  background: linear-gradient(135deg, #FF424D 0%, #FF5B61 100%);
+  color: #fff;
+}
+
+.patreonButton:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(255, 66, 77, 0.3);
+  text-decoration: none;
+  color: #fff;
+}
+
 .coffeeIcon {
   font-size: 1.25rem;
   animation: steam 2s ease-in-out infinite;
 }
 
-.coffeeText {
+.patreonIcon {
+  font-size: 1.25rem;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.buttonText {
   letter-spacing: 0.025em;
 }
 
@@ -45,9 +71,27 @@
   }
 }
 
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+
 @media (max-width: 768px) {
-  .coffeeButton {
+  .supportContainer {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .coffeeButton,
+  .patreonButton {
     padding: 0.625rem 1.25rem;
     font-size: 0.9rem;
+    width: 100%;
+    max-width: 250px;
+    justify-content: center;
   }
 }