Merge pull request #30 from acm-uic/lk_branch

profile design

frontend/package.json

@@ -17,7 +17,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "^9.1.2",
-    "sass": "^1.78.0"
+    "sass": "^1.78.0",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@types/node": "^20",

frontend/src/components/Navbar.tsx

@@ -56,7 +56,6 @@ export default function Navbar() {
           <li className={router.pathname === '/about' ? styles.active : ''}>
             <Link href="/about">About Us</Link>
           </li>
-
           {/* Conditionally render based on authentication status */}
           {isSignedIn ? (
             <>

frontend/src/pages/profile.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import styles from '../styles/Profile.module.css';
+
+const ProfilePage: React.FC = () => {
+  const savedInsurances = [
+    { id: 1, name: 'Health Insurance' },
+    { id: 2, name: 'Car Insurance' },
+    { id: 3, name: 'Home Insurance' }
+  ];
+
+  const savedServices = [
+    { id: 1, name: 'Plumbing Service' },
+    { id: 2, name: 'Cleaning Service' },
+    { id: 3, name: 'Electrical Service' }
+  ];
+
+  return (
+    <div className={styles.profilePageContainer}>
+      <div className={styles.profileHeader}>
+        <h1 className={styles.profileTitle}>My Profile</h1>
+        <p className={styles.profileDetail}><strong>Full Name:</strong> John Doe</p>
+        <p className={styles.profileDetail}><strong>Email:</strong> [email protected]</p>
+        <p className={styles.profileDetail}><strong>Role:</strong> User</p>
+      </div>
+
+      <div className={styles.section}>
+        <h2 className={styles.sectionTitle}>Saved Insurances</h2>
+        <div className={styles.gridContainer}>
+          {savedInsurances.map((insurance) => (
+            <div className={styles.gridCard} key={insurance.id}>
+              {insurance.name}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className={styles.section}>
+        <h2 className={styles.sectionTitle}>Saved Services</h2>
+        <div className={styles.gridContainer}>
+          {savedServices.map((service) => (
+            <div className={styles.gridCard} key={service.id}>
+              {service.name}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfilePage;

frontend/src/styles/Profile.module.css

@@ -0,0 +1,73 @@
+/* Profile.module.css */
+.profilePageContainer {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .profileHeader {
+    text-align: center;
+    margin-bottom: 40px;
+  }
+
+  .profileTitle {
+    font-size: 2rem;
+    color: #333333;
+    margin-bottom: 10px;
+    font-weight: 600;
+  }
+
+  .profileDetail {
+    font-size: 1rem;
+    color: #666666;
+    margin-bottom: 5px;
+  }
+
+  .profileDetail strong {
+    font-weight: bold;
+  }
+
+  .section {
+    margin-bottom: 40px;
+  }
+
+  .sectionTitle {
+    font-size: 1.5rem;
+    color: #000000;
+    margin-bottom: 20px;
+  }
+
+  .gridContainer {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+  }
+
+  @media (max-width: 768px) {
+    .gridContainer {
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    }
+  }
+
+  @media (max-width: 480px) {
+    .gridContainer {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .gridCard {
+    background-color: #e0f7fa;
+    border-radius: 12px;
+    padding: 20px;
+    font-size: 1.2rem;
+    color: #000000;
+    text-align: center;
+    transition: transform 0.3s, box-shadow 0.3s;
+    cursor: pointer;
+  }
+
+  .gridCard:hover {
+    transform: scale(1.05);
+    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
+  }
+