From 2e26e4bea155c048486df4922749a7ec375be9b3 Mon Sep 17 00:00:00 2001
From: DeathKaioken <alex.ibrahim@eitk.com>
Date: Fri, 3 Oct 2025 21:14:17 +0200
Subject: [PATCH] beautify: header gradient add

---
 src/app/components/nav/Header.tsx | 46 +++++++++++++++++--------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/app/components/nav/Header.tsx b/src/app/components/nav/Header.tsx
index 4454250..0c778a2 100644
--- a/src/app/components/nav/Header.tsx
+++ b/src/app/components/nav/Header.tsx
@@ -109,10 +109,14 @@ export default function Header() {
   }, [])
 
   return (
-    <header className="relative isolate z-10 border-b border-white/10" style={{
-      backgroundColor: '#162647',
-      backdropFilter: 'blur(8px)'
-    }}>
+    <header
+      className="relative isolate z-10 border-b border-white/10 shadow-lg shadow-black/30 after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-[radial-gradient(circle_at_20%_20%,rgba(56,124,255,0.18),transparent_55%),radial-gradient(circle_at_80%_35%,rgba(139,92,246,0.16),transparent_60%)]"
+      style={{
+        background: 'linear-gradient(135deg, rgba(15,29,55,0.78) 0%, rgba(10,22,42,0.72) 50%, rgba(8,18,36,0.78) 100%)',
+        backdropFilter: 'blur(18px) saturate(170%)',
+        WebkitBackdropFilter: 'blur(18px) saturate(170%)'
+      }}
+    >
       <nav aria-label="Global" className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8">
         <div className="flex lg:flex-1">
           <button 
@@ -123,9 +127,9 @@ export default function Header() {
             <Image
               src="/images/logos/pp_logo_gold_transparent.png"
               alt="ProfitPlanet Logo"
-              width={180}
-              height={48}
-              className="h-12 w-auto"
+              width={240}
+              height={70}
+              className="h-[4.5rem] w-auto"
             />
           </button>
         </div>
@@ -242,17 +246,7 @@ export default function Header() {
           )}
         </PopoverGroup>
         <div className="hidden lg:flex lg:flex-1 lg:justify-end lg:items-center lg:gap-x-4">
-          {/* Theme Toggle */}
-            <button
-              onClick={toggleTheme}
-              aria-label="Toggle theme"
-              className="p-2 rounded-md border border-gray-300 dark:border-white/10 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 transition-colors"
-            >
-              {isDark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
-            </button>
-          {/* Language Switcher */}
-          <LanguageSwitcher variant={isDark ? 'dark' : 'light'} />
-          
+          {/* Log in first (if not logged in) */}
           {!user && (
             <button 
               onClick={() => router.push('/login')}
@@ -261,6 +255,16 @@ export default function Header() {
               Log in <span aria-hidden="true">&rarr;</span>
             </button>
           )}
+          {/* Language next */}
+          <LanguageSwitcher variant={isDark ? 'dark' : 'light'} />
+          {/* Theme toggle last */}
+          <button
+            onClick={toggleTheme}
+            aria-label="Toggle theme"
+            className="p-2 rounded-md border border-gray-300 dark:border-white/10 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 transition-colors"
+          >
+            {isDark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
+          </button>
         </div>
       </nav>
       <Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="lg:hidden">
@@ -275,9 +279,9 @@ export default function Header() {
               <Image
                 src="/images/logos/pp_logo_gold_transparent.png"
                 alt="ProfitPlanet Logo"
-                width={150}
-                height={40}
-                className="h-10 w-auto"
+                width={185}
+                height={52}
+                className="h-[3.25rem] w-auto"
               />
             </button>
             <button