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

feat: redesign PageTransitionShutter with premium ETIB logo

Browse Source 
Former-commit-id: c26dde4f15942916216c86477e26492070da81a5
This commit is contained in:
Marc Mintel
2026-05-08 10:33:36 +02:00
parent 3865ccb592
commit d28fbaac41
3 changed files with 55 additions and 9 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 cookieStore = await cookies();
const hasSeenLoader = cookieStore.has('etib_initial_loader_v4');
const hasSeenLoader = cookieStore.has('etib_initial_loader_v5');
return (
<html

2
components/providers/InitialLoader.tsx
View File

@@ -45,7 +45,7 @@ export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?:
const finishLoading = () => {
// Set a session cookie so the server knows not to render the loader again
document.cookie = "etib_initial_loader_v4=true; path=/; samesite=lax";
document.cookie = "etib_initial_loader_v5=true; path=/; samesite=lax";
setIsLoading(false);
};

60
components/providers/PageTransitionShutter.tsx
View File

@@ -3,6 +3,7 @@
import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useTransition } from './TransitionProvider';
import Image from 'next/image';
export function PageTransitionShutter() {
const { isTransitioning } = useTransition();
@@ -16,18 +17,63 @@ export function PageTransitionShutter() {
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"
className="fixed inset-0 z-[9998] bg-[#050B14] 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" />
{/* Subtle grid background */}
<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 inside the Shutter */}
<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
initial={{ opacity: 0, scale: 0.9 }}
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 1.1 }}
exit={{ opacity: 0, scale: 1.05 }}
transition={{ duration: 0.4, delay: 0.2 }}
className="w-16 h-16 border-t-2 border-r-2 border-primary rounded-full animate-spin"
/>
className="relative z-10 flex flex-col items-center w-full px-4"
>
{/* Logo Container with Shimmer / Reflection effect */}
<div className="relative w-48 h-16 sm:w-64 sm:h-20 overflow-hidden mix-blend-plus-lighter">
<Image
src="/assets/logo-white.png"
alt="E-TIB Gruppe"
fill
className="object-contain filter drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]"
priority
/>
{/* Animated Light Sweep over Logo (faster for page transitions) */}
<motion.div
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/50 to-transparent skew-x-[-25deg]"
initial={{ left: '-150%' }}
animate={{ left: '250%' }}
transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.2 }}
style={{ mixBlendMode: 'overlay' }}
/>
</div>
{/* Extremely minimalist transition indicator */}
<motion.div
className="mt-6 flex gap-1"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.3 }}
>
{[0, 1, 2].map((i) => (
<motion.div
key={i}
className="w-1.5 h-1.5 rounded-full bg-primary"
initial={{ opacity: 0.3, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{
duration: 0.4,
repeat: Infinity,
repeatType: "reverse",
delay: i * 0.15
}}
/>
))}
</motion.div>
</motion.div>
</motion.div>
)}
</AnimatePresence>