Product Carousel

 <ProductCarousel
    id="product-carousel"
    className="bg-card border w-xs shadow rounded-3xl p-4 overflow-hidden space-y-4"
  >
    <ProductCarouselWrapper>
      <div className="bg-card/80 border px-3 rounded-full shadow-xs shadow-black/15 absolute top-1 left-1 z-20">
        <NikeIcon className="size-6" />
      </div>

      <ProductCarouselSlide
        className="flex justify-center items-end  "
        index={0}
      >
        <ProductImage className="justify-center items-center">
          <Image
            src="https://m.media-amazon.com/images/I/51idMcfqaeL._AC_SX695_.jpg"
            width={695}
            height={390}
            className="inline-block align-middle w-4/5 mx-auto h-auto max-h-full object-contain"
            alt="nike air jordan"
          />
          <Image
            src="https://m.media-amazon.com/images/I/51o7G1R81ML._AC_SX695_.jpg"
            width={695}
            height={385}
            className="inline-block align-middle w-4/5 mx-auto h-auto max-h-full object-contain"
            alt="nike air jordan"
          />
      </ProductImage>
    </ProductCarouselSlide>
  </ProductCarouselWrapper>
   <div className="py-1 px-3 inline-flex items-center space-x-2">
    <ProductCarouselThumbnail
      index={0}
      className=" bg-blue-600 rounded"
      layoutId="product-carousel"
    />
    <ProductCarouselThumbnail
      index={1}
      className="bg-red-600 rounded"
      layoutId="product-carousel"
    />

    <ProductCarouselThumbnail
      index={2}
      className="bg-yellow-600 rounded"
      layoutId="product-carousel"
    />
  </div>
</<ProductCarousel>