mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

wip
Some checks failed
Build & Deploy / deploy (push) Failing after 19s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 16:33:19 +01:00
parent d4e4142381
commit d8184caa9d
17 changed files with 287 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/[locale]/team/page.tsx
View File

@@ -22,7 +22,7 @@ export default function TeamPage() {
</div>
<Container className="relative z-10 text-center text-white max-w-5xl animate-slide-up">
<Badge variant="accent" className="mb-4 md:mb-8 shadow-lg">Our People</Badge>
<Badge variant="accent" className="mb-4 md:mb-8 shadow-lg">{t('hero.badge')}</Badge>
<h1 className="text-3xl md:text-7xl lg:text-8xl font-extrabold tracking-tight leading-[1.1] mb-4 md:mb-8">
{t('hero.subtitle')}
</h1>
@@ -38,7 +38,7 @@ export default function TeamPage() {
<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">Managing Director</Badge>
<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-6xl">
<span className="text-white">{t('michael.name')}</span>
</Heading>
@@ -80,7 +80,7 @@ export default function TeamPage() {
<div className="absolute inset-0 z-0">
<Image
src="/uploads/2024/12/1694273920124-copy.webp"
alt="Legacy"
alt={t('legacy.subtitle')}
fill
className="object-cover opacity-20 md:opacity-30 scale-110 animate-slow-zoom"
sizes="100vw"
@@ -90,7 +90,7 @@ export default function TeamPage() {
<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="Our Heritage" className="text-white mb-6 md:mb-10">
<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">
@@ -104,12 +104,12 @@ export default function TeamPage() {
</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">Expertise</div>
<div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">Decades of Knowledge</div>
<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">Network</div>
<div className="text-[10px] md:text-sm font-bold uppercase tracking-widest text-white/50">Global Partnerships</div>
<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>
@@ -132,7 +132,7 @@ export default function TeamPage() {
<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-primary relative 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">
<Badge variant="primary" className="mb-4 md:mb-8">Founder & Visionary</Badge>
<Badge variant="primary" className="mb-4 md:mb-8">{t('klaus.role')}</Badge>
<Heading level={2} className="text-primary mb-6 md:mb-10 text-3xl md:text-6xl">
{t('klaus.name')}
</Heading>
@@ -165,11 +165,11 @@ export default function TeamPage() {
<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="Our Values" className="mb-4 md:mb-8">
<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">
Our core principles guide every decision we make and every cable we deliver.
{t('manifesto.tagline')}
</p>
{/* Mobile-only progress indicator */}
@@ -200,8 +200,8 @@ export default function TeamPage() {
{/* Gallery Section - Premium Treatment */}
<Section className="bg-primary-dark py-16 md:py-32">
<Container>
<Heading level={2} subtitle="Behind the Scenes" align="center" className="text-white mb-12 md:mb-20">
<span className="text-white">Life at KLZ</span>
<Heading level={2} subtitle={t('gallery.subtitle')} align="center" className="text-white mb-12 md:mb-20">
<span className="text-white">{t('gallery.title')}</span>
</Heading>
<div className="grid grid-cols-2 md:grid-cols-5 gap-3 md:gap-6">
{[
@@ -212,7 +212,7 @@ export default function TeamPage() {
'/uploads/2024/12/DSC07387-Large-600x400.webp'
].map((src, idx) => (
<div key={idx} className="relative aspect-[3/4] rounded-2xl md: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" />
<Image src={src} alt={t('gallery.title')} 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-[8px] md:group-hover:border-[12px] border-white/10 transition-all duration-500 pointer-events-none" />
</div>