170 lines
7.0 KiB
TypeScript
170 lines
7.0 KiB
TypeScript
import { useTranslations } from 'next-intl';
|
|
import { Section, Container } 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">
|
|
{/* Hero Section */}
|
|
<section className="relative flex items-center justify-center overflow-hidden bg-neutral-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"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-[#0a0000] to-[rgba(10,10,10,0.5)] opacity-80" />
|
|
</div>
|
|
|
|
<Container className="relative z-10 text-center text-white max-w-4xl">
|
|
<h5 className="text-xl md:text-2xl font-medium mb-4 text-primary">
|
|
{t('hero.title')}
|
|
</h5>
|
|
<h2 className="text-3xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
|
|
{t('hero.subtitle')}
|
|
</h2>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* Michael Bodemer Section */}
|
|
<section className="relative bg-[#011fff] text-white overflow-hidden">
|
|
<div className="flex flex-col md:flex-row">
|
|
<div className="w-full md:w-1/2 p-12 md:p-24 flex flex-col justify-center">
|
|
<h1 className="text-4xl md:text-5xl font-bold mb-8">{t('michael.name')}</h1>
|
|
<div className="w-12 h-1 bg-white mb-8" />
|
|
<h2 className="text-2xl md:text-3xl font-medium italic mb-8 leading-relaxed">
|
|
{t('michael.quote')}
|
|
</h2>
|
|
<div className="w-12 h-1 bg-white mb-8" />
|
|
<p className="text-lg leading-relaxed opacity-90 mb-8">
|
|
{t('michael.description')}
|
|
</p>
|
|
<a
|
|
href="https://www.linkedin.com/in/michael-bodemer-33b493122/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center text-white font-bold border-2 border-white px-6 py-3 rounded-full hover:bg-white hover:text-[#011fff] transition-colors w-fit group"
|
|
>
|
|
{t('michael.linkedin')}
|
|
<span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
|
|
</a>
|
|
</div>
|
|
<div className="w-full md:w-1/2 relative min-h-[50vh] md:min-h-full">
|
|
<Image
|
|
src="/uploads/2024/12/DSC07768-Large.webp"
|
|
alt={t('michael.name')}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Legacy Section */}
|
|
<section className="relative py-[10%] bg-neutral-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"
|
|
/>
|
|
<div className="absolute inset-0 bg-[#263336] opacity-90" />
|
|
</div>
|
|
<Container className="relative z-10">
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-12">
|
|
<div className="md:col-span-5">
|
|
<h3 className="text-3xl font-bold mb-6">{t('legacy.title')}</h3>
|
|
<div className="space-y-6 text-lg opacity-90">
|
|
<p>
|
|
{t('legacy.p1')}
|
|
</p>
|
|
<p>
|
|
{t('legacy.p2')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
{/* Klaus Mintel Section */}
|
|
<section className="relative bg-[#011fff] text-white overflow-hidden">
|
|
<div className="flex flex-col md:flex-row">
|
|
<div className="w-full md:w-1/2 relative min-h-[50vh] md:min-h-full order-2 md:order-1">
|
|
<Image
|
|
src="/uploads/2024/12/DSC07963-Large.webp"
|
|
alt={t('klaus.name')}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div className="w-full md:w-1/2 p-12 md:p-24 flex flex-col justify-center order-1 md:order-2">
|
|
<h1 className="text-4xl md:text-5xl font-bold mb-8">{t('klaus.name')}</h1>
|
|
<div className="w-12 h-1 bg-white mb-8" />
|
|
<h2 className="text-2xl md:text-3xl font-medium italic mb-8 leading-relaxed">
|
|
{t('klaus.quote')}
|
|
</h2>
|
|
<div className="w-12 h-1 bg-white mb-8" />
|
|
<p className="text-lg leading-relaxed opacity-90 mb-8">
|
|
{t('klaus.description')}
|
|
</p>
|
|
<a
|
|
href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center text-white font-bold border-2 border-white px-6 py-3 rounded-full hover:bg-white hover:text-[#011fff] transition-colors w-fit group"
|
|
>
|
|
{t('klaus.linkedin')}
|
|
<span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Manifesto Section */}
|
|
<Section className="bg-white text-neutral-dark">
|
|
<Container>
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
|
<div className="lg:col-span-4">
|
|
<h2 className="text-4xl font-bold text-primary mb-6 sticky top-24">{t('manifesto.title')}</h2>
|
|
</div>
|
|
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{[0, 1, 2, 3, 4, 5].map((idx) => (
|
|
<div key={idx} className="bg-neutral-light p-6 rounded-lg border border-neutral hover:border-primary transition-colors">
|
|
<div className="text-primary font-mono text-xl mb-4">0{idx + 1}</div>
|
|
<h3 className="text-xl font-bold mb-3">{t(`manifesto.items.${idx}.title`)}</h3>
|
|
<p className="text-text-secondary">{t(`manifesto.items.${idx}.description`)}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
|
|
{/* Gallery Section */}
|
|
<Section className="bg-neutral-dark py-0 pb-24 pt-24">
|
|
<Container>
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
|
{[
|
|
'/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-video rounded-lg overflow-hidden opacity-80 hover:opacity-100 transition-opacity">
|
|
<Image src={src} alt="Team Gallery" fill className="object-cover" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
</div>
|
|
);
|
|
}
|