Fix product images and add carousel; add transformation carousel on mobile

2026-03-23 11:14:15 +02:00
parent f3d60d3c5b
commit 70d6cfc9a7
3 changed files with 115 additions and 23 deletions
--- a/src/components/product/ProductCard.tsx
+++ b/src/components/product/ProductCard.tsx
@@ -27,14 +27,12 @@ export default function ProductCard({ product, index = 0, locale = "SR" }: Produ
    >
      <Link href={`/products/${localized.slug}`} className="group block">
        {/* Image Container */}
-        <div className="relative aspect-square bg-[#f8f9fa] overflow-hidden mb-4">
+        <div className="relative w-full aspect-square bg-[#f8f9fa] overflow-hidden mb-4">
          {image ? (
-            <Image
+            <img
              src={image}
              alt={localized.name}
-              fill
-              className="object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105"
-              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+              className="w-full h-full object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105"
              loading="lazy"
            />
          ) : (