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

feat: redesign InitialLoader with premium ETIB logo and light sweep

Browse Source 
Former-commit-id: accc8a262caa6b2b121f94cebd04daf5bb877630
This commit is contained in:
Marc Mintel
2026-05-07 23:22:26 +02:00
parent 301b1786b9
commit 3865ccb592
3 changed files with 47 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[locale]/layout.tsx
View File

@@ -157,7 +157,7 @@ export default async function Layout(props: {
const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true'; const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true';
const cookieStore = await cookies(); const cookieStore = await cookies();
const hasSeenLoader = cookieStore.has('etib_initial_loader_v3'); const hasSeenLoader = cookieStore.has('etib_initial_loader_v4');
return ( return (
<html <html

85
components/providers/InitialLoader.tsx
View File

@@ -2,6 +2,7 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import Image from 'next/image';
const PRELOAD_VIDEOS = [ const PRELOAD_VIDEOS = [
'/assets/videos/web/hero-bohrung.mp4' '/assets/videos/web/hero-bohrung.mp4'
@@ -44,7 +45,7 @@ export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?:
const finishLoading = () => { const finishLoading = () => {
// Set a session cookie so the server knows not to render the loader again // Set a session cookie so the server knows not to render the loader again
document.cookie = "etib_initial_loader_v3=true; path=/; samesite=lax"; document.cookie = "etib_initial_loader_v4=true; path=/; samesite=lax";
setIsLoading(false); setIsLoading(false);
}; };
@@ -59,57 +60,59 @@ export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?:
initial={{ y: 0 }} initial={{ y: 0 }}
exit={{ y: '-100%' }} exit={{ y: '-100%' }}
transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1], delay: 0.2 }} 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" className="fixed inset-0 z-[9999] bg-[#050B14] flex flex-col items-center justify-center overflow-hidden"
> >
{/* E-TIB Premium Glow */} {/* Subtle grid background */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent opacity-60" /> <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
{/* Deep Glow */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent opacity-80 mix-blend-screen" />
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.95 }} initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8, ease: "easeOut" }} transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
className="relative z-10 flex flex-col items-center" className="relative z-10 flex flex-col items-center w-full px-4"
> >
{/* Minimalistisches Logo oder Loader */} {/* Logo Container with Shimmer / Reflection effect */}
<div className="w-24 h-24 relative mb-8"> <div className="relative w-64 h-20 sm:w-80 sm:h-24 mb-12 overflow-hidden mix-blend-plus-lighter">
<motion.div <Image
className="absolute inset-0 border-2 border-primary/20 rounded-xl" src="/assets/logo-white.png"
animate={{ rotate: 360 }} alt="E-TIB Gruppe"
transition={{ duration: 8, ease: "linear", repeat: Infinity }} fill
className="object-contain filter drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]"
priority
/> />
{/* Animated Light Sweep over Logo */}
<motion.div <motion.div
className="absolute inset-2 border-2 border-accent/40 rounded-lg" className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent skew-x-[-25deg]"
animate={{ rotate: -360 }} initial={{ left: '-150%' }}
transition={{ duration: 6, ease: "linear", repeat: Infinity }} animate={{ left: '250%' }}
transition={{ duration: 2.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.5 }}
style={{ mixBlendMode: 'overlay' }}
/> />
<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> </div>
<motion.div {/* Elegant Progress Bar */}
initial={{ opacity: 0, y: 10 }} <div className="flex flex-col items-center w-full max-w-xs">
animate={{ opacity: 1, y: 0 }} <div className="flex justify-between w-full mb-3 text-[10px] sm:text-xs font-mono text-white/40 tracking-[0.2em] uppercase">
transition={{ delay: 0.4 }} <span>System</span>
className="h-1 w-48 bg-neutral-800 rounded-full overflow-hidden" <span className="text-primary/80 animate-pulse">Online</span>
> </div>
<motion.div <motion.div
className="h-full bg-primary" initial={{ opacity: 0, y: 10 }}
initial={{ width: "0%" }} animate={{ opacity: 1, y: 0 }}
animate={{ width: "100%" }} transition={{ delay: 0.3 }}
transition={{ duration: 3.5, ease: [0.16, 1, 0.3, 1] }} className="h-[2px] w-full bg-white/5 overflow-hidden relative rounded-full"
/> >
</motion.div> <motion.div
<motion.p className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary-dark via-primary to-primary-light"
initial={{ opacity: 0 }} initial={{ width: "0%" }}
animate={{ opacity: 1 }} animate={{ width: "100%" }}
transition={{ delay: 0.6 }} transition={{ duration: 3.8, ease: [0.16, 1, 0.3, 1] }}
className="mt-4 text-xs text-neutral-400 font-mono tracking-widest uppercase" />
> </motion.div>
Loading Infrastructure </div>
</motion.p>
</motion.div> </motion.div>
</motion.div> </motion.div>
)} )}

2
next-env.d.ts vendored
View File

@@ -1,6 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts"; import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.