Merge branch 'common' of https://github.com/KieIO/grocery-vercel-commerce into common

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

@@ -1,6 +1,7 @@
 @import '../../../../styles/utilities';
 .warpper {
   @apply spacing-horizontal;
+  margin-bottom: 5.6rem;
   @screen xl {
     :global(.customArrow) {
       @screen lg {
@@ -13,4 +14,7 @@
       }
     }
   }
+  .heading{
+    padding: 2rem;
+  }
 }

src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { ResponsiveType } from 'react-multi-carousel'
-import { CarouselCommon, FeaturedProductCard } from 'src/components/common'
+import { CarouselCommon, FeaturedProductCard,HeadingCommon} from 'src/components/common'
 import { FeaturedProductCardProps } from 'src/components/common/FeaturedProductCard/FeaturedProductCard'
 import s from "./FeaturedProductsCarousel.module.scss"
 interface FeaturedProductsCarouselProps {
-    
+  title?: string
 }
 
 const dataDemo:FeaturedProductCardProps[] = [{
@@ -66,11 +66,11 @@ const dataDemo:FeaturedProductCardProps[] = [{
     },
     largeMobile: {
       breakpoint: { max: 640, min: 400 },
-      items: 1.5,
+      items: 1.275,
     },
     mobile: {
       breakpoint: { max: 400, min: 300 },
-      items: 1.15,
+      items: 1.1,
     },
     smallMobile: {
       breakpoint: { max: 300, min: 0 },
@@ -78,9 +78,12 @@ const dataDemo:FeaturedProductCardProps[] = [{
     },
   }
 
-const FeaturedProductsCarousel = ({}: FeaturedProductsCarouselProps) => {
+const FeaturedProductsCarousel = ({title="Featured Products"}: FeaturedProductsCarouselProps) => {
     return (
         <div className={s.warpper}>
+           <div className={s.heading}>
+            <HeadingCommon>{title}</HeadingCommon>
+          </div>
             <CarouselCommon<FeaturedProductCardProps> data={dataDemo} Component={FeaturedProductCard} itemKey="featured-products" responsive={RESPONSIVE}/>
         </div>
     )

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

@@ -3,6 +3,7 @@
 .homeRecipeWarpper {
   padding-top: 5.6rem;
   padding-bottom: 6.5rem;
+  
   @apply flex flex-col;
   .top {
     @apply spacing-horizontal flex w-full justify-between;

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

@@ -1,3 +1,6 @@
 .homeSpiceWarpper{
-    margin-bottom: 8rem;    
+    margin-bottom: 4rem;
+    @screen md{
+        margin-bottom: 8rem;
+    }
 }