diff --git a/src/components/TeamProfileCards/index.tsx b/src/components/TeamProfileCards/index.tsx index 48e81a1e3..38b2aae2f 100644 --- a/src/components/TeamProfileCards/index.tsx +++ b/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 ( @@ -41,7 +42,7 @@ function TeamProfileCard({ linkedInUrl }: ProfileProps) { return ( -
+
diff --git a/src/components/TeamProfileCards/teamcards.css b/src/components/TeamProfileCards/teamcards.css new file mode 100644 index 000000000..8d6db73c4 --- /dev/null +++ b/src/components/TeamProfileCards/teamcards.css @@ -0,0 +1,25 @@ +/* teamcards.css */ + +.team-profile-card > .card { + transition: transform 0.3s ease, box-shadow 0.3s ease; + border: 0.5px solid black; + } + + .team-profile-card > .card:hover { + transform: translateY(-5px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); + } + + .team-profile-card > .card > .card__header > .avatar > .avatar__photo--xl { + border-radius: 50%; + transition: transform 0.3s ease; + } + + .team-profile-card > .card > .card__footer > .button-group > .button { + transition: background-color 0.3s ease, transform 0.3s ease; + } + + .team-profile-card > .card > .card__footer > .button-group > .button:hover { + background-color: #0056b3; + } +