213 lines
11 KiB
TypeScript
213 lines
11 KiB
TypeScript
import { useTranslations } from 'next-intl';
|
|
import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
|
|
import Image from 'next/image';
|
|
|
|
export default function TeamPage() {
|
|
const t = useTranslations('Team');
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen bg-neutral-light">
|
|
{/* Hero Section */}
|
|
<section className="relative flex items-center justify-center overflow-hidden bg-primary-dark pt-[14%] pb-[12%]">
|
|
<div className="absolute inset-0 z-0">
|
|
<Image
|
|
src="/uploads/2024/12/DSC07655-Large.webp"
|
|
alt="KLZ Team"
|
|
fill
|
|
className="object-cover scale-105 animate-slow-zoom opacity-40"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
|
|
</div>
|
|
|
|
<Container className="relative z-10 text-center text-white max-w-5xl animate-slide-up">
|
|
<Badge variant="accent" className="mb-8 shadow-lg">Our People</Badge>
|
|
<h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold tracking-tight leading-[1.1] mb-8">
|
|
{t('hero.subtitle')}
|
|
</h1>
|
|
<p className="text-2xl md:text-3xl text-white/70 font-medium italic">
|
|
{t('hero.title')}
|
|
</p>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* Michael Bodemer Section - Sticky Narrative Split Layout */}
|
|
<section className="relative bg-white overflow-hidden">
|
|
<div className="flex flex-col lg:flex-row">
|
|
<div className="w-full lg:w-1/2 p-12 md:p-24 lg:p-32 flex flex-col justify-center bg-primary-dark text-white relative">
|
|
<div className="absolute top-0 right-0 w-32 h-full bg-accent/5 -skew-x-12 translate-x-1/2" />
|
|
<div className="relative z-10 animate-fade-in">
|
|
<Badge variant="accent" className="mb-8">Managing Director</Badge>
|
|
<Heading level={2} className="text-white mb-10 text-5xl md:text-6xl">
|
|
<span className="text-white">{t('michael.name')}</span>
|
|
</Heading>
|
|
<div className="relative mb-12">
|
|
<div className="absolute -left-8 top-0 bottom-0 w-1.5 bg-accent rounded-full" />
|
|
<p className="text-2xl md:text-3xl font-bold italic leading-relaxed pl-8 text-white/90">
|
|
"{t('michael.quote')}"
|
|
</p>
|
|
</div>
|
|
<p className="text-xl leading-relaxed text-white/70 mb-12 max-w-xl">
|
|
{t('michael.description')}
|
|
</p>
|
|
<Button
|
|
href="https://www.linkedin.com/in/michael-bodemer-33b493122/"
|
|
variant="accent"
|
|
size="xl"
|
|
className="group"
|
|
>
|
|
{t('michael.linkedin')}
|
|
<span className="ml-3 transition-transform group-hover:translate-x-2">→</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="w-full lg:w-1/2 relative min-h-[600px] lg:min-h-screen overflow-hidden">
|
|
<Image
|
|
src="/uploads/2024/12/DSC07768-Large.webp"
|
|
alt={t('michael.name')}
|
|
fill
|
|
className="object-cover scale-105 hover:scale-100 transition-transform duration-1000"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-primary-dark/20 to-transparent" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Legacy Section - Immersive Background */}
|
|
<section className="relative py-32 md:py-48 bg-primary-dark text-white overflow-hidden">
|
|
<div className="absolute inset-0 z-0">
|
|
<Image
|
|
src="/uploads/2024/12/1694273920124-copy.webp"
|
|
alt="Legacy"
|
|
fill
|
|
className="object-cover opacity-30 scale-110 animate-slow-zoom"
|
|
/>
|
|
<div className="absolute inset-0 bg-primary-dark/60 mix-blend-multiply" />
|
|
</div>
|
|
<Container className="relative z-10">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
|
|
<div className="lg:col-span-6">
|
|
<Heading level={2} subtitle="Our Heritage" className="text-white mb-10">
|
|
<span className="text-white">{t('legacy.title')}</span>
|
|
</Heading>
|
|
<div className="space-y-8 text-xl md:text-2xl text-white/80 leading-relaxed font-medium">
|
|
<p className="border-l-4 border-accent pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-2xl">
|
|
{t('legacy.p1')}
|
|
</p>
|
|
<p className="pl-9">
|
|
{t('legacy.p2')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="lg:col-span-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-[32px] hover:bg-white/10 transition-colors">
|
|
<div className="text-4xl font-extrabold text-accent mb-2">Expertise</div>
|
|
<div className="text-sm font-bold uppercase tracking-widest text-white/50">Decades of Industry Knowledge</div>
|
|
</div>
|
|
<div className="p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-[32px] hover:bg-white/10 transition-colors">
|
|
<div className="text-4xl font-extrabold text-accent mb-2">Network</div>
|
|
<div className="text-sm font-bold uppercase tracking-widest text-white/50">Strong Global Partnerships</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* Klaus Mintel Section - Reversed Split Layout */}
|
|
<section className="relative bg-white overflow-hidden">
|
|
<div className="flex flex-col lg:flex-row">
|
|
<div className="w-full lg:w-1/2 relative min-h-[600px] lg:min-h-screen overflow-hidden order-2 lg:order-1">
|
|
<Image
|
|
src="/uploads/2024/12/DSC07963-Large.webp"
|
|
alt={t('klaus.name')}
|
|
fill
|
|
className="object-cover scale-105 hover:scale-100 transition-transform duration-1000"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-l from-primary-dark/20 to-transparent" />
|
|
</div>
|
|
<div className="w-full lg:w-1/2 p-12 md:p-24 lg:p-32 flex flex-col justify-center bg-neutral-light text-primary relative order-1 lg:order-2">
|
|
<div className="absolute top-0 left-0 w-32 h-full bg-primary/5 skew-x-12 -translate-x-1/2" />
|
|
<div className="relative z-10 animate-fade-in">
|
|
<Badge variant="primary" className="mb-8">Founder & Visionary</Badge>
|
|
<Heading level={2} className="text-primary mb-10 text-5xl md:text-6xl">
|
|
{t('klaus.name')}
|
|
</Heading>
|
|
<div className="relative mb-12">
|
|
<div className="absolute -left-8 top-0 bottom-0 w-1.5 bg-primary rounded-full" />
|
|
<p className="text-2xl md:text-3xl font-bold italic leading-relaxed pl-8 text-text-secondary">
|
|
"{t('klaus.quote')}"
|
|
</p>
|
|
</div>
|
|
<p className="text-xl leading-relaxed text-text-secondary mb-12 max-w-xl">
|
|
{t('klaus.description')}
|
|
</p>
|
|
<Button
|
|
href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/"
|
|
variant="primary"
|
|
size="xl"
|
|
className="group"
|
|
>
|
|
{t('klaus.linkedin')}
|
|
<span className="ml-3 transition-transform group-hover:translate-x-2">→</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Manifesto Section - Modern Grid */}
|
|
<Section className="bg-white text-primary">
|
|
<Container>
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-20">
|
|
<div className="lg:col-span-4">
|
|
<div className="sticky top-32">
|
|
<Heading level={2} subtitle="Our Values">
|
|
{t('manifesto.title')}
|
|
</Heading>
|
|
<p className="text-xl text-text-secondary leading-relaxed">
|
|
Our core principles guide every decision we make and every cable we deliver.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-10">
|
|
{[0, 1, 2, 3, 4, 5].map((idx) => (
|
|
<div key={idx} className="p-10 bg-neutral-light rounded-[40px] border border-transparent hover:border-accent hover:bg-white hover:shadow-2xl transition-all duration-500 group">
|
|
<div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mb-8 shadow-sm group-hover:bg-accent transition-colors duration-500">
|
|
<span className="text-primary font-extrabold text-2xl group-hover:text-primary-dark">0{idx + 1}</span>
|
|
</div>
|
|
<h3 className="text-2xl font-bold mb-4 text-primary">{t(`manifesto.items.${idx}.title`)}</h3>
|
|
<p className="text-text-secondary text-lg leading-relaxed">{t(`manifesto.items.${idx}.description`)}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
|
|
{/* Gallery Section - Premium Treatment */}
|
|
<Section className="bg-primary-dark py-32">
|
|
<Container>
|
|
<Heading level={2} subtitle="Behind the Scenes" align="center" className="text-white mb-20">
|
|
<span className="text-white">Life at KLZ</span>
|
|
</Heading>
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-6">
|
|
{[
|
|
'/uploads/2024/12/DSC07539-Large-600x400.webp',
|
|
'/uploads/2024/12/DSC07460-Large-600x400.webp',
|
|
'/uploads/2024/12/DSC07469-Large-600x400.webp',
|
|
'/uploads/2024/12/DSC07433-Large-600x400.webp',
|
|
'/uploads/2024/12/DSC07387-Large-600x400.webp'
|
|
].map((src, idx) => (
|
|
<div key={idx} className="relative aspect-[3/4] rounded-[32px] overflow-hidden group shadow-2xl">
|
|
<Image src={src} alt="Team Gallery" fill className="object-cover transition-transform duration-1000 group-hover:scale-110" />
|
|
<div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-transparent transition-all duration-500" />
|
|
<div className="absolute inset-0 border-0 group-hover:border-[12px] border-white/10 transition-all duration-500 pointer-events-none" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
</div>
|
|
);
|
|
}
|