From 580a5f86102e57d6c03ff92bd0cd74726ed9d59f Mon Sep 17 00:00:00 2001
From: TheoJustin <theojustinx@gmail.com>
Date: Fri, 23 Aug 2024 12:00:01 +0800
Subject: [PATCH] feats/people

---
 src/ss_frontend/src/components/People.jsx | 18 ++++++
 src/ss_frontend/src/pages/PeoplePage.jsx  | 71 +++++++++++++++++++++--
 2 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 src/ss_frontend/src/components/People.jsx

diff --git a/src/ss_frontend/src/components/People.jsx b/src/ss_frontend/src/components/People.jsx
new file mode 100644
index 0000000..3da7494
--- /dev/null
+++ b/src/ss_frontend/src/components/People.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+const People = ({ name, username, profileUrl, description }) => {
+  return (
+    <div className="bg-white shadow-md rounded-lg p-4 flex flex-col items-center">
+      <img
+        src={profileUrl}
+        alt={`${name}'s profile`}
+        className="w-24 h-24 rounded-full object-cover mb-4"
+      />
+      <h3 className="text-xl font-semibold">{name}</h3>
+      <p className="text-gray-500">@{username}</p>
+      <p className="text-gray-700 text-center mt-2">{description}</p>
+    </div>
+  );
+};
+
+export default People;
diff --git a/src/ss_frontend/src/pages/PeoplePage.jsx b/src/ss_frontend/src/pages/PeoplePage.jsx
index 2a4e1c9..f88fad8 100644
--- a/src/ss_frontend/src/pages/PeoplePage.jsx
+++ b/src/ss_frontend/src/pages/PeoplePage.jsx
@@ -1,9 +1,70 @@
-import React from 'react'
+import React from "react";
+import MainTemplate from "../templates/MainTemplate";
+import profile_1 from "../assets/about/theo.jpg";
+import profile_2 from "../assets/about/ryan.jpg";
+import People from "../components/People";
 
 const PeoplePage = () => {
   return (
-    <div>PeoplePage</div>
-  )
-}
+    <MainTemplate>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 p-4 pt-24">
+        <People
+          name="Theo Justin Amantha"
+          username="theo"
+          profileUrl={profile_1}
+          description="Lead Developer at Sunshine"
+        />
+        <People
+          name="Ryan Ray Wantouw Oei"
+          username="ryan"
+          profileUrl={profile_2}
+          description="Backend Engineer"
+        />
+        <People
+          name="Theo Justin Amantha"
+          username="theo"
+          profileUrl={profile_1}
+          description="Lead Developer at Sunshine"
+        />
+        <People
+          name="Ryan Ray Wantouw Oei"
+          username="ryan"
+          profileUrl={profile_2}
+          description="Backend Engineer"
+        />
+        <People
+          name="Theo Justin Amantha"
+          username="theo"
+          profileUrl={profile_1}
+          description="Lead Developer at Sunshine"
+        />
+        <People
+          name="Ryan Ray Wantouw Oei"
+          username="ryan"
+          profileUrl={profile_2}
+          description="Backend Engineer"
+        />
+        <People
+          name="Theo Justin Amantha"
+          username="theo"
+          profileUrl={profile_1}
+          description="Lead Developer at Sunshine"
+        />
+        <People
+          name="Ryan Ray Wantouw Oei"
+          username="ryan"
+          profileUrl={profile_2}
+          description="Backend Engineer"
+        />
+        <People
+          name="Ryan Ray Wantouw Oei"
+          username="ryan"
+          profileUrl={profile_2}
+          description="Backend Engineer"
+        />
+      </div>
+    </MainTemplate>
+  );
+};
 
-export default PeoplePage
\ No newline at end of file
+export default PeoplePage;