61 lines
2.5 KiB
TypeScript
61 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import Image from 'next/image';
|
|
import { useTranslations, useLocale } from 'next-intl';
|
|
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-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 scale-105 animate-slow-zoom"
|
|
unoptimized
|
|
/>
|
|
<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-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="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>
|
|
|
|
<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">→</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>
|
|
);
|
|
}
|