From 486d981fe075341d4a7bc54cf6a5197e1e5e8008 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Wed, 21 Oct 2020 11:14:01 -0300
Subject: [PATCH 01/14] remove layout code

---
 components/core/Layout/Layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index e6e45fb26..883ddd45b 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -33,12 +33,12 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         <Featurebar
           title="This site uses cookies to improve your experience."
           description="By clicking, you agree to our Privacy Policy."
+          hide={acceptedCookies}
           action={
             <Button className="mx-5" onClick={() => setAcceptedCookies(true)}>
               Accept cookies
             </Button>
           }
-          className={cn({ ['translate-y-full']: acceptedCookies })}
         />
       </div>
     </CommerceProvider>

From cd3a80a3816815102422633bb2035fab8f0210f4 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Wed, 21 Oct 2020 19:13:41 -0300
Subject: [PATCH 02/14] fix cookie mobile

---
 components/core/Featurebar/Featurebar.module.css |  9 ---------
 components/core/Featurebar/Featurebar.tsx        | 10 +++++-----
 2 files changed, 5 insertions(+), 14 deletions(-)
 delete mode 100644 components/core/Featurebar/Featurebar.module.css

diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css
deleted file mode 100644
index f8aa6ba4d..000000000
--- a/components/core/Featurebar/Featurebar.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.separator {
-  @apply mx-3 bg-secondary;
-  width: 1px;
-  height: 20px;
-}
-
-.separator:before {
-  content: '';
-}
diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx
index 0f77fece6..22d637113 100644
--- a/components/core/Featurebar/Featurebar.tsx
+++ b/components/core/Featurebar/Featurebar.tsx
@@ -1,6 +1,5 @@
 import cn from 'classnames'
 import { FC } from 'react'
-import s from './Featurebar.module.css'
 
 interface Props {
   className?: string
@@ -18,15 +17,16 @@ const Featurebar: FC<Props> = ({
   hide,
 }) => {
   const rootClassName = cn(
-    'transition-transform transform duration-500 ease-out p-6 bg-primary text-base text-sm md:flex flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10',
+    'transition-transform transform duration-500 text-center ease-out p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10',
     { 'translate-y-full': hide },
     className
   )
   return (
     <div className={rootClassName}>
-      <span>{title}</span>
-      <span className={s.separator} />
-      <span>{description}</span>
+      <span className="block md:inline">{title}</span>
+      <span className="block mb-6 md:inline md:mb-0 md:ml-2">
+        {description}
+      </span>
       {action && action}
     </div>
   )

From c28b7589d3dfe1219fe3c50a5e6c360d7fdd802e Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Wed, 21 Oct 2020 19:32:22 -0300
Subject: [PATCH 03/14] add scaling animation

---
 components/product/ProductCard/ProductCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index dc04715c2..e64f79468 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/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"
+            className="w-full object-cover transform scale-90 hover:scale-100 transition-transform duration-500"
             src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>

From 8078c0b8326c401ef565a0de8049dc191c611ad4 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Wed, 21 Oct 2020 19:51:46 -0300
Subject: [PATCH 04/14] add different approach on hover animation

---
 .../ProductCard/ProductCard.module.css        | 22 ++++++++++++++++++-
 .../product/ProductCard/ProductCard.tsx       |  2 +-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index d0ea6d80c..a2edab7d0 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -35,6 +35,26 @@
     &: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 {
@@ -58,7 +78,7 @@
 .productTitle > span,
 .productPrice,
 .wishlistButton {
-  @apply transition ease-in-out duration-300;
+  @apply transition ease-in-out duration-500;
 }
 
 .squareBg {
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index e64f79468..7c0a15573 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/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 scale-90 hover:scale-100 transition-transform duration-500"
+            className="w-full object-cover transform scale-75 hover:scale-90 transition-transform duration-500"
             src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>

From cf3d5323c4a869765a4090f7fc0aa44231bc05b3 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Wed, 21 Oct 2020 19:58:36 -0300
Subject: [PATCH 05/14] replace colors

---
 assets/global.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/global.css b/assets/global.css
index 4d3d23402..e147ef27a 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -14,12 +14,12 @@
 
   --hover: rgba(0, 0, 0, 0.075);
 
-  --cyan: #50e3c2;
+  --cyan: #22b8cf;
   --green: #37b679;
   --red: #da3c3c;
-  --pink: #ff0080;
+  --pink: #e64980;
   --purple: #f81ce5;
-  --violet: #7928ca;
+  --violet: #5f3dc4;
   --blue: #0070f3;
 
   --accents-0: #f8f9fa;

From 1eb8c48f2e41163f54ad09149ebce5d8174a208d Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Wed, 21 Oct 2020 20:14:44 -0300
Subject: [PATCH 06/14] move theme switcher

---
 components/core/Navbar/Navbar.tsx          | 12 +++---------
 components/core/UserNav/UserNav.module.css |  2 +-
 components/core/UserNav/UserNav.tsx        | 15 ++++++++++++++-
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx
index 39e22eb17..db3e8f1ae 100644
--- a/components/core/Navbar/Navbar.tsx
+++ b/components/core/Navbar/Navbar.tsx
@@ -1,16 +1,16 @@
 import s from './Navbar.module.css'
 import { FC } from 'react'
 import Link from 'next/link'
-import { useTheme } from 'next-themes'
 import { Logo } from '@components/ui'
-import { Searchbar, Toggle, UserNav } from '@components/core'
+import { Searchbar, UserNav } from '@components/core'
+
 interface Props {
   className?: string
 }
 
 const Navbar: FC<Props> = ({ className }) => {
   const rootClassName = className
-  const { theme, setTheme } = useTheme()
+
   return (
     <div className={rootClassName}>
       <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
@@ -38,12 +38,6 @@ const Navbar: FC<Props> = ({ className }) => {
         </div>
 
         <div className="flex flex-1 justify-end space-x-8">
-          <Toggle
-            checked={theme === 'dark'}
-            onChange={() =>
-              theme === 'dark' ? setTheme('light') : setTheme('dark')
-            }
-          />
           <UserNav />
         </div>
       </div>
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index 530cea1ae..c187c9001 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -26,6 +26,6 @@
   }
 
   & .link {
-    @apply px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
+    @apply px-6 py-3 flex items-center space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
   }
 }
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index b25ffee6c..49a355c93 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -1,10 +1,11 @@
 import { FC, useState } from 'react'
 import cn from 'classnames'
 import useCart from '@lib/bigcommerce/cart/use-cart'
-import { Avatar } from '@components/core'
+import { Avatar, Toggle } from '@components/core'
 import { Heart, Bag } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import s from './UserNav.module.css'
+import { useTheme } from 'next-themes'
 import Link from 'next/link'
 interface Props {
   className?: string
@@ -17,6 +18,7 @@ const countItems = (count: number, items: any[]) =>
 
 const UserNav: FC<Props> = ({ className }) => {
   const { data } = useCart()
+  const { theme, setTheme } = useTheme()
   const [displayDropdown, setDisplayDropdown] = useState(false)
   const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
@@ -59,6 +61,17 @@ const UserNav: FC<Props> = ({ className }) => {
             <Link href="#">
               <a className={s.link}>My Account</a>
             </Link>
+            <span className="inline-flex items-start px-6 py-2">
+              <span className="capitalize inline-block mr-2 text-base leading-6 font-medium text-gray-900">
+                Theme
+              </span>
+              <Toggle
+                checked={theme === 'dark'}
+                onChange={() =>
+                  theme === 'dark' ? setTheme('light') : setTheme('dark')
+                }
+              />
+            </span>
             <Link href="#">
               <a className={cn(s.link, 'mt-4')}>Logout</a>
             </Link>

From 8d1901241ee3e06493599cfd12aa40f64ea184b4 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 11:20:29 -0300
Subject: [PATCH 07/14] add textured bg

---
 .../ProductCard/ProductCard.module.css        | 28 ++++++++++++++++---
 .../product/ProductCard/ProductCard.tsx       |  2 +-
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index a2edab7d0..442422eee 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -3,7 +3,27 @@
 
   &:hover {
     & .squareBg {
-      @apply scale-75;
+      background-color: var(--violet);
+      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,
@@ -36,7 +56,7 @@
       @apply bg-cyan text-white;
     }
 
-    & .squareBg {
+    /* & .squareBg {
       @apply bg-white;
     }
 
@@ -54,7 +74,7 @@
 
     &:nth-child(6n + 6) .squareBg {
       @apply bg-white;
-    }
+    } */
   }
 
   &:nth-child(6n + 1) .squareBg {
@@ -122,5 +142,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;
 }
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 7c0a15573..90ba7b79a 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/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 scale-75 hover:scale-90 transition-transform duration-500"
+            className="w-full object-cover transform hover:scale-95 transition-transform duration-500"
             src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>

From ef406cfaf6f4bec300bb5d976d4cd9bb409d74d8 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 11:53:35 -0300
Subject: [PATCH 08/14] add bg pattern

---
 .../ProductCard/ProductCard.module.css        | 43 +------------------
 .../product/ProductCard/ProductCard.tsx       |  2 +-
 2 files changed, 3 insertions(+), 42 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 442422eee..a531855fd 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -3,27 +3,7 @@
 
   &:hover {
     & .squareBg {
-      background-color: var(--violet);
-      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;
+      transform: scale(1.05);
     }
 
     & .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 {
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 90ba7b79a..39889130b 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/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>

From a0720a2ee91b23866a377ff48f40eed63f830cd4 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 12:04:22 -0300
Subject: [PATCH 09/14] fix the scale

---
 components/product/ProductCard/ProductCard.module.css | 8 ++++++++
 components/product/ProductCard/ProductCard.tsx        | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index a531855fd..6606f748e 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -6,6 +6,10 @@
       transform: scale(1.05);
     }
 
+    & .product-image {
+      @apply scale-90;
+    }
+
     & .productTitle > span,
     & .productPrice,
     & .wishlistButton {
@@ -37,6 +41,10 @@
     }
   }
 
+  & .product-image {
+    @apply transform transition-transform duration-500;
+  }
+
   &:nth-child(6n + 1) .squareBg {
     @apply bg-violet;
   }
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 39889130b..b621ba5d2 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/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-90 transition-transform duration-500"
+            className={cn('w-full object-cover', s['product-image'])}
             src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>

From b488afe519523ab039b01284567d140e9e9cb5d5 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 12:18:09 -0300
Subject: [PATCH 10/14] lower pattern opacity

---
 components/product/ProductCard/ProductCard.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 6606f748e..919dedbf0 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -71,7 +71,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");
+  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.1' 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.1' 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.1' 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.1' 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 {

From 9c28486170194ddf72c6bad35201537e0076257c Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 12:22:25 -0300
Subject: [PATCH 11/14] fix padding on y axis

---
 components/product/ProductCard/ProductCard.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 919dedbf0..0129abdf1 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -71,7 +71,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.1' 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.1' 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.1' 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.1' 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");
+  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 {

From 5b385d8870fe4f9714756890ee86def3eb484a70 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 14:19:50 -0300
Subject: [PATCH 12/14] fix gray color on product bg

---
 components/product/ProductCard/ProductCard.module.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 0129abdf1..e77328676 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -70,7 +70,8 @@
 }
 
 .squareBg {
-  @apply transform absolute inset-0 z-0 bg-secondary;
+  @apply transform absolute inset-0 z-0;
+  background-color: #212529;
   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");
 }
 

From 5f68e9ca5a8480875c19ffe14e7a7bdb6bde563d Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 14:21:08 -0300
Subject: [PATCH 13/14] shorter transition

---
 components/product/ProductCard/ProductCard.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index e77328676..2cd18cc8c 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -7,7 +7,7 @@
     }
 
     & .product-image {
-      @apply scale-90;
+      transform: scale(0.98);
     }
 
     & .productTitle > span,

From 6dfb557019824cd5506909c48a772111f2be0dc2 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 17:49:12 -0300
Subject: [PATCH 14/14] tweak bg colors

---
 .../product/ProductCard/ProductCard.module.css      | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 2cd18cc8c..9246c2f7c 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -2,12 +2,12 @@
   @apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
 
   &:hover {
-    & .squareBg {
-      transform: scale(1.05);
+    & .squareBg:before {
+      transform: scale(0.98);
     }
 
     & .product-image {
-      transform: scale(0.98);
+      transform: scale(1.05);
     }
 
     & .productTitle > span,
@@ -72,12 +72,17 @@
 .squareBg {
   @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 {