add bg pattern

components/product/ProductCard/ProductCard.module.css

@@ -3,27 +3,7 @@
 
   &:hover {
     & .squareBg {
-      background-color: var(--violet);
+      transform: scale(1.05);
-      background: radial-gradient(
-          circle,
-          transparent 20%,
-          var(--violet) 20%,
-          var(--violet) 80%,
-          transparent 80%,
-          transparent
-        ),
-        radial-gradient(
-            circle,
-            transparent 20%,
-            var(--violet) 20%,
-            var(--violet) 80%,
-            transparent 80%,
-            transparent
-          )
-          50px 50px,
-        linear-gradient(red 4px, transparent 4px) 0 -2px,
-        linear-gradient(90deg, red 4px, var(--violet) 4px) -2px 0;
-      background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
     }
 
     & .productTitle > span,
@@ -55,26 +35,6 @@
     &:nth-child(6n + 6) .wishlistButton {
       @apply bg-cyan text-white;
     }
-
-    /* & .squareBg {
-      @apply bg-white;
-    }
-
-    &:nth-child(6n + 1) .squareBg {
-      @apply bg-white;
-    }
-
-    &:nth-child(6n + 5) .squareBg {
-      @apply bg-white;
-    }
-
-    &:nth-child(6n + 3) .squareBg {
-      @apply bg-white;
-    }
-
-    &:nth-child(6n + 6) .squareBg {
-      @apply bg-white;
-    } */
   }
 
   &:nth-child(6n + 1) .squareBg {
@@ -103,6 +63,7 @@
 
 .squareBg {
   @apply transform absolute inset-0 z-0 bg-secondary;
+  background-image: url("data:image/svg+xml,%3Csvg width='48' height='44' viewBox='0 0 48 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.3' x1='9.41421' y1='7' x2='21' y2='18.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.3' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 7)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.3' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 37)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.3' x1='38.5858' y1='37' x2='27' y2='25.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
 }
 
 .simple {

components/product/ProductCard/ProductCard.tsx

@@ -36,7 +36,7 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
       >
         <div className="absolute z-10 inset-0 flex items-center justify-center">
           <img
-            className="w-full object-cover transform hover:scale-95 transition-transform duration-500"
+            className="w-full object-cover transform hover:scale-90 transition-transform duration-500"
             src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>