gistfile1.txt

import Marquee from "@/components/magicui/marquee";
import Image from "next/image";
import { ArrowRightCircleIcon } from "lucide-react";

const reviews = [
    {
        image: "promo-1.png",
        href: "/work",
    },
    {
        image: "promo-2.png",
        href: "/work",
    },
    {
        image: "promo-3.png",
        href: "/work",
    },
    {
        image: "promo-4.png",
        href: "/work",
    },
    {
        image: "promo-5.png",
        href: "/work",
    },
    {
        image: "promo-6.png",
        href: "/work",
    },
    {
        image: "promo-7.png",
        href: "/work",
    },
    {
        image: "promo-8.png",
        href: "/work",
    },
    {
        image: "promo-9.png",
        href: "/work",
    },
    {
        image: "promo-10.png",
        href: "/work",
    },    

];

const ReviewCard = ({
    image,
    href,
}: {
  image: string;
  href: string;
}) => {
  return (
    <>
    <figure
      className={"rounded-md relative w-96 lg:w-[29rem] cursor-pointer overflow-hidden group bg-gray-950/[.01] transition-all hover:opacity-80"}
    >
      <img alt="frame" className="rounded-md flex flex-row items-center gap-2 absolute z-10" src="/images/frame.svg"/>
      <Image alt="Promo Image" className="rounded-md pt-3 max-h-56 lg:max-h-64 object-fill" src={`/images/promo/${image}`} width={512} height={512}/>
    </figure>
    </>
  );
};

export function IndexMarquee() {
  return (
    <>
    <div className="relative flex mt-0 mb-10 w-full flex-col items-center justify-center overflow-hidden">
      <Marquee reverse className="[--duration:60s]">
        {reviews.map((review) => (
          <ReviewCard key={review.image} {...review} />
        ))}
      </Marquee>
      <Marquee className="[--duration:60s]">
        {reviews.map((review) => (
          <ReviewCard key={review.image} {...review} />
        ))}
      </Marquee>
      {/* <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-[#F0EFEB] dark:from-background"></div>
      <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-[#F0EFEB] dark:from-background"></div> */}
    </div>
    <div className="flex gap-x-2 mx-auto w-min truncate bg-[#dbdcdd] p-2 rounded-full group px-4 cursor-pointer">
      <p className="text-center text-sm">Explore our templates to get inspired</p>
      <ArrowRightCircleIcon className="h-5 w-5 text-black hover:text-black/50 group-hover:translate-x-2 transition-all"/>
    </div>
    </>
  );
}