Marc Mintel
a111851176
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 13s
Build & Deploy / 🧪 QA (push) Successful in 2m56s
Build & Deploy / 🏗️ Build (push) Successful in 4m14s
Build & Deploy / 🚀 Deploy (push) Successful in 29s
Build & Deploy / 🧪 Smoke Test (push) Successful in 1m3s
Build & Deploy / ⚡ Lighthouse (push) Successful in 3m7s
Build & Deploy / 🔔 Notify (push) Successful in 2s
325 lines
14 KiB
TypeScript
325 lines
14 KiB
TypeScript
import { getTranslations, setRequestLocale } from 'next-intl/server';
|
|
import { Metadata } from 'next';
|
|
import JsonLd from '@/components/JsonLd';
|
|
import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema';
|
|
import { Section, Container, Heading, Badge, Button } from '@/components/ui';
|
|
import Image from 'next/image';
|
|
import Reveal from '@/components/Reveal';
|
|
import Gallery from '@/components/team/Gallery';
|
|
import TrackedButton from '@/components/analytics/TrackedButton';
|
|
|
|
interface TeamPageProps {
|
|
params: Promise<{
|
|
locale: string;
|
|
}>;
|
|
}
|
|
|
|
export async function generateMetadata({ params }: TeamPageProps): Promise<Metadata> {
|
|
const { locale } = await params;
|
|
const t = await getTranslations({ locale, namespace: 'Team' });
|
|
const title = t('meta.title') || t('hero.subtitle');
|
|
const description = t('meta.description') || t('hero.title');
|
|
return {
|
|
title,
|
|
description,
|
|
alternates: {
|
|
canonical: `${SITE_URL}/${locale}/team`,
|
|
languages: {
|
|
de: `${SITE_URL}/de/team`,
|
|
en: `${SITE_URL}/en/team`,
|
|
'x-default': `${SITE_URL}/en/team`,
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: `${title} | KLZ Cables`,
|
|
description,
|
|
url: `${SITE_URL}/${locale}/team`,
|
|
},
|
|
twitter: {
|
|
card: 'summary_large_image',
|
|
title: `${title} | KLZ Cables`,
|
|
description,
|
|
},
|
|
};
|
|
}
|
|
|
|
export default async function TeamPage({ params }: TeamPageProps) {
|
|
const { locale } = await params;
|
|
setRequestLocale(locale);
|
|
const t = await getTranslations({ locale, namespace: 'Team' });
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen bg-neutral-light">
|
|
<JsonLd
|
|
id="breadcrumb-team"
|
|
data={getBreadcrumbSchema([{ name: t('hero.subtitle'), item: `/team` }])}
|
|
/>
|
|
<JsonLd
|
|
id="person-michael"
|
|
data={{
|
|
'@context': 'https://schema.org',
|
|
'@type': 'Person',
|
|
name: t('michael.name'),
|
|
jobTitle: t('michael.role'),
|
|
worksFor: {
|
|
'@type': 'Organization',
|
|
name: 'KLZ Cables',
|
|
},
|
|
sameAs: ['https://www.linkedin.com/in/michael-bodemer-33b493122/'],
|
|
image: `${SITE_URL}/uploads/2024/12/DSC07768-Large.webp`,
|
|
}}
|
|
/>
|
|
<JsonLd
|
|
id="person-klaus"
|
|
data={{
|
|
'@context': 'https://schema.org',
|
|
'@type': 'Person',
|
|
name: t('klaus.name'),
|
|
jobTitle: t('klaus.role'),
|
|
worksFor: {
|
|
'@type': 'Organization',
|
|
name: 'KLZ Cables',
|
|
},
|
|
sameAs: ['https://www.linkedin.com/in/klaus-mintel-b80a8b193/'],
|
|
image: `${SITE_URL}/uploads/2024/12/DSC07963-Large.webp`,
|
|
}}
|
|
/>
|
|
{/* Hero Section */}
|
|
<Reveal>
|
|
<section className="relative flex items-center justify-center overflow-hidden bg-primary-dark pt-32 pb-24 md:pt-[14%] md: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-30 md:opacity-40"
|
|
sizes="100vw"
|
|
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">
|
|
<Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
|
|
{t('hero.badge')}
|
|
</Badge>
|
|
<Heading level={1} className="text-white mb-4 md:mb-8">
|
|
{t('hero.subtitle')}
|
|
</Heading>
|
|
<p className="text-lg md:text-2xl text-white/70 font-medium italic">
|
|
{t('hero.title')}
|
|
</p>
|
|
</Container>
|
|
</section>
|
|
</Reveal>
|
|
|
|
{/* Michael Bodemer Section - Sticky Narrative Split Layout */}
|
|
<article className="relative bg-white overflow-hidden">
|
|
<div className="flex flex-col lg:flex-row">
|
|
<Reveal className="w-full lg:w-1/2 p-6 md:p-24 lg:p-32 flex flex-col justify-center bg-primary-dark text-white relative order-2 lg:order-1">
|
|
<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">
|
|
<Badge variant="accent" className="mb-4 md:mb-8">
|
|
{t('michael.role')}
|
|
</Badge>
|
|
<Heading level={2} className="text-white mb-6 md:mb-10 text-3xl md:text-5xl">
|
|
<span className="text-white">{t('michael.name')}</span>
|
|
</Heading>
|
|
<div className="relative mb-6 md:mb-12">
|
|
<div className="absolute -left-4 md:-left-8 top-0 bottom-0 w-1 md:w-1.5 bg-accent rounded-full" />
|
|
<p className="text-lg md:text-2xl font-bold italic leading-relaxed pl-5 md:pl-8 text-white/90">
|
|
{t('michael.quote')}
|
|
</p>
|
|
</div>
|
|
<p className="text-base md:text-xl leading-relaxed text-white/70 mb-6 md:mb-12 max-w-xl">
|
|
{t('michael.description')}
|
|
</p>
|
|
<TrackedButton
|
|
href="https://www.linkedin.com/in/michael-bodemer-33b493122/"
|
|
variant="accent"
|
|
size="lg"
|
|
className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl active:scale-95 transition-transform"
|
|
eventProperties={{
|
|
type: 'social_linkedin',
|
|
person: 'Michael Bodemer',
|
|
location: 'team_page',
|
|
}}
|
|
>
|
|
{t('michael.linkedin')}
|
|
<span className="ml-3 transition-transform group-hover:translate-x-2">→</span>
|
|
</TrackedButton>
|
|
</div>
|
|
</Reveal>
|
|
<Reveal className="w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden order-1 lg:order-2">
|
|
<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"
|
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-primary-dark/60 lg:bg-gradient-to-r lg:from-primary-dark/20 to-transparent" />
|
|
</Reveal>
|
|
</div>
|
|
</article>
|
|
|
|
{/* Legacy Section - Immersive Background */}
|
|
<Reveal>
|
|
<section className="relative py-16 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={t('legacy.subtitle')}
|
|
fill
|
|
className="object-cover opacity-20 md:opacity-30 scale-110 animate-slow-zoom"
|
|
sizes="100vw"
|
|
/>
|
|
<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-8 md:gap-16 items-center">
|
|
<div className="lg:col-span-6">
|
|
<Heading
|
|
level={2}
|
|
subtitle={t('legacy.subtitle')}
|
|
className="text-white mb-6 md:mb-10"
|
|
>
|
|
<span className="text-white">{t('legacy.title')}</span>
|
|
</Heading>
|
|
<div className="space-y-4 md:space-y-8 text-base md:text-2xl text-white/80 leading-relaxed font-medium">
|
|
<p className="border-l-4 border-accent pl-5 md:pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-xl md:rounded-r-2xl">
|
|
{t('legacy.p1')}
|
|
</p>
|
|
<p className="pl-6 md:pl-9 line-clamp-3 md:line-clamp-none">{t('legacy.p2')}</p>
|
|
</div>
|
|
</div>
|
|
<div className="lg:col-span-6 grid grid-cols-2 md:grid-cols-2 gap-3 md:gap-6">
|
|
<div className="p-4 md:p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl md:rounded-[32px] hover:bg-white/10 transition-colors">
|
|
<div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">
|
|
{t('legacy.expertise')}
|
|
</div>
|
|
<div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">
|
|
{t('legacy.expertiseDesc')}
|
|
</div>
|
|
</div>
|
|
<div className="p-4 md:p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl md:rounded-[32px] hover:bg-white/10 transition-colors">
|
|
<div className="text-xl md:text-4xl font-extrabold text-accent mb-1 md:mb-2">
|
|
{t('legacy.network')}
|
|
</div>
|
|
<div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">
|
|
{t('legacy.networkDesc')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
</Reveal>
|
|
|
|
{/* Klaus Mintel Section - Reversed Split Layout */}
|
|
<article className="relative bg-white overflow-hidden">
|
|
<div className="flex flex-col lg:flex-row">
|
|
<Reveal className="w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden 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"
|
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-white/60 lg:bg-gradient-to-l lg:from-primary-dark/20 to-transparent" />
|
|
</Reveal>
|
|
<Reveal className="w-full lg:w-1/2 p-6 md:p-24 lg:p-32 flex flex-col justify-center bg-neutral-light text-saturated relative order-2">
|
|
<div className="absolute top-0 left-0 w-32 h-full bg-saturated/5 skew-x-12 -translate-x-1/2" />
|
|
<div className="relative z-10">
|
|
<Badge variant="saturated" className="mb-4 md:mb-8">
|
|
{t('klaus.role')}
|
|
</Badge>
|
|
<Heading level={2} className="text-saturated mb-6 md:mb-10 text-3xl md:text-6xl">
|
|
{t('klaus.name')}
|
|
</Heading>
|
|
<div className="relative mb-6 md:mb-12">
|
|
<div className="absolute -left-4 md:-left-8 top-0 bottom-0 w-1 md:w-1.5 bg-saturated rounded-full" />
|
|
<p className="text-lg md:text-3xl font-bold italic leading-relaxed pl-5 md:pl-8 text-text-secondary">
|
|
{t('klaus.quote')}
|
|
</p>
|
|
</div>
|
|
<p className="text-base md:text-xl leading-relaxed text-text-secondary mb-6 md:mb-12 max-w-xl">
|
|
{t('klaus.description')}
|
|
</p>
|
|
<TrackedButton
|
|
href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/"
|
|
variant="saturated"
|
|
size="lg"
|
|
className="group w-full md:w-auto md:h-16 md:px-10 md:text-xl active:scale-95 transition-transform"
|
|
eventProperties={{
|
|
type: 'social_linkedin',
|
|
person: 'Klaus Mintel',
|
|
location: 'team_page',
|
|
}}
|
|
>
|
|
{t('klaus.linkedin')}
|
|
<span className="ml-3 transition-transform group-hover:translate-x-2">→</span>
|
|
</TrackedButton>
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
</article>
|
|
|
|
{/* Manifesto Section - Modern Grid */}
|
|
<Section className="bg-white text-primary py-16 md:py-28">
|
|
<Container>
|
|
<div className="sticky-narrative-container">
|
|
<div className="sticky-narrative-sidebar mb-8 lg:mb-0">
|
|
<div className="lg:sticky lg:top-32">
|
|
<Heading level={2} subtitle={t('manifesto.subtitle')} className="mb-4 md:mb-8">
|
|
{t('manifesto.title')}
|
|
</Heading>
|
|
<p className="text-base md:text-xl text-text-secondary leading-relaxed">
|
|
{t('manifesto.tagline')}
|
|
</p>
|
|
|
|
{/* Mobile-only progress indicator */}
|
|
<div className="flex lg:hidden mt-8 gap-2">
|
|
{[0, 1, 2, 3, 4, 5].map((i) => (
|
|
<div
|
|
key={i}
|
|
className="h-1.5 flex-1 bg-neutral-medium rounded-full overflow-hidden"
|
|
>
|
|
<div className="h-full bg-accent w-0 group-active:w-full transition-all duration-500" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul className="sticky-narrative-content grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-10 list-none p-0 m-0">
|
|
{[0, 1, 2, 3, 4, 5].map((idx) => (
|
|
<li
|
|
key={idx}
|
|
className="p-6 md:p-10 bg-neutral-light rounded-2xl md:rounded-[40px] border border-transparent hover:border-accent hover:bg-white hover:shadow-2xl transition-all duration-500 group active:scale-[0.98] touch-target-none"
|
|
>
|
|
<div className="w-10 h-10 md:w-16 md:h-16 bg-white rounded-xl md:rounded-2xl flex items-center justify-center mb-4 md:mb-8 shadow-sm group-hover:bg-accent transition-colors duration-500">
|
|
<span className="text-primary font-extrabold text-lg md:text-2xl group-hover:text-primary-dark">
|
|
0{idx + 1}
|
|
</span>
|
|
</div>
|
|
<h3 className="text-lg md:text-2xl font-bold mb-2 md:mb-4 text-primary">
|
|
{t(`manifesto.items.${idx}.title`)}
|
|
</h3>
|
|
<p className="text-sm md:text-lg text-text-secondary leading-relaxed">
|
|
{t(`manifesto.items.${idx}.description`)}
|
|
</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
|
|
<Reveal>
|
|
<Gallery />
|
|
</Reveal>
|
|
</div>
|
|
);
|
|
}
|