Small modifications made

src/app/about/_components/OrganizationList.tsx

@@ -0,0 +1,60 @@
+"use client"
+import PersonCard from "@/app/about/_components/PersonCard"
+import { Organization } from "@/components/shared/hooks/api/useOrganization"
+import { Button } from "@/components/ui/button"
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+import { useState } from "react"
+
+const OrganizationList = ({ group }: { group: Organization }) => {
+	const [showOTs, setShowOTs] = useState(false)
+
+	const handleButtonClick = () => {
+		setShowOTs(prevState => !prevState)
+	}
+
+	const projectGroup = group.people.filter(
+		person =>
+			person.role.toLowerCase().includes("project group") ||
+			person.role.toLowerCase().includes("project manager")
+	)
+	const operationTeam = group.people.filter(person =>
+		person.role.toLowerCase().includes("operation team")
+	)
+
+	return (
+		<div key={group.name} className="mt-16">
+			<h2 className="font-bebas-neue text-3xl">{group.name}</h2>
+			<div className="mt-5 flex flex-wrap items-start justify-center gap-6 md:justify-start">
+				{projectGroup.map(person => (
+					<PersonCard key={person.id} person={person} />
+				))}
+				{showOTs &&
+					operationTeam.map(person => (
+						<PersonCard key={person.id} person={person} />
+					))}
+				<div className="my-20 flex justify-center">
+					{group.name === "Project Manager" ? null : (
+						<Button
+							variant={"secondary"}
+							className="dark:bg-liqorice-700"
+							onClick={handleButtonClick}>
+							{showOTs ? (
+								<>
+									<ArrowLeftIcon className="mr-4 h-4 w-4" />
+									See Less Members
+								</>
+							) : (
+								<>
+									See More Members
+									<ArrowRightIcon className="ml-4 h-4 w-4" />
+								</>
+							)}
+						</Button>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default OrganizationList

src/app/about/_components/TeamUpdateList.tsx → src/app/about/_components/PersonCard.tsx

@@ -4,10 +4,9 @@ import { LinkedinIcon, MailIcon } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 
-const TeamUpdateList = (person: Person) => {
+const PersonCard = ({ person }: { person: Person }) => {
 	return (
 		<>
-			{" "}
 			<div key={person.id} className="w-52">
 				{person.picture == null || person.picture.includes("no-image") ? (
 					<div className="flex aspect-square w-52 flex-1 items-center justify-center">
@@ -51,4 +50,4 @@ const TeamUpdateList = (person: Person) => {
 		</>
 	)
 }
-export default TeamUpdateList
+export default PersonCard

src/app/about/team/page.tsx

@@ -1,4 +1,4 @@
-import TeamUpdate from "@/app/about/_components/TeamUpdate"
+import OrganizationList from "@/app/about/_components/OrganizationList"
 import { Page } from "@/components/shared/Page"
 import { fetchOrganization } from "@/components/shared/hooks/api/useOrganization"
 import { Metadata } from "next"
@@ -21,9 +21,7 @@ export default async function TeamPage() {
 				<Page.Header>Meet the team</Page.Header>
 				<div className="">
 					{organization.map(group => (
-						<>
-							<TeamUpdate name={group.name} people={group.people} />
-						</>
+						<OrganizationList key={group.name} group={group} />
 					))}
 				</div>
 			</Page.Boundary>