mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

fix(ui): perfect sticky header transition and frost glass CTA button

Browse Source 
Former-commit-id: c30c64ed57021d9a913ea0a00997bee5ba6d7bdc
This commit is contained in:
Marc Mintel
2026-05-07 14:29:40 +02:00
parent f47c07c98e
commit 64e1364596
223 changed files with 504 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/layout/Header.tsx
View File

@@ -74,10 +74,10 @@ export function Header({ navLinks }: HeaderProps) {
}`}
>
<div
className={`w-full transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] flex items-center justify-between ${
className={`w-full max-w-[1400px] mx-auto transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] flex items-center justify-between ${
isSolidMode
? 'max-w-7xl rounded-full bg-white/85 backdrop-blur-2xl shadow-[0_8px_32px_rgba(0,0,0,0.08)] border border-white/60 py-2.5 px-6 md:px-8'
: 'bg-transparent py-6 container'
? 'rounded-full bg-white/50 backdrop-blur-xl shadow-[0_8px_32px_rgba(0,0,0,0.08)] border border-white/40 py-2.5 px-6 md:px-8'
: 'rounded-none bg-transparent py-6 px-4 md:px-8 border border-transparent'
}`}
>
<Link href={`/${currentLocale}`} className={`relative flex items-center transition-all duration-500 ease-out z-50 group ${isSolidMode ? 'h-9 w-36' : 'h-12 w-48'}`}>
@@ -130,13 +130,18 @@ export function Header({ navLinks }: HeaderProps) {
<LanguageSwitcher isSolidMode={isSolidMode} />
<Button
<Link
href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`}
variant={isSolidMode ? "primary" : "outline"}
className={`px-7 py-2.5 ml-2 transition-all duration-500 ${!isSolidMode ? 'border-white/30 hover:border-white text-white hover:bg-white hover:text-neutral-dark' : ''}`}
className={`relative ml-2 px-7 py-2.5 rounded-full font-bold text-xs lg:text-sm uppercase tracking-widest transition-all duration-500 overflow-hidden group/cta isolate ${
isSolidMode
? 'bg-primary text-white shadow-lg shadow-primary/20 hover:shadow-primary/40 hover:-translate-y-0.5 border border-transparent'
: 'bg-white/10 text-white backdrop-blur-md border border-white/30 hover:bg-white/20 hover:-translate-y-0.5 hover:shadow-[0_0_20px_rgba(255,255,255,0.2)]'
}`}
>
{currentLocale === 'de' ? 'Kontakt' : 'Contact'}
</Button>
<span className="relative z-10 transition-transform duration-300 group-hover/cta:scale-105 inline-block">{currentLocale === 'de' ? 'Kontakt' : 'Contact'}</span>
{/* Sleek shine sweep effect */}
<span className="absolute top-0 -left-[150%] h-full w-[150%] bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-[-20deg] group-hover/cta:left-[100%] transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] z-0" />
</Link>
</nav>
{/* Mobile Nav Button */}