feat: add initial cinematic loader and global shutter page transitions

Former-commit-id: 641bf3103e29559d7bdff1dc1e034b21a11dbad6
2026-05-07 19:25:10 +02:00
parent cbc90aa872
commit b515e45c0d
9 changed files with 314 additions and 51 deletions
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -13,6 +13,10 @@ import { setRequestLocale } from 'next-intl/server';
 import { Inter } from 'next/font/google';
 import { mapFileSlugToTranslated } from '@/lib/slugs';

+import { TransitionProvider } from '@/components/providers/TransitionProvider';
+import { PageTransitionShutter } from '@/components/providers/PageTransitionShutter';
+import { InitialLoader } from '@/components/providers/InitialLoader';
+
 const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
@@ -164,21 +168,25 @@ export default async function Layout(props: {
      </head>
      <body className="flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white">
        <NextIntlClientProvider messages={clientMessages} locale={safeLocale}>
-          <SkipLink />
-          <Header navLinks={navLinks} />
-          
-          <main
-            id="main-content"
-            className="flex-grow animate-fade-in overflow-visible"
-            tabIndex={-1}
-          >
-            {children}
-          </main>
+          <TransitionProvider>
+            <InitialLoader />
+            <PageTransitionShutter />
+            <SkipLink />
+            <Header navLinks={navLinks} />
+            
+            <main
+              id="main-content"
+              className="flex-grow animate-fade-in overflow-visible"
+              tabIndex={-1}
+            >
+              {children}
+            </main>

-          <Footer companyInfo={companyInfo} />
-          <JsonLd />
-          <AnalyticsShell />
-          {feedbackEnabled && <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />}
+            <Footer companyInfo={companyInfo} />
+            <JsonLd />
+            <AnalyticsShell />
+            {feedbackEnabled && <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />}
+          </TransitionProvider>
        </NextIntlClientProvider>
      </body>
    </html>
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { TransitionLink } from '@/components/ui/TransitionLink';
 import Image from 'next/image';
 import { useLocale } from 'next-intl';
 import { ShieldCheck, Leaf, Lock, Accessibility, Zap } from 'lucide-react';
@@ -24,14 +24,14 @@ export function Footer({ companyInfo }: FooterProps) {
      <div className="container grid grid-cols-1 md:grid-cols-4 lg:grid-cols-12 gap-12 lg:gap-8 mb-12">
        {/* Brand Column */}
        <div className="col-span-1 md:col-span-2 lg:col-span-4 space-y-6">
-          <Link href={`/${locale}`} className="relative block h-14 w-48 mb-6 group">
+          <TransitionLink href={`/${locale}`} className="relative block h-14 w-48 mb-6 group">
            <Image
              src="/assets/logo-white.png"
              alt="E-TIB Gruppe"
              fill
              className="object-contain object-left transition-transform duration-500 group-hover:scale-105"
            />
-          </Link>
+          </TransitionLink>
          <p className="text-white/60 text-base leading-relaxed max-w-sm">
            {locale === 'de' 
              ? 'Die Experten für Kabeltiefbau, Horizontalspülbohrungen und umfassende Infrastrukturprojekte. Qualität und Zuverlässigkeit aus Guben.'
@@ -53,29 +53,29 @@ export function Footer({ companyInfo }: FooterProps) {
          </h4>
          <ul className="space-y-4">
            <li>
-              <Link href={`/${locale}/kompetenzen`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <TransitionLink href={`/${locale}/kompetenzen`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'Kompetenzen' : 'Competencies'}
-              </Link>
+              </TransitionLink>
            </li>
            <li>
-              <Link href={`/${locale}/ueber-uns`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <TransitionLink href={`/${locale}/ueber-uns`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'Über uns' : 'About us'}
-              </Link>
+              </TransitionLink>
            </li>
            <li>
-              <Link href={`/${locale}/karriere`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <TransitionLink href={`/${locale}/karriere`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'Karriere' : 'Career'}
-              </Link>
+              </TransitionLink>
            </li>
            <li>
-              <Link href={`/${locale}/messen`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <TransitionLink href={`/${locale}/messen`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'Messen & Events' : 'Fairs & Events'}
-              </Link>
+              </TransitionLink>
            </li>
            <li>
-              <Link href={`/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <TransitionLink href={`/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'Kontakt' : 'Contact'}
-              </Link>
+              </TransitionLink>
            </li>
          </ul>
        </div>
@@ -87,19 +87,19 @@ export function Footer({ companyInfo }: FooterProps) {
          </h4>
          <ul className="space-y-4">
            <li>
-              <Link href={`/${locale}/impressum`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <TransitionLink href={`/${locale}/impressum`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'Impressum' : 'Imprint'}
-              </Link>
+              </TransitionLink>
            </li>
            <li>
-              <Link href={`/${locale}/datenschutz`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <TransitionLink href={`/${locale}/datenschutz`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'Datenschutz' : 'Privacy Policy'}
-              </Link>
+              </TransitionLink>
            </li>
            <li>
-              <Link href={`/${locale}/${locale === 'de' ? 'agb' : 'terms'}`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
+              <TransitionLink href={`/${locale}/${locale === 'de' ? 'agb' : 'terms'}`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'AGB' : 'Terms'}
-              </Link>
+              </TransitionLink>
            </li>
          </ul>
        </div>
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -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>
--- a/components/layout/LanguageSwitcher.tsx
+++ b/components/layout/LanguageSwitcher.tsx
@@ -1,6 +1,6 @@
 'use client';

-import Link from 'next/link';
+import { TransitionLink } from '@/components/ui/TransitionLink';
 import { usePathname } from 'next/navigation';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';

@@ -27,7 +27,7 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
    return (
      <div className="flex flex-col gap-3">
        {locales.map((loc) => (
-          <Link
+          <TransitionLink
            key={loc.code}
            href={getSwitchedUrl(loc.code)}
            className={`group relative overflow-hidden flex items-center gap-3 px-5 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${
@@ -45,7 +45,7 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
                <polyline points="20 6 9 17 4 12" />
              </svg>
            )}
-          </Link>
+          </TransitionLink>
        ))}
      </div>
    );
@@ -73,7 +73,7 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
        }

        return (
-          <Link
+          <TransitionLink
            key={loc.code}
            href={getSwitchedUrl(loc.code)}
            className={`relative z-10 flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider transition-all duration-300 ${linkClass}`}
@@ -81,7 +81,7 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
          >
            <span className="text-sm" aria-hidden="true">{loc.flag}</span>
            <span>{loc.label}</span>
-          </Link>
+          </TransitionLink>
        );
      })}
    </div>
--- a/components/providers/InitialLoader.tsx
+++ b/components/providers/InitialLoader.tsx
@@ -0,0 +1,125 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const PRELOAD_VIDEOS = [
+  '/assets/videos/web/hero-bohrung.mp4'
+];
+
+export function InitialLoader() {
+  const [isLoading, setIsLoading] = useState(true);
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+    
+    // Prüfen, ob wir in dieser Session schon geladen haben
+    const hasLoaded = sessionStorage.getItem('etib_initial_load');
+    if (hasLoaded) {
+      setIsLoading(false);
+      return;
+    }
+
+    // Fallback Timeout (4 Sekunden), falls Videos hängen
+    const timeout = setTimeout(() => {
+      finishLoading();
+    }, 4000);
+
+    let videosLoaded = 0;
+    
+    const checkAllLoaded = () => {
+      videosLoaded++;
+      if (videosLoaded === PRELOAD_VIDEOS.length) {
+        clearTimeout(timeout);
+        // Kleine Verzögerung für die smootheness
+        setTimeout(finishLoading, 800);
+      }
+    };
+
+    PRELOAD_VIDEOS.forEach((src) => {
+      const video = document.createElement('video');
+      video.preload = 'auto';
+      video.oncanplaythrough = checkAllLoaded;
+      video.onerror = checkAllLoaded; // bei Fehler trotzdem weitermachen
+      video.src = src;
+      video.load();
+    });
+
+    // Cleanup
+    return () => clearTimeout(timeout);
+  }, []);
+
+  const finishLoading = () => {
+    sessionStorage.setItem('etib_initial_load', 'true');
+    setIsLoading(false);
+  };
+
+  // Wir rendern serverseitig nichts blockierendes (Hydration Mismatch verhindern)
+  if (!isClient) return null;
+
+  return (
+    <AnimatePresence>
+      {isLoading && (
+        <motion.div
+          key="initial-loader"
+          initial={{ y: 0 }}
+          exit={{ y: '-100%' }}
+          transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1], delay: 0.2 }}
+          className="fixed inset-0 z-[9999] bg-neutral-dark flex flex-col items-center justify-center overflow-hidden"
+        >
+          {/* E-TIB Premium Glow */}
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent opacity-60" />
+          
+          <motion.div 
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+            className="relative z-10 flex flex-col items-center"
+          >
+            {/* Minimalistisches Logo oder Loader */}
+            <div className="w-24 h-24 relative mb-8">
+              <motion.div 
+                className="absolute inset-0 border-2 border-primary/20 rounded-xl"
+                animate={{ rotate: 360 }}
+                transition={{ duration: 8, ease: "linear", repeat: Infinity }}
+              />
+              <motion.div 
+                className="absolute inset-2 border-2 border-accent/40 rounded-lg"
+                animate={{ rotate: -360 }}
+                transition={{ duration: 6, ease: "linear", repeat: Infinity }}
+              />
+              <motion.div 
+                className="absolute inset-4 border-2 border-white rounded-md bg-white/5 backdrop-blur-sm flex items-center justify-center"
+              >
+                <span className="text-white font-bold text-xl tracking-tighter">E-TIB</span>
+              </motion.div>
+            </div>
+            
+            <motion.div 
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.4 }}
+              className="h-1 w-48 bg-neutral-800 rounded-full overflow-hidden"
+            >
+              <motion.div 
+                className="h-full bg-primary"
+                initial={{ width: "0%" }}
+                animate={{ width: "100%" }}
+                transition={{ duration: 3.5, ease: [0.16, 1, 0.3, 1] }}
+              />
+            </motion.div>
+            <motion.p 
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.6 }}
+              className="mt-4 text-xs text-neutral-400 font-mono tracking-widest uppercase"
+            >
+              Loading Infrastructure
+            </motion.p>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
--- a/components/providers/PageTransitionShutter.tsx
+++ b/components/providers/PageTransitionShutter.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useTransition } from './TransitionProvider';
+
+export function PageTransitionShutter() {
+  const { isTransitioning } = useTransition();
+
+  return (
+    <AnimatePresence>
+      {isTransitioning && (
+        <motion.div
+          key="shutter"
+          initial={{ y: '100%' }}
+          animate={{ y: '0%' }}
+          exit={{ y: '-100%' }}
+          transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
+          className="fixed inset-0 z-[9998] bg-primary-dark pointer-events-none flex flex-col items-center justify-center overflow-hidden"
+        >
+          {/* E-TIB Premium Glow inside the Shutter */}
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent/20 via-transparent to-transparent opacity-50" />
+          
+          <motion.div 
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 1.1 }}
+            transition={{ duration: 0.4, delay: 0.2 }}
+            className="w-16 h-16 border-t-2 border-r-2 border-primary rounded-full animate-spin"
+          />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
--- a/components/providers/TransitionProvider.tsx
+++ b/components/providers/TransitionProvider.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface TransitionContextType {
+  isTransitioning: boolean;
+  startTransition: (href: string) => void;
+}
+
+const TransitionContext = createContext<TransitionContextType | undefined>(undefined);
+
+export function TransitionProvider({ children }: { children: ReactNode }) {
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const router = useRouter();
+
+  const startTransition = useCallback((href: string) => {
+    // Wenn wir bereits navigieren, nichts tun
+    if (isTransitioning) return;
+    
+    // Aktuelle URL prüfen, falls es dieselbe ist, nicht navigieren
+    if (typeof window !== 'undefined' && window.location.pathname === href) {
+       // Optional: Wir könnten weich nach oben scrollen
+       window.scrollTo({ top: 0, behavior: 'smooth' });
+       return;
+    }
+
+    setIsTransitioning(true);
+
+    // Die Animation des Shutters abwarten (ca. 700ms), dann pushen
+    setTimeout(() => {
+      router.push(href);
+      
+      // Den Shutter wieder einfahren lassen, nachdem die Seite gewechselt hat
+      // Next.js Route-Changes sind fast sofort da, aber wir geben dem Cache kurz Zeit
+      setTimeout(() => {
+        setIsTransitioning(false);
+      }, 300);
+    }, 700);
+  }, [isTransitioning, router]);
+
+  return (
+    <TransitionContext.Provider value={{ isTransitioning, startTransition }}>
+      {children}
+    </TransitionContext.Provider>
+  );
+}
+
+export function useTransition() {
+  const context = useContext(TransitionContext);
+  if (!context) {
+    throw new Error('useTransition must be used within a TransitionProvider');
+  }
+  return context;
+}
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Link from 'next/link';
+import { TransitionLink } from '@/components/ui/TransitionLink';
 import { cn } from './utils';

 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -88,9 +88,9 @@ export function Button({

  if (href) {
    return (
-      <Link href={href} className={styles}>
+      <TransitionLink href={href} className={styles}>
        {content}
-      </Link>
+      </TransitionLink>
    );
  }

--- a/components/ui/TransitionLink.tsx
+++ b/components/ui/TransitionLink.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import Link, { LinkProps } from 'next/link';
+import { useTransition } from '@/components/providers/TransitionProvider';
+
+interface TransitionLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps>, LinkProps {
+  children: React.ReactNode;
+  className?: string;
+  href: string;
+}
+
+export function TransitionLink({ children, href, onClick, ...props }: TransitionLinkProps) {
+  const { startTransition } = useTransition();
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    // Falls ein eigener onClick Handler übergeben wurde
+    if (onClick) onClick(e);
+
+    // Nicht bei neuen Tabs, Command-Klick, etc. intervenieren
+    if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || props.target === '_blank') {
+      return;
+    }
+
+    // Default Link Navigation blockieren
+    e.preventDefault();
+    
+    // Die Transition starten (welche intern pusht)
+    startTransition(href.toString());
+  };
+
+  return (
+    <Link href={href} onClick={handleClick} {...props}>
+      {children}
+    </Link>
+  );
+}