From 96836b19697b48755e1a6a55f36e226022cefe89 Mon Sep 17 00:00:00 2001
From: Bel Curcio <curciobel@gmail.com>
Date: Mon, 31 May 2021 17:24:53 -0300
Subject: [PATCH] Modif footer

---
 components/common/Footer/Footer.tsx                   | 10 +++++-----
 components/product/ProductView/ProductView.module.css | 10 +++-------
 components/product/ProductView/ProductView.tsx        | 10 +++++++++-
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx
index 8fde704ac..f9f24b021 100644
--- a/components/common/Footer/Footer.tsx
+++ b/components/common/Footer/Footer.tsx
@@ -24,7 +24,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
   return (
     <footer className={rootClassName}>
       <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accent-2 py-12 text-primary bg-primary transition-colors duration-150">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accent-2 py-6 text-primary bg-primary transition-colors duration-150">
           <div className="col-span-1 lg:col-span-2">
             <Link href="/">
               <a className="flex flex-initial items-center font-bold md:mr-24">
@@ -95,12 +95,12 @@ const Footer: FC<Props> = ({ className, pages }) => {
             </div>
           </div>
         </div>
-        <div className="py-12 flex flex-col md:flex-row justify-between items-center space-y-4">
+        <div className="pt-6 pb-10 flex flex-col md:flex-row justify-between items-center space-y-4 text-accent-6 text-sm">
           <div>
             <span>&copy; 2020 ACME, Inc. All rights reserved.</span>
           </div>
-          <div className="flex items-center text-primary">
-            <span className="text-primary">Crafted by</span>
+          <div className="flex items-center text-primary text-sm">
+            <span className="text-primary">Created by</span>
             <a
               rel="noopener"
               href="https://vercel.com"
@@ -109,7 +109,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
               className="text-primary"
             >
               <Vercel
-                className="inline-block h-6 ml-4 text-primary"
+                className="inline-block h-6 ml-3 text-primary"
                 alt="Vercel.com Logo"
               />
             </a>
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
index 198fbc747..0b67ba853 100644
--- a/components/product/ProductView/ProductView.module.css
+++ b/components/product/ProductView/ProductView.module.css
@@ -6,8 +6,8 @@
   }
 }
 
-.productDisplay {
-  @apply relative flex px-0 pb-0 box-border col-span-1 bg-violet;
+.main {
+  @apply relative px-0 pb-0 box-border  flex flex-col col-span-1;
   min-height: 600px;
 
   @screen md {
@@ -15,11 +15,7 @@
   }
 
   @screen lg {
-    margin-right: -2rem;
-    margin-left: -2rem;
     @apply mx-0 col-span-8;
-    min-height: 100%;
-    height: 100%;
   }
 }
 
@@ -61,7 +57,7 @@
 }
 
 .sliderContainer {
-  @apply absolute z-10 inset-0 flex items-center justify-center overflow-x-hidden;
+  @apply flex items-center justify-center overflow-x-hidden bg-violet;
 }
 
 .imageContainer {
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 4e79fed0d..7eae0adf7 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -75,7 +75,7 @@ const ProductView: FC<Props> = ({ product }) => {
         }}
       />
       <div className={cn(s.root, 'fit')}>
-        <div className={cn(s.productDisplay, 'fit')}>
+        <div className={cn(s.main, 'fit')}>
           <div className={s.nameBox}>
             <h1 className={s.name}>{product.name}</h1>
             <div className={s.price}>
@@ -171,6 +171,14 @@ const ProductView: FC<Props> = ({ product }) => {
           </div>
         </div>
       </div>
+      <section className="py-12 px-6">
+        <Text variant="sectionHeading">Related Products</Text>
+        <div className="grid grid-cols-4 py-3 gap-5  h-48">
+          {Array.from({ length: 4 }).map((i) => (
+            <div className="bg-accent-6" />
+          ))}
+        </div>
+      </section>
     </Container>
   )
 }