reui-blocks/blocks/gallery20.tsx

"use client";

import { motion } from "framer-motion";
import { ArrowRight } from "lucide-react";

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

interface GalleryImage {
  src: string;
  alt: string;
  rotation: number;
  translateY?: number;
  translateX?: number;
  zIndex?: number;
}

const galleryImages: GalleryImage[] = [
  {
    src: "/block-media/shadcnblocks/block/lummi/landscape2.jpeg",
    alt: "منظره کوهستانی",
    rotation: 19,
    translateX: 200,
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/landscape1.jpeg",
    alt: "منظره طبیعت",
    rotation: 19,
    translateY: 2,
    translateX: 104,
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/landscape3.jpeg",
    alt: "منظره دریاچه",
    rotation: 0,
    translateY: -32,
    zIndex: 10,
    translateX: 0,
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/landscape5.jpeg",
    alt: "منظره جنگل",
    rotation: -12,
    translateX: -104,
    translateY: 2,
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/landscape4.jpeg",
    alt: "منظره غروب",
    rotation: -12,
    translateX: -200,
  },
];

interface Gallery20Props {
  className?: string;
}

const Gallery20 = ({ className }: Gallery20Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container overflow-x-clip">
        <motion.div
          initial={{ opacity: 0, translateY: 100 }}
          animate={{ opacity: 1, translateY: 0 }}
          transition={{
            duration: 0.7,
            type: "spring",
            bounce: 0.3,
          }}
          className="relative flex h-42 items-center justify-center"
        >
          {galleryImages.map((image, index) => (
            <motion.div
              initial={{
                rotate: image.rotation,
                translateY: image.translateY || 0,
                translateX: 0,
                zIndex: image.zIndex || "auto",
              }}
              animate={{
                rotate: image.rotation,
                translateY: image.translateY || 0,
                translateX: image.translateX || 0,
                zIndex: image.zIndex || "auto",
              }}
              drag
              dragSnapToOrigin
              whileHover={{
                scale: 1.15,
                rotate: 0,
                zIndex: 999,
                translateY: -20,
              }}
              transition={{
                duration: 0.7,
                bounce: 0.3,
                type: "spring",
                delay: 0.5,
                translateY: { duration: 0.2 },
                rotate: { duration: 0.2 },
                scale: { duration: 0.2 },
                zIndex: { duration: 0.2 },
              }}
              key={image.src}
              className="absolute size-42 cursor-pointer overflow-hidden rounded-3xl shadow-xl transition-all ease-out"
            >
              <img
                src={image.src}
                className="pointer-events-none size-full object-cover"
                alt={image.alt}
              />
            </motion.div>
          ))}
        </motion.div>
        <motion.div
          initial={{ opacity: 0, translateY: -20 }}
          animate={{ opacity: 1, translateY: 0 }}
          transition={{
            duration: 0.3,
            delay: 0.5,
          }}
          className="mt-10 flex flex-col items-center justify-center"
        >
          <h3 className="max-w-md text-center text-xl font-medium tracking-tight">
            مکان‌های تازه را کشف کنید و خاطراتتان را به اشتراک بگذارید.
          </h3>
          <Button className="group mt-10 flex items-center justify-center gap-2 rounded-full border px-4 py-1 tracking-tight">
            کاوش جهان
            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-0" />
          </Button>
        </motion.div>
      </div>
    </section>
  );
};

export { Gallery20 };