reui-blocks/blocks/team6.tsx

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

const team = [
  {
    id: "person-1",
    name: "سارا احمدی",
    role: "مدیرعامل و هم‌بنیان‌گذار",
    department: "رهبری",
    description:
      "مدیر محصول سابق در گوگل با بیش از ۱۰ سال تجربه ساخت محصولاتی که میلیون‌ها نفر روزانه از آن‌ها استفاده می‌کنند. علاقه‌مند به ایجاد اثر معنادار از طریق فناوری.",
    expertise: ["استراتژی محصول", "رهبری تیم", "رشد"],
    avatar:
      "/block-media/shadcnblocks/block/avatar-1.webp",
  },
  {
    id: "person-2",
    name: "امیر رضایی",
    role: "مدیر فناوری و هم‌بنیان‌گذار",
    department: "مهندسی",
    description:
      "مهندس سابق متا که تیم‌های ساخت زیرساخت برای میلیاردها کاربر را رهبری کرده. عاشق حل چالش‌های فنی پیچیده.",
    expertise: ["معماری سیستم", "هوش مصنوعی/یادگیری ماشین", "مقیاس‌پذیری"],
    avatar:
      "/block-media/shadcnblocks/block/avatar-2.webp",
  },
  {
    id: "person-3",
    name: "مریم حسینی",
    role: "مدیر طراحی محصول",
    department: "طراحی",
    description:
      "رهبر طراحی با سابقه در Airbnb و طراحی رابط. باور دارد طراحی عالی باید نامرئی باشد و مشکلات واقعی کاربر را حل کند.",
    expertise: ["طراحی تجربه کاربری", "سیستم‌های طراحی", "تحقیق کاربری"],
    avatar:
      "/block-media/shadcnblocks/block/avatar-3.webp",
  },
  {
    id: "person-4",
    name: "علی محمدی",
    role: "معاون مهندسی",
    department: "مهندسی",
    description:
      "تیم‌های مهندسی در درگاه پرداخت و Uber را ساخته و مقیاس داده. بر ساخت تیم‌های پرفورمنس بالا و سیستم‌های پایدار تمرکز دارد.",
    expertise: ["ساخت تیم", "سیستم‌های بک‌اند", "دواپس"],
    avatar:
      "/block-media/shadcnblocks/block/avatar-4.webp",
  },
  {
    id: "person-5",
    name: "نازنین طاهری",
    role: "مدیر بازاریابی",
    department: "بازاریابی",
    description:
      "استراتژیست بازاریابی که چند استارتاپ را از صفر به درآمد میلیونی رسانده. متخصص بازاریابی رشد و برندسازی.",
    expertise: ["بازاریابی رشد", "استراتژی برند", "محتوا"],
    avatar:
      "/block-media/shadcnblocks/block/avatar-1.webp",
  },
  {
    id: "person-6",
    name: "پویا جعفری",
    role: "مدیر فروش",
    department: "فروش",
    description:
      "رهبر فروش با سابقه ساخت تیم‌های پرفورمنس بالا و فراتر رفتن از اهداف درآمدی در بازارهای رقابتی.",
    expertise: ["فروش سازمانی", "مدیریت تیم", "موفقیت مشتری"],
    avatar:
      "/block-media/shadcnblocks/block/avatar-6.webp",
  },
  {
    id: "person-7",
    name: "زهرا کاظمی",
    role: "مدیر محتوا",
    department: "بازاریابی",
    description:
      "استراتژیست بازاریابی که چند استارتاپ را از صفر به درآمد میلیونی رسانده. متخصص بازاریابی رشد و برندسازی.",
    expertise: ["بازاریابی رشد", "استراتژی برند", "محتوا"],
    avatar:
      "/block-media/shadcnblocks/block/avatar-7.webp",
  },
  {
    id: "person-8",
    name: "سینا اکبری",
    role: "مدیر فروش سازمانی",
    department: "فروش",
    description:
      "رهبر فروش با سابقه ساخت تیم‌های پرفورمنس بالا و فراتر رفتن از اهداف درآمدی در بازارهای رقابتی.",
    expertise: ["فروش سازمانی", "مدیریت تیم", "موفقیت مشتری"],
    avatar:
      "/block-media/shadcnblocks/block/avatar-8.webp",
  },
];

interface Team6Props {
  className?: string;
}

const Team6 = ({ className }: Team6Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "bg-gradient-to-b from-background to-muted/20 py-24",
        className,
      )}
    >
      <div className="container mx-auto px-4">
        <div className="mb-16 text-center">
          <h2 className="mb-6 text-xl font-bold tracking-tight lg:text-2xll">
            تیم محصول ما
          </h2>
          <p className="mx-auto max-w-3xl text-xl leading-relaxed text-muted-foreground">
            تیم متنوع ما از متخصصان با دهه‌ها تجربه در طراحی، مهندسی و توسعه
            محصول تشکیل شده است.
          </p>
        </div>

        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
          {team.map((member) => (
            <div
              key={member.id}
              className="group rounded-lg border border-muted bg-card/50 p-6 backdrop-blur-sm transition-all duration-300 hover:bg-muted"
            >
              <div className="relative mb-6">
                <Avatar className="mx-auto h-20 w-20">
                  <AvatarImage src={member.avatar} alt={member.name} />
                  <AvatarFallback className="bg-gradient-to-br from-primary/20 to-secondary/20 text-xl font-bold text-primary">
                    {member.name
                      .split(" ")
                      .map((n) => n[0])
                      .join("")}
                  </AvatarFallback>
                </Avatar>
              </div>

              <div className="text-center">
                <h3 className="mb-1 text-lg font-semibold transition-colors group-hover:text-primary">
                  {member.name}
                </h3>
                <p className="mb-2 text-sm font-medium text-primary">
                  {member.role}
                </p>
                <Badge variant="outline" className="text-xs">
                  {member.department}
                </Badge>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-16 border-t pt-16 text-center">
          <h3 className="mb-4 text-xl font-semibold">
            آماده‌اید آینده را با ما بسازید؟
          </h3>
          <p className="mx-auto mb-6 max-w-2xl text-muted-foreground">
            همیشه به دنبال افراد بااستعداد هستیم که اشتیاق ما به نوآوری و ایجاد
            تفاوت را دارند. فرصت‌های شغلی فعلی ما را ببینید.
          </p>
          <Button size="lg" className="px-8">
            مشاهده فرصت‌های شغلی
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Team6 };