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

feat: add initial cinematic loader and global shutter page transitions

Browse Source 
Former-commit-id: 641bf3103e29559d7bdff1dc1e034b21a11dbad6
This commit is contained in:
Marc Mintel
2026-05-07 19:25:10 +02:00
parent cbc90aa872
commit b515e45c0d
9 changed files with 314 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/layout/Header.tsx
View File

@@ -2,6 +2,7 @@
import * as React from 'react';
import Link from 'next/link';
import { TransitionLink } from '@/components/ui/TransitionLink';
import Image from 'next/image';
import { usePathname } from 'next/navigation';
import { motion, AnimatePresence, useScroll, useTransform } from 'framer-motion';
@@ -97,7 +98,7 @@ export function Header({ navLinks }: HeaderProps) {
/>
</div>
<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'}`}>
<TransitionLink 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'}`}>
<Image
src={(isSolidMode || isMobileMenuOpen) ? "/assets/logo.png" : "/assets/logo-white.png"}
alt="E-TIB Gruppe"
@@ -106,7 +107,7 @@ export function Header({ navLinks }: HeaderProps) {
priority
sizes="192px"
/>
</Link>
</TransitionLink>
<nav className="relative z-10 hidden md:flex items-center gap-8 lg:gap-10">
{navLinks && navLinks.length > 0 && navLinks.map((link) => {
@@ -117,7 +118,7 @@ export function Header({ navLinks }: HeaderProps) {
const isActive = pathname === mappedUrl || (mappedUrl !== `/${currentLocale}` && pathname?.startsWith(`${mappedUrl}/`));
return (
<Link
<TransitionLink
key={link.url}
href={mappedUrl}
className={`relative font-bold text-xs lg:text-sm uppercase tracking-widest transition-colors duration-300 group py-2 ${
@@ -139,7 +140,7 @@ export function Header({ navLinks }: HeaderProps) {
{/* Subtle hover underline */}
<span className={`absolute -bottom-1 left-1/2 w-0 h-0.5 -translate-x-1/2 rounded-full transition-all duration-300 ease-out group-hover:w-full ${isSolidMode ? 'bg-primary/30' : 'bg-white/30'} ${isActive ? 'opacity-0' : 'opacity-100'}`} />
</Link>
</TransitionLink>
);
})}
@@ -147,7 +148,7 @@ export function Header({ navLinks }: HeaderProps) {
<LanguageSwitcher isSolidMode={isSolidMode} />
<Link
<TransitionLink
href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`}
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
@@ -158,7 +159,7 @@ export function Header({ navLinks }: HeaderProps) {
<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-[200%] w-[150%] bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-[-20deg] group-hover/cta:left-[100%] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] z-30 pointer-events-none" />
</Link>
</TransitionLink>
</nav>
{/* Mobile Nav Button */}
@@ -203,22 +204,24 @@ export function Header({ navLinks }: HeaderProps) {
: link.url;
return (
<Link
<TransitionLink
key={link.url}
href={mappedUrl}
className="text-2xl font-heading font-bold text-neutral-dark border-b border-neutral-100 pb-4"
onClick={() => setIsMobileMenuOpen(false)}
>
{link.label}
</Link>
</TransitionLink>
);
})}
<Link
<TransitionLink
href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`}
className="text-2xl font-heading font-bold text-primary border-b border-neutral-100 pb-4"
onClick={() => setIsMobileMenuOpen(false)}
>
{currentLocale === 'de' ? 'Kontakt' : 'Contact'}
</Link>
</TransitionLink>
<div className="mt-8 pt-6">
<p className="text-text-secondary text-sm font-bold uppercase tracking-widest mb-4">Sprache wählen</p>