🔨 refactor: reponsive

:%s

pages/index.tsx

@@ -1,92 +1,16 @@
 
 import {  FeaturedProductCard, Layout, ProductCaroucel, RecipeCard } from 'src/components/common'
-import { HomeBanner, HomeCTA, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
+import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
-import image5 from "../public/assets/images/image5.png"
+
-import image6 from "../public/assets/images/image6.png"
-import image7 from "../public/assets/images/image7.png"
-import image8 from "../public/assets/images/image8.png"
 // import image9 from "../public/assets/images/image9.png"
 // import image10 from "../public/assets/images/image10.png"
 // import image11 from "../public/assets/images/image11.png"
 import image12 from "../public/assets/images/image12.png"
-import { CollectionCarcoucel } from 'src/components/modules/home'
+// import { CollectionCarcoucel } from 'src/components/modules/home'
 import HomeRecipe from 'src/components/modules/home/HomeRecipe/HomeRecipe'
 import image13 from "../public/assets/images/image13.png"
 import image14 from "../public/assets/images/image14.png"
 import { RecipeCardProps } from '../src/components/common/RecipeCard/RecipeCard';
-const dataTest = [{
-  name:"Tomato",
-  weight:"250g",
-  category:"VEGGIE",
-  price:"Rp 27.500",
-  imageSrc:image5.src
-},{
-  name:"Cucumber",
-  weight:"250g",
-  category:"VEGGIE",
-  price:"Rp 27.500",
-  imageSrc:image6.src
-},{
-  name:"Carrot",
-  weight:"250g",
-  category:"VEGGIE",
-  price:"Rp 27.500",
-  imageSrc:image7.src
-},{
-  name:"Salad",
-  weight:"250g",
-  category:"VEGGIE",
-  price:"Rp 27.500",
-  imageSrc:image8.src
-},{
-  name:"Tomato",
-  weight:"250g",
-  category:"VEGGIE",
-  price:"Rp 27.500",
-  imageSrc:image5.src
-},{
-  name:"Cucumber",
-  weight:"250g",
-  category:"VEGGIE",
-  price:"Rp 27.500",
-  imageSrc:image6.src
-},{
-  name:"Tomato",
-  weight:"250g",
-  category:"VEGGIE",
-  price:"Rp 27.500",
-  imageSrc:image5.src
-},{
-  name:"Cucumber",
-  weight:"250g",
-  category:"VEGGIE",
-  price:"Rp 27.500",
-  imageSrc:image6.src
-},{
-  name:"Carrot",
-  weight:"250g",
-  category:"VEGGIE",
-  price:"Rp 27.500",
-  imageSrc:image7.src
-},{
-  name:"Salad",
-  weight:"250g",
-  category:"VEGGIE",
-  price:"Rp 27.500",
-  imageSrc:image8.src
-},{
-  name:"Tomato",
-  weight:"250g",
-  category:"VEGGIE",
-  price:"Rp 27.500",
-  imageSrc:image5.src
-},{
-  name:"Cucumber",
-  weight:"250g",
-  category:"VEGGIE",
-  price:"Rp 27.500",
-  imageSrc:image6.src
-}]
 
 const recipe:RecipeCardProps[] = [{
   title: "Special Recipe of Vietnamese Phở",
@@ -118,11 +42,11 @@ const recipe:RecipeCardProps[] = [{
 export default function Home() {
   return (
     <>
-      <CollectionCarcoucel data={dataTest} itemKey="product-1" title="VEGGIE" subTitle= "Last call! Shop deep deals on 100+ bulk picks while you can." />
-      <HomeRecipe data={recipe}  itemKey="product-2" title="Special Recipes"/>
       <HomeBanner />
+      <HomeCollection/>
       <HomeVideo />
       <HomeCTA />
+      <HomeRecipe data={recipe}  itemKey="product-2" title="Special Recipes"/>
       <HomeSubscribe />
     </>
   )

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;
+    max-width: 20.8rem;
-    height: 31.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) {
+    @screen xl {
-        &:global(.leftArrow){
+        :global(.customArrow) {
-            left: calc(-6.4rem - 2rem);
+            &:global(.leftArrow){
-        }
+                left: calc(-6.4rem - 0rem);
-        &:global(.rightArrow){
+            }
-            right: calc(-6.4rem - 2rem);
+            &: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;
+    max-width: 39.2rem;
-    height: 34rem;
+    min-height: 34rem;
-    @apply inline-flex flex-col justify-between;
+    @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) {
+  @screen xl {
-    &:global(.leftArrow) {
+    :global(.customArrow) {
-      left: calc(-6.4rem - 2rem);
+      &:global(.leftArrow) {
-    }
+        left: calc(-6.4rem - 0rem);
-    &:global(.rightArrow) {
+      }
-      right: calc(-6.4rem - 2rem);
+      &: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) => {

src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.module.scss

@@ -1,12 +1,14 @@
 @import '../../../../styles/utilities';
 .colectionCarcoucelWarpper {
-	padding-top: 5.6rem; 
+  padding-top: 5.6rem;
-	padding-bottom: 6.5rem; 
+  padding-bottom: 6.5rem;
-  @apply flex flex-col ;
+  @apply flex flex-col;
   .top {
-    @apply  spacing-horizontal flex w-full justify-between;
+    @apply spacing-horizontal flex w-full justify-between;
-		.right{
+    @screen xl {
-			margin-right: 14.76;
+      .right {
-		}
+        margin-right: 2.476rem;
+      }
+    }
   }
 }

src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.tsx

@@ -4,13 +4,12 @@ import {
   ProductCaroucel,
   ViewAllItem,
 } from 'src/components/common'
+import { CollectionHeadingProps } from 'src/components/common/CollectionHeading/CollectionHeading'
 import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'
 import s from './CollectionCarcoucel.module.scss'
-interface ColectionCarcoucelProps {
+interface ColectionCarcoucelProps extends CollectionHeadingProps {
   data: ProductCardProps[]
   itemKey: string
-  title: string
-  subTitle: string
   viewAllLink?: string
 }
 
@@ -18,19 +17,21 @@ const ColectionCarcoucel = ({
   data,
   itemKey,
   title,
-  subTitle,
+  subtitle,
+  type
 }: ColectionCarcoucelProps) => {
   return (
     <div className={s.colectionCarcoucelWarpper}>
       <div className={s.top}>
         <div className={s.left}>
           <CollectionHeading
-            subtitle={subTitle}
+            type={type}
+            subtitle={subtitle}
             title={title}
           ></CollectionHeading>
         </div>
         <div className={s.right}>
-          <ViewAllItem />
+          <ViewAllItem link="#"/>
         </div>
       </div>
       <div className={s.bot}>

src/components/modules/home/HomeCollection/HomeCollection.tsx

@@ -0,0 +1,138 @@
+import React from 'react'
+import { CollectionCarcoucel } from '..'
+import image5 from '../../../../../public/assets/images/image5.png'
+import image6 from '../../../../../public/assets/images/image6.png'
+import image7 from '../../../../../public/assets/images/image7.png'
+import image8 from '../../../../../public/assets/images/image8.png'
+interface HomeCollectionProps {}
+const dataTest = [
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
+  {
+    name: 'Cucumber',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image6.src,
+  },
+  {
+    name: 'Carrot',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image7.src,
+  },
+  {
+    name: 'Salad',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image8.src,
+  },
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
+  {
+    name: 'Cucumber',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image6.src,
+  },
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
+  {
+    name: 'Cucumber',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image6.src,
+  },
+  {
+    name: 'Carrot',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image7.src,
+  },
+  {
+    name: 'Salad',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image8.src,
+  },
+  {
+    name: 'Tomato',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image5.src,
+  },
+  {
+    name: 'Cucumber',
+    weight: '250g',
+    category: 'VEGGIE',
+    price: 'Rp 27.500',
+    imageSrc: image6.src,
+  },
+]
+
+const HomeCollection = (props: HomeCollectionProps) => {
+  return (
+    <div className="w-full">
+      <CollectionCarcoucel
+        data={dataTest}
+        itemKey="product-1"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+      />
+      <CollectionCarcoucel
+        data={dataTest}
+        itemKey="product-2"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+      />
+      <CollectionCarcoucel
+        data={dataTest}
+        itemKey="product-3"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+      />
+      <CollectionCarcoucel
+        data={dataTest}
+        itemKey="product-4"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+      />
+      <CollectionCarcoucel
+        data={dataTest}
+        itemKey="product-5"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+      />
+      <CollectionCarcoucel
+        data={dataTest}
+        itemKey="product-6"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+      />
+    </div>
+  )
+}
+
+export default HomeCollection

src/components/modules/home/HomeRecipe/HomeRecipe.module.scss

@@ -6,8 +6,10 @@
   @apply flex flex-col;
   .top {
     @apply spacing-horizontal flex w-full justify-between;
-    .right {
+    @screen xl {
-      margin-right: 14.76;
+      .right {
+        margin-right: 2.476rem;
+      }
     }
   }
   .mid{
@@ -16,8 +18,12 @@
       @apply flex justify-start spacing-horizontal;
       .tab{
           padding: 1.6rem 1.6rem 0.8rem 1.6rem;
-          font-size: 3.2rem;
+          font-size: 2.4rem;
-          line-height: 4rem;
+          line-height: 2.8rem;
+          @screen md{   
+            font-size: 3.2rem;
+            line-height: 4rem;
+          }
 					outline: none;
           &.active{
             @apply text-background custom-border-radius bg-primary;

src/components/modules/home/HomeRecipe/HomeRecipe.tsx

@@ -19,7 +19,7 @@ const HomeRecipe = ({ data, itemKey, title }: HomeRecipeProps) => {
           <HeadingCommon>{title}</HeadingCommon>
         </div>
         <div className={s.right}>
-          <ViewAllItem />
+          <ViewAllItem link="#"/>
         </div>
       </div>
 			<div className={s.mid}>

src/components/modules/home/index.ts

@@ -3,3 +3,4 @@ export { default as CollectionCarcoucel } from './CollectionCarcoucel/Collection
 export { default as HomeCTA } from './HomeCTA/HomeCTA'
 export { default as HomeSubscribe } from './HomeSubscribe/HomeSubscribe'
 export { default as HomeVideo } from './HomeVideo/HomeVideo'
+export { default as HomeCollection } from './HomeCollection/HomeCollection'

src/styles/_utilities.scss

@@ -88,10 +88,6 @@
             padding-left: 6.4rem;
             padding-right: 6.4rem;
         }
-        @screen md {
-            padding-left: 11.2rem;
-            padding-right: 11.2rem;
-        }
     }
     .spacing-horizontal-left {
         padding-left: 2rem;