From d5cb8e673d2549425374985d41c54987c0857585 Mon Sep 17 00:00:00 2001
From: DeathKaioken <alex.ibrahim@eitk.com>
Date: Fri, 3 Oct 2025 22:21:30 +0200
Subject: [PATCH] beautify: header account mobile and desktop

---
 src/app/components/PageLayout.tsx |   5 +-
 src/app/components/nav/Header.tsx | 110 ++++++++++++++----------------
 src/app/page.tsx                  |   5 +-
 3 files changed, 58 insertions(+), 62 deletions(-)

diff --git a/src/app/components/PageLayout.tsx b/src/app/components/PageLayout.tsx
index 3bdef51..e2f25b5 100644
--- a/src/app/components/PageLayout.tsx
+++ b/src/app/components/PageLayout.tsx
@@ -3,7 +3,6 @@
 import React from 'react';
 import Header from './nav/Header';
 import Footer from './Footer';
-import GlobalAnimatedBackground from '../background/GlobalAnimatedBackground';
 import PageTransitionEffect from './animation/pageTransitionEffect';
 
 // Utility to detect mobile devices
@@ -26,7 +25,7 @@ export default function PageLayout({
   const isMobile = isMobileDevice();
   
   return (
-    <div className="h-screen w-full flex flex-col relative bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors overflow-hidden">
+    <div className="min-h-screen w-full flex flex-col relative bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors overflow-x-hidden">
       
       {showHeader && (
         <div className="relative z-50 w-full flex-shrink-0">
@@ -34,7 +33,7 @@ export default function PageLayout({
         </div>
       )}
       
-      {/* Main content now participates in normal document flow */}
+      {/* Main content scrolls naturally with page */}
       <div className="flex-1 relative z-10 w-full flex flex-col">
         <PageTransitionEffect>{children}</PageTransitionEffect>
       </div>
diff --git a/src/app/components/nav/Header.tsx b/src/app/components/nav/Header.tsx
index 6410cf5..1566f3a 100644
--- a/src/app/components/nav/Header.tsx
+++ b/src/app/components/nav/Header.tsx
@@ -19,7 +19,6 @@ import {
   Bars3Icon,
   ShoppingBagIcon,
   UsersIcon,
-  HomeIcon,
   UserCircleIcon,
   XMarkIcon,
   ArrowRightOnRectangleIcon,
@@ -188,10 +187,13 @@ export default function Header() {
               {l.name}
             </button>
           ))}
-          {/* Profile Dropdown - unchanged */}
+          {/* Removed user profile Popover from here (now on right side) */}
+        </PopoverGroup>
+        <div className="hidden lg:flex lg:flex-1 lg:justify-end lg:items-center lg:gap-x-4">
+          {/* Avatar first (when logged in) - repositioned dropdown */}
           {user && (
-            <Popover>
-              <PopoverButton className="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900 dark:text-white">
+            <Popover className="relative">
+              <PopoverButton className="flex items-center gap-x-1 text-sm font-semibold text-gray-900 dark:text-white">
                 <Avatar
                   src=""
                   initials={getUserInitials()}
@@ -199,33 +201,29 @@ export default function Header() {
                 />
                 <ChevronDownIcon aria-hidden="true" className="size-5 flex-none text-gray-500" />
               </PopoverButton>
-
               <PopoverPanel
                 transition
-                className="absolute right-0 top-16 w-64 bg-white dark:bg-gray-900 ring-1 ring-black/5 dark:ring-white/15 transition data-closed:-translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in"
+                className="absolute left-0 top-full mt-2 w-64 rounded-md bg-white dark:bg-gray-900 ring-1 ring-black/10 dark:ring-white/10 shadow-lg data-closed:-translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-leave:duration-150"
               >
                 <div className="p-4">
-                  <div className="flex flex-col border-b border-white/10 pb-4 mb-4">
-                    <div className="font-medium text-white">
-                      {user?.firstName && user?.lastName 
-                        ? `${user.firstName} ${user.lastName}`
-                        : user?.email || 'User'
-                      }
+                  <div className="flex flex-col border-b border-gray-200 dark:border-white/10 pb-4 mb-4">
+                    <div className="font-medium text-gray-900 dark:text-white">
+                      {user?.firstName && user?.lastName ? `${user.firstName} ${user.lastName}` : (user?.email || 'User')}
                     </div>
-                    <div className="text-sm text-gray-400">
+                    <div className="text-sm text-gray-500 dark:text-gray-400">
                       {user?.email || 'user@example.com'}
                     </div>
                   </div>
                   <button
                     onClick={() => router.push('/profile')}
-                    className="flex items-center gap-x-2 w-full text-left p-2 text-sm text-white hover:bg-white/5 rounded-md"
+                    className="flex items-center gap-x-2 w-full text-left p-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-white/5 rounded-md"
                   >
                     <UserCircleIcon className="size-5 text-gray-400" />
                     Profile
                   </button>
                   <button
                     onClick={handleLogout}
-                    className="flex items-center gap-x-2 w-full text-left p-2 text-sm text-white hover:bg-white/5 rounded-md"
+                    className="flex items-center gap-x-2 w-full text-left p-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-white/5 rounded-md"
                   >
                     <ArrowRightOnRectangleIcon className="size-5 text-gray-400" />
                     Logout
@@ -234,18 +232,16 @@ export default function Header() {
               </PopoverPanel>
             </Popover>
           )}
-        </PopoverGroup>
-        <div className="hidden lg:flex lg:flex-1 lg:justify-end lg:items-center lg:gap-x-4">
-          {/* Log in first (if not logged in) */}
+          {/* Login button (only when not logged in) */}
           {!user && (
-            <button 
+            <button
               onClick={() => router.push('/login')}
               className="text-sm/6 font-semibold text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
             >
               Log in <span aria-hidden="true">&rarr;</span>
             </button>
           )}
-          {/* Language next */}
+          {/* Language after avatar/login */}
           <LanguageSwitcher variant={isDark ? 'dark' : 'light'} />
           {/* Theme toggle last */}
           <button
@@ -312,20 +308,45 @@ export default function Header() {
               </div>
               <div className="mt-6 flow-root">
                 <div className="-my-6 divide-y divide-gray-200 dark:divide-white/10">
-                  <div className="py-6">
-                    <button
-                      onClick={toggleTheme}
-                      className="flex items-center gap-x-2 rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-white/5 w-full"
-                    >
-                      {isDark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
-                      {isDark ? 'Light Mode' : 'Dark Mode'}
-                    </button>
-                    <div className="mt-4 px-1">
-                      <LanguageSwitcher variant="dark" />
-                    </div>
-                  </div>
                   {user ? (
                     <>
+                      {/* User info now FIRST under logo */}
+                      <div className="pt-6 space-y-2">
+                        <div className="flex flex-col border-b border-white/10 pb-4 mb-4 px-3">
+                          <div className="font-medium text-white">
+                            {user?.firstName && user?.lastName ? `${user.firstName} ${user.lastName}` : (user?.email || 'User')}
+                          </div>
+                          <div className="text-sm text-gray-400">
+                            {user?.email || 'user@example.com'}
+                          </div>
+                        </div>
+                        <button
+                          onClick={() => { router.push('/profile'); setMobileMenuOpen(false); }}
+                          className="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
+                        >
+                          Profile
+                        </button>
+                        <button
+                          onClick={() => { handleLogout(); setMobileMenuOpen(false); }}
+                          className="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
+                        >
+                          Logout
+                        </button>
+                      </div>
+                      {/* Theme + Language now AFTER user info */}
+                      <div className="py-6">
+                        <button
+                          onClick={toggleTheme}
+                          className="flex items-center gap-x-2 rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-white/5 w-full"
+                        >
+                          {isDark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
+                          {isDark ? 'Light Mode' : 'Dark Mode'}
+                        </button>
+                        <div className="mt-4 px-1">
+                          <LanguageSwitcher variant="dark" />
+                        </div>
+                      </div>
+                      {/* Navigation / Shop after that */}
                       <div className="space-y-2 py-6">
                         <Disclosure as="div">
                           <DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 px-3 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5">
@@ -355,31 +376,6 @@ export default function Header() {
                           </button>
                         ))}
                       </div>
-                      <div className="py-6 space-y-2">
-                        <div className="flex flex-col border-b border-white/10 pb-4 mb-4 px-3">
-                          <div className="font-medium text-white">
-                            {user?.firstName && user?.lastName 
-                              ? `${user.firstName} ${user.lastName}`
-                              : user?.email || 'User'
-                            }
-                          </div>
-                          <div className="text-sm text-gray-400">
-                            {user?.email || 'user@example.com'}
-                          </div>
-                        </div>
-                        <button
-                          onClick={() => { router.push('/profile'); setMobileMenuOpen(false); }}
-                          className="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
-                        >
-                          Profile
-                        </button>
-                        <button
-                          onClick={() => { handleLogout(); setMobileMenuOpen(false); }}
-                          className="block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
-                        >
-                          Logout
-                        </button>
-                      </div>
                     </>
                   ) : (
                     <div className="py-6 space-y-4">
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c6d56cf..c23cfc9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,7 +6,7 @@ export default function HomePage() {
       {/* Hero Section */}
       <section
         id="hero"
-        className="relative isolate flex-1"
+        className="relative isolate" // removed flex-1 to avoid nested scroll container
       >
         {/* ...existing code (pattern SVG + blurred polygon) ... */}
         <svg
@@ -53,7 +53,8 @@ export default function HomePage() {
         <div className="pointer-events-none absolute inset-0 -z-10 mix-blend-overlay [background-image:linear-gradient(rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[size:40px_40px]" />
 
           {/* Content wrapper */}
-          <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-16 lg:px-8 lg:py-28 flex w-full items-center h-full">
+          <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 sm:py-20 lg:px-8 lg:py-32 flex w-full items-center">
+            {/* removed h-full so it sizes to content */}
             <div className="mx-auto max-w-2xl gap-x-8 lg:mx-0 lg:flex lg:max-w-none lg:items-center lg:gap-x-14">
               <div className="relative w-full lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
                 <h1 className="text-3xl font-semibold tracking-tight text-pretty text-white sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">