Finished Boards component + redid some aspects of Board

src/components/board/Board.tsx

@@ -1,21 +1,27 @@
-import Image, { StaticImageData } from "next/image";
+import Image from "next/image";
 
 const Board = (props: {
- photo: StaticImageData;
+ photo: string;
  name: string;
  position: string;
+ width: number;
+ height: number;
 }) => {
  return (
  <div className="relative flex">
  <Image
  className="z-10 flex-col items-center rounded-[1.875rem] border"
  src={props.photo}
  alt="Photo of staff"
+ width={props.width}
+ height={props.height}
  ></Image>
  <Image
  className="absolute inset-[10%] flex-col items-center rounded-[1.875rem] border opacity-20"
  src={props.photo}
  alt=""
+ width={props.width}
+ height={props.height}
  ></Image>
  <div className="absolute inset-x-0 -bottom-[1.95rem] font-archivo-black text-[2.5rem]">
  <p className="relative z-30 flex flex-col items-center text-nowrap">

src/components/board/Boards.tsx

@@ -1,16 +1,18 @@
+import React from "react";
 import Board from "./Board";
 import BoardMembers from "@/data/BoardMembers.json";
-import Example from "@/public/example.webp";
 
 const Boards = () => {
  return (
  <div className="flex flex-row flex-wrap justify-center gap-x-[128px] gap-y-[176px] pb-[300px] pt-[150px]">
  {BoardMembers.map((Member) => (
  <Board
  key={Member.key}
- photo={Example}
+ photo={Member.image}
  name={Member.name}
  position={Member.position}
+ width={348}
+ height={376}
  />
  ))}
  </div>

src/data/BoardMembers.json

@@ -1,74 +1,74 @@
 [
  {
- "image": "@/public/board/richard.webp",
+ "image": "/board/richard.webp",
  "name": "RICHARD ZHOU",
  "position": "PRESIDENT",
  "key": 1
  },
  {
- "image": "@/public/board/gus.webp",
+ "image": "/board/gus.webp",
  "name": "GUS WIENERS",
  "position": "VICE PRESIDENT",
  "key": 2
  },
  {
- "image": "@/public/board/hai.webp",
+ "image": "/board/hai.webp",
  "name": "HAI YANG",
  "position": "TREASURER",
  "key": 3
  },
  {
- "image": "@/public/board/alexandria.webp",
+ "image": "/board/alexandria.webp",
  "name": "ALEXANDRIA HERRERA",
  "position": "PR DIRECTOR",
  "key": 4
  },
  {
- "image": "@/public/board/hesleer.webp",
+ "image": "/board/hesleer.webp",
  "name": "HESLEER SILVA",
  "position": "PR OFFICER",
  "key": 5
  },
  {
- "image": "@/public/board/jonathan.webp",
+ "image": "/board/jonathan.webp",
  "name": "JONATHAN DELGADO",
  "position": "PR OFFICER",
  "key": 6
  },
  {
- "image": "@/public/board/ivan.webp",
+ "image": "/board/ivan.webp",
  "name": "IVAN NGUYEN",
  "position": "RBA LIAISON",
  "key": 7
  },
  {
- "image": "@/public/board/alejandro.webp",
+ "image": "/board/alejandro.webp",
  "name": "ALEJANDRO SIERRAS",
  "position": "RBA LIAISON",
  "key": 8
  },
  {
- "image": "@/public/board/elizabeth.webp",
+ "image": "/board/elizabeth.webp",
  "name": "ELIZABETH REYES",
  "position": "SECRETARY",
  "key": 9
  },
  {
- "image": "@/public/eboard/rianxample.webp",
+ "image": "/board/rian.webp",
  "name": "RIAN MCREARY",
- "position": "CO-FIGHT TEAM CAPTAIN",
+ "position": "FIGHT TEAM CAPTAIN",
  "key": 10
  },
  {
- "image": "@/public/board/ulises.webp",
+ "image": "/board/ulises.webp",
  "name": "ULISES CERVANTES",
- "position": "CO-FIGHT TEAM CAPTAIN",
- "key": 10
+ "position": "FIGHT TEAM CAPTAIN",
+ "key": 11
  },
  {
- "image": "@/public/example.webp",
+ "image": "/board/nathan.webp",
  "name": "NATHAN EARWOOD",
  "position": "AUXILIARY STAFF",
- "key": 10
+ "key": 12
  }
 ]