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

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 02:57:53 +01:00
parent de87c62312
commit 021d23ab93
21 changed files with 967 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
components/home/MeetTheTeam.tsx
View File

@@ -1,47 +1,58 @@
import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useTranslations, useLocale } from 'next-intl';
import { Section, Container, Button } from '../../components/ui';
import { Section, Container, Button, Heading } from '../../components/ui';
export default function MeetTheTeam() {
const t = useTranslations('Home.meetTheTeam');
const locale = useLocale();
return (
<Section className="relative py-24 md:py-32 overflow-hidden">
<Section className="relative py-32 md:py-48 overflow-hidden">
<div className="absolute inset-0 z-0">
<Image
src="/uploads/2024/12/DSC08036-Large.webp"
alt="KLZ Team"
fill
className="object-cover"
className="object-cover scale-105 animate-slow-zoom"
unoptimized
/>
<div className="absolute inset-0 bg-[#263336] bg-gradient-to-r from-[#263336] via-[#263336]/25 to-transparent opacity-100" />
<div className="absolute inset-0 bg-primary-dark/70 mix-blend-multiply" />
<div className="absolute inset-0 bg-gradient-to-t from-primary-dark via-primary-dark/20 to-transparent" />
</div>
<Container className="relative z-10">
<div className="max-w-2xl text-white">
<div className="flex items-center gap-4 mb-6">
<div className="w-12 h-12 rounded-full overflow-hidden border-2 border-white/20">
{/* Placeholder for avatar if needed, or just icon */}
<div className="w-full h-full bg-primary flex items-center justify-center">
<span className="font-bold">KLZ</span>
</div>
</div>
<h2 className="text-3xl font-bold">{t('title')}</h2>
</div>
<div className="max-w-3xl text-white animate-slide-up">
<Heading level={2} subtitle="The People Behind KLZ" className="text-white mb-8">
<span className="text-white">{t('title')}</span>
</Heading>
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 mb-8 border border-white/10">
<p className="text-lg leading-relaxed">
{t('description')}
<div className="relative mb-12">
<div className="absolute -left-8 top-0 bottom-0 w-1 bg-accent rounded-full" />
<p className="text-2xl md:text-3xl leading-relaxed font-medium italic text-white/90 pl-8">
"{t('description')}"
</p>
</div>
<Button href={`/${locale}/team`} variant="primary" size="lg">
{t('cta')}
</Button>
<div className="flex flex-wrap gap-8 items-center">
<Button href={`/${locale}/team`} variant="accent" size="xl" className="group">
{t('cta')}
<span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
</Button>
<div className="flex -space-x-4">
{[1, 2, 3, 4].map((i) => (
<div key={i} className="w-14 h-14 rounded-full border-4 border-primary-dark bg-neutral-medium overflow-hidden">
<div className="w-full h-full bg-primary-light flex items-center justify-center text-primary font-bold text-xs">
KLZ
</div>
</div>
))}
<div className="w-14 h-14 rounded-full border-4 border-primary-dark bg-accent flex items-center justify-center text-primary-dark font-bold text-sm">
+12
</div>
</div>
</div>
</div>
</Container>
</Section>