🎨 styles: product info responsive

:%s

src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss

@@ -0,0 +1,9 @@
+@import '../../../../styles/utilities';
+
+.productInfoDetail {
+    @apply spacing-horizontal;
+    margin: 0 auto 4rem;
+    @screen md {
+        @apply flex;
+    }
+}

src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss

@@ -1,4 +1,11 @@
 .productImgs {
+    @apply w-full;
+    @screen sm-only {
+        margin-bottom: 2rem;
+    }
+    @screen lg {
+        max-width: 60rem;
+    }
     .img {
         @apply w-full h-full;
         object-fit: cover;

src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss

@@ -1,6 +1,13 @@
 @import "../../../../../../styles/utilities";
 
 .productInfo {
+    @screen md {
+        max-width: 39rem;
+        margin-left: 4.8rem;
+    }
+    @screen lg {
+        margin-left: 11.2rem;
+    }
     .info {
         margin-bottom: 3.2rem;
         .heading {
@@ -25,12 +32,46 @@
             margin-top: 0.8rem;
         }
     }
+    .actions {
+        @screen sm-only {
+            @apply fixed flex justify-between items-center bg-white w-full;
+            z-index: 10000;
+            bottom: 0;
+            left: 0;
+            padding: 2rem;
+        }
+    }
     .bottom {
+        @screen sm-only {
+            @apply flex justify-between items-center flex-row-reverse;
+            margin-left: 1rem;
+            flex: 1;
+            button {
+                &:first-child {
+                    min-width: 13rem;
+                }
+                &:nth-child(n + 1) {
+                    margin-left: 0.8rem;
+                }
+            }
+        }
+        .buttonWithIcon {
+            @apply flex items-center;
+            .label {
+                @apply hidden;
+                @screen md {
+                    @apply inline-block;
+                    margin-left: 0.8rem;
+                }
+            }
+        }
+        button {
+            @apply w-full;
+        }
+
         @screen md {
             margin-top: 2.4rem;
-            max-width: 39rem;
             button {
-                @apply w-full;
                 &:first-child {
                     margin-bottom: 0.8rem;
                 }

src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common'
+import { IconBuy } from 'src/components/icons'
 import { LANGUAGE } from 'src/utils/language.utils'
 import s from './ProductInfo.module.scss'
 
@@ -25,10 +26,17 @@ const ProductInfo = ({ }: Props) => {
                     In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley
                 </div>
             </div>
-            <QuanittyInput />
+            <div className={s.actions}>
-            <div className={s.bottom}>
+                <QuanittyInput />
-                <ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.BUY_NOW}</ButtonCommon>
+                <div className={s.bottom}>
-                <ButtonCommon size='large' type='light'>{LANGUAGE.BUTTON_LABEL.ADD_TO_CARD}</ButtonCommon>
+                    <ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.BUY_NOW}</ButtonCommon>
+
+                    <ButtonCommon size='large' type='light'>
+                        <span className={s.buttonWithIcon}>
+                            <IconBuy /><span className={s.label}>{LANGUAGE.BUTTON_LABEL.ADD_TO_CARD}</span>
+                        </span>
+                    </ButtonCommon>
+                </div>
             </div>
         </section >
     )

tailwind.config.js

@@ -49,17 +49,17 @@ module.exports = {
         'background': 'var(--background)',
         'white': 'var(--white)',
 
-        'background-arrow':'var(--background-arrow)',
+        'background-arrow': 'var(--background-arrow)',
+
 
-        
         'disabled': 'var(--text-disabled)',
         line: 'var(--border-line)',
         background: 'var(--background)',
         white: 'var(--white)',
         gray: 'var(--gray)',
         disabled: 'var(--text-disabled)',
-        'background-arrow':'var(--background-arrow)',
+        'background-arrow': 'var(--background-arrow)',
-        
+
         // @deprecated (NOT use these variables)
         'primary-2': 'var(--primary-2)',
         secondary: 'var(--secondary)',
@@ -93,7 +93,7 @@ module.exports = {
         label: 'var(--text-label)',
         placeholder: 'var(--text-placeholder)',
         primary: 'var(--primary)',
-        
+
         // @deprecated (NOT use these variables)
         secondary: 'var(--text-secondary)',
       },
@@ -109,12 +109,15 @@ module.exports = {
         rounded: '.8rem',
       },
       screens: {
+        'sm-only': {'min': '0', 'max': '767px'},
         'sm': '640px',
         // => @media (min-width: 640px) { ... }
 
+        'md-only': {'min': '768px', 'max': '1023px'},
         'md': '768px',
         // => @media (min-width: 768px) { ... }
 
+        'lg-only': {'min': '1024px', 'max': '1279px'},
         'lg': '1024px',
         // => @media (min-width: 1024px) { ... }
 
@@ -124,8 +127,8 @@ module.exports = {
         '2xl': '1536px',
         // => @media (min-width: 1536px) { ... }
       },
-      caroucel:{
+      caroucel: {
-        "arrow-height":"64px"
+        "arrow-height": "64px"
       },
     },
   },