58 lines
2.4 KiB
TypeScript
58 lines
2.4 KiB
TypeScript
import { useTranslations } from 'next-intl';
|
|
import { Section, Container } from '@/components/ui';
|
|
import Image from 'next/image';
|
|
|
|
export default function TeamPage() {
|
|
const t = useTranslations('Navigation');
|
|
|
|
const teamMembers = [
|
|
{
|
|
name: 'Klaus',
|
|
role: 'Founder & CEO',
|
|
image: '/media/team/klaus.jpg', // Placeholder path
|
|
bio: 'With decades of experience in the cable industry, Klaus leads KLZ with a vision for quality and innovation.'
|
|
},
|
|
{
|
|
name: 'Michael',
|
|
role: 'Technical Director',
|
|
image: '/media/team/michael.jpg', // Placeholder path
|
|
bio: 'Expert in high-voltage systems and technical planning, ensuring every project meets the highest standards.'
|
|
},
|
|
// Add more team members as needed
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen">
|
|
<Section className="bg-neutral-light">
|
|
<Container>
|
|
<div className="max-w-3xl mx-auto text-center mb-16">
|
|
<h1 className="text-4xl font-bold mb-6">Our Team</h1>
|
|
<p className="text-xl text-text-secondary">
|
|
Meet the experts behind KLZ Cables. We are a dedicated team of professionals committed to powering your success.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{teamMembers.map((member, idx) => (
|
|
<div key={idx} className="bg-white rounded-lg overflow-hidden shadow-sm border border-neutral-dark group hover:-translate-y-1 transition-transform duration-300">
|
|
<div className="aspect-[3/4] bg-neutral relative overflow-hidden">
|
|
{/* Placeholder for team image */}
|
|
<div className="absolute inset-0 flex items-center justify-center text-text-light bg-neutral-dark">
|
|
<span className="text-4xl font-bold opacity-20">{member.name[0]}</span>
|
|
</div>
|
|
{/* <Image src={member.image} alt={member.name} fill className="object-cover" /> */}
|
|
</div>
|
|
<div className="p-6">
|
|
<h3 className="text-xl font-bold text-text-primary mb-1">{member.name}</h3>
|
|
<p className="text-primary font-medium mb-4">{member.role}</p>
|
|
<p className="text-text-secondary text-sm">{member.bio}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
</div>
|
|
);
|
|
}
|