fix: fix conflic

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

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

src/components/modules/home/CollectionCarcousel/CollectionCarcousel.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import {
+  CollectionHeading,
+  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 './CollectionCarcousel.module.scss'
+interface ColectionCarcouselProps extends CollectionHeadingProps {
+  data: ProductCardProps[]
+  itemKey: string
+  viewAllLink?: string,
+  category:string
+}
+
+const ColectionCarcousel = ({
+  data,
+  itemKey,
+  title,
+  subtitle,
+  type,
+  category
+}: ColectionCarcouselProps) => {
+  return (
+    <div className={s.colectionCarcoucelWarpper}>
+      <div className={s.top}>
+        <div className={s.left}>
+          <CollectionHeading
+            type={type}
+            subtitle={subtitle}
+            title={title}
+          ></CollectionHeading>
+        </div>
+        <div className={s.right}>
+          <ViewAllItem link={`${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${category}`}/>
+        </div>
+      </div>
+      <div className={s.bot}>
+        <ProductCarousel data={data} itemKey={itemKey} />
+      </div>
+    </div>
+  )
+}
+
+export default ColectionCarcousel

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

@@ -5,6 +5,7 @@
   margin-bottom: 2.8rem;
   .left {
     @apply hidden;
+    margin-bottom: 3rem;
   }
   @screen xl {
     @apply grid;

src/components/modules/home/HomeBanner/HomeBanner.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Banner } from 'src/components/common'
 import s from './HomeBanner.module.scss'
 import BannerImgRight from './assets/banner_full.png'
+import BannerImgRight2 from './assets/banner_product.png'
 
 interface Props {
     className?: string
@@ -13,14 +14,25 @@ const HomeBanner = ({ }: Props) => {
         <div className={s.homeBanner}>
             <section className={s.left}>
                 <div className={s.text}>
-                    Freshness<br/>guaranteed
+                    Freshness<br />guaranteed
                 </div>
             </section >
             <Banner
-                title="Save 15% on your first order"
-                subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
-                imgLink={BannerImgRight.src}
-                size="small"
+                data={
+                    [{
+                        title: "Save 15% on your first order",
+                        subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
+                        imgLink: BannerImgRight.src,
+                        size: "small",
+                    },
+                    {
+                        title: "Save 15% on your first order 2",
+                        subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
+                        imgLink: BannerImgRight2.src,
+                        size: "small",
+                    }
+                ]
+                }
             />
         </div >
     )

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

@@ -0,0 +1,145 @@
+import React from 'react'
+import { CollectionCarcousel } 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">
+      <CollectionCarcousel
+        type="highlight"
+        data={dataTest}
+        itemKey="product-1"
+        title="Fresh Products Today"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
+      />
+      <CollectionCarcousel
+        data={dataTest}
+        itemKey="product-2"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
+      />
+      <CollectionCarcousel
+        data={dataTest}
+        itemKey="product-3"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
+      />
+      <CollectionCarcousel
+        data={dataTest}
+        itemKey="product-4"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
+      />
+      <CollectionCarcousel
+        data={dataTest}
+        itemKey="product-5"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
+      />
+      <CollectionCarcousel
+        data={dataTest}
+        itemKey="product-6"
+        title="VEGGIE"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+        category={"veggie"}
+      />
+    </div>
+  )
+}
+
+export default HomeCollection

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

@@ -0,0 +1,16 @@
+@import "../../../../styles/utilities";
+
+.homeFeature {
+    @apply spacing-horizontal;
+    background-color: #ffffff;
+    height: fit-content;
+    margin: 3.2rem auto;
+    @screen md {
+        @apply grid grid-cols-3;
+        grid-gap: 2.4rem;
+        margin: 6.4rem auto;
+    }
+    @screen md {
+        grid-gap: 4rem;
+    }
+}

src/components/modules/home/HomeFeature/HomeFeature.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import s from './HomeFeature.module.scss'
+
+import HomeFeatureItem from './components/HomeFeatureItem/HomeFeatureItem'
+
+const HomeFeature = () => {
+    return (
+        <section className={s.homeFeature}>       
+            <HomeFeatureItem image="firstImg">
+                <span> Webshop owner will <b>upload products at 10:30pm </b>shoppers can buy <b>fresh products at 11pm.</b></span>
+            </HomeFeatureItem>
+
+            <HomeFeatureItem image="secondImg">
+                <span>Most fresh fish and seafood <b>will be listed at 8am </b>from inventory.</span>
+            </HomeFeatureItem>
+
+            <HomeFeatureItem image="thirdImg">
+                <span>Show that food will be shipped in <b>a greengrocery plastic bag</b>.</span>
+            </HomeFeatureItem>
+        </section>
+    )
+
+}
+
+export default HomeFeature

src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss

@@ -0,0 +1,56 @@
+@import "../../../../../../styles/utilities";
+
+.homeFeatureItem {
+    @apply flex items-center;
+    width: fit-content;
+    margin: auto;
+
+    @screen md {
+        @apply flex flex-col items-center justify-between;
+    }
+
+    @screen lg {
+        @apply flex flex-row;
+    }
+
+    .itemImg {
+        @apply flex float-left clear-both;
+        margin-right: 2.4rem;
+        align-items: center;
+        &.firstImg {
+            margin-top: 1rem;
+            content: url("../../assets/10h30-11h-desktop.png");
+        }
+        &.secondImg {
+            margin-top: 1rem;
+            content: url("../../assets/8h-desktop.png");
+        }
+        &.thirdImg {
+            margin-top: 1rem;
+            content: url("../../assets/green-desktop.png");
+        }
+
+        @screen md {
+            @apply flex flex-col justify-center items-center;
+            margin: auto;
+            margin-top: 0.8rem;
+        }
+
+        @screen lg {
+            @apply flex float-left clear-both;
+            margin-right: 2.4rem;
+            margin-top: 0;
+        }
+    }
+
+    .itemText {
+        max-width: 28rem;
+        min-width: 12rem;
+        @screen md {
+            @apply text-center;
+        }
+        @screen lg {
+            @apply text-left;
+        }
+    }
+}

src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import classNames from 'classnames'
+import s from './HomeFeatureItem.module.scss'
+
+
+interface HomeFeatureItemProps {
+    image: string;
+    children: any;
+}
+
+const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => {
+    
+    return (
+        <div className={s.homeFeatureItem}>
+            <img className={classNames(s.itemImg, {
+                [s[image]]: image,
+            })}
+            alt="home feature item img" /> 
+            <div className={s.itemText}>{children}</div>
+        </div> 
+    )
+
+}
+
+export default HomeFeatureItem

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

@@ -0,0 +1,35 @@
+@import '../../../../styles/utilities';
+
+.homeRecipeWarpper {
+  padding-top: 5.6rem;
+  padding-bottom: 6.5rem;
+  @apply flex flex-col;
+  .top {
+    @apply spacing-horizontal flex w-full justify-between;
+    @screen xl {
+      .right {
+        margin-right: 2.476rem;
+      }
+    }
+  }
+  .mid{
+			padding-top: 3.2rem; 
+			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;
+          @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

@@ -0,0 +1,70 @@
+import React from 'react'
+import {  HeadingCommon, ViewAllItem } from 'src/components/common'
+import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard'
+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
+  viewAllLink?: string
+}
+
+
+
+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}>
+        <div className={s.left}>
+          <HeadingCommon>{title}</HeadingCommon>
+        </div>
+        <div className={s.right}>
+          <ViewAllItem link="#"/>
+        </div>
+      </div>
+			<div className={s.mid}>
+        <button className={classNames(s.tab,s.active)}>Noodle</button>
+        <button className={s.tab}>Curry</button>
+        <button className={s.tab}>Special Recipes</button>
+      </div>
+      <div className={s.bot}>
+        <RecipeCarousel data={data} itemKey={itemKey} />
+      </div>
+    </div>
+  )
+}
+
+export default HomeRecipe

src/components/modules/home/index.ts

@@ -1,5 +1,9 @@
 export { default as HomeBanner } from './HomeBanner/HomeBanner'
+export { default as CollectionCarcousel } from './CollectionCarcousel/CollectionCarcousel'
 export { default as HomeCategories } from './HomeCategories/HomeCategories'
 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'
+export { default as HomeFeature } from './HomeFeature/HomeFeature'

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

@@ -0,0 +1,10 @@
+@import '../../../../styles/utilities';
+
+.productInfoDetail {
+    @apply spacing-horizontal;
+    padding-bottom: 4rem;
+    @screen md {
+        @apply flex;
+        padding-bottom: 5.6rem;
+    }
+}

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import ProductImgs from './components/ProductImgs/ProductImgs'
+import ProductInfo from './components/ProductInfo/ProductInfo'
+import s from './ProductInfoDetail.module.scss'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const ProductInfoDetail = ({ }: Props) => {
+    return (
+        <section className={s.productInfoDetail}>
+            <ProductImgs/>
+            <ProductInfo/>
+        </section >
+    )
+}
+
+export default ProductInfoDetail

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

@@ -0,0 +1,9 @@
+.productImgs {
+    @apply w-full flex justify-between items-center;
+    @screen sm-only {
+        margin-bottom: 2rem;
+    }
+    @screen lg {
+        max-width: 60rem;
+    }
+}

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import { CarouselCommon, ImgWithLink } from 'src/components/common'
+import { ImgWithLinkProps } from 'src/components/common/ImgWithLink/ImgWithLink'
+import s from './ProductImgs.module.scss'
+
+interface Props {
+    className?: string
+    children?: any,
+}
+
+const DATA = [
+    {
+        src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
+        alt: 'Broccoli',
+    },
+    {
+        src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
+        alt: 'Broccoli',
+    }
+]
+
+const option = {
+    slidesPerView: 1,
+}
+
+const ProductImgs = ({ }: Props) => {
+    return (
+        <section className={s.productImgs}>
+            <CarouselCommon<ImgWithLinkProps>
+                data={DATA}
+                itemKey="product-detail-img"
+                Component={ImgWithLink}
+                option={option}
+                isDot={true}
+            />
+        </section >
+    )
+}
+
+export default ProductImgs

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

@@ -0,0 +1,81 @@
+@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 {
+            @apply heading-2 font-heading;
+            margin-top: 0.8rem;
+        }
+        .price {
+            margin-top: 0.8rem;
+            .old {
+                margin-bottom: 0.8rem;
+                .number {
+                    margin-right: 0.8rem;
+                    color: var(--text-label);
+                    text-decoration: line-through;
+                }
+            }
+            .current {
+                @apply text-active font-bold sm-headline;
+            }
+        }
+        .description {
+            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;
+            button {
+                &:first-child {
+                    margin-bottom: 0.8rem;
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,46 @@
+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'
+
+interface Props {
+    className?: string
+    children?: any,
+}
+
+const ProductInfo = ({ }: Props) => {
+    return (
+        <section className={s.productInfo}>
+            <div className={s.info}>
+                <LabelCommon shape='half'>SEAFOOD</LabelCommon>
+                <h2 className={s.heading}>SeaPAk</h2>
+                <div className={s.price}>
+                    <div className={s.old}>
+                        <span className={s.number}>Rp 32.000</span>
+                        <LabelCommon type='discount'>-15%</LabelCommon>
+                    </div>
+                    <div className={s.current}>Rp 27.500</div>
+                </div>
+                <div className={s.description}>
+                    In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley
+                </div>
+            </div>
+            <div className={s.actions}>
+                <QuanittyInput />
+                <div className={s.bottom}>
+                    {/* <ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.PREORDER}</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 >
+    )
+}
+
+export default ProductInfo

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

@@ -0,0 +1,27 @@
+@import "../../../../styles/utilities";
+
+.recommendedRecipes {
+    margin: 6rem auto;
+    @screen md {
+        margin: 5.6rem auto;
+    }
+    .infoProducts {
+        @apply flex justify-between items-center spacing-horizontal;
+        margin-bottom: 3.2rem;
+    }
+    .productsWrap {
+        @apply spacing-horizontal-left;
+        @screen xl {
+            :global(.customArrow) {
+                @screen lg {
+                    &:global(.leftArrow) {
+                        left: calc(-6.4rem - 2rem);
+                    }
+                    &:global(.rightArrow) {
+                        right: calc(-6.4rem - 2rem);
+                    }
+                }
+            }
+        }
+    }
+}

src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx

@@ -0,0 +1,51 @@
+import { TOptionsEvents } from 'keen-slider';
+import React from 'react';
+import { CarouselCommon, HeadingCommon, RecipeCard, ViewAllItem } from 'src/components/common';
+import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard';
+import { ROUTE } from 'src/utils/constanst.utils';
+import s from './RecommendedRecipes.module.scss';
+
+const OPTION_DEFAULT: TOptionsEvents = {
+    slidesPerView: 1.25,
+    mode: 'free',
+    spacing: 24,
+    breakpoints: {
+        '(min-width: 640px)': {
+            slidesPerView: 2,
+        },
+        '(min-width: 1024px)': {
+            slidesPerView: 2.5,
+        },
+        '(min-width: 1440px)': {
+            slidesPerView: 3,
+        },
+        '(min-width: 1536px)': {
+            slidesPerView: 3.5,
+        },
+    },
+}
+
+interface Props {
+    data: RecipeCardProps[],
+}
+
+const RecommendedRecipes = ({ data }: Props) => {
+    return (
+        <div className={s.recommendedRecipes}>
+            <div className={s.infoProducts}>
+                <HeadingCommon>Recommended Recipes</HeadingCommon>
+                <ViewAllItem link={ROUTE.RECIPES} />
+            </div>
+            <div className={s.productsWrap}>
+                <CarouselCommon<RecipeCardProps>
+                    data={data}
+                    Component={RecipeCard}
+                    itemKey="Recommended Recipes"
+                    option={OPTION_DEFAULT}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default RecommendedRecipes;

src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo';
+import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
+
+const ReleventProducts = () => {
+    return (
+        <ListProductWithInfo
+            title="Relevant Products"
+            subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+            data={PRODUCT_DATA_TEST}
+        />
+    );
+};
+
+export default ReleventProducts;

src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo';
+import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
+
+const ViewedProducts = () => {
+    return (
+        <ListProductWithInfo
+            title="viewed Products"
+            subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+            data={PRODUCT_DATA_TEST}
+        />
+    );
+};
+
+export default ViewedProducts;

src/components/modules/product-detail/index.ts

@@ -0,0 +1,4 @@
+export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail'
+export { default as ViewedProducts } from './ViewedProducts/ViewedProducts'
+export { default as ReleventProducts } from './ReleventProducts/ReleventProducts'
+export { default as RecommendedRecipes } from './RecommendedRecipes/RecommendedRecipes'