Merge pull request #39 from deco-sites/task/10681

Task/10681

components/product/ProductCard.tsx

@@ -186,7 +186,7 @@ function ProductCard(
 
   return (
     <div
-      class={`card card-compact opacity-100 bg-opacity-100 group w-full p-5 h-[100%] ${
+      class={`card card-compact opacity-100 bg-opacity-100 group w-full p-2.5 pb-6 sm:p-5 h-[100%] border border-[#D7D7DA] lg:border-0 lg:border-transparent${
         align === "center" ? "text-center" : "text-start"
       } ${
         l?.onMouseOver?.showCardShadow ? "lg:hover:shadow-lg shadow-black" : ""
@@ -276,7 +276,7 @@ function ProductCard(
               height={HEIGHT}
               class="absolute transition-opacity rounded-lg w-full opacity-0 lg:group-hover:opacity-100"
               sizes="(max-width: 640px) 50vw, 20vw"
-              loading="lazy"
+              loading="eager"
               decoding="async"
             />
           )}

components/product/ProductShelf.tsx

@@ -108,11 +108,11 @@ function ProductShelf({
         id={id}
         class="grid grid-cols-[48px_1fr_48px] px-0 grid-rows-[1fr_48px_1fr_48px]"
       >
-        <Slider class="carousel carousel-start gap-6 col-span-full row-span-full py-2 mb-12">
+        <Slider class="carousel carousel-center lg:carousel-start space-x-4 p-4 md:gap-6 col-span-full max-w-full sm:space-x-0 row-span-full py-2 mb-12">
           {products?.map((product, index) => (
             <Slider.Item
               index={index}
-              class="carousel-item w-[270px]"
+              class="carousel-item !w-[250px]"
             >
               <ProductCard
                 product={product}

deno.json

@@ -41,7 +41,7 @@
     "std/": "https://deno.land/[email protected]/",
     "partytown/": "https://denopkg.com/deco-cx/[email protected]/",
     "daisyui": "npm:[email protected]",
-    "apps/": "https://denopkg.com/deco-cx/[email protected].11/"
+    "apps/": "https://denopkg.com/deco-cx/[email protected].12/"
   },
   "lint": {
     "rules": {