95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface TeamMember {
|
|
id: string;
|
|
name: string;
|
|
role: string;
|
|
avatar: string;
|
|
}
|
|
|
|
interface Team1Props {
|
|
heading?: string;
|
|
subheading?: string;
|
|
description?: string;
|
|
members?: TeamMember[];
|
|
className?: string;
|
|
}
|
|
|
|
const Team1 = ({
|
|
heading = "تیمی که سامانه مدیریت ارتباط با مشتری فروش را می‌سازد",
|
|
description = "از معماری داده تا تجربه کاربری؛ محصولی که قیف، پیگیری و گزارش فروش را در یک فضای کاری یکپارچه می‌کند.",
|
|
members = [
|
|
{
|
|
id: "member-1",
|
|
name: "سارا احمدی",
|
|
role: "هم‌بنیان‌گذار و مدیرعامل",
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar-1.webp",
|
|
},
|
|
{
|
|
id: "member-2",
|
|
name: "امیر رضایی",
|
|
role: "مدیر فناوری",
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar-2.webp",
|
|
},
|
|
{
|
|
id: "member-3",
|
|
name: "مریم حسینی",
|
|
role: "مدیر طراحی محصول",
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar-3.webp",
|
|
},
|
|
{
|
|
id: "member-4",
|
|
name: "علی محمدی",
|
|
role: "مهندس ارشد محصول",
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar-4.webp",
|
|
},
|
|
{
|
|
id: "member-5",
|
|
name: "نازنین طاهری",
|
|
role: "مدیر محصول",
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar-5.webp",
|
|
},
|
|
{
|
|
id: "member-6",
|
|
name: "پویا جعفری",
|
|
role: "طراح محصول",
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar-6.webp",
|
|
},
|
|
],
|
|
className,
|
|
}: Team1Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container flex flex-col items-center text-center">
|
|
<h2 className="my-6 text-xl font-bold text-pretty lg:text-xl">
|
|
{heading}
|
|
</h2>
|
|
<p className="mb-8 max-w-3xl text-muted-foreground lg:text-xl">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
<div className="container mt-16 grid gap-x-8 gap-y-16 md:grid-cols-2 lg:grid-cols-3">
|
|
{members.map((member) => (
|
|
<div key={member.id} className="flex flex-col items-center">
|
|
<Avatar className="mb-4 size-20 border md:mb-5 lg:size-24">
|
|
<AvatarImage src={member.avatar} alt={member.name} />
|
|
<AvatarFallback>{member.name}</AvatarFallback>
|
|
</Avatar>
|
|
<p className="text-center font-medium">{member.name}</p>
|
|
<p className="text-center text-muted-foreground">{member.role}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Team1 };
|