102 lines
4.2 KiB
TypeScript
102 lines
4.2 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
|
|
export default function ExtendedGroup() {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
([entry]) => {
|
|
if (entry.isIntersecting) {
|
|
setIsVisible(true);
|
|
}
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
|
|
const section = document.getElementById('extended-group');
|
|
if (section) {
|
|
observer.observe(section);
|
|
}
|
|
|
|
return () => {
|
|
if (section) {
|
|
observer.unobserve(section);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
const stats = [
|
|
{ text: 'seit 1984 am Markt', highlight: '1984' },
|
|
{ text: 'ca. 140 Unternehmen', highlight: '140' },
|
|
{ text: '6500 Mitarbeiter', highlight: '6500' }
|
|
];
|
|
|
|
return (
|
|
<section id="extended-group" className="py-12 sm:py-16 lg:py-24 bg-white overflow-hidden">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className={`transition-all duration-700 ${
|
|
isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'
|
|
}`}>
|
|
<h2 className="font-outfit text-3xl sm:text-4xl lg:text-5xl font-bold text-[#C25B3F]
|
|
mb-4 sm:mb-6 section-enter section-enter-active">
|
|
Die erweiterte Unternehmensgruppe
|
|
</h2>
|
|
<p className="font-outfit text-base sm:text-lg text-gray-600 mb-8 sm:mb-12 max-w-4xl
|
|
leading-relaxed section-enter section-enter-active delay-100">
|
|
Das Technologie Team und deren Beteiligungen werden selbstständig und unabhängig geführt.
|
|
Gleichzeitig können die Beteiligungen aber auf die Leistungen und Netzwerke der anderen
|
|
Gesellschafterunternehmen zurückgreifen.
|
|
</p>
|
|
|
|
<div className="relative rounded-2xl overflow-hidden shadow-lg group"
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}>
|
|
{/* Image Container */}
|
|
<div className="relative">
|
|
<img
|
|
src="/images/zentrale.png"
|
|
alt="Zentrale Oberhausen"
|
|
className="w-full aspect-[2/1] object-cover transition-transform duration-700
|
|
group-hover:scale-105 will-change-transform"
|
|
loading="lazy"
|
|
/>
|
|
|
|
{/* Dark Overlay */}
|
|
<div className={`absolute inset-0 bg-black/20 transition-opacity duration-500
|
|
${isHovered ? 'opacity-0' : 'opacity-100'}`} />
|
|
</div>
|
|
|
|
{/* Info Section */}
|
|
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90
|
|
via-black/60 to-transparent p-4 sm:p-6 lg:p-8 transform transition-all
|
|
duration-500 translate-y-0 group-hover:translate-y-0">
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-white">
|
|
{stats.map((stat, index) => (
|
|
<div key={index} className="flex flex-col items-center sm:items-start
|
|
transform transition-all duration-500
|
|
group-hover:translate-y-0 opacity-90
|
|
group-hover:opacity-100">
|
|
<p className="font-outfit text-base sm:text-lg text-center sm:text-left">
|
|
<span className="font-semibold text-orange-400">{stat.highlight}</span>
|
|
{' ' + stat.text.replace(stat.highlight, '')}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Location Badge */}
|
|
<div className="absolute top-4 left-4 bg-white/90 backdrop-blur-sm px-4 py-2
|
|
rounded-full shadow-lg transform transition-all duration-300
|
|
group-hover:scale-105">
|
|
<p className="font-outfit text-sm font-medium text-gray-800">
|
|
Zentrale: Oberhausen
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |