creating Profile

frontend/src/App.js

@@ -6,6 +6,7 @@ import Login from './components/Login/Login';
 import Signup from './components/Signup/Signup';
 import Chats from './components/Chats/Chats';
 import Protected from './components/Protected';
+import Profile from './components/Profile/Profile';
 
 function App() {
 
@@ -16,6 +17,7 @@ function App() {
           <Route path="/login" element={<Login/>} />
           <Route path="/signup" element={<Signup />} />
           <Route path="/" element={<Protected Component={ Chats  }/>} />
+          <Route path="/Profile" element={<Protected Component={ Profile  }/>} />
           <Route path="/home" element={<Home/>} />
         </Routes>
       </Router>

frontend/src/components/Profile/Profile.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import styles from './Profile.module.css'
+
+function Profile() {
+  return (
+    <div className={styles.container}>
+        <div className={styles.profile}>
+            <div className={styles.profileImage}>
+                <img src="https://via.placeholder.com/150" alt="Profile" />
+
+                <button className={styles.uploadBtn}>
+                    <i className="fas fa-camera"></i>
+                </button>
+            </div>
+            <div className={styles.profileDetails}>
+                <h1>John Doe</h1>
+                <p>
+                    <strong>Email:</strong>
+                    <span>
+                        sonukumar@gmail.com
+                    </span>
+                </p>
+                <p>
+                    <strong>Phone:</strong>
+                    <span>
+
+                    </span>
+                </p>
+
+                <p>
+                    <strong>Address:</strong>
+                    <span>
+                        Darbhanga, Bihar - 846004 
+                    </span>
+                </p>
+
+                <p>
+                    <strong>City:</strong>
+                    <span>
+
+                    </span>
+                </p>
+
+                <p>
+
+                    <strong>State:</strong>
+                    <span>
+
+                    </span>
+                </p>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default Profile

frontend/src/components/Profile/Profile.module.css

@@ -0,0 +1,40 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+  padding: 20px;
+  background-color: rgb(243, 248, 248);
+}
+
+.profile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 20px;
+  background-color: white;
+  border-radius: 10px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+}
+
+.profileImage {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  margin-bottom: 20px;
+}
+
+.profileImage img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.profileDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 20px;
+}