🐛 bug: 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[],
@@ -29,13 +30,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,13 +72,14 @@ const CarouselCommon = <T,>({
         responsive={responsive}
         arrows={false}
         renderDotsOutside={true}
+        ssr={true}
         // customLeftArrow={<CustomCarouselArrow side="left" />}
         // customRightArrow={<CustomCarouselArrow side="right" />}
       >
-        {data?.map((props, index) => {
+        {data.map((props, index) => {
           const allProps = defaultComponentProps
-            ? { ...props, ...defaultComponentProps }
+          ? { ...props, ...defaultComponentProps }
-            : props
+          : props
           return <Component {...allProps} key={`${itemKey}-${index}`} />
         })}
       </Carousel>

src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss

@@ -9,6 +9,7 @@
         }
     }
     @screen lg {
+        max-width: 18.1rem;
         @apply block;
         margin-right: 4rem;
         padding: 0;

src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss

@@ -20,13 +20,19 @@
     }
     .productsWrap {
         @apply spacing-horizontal-left;
+        overflow: hidden;
         @screen lg {
-            max-width: 75%;
+            flex: 1;
+            // max-width: 75%;
             padding: 0 0.8rem;
             > div > div {
                 @apply shape-common-lg bg-white;
                 padding: 4rem 0;
             }
+            > div {
+                margin: 0 2.4;
+                overflow: visible
+            }
             :global(.customArrow) {
                 @screen lg {
                     &:global(.leftArrow) {
@@ -40,7 +46,7 @@
         }
         @screen xl {
             padding: 0 2.4rem;
-            max-width: 80%;
+            // max-width: 80%;
         }
     }
 }

src/components/common/ListProductWithInfo/ListProductWithInfo.tsx

@@ -80,6 +80,7 @@ const ListProductWithInfo = ({ data, title, subtitle, hasBorderBottomMobile }: P
                 <CarouselCommon<ProductCardProps>
                     data={data}
                     Component={ProductCard}
+                    // draggable={true} infinite={true}
                     itemKey={title}
                     responsive={RESPONSIVE}
                 />

src/components/common/ProductCard/ProductCard.tsx

@@ -32,7 +32,6 @@ const ProductCard = ({
     </div>
 
   }
-
   return (
     <div className={s.productCardWarpper}>
       <div className={s.cardTop}>

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

@@ -1,15 +1,21 @@
 @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: 35.75% 64.25%;
+    // 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 +35,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-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss

@@ -8,5 +8,9 @@
     }
     > div {
         width: 100%;
+        // > div {
+        //     height: 100%;
+            
+        // }
     }
 }

src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx

@@ -26,7 +26,7 @@ const DATA = [
 
 const RESPONSIVE: ResponsiveType = {
     desktop: {
-      breakpoint: { max: 999, min: 0 },
+      breakpoint: { max: 9999, min: 0 },
       items: 1,
       slidesToSlide: 1, // optional, default to 1.
     },

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;
 }