From a25da7d6cf496a617a4db16ce8d7155038ebbeac Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 5 Oct 2020 14:28:59 -0300
Subject: [PATCH] Transitions

---
 components/core/Navbar/Navbar.module.css      |   4 +
 components/core/Navbar/Navbar.tsx             |  15 ++-
 components/icon/Heart.tsx                     |   2 +-
 .../ProductCard/ProductCard.module.css        |  64 +++++++++-
 .../product/ProductCard/ProductCard.tsx       |  44 ++++---
 components/ui/Grid/Grid.module.css            | 112 +++++++++++-------
 components/ui/Grid/Grid.tsx                   |   4 +
 pages/index.tsx                               |   2 +-
 8 files changed, 178 insertions(+), 69 deletions(-)

diff --git a/components/core/Navbar/Navbar.module.css b/components/core/Navbar/Navbar.module.css
index 7f08b4c9c..5db900503 100644
--- a/components/core/Navbar/Navbar.module.css
+++ b/components/core/Navbar/Navbar.module.css
@@ -1,3 +1,7 @@
 .root {
   @apply flex justify-between items-center flex-row px-6 h-20 relative;
 }
+
+.link {
+  @apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 cursor-pointer;
+}
diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx
index 5c5a96dc3..fc7df560c 100644
--- a/components/core/Navbar/Navbar.tsx
+++ b/components/core/Navbar/Navbar.tsx
@@ -4,6 +4,7 @@ import s from './Navbar.module.css'
 import { Logo, Container } from '@components/ui'
 import { Searchbar } from '@components/core'
 import { UserNav } from '@components/core'
+import Link from 'next/link'
 interface Props {
   className?: string
 }
@@ -12,12 +13,16 @@ const Navbar: FC<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className)
   return (
     <Container className={rootClassName}>
-      <Logo />
+      <Link href="/">
+        <h1 className="cursor-pointer">
+          <Logo />
+        </h1>
+      </Link>
       <div className="flex flex-row h-full content-center flex-1 ml-10">
-        <nav className="hidden flex-row items-center px-3 lg:flex">
-          <a className="pr-4">All</a>
-          <a className="pr-4">Clothes</a>
-          <a>Accesories</a>
+        <nav className="hidden flex-row items-center px-6 lg:flex space-x-4">
+          <a className={s.link}>All</a>
+          <a className={s.link}>Clothes</a>
+          <a className={s.link}>Accesories</a>
         </nav>
         <Searchbar />
       </div>
diff --git a/components/icon/Heart.tsx b/components/icon/Heart.tsx
index 9c8b9162b..afa2f6aaa 100644
--- a/components/icon/Heart.tsx
+++ b/components/icon/Heart.tsx
@@ -10,7 +10,7 @@ const Heart = ({ ...props }) => {
     >
       <path
         d="M20.84 2.61C20.3292 2.099 19.7228 1.69365 19.0554 1.41708C18.3879 1.14052 17.6725 0.998175 16.95 0.998175C16.2275 0.998175 15.5121 1.14052 14.8446 1.41708C14.1772 1.69365 13.5708 2.099 13.06 2.61L12 3.67L10.94 2.61C9.9083 1.57831 8.50903 0.998709 7.05 0.998709C5.59096 0.998709 4.19169 1.57831 3.16 2.61C2.1283 3.64169 1.54871 5.04097 1.54871 6.5C1.54871 7.95903 2.1283 9.35831 3.16 10.39L4.22 11.45L12 19.23L19.78 11.45L20.84 10.39C21.351 9.87924 21.7563 9.27281 22.0329 8.60536C22.3095 7.9379 22.4518 7.22249 22.4518 6.5C22.4518 5.77751 22.3095 5.0621 22.0329 4.39464C21.7563 3.72719 21.351 3.12076 20.84 2.61V2.61Z"
-        stroke="black"
+        stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index a7475fd9e..f519541a8 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -1,9 +1,67 @@
 .root {
   @apply relative w-full p-6 box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear;
+
+  &:hover {
+    @apply cursor-pointer;
+
+    & .squareBg {
+      @apply inset-10;
+    }
+
+    & .productTitle,
+    & .productPrice,
+    & .wishlistButton {
+      @apply bg-black text-white;
+    }
+
+    &:nth-child(6n + 1) .productTitle,
+    &:nth-child(6n + 1) .productPrice,
+    &:nth-child(6n + 1) .wishlistButton {
+      @apply bg-violet text-white;
+    }
+
+    &:nth-child(6n + 5) .productTitle,
+    &:nth-child(6n + 5) .productPrice,
+    &:nth-child(6n + 5) .wishlistButton {
+      @apply bg-blue text-white;
+    }
+
+    &:nth-child(6n + 3) .productTitle,
+    &:nth-child(6n + 3) .productPrice,
+    &:nth-child(6n + 3) .wishlistButton {
+      @apply bg-pink text-white;
+    }
+
+    &:nth-child(6n + 6) .productTitle,
+    &:nth-child(6n + 6) .productPrice,
+    &:nth-child(6n + 6) .wishlistButton {
+      @apply bg-cyan text-black;
+    }
+  }
+
+  &:nth-child(6n + 1) .squareBg {
+    @apply bg-violet;
+  }
+
+  &:nth-child(6n + 5) .squareBg {
+    @apply bg-blue;
+  }
+
+  &:nth-child(6n + 3) .squareBg {
+    @apply bg-pink;
+  }
+
+  &:nth-child(6n + 6) .squareBg {
+    @apply bg-cyan;
+  }
+}
+
+.squareBg {
+  @apply cursor-pointer absolute inset-0 z-0 transition-all duration-75 ease-in-out bg-black;
 }
 
 .productTitle {
-  @apply p-3 h-14 bg-white text-black font-bold text-lg truncate leading-8 inline-flex;
+  @apply p-3 h-14 bg-white text-black font-bold text-lg truncate leading-8 inline-flex transition ease-linear;
   max-width: calc(100% - 50px);
 
   @screen lg {
@@ -12,9 +70,9 @@
 }
 
 .productPrice {
-  @apply px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6;
+  @apply px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6 transition ease-linear;
 }
 
 .wishlistButton {
-  @apply w-14 h-14 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6 cursor-pointer;
+  @apply w-14 h-14 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6 cursor-pointer transition ease-linear;
 }
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index ce12b83dd..5187df527 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -2,7 +2,8 @@ import cn from 'classnames'
 import s from './ProductCard.module.css'
 import { FC } from 'react'
 import { Heart } from '@components/icon'
-import { url } from 'inspector'
+import Link from 'next/link'
+
 interface Props {
   className?: string
   children?: any
@@ -13,34 +14,39 @@ interface ProductData {
   name: string
   images: any
   prices: any
+  path: string
 }
 
 const ProductCard: FC<Props> = ({ className, node: productData }) => {
   const rootClassName = cn(s.root, className)
 
   return (
-    <div
-      className={rootClassName}
-      style={{
-        backgroundImage: `url('${productData.images.edges[0].node.urlSmall}')`,
-      }}
-    >
-      <div className="flex flex-row justify-between box-border w-full z-10 relative">
-        <div className="flex flex-col flex-1 overflow-hidden">
-          <div className="flex-1">
-            <h1 className={s.productTitle}>{productData.name}</h1>
-          </div>
-          <div className="flex-0">
-            <div className={s.productPrice}>
-              ${productData.prices.price.value}
+    <Link href={`product${productData.path}`}>
+      <div className={rootClassName}>
+        <div className="absolute z-10 inset-0 flex items-center justify-center">
+          <img
+            className="w-full object-cover"
+            src={productData.images.edges[0].node.urlSmall}
+          />
+        </div>
+        <div className={s.squareBg} />
+        <div className="flex flex-row justify-between box-border w-full z-10 relative">
+          <div className="flex flex-col flex-1 overflow-hidden">
+            <div className="flex-1">
+              <h1 className={s.productTitle}>{productData.name}</h1>
+            </div>
+            <div className="flex-0">
+              <div className={s.productPrice}>
+                ${productData.prices.price.value}
+              </div>
             </div>
           </div>
-        </div>
-        <div className={s.wishlistButton}>
-          <Heart />
+          <div className={s.wishlistButton}>
+            <Heart />
+          </div>
         </div>
       </div>
-    </div>
+    </Link>
   )
 }
 
diff --git a/components/ui/Grid/Grid.module.css b/components/ui/Grid/Grid.module.css
index 632af9ca3..a61c42b80 100644
--- a/components/ui/Grid/Grid.module.css
+++ b/components/ui/Grid/Grid.module.css
@@ -3,7 +3,7 @@
   @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-0;
 
   & > * {
-    @apply row-span-1 lg:col-span-1 bg-black box-border overflow-hidden;
+    @apply row-span-1 lg:col-span-1 bg-transparent box-border overflow-hidden;
     height: 500px;
     max-height: 800px;
 
@@ -13,83 +13,115 @@
   }
 }
 
+.default {
+  & > * {
+    @apply bg-transparent;
+  }
+}
+
 .layoutNormal {
   @apply gap-6;
 
   & > * {
     min-height: 325px;
-    @apply bg-white;
   }
 }
 
 .layoutA {
-  & > div:nth-child(6n + 1),
-  & > div:nth-child(6n + 5) {
-    @apply row-span-2 lg:col-span-2 bg-violet;
+  & > *:nth-child(6n + 1),
+  & > *:nth-child(6n + 5) {
+    @apply row-span-2 lg:col-span-2;
     height: var(--row-height);
   }
 
-  & > div:nth-child(6n + 5) {
-    @apply bg-blue;
-  }
+  &.filled {
+    & > *:nth-child(6n + 1),
+    & > *:nth-child(6n + 5) {
+      @apply bg-violet;
+    }
 
-  & > div:nth-child(6n + 3) {
-    @apply bg-pink;
-  }
+    & > *:nth-child(6n + 5) {
+      @apply bg-blue;
+    }
 
-  & > div:nth-child(6n + 6) {
-    @apply bg-cyan;
+    & > *:nth-child(6n + 3) {
+      @apply bg-pink;
+    }
+
+    & > *:nth-child(6n + 6) {
+      @apply bg-cyan;
+    }
   }
 }
 
 .layoutB {
-  & > div:nth-child(6n + 2) {
-    @apply row-span-2 lg:col-span-2 bg-blue;
+  & > *:nth-child(6n + 2),
+  & > *:nth-child(6n + 4) {
+    @apply row-span-2 lg:col-span-2;
     height: var(--row-height);
   }
 
-  & > div:nth-child(6n + 4) {
-    @apply row-span-2 lg:col-span-2 bg-violet;
-    height: var(--row-height);
-  }
+  &.filled {
+    & > *:nth-child(6n + 2) {
+      @apply bg-blue;
+    }
 
-  & > div:nth-child(6n + 3) {
-    @apply bg-pink;
-  }
+    & > *:nth-child(6n + 4) {
+      @apply bg-violet;
+    }
 
-  & > div:nth-child(6n + 6) {
-    @apply bg-cyan;
+    & > *:nth-child(6n + 3) {
+      @apply bg-pink;
+    }
+
+    & > *:nth-child(6n + 6) {
+      @apply bg-cyan;
+    }
   }
 }
 
 .layoutC {
-  & > div:nth-child(12n + 1) {
-    @apply row-span-2 lg:col-span-2 bg-violet;
+  & > *:nth-child(12n + 1),
+  & > *:nth-child(12n + 8) {
+    @apply row-span-2 lg:col-span-2;
     height: var(--row-height);
   }
 
-  & > div:nth-child(12n + 8) {
-    @apply row-span-2 lg:col-span-2 bg-cyan;
-    height: var(--row-height);
-  }
+  &.filled {
+    & > *:nth-child(12n + 1) {
+      @apply bg-violet;
+      height: var(--row-height);
+    }
 
-  & > div:nth-child(6n + 3) {
-    @apply bg-pink;
+    & > *:nth-child(12n + 8) {
+      @apply bg-cyan;
+      height: var(--row-height);
+    }
+
+    & > *:nth-child(6n + 3) {
+      @apply bg-pink;
+    }
   }
 }
 
 .layoutD {
-  & > div:nth-child(12n + 2) {
-    @apply row-span-2 lg:col-span-2 bg-violet;
+  & > *:nth-child(12n + 2),
+  & > *:nth-child(12n + 7) {
+    @apply row-span-2 lg:col-span-2;
     height: var(--row-height);
   }
 
-  & > div:nth-child(12n + 7) {
-    @apply row-span-2 lg:col-span-2 bg-cyan;
-    height: var(--row-height);
-  }
+  &.filled {
+    & > *:nth-child(12n + 2) {
+      @apply bg-violet;
+    }
 
-  & > div:nth-child(6n + 3) {
-    @apply bg-pink;
+    & > *:nth-child(12n + 7) {
+      @apply bg-cyan;
+    }
+
+    & > *:nth-child(6n + 3) {
+      @apply bg-pink;
+    }
   }
 }
diff --git a/components/ui/Grid/Grid.tsx b/components/ui/Grid/Grid.tsx
index 2ef6cddd8..ab41fde06 100644
--- a/components/ui/Grid/Grid.tsx
+++ b/components/ui/Grid/Grid.tsx
@@ -8,6 +8,7 @@ interface Props {
   items: [any] | any
   layout?: 'A' | 'B' | 'C' | 'D' | 'normal'
   wrapper?: ReactNode | Component | any
+  variant?: 'default' | 'filled'
 }
 
 const DefaultWrapper: FC<Props> = ({ children }) => <div>{children}</div> // DEFAULT ITEMS WRAPPER
@@ -17,6 +18,7 @@ const Grid: FC<Props> = ({
   className,
   layout = 'A',
   wrapper: Component = DefaultWrapper,
+  variant = 'default',
 }) => {
   const rootClassName = cn(
     s.root,
@@ -26,6 +28,8 @@ const Grid: FC<Props> = ({
       [s.layoutC]: layout === 'C',
       [s.layoutD]: layout === 'D',
       [s.layoutNormal]: layout === 'normal',
+      [s.default]: variant === 'default',
+      [s.filled]: variant === 'filled',
     },
     className
   )
diff --git a/pages/index.tsx b/pages/index.tsx
index 15c6d3aec..7661e3c42 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -63,7 +63,7 @@ export default function Home({
         )}
       />
       <div className="py-12 flex flex-row w-full">
-        <div className="flex-0 pr-3 w-48">
+        <div className="flex-0 pr-3 w-48 break-words">
           ALL CATEGORIES ACCESSORIES BAGS CLOTHING SHOES ALL DESIGNERS 032c 1017
         </div>
         <div className="flex-1">