mr_decor/components/sections/hero/hero-partners.tsx

"use client";

import { motion } from "framer-motion";
import { Autoplay, EffectCoverflow } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css/effect-coverflow";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "swiper/css";
import "swiper/css/effect-cards";

import { cn } from "@/lib/utils";

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

interface HeroPartnersProps {
  className?: string;
}

const HeroPartners = ({ className }: HeroPartnersProps) => {
  const images = [
    {
      src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/lummi/random11.jpeg",
      alt: "لوگوی شرکت همکار و تیم",
      name: "شرکت راهکارهای فناوری",
    },
    {
      src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/lummi/random1.jpeg",
      alt: "دفتر مرکزی شرکت همکار",
      name: "آزمایشگاه‌های نوآوری",
    },
    {
      src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/lummi/random2.jpeg",
      alt: "جلسه همکاری همکاران",
      name: "همکاران جهانی",
    },
    {
      src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/lummi/random11.jpeg",
      alt: "لوگوی شرکت همکار و تیم",
      name: "شرکت راهکارهای فناوری",
    },
    {
      src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/lummi/random1.jpeg",
      alt: "دفتر مرکزی شرکت همکار",
      name: "آزمایشگاه‌های نوآوری",
    },
    {
      src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/lummi/random2.jpeg",
      alt: "جلسه همکاری همکاران",
      name: "همکاران جهانی",
    },
    {
      src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/lummi/random11.jpeg",
      alt: "لوگوی شرکت همکار و تیم",
      name: "شرکت راهکارهای فناوری",
    },
    {
      src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/lummi/random1.jpeg",
      alt: "دفتر مرکزی شرکت همکار",
      name: "آزمایشگاه‌های نوآوری",
    },
    {
      src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/lummi/random2.jpeg",
      alt: "جلسه همکاری همکاران",
      name: "همکاران جهانی",
    },
  ];

  const css = `
  .mySwiperHeroAbshodeHamkar {
    width: 100%;
    height: 420px;
    padding-bottom: 50px;
  }
  
  .mySwiperHeroAbshodeHamkar .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
  }
  
  .mySwiperHeroAbshodeHamkar .swiper-slide img {
    display: block;
    width: 100%;
  }
  
  .swiper-3d .swiper-slide-shadow-left {
    background-image: none;
  }
    
  .swiper-3d .swiper-slide-shadow-right{
    background: none;
  }
  `;
  return (
    <section className={cn("py-32 mx-auto", className)}>
      <style>{css}</style>
      <div className="container px-0 sm:px-8 mx-auto">
        <div className="mx-auto flex max-w-2xl flex-col items-center justify-center gap-4 px-8 sm:px-0">
          <h1 className="text-center text-heading-1 font-bold">
            همکاران ما
          </h1>
          <p className="text-center text-body text-muted-foreground">
            مدیریت معاملات بین همکاران صنف طلا با تمرکز بر امنیت، دقت و سرعت در مقیاس واقعی بازار.
          </p>
        </div>

        <div className="relative mt-12 h-[420px] w-full lg:px-20">
          <div className="absolute left-0 z-10 h-full w-12 bg-gradient-to-r from-background to-transparent sm:via-background md:w-58 lg:left-16" />
          <div className="absolute right-0 z-10 h-full w-12 bg-gradient-to-l from-background to-transparent sm:via-background md:w-58 lg:right-16" />
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.3 }}
            className="w-full"
          >
            <Swiper
              autoplay={{
                delay: 1500,
                disableOnInteraction: false,
              }}
              effect="coverflow"
              grabCursor={true}
              slidesPerView="auto"
              centeredSlides={true}
              loop={true}
              coverflowEffect={{
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: true,
              }}
              className="mySwiperHeroAbshodeHamkar"
              modules={[EffectCoverflow, Autoplay]}
            >
              {images.map((image, index) => (
                <SwiperSlide key={index}>
                  <img
                    className="h-full w-full overflow-hidden rounded-3xl object-cover shadow-lg"
                    src={image.src}
                    alt={image.alt}
                  />
                </SwiperSlide>
              ))}
            </Swiper>
          </motion.div>
        </div>

        <div className="relative mx-auto mt-4 flex w-fit justify-center">
          <Button size="lg" variant="primary">
            همکار شوید
          </Button>
        </div>
      </div>
    </section>
  );
};

export { HeroPartners };