cover full screen and center

components/product/ProductSlider/ProductSlider.module.css

@@ -5,7 +5,7 @@
 
 .leftControl,
 .rightControl {
-  @apply text-white absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
+  @apply text-white text-xl absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
 }
 
 .leftControl {
@@ -13,11 +13,11 @@
 }
 
 .rightControl {
-  @apply right-6 rotate-180 transform;
+  @apply right-6;
 }
 
 .control {
-  @apply opacity-0 transition-all duration-150;
+  @apply opacity-0 transition duration-150;
 }
 
 .root:hover .control {

components/product/ProductSlider/ProductSlider.tsx

@@ -1,6 +1,6 @@
-import { ArrowLeft } from '@components/icon'
 import { useKeenSlider } from 'keen-slider/react'
 import React, { Children, FC, isValidElement, useState } from 'react'
+import { HiChevronLeft, HiChevronRight } from 'react-icons/hi'
 import cn from 'classnames'
 
 import s from './ProductSlider.module.css'
@@ -17,10 +17,10 @@ const ProductSlider: FC = ({ children }) => {
   return (
     <div className={s.root}>
       <button className={cn(s.leftControl, s.control)} onClick={slider?.prev}>
-        <ArrowLeft />
+        <HiChevronLeft />
       </button>
       <button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
-        <ArrowLeft />
+        <HiChevronRight />
       </button>
       <div ref={ref} className="keen-slider h-full">
         {Children.map(children, (child) => {

components/product/ProductView/ProductView.module.css

@@ -17,7 +17,7 @@
   }
 
   @screen lg {
-    @apply mx-0 col-span-7;
+    @apply mx-0 col-span-6;
     min-height: 100%;
     height: 100%;
   }
@@ -52,8 +52,7 @@
   @apply flex flex-col col-span-1;
 
   @screen lg {
-    @apply col-span-5;
-    padding-top: 5rem;
+    @apply col-span-5 pl-12 pt-20;
   }
 }
 

components/product/ProductView/ProductView.tsx

@@ -46,7 +46,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
   }
 
   return (
-    <Container>
+    <Container className="max-w-none w-full" clean>
       <NextSeo
         title={product.name}
         description={product.description}
@@ -88,12 +88,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
               ))}
             </ProductSlider>
           </div>
-
-          {!validMedia && (
-            <div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
-              <img src="/slider-arrows.png" />
-            </div>
-          )}
         </div>
 
         <div className={s.sidebar}>

components/ui/Container/Container.tsx

@@ -5,10 +5,11 @@ interface Props {
   className?: string
   children?: any
   el?: HTMLElement
+  clean?: boolean
 }
 
-const Container: FC<Props> = ({ children, className, el = 'div' }) => {
-  const rootClassName = cn('mx-auto max-w-8xl px-12', className)
+const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
+  const rootClassName = cn(className, { 'mx-auto max-w-8xl px-12': !clean })
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement