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

revert: remove failed corporate design elements, back to clean state

Browse Source 
Former-commit-id: a00aa85ab7b4b8f5707329fd5ea21fe322c744d9
This commit is contained in:
Marc Mintel
2026-05-10 21:26:31 +02:00
parent 22faf4387d
commit 8a9b30f926
6 changed files with 109 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,6 @@ import { cookies } from 'next/headers';
import { TransitionProvider } from '@/components/providers/TransitionProvider';
import { PageTransitionShutter } from '@/components/providers/PageTransitionShutter';
import { InitialLoader } from '@/components/providers/InitialLoader';
import { TrenchLines } from '@/components/ui/decorations/TrenchLines';
const inter = Inter({
subsets: ['latin'],
@@ -180,7 +179,6 @@ export default async function Layout(props: {
<TransitionProvider>
<InitialLoader shouldShowLoader={!hasSeenLoader} />
<PageTransitionShutter />
<TrenchLines />
<SkipLink />
<Header navLinks={navLinks} />

36
app/globals.css
View File

@@ -15,42 +15,6 @@
.hide-scrollbar::-webkit-scrollbar {
display: none; /* Chrome, Safari and Opera */
}
/* Trassen-Hover Effect for Bento Grids */
.trassen-border {
position: relative;
}
.trassen-border::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent 70%, #0e7a5c 100%);
transform: translate(-50%, -50%) rotate(0deg);
animation: rotate-trasse 3s linear infinite;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 0;
pointer-events: none;
}
.trassen-border:hover::before {
opacity: 1;
}
.trassen-content {
position: absolute;
inset: 1px;
z-index: 1;
border-radius: inherit;
background-color: #050B14;
background-clip: padding-box;
}
}
@keyframes rotate-trasse {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Base Styles */

11
components/blocks/CompetenceBentoGrid.tsx
View File

@@ -110,6 +110,8 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
transition={{ delay: idx * 0.1 }}
className={gridClasses}
>
<div className="absolute top-0 right-0 w-32 h-32 bg-primary/30 blur-3xl rounded-full -mr-10 -mt-10 group-hover:bg-primary/50 transition-colors duration-500" />
<HoverShineOverlay shineColor="via-white/30" />
<h4 className="font-bold text-xl md:text-2xl relative z-10 leading-snug">{item.title}</h4>
{item.description && <p className="text-white/60 text-sm mt-3 relative z-10">{item.description}</p>}
</motion.div>
@@ -123,20 +125,19 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ delay: idx * 0.1 }}
className={`${gridClasses} group trassen-border border border-white/5 rounded-3xl overflow-hidden`}
className={gridClasses}
>
<div className="trassen-content" />
{!imgSrc && (
<div className="absolute inset-[1px] rounded-[inherit] bg-neutral-dark z-[2] transition-colors duration-500 group-hover:bg-primary-dark" />
<div className="absolute inset-0 bg-neutral-dark z-0 transition-colors duration-500 group-hover:bg-primary-dark" />
)}
{imgSrc && (
<>
<div className="absolute inset-[1px] rounded-[inherit] bg-white z-[2] overflow-hidden">
<div className="absolute inset-0 bg-white z-0">
<Image
src={imgSrc}
alt={item.title || ''}
fill
className="object-cover opacity-90 grayscale group-hover:grayscale-0 group-hover:scale-105 group-hover:opacity-100 transition-all duration-700 ease-in-out"
className="object-cover opacity-90 group-hover:scale-105 group-hover:opacity-100 transition-all duration-700 ease-in-out"
sizes={isLarge ? "(max-width: 768px) 100vw, 50vw" : "(max-width: 768px) 100vw, 25vw"}
/>
</div>

9
components/blocks/JobListingBlock.tsx
View File

@@ -54,8 +54,11 @@ export const JobListingBlock = async (props: JobListingBlockProps) => {
const isLink = !!messe.url;
const innerContent = (
<>
{/* Minimalist Trassen Content Background */}
<div className="trassen-content border border-white/5" />
{/* Glass Background Elements */}
<div className="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
<div className="absolute -top-32 -right-32 w-64 h-64 bg-primary/20 blur-[100px] rounded-full group-hover:bg-primary/30 transition-colors duration-700" />
<HoverShineOverlay shineColor="via-primary/10" />
<div className="relative z-10 flex-grow flex flex-col">
<div className="flex justify-between items-start mb-6">
@@ -113,7 +116,7 @@ export const JobListingBlock = async (props: JobListingBlockProps) => {
</>
);
const baseClasses = "group trassen-border rounded-[2rem] p-8 shadow-2xl transition-all duration-500 hover:scale-[1.02] hover:shadow-primary/10 flex flex-col h-full";
const baseClasses = "group relative bg-[#050B14] rounded-[2rem] p-8 overflow-hidden border border-white/5 shadow-2xl transition-all duration-500 hover:scale-[1.02] hover:shadow-primary/10 flex flex-col h-full";
if (isLink) {
return (

141
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, transitionMessage } = useTransition();
@@ -12,34 +13,16 @@ export function PageTransitionShutter() {
{isTransitioning && (
<motion.div
key="shutter"
initial={{ x: '-100%' }}
animate={{ x: '0%' }}
exit={{ x: '100%' }}
transition={{ duration: 0.7, ease: [0.76, 0, 0.24, 1] }}
className="fixed inset-0 z-[9998] bg-[#050B14] pointer-events-none flex items-center justify-center overflow-hidden"
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-[#050B14] pointer-events-none flex flex-col items-center justify-center overflow-hidden"
>
{/* HDD Drill Head (Leading Edge during entrance) */}
<motion.div
className="absolute top-0 right-0 bottom-0 w-[4px] bg-primary z-50 shadow-[0_0_40px_rgba(var(--color-primary),1)]"
initial={{ opacity: 1 }}
exit={{ opacity: 0 }} // Fade out drill head when exiting
>
{/* The glowing drill bit at the center */}
<div className="absolute top-1/2 -translate-y-1/2 right-[-2px] w-[10px] h-[60px] bg-white rounded-full shadow-[0_0_30px_rgba(255,255,255,1)]" />
<div className="absolute top-1/2 -translate-y-1/2 right-[-4px] w-[14px] h-[20px] bg-primary-light rounded-full" />
</motion.div>
{/* 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%)]" />
{/* HDD Exit Trail (Trailing Edge during exit) */}
<motion.div
className="absolute top-0 left-0 bottom-0 w-[2px] bg-primary/50 z-50 shadow-[0_0_20px_rgba(var(--color-primary),0.5)]"
initial={{ opacity: 0 }}
exit={{ opacity: 1 }} // Fade in trail when exiting
/>
{/* Subtle underground 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:64px_64px] opacity-30" />
{/* Deep Glow simulating underground tunnel */}
{/* 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
@@ -49,9 +32,9 @@ export function PageTransitionShutter() {
transition={{ duration: 0.4, delay: 0.2 }}
className="relative z-10 flex flex-col items-center w-full px-4"
>
{/* Masked Logo */}
{/* Single Masked Logo Container to prevent double-logo offset */}
<div
className="relative w-48 h-16 sm:w-64 sm:h-20 filter drop-shadow-[0_0_15px_rgba(255,255,255,0.15)] mb-8"
className="relative w-48 h-16 sm:w-64 sm:h-20 filter drop-shadow-[0_0_15px_rgba(255,255,255,0.15)]"
style={{
WebkitMaskImage: 'url(/assets/logo-white.png)',
WebkitMaskSize: 'contain',
@@ -63,7 +46,10 @@ export function PageTransitionShutter() {
maskPosition: 'center'
}}
>
{/* Base logo color (slightly dimmed to make the sweep visible) */}
<div className="absolute inset-0 bg-white/70" />
{/* Sweeping intense white light */}
<motion.div
className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-25deg]"
initial={{ left: '-150%' }}
@@ -72,7 +58,7 @@ export function PageTransitionShutter() {
/>
</div>
{/* Status Visualizer */}
{/* Transition Message or Graphical Visualizer */}
<AnimatePresence>
{transitionMessage && (
transitionMessage.startsWith('LANG_SWITCH:') ? (
@@ -81,24 +67,48 @@ export function PageTransitionShutter() {
return (
<motion.div
key="lang-switch-graphic"
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 20 }}
className="flex items-center gap-6 drop-shadow-[0_0_30px_rgba(255,255,255,0.1)]"
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 1.2 }}
className="mt-12 mb-4 flex items-center gap-6 sm:gap-10 drop-shadow-[0_0_30px_rgba(255,255,255,0.1)]"
>
<div className="text-4xl opacity-50 grayscale">{fromLang}</div>
{/* Connecting Trasse */}
<div className="w-16 h-[2px] bg-white/20 relative overflow-hidden">
{/* Old Language Flag - Fading out */}
<div className="w-20 h-20 sm:w-28 sm:h-28 rounded-[2rem] bg-white/5 border border-white/10 backdrop-blur-md flex items-center justify-center text-5xl sm:text-7xl relative overflow-hidden group grayscale opacity-50">
<motion.div
className="absolute top-0 bottom-0 w-8 bg-primary shadow-[0_0_10px_rgba(var(--color-primary),1)]"
animate={{ left: ['-100%', '200%'] }}
transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
className="absolute inset-0 bg-white/10"
animate={{ scale: [1, 2], opacity: [0.5, 0] }}
transition={{ duration: 1.5, repeat: Infinity }}
/>
<span className="relative z-10 leading-none">{fromLang}</span>
</div>
<div className="text-5xl relative drop-shadow-[0_0_15px_rgba(255,255,255,0.5)]">
{toLang}
{/* Animated Arrow connecting them */}
<div className="flex flex-col items-center gap-3">
<motion.div
animate={{ x: [0, 20, 0] }}
transition={{ duration: 1.2, repeat: Infinity, ease: "easeInOut" }}
className="text-primary drop-shadow-[0_0_15px_rgba(var(--color-primary),0.8)]"
>
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</motion.div>
<div className="flex gap-2 opacity-50">
<span className="w-2 h-2 rounded-full bg-primary animate-pulse shadow-[0_0_8px_rgba(var(--color-primary),1)]" />
<span className="w-2 h-2 rounded-full bg-primary animate-pulse shadow-[0_0_8px_rgba(var(--color-primary),1)]" style={{ animationDelay: '150ms' }} />
<span className="w-2 h-2 rounded-full bg-primary animate-pulse shadow-[0_0_8px_rgba(var(--color-primary),1)]" style={{ animationDelay: '300ms' }} />
</div>
</div>
{/* New Language Flag - Intense Glow */}
<div className="w-24 h-24 sm:w-32 sm:h-32 rounded-[2.5rem] bg-primary/10 border border-primary/50 shadow-[0_0_80px_rgba(var(--color-primary),0.5)] backdrop-blur-xl flex items-center justify-center text-6xl sm:text-8xl relative overflow-hidden ring-4 ring-primary/30">
<span className="relative z-10 drop-shadow-[0_0_15px_rgba(255,255,255,0.6)] leading-none">{toLang}</span>
<motion.div
className="absolute inset-0 w-[200%] h-full bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-[-20deg]"
animate={{ x: ['-100%', '100%'] }}
transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
/>
</div>
</motion.div>
);
@@ -106,17 +116,56 @@ export function PageTransitionShutter() {
) : (
<motion.div
key="text-message"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
className="px-6 py-2 rounded-full border border-primary/30 bg-primary/10 text-primary-light font-heading tracking-widest uppercase text-xs font-bold shadow-[0_0_20px_rgba(var(--color-primary),0.2)]"
initial={{ opacity: 0, y: 15, scale: 0.9 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: -15, scale: 0.9 }}
transition={{ type: "spring", stiffness: 300, damping: 25 }}
className="mt-10 mb-2 px-6 py-2.5 rounded-full border border-primary/40 bg-primary/10 shadow-[0_0_40px_rgba(var(--color-primary),0.3)] backdrop-blur-xl relative overflow-hidden flex items-center justify-center"
>
<motion.div
className="absolute inset-0 w-[200%] h-full bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-[-20deg]"
animate={{ x: ['-100%', '100%'] }}
transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
/>
<span className="text-white font-heading tracking-[0.2em] uppercase text-xs sm:text-sm font-extrabold flex items-center gap-3 relative z-10 drop-shadow-[0_0_8px_rgba(255,255,255,0.5)]">
<motion.svg
animate={{ rotate: 360 }}
transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-primary-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="2" y1="12" x2="22" y2="12"></line>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
</motion.svg>
{transitionMessage}
</span>
</motion.div>
)
)}
</AnimatePresence>
{/* Extremely minimalist transition indicator */}
<motion.div
className={`${transitionMessage ? 'mt-4' : '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>
)}

57
components/ui/decorations/TrenchLines.tsx
View File

@@ -1,57 +0,0 @@
'use client';
import React, { useEffect, useState } from 'react';
import { motion, useScroll, useSpring, useTransform } from 'framer-motion';
export function TrenchLines() {
const { scrollYProgress } = useScroll();
// Apply a spring to make the scroll movement feel heavier, industrial
const smoothProgress = useSpring(scrollYProgress, {
stiffness: 100,
damping: 30,
restDelta: 0.001
});
// Map progress to vertical position
const yPosition = useTransform(smoothProgress, [0, 1], ['-15vh', '100vh']);
const yPositionMarker = useTransform(smoothProgress, [0, 1], ['-15vh', '100vh']);
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) return null;
return (
<div className="fixed inset-0 pointer-events-none z-0 overflow-hidden hidden sm:block">
{/* Left Trench Line */}
<div className="absolute top-0 bottom-0 left-6 lg:left-12 w-[1px] bg-white/[0.03]">
<motion.div
className="absolute top-0 left-[-1px] w-[3px] h-[15vh] bg-gradient-to-b from-transparent via-primary to-transparent shadow-[0_0_15px_rgba(var(--color-primary),0.8)]"
style={{ y: yPosition }}
/>
{/* Subtle digging pulse marker */}
<motion.div
className="absolute left-[-2px] w-[5px] h-[5px] bg-white rounded-full shadow-[0_0_10px_rgba(255,255,255,1)]"
style={{ y: yPositionMarker, marginTop: '7.5vh' }}
/>
</div>
{/* Right Trench Line */}
<div className="absolute top-0 bottom-0 right-6 lg:right-12 w-[1px] bg-white/[0.03]">
<motion.div
className="absolute top-0 right-[-1px] w-[3px] h-[15vh] bg-gradient-to-b from-transparent via-primary to-transparent shadow-[0_0_15px_rgba(var(--color-primary),0.8)]"
style={{ y: yPosition }}
/>
{/* Subtle digging pulse marker */}
<motion.div
className="absolute right-[-2px] w-[5px] h-[5px] bg-white rounded-full shadow-[0_0_10px_rgba(255,255,255,1)]"
style={{ y: yPositionMarker, marginTop: '7.5vh' }}
/>
</div>
</div>
);
}