✨ feat: ProductCollection HomeRecipe

:%s

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

@@ -0,0 +1,12 @@
+@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;
+		.right{
+			margin-right: 14.76;
+		}
+  }
+}

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { CollectionHeading, ProductCaroucel, ViewAllItem } from 'src/components/common'
+import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'
+import s from './CollectionCarcoucel.module.scss'
+interface ColectionCarcoucelProps {
+  data: ProductCardProps[]
+  itemKey: string
+  title: string
+  subTitle: string
+  viewAllLink?: string
+}
+
+const ColectionCarcoucel = ({
+  data,
+  itemKey,
+  title,
+  subTitle,
+}: ColectionCarcoucelProps) => {
+  return (
+    <div className={s.colectionCarcoucelWarpper}>
+      <div className={s.top}>
+        <div className={s.left}>
+          <CollectionHeading headingText={title} subtitle={subTitle} />
+        </div>
+        <div className={s.right}>
+          <ViewAllItem/>
+        </div>
+      </div>
+      <div className={s.bot}>
+        <ProductCaroucel data={data} itemKey={itemKey} />
+      </div>
+    </div>
+  )
+}
+
+export default ColectionCarcoucel

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

@@ -0,0 +1,33 @@
+@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;
+    .right {
+      margin-right: 14.76;
+    }
+  }
+  .mid{
+			padding-top: 3.2rem; 
+			padding-bottom: 3.2rem; 
+      @apply flex justify-start spacing-horizontal;
+      .tab{
+          padding: 1.6rem 1.6rem 0.8rem 1.6rem;
+          font-size: 3.2rem;
+          line-height: 4rem;
+					outline: none;
+          &.active{
+            @apply text-background custom-border-radius bg-primary;
+          }
+					
+      }
+  }
+  // :global(.keen-slider__slide){
+	// 	@screen 2xl{
+	// 		margin-right: 2rem;
+	// 	}
+  // }
+}

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

@@ -0,0 +1,37 @@
+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 s from './HomeRecipe.module.scss'
+import classNames from 'classnames';
+interface HomeRecipeProps {
+  data: RecipeCardProps[]
+  itemKey: string
+  title: string
+  viewAllLink?: string
+}
+
+const HomeRecipe = ({ data, itemKey, title }: HomeRecipeProps) => {
+  return (
+    <div className={s.homeRecipeWarpper}>
+      <div className={s.top}>
+        <div className={s.left}>
+          <HeadingCommon headingText={title} />
+        </div>
+        <div className={s.right}>
+          <ViewAllItem />
+        </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}>
+        <RecipeCaroucel data={data} itemKey={itemKey} />
+      </div>
+    </div>
+  )
+}
+
+export default HomeRecipe

src/components/modules/home/index.ts

@@ -1 +1,2 @@
 export { default as HomeBanner } from './HomeBanner/HomeBanner'
+export { default as CollectionCarcoucel } from './CollectionCarcoucel/CollectionCarcoucel'