Merge pull request #52 from Amphere1/main

fix: required changes done

Author: swaindhruti

src/components/Team.jsx

@@ -7,6 +7,7 @@ import { useNavigate } from "react-router";
 const TeamSlider = () => {
   const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
   const [cardsPerView, setCardsPerView] = useState(1);
+  const [activeTeam, setActiveTeam] = useState("All");
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -34,7 +35,20 @@ const TeamSlider = () => {
     new Map(teamMembers.map((member) => [member.name, member])).values(),
   );
 
-  const maxSlideIndex = Math.max(0, uniqueTeamMembers.length - cardsPerView);
+  const teams = [
+    "All",
+    "Executive Body",
+    "Team Bluebird",
+    "Team Bluestreak",
+    "Team Blueprint",
+  ];
+
+  const filteredTeamMembers =
+    activeTeam === "All"
+      ? uniqueTeamMembers
+      : uniqueTeamMembers.filter((member) => member.team === activeTeam);
+
+  const maxSlideIndex = Math.max(0, filteredTeamMembers.length - cardsPerView);
 
   const showNextMembers = () => {
     setCurrentSlideIndex((currentIndex) => {
@@ -68,13 +82,31 @@ const TeamSlider = () => {
     <section className="bg-[#00163A] text-white px-4 sm:px-6 py-16">
       <div className="max-w-7xl mx-auto">
         <div className="mb-10">
-          <h2 className="text-3xl font-bold mb-2 ml-12">Our team</h2>
-          <p className="text-xl text-gray-300 ml-12">
+          <h2 className="text-3xl font-bold mb-2 ml-4 sm:ml-12">Our team</h2>
+          <p className="text-xl text-gray-300 ml-4 sm:ml-12">
             Meet Our Amazing Team Members
           </p>
+
+          {/* Team Filter Buttons */}
+          <div className="flex justify-start flex-wrap gap-2 sm:gap-4 mt-6 mb-6 ml-4 sm:ml-12">
+            {teams.map((team) => (
+              <button
+                key={team}
+                onClick={() => setActiveTeam(team)}
+                className={`px-2 py-1 sm:px-4 sm:py-2 rounded-full border text-sm sm:text-lg font-medium transition cursor-pointer hover:bg-white hover:text-[#00163A] ${
+                  activeTeam === team
+                    ? "bg-white text-[#00163A]"
+                    : "bg-transparent text-white border-white"
+                }`}
+              >
+                {team}
+              </button>
+            ))}
+          </div>
+
           <button
             onClick={viewFullTeam}
-            className="mt-4 border border-white text-white py-2 px-4 ml-12 rounded hover:bg-white hover:text-[#00163A] transition-all duration-300 cursor-pointer"
+            className="mt-4 border border-white text-white py-2 px-4 ml-4 sm:ml-12 rounded hover:bg-white hover:text-[#00163A] transition-all duration-300 cursor-pointer"
           >
             View all team members
           </button>
@@ -96,7 +128,7 @@ const TeamSlider = () => {
                 transform: `translateX(-${currentSlideIndex * (100 / cardsPerView)}%)`,
               }}
             >
-              {uniqueTeamMembers.map((teamMember, memberIndex) => (
+              {filteredTeamMembers.map((teamMember, memberIndex) => (
                 <div
                   key={`team-member-${memberIndex}`}
                   className="flex-shrink-0 px-2"
@@ -167,12 +199,14 @@ const TeamSlider = () => {
         </div>
 
         <div className="mt-16">
-          <h3 className="text-xl font-bold mb-1 ml-12">Join Us Today!</h3>
-          <p className="text-base text-gray-300 mb-3 ml-12">
+          <h3 className="text-xl font-bold mb-1 ml-4 sm:ml-12">
+            Join Us Today!
+          </h3>
+          <p className="text-base text-gray-300 mb-3 ml-4 sm:ml-12">
             Ready to be part of our amazing team? We're always looking for
             talented individuals who share our passion.
           </p>
-          <button className="border border-white text-white py-2 px-4 ml-12 rounded hover:bg-white hover:text-[#00163A] transition-all duration-300 cursor-pointer">
+          <button className="border border-white text-white py-2 px-4 ml-4 sm:ml-12 rounded hover:bg-white hover:text-[#00163A] transition-all duration-300 cursor-pointer">
             Apply here
           </button>
         </div>

src/config/teammate.js

@@ -48,7 +48,7 @@ const teamMembers = [
     linkedin: "https://www.linkedin.com/in/nikhil-dalai/",
   },
   {
-    name: "Aaditya Sahu",
+    name: "Aaditya Sahoo",
     title: "Captain",
     img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1754117969/aaditya_kwvlki.jpg",
     team: "Team Bluestreak",

src/pages/team/TeamPage.jsx

@@ -44,6 +44,15 @@ const TeamPage = () => {
       </div>
 
       <div className="max-w-4xl mx-auto text-lg font-bold mb-6">
+        {activeTeam === "Executive Body" && (
+          <p className="text-center text-gray-600">
+            The Executive Body is the core leadership team of the ASME Student
+            Section, responsible for planning, organizing, and executing all
+            technical, professional, and outreach activities. It ensures
+            coordination among members, represents the section, and drives
+            initiatives that promote engineering knowledge and collaboration.
+          </p>
+        )}
         {activeTeam === "Team Bluestreak" && (
           <p className="text-center text-gray-600">
             Bluestreak, a team within ASME at NIT Rourkela, is a dedicated team
@@ -113,14 +122,6 @@ const TeamPage = () => {
                     >
                       <FaLinkedin size={18} />
                     </a>
-                    <a
-                      href={member.twitter || "#"}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-black hover:text-blue-500"
-                    >
-                      <FaXTwitter size={18} />
-                    </a>
                   </div>
                 </div>
               </div>