diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx index c34394af5..d48c4b604 100644 --- a/pages/product/[slug].tsx +++ b/pages/product/[slug].tsx @@ -1,7 +1,7 @@ -import { Layout, RecipeDetail } from 'src/components/common' +import { Layout, RecipeDetail, RelevantBlogPosts } from 'src/components/common' import { ProductInfoDetail, RecommendedRecipes, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail' -import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data' +import { BLOGS_DATA_TEST, INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data' export default function Slug() { return <> @@ -10,6 +10,7 @@ export default function Slug() { + } diff --git a/src/components/common/Banner/Banner.tsx b/src/components/common/Banner/Banner.tsx index 1dbc04d9f..9b6b1099a 100644 --- a/src/components/common/Banner/Banner.tsx +++ b/src/components/common/Banner/Banner.tsx @@ -11,13 +11,24 @@ const option = { breakpoints: {} } const Banner = memo(({ data }: Props) => { + if (data.length === 1) { + const item = data[0] + return + } return ( data={data} itemKey="banner" Component={BannerItem} option={option} - isDot = {true} + isDot={true} /> ) }) diff --git a/src/components/common/Banner/BannerItem/BannerItem.module.scss b/src/components/common/Banner/BannerItem/BannerItem.module.scss index 72690f92d..72a288374 100644 --- a/src/components/common/Banner/BannerItem/BannerItem.module.scss +++ b/src/components/common/Banner/BannerItem/BannerItem.module.scss @@ -1,31 +1,28 @@ @import "../../../../styles/utilities"; .bannerItem { - @apply bg-primary-light custom-border-radius-lg overflow-hidden; - @screen md { - border: 1px solid var(--primary); - } + @apply bg-primary-light shape-common-lg overflow-hidden; + padding: 0; &.large { margin-bottom: 2.8rem; .inner { - @screen xl { - @apply bg-right-bottom; - background-size: unset; - } + background-size: cover; + background-position: right bottom; } } .inner { @apply bg-no-repeat; background-size: 90%; - background-position: right -500% bottom 0%; + background-position: right -500% bottom 0%; .content { background-image: linear-gradient( to right, - rgb(227, 242, 233, 0.9), - rgb(227, 242, 233, 0.5) 80%, + rgb(227, 242, 233) 63%, rgb(227, 242, 233, 0) ); - padding: 1.6rem; + + padding: 2rem; + padding-bottom: 4rem; max-width: 37rem; @screen md { max-width: 49.6rem; @@ -38,9 +35,6 @@ } .subHeading { @apply sub-headline; - @screen md { - @apply caption; - } } } diff --git a/src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx b/src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx index 17d48d637..edeaa9f35 100644 --- a/src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx +++ b/src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx @@ -16,7 +16,7 @@ const ProductListBanner = ({ }: Props) => { subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.", imgLink: BannerRight.src, size: "large", - }, + } ] } />