bug:confict

next.config.js

@@ -26,6 +26,7 @@ module.exports = withCommerceConfig({
   images: {
     // todo: replace domains for images
     domains: ['user-images.githubusercontent.com'],
+    minimumCacheTTL: 60,
   },
   i18n: {
     locales: ['en-US', 'es'],
@@ -46,10 +47,10 @@ module.exports = withCommerceConfig({
       // For Vendure, rewrite the local api url to the remote (external) api url. This is required
       // to make the session cookies work.
       isVendure &&
-        process.env.NEXT_PUBLIC_VENDURE_LOCAL_URL && {
+      process.env.NEXT_PUBLIC_VENDURE_LOCAL_URL && {
-          source: `${process.env.NEXT_PUBLIC_VENDURE_LOCAL_URL}/:path*`,
+        source: `${process.env.NEXT_PUBLIC_VENDURE_LOCAL_URL}/:path*`,
-          destination: `${process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL}/:path*`,
+        destination: `${process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL}/:path*`,
-        },
+      },
     ].filter(Boolean)
   },
 })

pages/product/[slug].tsx

@@ -1,7 +1,7 @@
 
-import { Layout, RecipeDetail } from 'src/components/common'
+import { Layout, RecipeDetail, RecommendedRecipes, RelevantBlogPosts } from 'src/components/common'
-import { ProductInfoDetail, RecommendedRecipes, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
+import { ProductInfoDetail, 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="relevent blog posts"/>
   </>
 }
 

pages/recipe/[slug].tsx

@@ -0,0 +1,12 @@
+
+import { Layout, RecipeDetail, RecommendedRecipes } from 'src/components/common'
+import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
+
+export default function Slug() {
+  return <div className="page-recipe-detail">
+    <RecipeDetail ingredients={INGREDIENT_DATA_TEST} />
+    <RecommendedRecipes data={RECIPE_DATA_TEST} />
+  </div>
+}
+
+Slug.Layout = Layout

pages/test.tsx

@@ -78,6 +78,11 @@ export default function Test() {
 }
   return (
     <>
+    <div className="shape-common-border">
+      <div className="inner">
+        Lorem ipsum dolor sit amet.
+      </div>
+    </div>
       {/* <BlogDetailPage /> */}
       
       {/* <RecipeListPage/> */}

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,16 +1,15 @@
 @import "../../../../styles/utilities";
 
 .bannerItem {
-  @apply bg-primary-light custom-border-radius-lg overflow-hidden;
+  @apply bg-primary-light shape-common-lg overflow-hidden;
-  @screen md {
+  padding: 0;
-    border: 1px solid var(--primary);
-  }
   &.large {
     margin-bottom: 2.8rem;
     .inner {
+      background-size: cover;
+      background-position: center bottom;
       @screen xl {
-        @apply bg-right-bottom;
+        background-position: right bottom;
-        background-size: unset;
       }
     }
   }
@@ -19,13 +18,10 @@
     background-size: 90%;
     background-position: right -500% bottom 0%;
     .content {
-      background-image: linear-gradient(
+      background-image: linear-gradient(to right, rgb(227, 242, 233) 63%, rgb(227, 242, 233, 0));
-        to right,
+
-        rgb(227, 242, 233, 0.9),
+      padding: 2rem;
-        rgb(227, 242, 233, 0.5) 80%,
+      padding-bottom: 4rem;
-        rgb(227, 242, 233, 0)
-      );
-      padding: 1.6rem;
       max-width: 37rem;
       @screen md {
         max-width: 49.6rem;
@@ -38,9 +34,6 @@
         }
         .subHeading {
           @apply sub-headline;
-          @screen md {
-            @apply caption;
-          }
         }
       }
 

src/components/common/ButtonCommon/ButtonCommon.module.scss

@@ -1,102 +1,127 @@
 @import "../../../styles/utilities";
 
 .buttonCommon {
-  @apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold;
+  @apply shape-common;
-  display: flex;
+  .inner {
-  justify-content: center;
+    padding: 1rem 2rem;
-  align-items: center;
+    @apply bg-primary transition-all duration-200 text-white font-bold;
-  padding: 1rem 2rem;
+    display: flex;
-  @screen md {
+    justify-content: center;
-    padding: 0.8rem 1.6rem;
+    align-items: center;
-  }
+    @screen md {
-  @screen lg {
+      padding: 1.6rem 1.6rem;
-    padding: 0.8rem 3.2rem;
+    }
-  }
+    @screen lg {
-  &:disabled {
+      padding: 1.6rem 3.2rem;
-    filter: brightness(0.9);
+    }
-    cursor: not-allowed;
+    &:disabled {
-    color: var(--disabled);
+      filter: brightness(0.9);
-  }
+      cursor: not-allowed;
-  &:hover {
+      color: var(--disabled);
-    @apply shadow-md;
+    }
-    &:not(:disabled) {
+    &:hover {
+      @apply shadow-md;
+      &:not(:disabled) {
+        filter: brightness(1.05);
+      }
+    }
+    &:focus {
+      outline: none;
       filter: brightness(1.05);
     }
+    &:focus-visible {
+      outline: 2px solid var(--text-active);
+    }
   }
-  &:focus {
-    outline: none;
-    filter: brightness(1.05);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--text-active);
-  }
-
   &.loading {
-    &::before {
+    .inner {
-      content: "";
+      &::after {
-      border-radius: 50%;
+        content: "";
-      width: 1.6rem;
+        border-radius: 50%;
-      height: 1.6rem;
+        width: 1.6rem;
-      border: 3px solid rgba(170, 170, 170, 0.5);
+        height: 1.6rem;
-      border-top: 3px solid var(--white);
+        border: 3px solid rgba(170, 170, 170, 0.5);
-      -webkit-animation: spin 2s linear infinite;
+        border-top: 3px solid var(--white);
-      animation: spin 2s linear infinite;
+        -webkit-animation: spin 2s linear infinite;
-      margin-right: 0.8rem;
+        animation: spin 2s linear infinite;
+        margin-right: 0.8rem;
+      }
     }
   }
 
   &.light {
-    @apply text-base bg-white;
+    @apply shape-common-border;
-    border: 1px solid var(--text-active);
+    &::before {
+      background-color: var(--text-active);
+    }
+    .inner {
+      @apply text-base bg-white;
+    }
     &.loading {
-      &::before {
+      .inner {
-        border-top-color: var(--primary);
+        &::after {
+          border-top-color: var(--primary);
+        }
       }
     }
   }
 
   &.lightBorderNone {
-    @apply bg-white text-primary;
+    .inner {
+      @apply bg-white text-primary;
+    }
     &.loading {
-      &::before {
+      .inner::after {
         border-top-color: var(--primary);
       }
     }
   }
 
   &.ghost {
-    @apply bg-white text-primary;
+    @apply shape-common-border;
-    border: 1px solid var(--primary);
+    .inner {
+      @apply bg-white text-primary;
+    }
+    &::before {
+      background-color: var(--primary);
+    }
     &.loading {
-      &::before {
+      .inner::after {
         border-top-color: var(--text-active);
       }
     }
   }
 
   &.onlyIcon {
-    padding: 0.8rem;
+    .inner {
-    .icon {
+      padding: 1rem;
-      margin: 0;
+      @screen md {
+        padding: 1.6rem;
+      }
+      .icon {
+        margin: 0;
+      }
     }
   }
 
   &.large {
-    padding: 1rem 1.5rem;
+    .inner {
-    &.onlyIcon {
+      padding: 1rem 1.6rem;
-      padding: 1rem;
-    }
-    @screen md {
-      padding: 1.6rem 3.2rem;
       &.onlyIcon {
-        padding: 1.6rem;
+        padding: 1rem;
+      }
+      @screen md {
+        padding: 1.6rem 3.2rem;
+        &.onlyIcon {
+          padding: 1.6rem;
+        }
+      }
+      @screen lg {
+        padding: 1.6rem 4.8rem;
       }
     }
-    @screen lg {
-      padding: 1.6rem 4.8rem;
-    }
     &.loading {
-      &::before {
+      .inner::before {
         width: 2.4rem;
         height: 2.4rem;
       }
@@ -104,16 +129,21 @@
   }
 
   &.preserve {
-    flex-direction: row-reverse;
+    .inner {
-    .icon {
+      flex-direction: row-reverse;
-      margin: 0 0 0 1.6rem;
+      .icon {
+        margin: 0 0 0 1.6rem;
+      }
     }
   }
 
   .icon {
     margin: 0 1.6rem 0 0;
-    svg path {
+    svg {
-      fill: currentColor;
+      height: 2rem;
+      path {
+        fill: currentColor;
+      }
     }
   }
 }

src/components/common/ButtonCommon/ButtonCommon.tsx

@@ -27,10 +27,12 @@ const ButtonCommon = memo(({ type = 'primary', size = 'default', loading = false
             disabled={disabled}
             onClick={onClick}
         >
-            {
+            <div className={s.inner}>
-                icon && <span className={s.icon}>{icon}</span>
+                {
-            }
+                    icon && <span className={s.icon}>{icon}</span>
-            <span className={s.label}>{children}</span>
+                }
+                <span className={s.label}>{children}</span>
+            </div>
         </button>
     )
 })

src/components/common/CardBlog/CardBlog.module.scss

@@ -4,8 +4,6 @@
     @apply inline-flex flex-col justify-start;
     max-width: 39.2rem;
     .image {
-        width: 100%;
-        max-height: 22rem;
         border-radius: 2.4rem;
         &:hover {
             cursor: pointer;
@@ -13,6 +11,9 @@
         img{
             border-radius: 2.4rem;
         }
+        > div{
+            min-height: 22rem;
+        }
     }
     .title {
         padding: 1.6rem 0.8rem 0.4rem 0.8rem;

src/components/common/CardBlog/CardBlog.tsx

@@ -2,7 +2,9 @@ import Link from 'next/link'
 import React from 'react'
 import { ROUTE } from 'src/utils/constanst.utils'
 import { BlogProps } from 'src/utils/types.utils'
+import { ImgWithLink } from '..'
 import s from './CardBlog.module.scss'
+
 export interface BlogCardProps extends BlogProps {
   // todo: edit when intergrate API
 
@@ -14,7 +16,7 @@ const CardBlog = ({ imageSrc, title, description, slug }: BlogCardProps) => {
       <Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
         <a>
           <div className={s.image}>
-            <img src={imageSrc} alt="image cardblog" />
+            <ImgWithLink src={imageSrc} alt="image cardblog" />
           </div>
         </a>
       </Link>

src/components/common/CarouselCommon/CarouselCommon.tsx

@@ -15,6 +15,7 @@ export interface CarouselCommonProps<T> {
   option: TOptionsEvents
   keenClassname?: string
   isPadding?: boolean
+  defaultComponentProps?: object
 }
 
 const CarouselCommon = <T,>({
@@ -25,6 +26,7 @@ const CarouselCommon = <T,>({
   isPadding = false,
   isArrow = true,
   isDot = false,
+  defaultComponentProps,
   option: { slideChanged,slidesPerView, ...sliderOption },
 }: CarouselCommonProps<T>) => {
   const [currentSlide, setCurrentSlide] = React.useState(0)
@@ -68,11 +70,14 @@ const CarouselCommon = <T,>({
           [s.isPadding]: isPadding,
         })}
       >
-        {data?.map((props, index) => (
+        {data?.map((props, index) => {
-          <div className="keen-slider__slide" key={`${itemKey}-${index}`}>
+          const allProps = defaultComponentProps ? { ...props, ...defaultComponentProps } : props
-            <Component {...props} />
+          return (
-          </div>
+            <div className="keen-slider__slide" key={`${itemKey}-${index}`}>
-        ))}
+              <Component {...allProps} />
+            </div>
+          )
+        })}
       </div>
       {slider && isArrow && (
         <>

src/components/common/CartDrawer/CartDrawer.module.scss

@@ -4,9 +4,6 @@
 .cartDrawer {
     @apply flex flex-col h-full;
     .body {
-        @apply overflow-y-auto overflow-x-hidden h-full custom-scroll;
+        @apply flex flex-col justify-center overflow-y-auto overflow-x-hidden h-full custom-scroll;
-    }
-    .bottom {
-        padding-top: 1.6rem;
     }
 }

src/components/common/CartDrawer/CartDrawer.tsx

@@ -23,7 +23,7 @@ const CartDrawer = ({ visible, onClose }: Props) => {
           <ProductsInCart data={PRODUCT_CART_DATA_TEST}/>
           <CartRecommendation />
         </div>
-        <div className={s.bottom}>
+        <div>
           <CartMessage />
           <CartCheckoutButton />
         </div>

src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss

@@ -1,5 +1,7 @@
 .cartCheckoutButton {
+    display: block;
     padding: 1.6rem;
+    width: 100%;
     button {
         width: 100%;
     }

src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx

@@ -1,12 +1,16 @@
 import React, { memo } from 'react';
 import { ButtonCommon } from 'src/components/common';
 import s from './CartCheckoutButton.module.scss';
+import Link from 'next/link'
+import { ROUTE } from 'src/utils/constanst.utils';
 
 const CartCheckoutButton = memo(() => {
   return (
-    <div className={s.cartCheckoutButton}>
+    <Link href={ROUTE.CHECKOUT}>
-      <ButtonCommon size='large'>Check out - Rp 120.500</ButtonCommon>
+      <a className={s.cartCheckoutButton}>
-    </div>
+        <ButtonCommon size='large'>Check out - Rp 120.500</ButtonCommon>
+      </a>
+    </Link>
   )
 })
 

src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss

@@ -1,7 +1,8 @@
-@import '../../../../../styles/utilities';
+@import "../../../../../styles/utilities";
 
 .cartRecommendation {
     @apply w-full bg-background-gray;
+    padding-bottom: 5.4rem;
     .top {
         @apply flex justify-between items-center;
         padding: 1.6rem;
@@ -12,14 +13,10 @@
     .productCardWarpper {
         padding-left: 1.6rem;
         :global(.customArrow) {
-            @apply bg-line;
+            @apply bg-line shadow-md;
-            @screen lg {
+            opacity: 0.8;
-                &:global(.leftArrow) {
+            &:global(.rightArrow) {
-                    left: calc(-6.4rem - 2rem);
+                right: 1rem;
-                }
-                &:global(.rightArrow) {
-                    right: calc(-6.4rem - 2rem);
-                }
             }
         }
     }

src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx

@@ -7,14 +7,20 @@ import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
 import s from './CartRecommendation.module.scss';
 
 const option: TOptionsEvents = {
-  slidesPerView: 2,
+  slidesPerView: 1.5,
   mode: 'free',
   breakpoints: {
     '(min-width: 640px)': {
-      slidesPerView: 1,
+      slidesPerView: 1.5,
     },
     '(min-width: 768px)': {
       slidesPerView: 2.5,
+    },
+    '(min-width: 1008px)': {
+      slidesPerView: 2.2,
+    },
+    '(min-width: 1440px)': {
+      slidesPerView: 2.5,
     }
   },
 }
@@ -34,6 +40,7 @@ const CartRecommendation = () => {
           Component={ProductCard}
           itemKey="cart-recommendation"
           option={option}
+          defaultComponentProps={{ isSingleButton: true }}
         />
       </div>
     </div>

src/components/common/Header/Header.tsx

@@ -42,6 +42,8 @@ const Header = memo(({ toggleFilter,visibleFilter }: props) => {
                 } else {
                     setIsFullHeader(true)
                 }
+            } else {
+                setIsFullHeader(true)
             }
         }
         window.addEventListener('scroll', handleScroll)
@@ -52,6 +54,17 @@ const Header = memo(({ toggleFilter,visibleFilter }: props) => {
 
     return (
         <>
+            <div className={classNames({
+                [s.headerSticky]: true,
+                [s.show]: !isFullHeader
+            })}>
+                <HeaderMenu
+                    toggleFilter={toggleFilter}
+                    toggleCart={toggleCart}
+                    openModalAuthen={openModalAuthen}
+                    openModalInfo={openModalInfo} />
+            </div>
+            
             <header ref={headeFullRef} className={classNames({ [s.header]: true, [s.full]: isFullHeader })}>
                 <HeaderHighLight />
                 <div className={s.menu}>
@@ -59,25 +72,12 @@ const Header = memo(({ toggleFilter,visibleFilter }: props) => {
                         visibleFilter={visibleFilter}
                         toggleFilter={toggleFilter}
                         toggleCart={toggleCart}
-                        isFull={isFullHeader}
                         openModalAuthen={openModalAuthen}
                         openModalInfo={openModalInfo} />
                     <HeaderSubMenu />
                 </div>
             </header>
 
-
-            <div className={classNames({
-                [s.headerSticky]: true,
-                [s.show]: !isFullHeader
-            })}>
-                <HeaderMenu isFull={isFullHeader}
-                    toggleFilter={toggleFilter}
-                    toggleCart={toggleCart}
-                    openModalAuthen={openModalAuthen}
-                    openModalInfo={openModalInfo} />
-            </div>
-
             <HeaderSubMenuMobile />
             <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
             <ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />

src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss

@@ -7,6 +7,7 @@
         padding-top: 0.8rem;
         padding-bottom: 0.8rem;
         color: var(--white);
+        margin-bottom: 1.6rem;
         .menu {
             @apply flex items-center list-none;
             padding: 0.8rem 0;

src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss

@@ -7,10 +7,6 @@
         @apply flex justify-between items-center;
         padding-top: 0.8rem;
         padding-bottom: 0.8rem;
-        &.full {
-            padding-top: 2.4rem;
-            padding-bottom: 2.4rem;
-        }
     }
     .left {
         .top {
@@ -62,6 +58,19 @@
             }
         }
     }
+    .btnCart {
+        all: unset;
+        cursor: pointer;
+        &:focus-visible {
+            outline: 2px solid #000;
+        }
+        &:hover {
+            svg path {
+                fill: var(--primary);
+                opacity: 0.8;
+            }
+        }
+    }
     .menu {
         @apply hidden;
         @screen md {
@@ -85,19 +94,6 @@
                         }
                     }
                 }
-                .btnCart {
-                    all: unset;
-                    cursor: pointer;
-                    &:focus-visible {
-                        outline: 2px solid #000;
-                    }
-                    &:hover {
-                        svg path {
-                            fill: var(--primary);
-                            opacity: 0.8;
-                        }
-                    }
-                }
             }
         }
         @screen xl {

src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx

@@ -10,17 +10,24 @@ import s from './HeaderMenu.module.scss'
 import { useRouter } from 'next/router'
 interface Props {
     children?: any,
+<<<<<<< HEAD
     isFull: boolean,
     visibleFilter?:boolean,
+=======
+>>>>>>> 2cd36b2d66249e898f8234d210f77f5e2a4c5a2e
     openModalAuthen: () => void,
     openModalInfo: () => void,
-    toggleFilter:() => void,
+    toggleFilter: () => void,
-    toggleCart:() => void,
+    toggleCart: () => void,
 }
 
-const FILTER_PAGE = [ROUTE.HOME,ROUTE.PRODUCTS]
+const FILTER_PAGE = [ROUTE.HOME, ROUTE.PRODUCTS]
 
+<<<<<<< HEAD
 const HeaderMenu = memo(({ visibleFilter,isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
+=======
+const HeaderMenu = memo(({ openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
+>>>>>>> 2cd36b2d66249e898f8234d210f77f5e2a4c5a2e
     const router = useRouter()
 
 
@@ -48,10 +55,10 @@ const HeaderMenu = memo(({ visibleFilter,isFull, openModalAuthen, openModalInfo,
 
     ], [openModalAuthen])
     return (
-        <section className={classNames({ [s.headerMenu]: true, [s.full]: isFull })}>
+        <section className={s.headerMenu}>
             <div className={s.left}>
                 <div className={s.top}>
-                    <Logo/>
+                    <Logo />
                     <div className={s.iconGroup}>
                         {
                             FILTER_PAGE.includes(router.pathname) && (
@@ -61,7 +68,7 @@ const HeaderMenu = memo(({ visibleFilter,isFull, openModalAuthen, openModalInfo,
                                 </button>
                             )
                         }
-                        <button className={s.iconCart}>
+                        <button className={`${s.iconCart} ${s.btnCart}`} onClick={toggleCart}>
                             <IconBuy />
                         </button>
                     </div>
@@ -94,16 +101,16 @@ const HeaderMenu = memo(({ visibleFilter,isFull, openModalAuthen, openModalInfo,
                         <IconBuy />
                     </button>
                 </li>
-                
+
                 {
-                            FILTER_PAGE.includes(router.pathname) && (
+                    FILTER_PAGE.includes(router.pathname) && (
-                                <li className={s.iconFilterDesk}>
+                        <li className={s.iconFilterDesk}>
-                                    <button className={s.iconFilter} onClick={toggleFilter}>
+                            <button className={s.iconFilter} onClick={toggleFilter}>
-                                        <IconFilter/>
+                                <IconFilter />
-                                    </button>
+                            </button>
-                                </li>
+                        </li>
-                            )
+                    )
-                        }
+                }
             </ul>
         </section>
     )

src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss

@@ -5,6 +5,7 @@
     @screen md {
         @apply block;
         padding-bottom: 2.4rem;
+        margin-top: 1.6rem;
         transform: none;
         height: unset;
         @screen lg {

src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.module.scss

@@ -4,30 +4,32 @@
     @apply fixed w-full bg-white;
     bottom: 0;
     left: 0;
-    padding: 2rem 1rem;
+    padding: 0 1rem 1rem;
     border-top: 1px solid var(--border-line);
     box-shadow: -5px 6px 10px rgba(0, 0, 0, 0.2);
     z-index: 9999;
     .menu {
-        @apply grid grid-cols-4;
+        @apply grid grid-cols-5;
         li {
             a {
                 @apply transition-all duration-200 no-underline;
-                &:hover {
+                -webkit-tap-highlight-color: unset;
-                    color: var(--primary);
-                }
             }
             .menuItem {
                 @apply flex flex-col justify-center items-center sm-label;
+                padding-top: 1rem;
+                border-top: 2px solid transparent;
                 .icon {
                     position: relative;
                     margin-bottom: 0.5rem;
+                    height: 3rem;
                     svg path {
                         fill: currentColor;
                     }
                 }
                 &.active {
                     @apply text-primary;
+                    border-top: 2px solid var(--primary);
                 }
                 &.dot {
                     .icon {

src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { memo } from 'react'
-import { IconHeart, IconHome, IconShopping, IconUser } from 'src/components/icons'
+import { IconHeart, IconHome, IconNoti, IconShopping, IconUser } from 'src/components/icons'
 import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import s from './HeaderSubMenuMobile.module.scss'
 
@@ -11,7 +11,6 @@ const OPTION_MENU = [
         link: ROUTE.HOME,
         name: 'Home',
         icon: <IconHome />,
-        isMarked: true,
     },
     {
         link: ROUTE.PRODUCTS,
@@ -25,6 +24,12 @@ const OPTION_MENU = [
         icon: <IconHeart />,
         isMarked: false,
     },
+    {
+        link: `${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.NOTIFICATION}`,
+        name: 'Notifications',
+        icon: <IconNoti />,
+        isMarked: true,
+    },
     {
         link: ROUTE.ACCOUNT,
         name: 'Account',

src/components/common/ImgWithLink/ImgWithLink.tsx

@@ -6,16 +6,17 @@ import { BLUR_DATA_IMG } from 'src/utils/constanst.utils'
 export interface ImgWithLinkProps {
     src: string,
     alt?: string,
+    blurDataURL?: string,
 }
 
-const ImgWithLink = ({ src, alt }: ImgWithLinkProps) => {
+const ImgWithLink = ({ src, alt, blurDataURL = BLUR_DATA_IMG }: ImgWithLinkProps) => {
     return (
         <div className={s.imgWithLink}>
             <Image src={src} alt={alt}
                 layout="fill"
                 className={s.imgWithLink}
                 placeholder="blur"
-                blurDataURL={BLUR_DATA_IMG}
+                blurDataURL={blurDataURL}
             />
         </div>
     )

src/components/common/InputCommon/InputCommon.module.scss

@@ -15,10 +15,11 @@
     .icon + .inputCommon {
       padding-left: 4.8rem;
     }
-    
+
     .inputCommon {
-      @apply block w-full transition-all duration-200 rounded bg-white;
+      @apply block w-full transition-all duration-200 bg-white;
-      padding: 1.2rem 1.6rem;
+      border-radius: .8rem;
+      padding: 1.6rem;
       border: 1px solid var(--border-line);
       &:hover,
       &:focus,
@@ -31,24 +32,6 @@
       &::placeholder {
         @apply text-label;
       }
-
-      &.custom {
-        @apply custom-border-radius;
-        border: 1px solid transparent;
-        background: var(--gray);
-        &:hover,
-        &:focus,
-        &:active {
-          border: 1px solid var(--primary);
-        }
-      }
-      &.bgTransparent {
-        background: rgb(227, 242, 233, 0.3);
-        color: var(--white);
-        &::placeholder {
-          color: var(--white);
-        }
-      }
     }
 
     &.preserve {
@@ -91,4 +74,27 @@
     color: var(--negative);
     margin-top: 0.4rem;
   }
+
+  &.custom {
+    @apply shape-common;
+    .inputCommon {
+      border: none;
+      background: var(--background-gray);
+      &:hover,
+      &:focus,
+      &:active {
+        @apply shadow-md;
+        border: none;
+      }
+    }
+  }
+  &.bgTransparent {
+    .inputCommon {
+      background: rgb(227, 242, 233, 0.3);
+      color: var(--white);
+      &::placeholder {
+        color: var(--white);
+      }
+    }
+  }
 }

src/components/common/InputCommon/InputCommon.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
-import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
-import { IconCheck, IconError, IconPassword, IconPasswordCross } from 'src/components/icons';
+import { IconCheck, IconError } from 'src/components/icons';
 import { KEY } from 'src/utils/constanst.utils';
 import s from './InputCommon.module.scss';
 
 type Ref = {
     focus: () => void
-    getValue: () =>  string | number
+    getValue: () => string | number
 } | null;
 interface Props {
     children?: React.ReactNode,
@@ -63,6 +63,9 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
     return (
         <div className={classNames({
             [s.inputWrap]: true,
+            [s[styleType]]: true,
+            [s.bgTransparent]: backgroundTransparent
+
         })}>
             <div className={classNames({
                 [s.inputInner]: true,
@@ -78,11 +81,7 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
                     placeholder={placeholder}
                     onChange={handleChange}
                     onKeyDown={handleKeyDown}
-                    className={classNames({
+                    className={s.inputCommon}
-                        [s.inputCommon]: true,
-                        [s[styleType]]: true,
-                        [s.bgTransparent]: backgroundTransparent
-                    })}
                 />
             </div>
             {

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

@@ -3,9 +3,14 @@
 .listProductWithInfo {
     background-color: var(--background);
     border-top: 1rem solid var(--gray);
-    border-bottom: 1rem solid var(--gray);
     padding-top: 6rem;
     padding-bottom: 6rem;
+    &.borderBottom {
+        border-bottom: 1rem solid var(--gray);
+        @screen lg {
+            border-bottom: none;
+        }
+    }
     @screen lg {
         @apply flex spacing-horizontal-left;
         padding-top: 5.6rem;
@@ -17,8 +22,11 @@
         @apply spacing-horizontal-left;
         @screen lg {
             max-width: 75%;
-            @apply custom-border-radius-lg bg-white;
+            padding: 0 0.8rem;
-            padding: 4rem .8rem;
+            > div > div {
+                @apply shape-common-lg bg-white;
+                padding: 4rem 0;
+            }
             :global(.customArrow) {
                 @screen lg {
                     &:global(.leftArrow) {
@@ -31,18 +39,8 @@
             }
         }
         @screen xl {
-            padding: 4rem 2.4rem;
+            padding: 0 2.4rem;
             max-width: 80%;
-            :global(.customArrow) {
-                @screen lg {
-                    &:global(.leftArrow) {
-                        left: calc(-6.4rem + 1rem);
-                    }
-                    &:global(.rightArrow) {
-                        right: calc(-6.4rem + 1rem);
-                    }
-                }
-            }
         }
     }
 }

src/components/common/ListProductWithInfo/ListProductWithInfo.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { TOptionsEvents } from 'keen-slider';
 import React from 'react';
 import CarouselCommon from '../CarouselCommon/CarouselCommon';
@@ -9,6 +10,7 @@ interface Props {
     data: ProductCardProps[],
     title: string,
     subtitle?: string,
+    hasBorderBottomMobile?: boolean,
 }
 const OPTION_DEFAULT: TOptionsEvents = {
     slidesPerView: 2,
@@ -18,20 +20,29 @@ const OPTION_DEFAULT: TOptionsEvents = {
             slidesPerView: 3,
         },
         '(min-width: 768px)': {
-            slidesPerView: 4,
-        },
-        '(min-width: 1024px)': {
             slidesPerView: 3,
         },
+        '(min-width: 1008px)': {
+            slidesPerView: 3.5,
+        },
+        '(min-width: 1024px)': {
+            slidesPerView: 2.5,
+        },
         '(min-width: 1280px)': {
+            slidesPerView: 3.5,
+        },
+        '(min-width: 1440px)': {
             slidesPerView: 4.5,
         },
     },
 }
 
-const ListProductWithInfo = ({ data, title, subtitle }: Props) => {
+const ListProductWithInfo = ({ data, title, subtitle, hasBorderBottomMobile }: Props) => {
     return (
-        <div className={s.listProductWithInfo}>
+        <div className={classNames({
+            [s.listProductWithInfo]: true,
+            [s.borderBottom]: hasBorderBottomMobile,
+        })}>
             <InfoProducts
                 title={title}
                 subtitle={subtitle}

src/components/common/MenuDropdown/MenuDropdown.module.scss

@@ -71,7 +71,8 @@
             @apply block shadow-md;
         }
         .menuIner {
-            @apply rounded list-none bg-white;
+            @apply list-none bg-white;
+            border-radius: 0.8rem;
             border: 1px solid var(--text-active);
             margin-top: 0.4rem;
             > li {

src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx

@@ -1,9 +1,7 @@
-import classNames from 'classnames';
-import Link from 'next/link';
 import React, { useRef } from 'react';
-import { useModalCommon } from 'src/components/hooks/useModalCommon';
+import { STATE_OPTIONS } from 'src/utils/constanst.utils';
 import { CustomInputCommon } from 'src/utils/type.utils';
-import { Inputcommon } from '..';
+import { Inputcommon, SelectCommon } from '..';
 import ButtonCommon from '../ButtonCommon/ButtonCommon';
 import ModalCommon from '../ModalCommon/ModalCommon';
 import s from './ModalCreateUserInfo.module.scss';
@@ -27,8 +25,7 @@ const ModalCreateUserInfo = ({ demoVisible: visible, demoCloseModal: closeModal
                         <Inputcommon placeholder='Street Address' ref={firstInputRef} />
                         <Inputcommon placeholder='City' />
                         <div className={s.line}>
-                            {/* todo: select, not input */}
+                            <SelectCommon option={STATE_OPTIONS} type="custom" size="large" placeholder='State'/>
-                            <Inputcommon placeholder='State' />
                             <Inputcommon placeholder='Zip code' />
                         </div>
                         <Inputcommon placeholder='Phone (delivery contact)' />

src/components/common/ProductCard/ProductCard.module.scss

@@ -1,5 +1,5 @@
-.productCardWarpper{
+.productCardWarpper {
-    max-width: 20.8rem;
+    max-width: 22.4rem;
     min-height: 31.8rem;
     padding: 1.2rem 1.2rem 0 1.2rem;
     margin: auto;
@@ -8,47 +8,53 @@
     &.notSell {
         @apply justify-center;
     }
-    .cardTop{
+    .cardTop {
         @apply relative;
         height: 13.8rem;
         width: 100%;
-        .productImage{
+        .productImage {
             height: 100%;
             width: 100%;
             @apply flex justify-center items-center;
-            img{
+            > div {
+                min-height: 13rem;
+                img {
+                    object-fit: contain;
+                }
+            }
+            img {
                 @apply inline;
             }
-            &:hover{
+            &:hover {
                 cursor: pointer;
             }
         }
-        .productLabel{
+        .productLabel {
             @apply absolute left-0 bottom-0;
         }
     }
-    .cardMid{
+    .cardMid {
         min-height: 10.4rem;
         @apply flex flex-col justify-between;
-        .cardMidTop{
+        .cardMidTop {
-            .productname{
+            .productname {
                 font-weight: bold;
                 color: var(--text-active);
-                &:hover{
+                &:hover {
                     cursor: pointer;
                 }
             }
-            .productWeight{
+            .productWeight {
                 font-size: 1.2rem;
                 line-height: 2rem;
                 letter-spacing: 0.01em;
                 color: var(--text-base);
             }
         }
-        .cardMidBot{
+        .cardMidBot {
             padding-top: 0.8rem;
             @apply flex justify-between items-center border-t border-solid border-line;
-            .productPrice{
+            .productPrice {
                 @apply font-bold;
                 font-size: 2rem;
                 line-height: 2.8rem;
@@ -56,11 +62,27 @@
             }
         }
     }
-    .cardBot{
+    .cardBot {
+        @apply flex justify-between items-center;
         min-height: 4rem;
-        @apply flex justify-between items-center; 
+        margin-top: 1.6rem;
-        .cardIcon{
+        .cardIcon {
             margin-right: 0.8rem;
         }
+        .cardButton {
+            width: 100%;
+            button {
+                width: 100%;
+                > div {
+                    span {
+                        display: -webkit-box;
+                        -webkit-line-clamp: 1;
+                        -webkit-box-orient: vertical;
+                        overflow-y: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+            }
+        }
     }
-}
+}

src/components/common/ProductCard/ProductCard.tsx

@@ -1,7 +1,9 @@
 import Link from 'next/link'
 import React from 'react'
+import { IconBuy } from 'src/components/icons'
 import { ROUTE } from 'src/utils/constanst.utils'
 import { ProductProps } from 'src/utils/types.utils'
+import { ImgWithLink } from '..'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
 import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
 import ItemWishList from '../ItemWishList/ItemWishList'
@@ -11,6 +13,7 @@ import ProductNotSell from './ProductNotSell/ProductNotSell'
 
 export interface ProductCardProps extends ProductProps {
   buttonText?: string
+  isSingleButton?: boolean,
 }
 
 const ProductCard = ({
@@ -21,6 +24,7 @@ const ProductCard = ({
   buttonText = 'Buy Now',
   imageSrc,
   isNotSell,
+  isSingleButton,
 }: ProductCardProps) => {
   if (isNotSell) {
     return <div className={`${s.productCardWarpper} ${s.notSell}`}>
@@ -34,7 +38,7 @@ const ProductCard = ({
       <div className={s.cardTop}>
         <Link href={`${ROUTE.PRODUCT_DETAIL}/test`}>
           <div className={s.productImage}>
-            <img src={imageSrc} alt="image" />
+            <ImgWithLink src={imageSrc} alt={name}/>
           </div>
         </Link>
         <div className={s.productLabel}>
@@ -56,12 +60,22 @@ const ProductCard = ({
         </div>
       </div>
       <div className={s.cardBot}>
-        <div className={s.cardIcon}>
+        {
-          <ButtonIconBuy />
+          isSingleButton ?
-        </div>
+            <div className={s.cardButton}>
-        <div className={s.cardButton}>
+              <ButtonCommon type="light" icon={<IconBuy />}>Add to cart</ButtonCommon>
-          <ButtonCommon type="light">{buttonText}</ButtonCommon>
+            </div>
-        </div>
+            :
+            <>
+              <div className={s.cardIcon}>
+                <ButtonIconBuy />
+              </div>
+              <div className={s.cardButton}>
+                <ButtonCommon type="light">{buttonText}</ButtonCommon>
+              </div>
+            </>
+        }
+
       </div>
     </div>
   )

src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss

@@ -1,8 +1,12 @@
 @import "../../../../styles/utilities";
 
 .imgWrap {
-    img {
+    > div {
-        opacity: 0.5;
+        min-height: 13rem;
+        img {
+            opacity: 0.5;
+            object-fit: contain
+        }
     }
 }
 
@@ -11,7 +15,7 @@
 }
 
 .info {
-    @apply flex justify-center items-center custom-border-radius bg-info-light text-center;
+    @apply flex justify-center items-center shape-common bg-info-light text-center;
     padding: .8rem 1.6rem;
     margin-top: 1.6rem;
     color: var(--info);

src/components/common/ProductCarousel/ProductCarousel.tsx

@@ -7,9 +7,9 @@ import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'
 import s from "./ProductCarousel.module.scss"
 
 interface ProductCarouselProps
-  extends Omit<CarouselCommonProps<ProductCardProps>, 'Component'|"option"> {
+  extends Omit<CarouselCommonProps<ProductCardProps>, 'Component' | "option"> {
-		option?:TOptionsEvents
+  option?: TOptionsEvents
-	}
+}
 
 const OPTION_DEFAULT: TOptionsEvents = {
   slidesPerView: 2,
@@ -19,11 +19,15 @@ const OPTION_DEFAULT: TOptionsEvents = {
       slidesPerView: 3,
     },
     '(min-width: 768px)': {
-      slidesPerView: 4,
+      slidesPerView: 3,
     },
-    '(min-width: 1024px)': {
+    '(min-width: 1008px)': {
+      slidesPerView: 3.5,
+    },
+    '(min-width: 1280px)': {
       slidesPerView: 4.5,
-    },'(min-width: 1280px)': {
+    },
+    '(min-width: 1440px)': {
       slidesPerView: 5.5,
     },
   },

src/components/common/RecipeCard/RecipeCard.tsx

@@ -1,19 +1,24 @@
 import Link from 'next/link'
 import React from 'react'
+import { ROUTE } from 'src/utils/constanst.utils'
 import { RecipeProps } from 'src/utils/types.utils'
 import s from './RecipeCard.module.scss'
-export interface RecipeCardProps extends RecipeProps {}
+export interface RecipeCardProps extends RecipeProps { }
 
-const RecipeCard = ({ imageSrc, title, description }: RecipeCardProps) => {
+const RecipeCard = ({ imageSrc, title, description, slug }: RecipeCardProps) => {
   return (
     <div className={s.recipeCardWarpper}>
-      <Link href="#">
+      <Link href={`${ROUTE.RECIPE_DETAIL}/${slug}`}>
-        <div className={s.image}>
+        <a>
-          <img src={imageSrc} alt="image recipe" />
+          <div className={s.image}>
-        </div>
+            <img src={imageSrc} alt="image recipe" />
+          </div>
+        </a>
       </Link>
-      <Link href="#">
+      <Link href={`${ROUTE.RECIPE_DETAIL}/${slug}`}>
-        <div className={s.title}>{title}</div>
+        <a>
+          <div className={s.title}>{title}</div>
+        </a>
       </Link>
       <div className={s.description}>{description}</div>
     </div>

src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss

@@ -2,13 +2,16 @@
 
 .recipeDetailInfo {
     @apply spacing-horizontal;
-    margin: 5.6rem auto;
+    margin: 0 auto 5.6rem;
     @screen md {
         @apply flex;
+        margin: 5.6rem auto;
     }
+
     .img {
-        width: fit-content;
+        width: 100%;
         margin-top: 0;
+        min-height: 50rem;
 
         @screen sm-only {
             margin-bottom: 2rem;
@@ -16,13 +19,16 @@
         @screen lg {
             max-width: 60rem;
         }
-        img {
+        > div {
-            @apply w-full;
+            min-height: 64rem;
-            object-fit: contain;
+            img {
-            max-height: 64rem;
+                // object-fit: contain;
-            border-radius: 2.4rem;
+            //     @apply w-full;
-            @screen md {
+                min-height: 64rem;
-                max-height: 90rem;
+                border-radius: 2.4rem;
+            //     @screen md {
+            //         max-height: 90rem;
+            //     }
             }
         }
     }
@@ -55,6 +61,9 @@
                     list-style: disc;
                     margin-left: 2rem;
                 }
+                a {
+                    color: var(--info);
+                }
             }
         }
     }

src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { ImgWithLink } from 'src/components/common'
 import RecipeBriefInfo from '../RecipeBriefInfo/RecipeBriefInfo'
 import s from './RecipeDetailInfo.module.scss'
 
@@ -12,7 +13,7 @@ const RecipeDetailInfo = ({ }: Props) => {
     return (
         <section className={s.recipeDetailInfo}>
             <div className={s.img}>
-                <img src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="Recipe" />
+                <ImgWithLink src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="Recipe" />
             </div>
             <div className={s.recipeInfo}>
                 <div className={s.top}>

src/components/common/RecommendedRecipes/RecommendedRecipes.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/utilities";
+@import "../../../styles/utilities";
 
 .recommendedRecipes {
     margin: 6rem auto;

src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx

@@ -1,6 +1,3 @@
-import image15 from '../../../../public/assets/images/image15.png'
-import image16 from '../../../../public/assets/images/image16.png'
-import image17 from '../../../../public/assets/images/image17.png'
 import classNames from 'classnames'
 import React from 'react'
 import {  HeadingCommon, ViewAllItem } from 'src/components/common'
@@ -22,32 +19,32 @@ const recipe:BlogCardProps[] = [
     title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
     slug: 'have-a-nice-lunch',
     description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
-    imageSrc: image15.src,
+    imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
 },{
     title: "9 Ways to Make an Aloe Vera Mask at Home",
     slug: 'have-a-nice-lunch',
     description:"Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
-    imageSrc: image16.src,
+    imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
 },{
     title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
     slug: 'have-a-nice-lunch',
     description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
-    imageSrc: image17.src,
+    imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
 },{
     title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
     slug: 'have-a-nice-lunch',
     description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
-    imageSrc: image15.src,
+    imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
 },{
     title: "9 Ways to Make an Aloe Vera Mask at Home",
     slug: 'have-a-nice-lunch',
     description:"Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
-    imageSrc: image16.src,
+    imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
 },{
     title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
     slug: 'have-a-nice-lunch',
     description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
-    imageSrc: image17.src,
+    imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
 }]
 
   const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => {

src/components/common/SelectCommon/SelectCommon.module.scss

@@ -28,7 +28,7 @@
     }
     &.custom {
         .selectTrigger {
-            @apply border-2;
+            border-width: 1px;
             border-color: var(--border-line);
             color: var(--text-label);
         }
@@ -68,7 +68,7 @@
             @apply border-solid border border-current;
         }
         &.custom {
-            @apply border-2;
+            border-width: 1px;
             border-color: var(--border-line);
             color: var(--text-label);
         }

src/components/common/index.ts

@@ -46,3 +46,4 @@ export { default as TabCommon} from './TabCommon/TabCommon'
 export { default as StaticImage} from './StaticImage/StaticImage'
 export { default as EmptyCommon} from './EmptyCommon/EmptyCommon'
 export { default as CustomShapeSvg} from './CustomShapeSvg/CustomShapeSvg'
+export { default as RecommendedRecipes} from './RecommendedRecipes/RecommendedRecipes'

src/components/icons/IconNoti.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconNoti = () => {
+    return (
+        <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M17.0003 13.3763V9.66634C16.9986 8.01332 16.412 6.41422 15.3444 5.15224C14.2767 3.89027 12.7969 3.04684 11.167 2.77134V1.49967C11.167 1.19026 11.0441 0.893509 10.8253 0.674717C10.6065 0.455924 10.3097 0.333008 10.0003 0.333008C9.6909 0.333008 9.39416 0.455924 9.17537 0.674717C8.95657 0.893509 8.83366 1.19026 8.83366 1.49967V2.77134C7.20375 3.04684 5.72394 3.89027 4.65627 5.15224C3.58861 6.41422 3.002 8.01332 3.00033 9.66634V13.3763C2.31952 13.617 1.72982 14.0624 1.31209 14.6514C0.89435 15.2404 0.669022 15.9442 0.666992 16.6663V18.9997C0.666992 19.3091 0.789909 19.6058 1.0087 19.8246C1.22749 20.0434 1.52424 20.1663 1.83366 20.1663H5.49699C5.76566 21.1549 6.35216 22.0277 7.16602 22.6499C7.97988 23.2721 8.97587 23.6092 10.0003 23.6092C11.0248 23.6092 12.0208 23.2721 12.8346 22.6499C13.6485 22.0277 14.235 21.1549 14.5037 20.1663H18.167C18.4764 20.1663 18.7732 20.0434 18.9919 19.8246C19.2107 19.6058 19.3337 19.3091 19.3337 18.9997V16.6663C19.3316 15.9442 19.1063 15.2404 18.6886 14.6514C18.2708 14.0624 17.6811 13.617 17.0003 13.3763ZM5.33366 9.66634C5.33366 8.42866 5.82532 7.24168 6.70049 6.36651C7.57566 5.49134 8.76265 4.99967 10.0003 4.99967C11.238 4.99967 12.425 5.49134 13.3002 6.36651C14.1753 7.24168 14.667 8.42866 14.667 9.66634V13.1663H5.33366V9.66634ZM10.0003 21.333C9.59313 21.3305 9.19366 21.2216 8.84163 21.0169C8.48959 20.8122 8.19725 20.519 7.99366 20.1663H12.007C11.8034 20.519 11.5111 20.8122 11.159 21.0169C10.807 21.2216 10.4075 21.3305 10.0003 21.333ZM17.0003 17.833H3.00033V16.6663C3.00033 16.3569 3.12324 16.0602 3.34203 15.8414C3.56083 15.6226 3.85757 15.4997 4.16699 15.4997H15.8337C16.1431 15.4997 16.4398 15.6226 16.6586 15.8414C16.8774 16.0602 17.0003 16.3569 17.0003 16.6663V17.833Z" fill="#5B9A74" />
+        </svg>
+    )
+}
+
+export default IconNoti

src/components/icons/index.ts

@@ -33,3 +33,4 @@ export { default as IconMinus } from './IconMinus'
 export { default as IconCirclePlus } from './IconCirclePlus'
 export { default as IconDoneCheckout } from './IconDoneCheckout'
 export { default as IconFilter } from './IconFilter'
+export { default as IconNoti } from './IconNoti'

src/components/modules/blogs/BlogsList/BlogsList.tsx

@@ -3,12 +3,6 @@ import CardBlog, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog
 import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
 import s from "./BlogsList.module.scss"
 import { DEFAULT_BLOG_PAGE_SIZE } from 'src/utils/constanst.utils'
-import image15 from '../../../../../public/assets/images/image15.png'
-import image16 from '../../../../../public/assets/images/image16.png'
-import image17 from '../../../../../public/assets/images/image17.png'
-import image21 from '../../../../../public/assets/images/image21.png'
-import image22 from '../../../../../public/assets/images/image22.png'
-import image23 from '../../../../../public/assets/images/image23.png'
 
 interface BlogsListProps {
     data?: BlogCardProps[],
@@ -16,109 +10,109 @@ interface BlogsListProps {
 
 const BLOGSLIST_DATA = [
     {
-      imageSrc: image15.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
       title: "1",
       description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image16.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
       title: "2",
       description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image17.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
       title: "3",
       description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image21.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186410-d8718d90-82fb-46cb-a0f2-0ec96356ae89.png",
       title: "4",
       description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image22.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186474-b2d89bbc-32ed-4174-a05e-3d388c0a39ff.png",
       title: "5",
       description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image23.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186545-d860f4ee-222c-4d72-a876-808af0f397a0.png",
       title: "6",
       description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image15.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
       title: "7",
       description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image16.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
       title: "8",
       description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image17.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
       title: "9",
       description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image23.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186545-d860f4ee-222c-4d72-a876-808af0f397a0.png",
       title: "10",
       description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image21.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186410-d8718d90-82fb-46cb-a0f2-0ec96356ae89.png",
       title: "11",
       description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image22.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186474-b2d89bbc-32ed-4174-a05e-3d388c0a39ff.png",
       title: "12",
       description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image15.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
       title: "13",
       description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image16.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
       title: "14",
       description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image17.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
       title: "15",
       description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image21.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186410-d8718d90-82fb-46cb-a0f2-0ec96356ae89.png",
       title: "16",
       description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image23.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186545-d860f4ee-222c-4d72-a876-808af0f397a0.png",
       title: "17",
       description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image22.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186474-b2d89bbc-32ed-4174-a05e-3d388c0a39ff.png",
       title: "18",
       description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
       slug: "happy-diet"

src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss

@@ -11,13 +11,15 @@
     }
 }
 .left {
-    max-width: 59.8rem;
+    > div{
-    img {
+        min-width: 59.8rem;
-        border-radius: 2.4rem;
+        min-height: 33.6rem;
+        img {
+            border-radius: 2.4rem;
+        }
     }
 }
 .right {
-    flex-shrink: 3;
     @screen lg {
         margin-left: 6.4rem;
     }

src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx

@@ -1,14 +1,11 @@
 import s from './FeaturedCardBlog.module.scss'
-import { Author, DateTime } from 'src/components/common'
+import { Author, DateTime, ImgWithLink } from 'src/components/common'
-import Image from "next/image";
-import image20 from '../../../../../public/assets/images/image20.png'
-import author from '../../../../../public/assets/images/author.png'
 
 interface FeaturedCardBlogProps{
     title?: string,
     content?: string,
-    imgSrc?: any,
+    imgSrc?: string,
-    imgAuthor?: any,
+    imgAuthor?: string,
     date?: string,
     authorName?: string,
 }
@@ -16,8 +13,8 @@ interface FeaturedCardBlogProps{
 const FEATURED_DATA = {
     title: "Flammekueche with green asparagus",
     content: "Traditionally, the Flammekueche is made with rapeseed oil, which, contrary to popular belief, is indeed an oil that can be cooked hot and is not limited to seasoning. It is important to vary the oils in the kitchen to take advantage of the benefits of each. Rapeseed oil is an oil rich in omega 3 which participate in the proper functioning of the cardiovascular system as well as in vitamins E which contributes to the protection of cells against oxidative stress. In short, oils are your friends 😉",
-    imgSrc: image20,
+    imgSrc: "https://user-images.githubusercontent.com/46085455/133186666-1ea8081f-4319-4617-8644-d20ed14b1825.png",
-    imgAuthor: author.src,
+    imgAuthor: "https://user-images.githubusercontent.com/46085455/133186783-d0c71d43-b7bc-44b6-b560-818c71bd162f.png",
     date: "APRIL 30, 2021",
     author: "Alessandro Del Piero"
 }
@@ -34,7 +31,7 @@ const FeaturedCardBlog = ({
         <section className={s.featuredCard}>
             <div className={s.featuredCardWrapper}>
                 <div className={s.left}>
-                    <Image src={imgSrc} alt="image feature card"/>
+                    <ImgWithLink src={imgSrc} alt="image feature card"/>
                 </div>
                 <div className={s.right}>
                     <div className={s.titleWrapper}>

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

@@ -11,14 +11,14 @@
     @apply grid;
     grid-template-columns: 1fr 1.8fr;
     .left {
-      @apply relative flex items-end justify-center custom-border-radius-lg;
+      @apply relative flex items-end justify-center shape-common-lg;
       margin-right: 1.6rem;
       .imgWrap {
         @apply absolute w-full h-full;
         top: 0;
         left: 0;
         > div {
-          @apply w-full h-full custom-border-radius-lg;
+          @apply w-full h-full shape-common-lg;
         }
         img {
           object-fit: cover;

src/components/modules/home/HomeBanner/HomeBanner.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { Banner } from 'src/components/common'
+import { Banner, StaticImage } from 'src/components/common'
+import { ROUTE } from 'src/utils/constanst.utils'
 import BannerImgRight from './assets/banner_full.png'
 import HomeBannerImg from './assets/home_banner.png'
 import s from './HomeBanner.module.scss'
-import Image from 'next/image'
 
 interface Props {
     className?: string
@@ -15,7 +15,7 @@ const HomeBanner = ({ }: Props) => {
         <div className={s.homeBanner}>
             <section className={s.left}>
                 <div className={s.imgWrap}>
-                    <Image src={HomeBannerImg} placeholder='blur' />
+                    <StaticImage src={HomeBannerImg} />
                 </div>
                 <div className={s.text}>
                     Freshness<br />guaranteed
@@ -28,12 +28,14 @@ const HomeBanner = ({ }: Props) => {
                         subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
                         imgLink: BannerImgRight.src,
                         size: "small",
+                        linkButton: ROUTE.PRODUCTS,
                     },
                     {
                         title: "Save 15% on your first order 2",
                         subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
                         imgLink: BannerImgRight.src,
                         size: "small",
+                        linkButton: ROUTE.PRODUCTS,
                     }
                     ]
                 }

src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.module.scss

@@ -2,7 +2,7 @@
 
 .categoryItem {
     .categoryItemImage {
-        @apply transition-all duration-200;
+        @apply flex justify-center items-center transition-all duration-200;
         width: 10.6rem;
         margin: 0 auto;
         max-height: 14rem;

src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.tsx

@@ -4,6 +4,7 @@ import s from './CategoryItem.module.scss'
 import classNames from 'classnames';
 import Image from "next/image";
 import Link from 'next/link';
+import { StaticImage } from 'src/components/common';
 
 interface CategoryItem {
     image: StaticImageData,
@@ -17,7 +18,7 @@ const CategoryItem = ({ image, name, link }: CategoryItem) => {
             <div className={classNames(s.categoryItemImage)}>
                 <Link href={link}>
                     <a>
-                        <Image src={image} />
+                        <StaticImage src={image} />
                     </a>
                 </Link>
             </div>

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

@@ -4,7 +4,7 @@
     margin: 3rem auto;
 
     .inner {
-        @apply relative spacing-horizontal;
+        @apply relative spacing-horizontal w-full;
 
         padding-top: 1.6rem;
         padding-bottom: 1.6rem;
@@ -15,7 +15,7 @@
     }
     @screen md {
         @apply relative;
-        margin: 5.6rem auto;
+        margin: 12.8rem auto;
 
         &::before,
         &::after {

src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.module.scss

@@ -0,0 +1,8 @@
+.productImgItem {
+    @apply w-full h-full;
+    min-height: 30rem;
+    img {
+        object-fit: contain;
+    }
+}
+

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

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ImgWithLink } from 'src/components/common'
+import s from './ProductImgItem.module.scss'
+
+export interface ProductImgItemProps {
+    src: string
+    alt?: string
+}
+
+
+const ProductImgItem = ({ src, alt }: ProductImgItemProps) => {
+    return (
+        <section className={s.productImgItem}>
+            <ImgWithLink src={src} alt={alt} />
+        </section >
+    )
+}
+
+export default ProductImgItem

src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss

@@ -6,4 +6,7 @@
     @screen lg {
         max-width: 60rem;
     }
+    > div {
+        width: 100%;
+    }
 }

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import { CarouselCommon, ImgWithLink } from 'src/components/common'
+import { CarouselCommon } from 'src/components/common'
-import { ImgWithLinkProps } from 'src/components/common/ImgWithLink/ImgWithLink'
+import ProductImgItem, { ProductImgItemProps } from '../ProductImgItem/ProductImgItem'
 import s from './ProductImgs.module.scss'
 
 interface Props {
@@ -9,6 +9,10 @@ interface Props {
 }
 
 const DATA = [
+    {
+        src: 'https://user-images.githubusercontent.com/76729908/133026929-199799fc-bd75-4445-a24d-15c0e41796eb.png',
+        alt: 'Meat',
+    },
     {
         src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
         alt: 'Broccoli',
@@ -26,10 +30,10 @@ const option = {
 const ProductImgs = ({ }: Props) => {
     return (
         <section className={s.productImgs}>
-            <CarouselCommon<ImgWithLinkProps>
+            <CarouselCommon<ProductImgItemProps>
                 data={DATA}
                 itemKey="product-detail-img"
-                Component={ImgWithLink}
+                Component={ProductImgItem}
                 option={option}
                 isDot={true}
             />
@@ -38,3 +42,4 @@ const ProductImgs = ({ }: Props) => {
 }
 
 export default ProductImgs
+

src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss

@@ -64,6 +64,12 @@
                     margin-left: 0.8rem;
                 }
             }
+            svg {
+                height: 2rem;
+                path {
+                    fill: currentColor;
+                }
+            }
         }
         button {
             @apply w-full;

src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx

@@ -8,6 +8,7 @@ const ViewedProducts = () => {
             title="viewed Products"
             subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
             data={PRODUCT_DATA_TEST}
+            hasBorderBottomMobile={true}
         />
     );
 };

src/components/modules/product-detail/index.ts

@@ -1,4 +1,3 @@
 export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail'
 export { default as ViewedProducts } from './ViewedProducts/ViewedProducts'
 export { default as ReleventProducts } from './ReleventProducts/ReleventProducts'
-export { default as RecommendedRecipes } from './RecommendedRecipes/RecommendedRecipes'

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

src/styles/_pages.scss

@@ -0,0 +1,6 @@
+.page-recipe-detail {
+    margin-bottom: 5.4rem;
+    @screen lg {
+        margin-bottom: 12.8rem;
+    }
+}

src/styles/_utilities.scss

@@ -121,12 +121,13 @@
 
     .shape-common-border {
         position: relative;
-        $border: 2px;
+        $border: 1px;
         margin: $border;
 
         .inner {
             background: var(--white);
             clip-path: url(#svg-custom-shape);
+            margin: 1px;
         }
         &::before {
             position: absolute;
@@ -152,6 +153,7 @@
 
         .inner {
             padding: 2rem;
+            margin: 1px;
             clip-path: url(#svg-custom-shape-lg);
         }
         &::before {

src/styles/main.scss

@@ -5,3 +5,5 @@
 
 @import "~tailwindcss/utilities";
 @import './utilities';
+
+@import './pages'

src/utils/constanst.utils.ts

@@ -9,19 +9,25 @@ export const SOCIAL_LINKS = {
 
 export const ROUTE = {
     HOME: '/',
+    ABOUT: '/about',
+    ACCOUNT: '/account',
+
     PRODUCTS: '/products',
     PRODUCT_DETAIL: '/product',
-    ABOUT: '/about',
+    
+    BLOGS: '/blogs',
     BLOG_DETAIL: '/blog',
-    ACCOUNT: '/account',
+
     RECIPES: '/recipes',
+    RECIPE_DETAIL: '/recipe',
+
     BUSSINESS: '/bussiness',
     CONTACT: '/contact',
+    CHECKOUT: '/checkout',
     FAQ: '/faq',
     CUSTOMER_SERVICE: '/customer-service',
     TERM_CONDITION: '/term-condition',
     PRIVACY_POLICY: '/privacy-policy',
-    BLOGS: '/blogs',
     FORGOT_PASSWORD: '/forgot-password'
 }
 
@@ -29,6 +35,7 @@ export const ACCOUNT_TAB = {
     CUSTOMER_INFO: '',
     ORDER: 'orders',
     FAVOURITE: 'wishlist',
+    NOTIFICATION: 'notification',
 }
 
 export const QUERY_KEY = {
@@ -117,3 +124,14 @@ export const FEATURED = [
   ]
   
 export const DEFAULT_BLOG_PAGE_SIZE=6;
+
+export const STATE_OPTIONS = [
+  {
+    name: 'Hồ Chí Minh',
+    value: 'Hồ Chí Minh',
+  },
+  {
+    name: 'Hà Nội',
+    value: 'Hà Nội',
+  },
+]

src/utils/funtion.utils.ts

@@ -1,5 +1,5 @@
 export function isMobile() {
-    return window.innerWidth <= 768
+    return window.innerWidth < 768
 }
 
 export function removeItem<T>(arr: Array<T>, value: T): Array<T> { 

tailwind.config.js

@@ -106,9 +106,6 @@ module.exports = {
       fontSize: {
         base: ['16px', '24px'],
       },
-      borderRadius: {
-        rounded: '.8rem',
-      },
       screens: {
         'sm-only': {'min': '0', 'max': '767px'},
         'sm': '640px',