Merge branch 'master' of https://github.com/okbel/e-comm-example into image-component

components/product/ProductCard/ProductCard.module.css

@@ -2,8 +2,12 @@
   @apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
 
   &:hover {
-    & .squareBg {
-      @apply scale-75;
+    & .squareBg:before {
+      transform: scale(0.98);
+    }
+
+    & .product-image {
+      transform: scale(1.05);
     }
 
     & .productTitle > span,
@@ -37,6 +41,10 @@
     }
   }
 
+  & .product-image {
+    @apply transform transition-transform duration-500;
+  }
+
   &:nth-child(6n + 1) .squareBg {
     @apply bg-violet;
   }
@@ -58,16 +66,23 @@
 .productTitle > span,
 .productPrice,
 .wishlistButton {
-  @apply transition ease-in-out duration-300;
+  @apply transition ease-in-out duration-500;
 }
 
 .squareBg {
-  @apply transform absolute inset-0 z-0 bg-secondary;
+  @apply transform absolute inset-0 z-0;
+  background-color: #212529;
+}
+
+.squareBg:before {
+  @apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block;
+  content: '';
+  background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.1' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
 }
 
 .simple {
   & .squareBg {
-    @apply bg-gray-300 !important;
+    @apply bg-accents-0 !important;
   }
 
   & .productTitle {
@@ -102,5 +117,5 @@
 }
 
 .wishlistButton {
-  @apply w-10 h-10 flex items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
+  @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
 }

components/product/ProductCard/ProductCard.tsx

@@ -62,12 +62,14 @@ const ProductCard: FC<Props> = ({
             <Heart />
           </div>
         </div>
-        <Image
-          src={src}
-          width={imgWidth}
-          height={imgHeight}
-          priority={priority}
-        />
+        <div className="absolute z-10 inset-0 flex items-center justify-center">
+          <Image
+            src={src}
+            width={imgWidth}
+            height={imgHeight}
+            priority={priority}
+          />
+        </div>
       </a>
     </Link>
   )

components/product/ProductView/ProductView.module.css

@@ -7,7 +7,7 @@
 }
 
 .productDisplay {
-  @apply relative flex px-0 pb-0 relative box-border col-span-7;
+  @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
   margin-right: -2rem;
   margin-left: -2rem;
   min-height: 400px;
@@ -17,7 +17,7 @@
   }
 
   @screen lg {
-    @apply mx-0;
+    @apply mx-0 col-span-7;
     min-height: 100%;
     height: 100%;
   }
@@ -34,7 +34,7 @@
 }
 
 .nameBox {
-  @apply absolute top-6 left-0 z-50;
+  @apply absolute top-6 left-10 z-10;
 
   & .name {
     @apply px-6 py-2 bg-primary text-primary font-bold;
@@ -49,15 +49,16 @@
   @screen md {
     & .name,
     & .price {
-      @apply bg-violet text-white;
+      @apply bg-violet-light text-white;
     }
   }
 }
 
 .sidebar {
-  @apply flex flex-col col-span-5;
+  @apply flex flex-col col-span-1;
 
   @screen lg {
+    @apply col-span-5;
     padding-top: 5rem;
   }
 }
@@ -75,13 +76,8 @@
   }
 
   @screen lg {
-    height: 150%;
-    margin-top: -10%;
-  }
-
-  @screen xl {
-    height: 170%;
-    margin-top: -19%;
+    height: 100%;
+    margin-top: -8%;
   }
 }
 

components/product/ProductView/ProductView.tsx

@@ -1,17 +1,17 @@
-import { FC, useState, useEffect } from 'react'
 import cn from 'classnames'
 import Image from 'next/image'
 import { NextSeo } from 'next-seo'
-import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
-import useAddItem from '@lib/bigcommerce/cart/use-add-item'
-import bcImageSrc from '@lib/bc-image-src'
-import getPathname from '@lib/get-pathname'
+import s from './ProductView.module.css'
+import { FC, useState, useEffect } from 'react'
 import { useUI } from '@components/ui/context'
 import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
-import { getProductOptions } from '../helpers'
-import s from './ProductView.module.css'
+import getPathname from '@lib/get-pathname'
+import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import { isDesktop } from '@lib/browser'
+import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
+import { getProductOptions } from '../helpers'
+import bcImageSrc from '@lib/bc-image-src'
 
 interface Props {
   className?: string
@@ -73,7 +73,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
       />
       <div className={cn(s.root, 'fit')}>
         <div className={cn(s.productDisplay, 'fit')}>
-          <div className={s.squareBg}></div>
           <div className={s.nameBox}>
             <h1 className={s.name}>{product.name}</h1>
             <div className={s.price}>
@@ -138,7 +137,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
             ))}
             <div className="pb-12">
               <div
-                className="pb-14 break-words"
+                className="pb-14 break-words w-full"
                 dangerouslySetInnerHTML={{ __html: product.description }}
               />
               <Button