73 lines
2.8 KiB
TypeScript
73 lines
2.8 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 teamT = useTranslations('Team');
|
|
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={t('subtitle')}
|
|
fill
|
|
className="object-cover scale-105 animate-slow-zoom"
|
|
sizes="100vw"
|
|
/>
|
|
<div className="absolute inset-0 bg-primary/70 mix-blend-multiply" />
|
|
<div className="absolute inset-0 bg-gradient-to-t from-primary via-primary/20 to-transparent" />
|
|
</div>
|
|
|
|
<Container className="relative z-10">
|
|
<div className="max-w-3xl text-white animate-slide-up">
|
|
<Heading level={2} subtitle={t('subtitle')} 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-xl md:text-2xl 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 items-center gap-4">
|
|
<div className="flex -space-x-4">
|
|
<div className="w-14 h-14 rounded-full border-4 border-primary overflow-hidden relative">
|
|
<Image
|
|
src="/uploads/2024/12/DSC07768-Large.webp"
|
|
alt={teamT('michael.name')}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div className="w-14 h-14 rounded-full border-4 border-primary overflow-hidden relative">
|
|
<Image
|
|
src="/uploads/2024/12/DSC07963-Large.webp"
|
|
alt={teamT('klaus.name')}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<span className="text-white/60 font-bold text-xs md:text-sm uppercase tracking-widest">
|
|
{t('andNetwork')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|