Remove Patreon button and improve font styling

- Remove Patreon support button from website
- Keep only Buy Me a Coffee donation option
- Improve typography: reduce font-weight from 600 to 400 for lighter look
- Soften button shadow for more elegant appearance
- Adjust border-radius and padding for better visual balance

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

src/components/BuyMeACoffee/styles.module.css

@@ -1,65 +1,40 @@
-.supportContainer {
+.coffeeContainer {
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 1rem;
   padding: 2rem 0;
-  flex-wrap: wrap;
 }
 
-/* Common button styles */
-.coffeeButton,
-.patreonButton {
+.coffeeButton {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  border-radius: 8px;
+  padding: 0.75rem 1.75rem;
+  background: linear-gradient(135deg, #FFDD00 0%, #FBB034 100%);
+  color: #000;
+  border-radius: 10px;
   text-decoration: none;
-  font-weight: 600;
+  font-weight: 400;
   font-size: 1rem;
   transition: all 0.3s ease;
-  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;
+  box-shadow: 0 2px 8px rgba(251, 176, 52, 0.2);
 }
 
 .coffeeButton:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 12px rgba(251, 176, 52, 0.3);
   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;
+  font-size: 1.3rem;
   animation: steam 2s ease-in-out infinite;
 }
 
-.patreonIcon {
-  font-size: 1.25rem;
-  animation: pulse 2s ease-in-out infinite;
-}
-
-.buttonText {
-  letter-spacing: 0.025em;
+.coffeeText {
+  letter-spacing: 0.01em;
+  font-weight: 400;
 }
 
 @keyframes steam {
@@ -71,27 +46,9 @@
   }
 }
 
-@keyframes pulse {
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.1);
-  }
-}
-
 @media (max-width: 768px) {
-  .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;
+  .coffeeButton {
+    padding: 0.625rem 1.5rem;
+    font-size: 0.95rem;
   }
 }