98 lines
3.6 KiB
TypeScript
98 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import React from "react";
|
|
import Image from "next/image";
|
|
import {motion} from "framer-motion";
|
|
import {useThemeColors} from "@/utils/useThemeColors";
|
|
|
|
const team = [
|
|
{
|
|
name: "Thatsaphorn",
|
|
role: "Gründer & Entwickler",
|
|
picture: "",
|
|
},
|
|
{
|
|
name: "Anonym",
|
|
role: "Vertrieb",
|
|
picture: "",
|
|
},
|
|
];
|
|
|
|
const fallbackImage = "/images/team/default-avatar.jpg";
|
|
|
|
const TeamSection = () => {
|
|
const colors = useThemeColors();
|
|
|
|
return (
|
|
<section className="w-full px-6 sm:px-12 py-16 max-w-6xl mx-auto">
|
|
<motion.h2
|
|
className="text-2xl sm:text-3xl font-bold text-left"
|
|
style={{color: colors.primaryText}}
|
|
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-${Math.min(team.length, 2)}
|
|
md:grid-cols-${Math.min(team.length, 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-gray-200 dark:border-gray-700
|
|
shadow-md hover:shadow-lg transition-all p-6"
|
|
style={{backgroundColor: colors.secondaryBg}}
|
|
>
|
|
<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-gray-300 dark:bg-gray-600 my-4"/>
|
|
|
|
<div className="text-lg font-semibold" style={{color: colors.primaryText}}>
|
|
{member.name}
|
|
</div>
|
|
<div className="text-sm mt-1" style={{color: colors.secondaryText}}>
|
|
{member.role}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default TeamSection;
|