diff --git a/src/components/modules/home/HomeBanner/HomeBanner.module.scss b/src/components/modules/home/HomeBanner/HomeBanner.module.scss index 507558cad..fdba411c0 100644 --- a/src/components/modules/home/HomeBanner/HomeBanner.module.scss +++ b/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; diff --git a/src/components/modules/home/HomeBanner/HomeBanner.tsx b/src/components/modules/home/HomeBanner/HomeBanner.tsx index 70c36dd78..18432ec82 100644 --- a/src/components/modules/home/HomeBanner/HomeBanner.tsx +++ b/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 (
+
+ +
Freshness
guaranteed
@@ -30,7 +35,7 @@ const HomeBanner = ({ }: Props) => { imgLink: BannerImgRight.src, size: "small", } - ] + ] } />