reui-blocks/blocks/feature234.tsx

"use client";

import { motion } from "framer-motion";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Feature234Props {
  className?: string;
}

const Feature234 = ({ className }: Feature234Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "w-full min-w-0 overflow-x-hidden bg-background py-12 sm:py-20 lg:py-32",
        className,
      )}
    >
      <div className="container flex min-w-0 flex-col items-center px-4 sm:px-6">
        <h1 className="font-inter mx-auto max-w-full text-center text-3xl leading-tight font-semibold tracking-tighter text-balance sm:text-5xl md:text-6xl lg:max-w-4xl lg:text-[85px] lg:leading-[86px]">
          عملیات سازمان را یکپارچه کنید
        </h1>
        <CardsContainer />
        <p className="font-inter mx-auto max-w-xl text-center text-base font-medium text-pretty text-black sm:text-lg">
          گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
        </p>
        <div className="mt-8 flex w-full max-w-full flex-wrap items-center justify-center gap-2 sm:mt-10">
          <Button
            asChild
            variant="default"
            className="block h-auto max-w-full rounded-full px-5 py-2 text-sm leading-loose whitespace-normal"
          >
            <a href="#">از خرید تا فروش در یک سیستم</a>
          </Button>
          <Button
            asChild
            variant="secondary"
            className="block h-auto max-w-full rounded-full px-5 py-2 text-sm leading-loose whitespace-normal"
          >
            <a href="#">یکپارچگی</a>
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Feature234 };

interface CardItem {
  id: string;
  imageAlt: string;
  rotate: number;
  isDark: boolean;
  image: string;
}

const CARDS: CardItem[] = [
  {
    id: "card-1",
    imageAlt: "گزارش مالی یکپارچه",
    rotate: -10.87,
    isDark: false,
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
  },
  {
    id: "card-2",
    imageAlt: "داشبورد ERP",
    rotate: -7.95,
    isDark: true,
    image: "/block-media/shadcnblocks/block/placeholder-black-1.svg",
  },
  {
    id: "card-3",
    imageAlt: "مدیریت عملیات",
    rotate: -4.5,
    isDark: false,
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
  },
  {
    id: "card-4",
    imageAlt: "گزارش مالی یکپارچه",
    rotate: 0,
    isDark: false,
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
  },
  {
    id: "card-5",
    imageAlt: "داشبورد ERP",
    rotate: 4.5,
    isDark: false,
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
  },
  {
    id: "card-6",
    imageAlt: "مدیریت عملیات",
    rotate: 7.95,
    isDark: false,
    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
  },
  {
    id: "card-7",
    imageAlt: "گزارش مالی یکپارچه",
    rotate: 10.87,
    isDark: true,
    image: "/block-media/shadcnblocks/block/placeholder-black-1.svg",
  },
];

const CardsContainer = () => {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);

  return (
    <div className="my-10 flex w-full max-w-full items-center justify-center overflow-hidden sm:my-14 lg:my-16">
      {CARDS.map((card, index) => {
        const yOffset = Math.pow(Math.abs(index - 3), 1.2) * 12;
        const isHovered = hoveredIndex === index;
        const visibilityClasses =
          (index === 0 || index === 1 || index === 5 || index === 6
            ? "hidden sm:hidden "
            : "") +
          (index === 0 || index === 6 ? "md:hidden " : "md:block ") +
          "lg:block";

        return (
          <motion.div
            className={cn("shrink-0", visibilityClasses)}
            key={card.id}
            onMouseEnter={() => setHoveredIndex(index)}
            onMouseLeave={() => setHoveredIndex(null)}
            initial={{ y: yOffset }}
            animate={{
              y: isHovered ? yOffset - 20 : yOffset,
              zIndex: isHovered ? 10 : 0,
            }}
            transition={{ duration: 0.3 }}
          >
            <div
              className={cn(
                "relative h-28 w-28 overflow-hidden rounded-2xl border sm:h-36 sm:w-36 sm:rounded-3xl lg:h-[176px] lg:w-[177px]",
                index !== 0 && "-ms-7 sm:-ms-9 lg:-ms-[50px]",
                card.isDark
                  ? "mb-8 border-[#8b8b8b] bg-black shadow-2xl sm:mb-14"
                  : "border-[#cecece] bg-[#f5f5f5] shadow-lg",
              )}
              style={{
                transform: `rotate(${card.rotate}deg)`,
              }}
            >
              <img
                src={card.image}
                alt={card.imageAlt}
                className="size-full object-cover object-center"
              />
            </div>
          </motion.div>
        );
      })}
    </div>
  );
};