92 lines
4.3 KiB
TypeScript
92 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import Image from 'next/image';
|
|
|
|
export interface TeamMember {
|
|
id: string;
|
|
name: string;
|
|
position: string;
|
|
email?: string | null;
|
|
phone?: string | null;
|
|
image?: {
|
|
url: string;
|
|
alt?: string;
|
|
} | string | null;
|
|
branch: string;
|
|
}
|
|
|
|
interface TeamGridProps {
|
|
members: TeamMember[];
|
|
}
|
|
|
|
export function TeamGrid({ members }: TeamGridProps) {
|
|
if (!members || members.length === 0) return null;
|
|
|
|
return (
|
|
<section className="py-24 bg-white">
|
|
<div className="container">
|
|
<div className="mb-12">
|
|
<h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">Persönliche Beratung</h2>
|
|
<h3 className="font-heading text-4xl font-extrabold text-neutral-dark mb-4">Ihre Ansprechpartner</h3>
|
|
<p className="text-text-secondary max-w-2xl">
|
|
Sprechen Sie direkt mit unseren Experten für Ihr regionales Projekt.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{members.map((member, i) => (
|
|
<motion.div
|
|
key={member.id}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: i * 0.1 }}
|
|
className="group bg-neutral-50 rounded-2xl p-6 border border-neutral-100 hover:shadow-xl transition-all"
|
|
>
|
|
<div className="flex items-center gap-6">
|
|
<div className="relative w-24 h-24 flex-shrink-0 rounded-xl overflow-hidden bg-neutral-200">
|
|
{member.image && typeof member.image === 'object' && member.image.url ? (
|
|
<Image
|
|
src={member.image.url}
|
|
alt={member.name}
|
|
fill
|
|
sizes="96px"
|
|
className="object-cover"
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0 flex items-center justify-center text-neutral-400">
|
|
<svg className="w-12 h-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<h4 className="font-heading font-bold text-xl text-neutral-dark">{member.name}</h4>
|
|
<p className="text-primary font-medium text-sm mb-2">{member.position}</p>
|
|
<p className="text-text-secondary text-xs uppercase tracking-widest">{member.branch === 'e-tib' ? 'E-TIB GmbH' : member.branch === 'ing' ? 'Ingenieurgesellschaft' : 'Bohrtechnik'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 pt-6 border-t border-neutral-200 space-y-3">
|
|
{member.email && (
|
|
<a href={`mailto:${member.email}`} className="flex items-center gap-3 text-text-secondary hover:text-primary transition-colors text-sm">
|
|
<svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
|
{member.email}
|
|
</a>
|
|
)}
|
|
{member.phone && (
|
|
<a href={`tel:${member.phone}`} className="flex items-center gap-3 text-text-secondary hover:text-primary transition-colors text-sm">
|
|
<svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
|
|
{member.phone}
|
|
</a>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|