diff --git a/src/components/common/Banner/Banner.module.scss b/src/components/common/Banner/Banner.module.scss index e69de29bb..22b99a787 100644 --- a/src/components/common/Banner/Banner.module.scss +++ b/src/components/common/Banner/Banner.module.scss @@ -0,0 +1,3 @@ +.bannerWrap { + @apply w-full; +} \ No newline at end of file diff --git a/src/components/common/Banner/Banner.tsx b/src/components/common/Banner/Banner.tsx index 243dc026a..bd83cbd13 100644 --- a/src/components/common/Banner/Banner.tsx +++ b/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 ( - - data={data} - itemKey="banner" - Component={BannerItem} - responsive={RESPONSIVE} - showDots={true} - /> +
+ + data={data} + itemKey="banner" + Component={BannerItem} + responsive={RESPONSIVE} + showDots={true} + /> +
) }) diff --git a/src/components/common/Banner/BannerItem/BannerItem.module.scss b/src/components/common/Banner/BannerItem/BannerItem.module.scss index 5a37e252a..1c91e0beb 100644 --- a/src/components/common/Banner/BannerItem/BannerItem.module.scss +++ b/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"); diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx index 4e39610a9..72854b4b1 100644 --- a/src/components/common/CarouselCommon/CarouselCommon.tsx +++ b/src/components/common/CarouselCommon/CarouselCommon.tsx @@ -72,13 +72,14 @@ const CarouselCommon = ({ responsive={responsive} arrows={false} renderDotsOutside={true} + ssr={true} // customLeftArrow={} // customRightArrow={} > - {data?.map((props, index) => { + {data.map((props, index) => { const allProps = defaultComponentProps - ? { ...props, ...defaultComponentProps } - : props + ? { ...props, ...defaultComponentProps } + : props return })} diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss index c1cd9966e..bc7492e86 100644 --- a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss +++ b/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; diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss index de7b96d3d..9aacae01c 100644 --- a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss +++ b/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%; } } } diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx index fae4f0794..3afd766f6 100644 --- a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx +++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx @@ -80,6 +80,7 @@ const ListProductWithInfo = ({ data, title, subtitle, hasBorderBottomMobile }: P data={data} Component={ProductCard} + // draggable={true} infinite={true} itemKey={title} responsive={RESPONSIVE} /> diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx index a46e8a6fb..715a30239 100644 --- a/src/components/common/ProductCard/ProductCard.tsx +++ b/src/components/common/ProductCard/ProductCard.tsx @@ -32,7 +32,6 @@ const ProductCard = ({ } - return (
diff --git a/src/components/modules/home/HomeBanner/HomeBanner.module.scss b/src/components/modules/home/HomeBanner/HomeBanner.module.scss index ff6b3e511..89d4e3b21 100644 --- a/src/components/modules/home/HomeBanner/HomeBanner.module.scss +++ b/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; diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss index 94ce13cc1..a8b6174cb 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss @@ -8,5 +8,9 @@ } > div { width: 100%; + // > div { + // height: 100%; + + // } } } diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx index cbe39cd7a..475d0f22e 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx +++ b/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. }, diff --git a/src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx b/src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx index edeaa9f35..3f13d238c 100644 --- a/src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx +++ b/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", } ] } diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 41d33bdf1..1eab49e38 100644 --- a/src/styles/_base.scss +++ b/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; }