Merge branch 'dev' of https://github.com/bounswe/bounswe2024group2 in…

…to dev

frontend/src/App.css

@@ -3,8 +3,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  justify-content: flex-start;
 }
 
 

frontend/src/App.js

@@ -15,6 +15,7 @@ import CommunityPage from "./components/community/CommunityPage.js";
 import MarketsPage from "./components/markets/MarketsPage.js";
 import StocksPage from "./components/markets/StocksPage.js";
 import PortfolioPage from "./components/portfolio/PortfolioPage.js";
+import ProfilePage from "./components/profile/ProfilePage.js";
 import NotFound from "./components/notfound/NotFound.js";
 import PostView from "./components/community/PostView.js";
 import CreatePostPage from "./components/community/CreatePostPage.js";
@@ -41,6 +42,7 @@ function App() {
               <Route path="stocks/:indexId" element={<StocksPage />} />
               <Route path="news" element={<NewsPage />} />
               <Route path="portfolio" element={<PortfolioPage />} />
+              <Route path="profile" element={<ProfilePage />} />
 
               <Route path="/post/:postId" element={<PostView />} />
               <Route path="/" element={<Navigate to="/home" />} />

frontend/src/components/profile/ProfilePage.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import "../../styles/Profile.css";
+
+// Sample data 
+const userProfile = {
+  name: 'Deniz Coşkuner',
+  username: '@danzio',
+  followers: 151,
+  following: 32,
+  posts: 15,
+  portfolios: 1,
+  comments: 12,
+  badges: [
+    { label: 'Highliked', icon: '🏅' },
+    { label: 'Creatager', icon: '🏅' }
+  ]
+};
+
+const ProfilePage = () => {
+  return (
+    <div className="profile-page">
+      <div className="profile-container">
+        <div className="profile-avatar">
+          <span>IMG</span>
+        </div>
+        <div className="profile-right-container">
+          <div className="profile-stats">
+            <div className="stat-item">
+              <p>{userProfile.followers} Followers</p>
+            </div>
+            <div className="stat-item">
+              <p>{userProfile.following} Following</p>
+            </div>
+            <div className="stat-item">
+              <p>{userProfile.posts} Posts</p>
+            </div>
+            <div className="stat-item">
+              <p>{userProfile.portfolios} Portfolios</p>
+            </div>
+            <div className="stat-item">
+              <p>{userProfile.comments} Comments</p>
+            </div>
+          </div>
+          <div className="profile-info">
+            <div className="profile-details">
+              <h1>{userProfile.name}</h1>
+              <p>{userProfile.username}</p>
+            </div>
+            <div className="profile-badges">
+              {userProfile.badges.map((badge, index) => (
+                <div key={index} className="badge">
+                  <span className="badge-icon">{badge.icon}</span>
+                  <span className="badge-label">{badge.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <nav className="profile-selector">
+        <button className="selector-item">Posts</button>
+        <button className="selector-item">Portfolios</button>
+        <button className="selector-item">Comments</button>
+        <button className="selector-item">Followers</button>
+        <button className="selector-item">Following</button>
+        <button className="selector-item">Settings</button>
+      </nav>
+    </div>
+  );
+};
+
+export default ProfilePage;

frontend/src/styles/Dashboard.css

@@ -23,6 +23,7 @@
   gap: 10px;
 }
 
+
 .auth-section {
   align-items: center;
   display: flex;
@@ -43,6 +44,7 @@
   overflow-y: auto;
 }
 
+
 .custom-button {
   align-items: center;
   background-color: var(--color-primary-500);
@@ -60,15 +62,12 @@
   width: 40px;
 }
 
+
+
 .custom-button:hover {
   background-color: var(--color-primary-700);
 }
 
-.custom-button svg {
-  font-size: 1.2rem;
-  color: var(--color-neutral-100);
-}
-
 .dashboard-container {
   display: flex;
   flex-direction: column;
@@ -93,6 +92,8 @@
   transition: background-color 0.3s;
 }
 
+
+
 .nav-links a:hover {
   background-color: var(--color-primary-500);
 }

frontend/src/styles/Profile.css

@@ -0,0 +1,111 @@
+.profile-page {
+  width: 100%;
+  padding: 20px;
+  margin-top: 0;
+  position: relative;
+}
+
+.profile-container {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+}
+
+.profile-avatar {
+  width: 150px;
+  height: 150px;
+  background-color: #ddd;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3em;
+}
+
+.profile-right-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.profile-stats {
+  display: flex;
+  gap: 10px;
+}
+
+.stat-item {
+  height: 30px;
+  background-color: #4a90e2;
+  color: white;
+  padding-left: 15px;
+  padding-right: 15px;
+  border-radius: 15px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  min-width: 80px;
+}
+
+.profile-info {
+  display: flex;
+  align-items: center;
+  margin-top: 15px;
+  gap: 20px;
+}
+
+.profile-details h1 {
+  margin: 0;
+}
+
+.profile-badges {
+  display: flex;
+  gap: 10px;
+}
+
+.badge {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  border: 5px solid #4a90e2;
+  border-radius: 10px;
+  padding: 5px 10px;
+}
+
+.badge-icon {
+  font-size: 3em;
+}
+
+.badge-label {
+  font-size: 14px;
+  color: #333;
+}
+
+.profile-selector {
+  display: flex;
+  gap: 20px;
+  margin-top: 20px;
+  border-bottom: 2px solid #ddd;
+  padding-bottom: 10px;
+}
+
+.selector-item {
+  background: none;
+  border: none;
+  padding: 10px 15px;
+  font-size: 16px;
+  color: #333;
+  cursor: pointer;
+  transition: color 0.3s, border-bottom 0.3s;
+}
+
+.selector-item:hover {
+  color: #4a90e2;
+}
+
+.selector-item:focus {
+  color: #4a90e2;
+  border-bottom: 2px solid #4a90e2;
+  outline: none;
+}