Board Member Component

src/app/board/page.tsx

@@ -1,11 +1,18 @@
 import Header from "@/components/Header";
 import Board from "@/components/board/Board";
+import hsa1 from "@/public/assets/hsa1.svg";
+import example from "@/public/assets/toasty.webp";
 
 const Page = () => {
   return (
     <>
       <Header />
-      <Board />
+      <Board
+        position="President"
+        name="Toasty McStuffins"
+        image={example.src}
+        badge={hsa1.src}
+      />
     </>
   );
 };

src/app/page.tsx

@@ -11,7 +11,7 @@ const Home = () => {
       <About />
       <Mission />
       <Do />
-      <Example text1="Adjust" text2="these" text3="Props" />
+      <Example text1="Some" text2="Props" text3="Here" />
     </div>
   );
 };

src/components/board/Board.tsx

@@ -1,5 +1,49 @@
-const Page = () => {
-  return <div>Board Members</div>;
+const Page = (props: {
+  position: string;
+  name: string;
+  image: string;
+  badge: string;
+}) => {
+  return (
+    <div>
+      {" "}
+      Board Members
+      <div className="flex h-full w-full flex-row items-center justify-center gap-20 font-serif">
+        <div className="flex-col">
+          <div className="relative h-64 w-64 rounded-full bg-white object-cover object-center">
+            <img
+              src={props.badge}
+              alt="badge"
+              className="absolute bottom-0 size-16"
+            />
+            <img src={props.image} alt="example" className="w-full" />
+          </div>
+          <div className="p-2 text-center text-xl font-bold">{props.name}</div>
+          <div className="text-center"> {props.position}</div>
+        </div>
+        <div className="flex-col">
+          <div className="relative h-64 w-64 rounded-full bg-white object-cover object-center">
+            <img src={props.badge} alt="badge" className="absolute size-16" />
+            <img src={props.image} alt="example" className="w-full" />
+          </div>
+          <div className="p-2 text-center text-xl font-bold">{props.name}</div>
+          <div className="text-center"> {props.position}</div>
+        </div>
+        <div className="flex-col">
+          <div className="relative h-64 w-64 rounded-full bg-white object-cover object-center">
+            <img
+              src={props.badge}
+              alt="badge"
+              className="absolute end-0 size-16"
+            />
+            <img src={props.image} alt="example" className="w-full" />
+          </div>
+          <div className="p-2 text-center text-xl font-bold"> {props.name}</div>
+          <div className="text-center"> {props.position}</div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default Page;

src/components/example.tsx

@@ -1,12 +1,20 @@
 const Example = (props: { text1: string; text2: string; text3: string }) => {
   return (
-    <div className="flex w-3/4 items-center gap-1 bg-red-200 p-10">
-      <div className="w-1/2 bg-green-200 p-5 text-left">{props.text1}</div>
-      <div className="flex w-1/2 flex-row gap-1">
-        <div className="w-full bg-green-200 p-5 text-left">props.text2</div>
-        <div className="w-full bg-green-200 p-5 text-right">{props.text2}</div>
+    <div className="flex w-2/3 flex-col items-center gap-7 rounded-md bg-red-200 p-10">
+      <div className="flex-center w-1/2 bg-blue-200 p-5 text-center text-lg">
+        {props.text1}
+      </div>
+      <div className="flex w-1/2 flex-row gap-3">
+        <div className="flex-center w-full rounded-full bg-blue-500 p-5 text-center text-lg">
+          {props.text2}
+        </div>
+        <div className="flex-center w-full rounded-full bg-blue-500 p-5 text-center text-lg">
+          {props.text2}
+        </div>
+      </div>
+      <div className="w-1/2 bg-blue-700 p-5 text-center text-lg text-white">
+        {props.text3}
       </div>
-      {/* Hint: Add another box/div here similarly to line 4 */}
     </div>
   );
 };