50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
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';
|
|
|
|
export default function MeetTheTeam() {
|
|
const t = useTranslations('Home.meetTheTeam');
|
|
const locale = useLocale();
|
|
|
|
return (
|
|
<Section className="relative py-24 md:py-32 overflow-hidden">
|
|
<div className="absolute inset-0 z-0">
|
|
<Image
|
|
src="/uploads/2024/12/DSC08036-Large.webp"
|
|
alt="KLZ Team"
|
|
fill
|
|
className="object-cover"
|
|
unoptimized
|
|
/>
|
|
<div className="absolute inset-0 bg-[#263336] bg-gradient-to-r from-[#263336] via-[#263336]/25 to-transparent opacity-100" />
|
|
</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="bg-white/10 backdrop-blur-sm rounded-lg p-6 mb-8 border border-white/10">
|
|
<p className="text-lg leading-relaxed">
|
|
{t('description')}
|
|
</p>
|
|
</div>
|
|
|
|
<Button href={`/${locale}/team`} variant="primary" size="lg">
|
|
{t('cta')}
|
|
</Button>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|