added website links for teams

Author: shansitads

src/components/Team/Team.js

@@ -23,6 +23,7 @@ const TeamSection = ({ title, members, showDivider = false }) => (
             description={member.description}
             imgPath={member.imgPath}
             ghLink={member.ghLink}
+            websiteLink={member.websiteLink}
             team={member.team}
           />
         </Col>

src/components/Team/TeamCard.js

@@ -1,17 +1,23 @@
 import React from "react";
 import Card from "react-bootstrap/Card";
 import { BsGithub } from "react-icons/bs";
+import { FaLink } from "react-icons/fa";
 import './team.css';
 
 function TeamCard(props) {
     const hasGitHub = props.ghLink && props.ghLink.trim() !== "" && props.ghLink !== "https://github.com";
+    const hasWebsite = props.websiteLink && props.websiteLink.trim() !== "";
 
     return (
         <Card className="team-card-view">
             <Card.Img variant="top" src={props.imgPath} alt="card-img" className="teamcard-img-top" loading="eager" />
-            <Card.Body>
+            <Card.Body className="flex flex-col h-full">
                 <Card.Title className="team-card-title">
                     {props.title}
+                </Card.Title>
+                {props.team && <div className="team-member-role">{props.team}</div>}
+                <Card.Text className="team-card-description">{props.description}</Card.Text>
+                <div className="mt-auto flex justify-center gap-8">
                     {hasGitHub && (
                         <a
                             href={props.ghLink}
@@ -23,9 +29,18 @@ function TeamCard(props) {
                             <BsGithub className="github-icon" />
                         </a>
                     )}
-                </Card.Title>
-                {props.team && <div className="team-member-role">{props.team}</div>}
-                <Card.Text className="team-card-description">{props.description}</Card.Text>
+                    {hasWebsite && (
+                        <a
+                            href={props.websiteLink}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="website-link"
+                            aria-label={`${props.title}'s website`}
+                        >
+                            <FaLink className="website-icon" />
+                        </a>
+                    )}
+                </div>
             </Card.Body>
         </Card>
     );

src/components/Team/team.css

@@ -88,22 +88,31 @@
     transform: scale(1.05) !important;
 }
 
-.github-link {
+.github-link,
+.website-link {
     display: inline-block;
-    margin-left: 10px;
+    margin: 0 10px;
     color: var(--imp-text-color) !important;
     transition: color 0.3s ease !important;
 }
 
-.github-link:hover {
+.github-link:hover,
+.website-link:hover {
     color: #b19cd9 !important;
 }
 
-.github-icon {
-    font-size: 1.2em;
+.github-icon,
+.website-icon {
+    font-size: 1.5em;
     vertical-align: middle;
 }
 
+.team-card-view .card-body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
 /* Media queries for responsive image sizes */
 @media (max-width: 768px) {
     .teamcard-img-top {