Modif footer

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 {

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>
   )
 }