✨ feat: CardFeaturedProduct

:%s

pages/index.tsx

@@ -1,11 +1,12 @@
 
-import {  Layout, ProductCard } from 'src/components/common'
-import {CarouselCommon } from 'src/components/common'
-import ProductCaroucel from 'src/components/common/ProductCaroucel/ProductCaroucel'
+import {  FeaturedProductCard, Layout, ProductCaroucel } 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"
 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"
 const dataTest = [{
   name:"Tomato",
   weight:"250g",
@@ -83,6 +84,9 @@ 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

@@ -0,0 +1,61 @@
+@import '../../../styles/utilities';
+.featuredProductCardWarpper{
+    width: 59.8rem;
+    height: 28.8rem;
+    padding: 2.4rem;
+    @apply bg-primary-light flex justify-start items-center custom-border-radius ;
+    .left{
+        width: 24rem;
+        height: 24rem;
+    }
+    .right{
+        padding-left: 2.4rem;
+        min-width: 27rem;
+        max-width: 28.6rem;
+        min-height: 16.8rem;
+        @apply flex justify-between flex-col;
+        .rightTop{
+            min-height: 9.6rem;
+            @apply flex justify-between flex-col;
+            .title{
+                @apply font-bold;
+                font-size: 2rem;
+                line-height: 2.8rem;
+                letter-spacing: -0.01em;
+                color: var(--text-active);
+            }
+            .subTitle{
+                color: var(--text-base);
+                font-size: 1.6rem;
+                line-height: 2.4rem;
+            }
+            .priceWrapper{
+                @apply flex justify-start;
+                .price{
+                    @apply font-bold;
+                    font-size: 2rem;
+                    line-height: 2.8rem;
+                    letter-spacing: -0.01em;
+                    color: var(--text-active);
+                }
+                .originPrice{
+                    margin-left: 0.8rem;
+                    font-size: 2rem;
+                    line-height: 2.8rem;
+                    color: var(--text-label);
+                    text-decoration-line: line-through;
+                }
+            }
+        }
+        .buttonWarpper{
+            @apply flex;
+            .icon{
+                width: 5.6rem;
+            }
+            .button{
+                margin-left: 0.8rem;
+                width: 20.6rem;
+            }
+        }
+    }
+}

src/components/common/FeaturedProductCard/FeaturedProductCard.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { FeaturedProductProps } from 'src/utils/types.utils'
+import s from './FeaturedProductCard.module.scss'
+import { LANGUAGE } from '../../../utils/language.utils'
+import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
+import ButtonCommon from '../ButtonCommon/ButtonCommon'
+interface FeaturedProductCardProps extends FeaturedProductProps {
+  buttonText?: string
+}
+
+const FeaturedProductCard = ({
+  imageSrc,
+  title,
+  subTitle,
+  price,
+  originPrice,
+  buttonText = LANGUAGE.BUTTON_LABEL.BUY_NOW,
+}: FeaturedProductCardProps) => {
+  return (
+    <div className={s.featuredProductCardWarpper}>
+      <div className={s.left}>
+        <img src={imageSrc} alt="image" />
+      </div>
+      <div className={s.right}>
+        <div className={s.rightTop}>
+          <div className={s.title}>{title}</div>
+          <div className={s.subTitle}>{subTitle}</div>
+          <div className={s.priceWrapper}>
+            <div className={s.price}>{price} </div>
+            <div className={s.originPrice}>{originPrice} </div>
+          </div>
+        </div>
+        <div className={s.buttonWarpper}>
+          <div className={s.icon}>
+            <ButtonIconBuy />
+          </div>
+          <div className={s.button}>
+            <ButtonCommon>{buttonText}</ButtonCommon>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FeaturedProductCard

src/components/common/index.ts

@@ -4,6 +4,8 @@ export { default as CarouselCommon } from './CarouselCommon/CarouselCommon'
 export { default as QuanittyInput } from './QuanittyInput/QuanittyInput'
 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 Head } from './Head/Head'
 export { default as ViewAllItem} from './ViewAllItem/ViewAllItem'
 export { default as ItemWishList} from './ItemWishList/ItemWishList'

src/utils/types.utils.ts

@@ -5,3 +5,11 @@ export interface ProductProps {
     price: string
     imageSrc: string
 }
+
+export interface FeaturedProductProps {
+    title: string
+    subTitle: string
+    originPrice: string
+    price: string
+    imageSrc: string
+}