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",
- },
+ }
]
}
/>