🔀 merge: branch 'common' of https://github.com/KieIO/grocery-vercel-commerce into m4-quangnhan

:%s

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

@@ -11,11 +11,19 @@
     @apply grid;
     grid-template-columns: 1fr 1.8fr;
     .left {
-      @apply flex items-end justify-center custom-border-radius-lg;
+      @apply relative flex items-end justify-center custom-border-radius-lg;
       margin-right: 1.6rem;
-      background-image: url('./assets/home_banner.png');
-      background-repeat: no-repeat;
-      background-size: cover;
+      .imgWrap {
+        @apply absolute w-full h-full;
+        top: 0;
+        left: 0;
+        > div {
+          @apply w-full h-full custom-border-radius-lg;
+        }
+        img {
+          object-fit: cover;
+        }
+      }
 
       .text {
         @apply relative font-heading text-center;

src/components/modules/home/HomeBanner/HomeBanner.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import { Banner } from 'src/components/common'
-import s from './HomeBanner.module.scss'
 import BannerImgRight from './assets/banner_full.png'
-import BannerImgRight2 from './assets/banner_product.png'
+import HomeBannerImg from './assets/home_banner.png'
+import s from './HomeBanner.module.scss'
+import Image from 'next/image'
 
 interface Props {
     className?: string
@@ -13,6 +14,9 @@ const HomeBanner = ({ }: Props) => {
     return (
         <div className={s.homeBanner}>
             <section className={s.left}>
+                <div className={s.imgWrap}>
+                    <Image src={HomeBannerImg} placeholder='blur' />
+                </div>
                 <div className={s.text}>
                     Freshness<br />guaranteed
                 </div>
@@ -28,10 +32,10 @@ const HomeBanner = ({ }: Props) => {
                     {
                         title: "Save 15% on your first order 2",
                         subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
-                        imgLink: BannerImgRight2.src,
+                        imgLink: BannerImgRight.src,
                         size: "small",
                     }
-                ]
+                    ]
                 }
             />
         </div >