feat: added developer team component

src/components/AboutUs/index.jsx

@@ -174,7 +174,7 @@ export default function AboutSection() {
               ref={paragraphRef}
               className="text-xl md:text-4xl md:leading-snug font-poppins font-semibold"
             >
-              Codex is the coding club at
+              CodeX is the coding club at
               <span className="text-primary">
                 Symbiosis Institute of Technology
               </span>

src/components/WebsiteTeam/TeamMember.jsx

@@ -0,0 +1,121 @@
+import PropTypes from "prop-types";
+import LinkedInIcon from "@/assets/images/Teams/linkedin.svg";
+import GithubIcon from "@/assets/images/Teams/github.svg";
+import InstagramIcon from "@/assets/images/Teams/instagram.svg";
+import RectangleRed from "@/assets/images/Website_Team/RectangleRed.png";
+import RectangleGreen from "@/assets/images/Website_Team/RectangleGreen.png";
+import RectangleYellow from "@/assets/images/Website_Team/RectangleYellow.png";
+import MiranFirdausiImage from "@/assets/images/Website_Team/MiranFirdausi.png";
+import AchyutShuklaImage from "@/assets/images/Website_Team/AchyutShukla.png";
+import MitikshaPaliwalImage from "@/assets/images/Website_Team/MitikshaPaliwal.png";
+import AnkushDuttaImage from "@/assets/images/Website_Team/AnkushDutta.png";
+import AbhishekPatawariImage from "@/assets/images/Website_Team/AbhishekPatawari.png";
+import JayTrivediImage from "@/assets/images/Website_Team/JayTrivedi.png";
+
+const images = {
+  1: MiranFirdausiImage,
+  2: AchyutShuklaImage,
+  3: MitikshaPaliwalImage,
+  4: AnkushDuttaImage,
+  5: AbhishekPatawariImage,
+  6: JayTrivediImage,
+};
+
+const bgimages = {
+  1: RectangleRed,
+  2: RectangleGreen,
+  3: RectangleYellow,
+  4: RectangleGreen,
+  5: RectangleRed,
+  6: RectangleYellow,
+};
+
+function TeamMember({ member, className }) {
+  const { name, batch, description, linkedin, instagram, github, id } = member;
+  const image = images[id];
+
+  return (
+    <div
+      className={`min-w-[330px] max-w-[330px] relative group transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-105 duration-200 cursor-pointer align-middle ${className}`}
+    >
+      <div className="align-middle">
+        <div className="absolute top-[10%] -left-4 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ">
+          <div className="flex flex-col space-y-4">
+            <a
+              href={linkedin}
+              target="_blank"
+              rel="noreferrer"
+              className="text-white font-sans opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100"
+            >
+              <img
+                src={LinkedInIcon}
+                alt="Linkedin"
+                className="w-10 h-10 sm:w-8 sm:h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 p-2"
+              />
+            </a>
+            <a
+              href={github}
+              target="_blank"
+              rel="noreferrer"
+              className="text-white font-sans opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-200"
+            >
+              <img
+                src={GithubIcon}
+                alt="Github"
+                className="w-10 h-10 sm:w-8 sm:h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 p-2"
+              />
+            </a>
+            <a
+              href={instagram}
+              target="_blank"
+              rel="noreferrer"
+              className="text-white font-sans opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-300"
+            >
+              <img
+                src={InstagramIcon}
+                alt="Instagram"
+                className="w-10 h-10 sm:w-8 sm:h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 p-2"
+              />
+            </a>
+          </div>
+        </div>
+        <div className="relative">
+          <img
+            src={bgimages[id]}
+            alt="background"
+            className="absolute bottom-1 left-1/2 rounded-md transform -translate-x-1/2 w-56 h-56 object-cover z-0 transition-transform duration-700 group-hover:scale-105"
+          />
+          <img
+            src={image}
+            alt={name}
+            className="relative w-72 h-72 mx-auto object-cover z-10 filter grayscale transition duration-500 group-hover:filter-none group-hover:duration-500 group-hover:ease-in-out group-hover:delay-150 group-hover:scale-110"
+          />
+        </div>
+        <h2 className="text-2xl mt-6 font-poppins font-semibold text-center tracking-wide text-text-light">
+          {name}
+        </h2>
+        <p className="text-l mt-2 font-poppins text-center font-medium tracking-wide text-text-light">
+          {batch}
+        </p>
+        <p className="text-xl font-poppins my-5 text-center text-wrap text-secondary-light">
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+TeamMember.propTypes = {
+  member: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    batch: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    linkedin: PropTypes.string.isRequired,
+    instagram: PropTypes.string.isRequired,
+    github: PropTypes.string.isRequired,
+    id: PropTypes.number.isRequired,
+  }).isRequired,
+  className: PropTypes.isRequired,
+};
+
+export default TeamMember;

src/components/WebsiteTeam/index.jsx

@@ -0,0 +1,89 @@
+import { useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import TeamMember from "@/components/WebsiteTeam/TeamMember";
+import teamMembersData from "./teamsdata.json";
+
+gsap.registerPlugin(ScrollTrigger);
+
+function WebsiteTeam() {
+  const sectionRef = useRef(null);
+
+  useEffect(() => {
+    const rows = sectionRef.current.querySelectorAll(".team-row");
+
+    rows.forEach((row) => {
+      gsap.fromTo(
+        row,
+        { opacity: 0, y: 100 },
+        {
+          opacity: 1,
+          y: 0,
+          scrollTrigger: {
+            trigger: row,
+            start: "top 90%",
+            end: "bottom 70%",
+            toggleActions: "play none none reverse",
+          },
+        },
+      );
+    });
+
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+    };
+  }, []);
+
+  const teamMembers = teamMembersData.map((member) => (
+    <TeamMember member={member} className="flex-1 team-row" key={member.name} />
+  ));
+
+  return (
+    <div
+      className="min-h-fit bg-background-dark scroll-smooth mb-12"
+      ref={sectionRef}
+    >
+      <div className="flex justify-center items-center">
+        <div className="flex flex-col w-full">
+          <div className="flex flex-col md:flex-wrap lg:flex-row gap-4 justify-center items-center p-6">
+            <div className="md:min-w-[450px] flex-1 lg:ml-16 text-center xl:text-left text-xl sm:text-2xl md:text-3xl lg:text-[2.7rem] font-poppins space-y-2 ">
+              <div className="leading-[1.3]">
+                <span className="text-text-websiteteamlight font-thin">
+                  Special Thanks
+                </span>
+                <br />
+                <span className="text-text-websiteteamlight font-thin">
+                  {" "}
+                  to the
+                </span>
+                <span className="text-primary font-semibold">
+                  {" "}
+                  Awesome Team
+                </span>
+              </div>
+              <div className="leading-[1.3]">
+                <span className="text-text-websiteteamlight font-thin">
+                  {" "}
+                  Who Helped Create
+                  <br /> this
+                </span>
+                <span className="text-text-websiteteamyellow font-semibold">
+                  {" "}
+                  Amazing Website
+                </span>
+              </div>
+            </div>
+            <div className="flex flex-row flex-wrap md:flex-nowrap justify-center md:justify-between md:justify-center w-full md:w-min">
+              {teamMembers.slice(0, 2)}
+            </div>
+          </div>
+          <div className="flex flex-row flex-wrap justify-center xl:justify-between w-full gap-4 px-6">
+            {teamMembers.slice(2, 6)}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default WebsiteTeam;

src/components/WebsiteTeam/teamsdata.json

@@ -0,0 +1,50 @@
+[
+    {
+        "name": "Miran Firdausi",
+        "batch": "2022-26",
+        "linkedin": "https://www.linkedin.com/in/miran-firdausi/",
+        "instagram": "http://instagram.com/mirvn.zzz",
+        "github": "https://github.com/Miran-Firdausi",
+        "id": 1
+    },
+    {
+        "name": "Achyut Shukla",
+        "batch": "2020-24",
+        "linkedin": "https://www.linkedin.com/in/achyut07/",
+        "instagram": "https://www.instagram.com/__achyut.07__/",
+        "github": "https://github.com/Achyut-0705",
+        "id": 2
+    },
+    {
+        "name": "Mitiksha Paliwal",
+        "batch": "2023-27",
+        "linkedin": "https://www.linkedin.com/in/mitiksha-paliwal/",
+        "instagram": "https://www.instagram.com/_paliwal28/",
+        "github": "https://github.com/Mitiksha-28",
+        "id": 3  
+    },
+    {
+        "name": "Ankush Dutta",
+        "batch": "2023-27",
+        "linkedin": "https://www.linkedin.com/in/ankushdutta/",
+        "instagram": "https://instagram.com/_ehdee_",
+        "github": "https://github.com/gendelta",
+        "id": 4     
+    },
+    {
+        "name": "Abhishek Patawari",
+        "batch": "2023-27",
+        "linkedin": "https://www.linkedin.com/in/abhishek-patawari-ab7510288/",
+        "instagram": "https://www.instagram.com/abhishek_patawari1100/",
+        "github": "https://github.com/Dios-001",
+        "id": 5      
+    },
+    {
+        "name": "Jay Trivedi",
+        "batch": "2022-26",
+        "linkedin": "https://www.linkedin.com/in/jay-trivedi-work/",
+        "instagram": "https://www.instagram.com/jay.triveedi/",
+        "github": "https://github.com/Jayu1214",
+        "id": 6
+    }
+]