🔀 merge: branch 'common' of https://github.com/KieIO/grocery-vercel-commerce into m4-quangnhan

:%s
2025-07-22 20:26:49 +00:00 · 2021-09-08 16:45:47 +07:00
parent a3a185cc19 eba1ef10f8
commit f8d1910a04
229 changed files with 1143 additions and 5453 deletions
--- a/src/components/common/CardBlog/CardBlog.module.scss
+++ b/src/components/common/CardBlog/CardBlog.module.scss
@@ -0,0 +1,34 @@
+@import "../../../styles/utilities";
+
+.cardBlogWarpper {
+    @apply inline-flex flex-col justify-start;
+    max-width: 39.2rem;
+    min-height: 34.4rem;
+    .image {
+        width: 100%;
+        max-height: 22rem;
+        border-radius: 2.4rem;
+        &:hover {
+            cursor: pointer;
+        }
+    }
+    .title {
+        padding: 1.6rem 0.8rem 0.4rem 0.8rem;
+        @apply font-bold;
+        font-size: 2rem;
+        line-height: 2.8rem;
+        letter-spacing: -0.01em;
+        color: var(--text-active);
+        &:hover {
+            cursor: pointer;
+        }
+    }
+    .description {
+        padding: 0 0.8rem;
+        @apply overflow-hidden overflow-ellipsis ;
+        color: var(--text-label);
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+    }
+}
--- a/src/components/common/CardBlog/CardBlog.tsx
+++ b/src/components/common/CardBlog/CardBlog.tsx
@@ -0,0 +1,31 @@
+import Link from 'next/link'
+import React from 'react'
+import { ROUTE } from 'src/utils/constanst.utils'
+import { BlogProps } from 'src/utils/types.utils'
+import s from './CardBlog.module.scss'
+export interface BlogCardProps extends BlogProps {
+  // todo: edit when intergrate API
+
+}
+
+const CardBlog = ({ imageSrc, title, description, slug }: BlogCardProps) => {
+  return (
+    <div className={s.cardBlogWarpper}>
+      <Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
+        <a>
+          <div className={s.image}>
+            <img src={imageSrc} alt="image cardblog" />
+          </div>
+        </a>
+      </Link>
+      <Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
+        <a>
+          <div className={s.title}>{title}</div>
+        </a>
+      </Link>
+      <div className={s.description}>{description}</div>
+    </div>
+  )
+}
+
+export default CardBlog
--- a/src/components/common/CarouselCommon/CarouselCommon.module.scss
+++ b/src/components/common/CarouselCommon/CarouselCommon.module.scss
@@ -8,6 +8,7 @@
  :global(.customArrow) {
    width: 64px;
    height: 64px;
+	border-radius: .8rem;
    &:focus {
      outline: none;
    }
--- a/src/components/common/CarouselCommon/CarouselCommon.tsx
+++ b/src/components/common/CarouselCommon/CarouselCommon.tsx
@@ -28,7 +28,6 @@ const CarouselCommon = <T,>({
  option: { slideChanged,slidesPerView, ...sliderOption },
 }: CarouselCommonProps<T>) => {
  const [currentSlide, setCurrentSlide] = React.useState(0)
-  // const [dotActive, setDotActive] = React.useState<number>(0)
  const [dotArr, setDotArr] = React.useState<number[]>([])
  const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
    ...sliderOption,
--- a/src/components/common/CartDrawer/CartDrawer.module.scss
+++ b/src/components/common/CartDrawer/CartDrawer.module.scss
@@ -0,0 +1,12 @@
+@import '../../../styles/utilities';
+
+
+.cartDrawer {
+    @apply flex flex-col h-full;
+    .body {
+        @apply overflow-y-auto overflow-x-hidden h-full custom-scroll;
+    }
+    .bottom {
+        padding-top: 1.6rem;
+    }
+}
--- a/src/components/common/CartDrawer/CartDrawer.tsx
+++ b/src/components/common/CartDrawer/CartDrawer.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data';
+import { DrawerCommon } from '..';
+import s from './CartDrawer.module.scss';
+import CartCheckoutButton from './components/CartCheckoutButton/CartCheckoutButton';
+import CartMessage from './components/CartMessage/CartMessage';
+import CartRecommendation from './components/CartRecommendation/CartRecommendation';
+import ProductsInCart from './components/ProductsInCart/ProductsInCart';
+
+interface Props {
+  visible: boolean
+  onClose: () => void
+}
+
+const CartDrawer = ({ visible, onClose }: Props) => {
+  return (
+    <DrawerCommon
+      title={`Your cart (${PRODUCT_CART_DATA_TEST.length})`}
+      visible={visible}
+      onClose={onClose}>
+      <div className={s.cartDrawer}>
+        <div className={s.body}>
+          <ProductsInCart data={PRODUCT_CART_DATA_TEST}/>
+          <CartRecommendation />
+        </div>
+        <div className={s.bottom}>
+          <CartMessage />
+          <CartCheckoutButton />
+        </div>
+      </div>
+    </DrawerCommon>
+  )
+}
+
+export default CartDrawer;
--- a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss
+++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss
@@ -0,0 +1,6 @@
+.cartCheckoutButton {
+    padding: 1.6rem;
+    button {
+        width: 100%;
+    }
+}
--- a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx
+++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx
@@ -0,0 +1,13 @@
+import React, { memo } from 'react';
+import { ButtonCommon } from 'src/components/common';
+import s from './CartCheckoutButton.module.scss';
+
+const CartCheckoutButton = memo(() => {
+  return (
+    <div className={s.cartCheckoutButton}>
+      <ButtonCommon size='large'>Check out - Rp 120.500</ButtonCommon>
+    </div>
+  )
+})
+
+export default CartCheckoutButton;
--- a/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss
+++ b/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss
@@ -0,0 +1,16 @@
+@import "../../../../../styles/utilities";
+
+.cartMessage {
+    @apply flex bg-info;
+    padding: 1.2rem 1.6rem;
+    .text {
+        color: var(--white);
+        font-weight: bold;
+        margin-right: 0.8rem;
+    }
+    .icon {
+        svg path {
+            fill: var(--text-placeholder);
+        }
+    }
+}
--- a/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx
+++ b/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx
@@ -0,0 +1,18 @@
+import React, { memo } from 'react';
+import { IconInfo } from 'src/components/icons';
+import s from './CartMessage.module.scss';
+
+const CartMessage = memo(() => {
+  return (
+    <div className={s.cartMessage}>
+      <div className={s.text}>
+        You save - Rp 150
+      </div>
+      <div className={s.icon}>
+        <IconInfo />
+      </div>
+    </div>
+  )
+})
+
+export default CartMessage;
--- a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
+++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
@@ -0,0 +1,26 @@
+@import '../../../../../styles/utilities';
+
+.cartRecommendation {
+    @apply w-full bg-background-gray;
+    .top {
+        @apply flex justify-between items-center;
+        padding: 1.6rem;
+        .heading {
+            @apply font-bold text-active sm-headline;
+        }
+    }
+    .productCardWarpper {
+        padding-left: 1.6rem;
+        :global(.customArrow) {
+            @apply bg-line;
+            @screen lg {
+                &:global(.leftArrow) {
+                    left: calc(-6.4rem - 2rem);
+                }
+                &:global(.rightArrow) {
+                    right: calc(-6.4rem - 2rem);
+                }
+            }
+        }
+    }
+}
--- a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx
+++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx
@@ -0,0 +1,43 @@
+import { TOptionsEvents } from 'keen-slider';
+import React from 'react';
+import { CarouselCommon, ViewAllItem } from 'src/components/common';
+import ProductCard, { ProductCardProps } from 'src/components/common/ProductCard/ProductCard';
+import { ROUTE } from 'src/utils/constanst.utils';
+import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
+import s from './CartRecommendation.module.scss';
+
+const option: TOptionsEvents = {
+  slidesPerView: 2,
+  mode: 'free',
+  breakpoints: {
+    '(min-width: 640px)': {
+      slidesPerView: 1,
+    },
+    '(min-width: 768px)': {
+      slidesPerView: 2.5,
+    }
+  },
+}
+
+const CartRecommendation = () => {
+  return (
+    <div className={s.cartRecommendation}>
+      <div className={s.top}>
+        <div className={s.heading}>
+          Recommendation
+        </div>
+        <ViewAllItem link={ROUTE.PRODUCTS} />
+      </div>
+      <div className={s.productCardWarpper}>
+        <CarouselCommon<ProductCardProps>
+          data={PRODUCT_DATA_TEST}
+          Component={ProductCard}
+          itemKey="cart-recommendation"
+          option={option}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default CartRecommendation;
--- a/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss
+++ b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss
@@ -0,0 +1,54 @@
+@import "../../../../../styles/utilities";
+
+.productCartItem {
+    @apply grid;
+    grid-template-columns: 2fr 1fr;
+    padding-bottom: 1.6rem;
+    padding-top: 1.6rem;
+    .info {
+        @apply flex;
+        .imgWrap {
+            width: 11rem;
+            height: 7.5rem;
+            margin-right: 1.6rem;
+            img {
+                object-fit: contain;
+            }
+        }
+        .detail {
+            min-height: 9rem;
+            .name {
+                &:hover {
+                    color: var(--primary);
+                }
+            }
+            .price {
+                margin-top: 0.8rem;
+                .old {
+                    margin-bottom: 0.8rem;
+                    .number {
+                        margin-right: 0.8rem;
+                        color: var(--text-label);
+                        text-decoration: line-through;
+                    }
+                }
+                .current {
+                    @apply text-active font-bold sm-headline;
+                }
+            }
+        }
+    }
+
+    .actions {
+        @apply flex flex-col justify-between items-end;
+        margin-left: 1.6rem;
+        .iconDelete {
+            @apply cursor-pointer;
+            &:hover {
+                svg path {
+                    fill: var(--negative);
+                }
+            }
+        }
+    }
+}
--- a/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx
+++ b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Link from 'next/link'
+import { QuanittyInput } from 'src/components/common';
+import { IconDelete } from 'src/components/icons';
+import { ROUTE } from 'src/utils/constanst.utils';
+import { ProductProps } from 'src/utils/types.utils';
+import ImgWithLink from '../../../ImgWithLink/ImgWithLink';
+import LabelCommon from '../../../LabelCommon/LabelCommon';
+import s from './ProductCartItem.module.scss';
+
+export interface ProductCartItempProps extends ProductProps {
+  quantity: number,
+}
+
+const ProductCartItem = ({ name, slug, weight, price, oldPrice, discount, imageSrc, quantity }: ProductCartItempProps) => {
+  return (
+    <div className={s.productCartItem}>
+      <div className={s.info}>
+        <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
+          <a href="">
+            <div className={s.imgWrap}>
+              <ImgWithLink src={imageSrc} alt={name} />
+            </div>
+          </a>
+        </Link>
+        <div className={s.detail}>
+          <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
+            <a>
+              <div className={s.name}>
+                {name} {weight ? `(${weight})` : ''}
+              </div>
+            </a>
+          </Link>
+          <div className={s.price}>
+            {
+              oldPrice &&
+              <div className={s.old}>
+                <span className={s.number}>{oldPrice}</span>
+                <LabelCommon type='discount'>{discount}</LabelCommon>
+              </div>
+            }
+            <div className={s.current}>{price}</div>
+          </div>
+        </div>
+      </div>
+      <div className={s.actions}>
+        <div className={s.iconDelete}>
+          <IconDelete />
+        </div>
+        <QuanittyInput size='small' initValue={quantity} />
+      </div>
+    </div>
+  )
+}
+
+export default ProductCartItem;
--- a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss
+++ b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss
@@ -0,0 +1,9 @@
+.productsInCart {
+    padding: 1.6rem 1.6rem 0 1.6rem;
+    list-style: none;
+    li {
+        &:not(:last-child) {
+            border-bottom: 1px solid var(--border-line);
+        }
+    }
+}
--- a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx
+++ b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import ProductCartItem, { ProductCartItempProps } from '../ProductCartItem/ProductCartItem';
+import s from './ProductsInCart.module.scss';
+
+interface Props {
+  data: ProductCartItempProps[]
+}
+
+const ProductsInCart = ({ data }: Props) => {
+  return (
+    <ul className={s.productsInCart}>
+      {
+        data.map(item => <li key={item.name}>
+          <ProductCartItem
+            name={item.name}
+            slug={item.slug}
+            weight={item.weight}
+            price={item.price}
+            oldPrice={item.oldPrice}
+            discount={item.discount}
+            imageSrc={item.imageSrc}
+            quantity={item.quantity}
+          />
+        </li>)
+      }
+    </ul>
+  )
+}
+
+export default ProductsInCart;
--- a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss
@@ -0,0 +1,66 @@
+@import "../../../../styles/utilities";
+
+.collapseWrapper {
+    @apply border-t border-b;
+    border-color: var(--border-line);
+    max-width: 80.4rem;
+    min-height: 4rem;
+    &.isActive {
+        .title {
+            @apply pb-0;
+        }
+        .contentContainer {
+            @apply block;
+            animation: ContentAnimationIn 0.5s ease-out;
+        }
+        .toggle {
+            &:before {
+                transform: rotate(180deg);
+            }
+            &:after {
+                transform: rotate(180deg);
+            }
+        }
+    }
+    &:hover {
+        cursor: pointer;
+    }
+}
+.title {
+    @apply outline-none flex justify-between font-heading items-center pt-16 pb-16;
+    font-size: 3.2rem;
+    line-height: 4rem;
+    letter-spacing: -0.01em;
+    .toggle {
+        height: 2.2rem;
+        width: 2.2rem;
+        position: relative;
+        &:before,
+        &:after {
+            @apply absolute h-2;
+            content: "";
+            border-radius: 0.8rem;
+            background: var(--text-active);
+            top: 40%;
+            width: 2.2rem;
+            transition: transform 500ms ease;
+        }
+        &:before {
+            transform-origin: center;
+            transform: rotate(90deg);
+        }
+    }
+}
+.contentContainer {
+    @apply hidden pb-16;
+}
+@keyframes ContentAnimationIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-1.6rem);
+    }
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
--- a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx
@@ -0,0 +1,37 @@
+import s from './CollapseChild.module.scss'
+import { useState } from 'react'
+import classNames from 'classnames'
+import CollapseContent from './CollapseContent/CollapseContent'
+
+interface CollapseProps{
+    title?: string,
+    content: Array<string>,
+    isToggle?: boolean,
+}
+const CollapseChild = ({title, content, isToggle=false}: CollapseProps) => {
+    const [isActive, changeActive] = useState(isToggle)
+
+    const handleToggle = () => {
+        changeActive(!isActive)
+    }
+    return(
+        <div className={classNames({
+            [s.collapseWrapper] : true,
+            [s.isActive] : isActive 
+        })}
+            onClick = { handleToggle }
+        >    
+            <div className={s.title}>
+                <h4>{title}</h4>
+                <div className={s.toggle}></div>
+            </div>
+            <div className={s.contentContainer}>
+                {
+                    content.map(item => <CollapseContent key={item} content={item} />)
+                }
+            </div>
+        </div>
+    )
+}
+
+export default CollapseChild
--- a/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss
@@ -0,0 +1,3 @@
+.content {
+    margin-top: 1.6rem;
+}
--- a/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
+++ b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx
@@ -0,0 +1,15 @@
+import s from './CollapseContent.module.scss'
+
+interface CollapseContentProps{
+    content: string
+}
+
+const CollapseContent = ({content}: CollapseContentProps) => {
+    return (
+        <div className={s.content}>
+            {content}
+        </div>
+    )
+}
+
+export default CollapseContent
--- a/src/components/common/CollapseCommon/CollapseCommon.tsx
+++ b/src/components/common/CollapseCommon/CollapseCommon.tsx
@@ -0,0 +1,19 @@
+import CollapseChild from './CollapseChild/CollapseChild'
+
+interface CollapseCommonProps{
+    data: {title: string, content: Array<string>}[],
+}
+
+const CollapseCommon = ({data}: CollapseCommonProps) => {
+    return (
+        <section>
+            {
+                data.map(item =>
+                    <CollapseChild key={item.title} title={item.title} content={item.content}/>
+                )
+            }
+        </section>
+    )
+}
+
+export default CollapseCommon
--- a/src/components/common/DrawerCommon/DrawerCommon.module.scss
+++ b/src/components/common/DrawerCommon/DrawerCommon.module.scss
@@ -0,0 +1,52 @@
+@import "../../../styles/utilities";
+
+.drawerCommon {
+    @apply fixed flex justify-end transition-all duration-200;
+    overflow: hidden;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    width: 90%;
+    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.15);
+    z-index: 20000;
+
+    .inner {
+        @apply flex flex-col bg-white;
+        width: fit-content;
+        height: 100vh;
+        width: 100%;
+        margin-right: 0;
+        @screen md {
+            max-width: 55rem;
+        }
+        .top {
+            @apply flex justify-between items-center;
+            padding: 1.6rem;
+            .heading {
+                @apply sm-headline;
+            }
+            .iconClose {
+                @apply cursor-pointer transition-all duration-200;
+                &:hover {
+                    svg path {
+                        fill: var(--primary);
+                    }
+                }
+            }
+        }
+    }
+    .content {
+        overflow-y: auto;
+        height: 100%;
+    }
+    &.hide {
+        transform: translateX(110%);
+    }
+
+    @screen md {
+        width: unset;
+        .inner {
+            min-width: 48rem;
+        }
+    }
+}
--- a/src/components/common/DrawerCommon/DrawerCommon.tsx
+++ b/src/components/common/DrawerCommon/DrawerCommon.tsx
@@ -0,0 +1,36 @@
+import React, { useRef } from 'react';
+import s from './DrawerCommon.module.scss';
+import classNames from 'classnames';
+import { IconClose } from 'src/components/icons';
+
+interface Props {
+  visible: boolean
+  title?: string
+  children?: React.ReactNode
+  onClose: () => void
+}
+
+const DrawerCommon = ({ title, visible, children, onClose }: Props) => {
+  return (
+    <div className={classNames({
+      [s.drawerCommon]: true,
+      [s.hide]: !visible
+    })}>
+      <div className={s.inner}>
+        <div className={s.top}>
+          <h4 className={s.heading}>
+            {title}
+          </h4>
+          <div className={s.iconClose} onClick={onClose}>
+            <IconClose />
+          </div>
+        </div>
+        <div className={s.content}>
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DrawerCommon;
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
@@ -42,7 +42,7 @@
        @apply hidden;
        @screen md {
            @apply flex items-center list-none;
-            li {
+            > li {
                @apply flex justify-center items-center w-full;
                &:not(:last-child) {
                    margin-right: 4.8rem;
@@ -52,13 +52,23 @@
                }
                a {
                    @appy no-underline;
-                    &.iconFovourite {
+                    &:hover {
+                        opacity: 0.8;
+                    }
+                    &.iconFavourite {
                        svg path {
                            fill: var(--negative);
                        }
                    }
                }
-
+                .btnCart {
+                    &:hover {
+                        svg path {
+                            fill: var(--primary);
+                            opacity: 0.8;
+                        }
+                    }
+                }
            }
        }
    }
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -5,6 +5,7 @@ import InputSearch from 'src/components/common/InputSearch/InputSearch'
 import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
 import { IconBuy, IconHeart, IconHistory, IconUser } from 'src/components/icons'
 import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import Logo from '../../../Logo/Logo'
 import s from './HeaderMenu.module.scss'

 interface Props {
@@ -39,7 +40,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
        <section className={classNames({ [s.headerMenu]: true, [s.full]: isFull })}>
            <div className={s.left}>
                <div className={s.top}>
-                    <div>Online Grocery</div>
+                    <Logo/>
                    <button className={s.iconCart}>
                        <IconBuy />
                    </button>
@@ -51,14 +52,14 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
            <ul className={s.menu}>
                <li>
                    <Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`}>
-                        <a >
+                        <a>
                            <IconHistory />
                        </a>
                    </Link>
                </li>
                <li>
                    <Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.FAVOURITE}`}>
-                        <a className={s.iconFovourite}>
+                        <a className={s.iconFavourite}>
                            <IconHeart />
                        </a>
                    </Link>
@@ -67,7 +68,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
                    <MenuDropdown options={optionMenu} isHasArrow={false}><IconUser /></MenuDropdown>
                </li>
                <li>
-                    <button>
+                    <button className={s.btnCart}>
                        <IconBuy />
                    </button>
                </li>
--- a/src/components/common/ImgWithLink/ImgWithLink.module.scss
+++ b/src/components/common/ImgWithLink/ImgWithLink.module.scss
@@ -1,4 +1,9 @@
 .imgWithLink {
-    @apply w-full h-full;
-    object-fit: cover;
+    position: relative;
+    min-width: 5rem;
+    width: 100%;
+    height: 100%;
+    img {
+        object-fit: cover;
+    }
 }
--- a/src/components/common/ImgWithLink/ImgWithLink.tsx
+++ b/src/components/common/ImgWithLink/ImgWithLink.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import s from './ImgWithLink.module.scss'
+import Image from 'next/image'

 export interface ImgWithLinkProps {
    src: string,
@@ -8,8 +9,9 @@ export interface ImgWithLinkProps {

 const ImgWithLink = ({ src, alt }: ImgWithLinkProps) => {
    return (
-        <img className={s.imgWithLink} src={src} alt={alt} />
-
+        <div className={s.imgWithLink}>
+            <Image src={src} alt={alt} layout="fill" className={s.imgWithLink} />
+        </div>
    )
 }

--- a/src/components/common/Layout/Layout.tsx
+++ b/src/components/common/Layout/Layout.tsx
@@ -1,6 +1,8 @@
 import { CommerceProvider } from '@framework'
 import { useRouter } from 'next/router'
 import { FC } from 'react'
+import { useModalCommon } from 'src/components/hooks'
+import { CartDrawer } from '..'
 import Footer from '../Footer/Footer'
 import Header from '../Header/Header'
 import s from './Layout.module.scss'
@@ -13,12 +15,24 @@ interface Props {
 // note: demo code
 const Layout: FC<Props> = ({ children }) => {
    const { locale = 'en-US' } = useRouter()
+    const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false })

+    const toggle = () => {
+        if (visibleCartDrawer) {
+            closeCartDrawer()
+        } else {
+            openModal()
+        }
+    }
    return (
        <CommerceProvider locale={locale}>
            <div className={s.mainLayout}>
                <Header />
                <main >{children}</main>
+                <button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
+                <CartDrawer
+                    visible={visibleCartDrawer}
+                    onClose={closeCartDrawer} />
                <Footer />
            </div>
        </CommerceProvider>
--- a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
+++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
@@ -11,7 +11,7 @@
        padding-top: 5.6rem;
        padding-bottom: 5.6rem;
        border: none;
-        background-color: #f5f4f2;
+        background-color: var(--background-gray);
    }
    .productsWrap {
        @apply spacing-horizontal-left;
--- a/src/components/common/Logo/Logo.module.scss
+++ b/src/components/common/Logo/Logo.module.scss
@@ -1,7 +1,7 @@
-@import '../../../styles/utilities';
+@import "../../../styles/utilities";

 .logo {
-    display: flex;
+    @apply flex justify-center items-center;
    .eclipse {
        width: 3.2rem;
        height: 3.2rem;
@@ -10,9 +10,9 @@
        margin-right: 1.2rem;
    }
    .content {
-        @apply font-logo;
+        @apply font-logo font-bold;
        font-size: 16px;
        line-height: 32px;
        letter-spacing: -0.02em;
    }
-}
+}
--- a/src/components/common/Logo/Logo.tsx
+++ b/src/components/common/Logo/Logo.tsx
@@ -1,14 +1,18 @@
 import s from './Logo.module.scss'
+import Link from 'next/link'
+import { ROUTE } from 'src/utils/constanst.utils'

 const Logo = () => {
-    return(
-        <div className={s.logo}>
-            <div className={s.eclipse}>
-            </div>
-            <div className={s.content}>
-                ONLINE GROCERY
-            </div>
-        </div>
+    return (
+        <Link href={ROUTE.HOME}>
+            <a className={s.logo}>
+                <div className={s.eclipse}>
+                </div>
+                <div className={s.content}>
+                    ONLINE GROCERY
+                </div>
+            </a>
+        </Link>
    )
 }

--- a/src/components/common/MenuDropdown/MenuDropdown.module.scss
+++ b/src/components/common/MenuDropdown/MenuDropdown.module.scss
@@ -17,10 +17,21 @@
    }

    .label {
+        all: unset;
        @apply flex justify-end items-center transition-all duration-200;
        svg path {
            width: fit-content;
        }
+        &:focus,
+        &:active {
+            color: var(--primary);
+            svg path {
+                fill: currentColor;
+            }
+        }
+        &:focus-visible {
+            outline: 2px solid #000;
+        }
    }

    &.arrow {
@@ -63,8 +74,9 @@
            @apply rounded list-none bg-white;
            border: 1px solid var(--text-active);
            margin-top: 0.4rem;
-            li {
+            > li {
                @apply block w-full transition-all duration-200 cursor-pointer text-active;
+                white-space: nowrap;
                button {
                    all: unset;
                    color: currentColor;
--- a/src/components/common/MenuDropdown/MenuDropdown.tsx
+++ b/src/components/common/MenuDropdown/MenuDropdown.tsx
@@ -16,9 +16,9 @@ const MenuDropdown = ({ options, children, isHasArrow = true, align }: Props) =>
            [s.menuDropdown]: true,
            [s.arrow]: isHasArrow,
        })}>
-            <span className={s.label}>
+            <button className={s.label}>
                {children}
-            </span>
+            </button>
            <section className={classNames({
                [s.menu]: true,
                [s.left]: align === 'left',
--- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
+++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx
@@ -1,7 +1,6 @@
 import Link from 'next/link'
 import React, { useEffect, useRef } from 'react'
-import { ButtonCommon, Inputcommon } from 'src/components/common'
-import InputPassword from 'src/components/common/InputPassword/InputPassword'
+import { ButtonCommon, Inputcommon, InputPassword } from 'src/components/common'
 import { ROUTE } from 'src/utils/constanst.utils'
 import { CustomInputCommon } from 'src/utils/type.utils'
 import s from '../FormAuthen.module.scss'
--- a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
+++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { ButtonCommon, Inputcommon } from 'src/components/common'
+import { ButtonCommon, Inputcommon, InputPassword } from 'src/components/common'
 import s from '../FormAuthen.module.scss'
 import styles from './FormRegister.module.scss'
 import SocialAuthen from '../SocialAuthen/SocialAuthen'
--- a/src/components/common/QuanittyInput/QuanittyInput.tsx
+++ b/src/components/common/QuanittyInput/QuanittyInput.tsx
@@ -1,7 +1,7 @@
 import React, { ChangeEvent, useEffect, useState } from 'react'
 import s from './QuanittyInput.module.scss'
 import classNames from 'classnames'
-import { Minus, Plus } from '@components/icons'
+import { IconMinus, IconPlus } from '../../icons'
 interface QuanittyInputProps
  extends Omit<
    React.InputHTMLAttributes<HTMLInputElement>,
@@ -64,7 +64,7 @@ const QuanittyInput = ({
  return (
    <div className={classNames(s.quanittyInputWarper, { [s[size]]: size })}>
      <div className={s.minusIcon} onClick={onMinusClick}>
-        <Minus />
+        <IconMinus />
      </div>
      <input
        {...props}
@@ -74,7 +74,7 @@ const QuanittyInput = ({
        className={s.quanittyInput}
      />
      <div className={s.plusIcon} onClick={onPlusClick}>
-        <Plus />
+        <IconPlus />
      </div>
    </div>
  )
--- a/src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.module.scss
+++ b/src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.module.scss
@@ -0,0 +1,16 @@
+@import '../../../../styles/utilities';
+.blogCardWarpper {
+  @apply spacing-horizontal;
+  @screen xl {
+    :global(.customArrow) {
+      @screen lg {
+        &:global(.leftArrow) {
+          left: calc(-6.4rem - 2rem);
+        }
+        &:global(.rightArrow) {
+          right: calc(-6.4rem - 2rem);
+        }
+      }
+    }
+  }
+}
--- a/src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.tsx
+++ b/src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.tsx
@@ -0,0 +1,46 @@
+import { TOptionsEvents } from 'keen-slider'
+import React from 'react'
+import CarouselCommon, {
+  CarouselCommonProps,
+} from '../../CarouselCommon/CarouselCommon'
+import BlogCard, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
+import s from "./BlogPostCarousel.module.scss"
+
+interface BlogPostCarouselProps
+  extends Omit<CarouselCommonProps<BlogCardProps>, 'Component'|"option"> {
+		option?:TOptionsEvents
+	}
+
+const OPTION_DEFAULT: TOptionsEvents = {
+  slidesPerView: 1.25,
+  mode: 'free',
+  spacing:24,
+  breakpoints: {
+    '(min-width: 640px)': {
+      slidesPerView: 2,
+    },
+    '(min-width: 1024px)': {
+      slidesPerView: 2.5,
+    },
+    '(min-width: 1440px)': {
+      slidesPerView: 3,
+    },
+    '(min-width: 1536px)': {
+      slidesPerView: 3.5,
+    },
+  },
+}
+const BlogPostCarousel = ({ option, data, ...props }: BlogPostCarouselProps) => {
+  return (
+    <div className={s.blogCardWarpper}>
+      <CarouselCommon<BlogCardProps>
+        data={data}
+        Component={BlogCard}
+        {...props}
+        option={{ ...OPTION_DEFAULT, ...option }}
+      />
+    </div>
+  )
+}
+
+export default BlogPostCarousel
--- a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss
+++ b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss
@@ -0,0 +1,19 @@
+@import '../../../styles/utilities';
+
+.blogPostWarpper {
+  &.cream{
+    background-color: #F5F4F2;
+  }
+  padding-top: 5.6rem;
+  padding-bottom: 5.2rem;
+  @apply flex flex-col;
+  .top {
+    @apply spacing-horizontal flex w-full justify-between;
+    padding-bottom: 3.2rem;
+    @screen xl {
+      .right {
+        margin-right: 2.476rem;
+      }
+    }
+  }
+}
--- a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
+++ b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
@@ -0,0 +1,75 @@
+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'
+import { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
+import BlogPostCarousel from './BlogPostCarousel/BlogPostCarousel'
+import s from './RelevantBlogPosts.module.scss'
+import { ROUTE } from 'src/utils/constanst.utils';
+
+interface RelevantProps {
+    data?: BlogCardProps[],
+    itemKey?: string,
+    title?: string,
+    viewAllLink?: string,
+    bgcolor?: "default" | "cream"
+}
+
+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,
+},{
+    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,
+},{
+    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,
+},{
+    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,
+},{
+    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,
+},{
+    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,
+}]
+
+  const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => {
+    return (
+      <div className={classNames({
+        [s.blogPostWarpper] : true,
+        [s[bgcolor]] : bgcolor,
+      })}
+      >
+        <div className={s.top}>
+          <div className={s.left}>
+            <HeadingCommon>{title}</HeadingCommon>
+          </div>
+          <div className={s.right}>
+            <ViewAllItem link={ROUTE.BLOGS}/>
+          </div>
+        </div>
+        <div className={s.bot}>
+          <BlogPostCarousel data={data} itemKey={itemKey} />
+        </div>
+      </div>
+    )
+  }
+  
+  export default RelevantBlogPosts
--- a/src/components/common/SelectCommon/SelectCommon.module.scss
+++ b/src/components/common/SelectCommon/SelectCommon.module.scss
@@ -1,69 +1,90 @@
@import "../../../styles/utilities";

-.select{
+.select {
    background-color: var(--white);
-    &.base{
+    .selectTrigger {
+        svg {
+            @apply transition-all duration-200;
+        }
+    }
+    &.base {
        width: 20.6rem;
-        .selectTrigger{
+        .selectTrigger {
            width: 20.6rem;
            padding: 1.2rem 1.6rem;
        }
    }
-    &.large{
+    &.large {
        width: 34.25rem;
-        .selectTrigger{
+        .selectTrigger {
            width: 34.25rem;
            padding: 1.6rem 1.6rem;
        }
    }
-    &.default{
-        .selectTrigger{
+    &.default {
+        .selectTrigger {
            @apply border-solid border border-current;
-        }   
+        }
    }
-    &.custom{
-        .selectTrigger{
+    &.custom {
+        .selectTrigger {
            @apply border-2;
            border-color: var(--border-line);
            color: var(--text-label);
        }
    }
-    &.isActive{
-        .selectOptionWrapper{
+    &:hover {
+        cursor: pointer;
+        .hoverWrapper {
            @apply block;
+            animation: SelectAnimation 0.2s ease-out;
+        }
+        .selectTrigger {
+            svg {
+                transform: rotate(180deg);
+            }
        }
    }
 }
-.selectTrigger{
+.selectTrigger {
    @apply outline-none flex justify-between;
    color: var(--text-active);
    border-radius: 0.8rem;
-
 }
-.selectOptionWrapper{
-    @apply outline-none hidden z-10 absolute;
-    border-radius: 0.8rem;
-    background-color: var(--white);
-    padding: 0.4rem 0rem 0.4rem 0rem;
-    margin-top: 0.6rem;
-    &.base{
-        width: 20.6rem;
+.hoverWrapper {
+    @apply hidden outline-none absolute z-10;
+    padding-top: 0.6rem;
+    .selectOptionWrapper {
+        border-radius: 0.8rem;
+        background-color: var(--white);
+        padding: 0.4rem 0rem 0.4rem 0rem;
+        &.base {
+            width: 20.6rem;
+        }
+        &.large {
+            width: 34.25rem;
+        }
+        &.default {
+            @apply border-solid border border-current;
+        }
+        &.custom {
+            @apply border-2;
+            border-color: var(--border-line);
+            color: var(--text-label);
+        }
    }
-    &.large{
-        width: 34.25rem;
-    }
-    &.default{
-        @apply border-solid border border-current; 
-    }
-    &.custom{
-        @apply border-2;
-        border-color: var(--border-line);
-        color: var(--text-label);
-    }
-    &.active{
-        @apply hidden;
+    &:hover {
+        @apply block;
    }
 }

-
-
+@keyframes SelectAnimation {
+    0% {
+        opacity: 0;
+        transform: translateY(1.6rem);
+    }
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
--- a/src/components/common/SelectCommon/SelectCommon.tsx
+++ b/src/components/common/SelectCommon/SelectCommon.tsx
@@ -1,43 +1,25 @@
 import s from './SelectCommon.module.scss'
 import classNames from 'classnames'
-import { useState, useRef, useEffect } from 'react'
+import { useState } from 'react'
 import { IconVectorDown } from 'src/components/icons'
 import SelectOption from './SelectOption/SelectOption'

 interface Props {
-    children? : React.ReactNode,
+    placeholder? : string,
    size?: 'base' | 'large',
    type?: 'default' | 'custom',
-    option: {name: string}[],
+    option: {name: string, value: string}[],
+    onChange?: (value: string) => void,
 }

-const SelectCommon = ({ type = 'default', size = 'base', option, children }: Props) => {
-    const [isActive, setActive] = useState(false)
-    const [selectedName, setSelectedName] = useState(children)
-    const ref = useRef<HTMLDivElement>(null)
-    
-    useEffect(() => {
-        const handleClick = (event: MouseEvent) => {
-            const { target } = event;
-            if (!ref?.current || ref?.current.contains(target as Node)) {
-                return 
-            }
-            else{
-                setActive(false)
-            }
-        }
-        document.addEventListener('click', handleClick)
-        return () => {
-            document.removeEventListener('click', handleClick)
-        }
-    }, [ref])
+const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, onChange}: Props) => {
+    const [selectedName, setSelectedName] = useState(placeholder)
+    const [selectedValue, setSelectedValue] = useState('')

-    const changeActiveStatus = () => {
-        setActive(!isActive)
-    }
-
-    const changeSelectedName = (item:string) => {
+    const changeSelectedName = (item:string, value: string) => {
+        setSelectedValue(value)
        setSelectedName(item)
+        onChange && onChange(value)
    }
    return(
        <>
@@ -45,29 +27,29 @@ const SelectCommon = ({ type = 'default', size = 'base', option, children }: Pro
                [s.select] : true,
                [s[size]] : !!size,
                [s[type]] : !!type,
-                [s.isActive] : isActive,
            })}
-                onClick = { changeActiveStatus }
-                ref = {ref}
            >
                <div className={classNames({
                    [s.selectTrigger] : true,
                    
                })}
                >{selectedName}<IconVectorDown /></div>
-
-                <div className={classNames({
-                    [s.selectOptionWrapper] : true,
-                    [s[type]] : !!type,
-                    [s[size]] : !!size,
-                })}
-                >   
-                    {
-                        option.map(item => 
-                            <SelectOption itemName={item.name} onClick={changeSelectedName} size={size} />
-                        )
-                    }
+                
+                <div className={s.hoverWrapper}>
+                    <div className={classNames({
+                        [s.selectOptionWrapper] : true,
+                        [s[type]] : !!type,
+                        [s[size]] : !!size,
+                    })}
+                    >   
+                        {
+                            option.map(item => 
+                                <SelectOption key={item.value} itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
+                            )
+                        }
+                    </div>
                </div>
+
            </div>
        </>
    )
--- a/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
+++ b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss
@@ -13,5 +13,9 @@
    }
    &:hover{
        background-color: var(--gray);
+        color: var(--primary);
+    }
+    &.isChoose{
+        background-color: var(--gray);
    }
 }
--- a/src/components/common/SelectCommon/SelectOption/SelectOption.tsx
+++ b/src/components/common/SelectCommon/SelectOption/SelectOption.tsx
@@ -2,20 +2,22 @@ import s from './SelectOption.module.scss'
 import classNames from 'classnames'

 interface Props{
-    onClick: (value: string) => void,
+    onClick: (name: string, value: string) => void,
    itemName: string,
    size: 'base' | 'large',
+    value: string,
+    selected?: boolean,
 }

-const SelectOption = ({onClick, itemName, size}: Props) => {
-
+const SelectOption = ({onClick, itemName, size, value, selected} : Props) => {
    const changeName  = () => {
-        onClick(itemName)
+        onClick(itemName, value)
    }
    return(
        <div className={classNames({
            [s.selectOption] : true,
            [s[size]] : !!size,
+            [s.isChoose] : selected ,
        })}
            onClick = {changeName}
        >{itemName}</div>
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -31,5 +31,10 @@ export { default as ModalCommon} from './ModalCommon/ModalCommon'
 export { default as ModalConfirm} from "./ModalConfirm/ModalConfirm"
 export { default as ModalInfo} from "./ModalInfo/ModalInfo"
 export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo'
+export { default as CardBlog} from './CardBlog/CardBlog'
+export { default as RelevantBlogPosts} from './RelevantBlogPosts/RelevantBlogPosts'
+export { default as CollapseCommon} from './CollapseCommon/CollapseCommon'
 export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
 export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
+export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'
+export { default as CartDrawer} from './CartDrawer/CartDrawer'
--- a/src/components/icons/IconClose.tsx
+++ b/src/components/icons/IconClose.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+const IconClose = () => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.4099 9.00019L16.7099 2.71019C16.8982 2.52188 17.004 2.26649 17.004 2.00019C17.004 1.73388 16.8982 1.47849 16.7099 1.29019C16.5216 1.10188 16.2662 0.996094 15.9999 0.996094C15.7336 0.996094 15.4782 1.10188 15.2899 1.29019L8.99994 7.59019L2.70994 1.29019C2.52164 1.10188 2.26624 0.996094 1.99994 0.996094C1.73364 0.996094 1.47824 1.10188 1.28994 1.29019C1.10164 1.47849 0.995847 1.73388 0.995847 2.00019C0.995847 2.26649 1.10164 2.52188 1.28994 2.71019L7.58994 9.00019L1.28994 15.2902C1.19621 15.3831 1.12182 15.4937 1.07105 15.6156C1.02028 15.7375 0.994141 15.8682 0.994141 16.0002C0.994141 16.1322 1.02028 16.2629 1.07105 16.3848C1.12182 16.5066 1.19621 16.6172 1.28994 16.7102C1.3829 16.8039 1.4935 16.8783 1.61536 16.9291C1.73722 16.9798 1.86793 17.006 1.99994 17.006C2.13195 17.006 2.26266 16.9798 2.38452 16.9291C2.50638 16.8783 2.61698 16.8039 2.70994 16.7102L8.99994 10.4102L15.2899 16.7102C15.3829 16.8039 15.4935 16.8783 15.6154 16.9291C15.7372 16.9798 15.8679 17.006 15.9999 17.006C16.132 17.006 16.2627 16.9798 16.3845 16.9291C16.5064 16.8783 16.617 16.8039 16.7099 16.7102C16.8037 16.6172 16.8781 16.5066 16.9288 16.3848C16.9796 16.2629 17.0057 16.1322 17.0057 16.0002C17.0057 15.8682 16.9796 15.7375 16.9288 15.6156C16.8781 15.4937 16.8037 15.3831 16.7099 15.2902L10.4099 9.00019Z"
+        fill="#141414"
+      />
+    </svg>
+  )
+}
+
+export default IconClose
--- a/src/components/icons/IconDelete.tsx
+++ b/src/components/icons/IconDelete.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconDelete = () => {
+    return (
+        <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M7 16C7.26522 16 7.51957 15.8946 7.70711 15.7071C7.89464 15.5196 8 15.2652 8 15V9C8 8.73478 7.89464 8.48043 7.70711 8.29289C7.51957 8.10536 7.26522 8 7 8C6.73478 8 6.48043 8.10536 6.29289 8.29289C6.10536 8.48043 6 8.73478 6 9V15C6 15.2652 6.10536 15.5196 6.29289 15.7071C6.48043 15.8946 6.73478 16 7 16ZM17 4H13V3C13 2.20435 12.6839 1.44129 12.1213 0.87868C11.5587 0.316071 10.7956 0 10 0H8C7.20435 0 6.44129 0.316071 5.87868 0.87868C5.31607 1.44129 5 2.20435 5 3V4H1C0.734784 4 0.48043 4.10536 0.292893 4.29289C0.105357 4.48043 0 4.73478 0 5C0 5.26522 0.105357 5.51957 0.292893 5.70711C0.48043 5.89464 0.734784 6 1 6H2V17C2 17.7956 2.31607 18.5587 2.87868 19.1213C3.44129 19.6839 4.20435 20 5 20H13C13.7956 20 14.5587 19.6839 15.1213 19.1213C15.6839 18.5587 16 17.7956 16 17V6H17C17.2652 6 17.5196 5.89464 17.7071 5.70711C17.8946 5.51957 18 5.26522 18 5C18 4.73478 17.8946 4.48043 17.7071 4.29289C17.5196 4.10536 17.2652 4 17 4ZM7 3C7 2.73478 7.10536 2.48043 7.29289 2.29289C7.48043 2.10536 7.73478 2 8 2H10C10.2652 2 10.5196 2.10536 10.7071 2.29289C10.8946 2.48043 11 2.73478 11 3V4H7V3ZM14 17C14 17.2652 13.8946 17.5196 13.7071 17.7071C13.5196 17.8946 13.2652 18 13 18H5C4.73478 18 4.48043 17.8946 4.29289 17.7071C4.10536 17.5196 4 17.2652 4 17V6H14V17ZM11 16C11.2652 16 11.5196 15.8946 11.7071 15.7071C11.8946 15.5196 12 15.2652 12 15V9C12 8.73478 11.8946 8.48043 11.7071 8.29289C11.5196 8.10536 11.2652 8 11 8C10.7348 8 10.4804 8.10536 10.2929 8.29289C10.1054 8.48043 10 8.73478 10 9V15C10 15.2652 10.1054 15.5196 10.2929 15.7071C10.4804 15.8946 10.7348 16 11 16Z" fill="#8F8F8F" />
+        </svg>
+    )
+}
+
+export default IconDelete
--- a/src/components/icons/IconMinus.tsx
+++ b/src/components/icons/IconMinus.tsx
@@ -1,4 +1,4 @@
-const ArrowRight = ({ ...props }) => {
+const IconMinus = ({ ...props }) => {
  return (
    <svg
      width="12"
@@ -15,4 +15,4 @@ const ArrowRight = ({ ...props }) => {
  )
 }

-export default ArrowRight
+export default IconMinus
--- a/src/components/icons/IconPlus.tsx
+++ b/src/components/icons/IconPlus.tsx
@@ -1,4 +1,4 @@
-const ArrowLeft = ({ ...props }) => {
+const IconPlus = ({ ...props }) => {
  return (
    <svg
      width="12"
@@ -15,4 +15,4 @@ const ArrowLeft = ({ ...props }) => {
  )
 }

-export default ArrowLeft
+export default IconPlus
--- a/src/components/icons/IconVectorDown.tsx
+++ b/src/components/icons/IconVectorDown.tsx
@@ -1,5 +1,3 @@
-
-
 const IconVectorDown = ({ ...props }) => {
    return (
      <svg
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -23,3 +23,7 @@ export { default as IconCheck } from './IconCheck'
 export { default as IconTime } from './IconTime'
 export { default as IconPeople } from './IconPeople'
 export { default as IconLocation } from './IconLocation'
+export { default as IconClose } from './IconClose'
+export { default as IconDelete } from './IconDelete'
+export { default as IconPlus } from './IconPlus'
+export { default as IconMinus } from './IconMinus'
--- a/src/components/modules/home/HomeBanner/HomeBanner.module.scss
+++ b/src/components/modules/home/HomeBanner/HomeBanner.module.scss
@@ -11,11 +11,19 @@
    @apply grid;
    grid-template-columns: 1fr 1.8fr;
    .left {
-      @apply flex items-end justify-center custom-border-radius-lg;
+      @apply relative flex items-end justify-center custom-border-radius-lg;
      margin-right: 1.6rem;
-      background-image: url('./assets/home_banner.png');
-      background-repeat: no-repeat;
-      background-size: cover;
+      .imgWrap {
+        @apply absolute w-full h-full;
+        top: 0;
+        left: 0;
+        > div {
+          @apply w-full h-full custom-border-radius-lg;
+        }
+        img {
+          object-fit: cover;
+        }
+      }

      .text {
        @apply relative font-heading text-center;
--- a/src/components/modules/home/HomeBanner/HomeBanner.tsx
+++ b/src/components/modules/home/HomeBanner/HomeBanner.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import { Banner } from 'src/components/common'
-import s from './HomeBanner.module.scss'
 import BannerImgRight from './assets/banner_full.png'
-import BannerImgRight2 from './assets/banner_product.png'
+import HomeBannerImg from './assets/home_banner.png'
+import s from './HomeBanner.module.scss'
+import Image from 'next/image'

 interface Props {
    className?: string
@@ -13,6 +14,9 @@ const HomeBanner = ({ }: Props) => {
    return (
        <div className={s.homeBanner}>
            <section className={s.left}>
+                <div className={s.imgWrap}>
+                    <Image src={HomeBannerImg} placeholder='blur' />
+                </div>
                <div className={s.text}>
                    Freshness<br />guaranteed
                </div>
@@ -28,10 +32,10 @@ const HomeBanner = ({ }: Props) => {
                    {
                        title: "Save 15% on your first order 2",
                        subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
-                        imgLink: BannerImgRight2.src,
+                        imgLink: BannerImgRight.src,
                        size: "small",
                    }
-                ]
+                    ]
                }
            />
        </div >
--- a/src/components/modules/home/HomeBanner/assets/banner_product.png
+++ b/src/components/modules/home/HomeBanner/assets/banner_product.png
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -6,7 +6,7 @@
  --primary-lightest: #effaf4;

  --info-dark: #00317a;
-  --info: #297fff;
+  --info: #3468B7;
  --info-border-line: #d6e7ff;
  --info-light: #ebf3ff;

@@ -33,6 +33,7 @@
  --disabled: #cccccc;
  --border-line: #ebebeb;
  --background: #fff;
+  --background-gray: #F5F4F2;
  --gray: #f8f8f8;
  --white: #fff;
  --background-arrow:rgba(20, 20, 20, 0.05);
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -120,6 +120,25 @@
        font-family: var(--font-logo);
    }

+    .custom-scroll {
+        overflow-y: auto;
+        &::-webkit-scrollbar-track {
+            background-color: var(--background-gray);
+            border-radius: 10px;
+        }
+
+        &::-webkit-scrollbar {
+            border-radius: 10px;
+            width: 6px;
+            background-color: var(--background-gray);
+        }
+
+        &::-webkit-scrollbar-thumb {
+            border-radius: 10px;
+            background-color: var(--primary)
+        }
+    }
+
    .u-form {
        .body {
            > div {
@@ -130,6 +149,7 @@
            .line {
                @apply flex justify-between items-center;
                > div {
+                    flex: 1;
                    &:not(:last-child) {
                        margin-right: 1.6rem;
                    }
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -8,10 +8,11 @@ export const SOCIAL_LINKS = {
 export const ROUTE = {
    HOME: '/',
    PRODUCTS: '/products',
+    PRODUCT_DETAIL: '/product',
    ABOUT: '/about',
+    BLOG_DETAIL: '/blog',
    ACCOUNT: '/account',
    RECIPES: '/recipes',
-
    BUSSINESS: '/bussiness',
    CONTACT: '/contact',
    FAQ: '/faq',
--- a/src/utils/demo-data.ts
+++ b/src/utils/demo-data.ts
@@ -47,6 +47,7 @@ import { RecipeCardProps } from "src/components/common/RecipeCard/RecipeCard"
 export const PRODUCT_DATA_TEST = [
    {
        name: 'Tomato',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
@@ -54,6 +55,7 @@ export const PRODUCT_DATA_TEST = [
    },
    {
        name: 'Cucumber',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
@@ -61,6 +63,7 @@ export const PRODUCT_DATA_TEST = [
    },
    {
        name: 'Carrot',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
@@ -68,6 +71,7 @@ export const PRODUCT_DATA_TEST = [
    },
    {
        name: 'Salad',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
@@ -75,6 +79,7 @@ export const PRODUCT_DATA_TEST = [
    },
    {
        name: 'Tomato',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
@@ -82,6 +87,7 @@ export const PRODUCT_DATA_TEST = [
    },
    {
        name: 'Cucumber',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
@@ -89,6 +95,7 @@ export const PRODUCT_DATA_TEST = [
    },
    {
        name: 'Tomato',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
@@ -96,6 +103,7 @@ export const PRODUCT_DATA_TEST = [
    },
    {
        name: 'Cucumber',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
@@ -103,9 +111,55 @@ export const PRODUCT_DATA_TEST = [
    },
 ]

+export const PRODUCT_CART_DATA_TEST = [
+    {
+        name: 'Tomato',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png",
+        oldPrice: 'Rp 32.000',
+        discount: '15%',
+        quantity: 1,
+    },
+    {
+        name: 'Cucumber',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png",
+        oldPrice: 'Rp 32.000',
+        discount: '15%',
+        quantity: 2,
+    },
+    {
+        name: 'Carrot',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646217-23b86160-45c9-4845-8dcc-b3e1a4483edd.png",
+        oldPrice: 'Rp 32.000',
+        discount: '20%',
+        quantity: 3,
+    },
+    {
+        name: 'Salad',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646221-aaa1d48d-bb80-470f-9400-ae2aa47285b6.png",
+        quantity: 1,
+    },
+]
+
 export const INGREDIENT_DATA_TEST = [
    {
        name: 'Tomato',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
@@ -113,6 +167,7 @@ export const INGREDIENT_DATA_TEST = [
    },
    {
        name: 'Cucumber',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
@@ -121,6 +176,7 @@ export const INGREDIENT_DATA_TEST = [
    },
    {
        name: 'Carrot',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
@@ -128,6 +184,7 @@ export const INGREDIENT_DATA_TEST = [
    },
    {
        name: 'Salad',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
@@ -136,6 +193,7 @@ export const INGREDIENT_DATA_TEST = [
    },
    {
        name: 'Tomato',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
@@ -143,6 +201,7 @@ export const INGREDIENT_DATA_TEST = [
    },
    {
        name: 'Cucumber',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
@@ -150,6 +209,7 @@ export const INGREDIENT_DATA_TEST = [
    },
    {
        name: 'Tomato',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
@@ -157,6 +217,7 @@ export const INGREDIENT_DATA_TEST = [
    },
    {
        name: 'Cucumber',
+        slug: 'tomato',
        weight: '250g',
        category: 'VEGGIE',
        price: 'Rp 27.500',
--- a/src/utils/types.utils.ts
+++ b/src/utils/types.utils.ts
@@ -1,8 +1,11 @@
 export interface ProductProps {
-    category: string
+    category?: string
    name: string
+    slug: string
    weight: string
    price: string
+    oldPrice?: string
+    discount?: string
    imageSrc: string
    isNotSell?: boolean
 }
@@ -17,7 +20,14 @@ export interface FeaturedProductProps {

 export interface RecipeProps {
    title: string
-    description:string
+    description: string
+    imageSrc: string
+}
+
+export interface BlogProps {
+    title: string
+    slug: string
+    description: string
    imageSrc: string
 }