Feature/autoclose profile

root/src/components/aboutUs/AboutUs.tsx

@@ -11,7 +11,7 @@ import styled from "styled-components";
 
 import JoinUs from "@app/components/aboutUs/JoinUs";
 import OurMission from "@app/components/aboutUs/OurMission";
-import Partners from "@app/components/aboutUs/Partners";
+import Partners from "@app/components/aboutUs/PartnersPage/Partners";
 import { gaAppendActionWithLng, gaChangeLanguage } from "@app/ga/eventActions";
 import { gaLanguage } from "@app/ga/eventCategories";
 import { ThemeContext } from "@app/utils/theme-context";

root/src/components/aboutUs/MeetOurTeam/MeetOurTeam.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { Wrapper } from "@bit/wasedatime.core.ts.styles.wrapper";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 
 import {
-  AlumniList,
   CurrentList,
+  AlumniList,
 } from "@app/components/aboutUs/MeetOurTeam/memberList";
 
 import { ProfileCard } from "@app/components/block/ProfileCard";
@@ -33,6 +33,7 @@ const CardArea = styled("div")`
 
 const MeetOurTeam = () => {
   const { t } = useTranslation();
+  const [activeCardName, setActiveCardName] = useState("");
 
   return (
     <Wrapper>
@@ -50,6 +51,8 @@ const MeetOurTeam = () => {
             positions={member.positions}
             socials={member.socials}
             profileText={member.profileText}
+            isOpen={member.name === activeCardName}
+            onClick={() => setActiveCardName(member.name)}
           />
         ))}
       </CardArea>
@@ -65,6 +68,8 @@ const MeetOurTeam = () => {
             positions={member.positions}
             socials={member.socials}
             profileText={member.profileText}
+            onClick={() => setActiveCardName(member.name)}
+            isOpen={member.name === activeCardName}
           />
         ))}
       </CardArea>

root/src/components/aboutUs/MeetOurTeam/memberList.ts

@@ -37,6 +37,8 @@ export interface Members {
   positions: Array<string>;
   socials?: Array<{ platform: string; link: string }>;
   profileText?: string;
+  isOpen?: boolean;
+  onClick?: () => void;
 }
 
 export const CurrentList: Array<Members> = [

root/src/components/aboutUs/PartnersPage/PartnerList.ts

@@ -0,0 +1,102 @@
+// import email from "@app/assets/img/socialmediaicon/email.png";
+// import github from "@app/assets/img/socialmediaicon/github.png";
+// import homepage from "@app/assets/img/socialmediaicon/homepage.png";
+// import linkedin from "@app/assets/img/socialmediaicon/linkedin.png";
+// import weibo from "@app/assets/img/socialmediaicon/sina-weibo.png";
+// import twitter from "@app/assets/img/socialmediaicon/twitter.png";
+import instagram from "@app/assets/img/socialmediaicon/instagram.png";
+import facebook from "@app/assets/img/socialmediaicon/facebook.png";
+import kredit from "@app/assets/img/partners/kredit.png";
+
+export interface PartnerProfile {
+  org: string;
+  img: string;
+  socials?: Array<{ link: string; platform: string }>;
+  members?: Array<{ name: string; platform: string }>;
+}
+
+export const PartnerList: Array<PartnerProfile> = [
+  {
+    org: "SPSE-EDP Student Council",
+    img: "https://wasedatime-partners.s3-ap-northeast-1.amazonaws.com/spse-edp-logo.png",
+    socials: [
+      {
+        link: "https://www.facebook.com/SPSEEDPSC",
+        platform: facebook,
+      },
+      {
+        link: "https://www.instagram.com/spse_edp_student_council",
+        platform: instagram,
+      },
+    ],
+    //   members: [
+    //     {
+    //       name: "Peter Chai",
+    //       img: "https://wasedatime-partners.s3-ap-northeast-1.amazonaws.com/spse-edp-member1.png",
+    //       social: [
+    //         {
+    //           link: "https://www.linkedin.com/in/peter-chai-233577158/",
+    //           platform: linkedin,
+    //         },
+    //         {
+    //           link: "https://www.facebook.com/siyuan.chai.77",
+    //           platform: facebook,
+    //         },
+    //         {
+    //           link: "https://twitter.com/PeterChai1013",
+    //           platform: twitter,
+    //         },
+    //       ],
+    //     },
+    //     {
+    //       name: "Ghafi Reyhan",
+    //       img: "https://wasedatime-partners.s3-ap-northeast-1.amazonaws.com/spse-edp-member2.png",
+    //       social: [],
+    //     },
+    //   ],
+  },
+  {
+    org: "Kredit Korea",
+    img: kredit,
+    socials: [
+      {
+        link: "https://www.instagram.com/kredit_waseda/",
+        platform: instagram,
+      },
+    ],
+  },
+  {
+    org: "CSSA",
+    img: "https://wasedatime-partners.s3-ap-northeast-1.amazonaws.com/cssa-logo.png",
+    socials: [
+      // {
+      //   url: "",
+      //   icon: <FontAwesomeIcon icon={faFacebook} />
+      // }
+    ],
+  },
+  {
+    org: "WaLife",
+    img: "https://wasedatime-partners.s3-ap-northeast-1.amazonaws.com/walife-logo.png",
+    socials: [
+      // {
+      //   url: "",
+      //   icon: <FontAwesomeIcon icon={faFacebook} />
+      // }
+    ],
+  },
+  {
+    org: "WTSA",
+    img: "https://wasedatime-partners.s3-ap-northeast-1.amazonaws.com/wtsa-logo.png",
+    socials: [
+      {
+        link: "https://www.facebook.com/WasedaTaiwaneseStudentAssociation",
+        platform: facebook,
+      },
+      {
+        link: "https://www.instagram.com/wtsa.jp",
+        platform: instagram,
+      },
+    ],
+  },
+];

root/src/components/aboutUs/PartnersPage/Partners.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+
+import { Wrapper } from "@bit/wasedatime.core.ts.styles.wrapper";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+
+import { PartnerList } from "@app/components/aboutUs/PartnersPage/PartnerList";
+
+import { ProfileCard } from "@app/components/block/ProfileCard";
+
+const Title = styled("h2")`
+  font-weight: bold;
+  text-align: center;
+`;
+
+const SubTitle = styled("h2")`
+  font-weight: bold;
+  margin: 10px auto;
+  text-align: center;
+`;
+
+const CardArea = styled("div")`
+  width: 80%;
+  margin: 0px auto 40px auto;
+  font-size: 0.9em;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+`;
+
+const Partners = () => {
+  const { t } = useTranslation();
+  const [activeCardName, setActiveCardName] = useState("");
+
+  return (
+    <Wrapper>
+      <Title className="mt-3.5 mb-2.5 sm:my-5 text-3xl sm:text-4xl 2xl:text-5xl text-light-text1 dark:text-dark-text1">
+        Meet Our Talented Team!
+      </Title>
+      <SubTitle className="my-1.5 sm:my-5 text-2xl sm:text-3xl 2xl:text-4xl text-light-text1 dark:text-dark-text1">
+        Current Members
+      </SubTitle>
+      <CardArea>
+        {PartnerList.map((org) => (
+          <ProfileCard
+            image={org.img}
+            name={org.org}
+            socials={org.socials}
+            isOpen={org.org === activeCardName}
+            onClick={() => setActiveCardName(org.org)}
+          />
+        ))}
+      </CardArea>
+    </Wrapper>
+  );
+};
+
+export default Partners;

root/src/components/block/ProfileCard.tsx

@@ -26,9 +26,11 @@ const MediaIcon = styled("img")`
 export interface ProfileCardProps {
   image: string;
   name: string;
-  positions: Array<string>;
+  positions?: Array<string>;
   socials?: Array<{ platform: string; link: string }>;
   profileText?: string;
+  onClick?: () => void;
+  isOpen?: boolean;
   // mini?: boolean;
 }
 
@@ -38,23 +40,23 @@ export const ProfileCard = ({
   positions,
   socials,
   profileText,
+  onClick,
+  isOpen,
 }: // mini,
 ProfileCardProps) => {
-  const [showCard, setShowCard] = useState<boolean>(false);
-  const handleClick = () => {
-    setShowCard(!showCard);
-  };
+  // const [showCard, setShowCard] = useState<boolean>(false);
+
+  // const handleClick = () => {
+  //   setShowCard(!showCard);
+  // };
 
   return (
     <Card
       className="block group cursor-pointer transition ease-in-out delay-300ms transition-duration:1500ms md:mx-8 md:my-6 lg:mx-10 lg:my-8"
-      onClick={handleClick}
+      onClick={onClick}
     >
-      {showCard ? (
-        <div
-          // Card: pic + hidden card-body +  Name
-          className="card w-auto card-side rounded-8xl bg-gradient-to-r from-light-card2 to-light-card1 dark:bg-gradient-to-r dark:from-dark-card2 dark:to-dark-bgMain drop-shadow-lg translate-x-[5px] transition ease-in-out delay-200ms transition-duration:3000ms my-[9px] sm:my-[16px] z-20"
-        >
+      {isOpen ? (
+        <div className="card w-auto card-side rounded-8xl bg-gradient-to-r from-light-card2 to-light-card1 dark:bg-gradient-to-r dark:from-dark-card2 dark:to-dark-bgMain drop-shadow-lg translate-x-[5px] transition ease-in-out delay-200ms transition-duration:3000ms my-[9px] sm:my-[16px] z-20">
           {/* Profile pic */}
           <figure className="px-3 py-3 sm:px-5 sm:py-5">
             {/* responsive for smaller screen: w/h - [100px] */}
@@ -122,6 +124,7 @@ ProfileCardProps) => {
           </div>
         </div>
       ) : (
+        // Card: pic + hidden card-body +  Name
         <div>
           <div>
             <p className="text-center text-lg sm:text-xl text-transparent font-bold group-hover:text-light-text2 dark:group-hover:text-dark-text1 translate-y-[85px] sm:translate-y-[110px] z-10">