Add Hover and Style TeamCard

Author: zalabhavy

src/components/TeamProfileCards/index.tsx

@@ -2,6 +2,7 @@ import React, { type ReactNode } from "react";
 import Translate from "@docusaurus/Translate";
 import Link from "@docusaurus/Link";
 import Heading from "@theme/Heading";
+import "./teamcards.css";
 
 function WebsiteLink({ to, children }: { to: string; children?: ReactNode }) {
   return (

src/components/TeamProfileCards/teamcards.css

@@ -0,0 +1,24 @@
+/* teamcard.css */
+
+.card {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border: 0.5px solid black; 
+  }
+  
+  .card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
+  }
+  
+  .card_header .avatar_photo--xl {
+    border-radius: 50%;
+    transition: transform 0.3s ease;
+  }
+  
+  .button-group .button {
+    transition: background-color 0.3s ease, transform 0.3s ease;
+  }
+  
+  .button-group .button:hover {
+    background-color: #0056b3;
+  }