Seazn/profit-planet-frontend
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

beautify: header gradient add

Browse Source
This commit is contained in:
DeathKaioken 2025-10-03 21:14:17 +02:00
parent 0cb174bd21
commit 2e26e4bea1
1 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/app/components/nav/Header.tsx
View File

@ -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