Merge branch 'dev' of https://github.com/acm-ucr/ewb-website into dev

src/app/board/page.js

@@ -1,5 +1,28 @@
+import { BOARD } from "../../data/mockBoard";
+import Board from "../../components/board/Board";
+import Title from "@/components/Title";
+
 const page = () => {
-  return <div>page</div>;
+  return (
+    <div className="relative w-full flex flex-col items-center mt-14">
+      <div className="absolute w-1/2 aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" />
+      <Title title="MEET THE TEAM" />
+      <div className="relative grid grid-cols-4 w-9/12 gap-8 mt-14">
+        {BOARD.map((item, index) => (
+          <Board
+            key={index}
+            name={item.name}
+            position={item.position}
+            grade={item.grade}
+            major={item.major}
+            links={item.links}
+            pronouns={item.pronouns}
+            picture={item.picture}
+          />
+        ))}
+      </div>
+    </div>
+  );
 };
 
 export default page;

src/components/Title.jsx

@@ -2,7 +2,7 @@ import { COLORS } from "../data/colors";
 const Title = ({ subTitle, title }) => {
   const titleWords = title.split(" ");
   return (
-    <div className="flex flex-col justify-center items-center">
+    <div className="relative flex flex-col justify-center items-center">
       <p className={COLORS.green.text + " font-semibold mb-0"}>{subTitle}</p>
       <p className="mt-0 font-bold text-2xl md:text-3xl">
         <span

src/components/board/Board.jsx

@@ -1,5 +1,30 @@
-const Board = ({ name, position, grade, major, links, pronouns, pictures }) => {
-  return <div>Board</div>;
+import Image from "next/image";
+import Link from "next/link";
+import { ICONS } from "@/data/icons";
+
+const Board = ({ name, position, grade, major, links, pronouns, picture }) => {
+  return (
+    <div className="w-full bg-gray-200 my-4 shadow-[12px_-12px_0px_0px] shadow-ewb-green p-4">
+      <Image src={picture} className="w-full object-cover aspect-square" />
+      <div className="font-semibold text-ewb-blue-200 text-2xl">{name}</div>
+      <div className="font-light text-lg">{position}</div>
+      <div className="flex gap-2">
+        {Object.entries(links).map(([icon, link], index) => (
+          <Link
+            key={index}
+            href={link}
+            className="text-2xl text-ewb-blue-200 hover:text-ewb-green"
+          >
+            {ICONS[icon]}
+          </Link>
+        ))}
+      </div>
+      <div className="font-light text-sm">
+        {grade} {"\u2E31"} {major}
+      </div>
+      <div className="font-light text-lg">Pronous: {pronouns}</div>
+    </div>
+  );
 };
 
 export default Board;

src/data/icons.js

@@ -1,9 +1,15 @@
-import { BsEnvelope, BsFacebook, BsLinkedin } from "react-icons/bs";
+import {
+  BsEnvelope,
+  BsFacebook,
+  BsInstagram,
+  BsLinkedin,
+} from "react-icons/bs";
 import { MdOutlineHandshake } from "react-icons/md";
 
 export const ICONS = {
   email: <BsEnvelope />,
   facebook: <BsFacebook />,
   linkedin: <BsLinkedin />,
   handshake: <MdOutlineHandshake />,
+  instagram: <BsInstagram />,
 };

src/data/mockBoard.js

@@ -1,5 +1,61 @@
-import board from "../../public/images/image 11.png";
+import board from "../../public/images/landing.webp";
 export const BOARD = [
+  {
+    name: "Vinesh Manian",
+    position: "President",
+    links: {},
+    grade: "3rd ",
+    major: "Materials Science and Engineering ",
+    pronouns: "He/Him",
+    picture: board,
+  },
+  {
+    name: "Leslie Kin",
+    position: "Webmaster & Social Media",
+    links: {
+      instagram: "https://www.instagram.com/yukiki.kin/?hl=en",
+    },
+    grade: "2nd Year ",
+    major: "Chemical Engineering",
+    pronouns: "She/Her/Hers",
+    picture: board,
+  },
+  {
+    name: "Evan Littlecat",
+    position: "President",
+    links: {
+      email: "mailto:email@gmail.com",
+      linkedin: "mailto:email@gmail.com",
+    },
+    grade: "Sophmore",
+    major: "Comp Sci",
+    pronouns: "She/Her/Hers",
+    picture: board,
+  },
+  {
+    name: "Evan Littlecat",
+    position: "President",
+    links: {
+      email: "mailto:email@gmail.com",
+      linkedin: "mailto:email@gmail.com",
+    },
+    grade: "Sophmore",
+    major: "Comp Sci",
+    pronouns: "She/Her/Hers",
+    picture: board,
+  },
+  {
+    name: "Evan Littlecat",
+    position: "President",
+    links: {
+      email: "mailto:email@gmail.com",
+      linkedin: "mailto:email@gmail.com",
+    },
+    grade: "Sophmore",
+    major: "Comp Sci",
+    pronouns: "She/Her/Hers",
+    picture: board,
+  },
   {
     name: "Evan Littlecat",
     position: "President",
@@ -8,7 +64,7 @@ export const BOARD = [
       linkedin: "mailto:email@gmail.com",
     },
     grade: "Sophmore",
-    major: "Computer Science",
+    major: "Comp Sci",
     pronouns: "She/Her/Hers",
     picture: board,
   },