✨ feat: RecipeCard

:%s

pages/index.tsx

@@ -1,5 +1,5 @@
 
-import {  FeaturedProductCard, Layout, ProductCaroucel } from 'src/components/common'
+import {  FeaturedProductCard, Layout, ProductCaroucel, RecipeCard } from 'src/components/common'
 import image5 from "../public/assets/images/image5.png"
 import image6 from "../public/assets/images/image6.png"
 import image7 from "../public/assets/images/image7.png"
@@ -7,6 +7,9 @@ import image8 from "../public/assets/images/image8.png"
 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 image13 from "../public/assets/images/image13.png"
+import image14 from "../public/assets/images/image14.png"
 const dataTest = [{
   name:"Tomato",
   weight:"250g",
@@ -84,9 +87,6 @@ export default function Home() {
   return (
     <>
       <ProductCaroucel data={dataTest} itemKey="product-1" />
-      <FeaturedProductCard imageSrc={image9.src} title="Sale 25% Coffee Bean" subTitle="50 first Orders within a day" price="$15.00" originPrice="$20.00" />
-      <FeaturedProductCard imageSrc={image10.src} title="Sale 25% Coffee Bean" subTitle="50 first Orders within a day" price="$15.00" originPrice="$20.00" />
-      <FeaturedProductCard imageSrc={image11.src} title="Sale 25% Coffee Bean" subTitle="50 first Orders within a day" price="$15.00" originPrice="$20.00" />
     </>
   )
 }

src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss

@@ -3,7 +3,7 @@
     width: 59.8rem;
     height: 28.8rem;
     padding: 2.4rem;
-    @apply bg-primary-light flex justify-start items-center custom-border-radius ;
+    @apply bg-primary-light inline-flex justify-start items-center custom-border-radius ;
     .left{
         width: 24rem;
         height: 24rem;

src/components/common/RecipeCard/RecipeCard.module.scss

@@ -1,19 +1,24 @@
 .recipeCardWarpper{
     width: 39.2rem;
     height: 34rem;
+    @apply inline-flex flex-col justify-between;
     .image{
         width: 100%;
         height: 22rem;
         border-radius: 2.4rem;
     }
     .title{
+        padding: 1.6rem 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);
     }
     .description{
-        @apply overflow-hidden over overflow-ellipsis 
+        padding: 0 0.8rem;
+        @apply overflow-hidden overflow-ellipsis ;
         display: -webkit-box;
         -webkit-line-clamp: 3; /* number of lines to show */
         -webkit-box-orient: vertical;

src/components/common/index.ts

@@ -6,6 +6,7 @@ export { default as LabelCommon } from './LabelCommon/LabelCommon'
 export { default as ProductCard } from './ProductCard/ProductCard'
 export { default as ProductCaroucel } from './ProductCaroucel/ProductCaroucel'
 export { default as FeaturedProductCard } from './FeaturedProductCard/FeaturedProductCard'
+export { default as RecipeCard } from './RecipeCard/RecipeCard'
 export { default as Head } from './Head/Head'
 export { default as ViewAllItem} from './ViewAllItem/ViewAllItem'
 export { default as ItemWishList} from './ItemWishList/ItemWishList'