Meet the team 2

frontend/app/team/_components/group.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import ProfileCard from "./profilecard";
+
+interface Profile {
+  name: string;
+  institution: string;
+  imageUrl: string;
+}
+
+interface ProfileGroupProps {
+  title: string;
+  sizing: boolean;
+  members: Profile[];
+}
+
+const ProfileGroup: React.FC<ProfileGroupProps> = ({ title, sizing, members }) => (
+  <div className="border-t border-[#1F202C] pt-16 pb-16">
+    <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white text-center mb-12">
+      {title}
+    </h2>
+
+    <div className="max-w-7xl mx-auto px-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+      {members.map((member, index) => (
+        <ProfileCard
+          key={index}
+          name={member.name}
+          institution={member.institution}
+          imageUrl={member.imageUrl}
+          sizing={sizing}
+        />
+      ))}
+    </div>
+  </div>
+);
+
+export default ProfileGroup;

frontend/app/team/_components/intro.tsx

@@ -0,0 +1,23 @@
+import Image from "next/image";
+
+const Intro: React.FC = () => (
+  <div className="max-w-7xl mx-auto px-4 text-center mt-20 mb-16">
+    <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-8">
+      Meet the <span className="text-[#CBACF9]">Team</span>
+    </h1>
+
+    <Image
+      src="/LNSCP_Team_LF.jpg"
+      alt="Team"
+      width={1728}
+      height={802}
+      className="w-full rounded-3xl shadow-2xl mb-8"
+    />
+
+    <p className="text-lg text-[rgba(255,255,255,0.8)]">
+      LunaSCOPE team members hail from 20 different institutions in the U.S. and around the world, including three minority serving institutions and an HBCU. From undergraduates getting their first research experience to world‑renowned members of the planetary science field, LunaSCOPE is a diverse, dynamic and multidisciplinary collaboration.
+    </p>
+  </div>
+);
+
+export default Intro;

frontend/app/team/_components/profilecard.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Image from "next/image";
+
+interface ProfileCardProps {
+  name: string;
+  institution: string;
+  imageUrl: string;
+  sizing: boolean;
+}
+
+const ProfileCard: React.FC<ProfileCardProps> = ({ name, institution, imageUrl }) => (
+  <div
+    className="
+      bg-[#13162D]             /* same panel background */
+      dark:bg-[#1F202C]        /* fallback if you ever use dark mode */
+      border border-[#1F202C]  /* border matching the panel */
+      rounded-3xl
+      shadow-xl
+      p-6
+      flex flex-col items-center
+      transition-transform duration-300
+      hover:scale-105 hover:shadow-2xl hover:bg-[rgba(255,255,255,0.1)]
+    "
+  >
+    <Image
+      src={imageUrl}
+      alt={name}
+      width={100}
+      height={100}
+      className="w-24 h-24 rounded-full border-2 border-[#1F202C] mb-4 object-cover"
+    />
+
+    <h3 className="text-lg font-semibold text-white">{name}</h3>
+    <p className="text-sm text-[rgba(255,255,255,0.8)]">{institution}</p>
+  </div>
+);
+
+export default ProfileCard;

frontend/app/team/_components/teamdata.tsx

@@ -0,0 +1,257 @@
+export const teamData = [
+    {
+      role: 'Leadership',
+      large: true,
+      members: [
+        {
+          name: 'Alex Evans, PI',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Steve Parman, Deputy PI',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Jack Mustard, Deputy PI',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Ingrid Daubar',
+          institution: 'Public Engagement Liaison',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Daniel Ibarra',
+          institution: 'SSERVI Liaison',
+          imageUrl: '/bronimage.png',
+        },
+      ],
+    },
+    {
+      role: 'Co-Investigators',
+      large: false,
+      members: [
+        {
+          name: 'Santanu Banerjee',
+          institution: 'Tougaloo College',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Karianne Bergen',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Sam Birch',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Charles Boukaré',
+          institution: 'York University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Reid Cooper',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Emily Cooperdock',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+            name: 'Ingrid Daubar',
+            institution: 'Brown University',
+            imageUrl: '/bronimage.png',
+          },
+        {
+          name: 'Kerri Donaldson-Hanna',
+          institution: 'University of Central Florida',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'James Dottin',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Caleb Fassett',
+          institution: 'Johns Hopkins / APL',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Jim Head',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Takahiro Hiroi',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Greg Hirth',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Daniel Ibarra',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+            name: 'Chris Huber',
+            institution: 'Brown University',
+            imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Alexandria Johnson',
+          institution: 'Purdue University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Brandon Johnson',
+          institution: 'Purdue University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'James Tuttle Keane',
+          institution: 'NASA JPL',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Harriet Lau',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Yan Liang',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Ralph Milliken',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'David Minton',
+          institution: 'Purdue University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Daniel Moriarty',
+          institution: 'University of Maryland / NASA Goddard',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'E. Marc Parmentier',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Alberto Saal',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Jason Soderblom',
+          institution: 'MIT',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Carrie Spearin',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Sonia Tikoo',
+          institution: 'Stanford University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'James Tompkin',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Victor Tsai',
+          institution: 'Brown University',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Shijie Zhong',
+          institution: 'University of Colorado',
+          imageUrl: '/bronimage.png',
+        },
+      ],
+    },
+    {
+      role: 'Postdoctoral Fellows',
+      large: false,
+      members: [
+        {
+          name: 'Hairuo Fu',
+          institution: '',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Nandita Kumari',
+          institution: '',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Andrea Rajšić',
+          institution: '',
+          imageUrl: '/bronimage.png',
+        },
+        {
+          name: 'Nick Wagner',
+          institution: '',
+          imageUrl: '/bronimage.png',
+        },
+      ],
+    },
+    {
+        role: 'Graduate Students',
+        large: false,
+        members: [
+          {
+            name: 'Uthkarsh Das',
+            institution: '',
+            imageUrl: '/bronimage.png',
+          },
+          {
+            name: 'Noah Hooper',
+            institution: '',
+            imageUrl: '/bronimage.png',
+          },
+          {
+            name: 'Carol Hundal',
+            institution: '',
+            imageUrl: '/bronimage.png',
+          },
+          {
+            name: 'Wenhao Zhao',
+            institution: '',
+            imageUrl: '/bronimage.png',
+          },
+        ],
+      },
+      {
+        role: 'Support',
+        large: false,
+        members: [
+          {
+            name: 'Julia Lazarus',
+            institution: 'Public Engagement and Workforce Development Associate',
+            imageUrl: '/bronimage.png',
+          },
+        ],
+      },
+  ];

frontend/app/team/page.tsx

@@ -0,0 +1,37 @@
+import Intro from "./_components/intro";
+import ProfileGroup from "./_components/group";
+import { teamData } from "./_components/teamdata";
+
+export default function TeamPage() {
+  return (
+    <main
+      className="
+        relative
+        bg-[#13162D]
+        text-white
+        flex justify-center items-center flex-col
+        overflow-hidden
+        mx-auto sm:px-10 px-5
+      "
+    >
+      <div className="max-w-7xl w-full">
+        <Intro />
+
+        <section id="team" className="w-full py-20">
+          {teamData.map((group) => (
+            <ProfileGroup
+              key={group.role}
+              title={group.role}
+              sizing={group.large}
+              members={group.members}
+            />
+          ))}
+        </section>
+      </div>
+
+      <footer className="w-full py-6 bg-[#13162D] text-[rgba(255,255,255,0.8)] text-center">
+        <p>&copy; 2025 My Website</p>
+      </footer>
+    </main>
+  );
+}