feats/people

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;

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
+export default PeoplePage;