add responsiveness

frontend/src/app/projects/project-card/Card.jsx

@@ -0,0 +1,46 @@
+import DeleteIcon from "@/app/components/icons/delete";
+import React from "react";
+import styles from "./styles.module.css";
+
+const Card = () => {
+  return (
+    <div className={styles.cardContainer}>
+      <div className={styles.cardDetails}>
+        <div className={styles.list}>
+          <p>Name</p>
+          <p>DOKS One Cooperative Bank Backend Develop</p>
+        </div>
+        <div className={styles.list}>
+          <p>CPU Used/Limit</p>
+          <p>
+            <span className={styles.used}>13500</span> /{" "}
+            <span className={styles.limit}>20000</span>
+          </p>
+        </div>
+        <div className={styles.list}>
+          <p>Memory Used/Limit</p>
+          <p>
+            <span className={styles.used}>13500</span> /{" "}
+            <span className={styles.limit}>20000</span>
+          </p>
+        </div>
+        <div className={styles.list}>
+          <p>Storage Used/Limit</p>
+          <p>
+            <span className={styles.used}>10000</span> /{" "}
+            <span className={styles.limit}>1000000</span>
+          </p>
+        </div>
+        <div className={styles.list}>
+          <p>Date Created</p>
+          <p>2025-11-07 01:43:18.313 +0000 UTC</p>
+        </div>
+      </div>
+      <div className={styles.cardAction}>
+        <DeleteIcon />
+      </div>
+    </div>
+  );
+};
+
+export default Card;

frontend/src/app/projects/project-card/styles.module.css

@@ -0,0 +1,48 @@
+.cardContainer {
+  display: flex;
+  padding: 16px 0;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2d3d;
+}
+.cardDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 0 0;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  align-self: stretch;
+}
+.list p {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.list p:nth-child(2) {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+}
+.cardAction {
+  display: flex;
+  align-items: center;
+  gap: 17px;
+}
+.used {
+  color: #50d85f;
+}
+.limit {
+  color: #85869b;
+}