Changes

components/product/ProductSlider/ProductSlider.module.css

@@ -20,7 +20,7 @@
 
 .leftControl,
 .rightControl {
-  @apply px-8 cursor-pointer;
+  @apply px-9 cursor-pointer;
   transition: background-color 0.2s ease;
 }
 

components/product/ProductView/ProductView.module.css

@@ -1,5 +1,6 @@
 .root {
   @apply relative grid items-start gap-1 grid-cols-1 overflow-x-hidden;
+  min-height: auto;
 }
 
 .main {
@@ -63,7 +64,6 @@
 @screen lg {
   .root {
     @apply grid-cols-12;
-    min-height: 900px;
   }
 
   .main {

components/product/ProductView/ProductView.tsx

@@ -126,7 +126,9 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
           />
           <div className="flex flex-row justify-between items-center">
             <Rating value={2} />
-            <div className="text-accent-6 pr-1 font-medium">36 reviews</div>
+            <div className="text-accent-6 pr-1 font-medium text-sm">
+              36 reviews
+            </div>
           </div>
           <div>
             <Button
@@ -155,10 +157,10 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
           </div>
         </div>
       </div>
-      <hr className="mt-6 border-accent-2" />
-      <section className="py-6 px-6 mb-10">
+      <hr className="mt-7 border-accent-2" />
+      <section className="py-12 px-6 mb-10">
         <Text variant="sectionHeading">Related Products</Text>
-        <div className="grid grid-cols-2 py-2 gap-4 md:grid-cols-4 md:gap-20">
+        <div className="grid grid-cols-2 py-2 gap-2 md:grid-cols-4 md:gap-20">
           {relatedProducts.map((p) => (
             <div
               key={p.path}
@@ -171,8 +173,8 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
                 variant="simple"
                 className="animated fadeIn"
                 imgProps={{
-                  width: 182,
-                  height: 182,
+                  width: 300,
+                  height: 300,
                 }}
               />
             </div>

components/ui/Button/Button.module.css

@@ -1,9 +1,10 @@
 .root {
   @apply bg-accent-9 text-accent-0 cursor-pointer inline-flex
-  px-10 py-4 rounded-sm leading-6 transition ease-in-out duration-150
+  px-10 py-5 leading-6 transition ease-in-out duration-150
   shadow-sm text-center justify-center uppercase
   border border-transparent items-center text-sm font-semibold
   tracking-wide;
+  max-height: 64px;
 }
 
 .root:hover {
@@ -42,3 +43,6 @@
   -webkit-perspective: 1000;
   -webkit-backface-visibility: hidden;
 }
+
+.progress {
+}

components/ui/Collapse/Collapse.module.css

@@ -7,7 +7,7 @@
 }
 
 .header .label {
-  @apply text-sm font-medium;
+  @apply text-base font-medium;
 }
 
 .content {

components/ui/Text/Text.module.css

@@ -11,5 +11,5 @@
 }
 
 .sectionHeading {
-  @apply pt-1 pb-2 text-2xl font-semibold tracking-wide cursor-pointer mb-2;
+  @apply pt-1 pb-2 text-2xl font-bold tracking-wide cursor-pointer mb-2;
 }

pages/product/[slug].tsx

@@ -71,7 +71,7 @@ export default function Slug({
   return router.isFallback ? (
     <h1>Loading...</h1>
   ) : (
-    <ProductView product={product as any} relatedProducts={relatedProducts} />
+    <ProductView product={product} relatedProducts={relatedProducts} />
   )
 }