🎨 styles: recommended recipe

:%s

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/index.ts

@@ -1,2 +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'