🎨 styles: img banner home

:%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');
+      .imgWrap {
-      background-repeat: no-repeat;
+        @apply absolute w-full h-full;
-      background-size: cover;
+        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,7 +1,9 @@
 import React from 'react'
 import { Banner } from 'src/components/common'
 import BannerImgRight from './assets/banner_full.png'
+import HomeBannerImg from './assets/home_banner.png'
 import s from './HomeBanner.module.scss'
+import Image from 'next/image'
 
 interface Props {
     className?: string
@@ -12,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>
@@ -30,7 +35,7 @@ const HomeBanner = ({ }: Props) => {
                         imgLink: BannerImgRight.src,
                         size: "small",
                     }
-                ]
+                    ]
                 }
             />
         </div >