🐛 bug: fix bug before merge to common

:%s
2025-07-04 20:21:21 +00:00 · 2021-08-27 15:08:32 +07:00 · 2021-08-27 15:08:32 +07:00 · 077020f450
commit 077020f450
parent c27fbef46b
25 changed files with 149 additions and 143 deletions
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -1,42 +1,8 @@

-import {  FeaturedProductCard, Layout, ProductCaroucel, RecipeCard } from 'src/components/common'
+import { Layout } from 'src/components/common'
 import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
+import HomeRecipe from 'src/components/modules/home/HomeRecipe/HomeRecipe';

-// 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 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 recipe:RecipeCardProps[] = [{
-  title: "Special Recipe of Vietnamese Phở",
-  description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients.  To make this pho soup recipe, you will need:",
-  imageSrc: image12.src
-},{
-  title: "Original Recipe of Curry",
-  description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
-  imageSrc: image13.src
-},{
-  title: "The Best Recipe of Beef Noodle Soup",
-  description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
-  imageSrc: image14.src
-},{
-  title: "Special Recipe of Vietnamese Phở",
-  description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients.  To make this pho soup recipe, you will need:",
-  imageSrc: image12.src
-},{
-  title: "Original Recipe of Curry",
-  description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
-  imageSrc: image13.src
-},{
-  title: "The Best Recipe of Beef Noodle Soup",
-  description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
-  imageSrc: image14.src
-}]


 export default function Home() {
@ -46,7 +12,7 @@ export default function Home() {
      <HomeCollection/>
      <HomeVideo />
      <HomeCTA />
-      <HomeRecipe data={recipe}  itemKey="product-2" title="Special Recipes"/>
+      <HomeRecipe />
      <HomeSubscribe />
    </>
  )
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@ -5,7 +5,7 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  padding: 1.2rem 3.2rem;
+  padding: 0.8rem 3.2rem;
  &:disabled {
    filter: brightness(0.9);
    cursor: not-allowed;
--- a/src/components/common/CarouselCommon/CarouselCommon.module.scss
+++ b/src/components/common/CarouselCommon/CarouselCommon.module.scss
@ -25,18 +25,18 @@
 	:global {
 		.dots {
 			display: flex;
-			padding: 10px 0;
+			padding: 1rem 0;
 			justify-content: center;
 		}
 	
 		.dot {
 			border: none;
-			width: 10px;
-			height: 10px;
+			width: 1rem;
+			height: 1rem;
 			background: #c5c5c5;
 			border-radius: 50%;
-			margin: 0 5px;
-			padding: 5px;
+			margin: 0 0.5rem;
+			padding: 0.5rem;
 			cursor: pointer;
 		}
 	
--- a/src/components/common/CarouselCommon/CarouselCommon.tsx
+++ b/src/components/common/CarouselCommon/CarouselCommon.tsx
@ -2,7 +2,7 @@ import { useKeenSlider } from 'keen-slider/react'
 import React, { useEffect } from 'react'
 import 'keen-slider/keen-slider.min.css'
 import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow'
-import s from './CaroucelCommon.module.scss'
+import s from './CarouselCommon.module.scss'
 import { TOptionsEvents } from 'keen-slider'
 import classNames from 'classnames'
 import CustomDot from './CustomDot/CustomDot'
@ -47,7 +47,6 @@ const CarouselCommon = <T,>({
  
  useEffect(() => {
    if(isDot && slider){
-      // console.log('f',Math.ceil(data.length/(Number(slider.details().slidesPerView)||1)))
      let array:number[]
      array =  [...Array(Math.ceil(data.length/(Number(slider.details().slidesPerView)||1))).keys()].map((i)=>{
        return (Number(slider.details().slidesPerView)||1)*i
@ -67,7 +66,6 @@ const CarouselCommon = <T,>({

  const onDotClick = (index:number) => {
    slider.moveToSlideRelative(Math.floor(index))
-    // setDotActive(index)
  }
  return (
    <div className={s.navigationWrapper}>
@ -88,12 +86,10 @@ const CarouselCommon = <T,>({
          <CustomCarouselArrow
            side="right"
            onClick={handleRightArrowClick}
-            // isDisabled={currentSlide === slider.details().size - 1}
          />
          <CustomCarouselArrow
            side="left"
            onClick={handleLeftArrowClick}
-            // isDisabled={currentSlide === 0}
          />
        </>
      )}
--- a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss
+++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss
@ -1,20 +1,3 @@
-// .customArrow{
-//     width: 64px;
-//     height:  64px;
-//     &:focus{
-//         outline: none;
-//     }
-//     @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100;
-//     &.leftArrow{
-//         @apply left-0;
-//     }
-//     &.rightArrow{
-//         @apply right-0;
-//     }
-//     &.isDisabled{
-//         @apply hidden ;
-//     }
-// }
 .navigationWrapper{
    :global(.customArrow) {
        width: 64px;
--- a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx
+++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx
@ -3,7 +3,6 @@ import React from 'react'
 import ArrowLeft from 'src/components/icons/ArrowLeft'
 import ArrowRight from 'src/components/icons/ArrowRight'
 import "./CustomCarouselArrow.module.scss"
-// import s from "../CaroucelCommon.module.scss"

 interface CustomCarouselArrowProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@ -18,7 +17,6 @@ export const CustomCarouselArrow = ({
  return (
    <button
      {...props}
-      // className={classNames(`${s.customArrow}`, { [`${s[`${side}Arrow`]}`]: side,[`${s.isDisabled}`]:isDisabled })}
      className={classNames("customArrow", { [`${side}Arrow`]: side,"isDisabledArrow":isDisabled})}
    >
 			{side==='left'?(<ArrowLeft/>):(<ArrowRight/>)}
--- a/src/components/common/ModalCommon/ModalCommon.module.scss
+++ b/src/components/common/ModalCommon/ModalCommon.module.scss
@ -5,7 +5,6 @@
    .warpper{
        @apply flex justify-center items-center  min-h-screen;
        .modal{
-            // @apply bg-white inline-block;
            @apply inline-block align-bottom bg-white relative;
            max-width: 50%;
            padding: 3.2rem;
--- a/src/components/common/ProductCard/ProductCard.module.scss
+++ b/src/components/common/ProductCard/ProductCard.module.scss
@ -15,13 +15,15 @@
            img{
                @apply inline;
            }
+            &:hover{
+                cursor: pointer;
+            }
        }
        .productLabel{
            @apply absolute left-0 bottom-0;
        }
    }
    .cardMid{
-        // padding: 1.6rem 0;
        min-height: 10.4rem;
        @apply flex flex-col justify-between;
        .cardMidTop{
@ -30,6 +32,9 @@
                line-height: 2.4rem;
                font-size: 1.6rem;
                color: var(--text-active);
+                &:hover{
+                    cursor: pointer;
+                }
            }
            .productWeight{
                font-size: 1.2rem;
@ -39,6 +44,7 @@
            }
        }
        .cardMidBot{
+            padding-top: 0.8rem;
            @apply flex justify-between items-center border-t border-solid border-line;
            .productPrice{
                @apply font-bold;
@ -52,7 +58,6 @@
        min-height: 4rem;
        @apply flex justify-between items-center; 
        .cardButton{
-            // width: 13.6rem;
        }
    }
 }
--- a/src/components/common/ProductCard/ProductCard.tsx
+++ b/src/components/common/ProductCard/ProductCard.tsx
@ -1,3 +1,4 @@
+import Link from 'next/link'
 import React from 'react'
 import { ProductProps } from 'src/utils/types.utils'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
@ -21,16 +22,20 @@ const ProductCard = ({
  return (
    <div className={s.productCardWarpper}>
      <div className={s.cardTop}>
-        <div className={s.productImage}>
-          <img src={imageSrc} alt="image" />
-        </div>
-          <div className={s.productLabel}>
-            <LabelCommon shape="half">{category}</LabelCommon>
+        <Link href="#">
+          <div className={s.productImage}>
+            <img src={imageSrc} alt="image" />
          </div>
+        </Link>
+        <div className={s.productLabel}>
+          <LabelCommon shape="half">{category}</LabelCommon>
+        </div>
      </div>
      <div className={s.cardMid}>
        <div className={s.cardMidTop}>
-          <div className={s.productname}>{name} </div>
+          <Link href="#">
+            <div className={s.productname}>{name} </div>
+          </Link>
          <div className={s.productWeight}>{weight}</div>
        </div>
        <div className={s.cardMidBot}>
@ -42,10 +47,10 @@ const ProductCard = ({
      </div>
      <div className={s.cardBot}>
        <div className={s.cardIcon}>
-          <ButtonIconBuy/>
+          <ButtonIconBuy />
        </div>
        <div className={s.cardButton}>
-          <ButtonCommon type="ghost">{buttonText}</ButtonCommon>
+          <ButtonCommon type="light">{buttonText}</ButtonCommon>
        </div>
      </div>
    </div>
--- a/src/components/common/ProductCaroucel/ProductCaroucel.module.scss
+++ b/src/components/common/ProductCaroucel/ProductCaroucel.module.scss
@ -1,15 +0,0 @@
-@import "../../../styles/utilities";
-.productCardWarpper{
-    @apply spacing-horizontal;
-    @screen xl {
-        :global(.customArrow) {
-            &:global(.leftArrow){
-                left: calc(-6.4rem - 0rem);
-            }
-            &:global(.rightArrow){
-                right: calc(-6.4rem - 0rem);
-            }
-        }
-    }
-        
-}
--- a/src/components/common/ProductCarousel/ProductCarousel.module.scss
+++ b/src/components/common/ProductCarousel/ProductCarousel.module.scss
@ -0,0 +1,16 @@
+@import '../../../styles/utilities';
+.productCardWarpper {
+  @apply spacing-horizontal;
+  @screen xl {
+    :global(.customArrow) {
+      @screen lg {
+        &:global(.leftArrow) {
+          left: calc(-6.4rem - 2rem);
+        }
+        &:global(.rightArrow) {
+          right: calc(-6.4rem - 2rem);
+        }
+      }
+    }
+  }
+}
--- a/src/components/common/ProductCarousel/ProductCarousel.tsx
+++ b/src/components/common/ProductCarousel/ProductCarousel.tsx
@ -4,9 +4,9 @@ import CarouselCommon, {
  CarouselCommonProps,
 } from '../CarouselCommon/CarouselCommon'
 import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'
-import s from "./ProductCaroucel.module.scss"
+import s from "./ProductCarousel.module.scss"

-interface ProductCaroucelProps
+interface ProductCarouselProps
  extends Omit<CarouselCommonProps<ProductCardProps>, 'Component'|"option"> {
 		option?:TOptionsEvents
 	}
@ -19,16 +19,16 @@ const OPTION_DEFAULT: TOptionsEvents = {
      slidesPerView: 3,
    },
    '(min-width: 768px)': {
-      slidesPerView: 3,
+      slidesPerView: 4,
    },
    '(min-width: 1024px)': {
      slidesPerView: 4.5,
    },'(min-width: 1280px)': {
-      slidesPerView: 6,
+      slidesPerView: 5.5,
    },
  },
 }
-const ProductCaroucel = ({ option, data, ...props }: ProductCaroucelProps) => {
+const ProductCarousel = ({ option, data, ...props }: ProductCarouselProps) => {
  return (
    <div className={s.productCardWarpper}>
      <CarouselCommon<ProductCardProps>
@ -41,4 +41,4 @@ const ProductCaroucel = ({ option, data, ...props }: ProductCaroucelProps) => {
  )
 }

-export default ProductCaroucel
+export default ProductCarousel
--- a/src/components/common/RecipeCard/RecipeCard.module.scss
+++ b/src/components/common/RecipeCard/RecipeCard.module.scss
@ -6,15 +6,20 @@
        width: 100%;
        max-height: 22rem;
        border-radius: 2.4rem;
+        &:hover{
+            cursor: pointer;
+        }
    }
    .title{
        padding: 1.6rem 0.8rem 0.4rem 0.8rem;
-        // padding: 0 0.8rem;
        @apply font-bold;
        font-size: 2rem;
        line-height: 2.8rem;
        letter-spacing: -0.01em;
        color: var(--text-active);
+        &:hover{
+            cursor: pointer;
+        }
    }
    .description{
        padding: 0 0.8rem;
--- a/src/components/common/RecipeCard/RecipeCard.tsx
+++ b/src/components/common/RecipeCard/RecipeCard.tsx
@ -1,3 +1,4 @@
+import Link from 'next/link'
 import React from 'react'
 import { RecipeProps } from 'src/utils/types.utils'
 import s from './RecipeCard.module.scss'
@ -6,10 +7,14 @@ export interface RecipeCardProps extends RecipeProps {}
 const RecipeCard = ({ imageSrc, title, description }: RecipeCardProps) => {
  return (
    <div className={s.recipeCardWarpper}>
-      <div className={s.image}>
-        <img src={imageSrc} alt="image recipe" />
-      </div>
-      <div className={s.title}>{title}</div>
+      <Link href="#">
+        <div className={s.image}>
+          <img src={imageSrc} alt="image recipe" />
+        </div>
+      </Link>
+      <Link href="#">
+        <div className={s.title}>{title}</div>
+      </Link>
      <div className={s.description}>{description}</div>
    </div>
  )
--- a/src/components/common/RecipeCaroucel/RecipeCaroucel.module.scss
+++ b/src/components/common/RecipeCaroucel/RecipeCaroucel.module.scss
@ -1,14 +0,0 @@
-@import '../../../styles/utilities';
-.recipeCardWarpper {
-  @apply spacing-horizontal;
-  @screen xl {
-    :global(.customArrow) {
-      &:global(.leftArrow) {
-        left: calc(-6.4rem - 0rem);
-      }
-      &:global(.rightArrow) {
-        right: calc(-6.4rem - 0rem);
-      }
-    }
-  }
-}
--- a/src/components/common/RecipeCarousel/RecipeCarousel.module.scss
+++ b/src/components/common/RecipeCarousel/RecipeCarousel.module.scss
@ -0,0 +1,16 @@
+@import '../../../styles/utilities';
+.recipeCardWarpper {
+  @apply spacing-horizontal;
+  @screen xl {
+    :global(.customArrow) {
+      @screen lg {
+        &:global(.leftArrow) {
+          left: calc(-6.4rem - 2rem);
+        }
+        &:global(.rightArrow) {
+          right: calc(-6.4rem - 2rem);
+        }
+      }
+    }
+  }
+}
--- a/src/components/common/RecipeCarousel/RecipeCarousel.tsx
+++ b/src/components/common/RecipeCarousel/RecipeCarousel.tsx
@ -4,9 +4,9 @@ import CarouselCommon, {
  CarouselCommonProps,
 } from '../CarouselCommon/CarouselCommon'
 import RecipeCard, { RecipeCardProps } from '../RecipeCard/RecipeCard'
-import s from "./RecipeCaroucel.module.scss"
+import s from "./RecipeCarousel.module.scss"

-interface RecipeCaroucelProps
+interface RecipeCarouselProps
  extends Omit<CarouselCommonProps<RecipeCardProps>, 'Component'|"option"> {
 		option?:TOptionsEvents
 	}
@ -30,7 +30,7 @@ const OPTION_DEFAULT: TOptionsEvents = {
    },
  },
 }
-const RecipeCaroucel = ({ option, data, ...props }: RecipeCaroucelProps) => {
+const RecipeCarousel = ({ option, data, ...props }: RecipeCarouselProps) => {
  return (
    <div className={s.recipeCardWarpper}>
      <CarouselCommon<RecipeCardProps>
@ -43,4 +43,4 @@ const RecipeCaroucel = ({ option, data, ...props }: RecipeCaroucelProps) => {
  )
 }

-export default RecipeCaroucel
+export default RecipeCarousel
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@ -4,7 +4,7 @@ export { default as CarouselCommon } from './CarouselCommon/CarouselCommon'
 export { default as QuanittyInput } from './QuanittyInput/QuanittyInput'
 export { default as LabelCommon } from './LabelCommon/LabelCommon'
 export { default as ProductCard } from './ProductCard/ProductCard'
-export { default as ProductCaroucel } from './ProductCaroucel/ProductCaroucel'
+export { default as ProductCarousel } from './ProductCarousel/ProductCarousel'
 export { default as FeaturedProductCard } from './FeaturedProductCard/FeaturedProductCard'
 export { default as RecipeCard } from './RecipeCard/RecipeCard'
 export { default as Head } from './Head/Head'
--- a/src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.tsx
+++ b/src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.tsx
@ -1,16 +1,18 @@
 import React from 'react'
 import {
  CollectionHeading,
-  ProductCaroucel,
+  ProductCarousel,
  ViewAllItem,
 } from 'src/components/common'
 import { CollectionHeadingProps } from 'src/components/common/CollectionHeading/CollectionHeading'
 import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'
+import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import s from './CollectionCarcoucel.module.scss'
 interface ColectionCarcoucelProps extends CollectionHeadingProps {
  data: ProductCardProps[]
  itemKey: string
-  viewAllLink?: string
+  viewAllLink?: string,
+  category:string
 }

 const ColectionCarcoucel = ({
@ -18,7 +20,8 @@ const ColectionCarcoucel = ({
  itemKey,
  title,
  subtitle,
-  type
+  type,
+  category
 }: ColectionCarcoucelProps) => {
  return (
    <div className={s.colectionCarcoucelWarpper}>
@ -31,11 +34,11 @@ const ColectionCarcoucel = ({
          ></CollectionHeading>
        </div>
        <div className={s.right}>
-          <ViewAllItem link="#"/>
+          <ViewAllItem link={`${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${category}`}/>
        </div>
      </div>
      <div className={s.bot}>
-        <ProductCaroucel data={data} itemKey={itemKey} />
+        <ProductCarousel data={data} itemKey={itemKey} />
      </div>
    </div>
  )
--- a/src/components/modules/home/HomeCollection/HomeCollection.tsx
+++ b/src/components/modules/home/HomeCollection/HomeCollection.tsx
@ -96,40 +96,47 @@ const HomeCollection = (props: HomeCollectionProps) => {
  return (
    <div className="w-full">
      <CollectionCarcoucel
+        type="highlight"
        data={dataTest}
        itemKey="product-1"
-        title="VEGGIE"
+        title="Fresh Products Today"
        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
      />
      <CollectionCarcoucel
        data={dataTest}
        itemKey="product-2"
        title="VEGGIE"
        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
      />
      <CollectionCarcoucel
        data={dataTest}
        itemKey="product-3"
        title="VEGGIE"
        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
      />
      <CollectionCarcoucel
        data={dataTest}
        itemKey="product-4"
        title="VEGGIE"
        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
      />
      <CollectionCarcoucel
        data={dataTest}
        itemKey="product-5"
        title="VEGGIE"
        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
      />
      <CollectionCarcoucel
        data={dataTest}
        itemKey="product-6"
        title="VEGGIE"
        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
      />
    </div>
  )
--- a/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss
+++ b/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss
@ -17,6 +17,7 @@
 			padding-bottom: 3.2rem; 
      @apply flex justify-start spacing-horizontal;
      .tab{
+          font-family: var(--font-heading);
          padding: 1.6rem 1.6rem 0.8rem 1.6rem;
          font-size: 2.4rem;
          line-height: 2.8rem;
@ -31,9 +32,4 @@
 					
      }
  }
-  // :global(.keen-slider__slide){
-	// 	@screen 2xl{
-	// 		margin-right: 2rem;
-	// 	}
-  // }
 }
--- a/src/components/modules/home/HomeRecipe/HomeRecipe.tsx
+++ b/src/components/modules/home/HomeRecipe/HomeRecipe.tsx
@ -1,17 +1,50 @@
 import React from 'react'
 import {  HeadingCommon, ViewAllItem } from 'src/components/common'
 import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard'
-import RecipeCaroucel from 'src/components/common/RecipeCaroucel/RecipeCaroucel'
+import RecipeCarousel from 'src/components/common/RecipeCarousel/RecipeCarousel'
 import s from './HomeRecipe.module.scss'
 import classNames from 'classnames';
+import image13 from "../../../../../public/assets/images/image13.png"
+import image14 from "../../../../../public/assets/images/image14.png"
+import image12 from "../../../../../public/assets/images/image12.png"
+
 interface HomeRecipeProps {
-  data: RecipeCardProps[]
-  itemKey: string
-  title: string
+  data?: RecipeCardProps[]
+  itemKey?: string
+  title?: string
  viewAllLink?: string
 }

-const HomeRecipe = ({ data, itemKey, title }: HomeRecipeProps) => {
+
+
+const recipe:RecipeCardProps[] = [{
+  title: "Special Recipe of Vietnamese Phở",
+  description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients.  To make this pho soup recipe, you will need:",
+  imageSrc: image12.src
+},{
+  title: "Original Recipe of Curry",
+  description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
+  imageSrc: image13.src
+},{
+  title: "The Best Recipe of Beef Noodle Soup",
+  description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
+  imageSrc: image14.src
+},{
+  title: "Special Recipe of Vietnamese Phở",
+  description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients.  To make this pho soup recipe, you will need:",
+  imageSrc: image12.src
+},{
+  title: "Original Recipe of Curry",
+  description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
+  imageSrc: image13.src
+},{
+  title: "The Best Recipe of Beef Noodle Soup",
+  description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
+  imageSrc: image14.src
+}]
+
+
+const HomeRecipe = ({ data =recipe, itemKey="home-recipe", title="Special Recipes" }: HomeRecipeProps) => {
  return (
    <div className={s.homeRecipeWarpper}>
      <div className={s.top}>
@ -28,7 +61,7 @@ const HomeRecipe = ({ data, itemKey, title }: HomeRecipeProps) => {
        <button className={s.tab}>Special Recipes</button>
      </div>
      <div className={s.bot}>
-        <RecipeCaroucel data={data} itemKey={itemKey} />
+        <RecipeCarousel data={data} itemKey={itemKey} />
      </div>
    </div>
  )
--- a/src/components/modules/home/index.ts
+++ b/src/components/modules/home/index.ts
@ -4,3 +4,4 @@ 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'
+export { default as HomeRecipe } from './HomeRecipe/HomeRecipe'
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@ -39,9 +39,6 @@
  --font-size: 1.6rem;
  --line-height: 2.4rem;

-  // --font-size: 16px;
-  // --line-height: 24px;
-
  --font-sans: "Nunito", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
  --font-heading: "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
  --font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@ -88,6 +88,10 @@
            padding-left: 6.4rem;
            padding-right: 6.4rem;
        }
+        @screen lg {
+            padding-left: 11.2rem;
+            padding-right: 11.2rem;
+        }
    }
    .spacing-horizontal-left {
        padding-left: 2rem;