From bb714e6fa240e9be18a5fe413df80ca5a2042e2a Mon Sep 17 00:00:00 2001
From: Matthias Puchstein <matthias@puchstein.bayern>
Date: Thu, 17 Jul 2025 02:45:12 +0200
Subject: [PATCH] refined `ProfilePage` UI by improving spacing, aligning
 component structure, and reintroducing project information card for enriched
 profile context and presentation

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
---
 src/pages/ProfilePage.tsx | 135 +++++++++++++++++++++++++-------------
 1 file changed, 91 insertions(+), 44 deletions(-)

diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index e239273..15ec990 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -13,57 +13,60 @@ const ProfilePage: React.FC = () => {
 
   return (
     <div className="page p-4 pb-20">
+        {/* Profile Card */}
         <div
-            className="dreamy-border rounded-xl p-6 max-w-md mx-auto overflow-hidden"
+            className="dreamy-border rounded-xl p-6 max-w-md mx-auto overflow-hidden mb-10"
             style={{
                 background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25))',
                 backdropFilter: 'blur(10px)',
                 boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2)'
             }}>
-        {/* Profile Picture */}
+            {/* Profile Picture */}
             <div className="w-28 h-28 sm:w-36 sm:h-36 rounded-full overflow-hidden mb-6 mx-auto relative"
                  style={{
                      background: 'var(--accent-gradient)',
                      padding: '4px',
                      boxShadow: '0 0 15px var(--shadow)'
                  }}>
-          <img 
-            src={profileUser ? `/assets/profiles/${profileUser.profilePicture}` : `https://ui-avatars.com/api/?name=${defaultName}&background=random&color=fff&size=128`} 
-            alt={profileUser ? profileUser.name : defaultName}
-            className="w-full h-full object-cover rounded-full"
-          />
-        </div>
-
-        {/* User Information */}
-        <div className="text-center w-full">
-            <h2 className="text-xl sm:text-2xl mb-2 break-words dreamy-text font-bold">{profileUser ? profileUser.name : defaultName}</h2>
-            <p className="text-text-muted mb-8 break-words">{profileUser ? profileUser.email : defaultEmail}</p>
-
-            <div className="grid grid-cols-2 gap-6 mt-6 text-center">
-                <div
-                    className="dreamy-border rounded-lg p-4"
-                    style={{
-                        background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
-                        boxShadow: '0 0 15px var(--shadow)',
-                        backdropFilter: 'blur(5px)'
-                    }}
-                >
-                    <p className="dreamy-text text-2xl sm:text-3xl font-bold">{profileUser ? profileUser.dreamCount : defaultDreamCount}</p>
-                    <p className="text-sm sm:text-base font-medium" style={{color: 'var(--text)'}}>Dreams</p>
+                <img
+                    src={profileUser ? `/assets/profiles/${profileUser.profilePicture}` : `https://ui-avatars.com/api/?name=${defaultName}&background=random&color=fff&size=128`}
+                    alt={profileUser ? profileUser.name : defaultName}
+                    className="w-full h-full object-cover rounded-full"
+                />
             </div>
-                <div
-                    className="dreamy-border rounded-lg p-4"
-                    style={{
-                        background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
-                        boxShadow: '0 0 15px var(--shadow)',
-                        backdropFilter: 'blur(5px)'
-                    }}
-                >
-                    <p className="dreamy-text text-2xl sm:text-3xl font-bold">{profileUser ? profileUser.streakDays : defaultStreakDays}</p>
-                    <p className="text-sm sm:text-base font-medium" style={{color: 'var(--text)'}}>Days Streak</p>
-            </div>
-          </div>
 
+            {/* User Information */}
+            <div className="text-center w-full">
+                <h2 className="text-xl sm:text-2xl mb-2 break-words dreamy-text font-bold">{profileUser ? profileUser.name : defaultName}</h2>
+                <p className="text-text-muted mb-8 break-words">{profileUser ? profileUser.email : defaultEmail}</p>
+
+                <div className="grid grid-cols-2 gap-6 mt-6 text-center">
+                    <div
+                        className="dreamy-border rounded-lg p-4"
+                        style={{
+                            background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
+                            boxShadow: '0 0 15px var(--shadow)',
+                            backdropFilter: 'blur(5px)'
+                        }}
+                    >
+                        <p className="dreamy-text text-2xl sm:text-3xl font-bold">{profileUser ? profileUser.dreamCount : defaultDreamCount}</p>
+                        <p className="text-sm sm:text-base font-medium" style={{color: 'var(--text)'}}>Dreams</p>
+                    </div>
+                    <div
+                        className="dreamy-border rounded-lg p-4"
+                        style={{
+                            background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
+                            boxShadow: '0 0 15px var(--shadow)',
+                            backdropFilter: 'blur(5px)'
+                        }}
+                    >
+                        <p className="dreamy-text text-2xl sm:text-3xl font-bold">{profileUser ? profileUser.streakDays : defaultStreakDays}</p>
+                        <p className="text-sm sm:text-base font-medium" style={{color: 'var(--text)'}}>Days Streak</p>
+                    </div>
+                </div>
+            </div>
+
+            {/* Account Settings (moved back into profile card) */}
             <div className="mt-10">
                 <h3 className="dreamy-text text-lg mb-4 font-bold">Account Settings</h3>
                 <div
@@ -84,8 +87,8 @@ const ProfilePage: React.FC = () => {
                                       opacity: '0.9',
                                       boxShadow: 'inset 0 0 5px rgba(166, 77, 255, 0.5)'
                                   }}></span>
-                </label>
-              </div>
+                        </label>
+                    </div>
                     <div className="flex justify-between items-center py-3 flex-wrap">
                         <span className="mr-2 font-medium" style={{color: 'var(--text)'}}>Privacy</span>
                         <label className="relative inline-block w-12 h-6">
@@ -96,14 +99,58 @@ const ProfilePage: React.FC = () => {
                                       opacity: '0.9',
                                       boxShadow: 'inset 0 0 5px rgba(166, 77, 255, 0.5)'
                                   }}></span>
-                </label>
-              </div>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {/* Project Information Card */}
+        <div
+            className="dreamy-border rounded-xl p-6 max-w-md mx-auto overflow-hidden"
+            style={{
+                background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25))',
+                backdropFilter: 'blur(10px)',
+                boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2)'
+            }}>
+            <h3 className="dreamy-text text-lg mb-4 font-bold text-center">Project Information</h3>
+            <div
+                className="dreamy-border rounded-lg p-5 text-left"
+                style={{
+                    background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
+                    boxShadow: '0 0 15px var(--shadow)',
+                    backdropFilter: 'blur(5px)'
+                }}
+            >
+                <div className="py-2 border-b border-purple-100/30">
+                    <p className="font-medium mb-1" style={{color: 'var(--text)'}}>Gitea Link:</p>
+                    <a
+                        href="https://gitea.puchstein.bayern/mpuchstein/REMind"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-sm break-words hover:underline"
+                        style={{color: 'var(--accent)'}}
+                    >
+                        https://gitea.puchstein.bayern/mpuchstein/REMind
+                    </a>
+                </div>
+                <div className="py-2 border-b border-purple-100/30">
+                    <p className="font-medium mb-1" style={{color: 'var(--text)'}}>Gruppenmitglieder:</p>
+                    <p className="text-sm">Kim Anhäuser, Matthias Puchstein, Anya Zell</p>
+                </div>
+                <div className="py-2 border-b border-purple-100/30">
+                    <p className="font-medium mb-1" style={{color: 'var(--text)'}}>Modul:</p>
+                    <p className="text-sm">Einführung in die Text und Medienanalyse bei Prof. Dr. Rettiner und Dr. phil.
+                        Ripoll</p>
+                </div>
+                <div className="py-2">
+                    <p className="font-medium mb-1" style={{color: 'var(--text)'}}>Genutzte AI:</p>
+                    <p className="text-sm">Perplexity, Junie, Veo, Imgen, Suno</p>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
     </div>
   );
 };
 
-export default ProfilePage;
+export default ProfilePage;
\ No newline at end of file