Add donate card to bottom of page

src/components/ui/SocialCard.astro

@@ -48,18 +48,31 @@ const { icon, title, desc, button, href, target } = Astro.props;
 
 <style>
   .card {
-    padding: 0px 10px 0px 10px;
     display: flex;
-    flex-direction: column;
-    transition: 0.3s;
-    max-width: 428px;
-  }
-
+    flex-direction: column; /* Stack content vertically */
+    transition: 0.3s; /* Smooth transition for hover effects */
+    flex: 1 1 calc(33.33% - 20px); /* Take up one-third of available space */
+    height: 300px; /* Fixed height for uniformity */
+    width: 100%;
+}
   .card h2 {
     margin-bottom: 0;
   }
 
   .card .button-md {
     width: fit-content;
   }
+
+  @media (max-width: 768px) {
+    .card {
+        flex: 1 1 calc(50% - 20px); /* Two cards per row */
+    }
+}
+
+@media (max-width: 480px) {
+    .card {
+        flex: 1 1 calc(100% - 20px); /* Single card per row */
+    }
+}
+
 </style>

src/pages/index.astro

@@ -47,10 +47,17 @@ const socials = [
   {
     icon: "discord",
     title: "Join the community",
-    desc: "Join our Discord community for updates and discussions.",
+    desc: "Join our Discord community to partake in future updates and discussions.",
     href: "https://discord.gg/58NZ7fFqPy",
     button: "Join the Discord",
   },
+  {
+    icon: "heart",
+    title: "Donate",
+    desc: "Supercharge Mythic's development and get benefits (soon...)",
+    href: "https://ko-fi.com/blackxfiied",
+    button: "To Ko-fi",
+  }
 ];
 ---