reui-blocks/blocks/team2.tsx

import { Github, Linkedin, Twitter } from "lucide-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

interface TeamMember {
  id: string;
  name: string;
  role: string;
  avatar: string;
  github?: string;
  twitter?: string;
  linkedin?: string;
}

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

const Team2 = ({
  heading = "تیم محصول ما",
  description = "ما CRM فروش را می‌سازیم—از معماری داده تا تجربه کاربری که تیم فروش هر روز به آن تکیه می‌کند.",
  members = [
    {
      id: "member-1",
      name: "سارا احمدی",
      role: "هم‌بنیان‌گذار و مدیرعامل",
      avatar:
        "/block-media/shadcnblocks/block/avatar-1.webp",
      github: "#",
      twitter: "#",
      linkedin: "#",
    },
    {
      id: "member-2",
      name: "امیر رضایی",
      role: "مدیر فناوری",
      avatar:
        "/block-media/shadcnblocks/block/avatar-2.webp",
      github: "#",
      twitter: "#",
      linkedin: "#",
    },
    {
      id: "member-3",
      name: "مریم حسینی",
      role: "مدیر طراحی محصول",
      avatar:
        "/block-media/shadcnblocks/block/avatar-3.webp",
      github: "#",
      twitter: "#",
      linkedin: "#",
    },
    {
      id: "member-4",
      name: "علی محمدی",
      role: "مهندس ارشد محصول",
      avatar:
        "/block-media/shadcnblocks/block/avatar-4.webp",
      github: "#",
      twitter: "#",
      linkedin: "#",
    },
    {
      id: "member-5",
      name: "نازنین طاهری",
      role: "مدیر محصول",
      avatar:
        "/block-media/shadcnblocks/block/avatar-5.webp",
      github: "#",
      twitter: "#",
      linkedin: "#",
    },
    {
      id: "member-6",
      name: "پویا جعفری",
      role: "طراح محصول",
      avatar:
        "/block-media/shadcnblocks/block/avatar-6.webp",
      github: "#",
      twitter: "#",
      linkedin: "#",
    },
  ],
  className,
}: Team1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-24 lg:py-32", className)}>
      <div className="container mx-auto px-4">
        <div className="mb-16 text-center">
          <h2 className="mb-6 text-3xl font-bold tracking-tight lg:text-2xll">
            {heading}
          </h2>
          <p className="mx-auto max-w-2xl text-lg leading-relaxed text-muted-foreground">
            {description}
          </p>
        </div>

        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
          {members.map((member) => (
            <div key={member.id} className="p-6">
              <div className="flex flex-col items-center text-center">
                <div className="mb-4">
                  <Avatar className="size-20 lg:size-24">
                    <AvatarImage src={member.avatar} alt={member.name} />
                    <AvatarFallback className="text-lg font-semibold">
                      {member.name}
                    </AvatarFallback>
                  </Avatar>
                </div>

                <div className="mb-6">
                  <h3 className="mb-1 text-lg font-semibold">{member.name}</h3>
                  <p className="text-sm font-medium text-primary">
                    {member.role}
                  </p>
                </div>

                <div className="flex gap-3">
                  {member.github && (
                    <a
                      href={member.github}
                      className="rounded-lg bg-muted/50 p-2"
                      aria-label={`گیت‌هاب ${member.name}`}
                    >
                      <Github className="size-4 text-muted-foreground" />
                    </a>
                  )}
                  {member.twitter && (
                    <a
                      href={member.twitter}
                      className="rounded-lg bg-muted/50 p-2"
                      aria-label={`توییتر ${member.name}`}
                    >
                      <Twitter className="size-4 text-muted-foreground" />
                    </a>
                  )}
                  {member.linkedin && (
                    <a
                      href={member.linkedin}
                      className="rounded-lg bg-muted/50 p-2"
                      aria-label={`لینکدین ${member.name}`}
                    >
                      <Linkedin className="size-4 text-muted-foreground" />
                    </a>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Team2 };