Web 68 create a new our team page and add tab in navigation

components/Avatar.jsx

@@ -1,22 +1,39 @@
+/* eslint-disable indent */
+// please forgive me idk why it made me do this someone with different eslint config can fix this
 import Image from 'next/image';
 import { faLinkedin } from '@fortawesome/free-brands-svg-icons';
 import FontAwesomeLink from './FontAwesomeLink';
+import { PageIdentifiers } from '../utils/flags';
 
 const PROFILE_CONTAINER = 'flex flex-col items-center m-10';
 
-const Avatar = ({ name, linkedin, position, pfp, classes, prevRole }) => {
+const Avatar = ({ name, linkedin, position, pfp, classes, prevRole, profileContainerClasses = '', teamIdentifier }) => {
   const img = 'https:' + pfp.fields.file.url;
+
+  const colorTheme =
+    teamIdentifier === PageIdentifiers.INTERNAL_LEVEL_CONTAINER
+      ? 'text-[#00D3A9]'
+      : teamIdentifier === PageIdentifiers.EXECUTIVE_LEVEL_CONTAINER
+      ? 'text-[#7055FD]'
+      : '';
+
   return (
-    <div className={PROFILE_CONTAINER}>
-      <div className="w-28 h-28 sm:w-48 sm:h-48 rounded-full relative overflow-hidden">
+    <div className={`${PROFILE_CONTAINER} ${profileContainerClasses}`}>
+      <div className={`size-28 sm:size-44 md:size-48 rounded-full relative overflow-hidden`}>
         <Image src={img} alt={name} layout="fill" objectFit="contain" unoptimized={true} />
       </div>
-      <h2 className={`text-[#7055FD] text-xs sm:text-base font-semibold mt-3 ${classes}`}>{name}</h2>
-      <h2 className={`text-[#7055FD] text-xs sm:text-base font-medium mb-2 ${classes}`}>{position}</h2>
+      <h2 className={`${colorTheme} text-xs sm:text-base font-semibold mt-3 ${classes}`}>{name}</h2>
+      <h2 className={`${colorTheme} text-xs sm:text-base font-medium mb-2 ${classes}`}>{position}</h2>
       {prevRole && (
-        <h2 className={`text-[#7055FD] text-xs sm:text-base font-medium mb-2 ${classes}`}>Previously: {prevRole}</h2>
+        <h2
+          className={`${colorTheme} w-28 text-center text-xs sm:text-base hidden sm:block font-medium mb-2 ${classes}`}
+        >
+          Previously: {prevRole}
+        </h2>
+      )}
+      {linkedin && (
+        <FontAwesomeLink colorTheme={colorTheme} username={linkedin} icon={faLinkedin} className={`${classes}`} />
       )}
-      {linkedin && <FontAwesomeLink username={linkedin} icon={faLinkedin} />}
     </div>
   );
 };

components/EventsTeam.jsx

@@ -0,0 +1,74 @@
+
+// import React, { useState, useEffect } from 'react';
+import Avatar from './Avatar';
+// import { fetchContent } from '../api/apiRoot';
+
+
+const PROFILES_CONTAINER = 'bg-white flex flex-col items-center pt-5';
+const EXECUTIVE_LEVEL_CONTAINER = 'flex flex-wrap justify-center w-full gap-x-10 sm:gap-x-20 px-10';
+const DUMMY_PFP ="//i.pinimg.com/736x/dd/8b/a9/dd8ba98ba0b06489ac96f76b74fe7fc6.jpg";
+
+const EventsTeam = () => {
+// use this when we use api for real
+  //   const [eventsTeam, setEventsTeam] = useState([]);
+  //   useEffect(() => {
+  //     fetchContent('eventsTeamMember').then((data) => setEventsTeam(data));
+  //   }, []);
+  const eventsTeamLeads = [
+    {
+      name: 'Alice Johnson',
+      position: 'Marketing Lead',
+      prevRole: 'Social Media Manager',
+      linkedin: 'alicejohnson',
+      pfp: { fields: { file: { url: DUMMY_PFP } } },
+    },
+    {
+      name: 'Bob Smith',
+      position: 'Brand Strategist',
+      linkedin: 'bobsmith',
+      pfp: { fields: { file: { url: DUMMY_PFP } } },
+    },
+  ];
+  const eventsTeamMembers = [
+    {
+      name: 'Alice Johnson',
+      position: 'Marketing Lead',
+      linkedin: 'alicejohnson',
+      pfp: { fields: { file: { url: DUMMY_PFP } } },
+    },
+    {
+      name: 'Bob Smith',
+      position: 'Brand Strategist',
+      linkedin: 'bobsmith',
+      pfp: { fields: { file: { url: DUMMY_PFP } } },
+    },
+    {
+      name: 'Charlie Brown',
+      position: 'SEO Specialist',
+      linkedin: 'charliebrown',
+      pfp: { fields: { file: { url: DUMMY_PFP } } },
+    },
+  ];
+
+  return (
+    <div>
+      <div className={PROFILES_CONTAINER}>
+        <div className={EXECUTIVE_LEVEL_CONTAINER}>
+          {eventsTeamLeads.map((exec) => (
+            <Avatar classes="!text-[#00D3A9]" profileContainerClasses='!mx-0 !flex-wrap' key={exec.name} {...exec} />
+          ))}
+        </div>
+      </div>
+      <div className={PROFILES_CONTAINER}>
+        <div className={EXECUTIVE_LEVEL_CONTAINER}>
+          {eventsTeamMembers.map((exec) => (
+            <Avatar key={exec.name}{...exec} profileContainerClasses='!mx-0 !flex-wrap' classes="!text-[#00D3A9]" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
+export default EventsTeam;

components/FontAwesomeLink.jsx

@@ -1,9 +1,12 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-const FontAwesomeLink = ({ username, icon, classes = "h-6 w-6 text-[#7055FD] cursor-pointer" }) => (
-  <a target="_blank" href={`https://linkedin.com/in/${username}`} rel="noopener noreferrer">
-    <FontAwesomeIcon className={classes} icon={icon} />
-  </a>
-);
+const FontAwesomeLink = ({ username, colorTheme, icon, className }) => {
+  const defaultClasses = 'size-6 transition-all duration-300 cursor-pointer';
+  return (
+    <a target="_blank" href={`https://linkedin.com/in/${username}`} rel="noopener noreferrer">
+      <FontAwesomeIcon className={`${colorTheme} hover:size-7 ${defaultClasses} ${className}`} icon={icon} />
+    </a>
+  );
+};
 
 export default FontAwesomeLink;

components/Heading.jsx

@@ -1,16 +1,21 @@
 import { UnderlineTypes } from '../utils/underlineType';
 
 /* eslint-disable @next/next/no-img-element */
-const HEADING_CONTAINER = 'py-5 flex flex-col items-center';
 
 const GREEN_LONG_UNDERLINE_DIR = '/svgs/long_heading_underline.svg';
 const GREEN_SHORT_UNDERLINE_DIR = '/svgs/short_heading_underline.svg';
 const PURPLE_SHORT_UNDERLINE_DIR = '/svgs/timeline/purple_heading_underline.svg';
 const WHITE_SINGLE_LINE_DIR = '/svgs/white_long_underline.svg';
 const WHITE_CURLY_LINE_DIR = '/svgs/white_alumni_underline.svg';
 const BEIGE_SHORT_UNDERLINE_DIR = '/svgs/beige_underline.svg';
+const PINK_UNDERLINE_DIR = '/svgs/pink_underline.svg';
 
-const Heading = ({ classes, underlineType = UnderlineTypes.GREEN_SHORT_UNDERLINE, children }) => {
+const Heading = ({
+  classes = '',
+  // distanceFromTop = 0,
+  underlineType = UnderlineTypes.GREEN_SHORT_UNDERLINE,
+  children,
+}) => {
   const getUnderline = () => {
     switch (underlineType) {
       case UnderlineTypes.GREEN_LONG_UNDERLINE:
@@ -25,13 +30,15 @@ const Heading = ({ classes, underlineType = UnderlineTypes.GREEN_SHORT_UNDERLINE
         return WHITE_CURLY_LINE_DIR;
       case UnderlineTypes.BEIGE_SHORT_UNDERLINE:
         return BEIGE_SHORT_UNDERLINE_DIR;
+      case UnderlineTypes.PINK_UNDERLINE:
+        return PINK_UNDERLINE_DIR;
     }
   };
 
   return (
-    <div className={HEADING_CONTAINER}>
-      <h1 className={`${classes} text-5xl font-semibold`}>{children}</h1>
-      {underlineType !== 'None' && <img src={getUnderline()} alt="" />}
+    <div className="relative inline-block text-center">
+      <span className={`relative z-10 ${classes} text-5xl font-semibold`}>{children}</span>
+      {underlineType !== 'None' && <img src={getUnderline()} alt="squiggly" className="w-4/5 mx-auto" />}
     </div>
   );
 };

components/InternalTeam.jsx

@@ -0,0 +1,90 @@
+import Team from './Team';
+import { fetchContent } from '../api/apiRoot';
+import { useState, useEffect } from 'react';
+import { Tabs, TabsHeader, TabsBody, Tab, TabPanel } from '@material-tailwind/react';
+import Heading from './Heading';
+import { UnderlineTypes } from '../utils/underlineType';
+import { PageIdentifiers } from '../utils/flags';
+
+const positionToGroupMap = {
+  'Jr VP Marketing': 'Marketing',
+  'VP Marketing': 'Marketing',
+  'Jr VP Events': 'Events',
+  'VP Events': 'Events',
+  'Co President': 'Presidents',
+  'Jr VP Design': 'Design',
+  'VP Design': 'Design',
+  'Jr VP Tech': 'Tech',
+  'VP Tech': 'Tech',
+  'VP External': 'External',
+  'Jr VP External': 'External',
+};
+
+const InternalTeam = () => {
+  const [executives, setExecutives] = useState([]);
+  const [groups, setGroups] = useState([]);
+  const [activeTab, setActiveTab] = useState('');
+
+  useEffect(() => {
+    fetchContent('adminTeamMember').then((data) => {
+      const executivesWithGroups = data.map((exec) => ({
+        ...exec,
+        group: positionToGroupMap[exec.position] || 'Other',
+      }));
+
+      setExecutives(executivesWithGroups);
+
+      const uniqueGroups = executivesWithGroups
+        .map((exec) => exec.group)
+        .filter((group, index, self) => self.indexOf(group) === index);
+
+      setGroups(uniqueGroups);
+
+      if (uniqueGroups.length > 0) {
+        setActiveTab(uniqueGroups[0]);
+      }
+    });
+  }, []);
+
+  return (
+    <>
+      <div className="mb-12 flex justify-center gap-3">
+        <Heading distanceFromTop={11} underlineType={UnderlineTypes.GREEN_SHORT_UNDERLINE}>
+          Internal{' '}
+        </Heading>
+        <span className="text-5xl font-semibold">Team</span>
+      </div>
+      {groups.length > 0 && (
+        <Tabs value={activeTab}>
+          <TabsHeader className="overflow-x-auto grid place-items-center">
+            <div className="flex flex-row gap-2">
+              {groups.map((group) => (
+                <Tab key={group} value={group} onClick={() => setActiveTab(group)}>
+                  <div
+                    className={`rounded-full px-4 py-2 font-medium hover:bg-[#00D3A9] hover:text-white transition-all duration-200
+              ${activeTab === group ? 'bg-[#00D3A9] text-white' : 'text-black'}
+            `}
+                  >
+                    {group}
+                  </div>
+                </Tab>
+              ))}
+            </div>
+          </TabsHeader>
+          <TabsBody>
+            {groups.map((group) => (
+              <TabPanel key={group} value={group}>
+                <Team
+                  teamIdentifier={PageIdentifiers.INTERNAL_LEVEL_CONTAINER}
+                  teamMembers={executives.filter((exec) => exec.group === group)}
+                />
+              </TabPanel>
+            ))}
+          </TabsBody>
+        </Tabs>
+      )}
+    </>
+  );
+};
+
+export default InternalTeam;

components/MeetOurTeam.jsx

@@ -0,0 +1,76 @@
+import TextSection from '/components/TextSection.jsx';
+import Heading from '/components/Heading';
+import { UnderlineTypes } from '../utils/underlineType';
+import { useRef } from 'react';
+import InternalTeam from './InternalTeam';
+import TechnicalTeam from './TechnicalTeam';
+
+const MEET_OUR_TEAM = 'flex flex-col bg-pink pt-10 z-0 w-full';
+const CONTENT_CONTAINER = 'flex flex-col pt-5 p-5 md:px-32';
+const MEET_OUR_AMAZING_TEAM_TITLE =
+  'flex flex-wrap items-baseline gap-x-2 pt-5 justify-center w-fit mx-20 sm:mx-20 md:mx-auto lg:mx-auto';
+
+const Button = ({ classes = '', children, targetRef }) => {
+  return (
+    <button
+      onClick={() => {
+        if (targetRef?.current) {
+          const yOffset = -50;
+          const y = targetRef.current.getBoundingClientRect().top + window.pageYOffset + yOffset;
+
+          window.scrollTo({ top: y, behavior: 'smooth' });
+        }
+      }}
+      className={`cursor-pointer rounded-full text-white border-white py-2 px-8 bg-brightPink border-4 text-3xl font-bold w-48 ${classes}`}
+    >
+      {children}
+    </button>
+  );
+};
+
+const MeetOurAmazingTeam = () => {
+  const internalRef = useRef(null);
+  const technicalRef = useRef(null);
+
+  return (
+    <div>
+      <div className={MEET_OUR_TEAM}>
+        <div className={MEET_OUR_AMAZING_TEAM_TITLE}>
+          <h1 className="text-5xl font-semibold">Meet our</h1>
+          <Heading
+            distanceFromTop={13}
+            classes="italic whitespace-nowrap"
+            underlineType={UnderlineTypes.PINK_UNDERLINE}
+          >
+            Amazing
+          </Heading>
+          <h1 className="text-5xl font-semibold ml-2"> Team</h1>
+        </div>
+        <div className={CONTENT_CONTAINER}>
+          <TextSection classes="text-black pb-10 w-fit justify-center text-center mx-10 sm:mx-20 md:mx-auto lg:mx-auto">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat.
+          </TextSection>
+          <div className="pt-5 pb-12 flex justify-center gap-6 mx-auto flex-col sm:flex-row">
+            <Button targetRef={internalRef} timeout={500}>
+              Internal
+            </Button>
+            <Button targetRef={technicalRef} timeout={1000}>
+              Technical
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <section id="internal" ref={internalRef} className="h-screen p-12">
+        <InternalTeam />
+      </section>
+      <section id="technical" ref={technicalRef} className="h-screen p-12 bg-[#bcfbe4]">
+        <TechnicalTeam />
+      </section>
+    </div>
+  );
+};
+
+export default MeetOurAmazingTeam;

components/MobileNavbarDrawer.jsx

@@ -9,6 +9,9 @@ const MobileNavbarDrawer = () => {
         <a className={TEXT_CLASSES} href="who-we-are">
           About
         </a>
+        <a className={TEXT_CLASSES} href="our-team">
+          Our Team
+        </a>
         <a className={TEXT_CLASSES} href="newsletter">
           News
         </a>

components/Navbar.jsx

@@ -24,6 +24,9 @@ const Navbar = () => {
           <Link href="/who-we-are" legacyBehavior>
             <span className={TEXT_CLASSES}>About</span>
           </Link>
+          <Link href="/our-team" legacyBehavior>
+            <span className={TEXT_CLASSES}>Our Team</span>
+          </Link>
           <Link href="/newsletter" legacyBehavior>
             <span className={TEXT_CLASSES}>News</span>
           </Link>

components/Team.jsx

@@ -0,0 +1,15 @@
+import Avatar from './Avatar';
+
+const Team = ({ teamMembers, teamIdentifier }) => {
+  const TEAM_CONTAINER = 'flex flex-row flex-wrap justify-center w-full';
+
+  return (
+    <div className={TEAM_CONTAINER}>
+      {teamMembers.map((member) => (
+        <Avatar teamIdentifier={teamIdentifier} key={member.name} {...member} />
+      ))}
+    </div>
+  );
+};
+
+export default Team;