reui-blocks/blocks/hero219.tsx

"use client";

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

import { Particles } from "@/components/magicui/particles";
import { cn } from "@/lib/utils";

const Hero219 = () => {
  return (
    <section className="relative py-32">
      <div className="container flex flex-col items-center justify-center gap-4 overflow-hidden">
        <p className="text-muted-foreground">
          همکاری برای ساخت آینده
                          </p>
        <h1 className="realtive z-15 max-w-3xl text-center text-2xll font-medium tracking-tighter md:text-2xll">
          همه ابزارهای موردنیاز شما برای{" "}
          <span
            className="overflow-hidden"
            style={{
              transformStyle: "preserve-3d",
              perspective: "600px",
            }}
          >
            {"بهره‌وری ماندگار".split(" ").map((word, i) => (
              <motion.span
                className="relative inline-block px-[6px] leading-[none]"
                key={i}
                initial={{
                  opacity: 0,
                  y: "70%",
                  rotateX: "-28deg",
                }}
                animate={{
                  opacity: 1,
                  y: "0%",
                  rotateX: "0deg",
                }}
                transition={{
                  delay: i * 0.08 + 0.1,
                  duration: 0.8,
                  ease: [0.215, 0.61, 0.355, 1],
                }}
              >
                {word === "بهره‌وری" ? (
                  <span className="font-playfair">{word}</span>
                ) : (
                  word
                )}
              </motion.span>
            ))}
          </span>
        </h1>
        <Particles
          className="absolute inset-0 z-0"
          quantity={500}
          ease={80}
          color="#000000"
          refresh
        />

        <motion.div
          initial={{ opacity: 0, scale: 1.1 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.3, delay: 1 }}
          className="relative z-20 mt-10 flex items-center justify-center gap-4"
        >
          <SkiperUiMarquee
            showCard={1}
            className=""
            reverse={true}
            src={[
              "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
              "/block-media/shadcnblocks/block/logos/react-icon.svg",
              "/block-media/shadcnblocks/block/logos/vue-icon.svg",
              "/block-media/shadcnblocks/block/logos/typescript-icon.svg",
            ]}
          />
          <SkiperUiMarquee
            showCard={2}
            className=""
            src={[
              "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
              "/block-media/shadcnblocks/block/logos/astro-icon.svg",
              "/block-media/shadcnblocks/block/logos/remix-icon.svg",
              "/block-media/shadcnblocks/block/logos/vite-icon.svg",
            ]}
          />
          <SkiperUiMarquee
            showCard={3}
            reverse={true}
            className=""
            src={[
              "/block-media/shadcnblocks/block/logos/github-icon.svg",
              "/block-media/shadcnblocks/block/logos/laravel-icon.svg",
              "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
              "/block-media/shadcnblocks/block/logos/vscode-icon.svg",
            ]}
          />
          <SkiperUiMarquee
            showCard={2}
            className=""
            src={[
              "/block-media/shadcnblocks/block/logos/vite-icon.svg",
              "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
              "/block-media/shadcnblocks/block/logos/brave-icon.svg",
              "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
            ]}
          />
          <SkiperUiMarquee
            showCard={3}
            reverse={true}
            className=""
            src={[
              "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
              "/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
              "/block-media/shadcnblocks/block/logos/nike-icon.svg",
              "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
            ]}
          />
          <SkiperUiMarquee
            showCard={2}
            className=""
            src={[
              "/block-media/shadcnblocks/block/logos/slack-icon.svg",
              "/block-media/shadcnblocks/block/logos/linkedin-icon.svg",
              "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
              "/block-media/shadcnblocks/block/logos/facebook-icon.svg",
            ]}
          />
          <SkiperUiMarquee
            reverse={true}
            showCard={1}
            className=""
            src={[
              "/block-media/shadcnblocks/block/logos/notion-icon.svg",
              "/block-media/shadcnblocks/block/logos/twitter-icon.svg",
              "/block-media/shadcnblocks/block/logos/google-icon.svg",
              "/block-media/shadcnblocks/block/logos/google-play-icon.svg",
            ]}
          />
        </motion.div>

        <div className="absolute right-0 bottom-20 left-0 h-92 w-full bg-background blur-xl" />
      </div>
    </section>
  );
};

export { Hero219 };

function Marquee({
  className,
  reverse,
  children,
  vertical = false,
  repeat = 4,
  ...props
}: any) {
  return (
    <div
      {...props}
      className={cn(
        "group flex [gap:var(--gap)] overflow-hidden p-2 [--gap:1rem]",
        {
          "flex-row": !vertical,
          "flex-col": vertical,
        },
        className,
      )}
    >
      {Array(repeat)
        .fill(0)
        .map((_, i) => (
          <div
            key={i}
            className={cn(
              "flex shrink-0 justify-around [gap:var(--gap)] ![animation-duration:12s] [animation-play-state:running] group-hover:[animation-play-state:paused]",
              {
                "animate-marquee flex-row": !vertical,
                "animate-marquee-vertical flex-col": vertical,
                "[animation-direction:reverse]": reverse,
              },
            )}
          >
            {children}
          </div>
        ))}
    </div>
  );
}

interface SkiperUiMarqueeProps {
  showCard: number;
  reverse?: boolean;
  className?: string;
  src: string[];
}

export function SkiperUiMarquee({
  showCard,
  reverse = false,
  className,
  src,
}: SkiperUiMarqueeProps) {
  return (
    <div
      className={cn("relative overflow-hidden", className)}
      style={{
        height: showCard * 113,
      }}
    >
      <Marquee reverse={reverse} vertical={true}>
        {src.map((item, idx) => (
          <Card key={idx} src={item} />
        ))}
      </Marquee>
      <div className="absolute top-0 z-10 h-8 w-full bg-gradient-to-b from-background to-transparent" />
      <div className="absolute bottom-0 z-10 h-8 w-full bg-gradient-to-t from-background to-transparent" />
    </div>
  );
}

function Card({ src }: { src?: string }) {
  return (
    <div
      className={cn(
        "relative flex size-24 items-center justify-center overflow-hidden rounded-3xl border border-muted p-4",
        "bg-gradient-to-b from-muted/50 to-background",
        "dark:bg-transparent dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
      )}
    >
      <img
        src={
          src ||
          "/block-media/shadcnblocks/block/logos/notion-icon.svg"
        }
        alt="لوگو"
        className="size-8 object-cover"
      />
    </div>
  );
}