reui-blocks/blocks/team11.tsx

"use client";

import { motion } from "framer-motion";
import React, { memo, useState } from "react";

import { cn } from "@/lib/utils";

interface TeamMember {
  image: string;
  name: string;
  role: string;
  description: string;
}

interface TeamMemberCardProps {
  member: TeamMember;
  highlighted?: boolean;
}

const TeamMemberCard = memo(
  ({ member, highlighted = false }: TeamMemberCardProps) => {
    return (
      <div
        className={cn(
          "flex flex-col gap-4 px-2 md:px-5 md:pt-8",
          highlighted && "md:py-0 md:pb-4",
        )}
      >
        <div
          className={cn(
            "flex flex-col gap-2 pt-4 md:flex-row md:items-center",
            !highlighted && "border-b pb-4 md:border-b-2",
          )}
        >
          <img
            src={member.image}
            alt={member.name}
            className="size-full rounded border object-cover md:size-12"
          />

          <div className="flex flex-col gap-1 tracking-tight text-start">
            <p className="line-clamp-1">{member.name}</p>
            <p className="line-clamp-1 text-sm text-muted-foreground">
              {member.role}
            </p>
          </div>
        </div>
        {highlighted && (
          <>
            <span className="h-0.5 w-full bg-gradient-to-r from-blue-500 via-green-500 to-yellow-500" />
            <p className="line-clamp-2 text-start text-xs">
              {member.description}
            </p>
          </>
        )}
      </div>
    );
  },
);
TeamMemberCard.displayName = "TeamMemberCard";

interface Team11Props {
  heading?: string;
  description?: string;
  members?: TeamMember[];
  className?: string;
}

const Team11 = ({
  className,
  heading = "تیم پشت پلتفرم فروش",
  description = "مهندسان، طراحان و مدیران محصولی که قیف فروش را شفاف نگه می‌دارند.",
  members = [
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar6.webp",
      name: "سارا احمدی",
      role: "مدیر فناوری",
      description:
        "معمار زیرساخت با تمرکز روی مقیاس‌پذیری فضای کاری سامانه مدیریت ارتباط با مشتری سازمانی.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar2.jpg",
      name: "امیر رضایی",
      role: "مهندس ارشد محصول نرم‌افزار",
      description: "مهندس فول‌استک مسئول همگام‌سازی زنده کارت‌ها و اتوماسیون پیگیری.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar3.jpg",
      name: "مریم حسینی",
      role: "مدیر محصول",
      description:
        "استراتژیست محصول داده‌محور با پیشینه طراحی تجربه کاربری.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar4.jpg",
      name: "علی محمدی",
      role: "مهندس دواپس",
      description:
        "متخصص اتوماسیون زیرساخت برای استقرار بی‌درنگ.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar5.jpg",
      name: "نازنین طاهری",
      role: "طراح تجربه و رابط کاربری",
      description: "طراح خلاق با اشتیاق به طراحی کاربرمحور.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar6.jpg",
      name: "پویا جعفری",
      role: "دانشمند داده",
      description: "متخصص یادگیری ماشین که داده را به بینش تبدیل می‌کند.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar7.jpg",
      name: "مائده گارسیا",
      role: "توسعه‌دهنده فرانت‌اند",
      description:
        "متخصص رابط کاربری و زبان نوع‌ایمن برای تجربه کاربری روان.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
      name: "حسین ویلسون",
      role: "توسعه‌دهنده بک‌اند",
      description: "معمار اتصال هوشمند و متخصص بهینه‌سازی پایگاه داده.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar9.jpg",
      name: "راحیل پارخی",
      role: "مهندس تضمین کیفیت",
      description:
        "متخصص QA که اطمینان می‌دهد محصولات بالاترین استانداردها را دارند.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar10.jpg",
      name: "رایان فوستر",
      role: "توسعه‌دهنده موبایل",
      description: "متخصص موبایل اپل و موبایل اندروید برای تجربه موبایل روان.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar11.jpg",
      name: "اسکندر چن",
      role: "مهندس امنیت",
      description: "متخصص امنیت سایبری برای محافظت از سیستم‌ها.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar12.jpg",
      name: "کیوان مولر",
      role: "نویسنده فنی",
      description:
        "متخصص مستندسازی که مفاهیم فنی را قابل فهم می‌کند.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar13.jpg",
      name: "سوفیا اندرسون",
      role: "مدیر بازاریابی",
      description: "متخصص بازاریابی رشد برای جذب کاربر.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar13.jpg",
      name: "یوسف گونزالز",
      role: "مهندس فروش",
      description:
        "متخصص فروش فنی برای کمک به درک راه‌حل‌ها توسط مشتریان.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar14.jpg",
      name: "مینا دام",
      role: "مدیر موفقیت مشتری",
      description:
        "مدافع مشتری برای اطمینان از دستیابی مشتریان به اهدافشان.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar15.jpg",
      name: "نیما مطاقیان",
      role: "تحلیل‌گر کسب‌وکار",
      description:
        "تحلیل‌گر داده که نیازهای کسب‌وکار را به راه‌حل تبدیل می‌کند.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar16.jpg",
      name: "ژیلا لیو",
      role: "مدیر منابع انسانی",
      description:
        "متخصص عملیات منابع انسانی برای ساخت فرهنگ سازمانی.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar17.jpg",
      name: "کامران اوبراین",
      role: "مدیر مالی",
      description: "متخصص برنامه‌ریزی مالی برای ثبات کسب‌وکار.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar18.jpg",
      name: "آندیا تورس",
      role: "استراتژیست محتوا",
      description: "متخصص بازاریابی محتوا برای کمپین‌های دیجیتال B2B.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar19.jpg",
      name: "رضا کیم",
      role: "مشاور حقوقی",
      description: "وکیل فناوری برای هدایت در چشم‌اندازهای مقرراتی.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar20.jpg",
      name: "ژنفر والش",
      role: "مدیر عملیات",
      description: "متخصص عملیات برای اطمینان از کارکرد روان کسب‌وکار.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/avatar/avatar21.jpg",
      name: "دانیال پاتیل",
      role: "مهندس پژوهش",
      description: "متخصص تحقیق و توسعه برای کاوش فناوری‌های پیشرفته.",
    },
  ],
}: Team11Props) => {
  const [hoveredMember, setHoveredMember] = useState<number | null>(null);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-14">
          <div className="flex flex-col gap-4 border-b-2 pb-6 text-start">
            <h3 className="text-3xl font-light tracking-tight lg:text-2xll">
              {heading}
            </h3>
            <p className="text-sm tracking-tight text-muted-foreground lg:text-lg">
              {description}
            </p>
          </div>
          <ul
            onMouseLeave={() => setHoveredMember(null)}
            className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
          >
            {members.map((member, index) => {
              return (
                <li
                  key={`team-11-member-${member.name}-${index}`}
                  onMouseEnter={() => setHoveredMember(index)}
                  className="relative"
                >
                  <TeamMemberCard member={member} />

                  {hoveredMember === index && (
                    <motion.div
                      layoutId="team-11-member-card"
                      transition={{
                        layout: {
                          duration: 0.2,
                          type: "spring",
                          bounce: 0.1,
                        },
                      }}
                      className="pointer-events-none absolute inset-0 z-10 hidden h-max rounded-2xl bg-background shadow-lg md:block dark:border"
                    >
                      <TeamMemberCard member={member} highlighted />
                    </motion.div>
                  )}
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Team11 };