feat: add initial cinematic loader and global shutter page transitions

Former-commit-id: 641bf3103e29559d7bdff1dc1e034b21a11dbad6

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>
+  );
+}

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>
+  );
+}

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;
+}