🔨 refactor: reponsive

:%s

src/components/common/CollectionHeading/CollectionHeading.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import s from './CollectionHeading.module.scss'
 import HeadingCommon from '../HeadingCommon/HeadingCommon'
 
-interface CollectionHeadingProps {
+export interface CollectionHeadingProps {
     type?: 'default' | 'highlight' | 'light';
     title: string;
     subtitle: string;

src/components/common/ProductCard/ProductCard.module.scss

@@ -1,9 +1,9 @@
 .productCardWarpper{
-    width: 20.8rem;
-    height: 31.8rem;
+    max-width: 20.8rem;
+    min-height: 31.8rem;
     padding: 1.2rem 1.2rem 0 1.2rem;
     margin-bottom: 1px;
-    @apply inline-flex flex-col justify-between;
+    @apply flex flex-col justify-between;
     .cardTop{
         @apply relative;
         height: 13.8rem;
@@ -49,10 +49,10 @@
         }
     }
     .cardBot{
-        max-height: 4rem;
+        min-height: 4rem;
         @apply flex justify-between items-center; 
         .cardButton{
-            width: 13.6rem;
+            // width: 13.6rem;
         }
     }
 }

src/components/common/ProductCaroucel/ProductCaroucel.module.scss

@@ -1,12 +1,15 @@
 @import "../../../styles/utilities";
 .productCardWarpper{
     @apply spacing-horizontal;
-    :global(.customArrow) {
-        &:global(.leftArrow){
-            left: calc(-6.4rem - 2rem);
-        }
-        &:global(.rightArrow){
-            right: calc(-6.4rem - 2rem);
+    @screen xl {
+        :global(.customArrow) {
+            &:global(.leftArrow){
+                left: calc(-6.4rem - 0rem);
+            }
+            &:global(.rightArrow){
+                right: calc(-6.4rem - 0rem);
+            }
         }
     }
+        
 }

src/components/common/ProductCaroucel/ProductCaroucel.tsx

@@ -15,11 +15,16 @@ const OPTION_DEFAULT: TOptionsEvents = {
   slidesPerView: 2,
   mode: 'free',
   breakpoints: {
+    '(min-width: 640px)': {
+      slidesPerView: 3,
+    },
     '(min-width: 768px)': {
       slidesPerView: 3,
     },
     '(min-width: 1024px)': {
-      slidesPerView: 5.5,
+      slidesPerView: 4.5,
+    },'(min-width: 1280px)': {
+      slidesPerView: 6,
     },
   },
 }

src/components/common/RecipeCard/RecipeCard.module.scss

@@ -1,14 +1,14 @@
 .recipeCardWarpper{
-    width: 39.2rem;
-    height: 34rem;
-    @apply inline-flex flex-col justify-between;
+    max-width: 39.2rem;
+    min-height: 34rem;
+    @apply inline-flex flex-col justify-start;
     .image{
         width: 100%;
-        height: 22rem;
+        max-height: 22rem;
         border-radius: 2.4rem;
     }
     .title{
-        padding: 1.6rem 8rem 0.4rem 0.8rem;
+        padding: 1.6rem 0.8rem 0.4rem 0.8rem;
         // padding: 0 0.8rem;
         @apply font-bold;
         font-size: 2rem;

src/components/common/RecipeCaroucel/RecipeCaroucel.module.scss

@@ -1,12 +1,14 @@
 @import '../../../styles/utilities';
 .recipeCardWarpper {
   @apply spacing-horizontal;
-  :global(.customArrow) {
-    &:global(.leftArrow) {
-      left: calc(-6.4rem - 2rem);
-    }
-    &:global(.rightArrow) {
-      right: calc(-6.4rem - 2rem);
+  @screen xl {
+    :global(.customArrow) {
+      &:global(.leftArrow) {
+        left: calc(-6.4rem - 0rem);
+      }
+      &:global(.rightArrow) {
+        right: calc(-6.4rem - 0rem);
+      }
     }
   }
 }

src/components/common/RecipeCaroucel/RecipeCaroucel.tsx

@@ -12,16 +12,22 @@ interface RecipeCaroucelProps
 	}
 
 const OPTION_DEFAULT: TOptionsEvents = {
-  slidesPerView: 1,
+  slidesPerView: 1.25,
   mode: 'free',
   spacing:24,
   breakpoints: {
-    '(min-width: 768px)': {
+    '(min-width: 640px)': {
       slidesPerView: 2,
     },
     '(min-width: 1024px)': {
+      slidesPerView: 2.5,
+    },
+    '(min-width: 1440px)': {
       slidesPerView: 3,
     },
+    '(min-width: 1536px)': {
+      slidesPerView: 3.5,
+    },
   },
 }
 const RecipeCaroucel = ({ option, data, ...props }: RecipeCaroucelProps) => {