From 950f71e3d28c8160f5cee0c6c6431b5e1278355c Mon Sep 17 00:00:00 2001
From: Francesco <fbaldini02@gmail.com>
Date: Thu, 16 May 2024 20:38:28 +0200
Subject: [PATCH 1/2] Setup files

---
 components/Header.tsx                    |  19 +-
 pages/People/Alumni.tsx                  | 596 +++++++++++++++++++++++
 pages/{ => People}/People.tsx            |   2 +-
 styles/Activities/Activities.module.scss |   7 +
 styles/People/Alumni.module.scss         |   0
 5 files changed, 619 insertions(+), 5 deletions(-)
 create mode 100644 pages/People/Alumni.tsx
 rename pages/{ => People}/People.tsx (97%)
 create mode 100644 styles/People/Alumni.module.scss

diff --git a/components/Header.tsx b/components/Header.tsx
index 01f66e5..68ed2fb 100755
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -35,17 +35,28 @@ const Header = ({darkHeader = false} : {darkHeader? :boolean}) => {
                     About
                 </div>
 
-                <div className={isActive('/People') ? styles.active : styles.inactive} onClick={() => router.push('/People')}>
-                    People
+                <div className={`${isActive('/People/People') || isActive('/People/Alumni')? styles.active : styles.inactive} ${styles.menuItem}`}
+                     onClick={() => router.push('/People/People')}>
+                    <div className={styles.itemWrapper}>
+                        People
+                        <div className={styles.arrowDown}></div>
+                    </div>
+                    <ul className={styles.dropdown}>
+                        <li className={isActive('/People/People') ? styles.activeDropdown : ''} onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/People/People')}>People</li>
+                        <li className={isActive('/People/Alumni') ? styles.activeDropdown : ''} onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/People/Alumni')}>Alumni</li>
+                        {/*<li className={isActive('/Activities/Masterclasses') ? styles.activeDropdown  : ''} onClick={() => router.push('/Activities/Masterclasses')}>Masterclasses</li>*/}
+                    </ul>
                 </div>
 
-                <div className={`${isActive('/Activities/Activities') || isActive('/Activities/Events') || isActive('/Activities/StudyGroups') || isActive('/Activities/Masterclasses') ? styles.active : styles.inactive} ${styles.menuItem}`}
-                     onClick={() => router.push('/Activities/Activities')}>
+                <div
+                    className={`${isActive('/Activities/Activities') || isActive('/Activities/Events') || isActive('/Activities/StudyGroups') || isActive('/Activities/Masterclasses') ? styles.active : styles.inactive} ${styles.menuItem}`}
+                    onClick={() => router.push('/Activities/Activities')}>
                     <div className={styles.itemWrapper}>
                         Activities
                         <div className={styles.arrowDown}></div>
                     </div>
                     <ul className={styles.dropdown}>
+                        <li className={isActive('/Activities/Activities') ? styles.activeDropdown : ''} onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/Activities/Activities')}>Activities</li>
                         <li className={isActive('/Activities/Events') ? styles.activeDropdown : ''} onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/Activities/Events')}>Events</li>
                         {/*<li className={isActive('/Activities/Masterclasses') ? styles.activeDropdown  : ''} onClick={() => router.push('/Activities/Masterclasses')}>Masterclasses</li>*/}
                         <li className={isActive('/Activities/StudyGroups') ? styles.activeDropdown : ''} onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/Activities/StudyGroups')}>Study Groups</li>
diff --git a/pages/People/Alumni.tsx b/pages/People/Alumni.tsx
new file mode 100644
index 0000000..68862dc
--- /dev/null
+++ b/pages/People/Alumni.tsx
@@ -0,0 +1,596 @@
+import Layout from "../../components/Layout";
+import styles from '@/styles/People/People.module.scss'
+import RoundButton from "@/components/molecules/RoundButton";
+import { useRouter } from "next/router";
+import {MouseEventHandler, useEffect, useState} from "react";
+import ArrowButton from "@/components/molecules/ArrowButton";
+
+// Images should be in a 4:5 ratio
+const Board: BoardMemberProps[] = [
+    {
+        name: "Gustavo Nicoletti",
+        role: "Recording Secretary",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        roleDescription: "Edoardo is a 3rd year Computer Science student at the University of Bristol. He is the President of the Bristol University Italian Society and the founder of the Bristol U",
+    },
+    {
+        name: "Serena Canavero",
+        role: "President",
+        imageSrc: "/People/Board/Serena Canavero.png",
+        linkedIn: "https://www.linkedin.com/in/serenacanavero/",
+        roleDescription: "Edoardo is a 3rd year Computer Science student at the University of Bristol. He is the President of the Bristol University Italian Society and the founder of the Bristol U",
+    },
+    {
+        name: "Francesco Anzoino",
+        role: "Treasurer",
+        imageSrc: "/People/Board/Francesco Anzoino.png",
+        linkedIn: "",
+        roleDescription: "Edoardo is a 3rd year Computer Science student at the University of Bristol. He is the President of the Bristol University Italian Society and the founder of the Bristol U",
+    },
+    {
+        name: "Claudio Fantasia",
+        role: "Vice President",
+        imageSrc: "/People/Board/Claudio Fantasia.png",
+        linkedIn: "https://www.linkedin.com/in/claudio-fantasia-120560224/",
+        roleDescription: "Edoardo is a 3rd year Computer Science student at the University of Bristol. He is the President of the Bristol University Italian Society and the founder of the Bristol U",
+    },
+    {
+        name: "Dario Gosmar",
+        role: "Web Correspondent",
+        imageSrc: "/People/Board/Dario Gosmar.png",
+        linkedIn: "https://www.linkedin.com/in/dario-gosmar/",
+        roleDescription: "Edoardo is a 3rd year Computer Science student at the University of Bristol. He is the President of the Bristol University Italian Society and the founder of the Bristol U",
+    },
+    {
+        name: "Alberto Castrignanò",
+        role: "Corresponding Secretary",
+        imageSrc: "/People/Board/Alberto Castrignano.png",
+        linkedIn: "https://www.linkedin.com/in/albertocastrignano2/",
+        roleDescription: "Edoardo is a 3rd year Computer Science student at the University of Bristol. He is the President of the Bristol University Italian Society and the founder of the Bristol U",
+    },
+];
+
+// Images work well in a 3:5 ratio
+const Teams: TeamProps[] = [
+    {
+        area: "Comms",
+        longName: "Communications",
+        description: "Informing, engaging, motivating and creating: we constitute the link between the chapter and the student community",
+        imageSrc: "/People/Resp/resp-comms.png",
+        managers: [
+            {
+                name: "Dario Gosmar",
+                imageSrc: "/People/Areas/Comms/Dario Gosmar.png",
+            }
+        ],
+        members: [
+            {
+                name: "Alessia Scardi",
+                imageSrc: "/People/Areas/Comms/Alessia Scardi.png",
+            },
+            {
+                name: "Riccardo Alfonso Cerrone",
+                imageSrc: "/People/Areas/Comms/Riccardo Alfonso Cerrone.png",
+            },
+            {
+                name: "Vittoria Drago",
+                imageSrc: "/People/Areas/Comms/Vittoria Drago.png",
+            },
+            {
+                name: "Antonio Capece",
+                imageSrc: "/People/Areas/Comms/Antonio Capece.png",
+            },
+            {
+                name: "Francesco Di Stefano",
+                imageSrc: "/People/Areas/Comms/Francesco Di Stefano.png",
+            },
+            {
+                name: "Lorenzo Fezza",
+                imageSrc: "/People/Areas/Comms/Lorenzo Fezza.png",
+            },
+            {
+                name: "Marco Rosa Gobbo",
+                imageSrc: "/People/Areas/Comms/Marco Rosa Gobbo.png",
+            },
+            {
+                name: "Lucrezia Marcovaldi",
+                imageSrc: "/People/Areas/Comms/Lucrezia Marcovaldi.png",
+            },
+            {
+                name: "Alex Martinelli",
+                imageSrc: "/People/Areas/Comms/Alex Martinelli.png",
+            },
+            {
+                name: "Andrea Minardi",
+                imageSrc: "/People/Areas/Comms/Andrea Minardi.png",
+            },
+
+        ]
+    },
+    {
+        area: "HR",
+        longName: "Human Resources",
+        description: "Networking is our keyword: we manage the recruitment and organize any event/activity regarding the chapter",
+        imageSrc: "/People/Resp/resp-hr.png",
+        managers: [
+            {
+                name: "Francesca Portadibasso",
+                imageSrc: "/People/Areas/HR/Francesca Portadibasso.png",
+            },
+            {
+                name: "Luca Filippetti",
+                imageSrc: "/People/Areas/HR/Luca Filippetti.png",
+            }
+        ],
+        members: [
+            {
+                name: "Edoardo Demichelis",
+                imageSrc: "/People/Areas/HR/Edoardo Demichelis.png",
+            },
+            {
+                name: "Renata De Gennaro",
+                imageSrc: "/People/Areas/HR/Renata De Gennaro.png",
+            },
+            {
+                name: "Giacomo Maino",
+                imageSrc: "/People/Areas/HR/Giacomo Maino.png",
+            },
+            {
+                name: "Rosario Francesco Cavelli",
+                imageSrc: "/People/Areas/HR/Rosario Francesco Cavelli.png",
+            },
+            {
+                name: "Stefano Cerutti",
+                imageSrc: "/People/Areas/HR/Stefano Cerutti.png",
+            },
+            {
+                name: "Edoardo Colella",
+                imageSrc: "/People/Areas/HR/Edoardo Colella.png",
+            },
+            {
+                name: "Marco Del Core",
+                imageSrc: "/People/Areas/HR/Marco Del Core.png",
+            },
+            {
+                name: "Alessandro Gasbarri",
+                imageSrc: "/People/Areas/HR/Alessandro Gasbarri.png",
+            },
+            {
+                name: "Kaliroi Mignone",
+                imageSrc: "/People/Areas/HR/Kaliroi Mignone.png",
+            },
+            {
+                name: "Andrea Pignata",
+                imageSrc: "/People/Areas/HR/Andrea Pignata.png",
+            },
+        ]
+    },
+    {
+        area: "Corporate Training",
+        longName: "Corporate Training",
+        description: "We are responsible for the talks and the workshops that constitute the interfaces with the professionals  ",
+        imageSrc: "/People/Resp/resp-fi.png",
+        managers: [
+            {
+                name: "Elena Favero",
+                imageSrc: "/People/Areas/Corporate Training/Elena Favero.png",
+            }
+        ],
+        members: [
+            {
+                name: "Benedetta Perrone",
+                imageSrc: "/People/Areas/Corporate Training/Benedetta Perrone.png",
+            },
+            {
+                name: "Lorenzo Barbati",
+                imageSrc: "/People/Areas/Corporate Training/Lorenzo Barbati.png",
+            },
+            {
+                name: "Riccardo Bracciale",
+                imageSrc: "/People/Areas/Corporate Training/Riccardo Bracciale.png",
+            },
+            {
+                name: "Ismaele Bahti",
+                imageSrc: "/People/Areas/Corporate Training/Ismaele Bahati.png",
+            },
+            {
+                name: "Marco Canavero",
+                imageSrc: "/People/Areas/Corporate Training/Marco Canavero.png",
+            },
+            {
+                name: "Marco D'Andria",
+                imageSrc: "/People/Areas/Corporate Training/Marco Dandria.png",
+            },
+            {
+                name: "Arber Kryeziu",
+                imageSrc: "/People/Areas/Corporate Training/Arber Kryeziu.png",
+            },
+            {
+                name: "Vittorio Macripò",
+                imageSrc: "/People/Areas/Corporate Training/Vittorio Macripò.png",
+            },
+            {
+                name: "Stefano Negri Merlo",
+                imageSrc: "/People/Areas/Corporate Training/Stefano Negri Merlo.png",
+            },
+            {
+                name: "Gustavo Ramirez",
+                imageSrc: "/People/Areas/Corporate Training/Gustavo Ramirez.png",
+            },
+            {
+                name: "Sofia Russo",
+                imageSrc: "/People/Areas/Corporate Training/Sofia Russo.png",
+            },
+            {
+                name: "Paolo Molino",
+                imageSrc: "/People/Areas/Corporate Training/Paolo Molino.png",
+            },
+
+        ]
+    },
+    {
+        area: "Tutoring",
+        longName: "Tutoring",
+        description: "We put at the first place the networking between the students, organizing masterclasses and study groups open to everyone who wants to join",
+        imageSrc: "/People/Resp/resp-tutoring.png",
+        managers: [
+            {
+                name: "Orlando Zaccaria",
+                imageSrc: "/People/Areas/Tutoring/Orlando Zaccaria.png",
+            }
+        ],
+        members: [
+            {
+                name: "Eduard Antonovic Occhipinti",
+                imageSrc: "/People/Areas/Tutoring/Eduard Antonovic Occhipinti.png",
+            },
+            {
+                name: "Erik Scolaro",
+                imageSrc: "/People/Areas/Tutoring/Erik Scolaro.png",
+            },
+            {
+                name: "Jad Sarkis",
+                imageSrc: "/People/Areas/Tutoring/Jad Sarkis.png",
+            },
+            {
+                name: "Sabina Sarcuni",
+                imageSrc: "/People/Areas/Tutoring/Sabina Sarcuni.png",
+            },
+            {
+                name: "Lorenza Bonfanti Posta",
+                imageSrc: "/People/Areas/Tutoring/Lorenza Bonfanti Posta.png",
+            },
+            {
+                name: "Alessia De Crescenzo",
+                imageSrc: "/People/Areas/Tutoring/Alessia De Crescenzo.png",
+            },
+            {
+                name: "Leonardo Gallina",
+                imageSrc: "/People/Areas/Tutoring/Leonardo Gallina.png",
+            },
+            {
+                name: "Mattia Molinari",
+                imageSrc: "/People/Areas/Tutoring/Mattia Molinari.png",
+            },
+            {
+                name: "Marco Donnarumma",
+                imageSrc: "/People/Areas/Tutoring/Marco Donnarumma.png",
+            },
+        ]
+    },
+    {
+        area: "Events",
+        longName: "Events",
+        description: "We organize hackathons & competitions related to the areas of interest of the students community",
+        imageSrc: "/People/Resp/resp-eventi.png",
+        managers: [
+            {
+                name: "Sebastiano Guzzone",
+                imageSrc: "/People/Areas/Events/Sebastiano Guzzone.png",
+            }
+        ],
+        members: [
+            {
+                name: "Alessio Melone",
+                imageSrc: "/People/Areas/Events/Alessio Melone.png",
+            },
+            {
+                name: "Elisa Misuri",
+                imageSrc: "/People/Areas/Events/Elisa Misuri.png",
+            },
+            {
+                name: "Nicolo Benso",
+                imageSrc: "/People/Areas/Events/Nicolo Benso.png",
+            },
+            {
+                name: "Davide Arcolini",
+                imageSrc: "/People/Areas/Events/Davide Arcolini.png",
+            },
+            {
+                name: "Daniele De Rossi",
+                imageSrc: "/People/Areas/Events/Daniele De Rossi.png",
+            },
+            {
+                name: "Freddy Dongue Dongmo Yann",
+                imageSrc: "/People/Areas/Events/Freddy Dongue Dongmo Yann.png",
+            },
+            {
+                name: "Francesca Fusco",
+                imageSrc: "/People/Areas/Events/Francesco Fusco.png",
+            },
+            {
+                name: "Gabriele Iurlaro",
+                imageSrc: "/People/Areas/Events/Gabriele Iurlaro.png",
+            },
+            {
+                name: "Raffaele Negri",
+                imageSrc: "/People/Areas/Events/Raffaele Negri.png",
+            },
+            {
+                name: "Mina Nikolova",
+                imageSrc: "/People/Areas/Events/Mina Nikolova.png",
+            },
+            {
+                name: "Marco Pascarella",
+                imageSrc: "/People/Areas/Events/Marco Pascarella.png",
+            },
+            {
+                name: "Stefano Ravera",
+                imageSrc: "/People/Areas/Events/Stefano Ravera.png",
+            },
+        ]
+    },
+    {
+        area: "IT",
+        longName: "IT",
+        description: "We manage IT-related projects for the chapter, such as our own website or the recruitment software",
+        imageSrc: "/People/Resp/resp-it.png",
+        managers: [
+            {
+                name: "Alberto Baroso",
+                imageSrc: "/People/Areas/IT/Alberto Baroso.png",
+            },
+            {
+                name: "Francesco Baldini",
+                imageSrc: "/People/Areas/IT/Francesco Baldini.png",
+            }
+        ],
+        members: [
+            {
+                name: "Alessio Menichinelli",
+                imageSrc: "/People/Areas/IT/Alessio Menichinelli.png",
+            },
+            {
+                name: "Filippo Goffredo",
+                imageSrc: "/People/Areas/IT/Filippo Goffredo.png",
+            },
+            {
+                name: "Isabella Lombardi",
+                imageSrc: "/People/Areas/IT/Isabella Lombardi.png",
+            },
+            {
+                name: "Massimo Aresca",
+                imageSrc: "/People/Areas/IT/Massimo Aresca.png",
+            },
+            {
+                name: "Pasquale Bianco",
+                imageSrc: "/People/Areas/IT/Pasquale Bianco.png",
+            },
+            {
+                name: "Damiano Bonaccorsi",
+                imageSrc: "/People/Areas/IT/Damiano Bonaccorsi.png",
+            },
+            {
+                name: "Marco De Luca",
+                imageSrc: "/People/Areas/IT/Marco De Luca.png",
+            },
+            {
+                name: "Elti Gjiriti",
+                imageSrc: "/People/Areas/IT/Elti Gjiriti.png",
+            },
+            {
+                name: "Matteo Mugnai",
+                imageSrc: "/People/Areas/IT/Matteo Mugnai.png",
+            },
+            {
+                name: "Marco Pappalardo",
+                imageSrc: "/People/Areas/IT/Marco Pappalardo.png",
+            }
+        ]
+    },
+];
+
+export default function People() {
+    const router = useRouter();
+    const [boardIndex, setBoardIndex] = useState(0);
+    const [teamIndex, setTeamIndex] = useState(0);
+    const [boardPopUpVisible, setBoardPopUpVisible] = useState(false);
+    const [teamPopUpVisible, setTeamPopUpVisible] = useState(false);
+
+    const handleBoardMemberClick = (index: number) => {
+        setBoardIndex(index);
+        setBoardPopUpVisible(true);
+    }
+
+    const handleTeamMemberClick = (index: number) => {
+        setTeamIndex(index);
+        setTeamPopUpVisible(true);
+        document.body.style.overflow = 'hidden';
+    }
+
+    const handleHideBoardPopUp = () => {
+        setBoardPopUpVisible(false);
+    }
+
+    const handleHideTeamPopUp = () => {
+        setTeamPopUpVisible(false);
+        document.body.style.overflow = 'auto';
+    }
+
+    return (
+        <Layout triangles>
+            {/*<BoardPopUp index={boardIndex} visible={false} disablePopUp={handleHideBoardPopUp}/>*/}
+            <div className={styles.boardContainer}>
+                <text className={styles.theBoard}>THE BOARD</text>
+                <text className={styles.managementArea}>Management Area</text>
+                <div className={styles.boardGrid}>
+                    {Board.map((bmp, index) => (
+                        <BoardMember boardMemberProps={bmp} index={index} key={index}
+                                     onClick={() => handleBoardMemberClick(index)} />
+                    ))}
+                </div>
+            </div>
+
+            <TeamPopUp index={teamIndex} visible={teamPopUpVisible} disablePopUp={handleHideTeamPopUp} />
+            <div className={styles.teamsContainer}>
+                <text className={styles.theTeams}>THE TEAMS</text>
+                <text className={styles.joinOurTeams}>Our Teams</text>
+                <div className={styles.teamsGrid}>
+                    {Teams.map((team, index) => (
+                        <Team teamProps={team} key={team.area} onClick={() => handleTeamMemberClick(index)} />
+                    ))}
+                </div>
+            </div>
+
+            <div className={styles.discover}>
+                <div className={styles.discover__coming}>coming soon</div>
+                <div className={styles.discover__title}>discover</div>
+                <div className={styles.discover__title}>past boards and alumni</div>
+            </div>
+        </Layout>
+    )
+}
+
+function BoardMember({ boardMemberProps, index, onClick }: {
+    boardMemberProps: BoardMemberProps,
+    index: number,
+    onClick: MouseEventHandler<HTMLDivElement>
+}) {
+    const [isHovered, setHovered] = useState(false);
+
+    const handleMouseEnter = () => {
+        setHovered(true);
+    };
+
+    const handleMouseLeave = () => {
+        setHovered(false);
+    };
+
+    return (
+        <div className={styles.boardMember} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}
+             onClick={onClick}>
+            <div className={styles.boardImageContainer}>
+                <div className={styles.boardCard} />
+                <img className={styles.boardMemberImage} src={boardMemberProps.imageSrc} alt={boardMemberProps.name} loading="lazy" />
+            </div>
+            <text className={styles.boardMemberName}>{boardMemberProps.name}</text>
+            <text className={styles.boardMemberRole}>{boardMemberProps.role}</text>
+        </div>
+    );
+}
+
+function Team({ teamProps, onClick }: { teamProps: TeamProps, onClick: MouseEventHandler<HTMLDivElement> }) {
+    return (
+        <div className={styles.team} onClick={onClick}>
+            <img className={styles.teamRespImage} src={teamProps.imageSrc} alt={teamProps.imageSrc} />
+            <div className={styles.teamTextBox}>
+                <text className={styles.peopleOf}>people of</text>
+                <text className={styles.teamArea}>{teamProps.area}</text>
+                <text className={styles.teamDescription}>{teamProps.description}</text>
+            </div>
+        </div>
+    )
+}
+
+function TeamPopUp({ index, visible, disablePopUp }: { index: number, visible: Boolean, disablePopUp: MouseEventHandler<HTMLDivElement> }) {
+    const team = Teams[index];
+    return (
+        <div className={styles.popUpBackground} onClick={disablePopUp} style={{ visibility: visible ? 'visible' : 'hidden' }}>
+            <div className={styles.teamPopUp}>
+                <div className={styles.teamHeader}>
+                    <div className={styles.teamHeaderLeft}>
+                        <div className={styles.managerPopUpImageContainer}>
+                            <img className={styles.managerImage} alt={`Coordinators of ${team.area} area`} src={team.imageSrc} width={'100px'} height={'100px'} />
+                        </div>
+                        <div className={styles.managerName}>{team.managers[0].name + (team.managers.length > 1 ? ' &' : '')}</div>
+                        {team.managers.length > 1 && <div className={styles.managerName}>{team.managers[1].name}</div>}
+                        <h6 className={styles.managerTitle}>Area manager{team.managers.length > 1 ? 's' : ''}</h6>
+                        {team.managers.map(manager =>
+                            {return (manager.linkedIn ?
+                                    <div className={styles.linkIcon}>
+                                        <a className={styles.linkIcon} href={manager.linkedIn}>
+                                            <img className={styles.linkIcon__icon} src={"/Icons/linkedin_logo_blue.png"} alt="LinkedIn Icon"/>
+                                        </a>
+                                    </div>
+                                    :
+                                    <></>
+                            )}
+                        )}
+                    </div>
+                    <div className={styles.teamHeaderRight}>
+                        <h2 className={styles.teamPopUp__Title}>We are {team.area}</h2>
+                        <text className={styles.teamPopUp__Description}>{team.description}</text>
+                    </div>
+                </div>
+                <div className={styles.teamBody}>
+                    {
+                        team.members.map((member: TeamMemberProps) =>
+                            <TeamMember key={member.name} member={member} />
+                        )
+                    }
+                </div>
+            </div>
+        </div>
+    )
+}
+
+function TeamMember({ member } : {member : TeamMemberProps}) {
+    const [imageExists, setImageExists] = useState(false);
+
+    useEffect(() => {
+        const img = new Image();
+        img.src = member.imageSrc || "";
+        img.onload = () => setImageExists(true);
+    }, []);
+
+    return (
+        <div className={styles.teamMember}>
+            <div className={styles.memberPopUpImageContainer}>
+                <img className={styles.memberPopUpImage} src={imageExists ? member.imageSrc : '/Icons/person.svg'} alt={member.name} loading="lazy" />
+            </div>
+            <h5 className={styles.memberName}>{member.name}</h5>
+            <h6 className={styles.memberTitle}>MEMBER</h6>
+            {member.linkedIn &&
+                <div className={styles.linkIcon}>
+                    <a className={styles.linkIcon} href={member.linkedIn}>
+                        <img className={styles.linkIcon__icon} src={"/Icons/linkedin_logo_blue.png"} alt="LinkedIn Icon"/>
+                    </a>
+                </div>
+            }
+        </div>
+    );
+}
+
+export interface TeamMemberProps {
+    name: string,
+    imageSrc?: string,
+    linkedIn?: string,
+}
+
+export interface BoardMemberProps {
+    name: string;
+    role: string;
+    imageSrc: string;
+    linkedIn?: string;
+    roleDescription: string;
+}
+
+export interface TeamProps {
+    area: string;
+    longName: string;
+    description: string;
+    imageSrc: string;
+    managers: TeamMemberProps[];
+    members: TeamMemberProps[];
+}
diff --git a/pages/People.tsx b/pages/People/People.tsx
similarity index 97%
rename from pages/People.tsx
rename to pages/People/People.tsx
index ba9910d..1d96cd0 100755
--- a/pages/People.tsx
+++ b/pages/People/People.tsx
@@ -1,4 +1,4 @@
-import Layout from "../components/Layout";
+import Layout from "../../components/Layout";
 import styles from '@/styles/People/People.module.scss'
 import RoundButton from "@/components/molecules/RoundButton";
 import { useRouter } from "next/router";
diff --git a/styles/Activities/Activities.module.scss b/styles/Activities/Activities.module.scss
index d18c2a4..1887265 100755
--- a/styles/Activities/Activities.module.scss
+++ b/styles/Activities/Activities.module.scss
@@ -294,6 +294,13 @@
             text-transform: uppercase;
             background-color: #061E33;
             margin-top: 20px;
+            color: #F2F2F2;
+        }
+
+        &__button:hover {
+            background: transparent;
+            border-color: #061E33;
+            color: #061E33;
         }
     }
 
diff --git a/styles/People/Alumni.module.scss b/styles/People/Alumni.module.scss
new file mode 100644
index 0000000..e69de29

From fdc2efc021b642a5c8434e5b42ddc994a3395151 Mon Sep 17 00:00:00 2001
From: Francesco <fbaldini02@gmail.com>
Date: Fri, 17 May 2024 16:52:20 +0200
Subject: [PATCH 2/2] Added alumni card and setup types

---
 pages/AboutUs.tsx                |   3 +-
 pages/People/Alumni.tsx          | 648 +++++++------------------------
 styles/Home/Home.module.css      |   3 +-
 styles/People/Alumni.module.scss |  61 +++
 4 files changed, 215 insertions(+), 500 deletions(-)

diff --git a/pages/AboutUs.tsx b/pages/AboutUs.tsx
index 3681646..749e944 100755
--- a/pages/AboutUs.tsx
+++ b/pages/AboutUs.tsx
@@ -26,10 +26,11 @@ const sections: SectionAboutUsElement[] = [
     {
         title: "Mu Nu Chapter - Today",
         description: "Today, the Mu Nu chapter of IEEE-HKN at the Polytechnic University of Turin is a vibrant reality carried forward by an ever-growing group of students passionate about computer science, electronics, and much more. For us, HKN represents a new way to acquire skills and knowledge while at the same time nurturing our passions in an inspiring and stimulating environment.",
-        year: "2023",
+        year: new Date().getFullYear().toString(),
     },
 
 ]
+
 export default function AboutUs() {
     const sectionsRef = useRef<HTMLDivElement>(null);
     const [svgWidth, setSvgWidth] = useState(0);
diff --git a/pages/People/Alumni.tsx b/pages/People/Alumni.tsx
index 68862dc..d99704b 100644
--- a/pages/People/Alumni.tsx
+++ b/pages/People/Alumni.tsx
@@ -1,596 +1,248 @@
 import Layout from "../../components/Layout";
-import styles from '@/styles/People/People.module.scss'
+import styles from '@/styles/People/Alumni.module.scss'
 import RoundButton from "@/components/molecules/RoundButton";
 import { useRouter } from "next/router";
 import {MouseEventHandler, useEffect, useState} from "react";
 import ArrowButton from "@/components/molecules/ArrowButton";
 
+enum BadgeType {
+    Head,
+    Board,
+    Inducted
+}
+
 // Images should be in a 4:5 ratio
-const Board: BoardMemberProps[] = [
+const AlumniData : AlumnoProps[] = [
     {
         name: "Gustavo Nicoletti",
-        role: "Recording Secretary",
         imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
         linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
-        roleDescription: "Edoardo is a 3rd year Computer Science student at the University of Bristol. He is the President of the Bristol University Italian Society and the founder of the Bristol U",
-    },
-    {
-        name: "Serena Canavero",
-        role: "President",
-        imageSrc: "/People/Board/Serena Canavero.png",
-        linkedIn: "https://www.linkedin.com/in/serenacanavero/",
-        roleDescription: "Edoardo is a 3rd year Computer Science student at the University of Bristol. He is the President of the Bristol University Italian Society and the founder of the Bristol U",
-    },
-    {
-        name: "Francesco Anzoino",
-        role: "Treasurer",
-        imageSrc: "/People/Board/Francesco Anzoino.png",
-        linkedIn: "",
-        roleDescription: "Edoardo is a 3rd year Computer Science student at the University of Bristol. He is the President of the Bristol University Italian Society and the founder of the Bristol U",
-    },
-    {
-        name: "Claudio Fantasia",
-        role: "Vice President",
-        imageSrc: "/People/Board/Claudio Fantasia.png",
-        linkedIn: "https://www.linkedin.com/in/claudio-fantasia-120560224/",
-        roleDescription: "Edoardo is a 3rd year Computer Science student at the University of Bristol. He is the President of the Bristol University Italian Society and the founder of the Bristol U",
-    },
-    {
-        name: "Dario Gosmar",
-        role: "Web Correspondent",
-        imageSrc: "/People/Board/Dario Gosmar.png",
-        linkedIn: "https://www.linkedin.com/in/dario-gosmar/",
-        roleDescription: "Edoardo is a 3rd year Computer Science student at the University of Bristol. He is the President of the Bristol University Italian Society and the founder of the Bristol U",
-    },
-    {
-        name: "Alberto Castrignanò",
-        role: "Corresponding Secretary",
-        imageSrc: "/People/Board/Alberto Castrignano.png",
-        linkedIn: "https://www.linkedin.com/in/albertocastrignano2/",
-        roleDescription: "Edoardo is a 3rd year Computer Science student at the University of Bristol. He is the President of the Bristol University Italian Society and the founder of the Bristol U",
+        badges: [
+        {
+            type: BadgeType.Head,
+            year: 2021,
+            role: "Head of Communications"
+        },
+        {
+            type: BadgeType.Board,
+            year: 2020,
+            role: "Vice President"
+        },
+        {
+            type: BadgeType.Inducted,
+            year: 2019,
+            role: "Member of Comms"
+        }
+            ]
     },
-];
-
-// Images work well in a 3:5 ratio
-const Teams: TeamProps[] = [
     {
-        area: "Comms",
-        longName: "Communications",
-        description: "Informing, engaging, motivating and creating: we constitute the link between the chapter and the student community",
-        imageSrc: "/People/Resp/resp-comms.png",
-        managers: [
-            {
-                name: "Dario Gosmar",
-                imageSrc: "/People/Areas/Comms/Dario Gosmar.png",
-            }
-        ],
-        members: [
-            {
-                name: "Alessia Scardi",
-                imageSrc: "/People/Areas/Comms/Alessia Scardi.png",
-            },
-            {
-                name: "Riccardo Alfonso Cerrone",
-                imageSrc: "/People/Areas/Comms/Riccardo Alfonso Cerrone.png",
-            },
-            {
-                name: "Vittoria Drago",
-                imageSrc: "/People/Areas/Comms/Vittoria Drago.png",
-            },
-            {
-                name: "Antonio Capece",
-                imageSrc: "/People/Areas/Comms/Antonio Capece.png",
-            },
-            {
-                name: "Francesco Di Stefano",
-                imageSrc: "/People/Areas/Comms/Francesco Di Stefano.png",
-            },
-            {
-                name: "Lorenzo Fezza",
-                imageSrc: "/People/Areas/Comms/Lorenzo Fezza.png",
-            },
-            {
-                name: "Marco Rosa Gobbo",
-                imageSrc: "/People/Areas/Comms/Marco Rosa Gobbo.png",
-            },
+        name: "Gustavo Nicoletti",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        badges: [
             {
-                name: "Lucrezia Marcovaldi",
-                imageSrc: "/People/Areas/Comms/Lucrezia Marcovaldi.png",
+                type: BadgeType.Head,
+                year: 2021,
+                role: "Head of Communications"
             },
             {
-                name: "Alex Martinelli",
-                imageSrc: "/People/Areas/Comms/Alex Martinelli.png",
+                type: BadgeType.Board,
+                year: 2020,
+                role: "Vice President"
             },
             {
-                name: "Andrea Minardi",
-                imageSrc: "/People/Areas/Comms/Andrea Minardi.png",
-            },
-
+                type: BadgeType.Inducted,
+                year: 2019,
+                role: "Member of Comms"
+            }
         ]
     },
     {
-        area: "HR",
-        longName: "Human Resources",
-        description: "Networking is our keyword: we manage the recruitment and organize any event/activity regarding the chapter",
-        imageSrc: "/People/Resp/resp-hr.png",
-        managers: [
-            {
-                name: "Francesca Portadibasso",
-                imageSrc: "/People/Areas/HR/Francesca Portadibasso.png",
-            },
-            {
-                name: "Luca Filippetti",
-                imageSrc: "/People/Areas/HR/Luca Filippetti.png",
-            }
-        ],
-        members: [
-            {
-                name: "Edoardo Demichelis",
-                imageSrc: "/People/Areas/HR/Edoardo Demichelis.png",
-            },
-            {
-                name: "Renata De Gennaro",
-                imageSrc: "/People/Areas/HR/Renata De Gennaro.png",
-            },
-            {
-                name: "Giacomo Maino",
-                imageSrc: "/People/Areas/HR/Giacomo Maino.png",
-            },
-            {
-                name: "Rosario Francesco Cavelli",
-                imageSrc: "/People/Areas/HR/Rosario Francesco Cavelli.png",
-            },
-            {
-                name: "Stefano Cerutti",
-                imageSrc: "/People/Areas/HR/Stefano Cerutti.png",
-            },
-            {
-                name: "Edoardo Colella",
-                imageSrc: "/People/Areas/HR/Edoardo Colella.png",
-            },
-            {
-                name: "Marco Del Core",
-                imageSrc: "/People/Areas/HR/Marco Del Core.png",
-            },
+        name: "Gustavo Nicoletti",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        badges: [
             {
-                name: "Alessandro Gasbarri",
-                imageSrc: "/People/Areas/HR/Alessandro Gasbarri.png",
+                type: BadgeType.Head,
+                year: 2021,
+                role: "Head of Communications"
             },
             {
-                name: "Kaliroi Mignone",
-                imageSrc: "/People/Areas/HR/Kaliroi Mignone.png",
+                type: BadgeType.Board,
+                year: 2020,
+                role: "Vice President"
             },
             {
-                name: "Andrea Pignata",
-                imageSrc: "/People/Areas/HR/Andrea Pignata.png",
-            },
+                type: BadgeType.Inducted,
+                year: 2019,
+                role: "Member of Comms"
+            }
         ]
     },
     {
-        area: "Corporate Training",
-        longName: "Corporate Training",
-        description: "We are responsible for the talks and the workshops that constitute the interfaces with the professionals  ",
-        imageSrc: "/People/Resp/resp-fi.png",
-        managers: [
-            {
-                name: "Elena Favero",
-                imageSrc: "/People/Areas/Corporate Training/Elena Favero.png",
-            }
-        ],
-        members: [
-            {
-                name: "Benedetta Perrone",
-                imageSrc: "/People/Areas/Corporate Training/Benedetta Perrone.png",
-            },
-            {
-                name: "Lorenzo Barbati",
-                imageSrc: "/People/Areas/Corporate Training/Lorenzo Barbati.png",
-            },
-            {
-                name: "Riccardo Bracciale",
-                imageSrc: "/People/Areas/Corporate Training/Riccardo Bracciale.png",
-            },
-            {
-                name: "Ismaele Bahti",
-                imageSrc: "/People/Areas/Corporate Training/Ismaele Bahati.png",
-            },
-            {
-                name: "Marco Canavero",
-                imageSrc: "/People/Areas/Corporate Training/Marco Canavero.png",
-            },
-            {
-                name: "Marco D'Andria",
-                imageSrc: "/People/Areas/Corporate Training/Marco Dandria.png",
-            },
-            {
-                name: "Arber Kryeziu",
-                imageSrc: "/People/Areas/Corporate Training/Arber Kryeziu.png",
-            },
-            {
-                name: "Vittorio Macripò",
-                imageSrc: "/People/Areas/Corporate Training/Vittorio Macripò.png",
-            },
-            {
-                name: "Stefano Negri Merlo",
-                imageSrc: "/People/Areas/Corporate Training/Stefano Negri Merlo.png",
-            },
+        name: "Gustavo Nicoletti",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        badges: [
             {
-                name: "Gustavo Ramirez",
-                imageSrc: "/People/Areas/Corporate Training/Gustavo Ramirez.png",
+                type: BadgeType.Head,
+                year: 2021,
+                role: "Head of Communications"
             },
             {
-                name: "Sofia Russo",
-                imageSrc: "/People/Areas/Corporate Training/Sofia Russo.png",
+                type: BadgeType.Board,
+                year: 2020,
+                role: "Vice President"
             },
             {
-                name: "Paolo Molino",
-                imageSrc: "/People/Areas/Corporate Training/Paolo Molino.png",
-            },
-
+                type: BadgeType.Inducted,
+                year: 2019,
+                role: "Member of Comms"
+            }
         ]
     },
     {
-        area: "Tutoring",
-        longName: "Tutoring",
-        description: "We put at the first place the networking between the students, organizing masterclasses and study groups open to everyone who wants to join",
-        imageSrc: "/People/Resp/resp-tutoring.png",
-        managers: [
-            {
-                name: "Orlando Zaccaria",
-                imageSrc: "/People/Areas/Tutoring/Orlando Zaccaria.png",
-            }
-        ],
-        members: [
-            {
-                name: "Eduard Antonovic Occhipinti",
-                imageSrc: "/People/Areas/Tutoring/Eduard Antonovic Occhipinti.png",
-            },
-            {
-                name: "Erik Scolaro",
-                imageSrc: "/People/Areas/Tutoring/Erik Scolaro.png",
-            },
-            {
-                name: "Jad Sarkis",
-                imageSrc: "/People/Areas/Tutoring/Jad Sarkis.png",
-            },
-            {
-                name: "Sabina Sarcuni",
-                imageSrc: "/People/Areas/Tutoring/Sabina Sarcuni.png",
-            },
-            {
-                name: "Lorenza Bonfanti Posta",
-                imageSrc: "/People/Areas/Tutoring/Lorenza Bonfanti Posta.png",
-            },
-            {
-                name: "Alessia De Crescenzo",
-                imageSrc: "/People/Areas/Tutoring/Alessia De Crescenzo.png",
-            },
+        name: "Gustavo Nicoletti",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        badges: [
             {
-                name: "Leonardo Gallina",
-                imageSrc: "/People/Areas/Tutoring/Leonardo Gallina.png",
+                type: BadgeType.Head,
+                year: 2021,
+                role: "Head of Communications"
             },
             {
-                name: "Mattia Molinari",
-                imageSrc: "/People/Areas/Tutoring/Mattia Molinari.png",
+                type: BadgeType.Board,
+                year: 2020,
+                role: "Vice President"
             },
             {
-                name: "Marco Donnarumma",
-                imageSrc: "/People/Areas/Tutoring/Marco Donnarumma.png",
-            },
+                type: BadgeType.Inducted,
+                year: 2019,
+                role: "Member of Comms"
+            }
         ]
     },
     {
-        area: "Events",
-        longName: "Events",
-        description: "We organize hackathons & competitions related to the areas of interest of the students community",
-        imageSrc: "/People/Resp/resp-eventi.png",
-        managers: [
-            {
-                name: "Sebastiano Guzzone",
-                imageSrc: "/People/Areas/Events/Sebastiano Guzzone.png",
-            }
-        ],
-        members: [
-            {
-                name: "Alessio Melone",
-                imageSrc: "/People/Areas/Events/Alessio Melone.png",
-            },
-            {
-                name: "Elisa Misuri",
-                imageSrc: "/People/Areas/Events/Elisa Misuri.png",
-            },
-            {
-                name: "Nicolo Benso",
-                imageSrc: "/People/Areas/Events/Nicolo Benso.png",
-            },
-            {
-                name: "Davide Arcolini",
-                imageSrc: "/People/Areas/Events/Davide Arcolini.png",
-            },
-            {
-                name: "Daniele De Rossi",
-                imageSrc: "/People/Areas/Events/Daniele De Rossi.png",
-            },
-            {
-                name: "Freddy Dongue Dongmo Yann",
-                imageSrc: "/People/Areas/Events/Freddy Dongue Dongmo Yann.png",
-            },
-            {
-                name: "Francesca Fusco",
-                imageSrc: "/People/Areas/Events/Francesco Fusco.png",
-            },
-            {
-                name: "Gabriele Iurlaro",
-                imageSrc: "/People/Areas/Events/Gabriele Iurlaro.png",
-            },
-            {
-                name: "Raffaele Negri",
-                imageSrc: "/People/Areas/Events/Raffaele Negri.png",
-            },
+        name: "Gustavo Nicoletti",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        badges: [
             {
-                name: "Mina Nikolova",
-                imageSrc: "/People/Areas/Events/Mina Nikolova.png",
+                type: BadgeType.Head,
+                year: 2021,
+                role: "Head of Communications"
             },
             {
-                name: "Marco Pascarella",
-                imageSrc: "/People/Areas/Events/Marco Pascarella.png",
+                type: BadgeType.Board,
+                year: 2020,
+                role: "Vice President"
             },
             {
-                name: "Stefano Ravera",
-                imageSrc: "/People/Areas/Events/Stefano Ravera.png",
-            },
+                type: BadgeType.Inducted,
+                year: 2019,
+                role: "Member of Comms"
+            }
         ]
     },
     {
-        area: "IT",
-        longName: "IT",
-        description: "We manage IT-related projects for the chapter, such as our own website or the recruitment software",
-        imageSrc: "/People/Resp/resp-it.png",
-        managers: [
-            {
-                name: "Alberto Baroso",
-                imageSrc: "/People/Areas/IT/Alberto Baroso.png",
-            },
-            {
-                name: "Francesco Baldini",
-                imageSrc: "/People/Areas/IT/Francesco Baldini.png",
-            }
-        ],
-        members: [
-            {
-                name: "Alessio Menichinelli",
-                imageSrc: "/People/Areas/IT/Alessio Menichinelli.png",
-            },
-            {
-                name: "Filippo Goffredo",
-                imageSrc: "/People/Areas/IT/Filippo Goffredo.png",
-            },
-            {
-                name: "Isabella Lombardi",
-                imageSrc: "/People/Areas/IT/Isabella Lombardi.png",
-            },
-            {
-                name: "Massimo Aresca",
-                imageSrc: "/People/Areas/IT/Massimo Aresca.png",
-            },
+        name: "Gustavo Nicoletti",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        badges: [
             {
-                name: "Pasquale Bianco",
-                imageSrc: "/People/Areas/IT/Pasquale Bianco.png",
+                type: BadgeType.Head,
+                year: 2021,
+                role: "Head of Communications"
             },
             {
-                name: "Damiano Bonaccorsi",
-                imageSrc: "/People/Areas/IT/Damiano Bonaccorsi.png",
+                type: BadgeType.Board,
+                year: 2020,
+                role: "Vice President"
             },
             {
-                name: "Marco De Luca",
-                imageSrc: "/People/Areas/IT/Marco De Luca.png",
-            },
+                type: BadgeType.Inducted,
+                year: 2019,
+                role: "Member of Comms"
+            }
+        ]
+    },
+    {
+        name: "Gustavo Nicoletti",
+        imageSrc: "/People/Board/Gustavo Nicoletti Rosa.png",
+        linkedIn: "https://www.linkedin.com/in/gustavo-nicoletti-rosa/",
+        badges: [
             {
-                name: "Elti Gjiriti",
-                imageSrc: "/People/Areas/IT/Elti Gjiriti.png",
+                type: BadgeType.Head,
+                year: 2021,
+                role: "Head of Communications"
             },
             {
-                name: "Matteo Mugnai",
-                imageSrc: "/People/Areas/IT/Matteo Mugnai.png",
+                type: BadgeType.Board,
+                year: 2020,
+                role: "Vice President"
             },
             {
-                name: "Marco Pappalardo",
-                imageSrc: "/People/Areas/IT/Marco Pappalardo.png",
+                type: BadgeType.Inducted,
+                year: 2019,
+                role: "Member of Comms"
             }
         ]
     },
 ];
 
-export default function People() {
+export default function Alumni() {
     const router = useRouter();
-    const [boardIndex, setBoardIndex] = useState(0);
-    const [teamIndex, setTeamIndex] = useState(0);
-    const [boardPopUpVisible, setBoardPopUpVisible] = useState(false);
-    const [teamPopUpVisible, setTeamPopUpVisible] = useState(false);
-
-    const handleBoardMemberClick = (index: number) => {
-        setBoardIndex(index);
-        setBoardPopUpVisible(true);
-    }
-
-    const handleTeamMemberClick = (index: number) => {
-        setTeamIndex(index);
-        setTeamPopUpVisible(true);
-        document.body.style.overflow = 'hidden';
-    }
-
-    const handleHideBoardPopUp = () => {
-        setBoardPopUpVisible(false);
-    }
-
-    const handleHideTeamPopUp = () => {
-        setTeamPopUpVisible(false);
-        document.body.style.overflow = 'auto';
-    }
 
     return (
         <Layout triangles>
-            {/*<BoardPopUp index={boardIndex} visible={false} disablePopUp={handleHideBoardPopUp}/>*/}
-            <div className={styles.boardContainer}>
-                <text className={styles.theBoard}>THE BOARD</text>
-                <text className={styles.managementArea}>Management Area</text>
-                <div className={styles.boardGrid}>
-                    {Board.map((bmp, index) => (
-                        <BoardMember boardMemberProps={bmp} index={index} key={index}
-                                     onClick={() => handleBoardMemberClick(index)} />
-                    ))}
+
+            <div className={styles.descriptionContainer}>
+                <img className={styles.descriptionContainer__image} src="/Home/vision.jpg" alt="Vision"/>
+                <div className={styles.descriptionContainer__right}>
+                    <text className={styles.descriptionContainer__right__title}>Alumni</text>
+                    <text className={styles.descriptionContainer__right__subtitle}>ETA KAPPA MENTORING</text>
+                    <text className={styles.descriptionContainer__right__text}>Since 2017 we are dedicated to encouraging excellence in the IEEE-designated fields of interest, continuing to reinvent ourselves to meet the needs of our members and society overall</text>
                 </div>
             </div>
 
-            <TeamPopUp index={teamIndex} visible={teamPopUpVisible} disablePopUp={handleHideTeamPopUp} />
-            <div className={styles.teamsContainer}>
-                <text className={styles.theTeams}>THE TEAMS</text>
-                <text className={styles.joinOurTeams}>Our Teams</text>
-                <div className={styles.teamsGrid}>
-                    {Teams.map((team, index) => (
-                        <Team teamProps={team} key={team.area} onClick={() => handleTeamMemberClick(index)} />
+            <div className={styles.alumniContainer}>
+                <text className={styles.alumniContainer__directory}>Directory</text>
+                <text className={styles.alumniContainer__alumni}>Alumni</text>
+                <div className={styles.alumniContainer__grid}>
+                    {AlumniData.map((al, index) => (
+                        <Alumno alumno={al} key={index} />
                     ))}
                 </div>
             </div>
 
-            <div className={styles.discover}>
-                <div className={styles.discover__coming}>coming soon</div>
-                <div className={styles.discover__title}>discover</div>
-                <div className={styles.discover__title}>past boards and alumni</div>
-            </div>
         </Layout>
     )
 }
 
-function BoardMember({ boardMemberProps, index, onClick }: {
-    boardMemberProps: BoardMemberProps,
-    index: number,
-    onClick: MouseEventHandler<HTMLDivElement>
+function Alumno({ alumno }: {
+    alumno: AlumnoProps,
 }) {
-    const [isHovered, setHovered] = useState(false);
-
-    const handleMouseEnter = () => {
-        setHovered(true);
-    };
-
-    const handleMouseLeave = () => {
-        setHovered(false);
-    };
-
     return (
-        <div className={styles.boardMember} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}
-             onClick={onClick}>
+        <div className={styles.boardMember} onClick={() => {}}>
             <div className={styles.boardImageContainer}>
                 <div className={styles.boardCard} />
-                <img className={styles.boardMemberImage} src={boardMemberProps.imageSrc} alt={boardMemberProps.name} loading="lazy" />
+                <img className={styles.boardMemberImage} src={alumno.imageSrc} alt={alumno.name} loading="lazy" />
             </div>
-            <text className={styles.boardMemberName}>{boardMemberProps.name}</text>
-            <text className={styles.boardMemberRole}>{boardMemberProps.role}</text>
+            <text className={styles.boardMemberName}>{alumno.name}</text>
         </div>
     );
 }
 
-function Team({ teamProps, onClick }: { teamProps: TeamProps, onClick: MouseEventHandler<HTMLDivElement> }) {
-    return (
-        <div className={styles.team} onClick={onClick}>
-            <img className={styles.teamRespImage} src={teamProps.imageSrc} alt={teamProps.imageSrc} />
-            <div className={styles.teamTextBox}>
-                <text className={styles.peopleOf}>people of</text>
-                <text className={styles.teamArea}>{teamProps.area}</text>
-                <text className={styles.teamDescription}>{teamProps.description}</text>
-            </div>
-        </div>
-    )
-}
-
-function TeamPopUp({ index, visible, disablePopUp }: { index: number, visible: Boolean, disablePopUp: MouseEventHandler<HTMLDivElement> }) {
-    const team = Teams[index];
-    return (
-        <div className={styles.popUpBackground} onClick={disablePopUp} style={{ visibility: visible ? 'visible' : 'hidden' }}>
-            <div className={styles.teamPopUp}>
-                <div className={styles.teamHeader}>
-                    <div className={styles.teamHeaderLeft}>
-                        <div className={styles.managerPopUpImageContainer}>
-                            <img className={styles.managerImage} alt={`Coordinators of ${team.area} area`} src={team.imageSrc} width={'100px'} height={'100px'} />
-                        </div>
-                        <div className={styles.managerName}>{team.managers[0].name + (team.managers.length > 1 ? ' &' : '')}</div>
-                        {team.managers.length > 1 && <div className={styles.managerName}>{team.managers[1].name}</div>}
-                        <h6 className={styles.managerTitle}>Area manager{team.managers.length > 1 ? 's' : ''}</h6>
-                        {team.managers.map(manager =>
-                            {return (manager.linkedIn ?
-                                    <div className={styles.linkIcon}>
-                                        <a className={styles.linkIcon} href={manager.linkedIn}>
-                                            <img className={styles.linkIcon__icon} src={"/Icons/linkedin_logo_blue.png"} alt="LinkedIn Icon"/>
-                                        </a>
-                                    </div>
-                                    :
-                                    <></>
-                            )}
-                        )}
-                    </div>
-                    <div className={styles.teamHeaderRight}>
-                        <h2 className={styles.teamPopUp__Title}>We are {team.area}</h2>
-                        <text className={styles.teamPopUp__Description}>{team.description}</text>
-                    </div>
-                </div>
-                <div className={styles.teamBody}>
-                    {
-                        team.members.map((member: TeamMemberProps) =>
-                            <TeamMember key={member.name} member={member} />
-                        )
-                    }
-                </div>
-            </div>
-        </div>
-    )
-}
-
-function TeamMember({ member } : {member : TeamMemberProps}) {
-    const [imageExists, setImageExists] = useState(false);
-
-    useEffect(() => {
-        const img = new Image();
-        img.src = member.imageSrc || "";
-        img.onload = () => setImageExists(true);
-    }, []);
-
-    return (
-        <div className={styles.teamMember}>
-            <div className={styles.memberPopUpImageContainer}>
-                <img className={styles.memberPopUpImage} src={imageExists ? member.imageSrc : '/Icons/person.svg'} alt={member.name} loading="lazy" />
-            </div>
-            <h5 className={styles.memberName}>{member.name}</h5>
-            <h6 className={styles.memberTitle}>MEMBER</h6>
-            {member.linkedIn &&
-                <div className={styles.linkIcon}>
-                    <a className={styles.linkIcon} href={member.linkedIn}>
-                        <img className={styles.linkIcon__icon} src={"/Icons/linkedin_logo_blue.png"} alt="LinkedIn Icon"/>
-                    </a>
-                </div>
-            }
-        </div>
-    );
-}
-
-export interface TeamMemberProps {
+export interface AlumnoProps {
     name: string,
     imageSrc?: string,
     linkedIn?: string,
+    badges?: Badge[],
 }
 
-export interface BoardMemberProps {
-    name: string;
-    role: string;
-    imageSrc: string;
-    linkedIn?: string;
-    roleDescription: string;
-}
-
-export interface TeamProps {
-    area: string;
-    longName: string;
-    description: string;
-    imageSrc: string;
-    managers: TeamMemberProps[];
-    members: TeamMemberProps[];
+interface Badge {
+    type: BadgeType,
+    year: number,
+    role: string,
 }
diff --git a/styles/Home/Home.module.css b/styles/Home/Home.module.css
index 3b9a79d..4ba98f2 100755
--- a/styles/Home/Home.module.css
+++ b/styles/Home/Home.module.css
@@ -35,7 +35,8 @@
 .vision, .origins, .project {
     font-weight: 400;
     font-size: 24px;
-    margin: 15px 0 35px 0;
+    margin: 0 0 35px 0;
+    padding-top: 30px;
 }
 
 .titleButtons,.visionButtons {
diff --git a/styles/People/Alumni.module.scss b/styles/People/Alumni.module.scss
index e69de29..fac8e9c 100644
--- a/styles/People/Alumni.module.scss
+++ b/styles/People/Alumni.module.scss
@@ -0,0 +1,61 @@
+.descriptionContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  width: 85%;
+  max-width: 1450px;
+  margin-top: 50px;
+  overflow: hidden;
+
+  &__image {
+    margin: 0 3vw;
+    object-fit: cover;
+    width: 45%;
+    height: 400px;
+    border-radius: 20px;
+
+    @media (max-width: 800px) {
+      display: none;
+    }
+  }
+
+  &__right {
+    display: flex;
+    margin: 0 1vw;
+    flex-direction: column;
+
+    &__title {
+      font-weight: 600;
+      font-size: 63px;
+      line-height: 63px;
+
+      @media (max-width: 550px) {
+        font-size: 50px;
+        line-height: 50px;
+      }
+    }
+
+    &__subtitle {
+      font-weight: 500;
+      font-size: 23px;
+
+      @media (max-width: 550px) {
+        font-size: 19px;
+      }
+    }
+
+    &__text {
+      font-weight: 300;
+      font-size: 24px;
+      margin: 0 0 35px 0;
+      padding-top: 30px;
+
+      @media (max-width: 550px) {
+        font-size: 17px;
+        padding-top: 10px;
+      }
+    }
+
+  }
+}