reui-blocks/blocks/resources5.tsx

import { ArrowRight, BookOpen, Play, Users } from "lucide-react";

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

interface Resources5Props {
  courses: Array<{
    badge?: string;
    title: string;
    description: string;
    author: {
      name: string;
      title: string;
      avatar: string;
      className?: string;
    };
    image: string;
    lessons: number;
    videos: number;
    duration: string;
    audience: string[];
    gradient: string;
    cta: {
      text: string;
      url: string;
    };
  }>;
  className?: string;
}

const Resources5 = ({
  className,
  courses = [
    {
      badge: "دوره",
      title: "تسلط بر مبانی Sanity Studio",
      description:
        "مفاهیم اصلی Sanity Studio را از طراحی schema تا مدل‌سازی محتوا بیاموزید. اولین سیستم مدیریت محتوای خود را با تمرین‌های عملی و مثال‌های واقعی بسازید.",
      author: {
        name: "علی رضایی",
        title: "سازنده محصول ارشد در Sanity",
        avatar:
          "/block-media/shadcnblocks/block/avatar-4.webp",
      },
      lessons: 12,
      videos: 15,
      duration: "۴۲:۱۸ دقیقه",
      audience: ["توسعه‌دهندگان", "تولیدکنندگان محتوا"],
      gradient: "from-blue-100 to-purple-100",
      image:
        "/block-media/shadcnblocks/block/placeholder-1.svg",
      cta: {
        text: "شروع",
        url: "https://www.ShadcnBlocks",
      },
    },
    {
      badge: "دوره",
      title: "عملیات پیشرفته محتوا",
      description:
        "به ویژگی‌های پیشرفته Sanity از جمله کامپوننت‌های ورودی سفارشی، قوانین اعتبارسنجی و بهینه‌سازی کارایی بپردازید. گردش‌کارهای محتوایی مقیاس‌پذیر برای اپلیکیشن‌های سازمانی بسازید.",
      author: {
        name: "مریم رودریگز",
        title: "استراتژیست ارشد محتوا",
        avatar:
          "/block-media/shadcnblocks/block/avatar-3.webp",
      },
      lessons: 18,
      videos: 22,
      duration: "۵۸:۴۵ دقیقه",
      audience: ["توسعه‌دهندگان", "تولیدکنندگان محتوا", "طراحان"],
      gradient: "from-green-100 to-emerald-100",
      image:
        "/block-media/shadcnblocks/block/placeholder-2.svg",
      cta: {
        text: "شروع",
        url: "https://www.ShadcnBlocks",
      },
    },
  ],
}: Resources5Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-background py-16", className)}
    >
      <div className="flex flex-col gap-8">
        {courses.map((course) => (
          <div
            key={course.title}
            className="relative flex flex-col gap-8 border-t border-border py-16 md:p-8"
          >
            <div className="container grid grid-cols-1 gap-10 md:grid-cols-2">
              <div className="flex flex-col gap-4 text-start">
                <div>
                  <Badge variant="secondary" className="rounded-none">
                    {course.badge}
                  </Badge>
                </div>

                <h3 className="text-xl font-bold">{course.title}</h3>

                <div className="space-y-2 text-sm text-foreground/90">
                  <div className="flex items-center gap-2">
                    <Users className="h-4 w-4" />
                    <span>{course.audience.join("، ")}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <BookOpen className="h-4 w-4" />
                    <span>{course.lessons} درس</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Play className="h-4 w-4" />
                    <span>
                      {course.videos} ویدیو، {course.duration}
                    </span>
                  </div>
                </div>

                <p className="text-lg leading-relaxed">{course.description}</p>

                <div>
                  <div className="flex items-center gap-3">
                    <Avatar className="size-10 border xl:size-12">
                      <AvatarImage src={course.author.avatar} />
                      <AvatarFallback>{course.author.name}</AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="font-medium">{course.author.name}</p>
                      <p className="text-sm text-muted-foreground">
                        {course.author.title}
                      </p>
                    </div>
                  </div>
                </div>

                <a
                  href={course.cta.url}
                  className="group/btn flex w-fit items-center gap-2 border-s border-border p-1 hover:bg-accent"
                >
                  <span className="font-medium">{course.cta.text}</span>
                  <ArrowRight className="h-4 w-4 text-primary transition-transform group-hover/btn:translate-x-1 rtl:rotate-180 rtl:group-hover/btn:-translate-x-1" />
                </a>
              </div>

              <div>
                <div
                  className={`group grid aspect-video w-full place-items-center rounded-lg bg-gradient-to-br pt-6 pe-8 ${course.gradient} transition duration-200 ease-out hover:scale-[1.03] hover:-rotate-2 dark:from-muted dark:to-muted/50`}
                >
                  <div className="shadow-duo col-start-1 row-start-1 flex aspect-square w-24 origin-top-right rotate-[-6deg] rounded-md border border-border bg-muted/50 transition duration-500 ease-out group-hover:scale-[1.1] group-hover:rotate-[-2deg] lg:w-32"></div>
                  <div className="shadow-duo col-start-1 row-start-1 flex aspect-square w-24 origin-top-right rotate-[-8deg] rounded-md border border-border bg-muted/50 transition duration-500 ease-out group-hover:scale-[1.1] group-hover:rotate-[-8deg] lg:w-32"></div>
                  <div className="shadow-duo col-start-1 row-start-1 flex aspect-square w-24 origin-top-right rotate-[-10deg] rounded-md border border-border bg-card transition duration-500 ease-out group-hover:scale-[1.1] group-hover:rotate-[-14deg] lg:w-32">
                    <div className="m-4 h-4 w-4 rounded-full bg-muted shadow-inner"></div>
                    <div className="absolute inset-0 flex items-center justify-center">
                      <img
                        src={course.image}
                        alt={course.title}
                        className="h-full w-full object-cover"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

export { Resources5 };