Added meet the team section to about page with mvp images

src/components/about/Team.tsx

@@ -1,18 +1,133 @@
+// src/components/about/Team.tsx - Main team component with team data
+import { TeamSection } from "./TeamSection";
+import { TeamMemberProps } from "./TeamCard";
+
+// Define team data structure - easy to update with new members or sections
+type TeamData = {
+  [key: string]: TeamMemberProps[];
+};
+
+// Team data populated from the images you shared
+const teamData: TeamData = {
+  "Executive Team": [
+    {
+      name: "Megan Mendez",
+      role: "President",
+      imageSrc: "/about-images/people/megan.jpg",
+      linkedinUrl: "https://www.linkedin.com/in/megan-mendez-870826257/",
+    },
+    {
+      name: "Ethan Ruddell",
+      role: "Vice-President",
+      imageSrc: "/about-images/people/ethan.png",
+      linkedinUrl: "https://www.linkedin.com/in/ethan-ruddell/",
+    },
+    {
+      name: "Nathan Kim",
+      role: "Secretary",
+      imageSrc: "/about-images/people/matthew-li.jpg",
+    },
+    {
+      name: "Angela Ung",
+      role: "Member Involvement",
+      imageSrc: "/about-images/people/angela.png",
+      linkedinUrl: "https://www.linkedin.com/in/angelaunguf/",
+    },
+    {
+      name: "Caity Beasley",
+      role: "Event Coordinator",
+      imageSrc: "/about-images/people/caity.png",
+    },
+    {
+      name: "William Zhu",
+      role: "Build Director",
+      imageSrc: "/about-images/people/william.png",
+      linkedinUrl: "https://www.linkedin.com/in/william-zhu-uf/",
+    },
+    {
+      name: "Taran",
+      role: "Build Director",
+      imageSrc: "/about-images/people/taran.png",
+    },
+  ],
+  TechTeam: [
+    {
+      name: "Claudio Sciotto",
+      role: "Lead Developer",
+      imageSrc: "/about-images/people/claudio.png",
+      linkedinUrl: "https://www.linkedin.com/in/claudiosciotto/",
+    },
+    {
+      name: "Cole Morgan",
+      role: "Developer",
+      imageSrc: "/about-images/people/cole.png",
+      linkedinUrl: "https://www.linkedin.com/in/cole-morgan-/",
+    },
+    {
+      name: "Wilbert Hernandez",
+      role: "Product Manager",
+      imageSrc: "/about-images/people/wilbert.png",
+      linkedinUrl: "https://www.linkedin.com/in/hernandez-wilbert/",
+    },
+  ],
+  UIUXTeam: [
+    {
+      name: "Colin Mendoza",
+      role: "UI/UX Product Manager",
+      imageSrc: "/about-images/people/colin.png",
+      linkedinUrl: "https://www.linkedin.com/in/colin-mendoza/",
+    },
+    {
+      name: "Dayanita Kumar",
+      role: "UI/UX Designer",
+      imageSrc: "/about-images/people/dayanita.png",
+      linkedinUrl: "https://www.linkedin.com/in/dayanita-kumar/",
+    },
+    {
+      name: "Hana Checketts",
+      role: "UI/UX Designer",
+      imageSrc: "/about-images/people/hana.png",
+      linkedinUrl: "https://www.linkedin.com/in/hanachecketts/",
+    },
+    {
+      name: "Ankita Narayan",
+      role: "UI/UX Designer",
+      imageSrc: "/about-images/people/ankita.png",
+      linkedinUrl: "https://www.linkedin.com/in/narayanankita/",
+    },
+    {
+      name: "Lena Nguyen",
+      role: "UI/UX Designer",
+      imageSrc: "/about-images/people/lena.png",
+      linkedinUrl: "https://www.linkedin.com/in/lena-t-nguyen/",
+    },
+  ],
+  // You can easily add more sections as needed
+  // "Web Team": [],
+  // "Build Team": [],
+};
+
 export default function Team() {
   return (
     <div className="sm:pt-6">
       <div className="grad h-32" />
-      <div className="px-6 sm:px-10 py-20">
+      <div className="px-6 py-20 sm:px-10">
         <div className="mx-auto max-w-7xl text-white">
           <h2 className="text-2xl sm:text-4xl">Meet Our Team</h2>
-          <p className="pt-4 sm:pt-6 sm:text-lg text-balance opacity-80">
-            Behind the Society of PC Building is a passionate team of
-            officers who work hard to bring our community together, organize
-            events, and foster a love for PC building.
+          <p className="text-balance pt-4 opacity-80 sm:pt-6 sm:text-lg">
+            Behind the Society of PC Building is a passionate team of officers
+            who work hard to bring our community together, organize events, and
+            foster a love for PC building.
           </p>
-          <div className="mt-8 py-4 sm:py-5 px-8 rounded-md bg-gray-900 border border-gray-800">
-            Coming Soon!
-          </div>
+
+          {/* Render team sections dynamically from data */}
+          {Object.entries(teamData).map(([sectionTitle, members]) => (
+            <TeamSection
+              key={sectionTitle}
+              title={sectionTitle}
+              members={members}
+            />
+          ))}
         </div>
       </div>
       <div className="grad h-32 -scale-y-[1]" />

src/components/about/TeamCard.tsx

@@ -0,0 +1,68 @@
+// src/components/about/TeamCard.tsx
+"use client";
+import Image from "next/image";
+import { FaLinkedin } from "react-icons/fa";
+import { useState } from "react";
+
+export type TeamMemberProps = {
+  name: string;
+  role: string;
+  imageSrc: string;
+  linkedinUrl?: string; // Optional LinkedIn URL
+  altText?: string; // Optional alt text for image
+};
+
+export const TeamCard: React.FC<TeamMemberProps> = ({
+  name,
+  role,
+  imageSrc,
+  linkedinUrl,
+  altText,
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      className="relative overflow-hidden rounded-xl transition-all duration-300 hover:shadow-[0_0_30px_rgba(121,199,253,0.3)]"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Card with image and info */}
+      <div className="border border-gray-800 bg-gray-900">
+        {/* Image container with fixed aspect ratio */}
+        <div className="relative aspect-square w-full overflow-hidden">
+          <Image
+            src={imageSrc}
+            alt={altText || `${name}, ${role}`}
+            fill
+            className="object-cover transition-transform duration-300"
+            sizes="(max-width: 768px) 100vw, 33vw"
+          />
+        </div>
+
+        {/* Info section */}
+        <div className="p-4">
+          <h3 className="text-lg font-semibold">{name}</h3>
+          <div className="inline-block rounded-md bg-blue bg-opacity-10 px-3 py-1 text-sm text-blue">
+            {role}
+          </div>
+        </div>
+      </div>
+
+      {/* LinkedIn overlay that appears on hover */}
+      {linkedinUrl && (
+        <a
+          href={linkedinUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={`absolute inset-0 flex items-end justify-end bg-black bg-opacity-20 p-4 transition-opacity duration-300 ${
+            isHovered ? "opacity-100" : "opacity-0"
+          }`}
+          aria-label={`View ${name}'s LinkedIn profile`}
+        >
+          <FaLinkedin className="text-5xl text-blue" />
+        </a>
+      )}
+    </div>
+  );
+};

src/components/about/TeamSection.tsx

@@ -0,0 +1,29 @@
+// src/components/about/TeamSection.tsx
+import { TeamCard, TeamMemberProps } from "./TeamCard";
+
+type TeamSectionProps = {
+  title: string;
+  members: TeamMemberProps[];
+};
+
+export const TeamSection: React.FC<TeamSectionProps> = ({ title, members }) => {
+  return (
+    <div className="mt-16 first:mt-8">
+      <h3 className="mb-6 border-b border-gray-800 pb-2 text-xl font-semibold sm:text-2xl">
+        {title}
+      </h3>
+      <div className="grid grid-cols-1 gap-16 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        {members.map((member, index) => (
+          <TeamCard
+            key={`${title}-${index}`}
+            name={member.name}
+            role={member.role}
+            imageSrc={member.imageSrc}
+            linkedinUrl={member.linkedinUrl}
+            altText={member.altText}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};