Finished presidents section, mobile view WIP.

Author: Yemyam

components/AlumniSection.jsx

@@ -6,6 +6,7 @@ import Heading from './Heading';
 import { UnderlineTypes } from '../utils/underlineType';
 import CoPresident from "./CoPresident";
 
+// Dummy values to be replaced with contentful
 const people  = [{
   name: "John Doe",
   linkedin: "randomlink.com",
@@ -105,6 +106,48 @@ const people  = [{
   },
   classes: "text-white",
 },
+{
+  name: "John Doe",
+  linkedin: "randomlink.com",
+  position: "Dev",
+  project: "Finance",
+  pfp: {
+    fields: {
+      file: {
+        url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+      }
+    }
+  },
+  classes: "text-white",
+},
+{
+  name: "John Doe",
+  linkedin: "randomlink.com",
+  position: "Dev",
+  project: "Marketing",
+  pfp: {
+    fields: {
+      file: {
+        url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+      }
+    }
+  },
+  classes: "text-white",
+},
+{
+  name: "John Doe",
+  linkedin: "randomlink.com",
+  position: "Dev",
+  project: "Tech",
+  pfp: {
+    fields: {
+      file: {
+        url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+      }
+    }
+  },
+  classes: "text-white",
+},
 ];
 
 const TechnicalTeam = () => {
@@ -113,29 +156,32 @@ const TechnicalTeam = () => {
   const [activeTab, setActiveTab] = useState('');
 
   useEffect(() => {
-    fetchContent('technicalTeam').then((data) => {
+    // Put Contenful stuff here
+    fetchContent('technicalTeam').then(() => {
       setExecutives(people);
 
-      const uniqueProjects = data.map((exec) => exec.project).filter((pos, index, self) => self.indexOf(pos) === index);
       setProjects(["Presidents", "Events", "Finance", "Marketing", "Tech"]);
 
-      if (uniqueProjects.length > 0) {
-        setActiveTab(uniqueProjects[0]);
-      }
+      setActiveTab("Presidents");
     });
   }, []);
 
   return (
-    <section className="bg-[#7055FD] p-12 h-screen">
+    <section className="bg-[#7055FD] p-12 md:min-h-screen h-full">
       <div className="mb-9">
         <Heading underlineType={UnderlineTypes.GREEN_SHORT_UNDERLINE} classes={"text-white"}>Alumni</Heading>
       </div>
       <div>
         {projects.length > 0 && (
-          <Tabs value={activeTab} onChange={(val) => setActiveTab(val)}>
+          <Tabs 
+            value={activeTab}>
             <TabsHeader className="flex flex-row justify-center">
               {projects.map((project) => (
-                <Tab className="alumni-tab rounded-full p-1 font-medium" key={project} value={project}>
+                <Tab className={`alumni-tab rounded-full p-1 font-medium text-white ${
+                  activeTab === project
+                    ? 'bg-[#00D3A9]'
+                    : ''
+                }`} key={project} value={project} onClick={() => setActiveTab(project)}>
                   {project}
                 </Tab>
               ))}

components/CoPresident.jsx

@@ -4,13 +4,16 @@ import Carousel from './Carousel';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import Avatar from './Avatar';
-const CAROUSEL_CONTAINER = 'text-white rounded-lg w-[20rem] h-[30rem] shadow-2xl md:w-4/5 swiper-button-white';
-const ALUMNI_TILE =
-  'bg-[#A689FF] bg-opacity-50 w-[20rem] h-[70rem] md:h-[30rem] rounded-lg items-center p-14 lg:p-10 flex flex-col shadow-2xl md:w-full md:flex-row';
+const CAROUSEL_CONTAINER = 'president-carousel text-white rounded-lg w-[20rem] h-full md:w-4/5 swiper-button-white flex justify-center items-center';
+const PRESIDENT_TILE =
+  'bg-[#A689FF] bg-opacity-50 w-[20rem] h-[70rem] md:h-[20rem] rounded-lg items-center p-14 lg:p-10 flex flex-col md:w-4/5 md:flex-row';
 
-const President = [{
-  name: "Nathan Pham",
+
+
+const President = [[{
+  name: "Jane Doe",
   position: "Co-Pres",
+  year: "2025",
   previousRole: "Events team",
   testimonial: "Wow I love this club",
   linkedin: "random link",
@@ -22,12 +25,29 @@ const President = [{
     }
   },
   classes: "text-[#7055FD]",
-}];
+},
+{
+  name: "John Doe",
+  position: "Co-Pres",
+  year: "2025",
+  previousRole: "Events team",
+  testimonial: "Vitae eget venenatis rhoncus aliquet curabitur mauris, sed turpis nulla. Neque molestie mi placerat ultrices sit in sit.",
+  linkedin: "random link",
+  pfp: {
+    fields: {
+      file: {
+        url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+      }
+    }
+  },
+  classes: "text-[#7055FD]",
+}
+]];
 
-const AlumniTile = ({ name, linkedin, pfp, classes, testimonial }) => {
+const PresidentTile = ({ name, linkedin, pfp, classes, testimonial, position }) => {
   return (
-    <div className={ALUMNI_TILE}>
-      <Avatar key={name} {...{name, linkedin, pfp, classes}}></Avatar>
+    <div className={PRESIDENT_TILE}>
+      <Avatar key={name} {...{name, linkedin, pfp, classes, position}}></Avatar>
       <p className="text-[1.1rem] font-light italic leading-7 mx-auto md:ml-14 md:mb-24 md:text-[1.3rem] lg:text-[1.5rem] md:p-10 text-[#000000]">
         <span className="text-[2rem] font-extrabold">&quot;</span>
         {testimonial}
@@ -39,16 +59,18 @@ const AlumniTile = ({ name, linkedin, pfp, classes, testimonial }) => {
 
 const CoPresident = () => {
   return (
-    <div className='bg-white w-full h-[40rem] flex justify-center items-center'>
-      <div className={CAROUSEL_CONTAINER}>
-        <Carousel>
-          {President.map((president) => (
-            <SwiperSlide key={president.name}>
-              <AlumniTile {...president} />
-            </SwiperSlide>
-          ))}
-        </Carousel>
-      </div>
+    <div className={CAROUSEL_CONTAINER}>
+      <Carousel>
+        {President.map((president) => (
+          <SwiperSlide key={president[0].name}>
+            <div className='bg-white w-full rounded-3xl h-full flex flex-col justify-center items-center gap-10 py-20'>
+              <div className='text-[#000000] text-4xl absolute top-5 left-32'>{president[0].year}</div>
+              <PresidentTile {...president[0]} />
+              <PresidentTile {...president[1]} />
+            </div>
+          </SwiperSlide>
+        ))}
+      </Carousel>
     </div>
   );
 };

styles/globals.css

@@ -38,3 +38,15 @@
 .technical-section {
   background-color: #bcfbe4;
 }
+
+.president-carousel {
+  position: relative;
+}
+
+.president-carousel .swiper-button-next {
+  right: 0px;
+}
+
+.president-carousel .swiper-button-prev {
+  left: 0px;
+}