styles: banner common

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() {
     <RecommendedRecipes data={RECIPE_DATA_TEST} />
     <ReleventProducts />
     <ViewedProducts />
+    <RelevantBlogPosts data={BLOGS_DATA_TEST} title="You will like also" bgcolor="cream"/>
   </>
 }
 

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 <BannerItem
+            title={item.title}
+            imgLink={item.imgLink}
+            subtitle={item.subtitle}
+            buttonLabel={item.buttonLabel}
+            linkButton={item.linkButton}
+            size={item.size}
+        />
+    }
     return (
         <CarouselCommon<BannerItemProps>
             data={data}
             itemKey="banner"
             Component={BannerItem}
             option={option}
-            isDot = {true}
+            isDot={true}
         />
     )
 })

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

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