🐛 bug: banner home buggy when display in carousel

:%s

src/components/common/Banner/Banner.module.scss

@@ -0,0 +1,3 @@
+.bannerWrap {
+    @apply w-full;
+}

src/components/common/Banner/Banner.tsx

@@ -3,6 +3,7 @@ import React, { memo } from 'react'
 import { ResponsiveType } from 'react-multi-carousel'
 import CarouselCommon from '../CarouselCommon/CarouselCommon'
 import BannerItem, { BannerItemProps } from './BannerItem/BannerItem'
+import s from './Banner.module.scss'
 
 interface Props {
     data: BannerItemProps[],
@@ -28,13 +29,15 @@ const Banner = memo(({ data }: Props) => {
         />
     }
     return (
-        <CarouselCommon<BannerItemProps>
+        <div className={s.bannerWrap}>
-            data={data}
+            <CarouselCommon<BannerItemProps>
-            itemKey="banner"
+                data={data}
-            Component={BannerItem}
+                itemKey="banner"
-            responsive={RESPONSIVE}
+                Component={BannerItem}
-            showDots={true}
+                responsive={RESPONSIVE}
-        />
+                showDots={true}
+            />
+        </div>
     )
 })
 

src/components/common/Banner/BannerItem/BannerItem.module.scss

@@ -1,8 +1,11 @@
 @import "../../../../styles/utilities";
 
 .bannerItem {
-  @apply bg-primary-light shape-common-lg overflow-hidden;
+  @apply bg-primary-light shape-common-lg overflow-hidden w-full;
   padding: 0;
+  @screen lg {
+    max-height: 42rem;
+  }
   &.large {
     margin-bottom: 2.8rem;
     background-image: url("./pattern.svg");

src/components/common/CarouselCommon/CarouselCommon.tsx

@@ -72,6 +72,7 @@ const CarouselCommon = <T,>({
         responsive={responsive}
         arrows={false}
         renderDotsOutside={true}
+        ssr={true}
         // customLeftArrow={<CustomCarouselArrow side="left" />}
         // customRightArrow={<CustomCarouselArrow side="right" />}
       >

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

@@ -1,15 +1,20 @@
 @import "../../../../styles/utilities";
 
 .homeBanner {
-  @apply spacing-horizontal;
+  @apply spacing-horizontal overflow-hidden;
   margin-bottom: 2.8rem;
+
   .left {
     @apply hidden;
     margin-bottom: 3rem;
+    max-width: 50rem;
   }
   @screen xl {
     @apply grid;
     grid-template-columns: 1fr 1.8fr;
+    > div {
+      @apply w-full overflow-hidden;
+    }
     .left {
       @apply relative flex items-end justify-center shape-common-lg;
       margin-right: 1.6rem;
@@ -29,7 +34,6 @@
         @apply relative font-heading text-center;
         padding: 2.4rem 2.4rem 4.8rem;
         width: min-content;
-
         color: var(--white);
         font-size: 8.8rem;
         line-height: 8rem;

src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx

@@ -16,6 +16,12 @@ const ProductListBanner = ({ }: Props) => {
                         subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
                         imgLink: BannerRight.src,
                         size: "large",
+                    },
+                    {
+                        title: "Save 15% on your first order",
+                        subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
+                        imgLink: BannerRight.src,
+                        size: "large",
                     }
                     ]
                 }

src/styles/_base.scss

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@500&family=Righteous&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@500&display=swap");
 @import '../../public/fonts/style.css';
 
 :root {
@@ -42,7 +42,7 @@
   --line-height: 2.4rem;
 
   --font-sans: "Nunito", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
-  --font-heading: "Norquay-bold", "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
+  --font-heading: "Norquay-bold", monospace, -apple-system, system-ui, BlinkMacSystemFont,  "Helvetica Neue", "Helvetica", sans-serif;
   --font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
 }