90 lines
3.2 KiB
TypeScript
90 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Image from 'next/image';
|
|
import {motion} from 'framer-motion';
|
|
|
|
const team = [
|
|
{
|
|
name: 'Thatsaphorn',
|
|
role: 'Gründer & Entwickler',
|
|
picture: '',
|
|
},
|
|
{
|
|
name: 'Anonym',
|
|
role: 'Vertrieb',
|
|
picture: '',
|
|
},
|
|
];
|
|
|
|
const fallbackImage = '/images/team/default-avatar.jpg';
|
|
|
|
const TeamSection = () => {
|
|
return (
|
|
<section
|
|
className="w-full px-6 sm:px-12 py-24 bg-background text-foreground transition-colors duration-700 ease-in-out">
|
|
<motion.h2
|
|
className="text-2xl sm:text-3xl font-bold text-left"
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5}}
|
|
>
|
|
Das Team
|
|
</motion.h2>
|
|
|
|
<motion.div
|
|
className="w-12 h-[2px] mt-2 mb-12 bg-amber-500"
|
|
initial={{opacity: 0, x: -20}}
|
|
whileInView={{opacity: 1, x: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.4, delay: 0.1}}
|
|
/>
|
|
|
|
<div className="flex justify-center">
|
|
<div
|
|
className={`grid gap-8 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-${Math.min(
|
|
team.length,
|
|
4
|
|
)}`}
|
|
>
|
|
{team.map((member, idx) => (
|
|
<motion.div
|
|
key={member.name}
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.4, delay: idx * 0.1}}
|
|
whileHover={{scale: 1.015}}
|
|
className="flex flex-col items-center text-center rounded-xl border border-border shadow-md hover:shadow-lg transition-all p-6 bg-muted"
|
|
>
|
|
<motion.div
|
|
whileHover={{scale: 1.05}}
|
|
transition={{type: 'spring', stiffness: 300, damping: 20}}
|
|
className="w-28 h-28 relative mb-4"
|
|
>
|
|
<Image
|
|
src={member.picture || fallbackImage}
|
|
alt={member.name}
|
|
fill
|
|
sizes="112px"
|
|
className="rounded-full object-cover shadow"
|
|
/>
|
|
</motion.div>
|
|
|
|
<div className="h-px w-8 bg-border my-4"/>
|
|
|
|
<div className="text-lg font-semibold">{member.name}</div>
|
|
<div className="text-sm mt-1 text-muted-foreground">
|
|
{member.role}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default TeamSection;
|