From 06b5b23d01c7a1f979573e619a03a7af0b48a7dc Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Wed, 1 Sep 2021 13:41:07 +0700
Subject: [PATCH 01/19] :sparkles: feat: CardItemCheckout

:%s
---
 pages/test.tsx                                | 15 +++++-----
 .../CardItemCheckout.module.scss              | 29 +++++++++++++++++++
 .../CardItemCheckout/CardItemCheckout.tsx     | 29 +++++++++++++++++++
 src/components/common/index.ts                |  1 +
 4 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 src/components/common/CardItemCheckout/CardItemCheckout.module.scss
 create mode 100644 src/components/common/CardItemCheckout/CardItemCheckout.tsx

diff --git a/pages/test.tsx b/pages/test.tsx
index a0d99978c..24d55e9ac 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import {
   ButtonCommon,
+  CardItemCheckout,
   Layout,
   ModalCommon,
   ModalConfirm,
@@ -19,7 +20,7 @@ const dataTest = [
     weight: '250g',
     category: 'VEGGIE',
     price: 'Rp 27.500',
-    imageSrc: image5.src,
+    imageSrc: image7.src,
   },
   {
     name: 'Tomato',
@@ -410,12 +411,12 @@ export default function Test() {
   }
   return (
     <>
-      <ButtonCommon onClick={onOpen}>open</ButtonCommon>
-      <ModalInfo visible={visible} onClose={onClose}>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi?
-      </ModalInfo>
-      <PaginationCommon total={40} pageSize={10}/>
-      <ProductList data={dataTest}/>
+      <CardItemCheckout {...dataTest[0]} quantity={2}/>
+      <div className="w-full" >
+        <ButtonCommon>
+          test
+        </ButtonCommon>
+      </div>
     </>
   )
 }
diff --git a/src/components/common/CardItemCheckout/CardItemCheckout.module.scss b/src/components/common/CardItemCheckout/CardItemCheckout.module.scss
new file mode 100644
index 000000000..374529453
--- /dev/null
+++ b/src/components/common/CardItemCheckout/CardItemCheckout.module.scss
@@ -0,0 +1,29 @@
+.warpper{
+    max-width: 49.9rem;
+    max-height: 12rem;
+    padding:1.6rem 0;
+    @apply flex items-center;
+    .image{
+        min-width: 13.3rem;
+        max-width: 8.8rem;
+        margin: 0.8rem;
+        @apply flex justify-center items-center;
+        img{
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .right{
+        width: 100%;
+        .name{
+            color: var(--text-active);
+            margin-bottom: 0.5erm;
+        }
+        .quantity {
+            @apply flex justify-between text-label;
+            .price{
+                color: var(--text-base);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/CardItemCheckout/CardItemCheckout.tsx b/src/components/common/CardItemCheckout/CardItemCheckout.tsx
new file mode 100644
index 000000000..dd9fb14c5
--- /dev/null
+++ b/src/components/common/CardItemCheckout/CardItemCheckout.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import s from "./CardItemCheckout.module.scss"
+import { ProductProps } from 'src/utils/types.utils'
+interface CardItemCheckoutProps extends ProductProps {
+    quantity:number
+}
+
+const CardItemCheckout = ({imageSrc,name,price,weight,quantity,category}: CardItemCheckoutProps) => {
+    return (
+        <div className={s.warpper}>
+            <div className={s.image}>
+                <img src={imageSrc} alt="image" />
+            </div>
+            <div className={s.right}>
+                <div className={s.name}>
+                    {`${name} (${weight})`}
+                </div>
+                <div className={s.quantity}>
+                    Quantity: 
+                    <div className={s.price}>
+                        {`${quantity} x ${price}`}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CardItemCheckout
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index f3d73ad96..b4d2591cb 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -33,3 +33,4 @@ export { default as ModalConfirm} from "./ModalConfirm/ModalConfirm"
 export { default as ModalInfo} from "./ModalInfo/ModalInfo"
 export { default as ProductList} from "./ProductList/ProductList"
 export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo'
+export { default as CardItemCheckout} from './CardItemCheckout/CardItemCheckout'

From 7ece18782d43b680ed0a917829c2b7e07112d247 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Mon, 6 Sep 2021 14:07:33 +0700
Subject: [PATCH 02/19] :sparkles: feat: Tab Common

---
 src/components/common/TabCommon/TabCommon.tsx | 50 +++++++++++++++----
 .../common/TabCommon/TabItem/TabItem.tsx      |  9 ++--
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx
index d07cf06e8..67fe107a6 100644
--- a/src/components/common/TabCommon/TabCommon.tsx
+++ b/src/components/common/TabCommon/TabCommon.tsx
@@ -1,46 +1,74 @@
-import React, { useState } from "react"
+import React, { useState, RefObject, useEffect, useRef } from "react"
 import s from './TabCommon.module.scss'
 
 import TabItem from './TabItem/TabItem'
 
 interface TabCommonProps {
-
+    changeTab: (target:string) => void;
 }
 
-const TabCommon = ({ } : TabCommonProps) => {
+const TabCommon = ({ changeTab } : TabCommonProps) => {
     const active = "active", unActive = "";
-
     const [item1Active, setItem1Active] = useState(active);
     const [item2Active, setItem2Active] = useState(unActive);
     const [item3Active, setItem3Active] = useState(unActive);
 
+    const item1 = useRef<HTMLLIElement>(null);
+    const item2 = useRef<HTMLLIElement>(null);
+    const item3 = useRef<HTMLLIElement>(null);
+    const slider = useRef<HTMLDivElement>(null);
+
+    function slide(ref: RefObject<HTMLLIElement>) {
+        const width = ref.current.offsetWidth;
+        const left = ref.current.offsetLeft; 
+               
+        slider.current.style.width = (width-48).toString()+"px";
+        slider.current.style.left = left.toString()+"px";
+    }
+
     function toggleItem1():void {
         setItem1Active(active)
+        changeTab("waiting")
 
         setItem2Active(unActive)
         setItem3Active(unActive)
+        slide(item1)
     }
+
     function toggleItem2():void {
         setItem2Active(active)
+        changeTab("delivering")
 
         setItem1Active(unActive)
         setItem3Active(unActive)
+        slide(item2)
     }
     function toggleItem3():void {
         setItem3Active(active)
+        changeTab("delivered")
 
         setItem1Active(unActive)
         setItem2Active(unActive)
+        slide(item3)
     }
 
+    useEffect(() => {
+        slide(item1);
+    }, [])
+
     return (
-        <section className={s.tabCommonOutSide}>
-            <div className={s.tabCommon}>
-                <span onClick={toggleItem1}><TabItem active={item1Active}>Wait for Comfirmation</TabItem></span>
-                <span onClick={toggleItem2}><TabItem active={item2Active}>Delivering</TabItem></span>
-                <span onClick={toggleItem3}><TabItem active={item3Active}>Delivered</TabItem></span>
-            </div>
-        </section>
+        <ul className={s.tabCommon}>
+            <li ref={item1}>
+                <TabItem onClick={toggleItem1} active={item1Active}>Wait for Comfirmation</TabItem>
+            </li>
+            <li ref={item2}>
+                <TabItem onClick={toggleItem2} active={item2Active}>Delivering</TabItem>
+            </li>
+            <li ref={item3}>
+                <TabItem onClick={toggleItem3} active={item3Active}>Delivered</TabItem>
+            </li>
+            <div ref={slider} className={s.slider}></div>
+        </ul>
     )
 }
 
diff --git a/src/components/common/TabCommon/TabItem/TabItem.tsx b/src/components/common/TabCommon/TabItem/TabItem.tsx
index a889ee68b..62de3c595 100644
--- a/src/components/common/TabCommon/TabItem/TabItem.tsx
+++ b/src/components/common/TabCommon/TabItem/TabItem.tsx
@@ -4,13 +4,14 @@ import s from './TabItem.module.scss'
 
 interface TabItemProps {
     active: string;
-    target?: string;
-    children?: string;
+    children: string;
+    onClick: () => void;
 }
 
-const TabItem = ({ active = "", children } : TabItemProps) => {
+const TabItem = ({ active = "", children, onClick } : TabItemProps) => {
+
     return (
-        <span className={classNames(s.tabItem, {
+        <span onClick={onClick} className={classNames(s.tabItem, {
             [s[active]]: active
         })}>
             {children}

From cc36116ae468cfb172309f8592dfb95805769c1b Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Mon, 6 Sep 2021 14:09:17 +0700
Subject: [PATCH 03/19] :sparkles: feat: Account Navigation

---
 .../AccountNavigation/AccountNavigation.tsx   | 39 ++++++++++++++-----
 .../components/AccountNavigationItem.tsx      |  7 ++--
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
index fd289edc9..15ecd3a31 100644
--- a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
+++ b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useRef, RefObject, useEffect } from "react"
 import s from './AccountNavigation.module.scss'
 
 import AccountNavigationItem from './components/AccountNavigationItem' 
@@ -10,39 +10,58 @@ interface AccountNavigationProps {
 const AccountNavigation = ({  } : AccountNavigationProps) => {
     const active = "active", unActive = "";
 
-    const [item1Active, setItem1Active] = useState(active);
-    const [item2Active, setItem2Active] = useState(unActive);
+    const [item1Active, setItem1Active] = useState(unActive);
+    const [item2Active, setItem2Active] = useState(active);
     const [item3Active, setItem3Active] = useState(unActive);
 
+    const item1 = useRef<HTMLDivElement>(null);
+    const item2 = useRef<HTMLDivElement>(null);
+    const item3 = useRef<HTMLDivElement>(null);
+    const slider = useRef<HTMLDivElement>(null);
+
+    function slide(ref: RefObject<HTMLDivElement>) {        
+        const top = ref.current.offsetTop;
+        slider.current.style.top = top.toString()+"px";      
+    }
+
     function toggleItem1():void {
         setItem1Active(active)
 
         setItem2Active(unActive)
         setItem3Active(unActive)
+        slide(item1);
     }
     function toggleItem2():void {
         setItem2Active(active)
 
         setItem1Active(unActive)
         setItem3Active(unActive)
+        slide(item2);
     }
     function toggleItem3():void {
         setItem3Active(active)
 
         setItem1Active(unActive)
         setItem2Active(unActive)
+        slide(item3);
     }
+
+    useEffect(() => {
+        slide(item2);
+    }, [])
+
     return (
         <section className={s.accountNavigation}>
-            <div onClick={toggleItem1}>
-                <AccountNavigationItem active={item1Active}>Customer Information</AccountNavigationItem>
-                </div>
-            <div onClick={toggleItem2}>
-                <AccountNavigationItem active={item2Active}>Your Orders</AccountNavigationItem>
+            <div ref={item1}>
+                <AccountNavigationItem onClick={toggleItem1} active={item1Active}>Customer Information</AccountNavigationItem>
             </div>
-            <div onClick={toggleItem3}>
-                <AccountNavigationItem active={item3Active}>Favourites</AccountNavigationItem>
+            <div ref={item2}>
+                <AccountNavigationItem onClick={toggleItem2} active={item2Active}>Your Orders</AccountNavigationItem>
             </div>
+            <div ref={item3}>
+                <AccountNavigationItem onClick={toggleItem3} active={item3Active}>Favourites</AccountNavigationItem>
+            </div>
+            <div ref={slider} className={s.slider}></div>
         </section>
     )
 }
diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx
index 47cd537f0..8bb18cb58 100644
--- a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx
+++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { RefObject } from "react";
 import classNames from "classnames";
 import s from './AccountNavigationItem.module.scss'
 
@@ -6,11 +6,12 @@ interface AccountNavigationItemProps {
     children?: string;
     active?: string;
     target?: string;
+    onClick: () => void;
 }
 
-const AccountNavigationItem = ({ children, active="" } : AccountNavigationItemProps) => {
+const AccountNavigationItem = ({ children, active="", onClick } : AccountNavigationItemProps) => {
     return (
-        <div className={classNames(s.accountNavigationItem, {
+        <div onClick={onClick} className={classNames(s.accountNavigationItem, {
             [s[active]]:active
         })}>
             {children}

From 757cb68319d65c3acf895115b39dc351fd7762ad Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Tue, 7 Sep 2021 09:17:59 +0700
Subject: [PATCH 04/19] :sparkles: feat: collapse checkout custom form shipping
 form

:%s
---
 pages/test.tsx                                | 370 +-----------------
 .../InputCommon/InputCommon.module.scss       |   4 +-
 .../common/InputCommon/InputCommon.tsx        |   1 +
 .../common/ModalCommon/ModalCommon.tsx        |   2 +-
 .../hooks}/useClickOutSide.ts                 |   2 +-
 src/components/icons/Shipping.tsx             |  20 +
 src/components/icons/index.ts                 |   3 +-
 .../CheckoutBill/CheckoutBill.module.scss     |   0
 .../components/CheckoutBill/CheckoutBill.tsx  |  23 ++
 .../CheckoutCollapse.module.scss              |  39 ++
 .../CheckoutCollapse/CheckoutCollapse.tsx     |  48 +++
 .../CustomerInfoForm.module.scss              |  13 +
 .../CustomerInfoForm/CustomerInfoForm.tsx     |  51 +++
 .../PaymentInfoForm.module.scss               |   0
 .../PaymentInfoForm/PaymentInfoForm.tsx       |  15 +
 .../ShippingInfoForm.module.scss              |  36 ++
 .../ShippingInfoForm/ShippingInfoForm.tsx     |  93 +++++
 src/utils/types.utils.ts                      |  13 +
 18 files changed, 375 insertions(+), 358 deletions(-)
 rename src/{utils => components/hooks}/useClickOutSide.ts (92%)
 create mode 100644 src/components/icons/Shipping.tsx
 create mode 100644 src/components/modules/checkout/components/CheckoutBill/CheckoutBill.module.scss
 create mode 100644 src/components/modules/checkout/components/CheckoutBill/CheckoutBill.tsx
 create mode 100644 src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.module.scss
 create mode 100644 src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.tsx
 create mode 100644 src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.module.scss
 create mode 100644 src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.tsx
 create mode 100644 src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.module.scss
 create mode 100644 src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.tsx
 create mode 100644 src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.module.scss
 create mode 100644 src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.tsx

diff --git a/pages/test.tsx b/pages/test.tsx
index 24d55e9ac..7f40661be 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,15 +1,12 @@
 import { useState } from 'react'
 import {
-  ButtonCommon,
   CardItemCheckout,
   Layout,
-  ModalCommon,
-  ModalConfirm,
-  ModalInfo,
-  ProductCarousel,
-  ProductList,
 } from 'src/components/common'
 import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
+import CheckoutCollapse from 'src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse'
+import CustomerInfoForm from 'src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm'
+import ShippingInfoForm from 'src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm'
 import image5 from '../public/assets/images/image5.png'
 import image6 from '../public/assets/images/image6.png'
 import image7 from '../public/assets/images/image7.png'
@@ -22,146 +19,6 @@ const dataTest = [
     price: 'Rp 27.500',
     imageSrc: image7.src,
   },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-    {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image6.src,
-  },
   {
     name: 'Carrot',
     weight: '250g',
@@ -197,209 +54,6 @@ const dataTest = [
     price: 'Rp 27.500',
     imageSrc: image8.src,
   },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image6.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image6.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-  },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-  },
-  {
-    name: 'Cucumber',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image6.src,
-  },
 ]
 export default function Test() {
   const [visible, setVisible] = useState(false)
@@ -409,13 +63,23 @@ export default function Test() {
   const onOpen = () => {
     setVisible(true)
   }
+  const [visible2, setVisible2] = useState(false)
+  const onClose2 = () => {
+    setVisible2(false)
+  }
+  const onOpen2 = () => {
+    setVisible2(true)
+  }
   return (
     <>
       <CardItemCheckout {...dataTest[0]} quantity={2}/>
-      <div className="w-full" >
-        <ButtonCommon>
-          test
-        </ButtonCommon>
+      <div className="w-full" style={{padding: "0 3.2rem"}} >
+        <CheckoutCollapse id={1} visible={visible} onOpen={onOpen} onClose={onClose} title="Customer Information" isEdit={true}>
+          <CustomerInfoForm/>
+        </CheckoutCollapse>
+        <CheckoutCollapse id={2} visible={visible2} onOpen={onOpen2} onClose={onClose2} title="Shipping Information" isEdit={true}>
+          <ShippingInfoForm/>
+        </CheckoutCollapse>
       </div>
     </>
   )
diff --git a/src/components/common/InputCommon/InputCommon.module.scss b/src/components/common/InputCommon/InputCommon.module.scss
index acfc07647..6b12d2bbd 100644
--- a/src/components/common/InputCommon/InputCommon.module.scss
+++ b/src/components/common/InputCommon/InputCommon.module.scss
@@ -15,9 +15,9 @@
     .icon + .inputCommon {
       padding-left: 4.8rem;
     }
-
+    
     .inputCommon {
-      @apply block w-full transition-all duration-200 rounded;
+      @apply block w-full transition-all duration-200 rounded bg-white;
       padding: 1.2rem 1.6rem;
       border: 1px solid var(--border-line);
       &:hover,
diff --git a/src/components/common/InputCommon/InputCommon.tsx b/src/components/common/InputCommon/InputCommon.tsx
index 943b0a632..0389c99b3 100644
--- a/src/components/common/InputCommon/InputCommon.tsx
+++ b/src/components/common/InputCommon/InputCommon.tsx
@@ -6,6 +6,7 @@ import s from './InputCommon.module.scss';
 
 type Ref = {
     focus: () => void
+    getValue: () =>  string | number
 } | null;
 interface Props {
     children?: React.ReactNode,
diff --git a/src/components/common/ModalCommon/ModalCommon.tsx b/src/components/common/ModalCommon/ModalCommon.tsx
index 75222c162..7f9bc07d8 100644
--- a/src/components/common/ModalCommon/ModalCommon.tsx
+++ b/src/components/common/ModalCommon/ModalCommon.tsx
@@ -1,6 +1,6 @@
 import React, { useRef } from 'react'
 import { Close } from 'src/components/icons'
-import { useOnClickOutside } from 'src/utils/useClickOutSide'
+import { useOnClickOutside } from 'src/components/hooks/useClickOutSide'
 import s from './ModalCommon.module.scss'
 export interface ModalCommonProps {
   onClose: () => void
diff --git a/src/utils/useClickOutSide.ts b/src/components/hooks/useClickOutSide.ts
similarity index 92%
rename from src/utils/useClickOutSide.ts
rename to src/components/hooks/useClickOutSide.ts
index d68e742fb..ff69007a8 100644
--- a/src/utils/useClickOutSide.ts
+++ b/src/components/hooks/useClickOutSide.ts
@@ -1,5 +1,5 @@
 import { RefObject, useEffect } from 'react'
-import { MouseAndTouchEvent } from './types.utils'
+import { MouseAndTouchEvent } from '../../utils/types.utils'
 
 export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
 	ref: RefObject<T>,
diff --git a/src/components/icons/Shipping.tsx b/src/components/icons/Shipping.tsx
new file mode 100644
index 000000000..2288c142c
--- /dev/null
+++ b/src/components/icons/Shipping.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+const Shipping = () => {
+  return (
+    <svg
+      width="22"
+      height="20"
+      viewBox="0 0 22 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M22 10.5V15.5C22 15.7652 21.8946 16.0196 21.7071 16.2071C21.5196 16.3946 21.2652 16.5 21 16.5H20C20 17.2956 19.6839 18.0587 19.1213 18.6213C18.5587 19.1839 17.7956 19.5 17 19.5C16.2044 19.5 15.4413 19.1839 14.8787 18.6213C14.3161 18.0587 14 17.2956 14 16.5H8C8 17.2956 7.68393 18.0587 7.12132 18.6213C6.55871 19.1839 5.79565 19.5 5 19.5C4.20435 19.5 3.44129 19.1839 2.87868 18.6213C2.31607 18.0587 2 17.2956 2 16.5H1C0.734783 16.5 0.480429 16.3946 0.292892 16.2071C0.105356 16.0196 0 15.7652 0 15.5V3.5C0 2.70435 0.316071 1.94129 0.878679 1.37868C1.44129 0.816071 2.20435 0.5 3 0.5H12C12.7956 0.5 13.5587 0.816071 14.1213 1.37868C14.6839 1.94129 15 2.70435 15 3.5V5.5H17C17.4657 5.5 17.9251 5.60844 18.3416 5.81672C18.7582 6.025 19.1206 6.32741 19.4 6.7L21.8 9.9C21.8292 9.94347 21.8528 9.99052 21.87 10.04L21.93 10.15C21.9741 10.2615 21.9978 10.3801 22 10.5ZM6 16.5C6 16.3022 5.94135 16.1089 5.83147 15.9444C5.72159 15.78 5.56541 15.6518 5.38268 15.5761C5.19996 15.5004 4.99889 15.4806 4.80491 15.5192C4.61093 15.5578 4.43274 15.653 4.29289 15.7929C4.15304 15.9327 4.0578 16.1109 4.01921 16.3049C3.98063 16.4989 4.00043 16.7 4.07612 16.8827C4.15181 17.0654 4.27998 17.2216 4.44443 17.3315C4.60888 17.4414 4.80222 17.5 5 17.5C5.26522 17.5 5.51957 17.3946 5.70711 17.2071C5.89464 17.0196 6 16.7652 6 16.5ZM13 3.5C13 3.23478 12.8946 2.98043 12.7071 2.79289C12.5196 2.60536 12.2652 2.5 12 2.5H3C2.73478 2.5 2.48043 2.60536 2.29289 2.79289C2.10536 2.98043 2 3.23478 2 3.5V14.5H2.78C3.06118 14.1906 3.40391 13.9435 3.78622 13.7743C4.16852 13.6052 4.58195 13.5178 5 13.5178C5.41805 13.5178 5.83148 13.6052 6.21378 13.7743C6.59609 13.9435 6.93882 14.1906 7.22 14.5H13V3.5ZM15 9.5H19L17.8 7.9C17.7069 7.7758 17.5861 7.675 17.4472 7.60557C17.3084 7.53615 17.1552 7.5 17 7.5H15V9.5ZM18 16.5C18 16.3022 17.9414 16.1089 17.8315 15.9444C17.7216 15.78 17.5654 15.6518 17.3827 15.5761C17.2 15.5004 16.9989 15.4806 16.8049 15.5192C16.6109 15.5578 16.4327 15.653 16.2929 15.7929C16.153 15.9327 16.0578 16.1109 16.0192 16.3049C15.9806 16.4989 16.0004 16.7 16.0761 16.8827C16.1518 17.0654 16.28 17.2216 16.4444 17.3315C16.6089 17.4414 16.8022 17.5 17 17.5C17.2652 17.5 17.5196 17.3946 17.7071 17.2071C17.8946 17.0196 18 16.7652 18 16.5ZM20 11.5H15V14.28C15.5902 13.7526 16.3649 13.4797 17.1553 13.5209C17.9457 13.5621 18.6879 13.914 19.22 14.5H20V11.5Z"
+        fill="#141414"
+      />
+    </svg>
+  )
+}
+
+export default Shipping
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 3473bb29e..8bdbb1740 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -23,4 +23,5 @@ export { default as IconPasswordCross } from './IconPasswordCross'
 export { default as IconError } from './IconError'
 export { default as IconCheck } from './IconCheck'
 export { default as IconPlus } from './IconPlus'
-export { default as IconMinus } from './IconMinus'
\ No newline at end of file
+export { default as IconMinus } from './IconMinus'
+export { default as Shipping} from './Shipping'
\ No newline at end of file
diff --git a/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.module.scss b/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.module.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.tsx b/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.tsx
new file mode 100644
index 000000000..96bb74d3f
--- /dev/null
+++ b/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import s from "CheckoutBill.module.scss"
+interface CheckoutBillProps {
+    
+}
+
+const CheckoutBill = ({}: CheckoutBillProps) => {
+    return (
+        <div className={s.warpper}>
+            <div className={s.list}>
+
+            </div>
+            <div className={s.promo}>
+                
+            </div>
+            <div className={s.price}>
+
+            </div>
+        </div>
+    )
+}
+
+export default CheckoutBill
diff --git a/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.module.scss b/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.module.scss
new file mode 100644
index 000000000..b34630fed
--- /dev/null
+++ b/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.module.scss
@@ -0,0 +1,39 @@
+.warpper{
+    .header{
+        @apply flex justify-between;
+        padding-bottom: 3.2rem;
+        .left{
+            @apply flex items-center;
+            .number{
+                width: 3.2rem;
+                height: 3.2rem;
+                border-radius: 100%;
+                border: 1px solid var(--text-active);
+                color: var(--text-active);
+                @apply flex justify-center items-center font-bold;
+                &.visible{
+                    background-color: var(--text-active);
+                    border: none;
+                    color: var(--white);
+                }
+            }
+            .title{
+                padding-left: 2.4rem;
+                @apply font-bold select-none cursor-pointer;
+                color: var(--text-active);
+            }
+        }
+        .edit{
+            @apply font-bold cursor-pointer;
+            text-decoration-line: underline;
+            margin-right: 5.6rem;
+        }
+    }
+    .body{
+        height: 0;
+        @apply overflow-hidden;
+        &.show{
+            height: initial;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.tsx b/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.tsx
new file mode 100644
index 000000000..b4825730a
--- /dev/null
+++ b/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.tsx
@@ -0,0 +1,48 @@
+import classNames from 'classnames'
+import React from 'react'
+import s from './CheckoutCollapse.module.scss'
+interface CheckoutCollapseProps {
+  visible: boolean
+  id: number
+  children: React.ReactNode
+  title: string
+  isEdit: boolean
+  onClose: () => void
+  onOpen: () => void
+}
+
+const CheckoutCollapse = ({
+  children,
+  id,
+  title,
+  isEdit,
+  visible,
+  onOpen,
+	onClose,
+}: CheckoutCollapseProps) => {
+	const handleTitleClick = () => {
+		if(visible){
+			onClose && onClose()
+		}else{
+			onOpen && onOpen()
+		}
+	}
+  return (
+    <div className={s.warpper}>
+      <div className={s.header}>
+        <div className={s.left}>
+          <div className={classNames(s.number, { [`${s.visible}`]: visible })}>
+            {id}
+          </div>
+          <div className={s.title} onClick={handleTitleClick}>
+            {title}
+          </div>
+        </div>
+        {isEdit && <div className={s.edit}>{'Edit'}</div>}
+      </div>
+      <div className={classNames(s.body, { [`${s.show}`]: visible })}>{children}</div>
+    </div>
+  )
+}
+
+export default CheckoutCollapse
diff --git a/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.module.scss b/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.module.scss
new file mode 100644
index 000000000..f5b7ddcde
--- /dev/null
+++ b/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.module.scss
@@ -0,0 +1,13 @@
+@import "../../../../../styles/utilities";
+.warpper{
+    @apply u-form;
+    padding: 0 5.6rem;
+    .bottom{
+        margin-top: 2.4rem;
+        @apply flex justify-between items-center;
+        .note{
+            font-size: 1.2rem;
+            line-height: 2rem;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.tsx b/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.tsx
new file mode 100644
index 000000000..a821c66eb
--- /dev/null
+++ b/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.tsx
@@ -0,0 +1,51 @@
+import Link from 'next/link'
+import React, { useRef } from 'react'
+import { ButtonCommon, Inputcommon } from 'src/components/common'
+import InputCommon from 'src/components/common/InputCommon/InputCommon'
+import s from './CustomerInfoForm.module.scss'
+interface CustomerInfoFormProps {
+	onConfirm?: ()=>void
+}
+
+const CustomerInfoForm = ({}: CustomerInfoFormProps) => {
+	const nameRef =  useRef<React.ElementRef<typeof InputCommon>>(null);
+	const emailRef =  useRef<React.ElementRef<typeof InputCommon>>(null);
+
+
+
+	const handleConfirmClick = () => {
+		return {
+			name:nameRef?.current?.getValue(),
+			email:emailRef.current?.getValue()
+		}
+	}
+
+  return (
+    <div className={s.warpper}>
+      <div className={s.body}>
+        <Inputcommon type="text" placeholder="Full Name" ref={nameRef}/>
+        <Inputcommon type="text" placeholder="Email Address" ref={emailRef}/>
+      </div>
+      <div className={s.bottom}>
+        <div className={s.note}>
+          By clicking continue you agree to Casper's{' '}
+          {
+            <Link href="#">
+              <strong>terms and conditions</strong>
+            </Link>
+          }{' '}
+          and{' '}
+          {
+            <Link href="#">
+              <strong>privacy policy </strong>
+            </Link>
+          }
+          .
+        </div>
+        <ButtonCommon onClick={handleConfirmClick}>Continue to Shipping</ButtonCommon>
+      </div>
+    </div>
+  )
+}
+
+export default CustomerInfoForm
diff --git a/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.module.scss b/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.module.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.tsx b/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.tsx
new file mode 100644
index 000000000..4b8410177
--- /dev/null
+++ b/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+interface PaymentInfoFormProps {
+    
+}
+
+const PaymentInfoForm = (props: PaymentInfoFormProps) => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default PaymentInfoForm
diff --git a/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.module.scss b/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.module.scss
new file mode 100644
index 000000000..439fb2628
--- /dev/null
+++ b/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.module.scss
@@ -0,0 +1,36 @@
+@import "../../../../../styles/utilities";
+.warpper{
+    @apply u-form;
+    padding: 0 5.6rem;
+    .bottom{
+        margin-top: 2.4rem;
+        @apply flex justify-between items-center;
+        .note{
+            font-size: 1.2rem;
+            line-height: 2rem;
+        }
+    }
+    .line{
+        >div{
+            width: 50%;
+        }
+    }
+    .method{
+        width: 100%;
+        height: 5.6rem;
+        padding: 1.6rem;
+        border-radius: 0.8rem;
+        @apply flex justify-between items-center border border-solid border-line bg-gray;
+        .left{
+            @apply flex;
+            .name{
+                margin-left: 1.6rem;
+                color: var(--text-active);
+            }
+        }
+        .price{
+            font-weight: bold;
+            color: var(--text-active);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.tsx b/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.tsx
new file mode 100644
index 000000000..d8c858399
--- /dev/null
+++ b/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.tsx
@@ -0,0 +1,93 @@
+import React, { useRef } from 'react'
+import { ButtonCommon, Inputcommon, SelectCommon } from 'src/components/common'
+import s from './ShippingInfoForm.module.scss'
+import Link from 'next/link'
+import { CustomInputCommon } from 'src/utils/type.utils'
+import { Shipping } from 'src/components/icons'
+
+interface ShippingInfoFormProps {}
+
+const option = [
+  {
+    name: 'Hồ Chí Minh',
+  },
+  {
+    name: 'Hà Nội',
+  },
+]
+
+const ShippingInfoForm = ({}: ShippingInfoFormProps) => {
+  const addressRef = useRef<CustomInputCommon>(null)
+  const cityRef = useRef<CustomInputCommon>(null)
+  const stateRef = useRef<CustomInputCommon>(null)
+  const codeRef = useRef<CustomInputCommon>(null)
+  const phoneRef = useRef<CustomInputCommon>(null)
+  const handleConfirmClick = () => {
+    return {
+      address: addressRef?.current?.getValue(),
+      city: cityRef.current?.getValue(),
+      state: stateRef?.current?.getValue(),
+      code: codeRef.current?.getValue(),
+      phone: phoneRef?.current?.getValue(),
+    }
+  }
+
+  return (
+    <div className={s.warpper}>
+      <div className={s.body}>
+        <Inputcommon
+          type="text"
+          placeholder="Street Address"
+          ref={addressRef}
+        />
+        <Inputcommon type="text" placeholder="City" ref={cityRef} />
+        <div className={s.line}>
+          <SelectCommon option={option} type="custom" size="large">State</SelectCommon>
+          <Inputcommon type="text" placeholder="Zip Code" ref={codeRef} />
+        </div>
+        <Inputcommon
+          type="text"
+          placeholder="Phone (delivery contact)"
+          ref={phoneRef}
+        />
+				<div className={s.method}>
+					<div className={s.left}>
+						<div className={s.icon}>
+							<Shipping/>
+						</div>
+						<div className={s.name}>
+							Standard Delivery Method
+						</div>
+					</div>
+					<div className={s.right}>
+						<div className={s.price}>
+							Free
+						</div>
+					</div>
+				</div>
+      </div>
+      <div className={s.bottom}>
+        <div className={s.note}>
+          By clicking continue you agree to Casper's{' '}
+          {
+            <Link href="#">
+              <strong>terms and conditions</strong>
+            </Link>
+          }{' '}
+          and{' '}
+          {
+            <Link href="#">
+              <strong>privacy policy </strong>
+            </Link>
+          }
+          .
+        </div>
+        <ButtonCommon onClick={handleConfirmClick}>
+          Continue to Payment
+        </ButtonCommon>
+      </div>
+    </div>
+  )
+}
+
+export default ShippingInfoForm
diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts
index 2c99df73a..6fa8df0e8 100644
--- a/src/utils/types.utils.ts
+++ b/src/utils/types.utils.ts
@@ -20,4 +20,17 @@ export interface RecipeProps {
     imageSrc: string
 }
 
+export interface CheckOutForm {
+    name: string
+    email:string
+    address: string
+    city:string
+    state:string
+    code:number
+    phone:number
+    method:string
+    shipping_fee:number
+}
+
+
 export type MouseAndTouchEvent = MouseEvent | TouchEvent
\ No newline at end of file

From ec8b9fbcdf2707768e69e5cee363149d7f9dac3e Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <89386072+sonnguyenkieio@users.noreply.github.com>
Date: Tue, 7 Sep 2021 12:14:34 +0700
Subject: [PATCH 05/19] :sparkles: feat: Tab Common

---
 src/components/common/TabCommon/TabCommon.tsx | 77 +++++--------------
 1 file changed, 19 insertions(+), 58 deletions(-)

diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx
index 67fe107a6..60a2649f6 100644
--- a/src/components/common/TabCommon/TabCommon.tsx
+++ b/src/components/common/TabCommon/TabCommon.tsx
@@ -1,75 +1,36 @@
-import React, { useState, RefObject, useEffect, useRef } from "react"
+import React, { RefObject, useEffect } from "react"
 import s from './TabCommon.module.scss'
 
 import TabItem from './TabItem/TabItem'
 
 interface TabCommonProps {
-    changeTab: (target:string) => void;
+    tabs: {ref:RefObject<HTMLLIElement>, tabName: string, active: boolean, onClick: (tabIndex: number, tabPane: string) => void}[];
+    defaultActiveTab: number;
+    sliderRef : RefObject<HTMLDivElement>;
+    slideToTab: (ref: any) => void;
 }
 
-const TabCommon = ({ changeTab } : TabCommonProps) => {
-    const active = "active", unActive = "";
-    const [item1Active, setItem1Active] = useState(active);
-    const [item2Active, setItem2Active] = useState(unActive);
-    const [item3Active, setItem3Active] = useState(unActive);
-
-    const item1 = useRef<HTMLLIElement>(null);
-    const item2 = useRef<HTMLLIElement>(null);
-    const item3 = useRef<HTMLLIElement>(null);
-    const slider = useRef<HTMLDivElement>(null);
-
-    function slide(ref: RefObject<HTMLLIElement>) {
-        const width = ref.current.offsetWidth;
-        const left = ref.current.offsetLeft; 
-               
-        slider.current.style.width = (width-48).toString()+"px";
-        slider.current.style.left = left.toString()+"px";
-    }
-
-    function toggleItem1():void {
-        setItem1Active(active)
-        changeTab("waiting")
-
-        setItem2Active(unActive)
-        setItem3Active(unActive)
-        slide(item1)
-    }
-
-    function toggleItem2():void {
-        setItem2Active(active)
-        changeTab("delivering")
-
-        setItem1Active(unActive)
-        setItem3Active(unActive)
-        slide(item2)
-    }
-    function toggleItem3():void {
-        setItem3Active(active)
-        changeTab("delivered")
-
-        setItem1Active(unActive)
-        setItem2Active(unActive)
-        slide(item3)
-    }
+const TabCommon = ({ tabs, defaultActiveTab, sliderRef, slideToTab } : TabCommonProps) => {
 
     useEffect(() => {
-        slide(item1);
+        slideToTab(tabs[defaultActiveTab].ref);
     }, [])
 
     return (
         <ul className={s.tabCommon}>
-            <li ref={item1}>
-                <TabItem onClick={toggleItem1} active={item1Active}>Wait for Comfirmation</TabItem>
-            </li>
-            <li ref={item2}>
-                <TabItem onClick={toggleItem2} active={item2Active}>Delivering</TabItem>
-            </li>
-            <li ref={item3}>
-                <TabItem onClick={toggleItem3} active={item3Active}>Delivered</TabItem>
-            </li>
-            <div ref={slider} className={s.slider}></div>
+            {
+                tabs.map((tab) => {
+                    return (
+                        <li key={tab.tabName} ref={tab.ref}>
+                            <TabItem onClick={tab.onClick} active={tab.active}>{tab.tabName}</TabItem>
+                        </li>
+                    )
+                })
+            }
+    
+            <div ref={sliderRef} className={s.slider}></div>
         </ul>
     )
 }
 
-export default TabCommon;
\ No newline at end of file
+export default TabCommon;

From ceb144ee57d281267466b921ae51a82913804cc8 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <89386072+sonnguyenkieio@users.noreply.github.com>
Date: Tue, 7 Sep 2021 12:15:14 +0700
Subject: [PATCH 06/19] :sparkles: feat: Tab Common

---
 .../common/TabCommon/TabCommon.module.scss    | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/common/TabCommon/TabCommon.module.scss b/src/components/common/TabCommon/TabCommon.module.scss
index 9e5fbc1df..3d3473d82 100644
--- a/src/components/common/TabCommon/TabCommon.module.scss
+++ b/src/components/common/TabCommon/TabCommon.module.scss
@@ -1,15 +1,21 @@
 @import '../../../styles/utilities';
 
-.tabCommonOutSide {
-    @apply spacing-horizontal;
-    
-    .tabCommon {
-        @apply flex;
-        position: relative;
-        border-bottom: 2px solid #FBFBFB;
-        padding-top: 1.6rem;
-        padding-bottom: 1.6rem;
-        width: 100%;
+.tabCommon {
+    @apply flex;
+    position: relative;
+    border-bottom: 2px solid #FBFBFB;
+    padding-top: 1.6rem;
+    padding-bottom: 1.6rem;
+    width: 100%;
+
+    .slider {
+        @apply inline-block;
+        height: .2rem;
+        border-radius: 3px;
+        background-color: var(--primary);
+        position: absolute;
+        z-index: 1200;
+        bottom: 0;
+        transition: all .4s linear;
     }
 }
-

From 0eb29aed2967a064d7ba12bed4122362139ca0bd Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <89386072+sonnguyenkieio@users.noreply.github.com>
Date: Tue, 7 Sep 2021 12:16:04 +0700
Subject: [PATCH 07/19] :sparkles: feat: Tab Common

---
 src/components/common/TabCommon/TabItem/TabItem.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/common/TabCommon/TabItem/TabItem.tsx b/src/components/common/TabCommon/TabItem/TabItem.tsx
index 62de3c595..6881c2aca 100644
--- a/src/components/common/TabCommon/TabItem/TabItem.tsx
+++ b/src/components/common/TabCommon/TabItem/TabItem.tsx
@@ -1,22 +1,19 @@
-import classNames from "classnames";
 import React from "react"
 import s from './TabItem.module.scss'
 
 interface TabItemProps {
-    active: string;
+    active: boolean;
     children: string;
-    onClick: () => void;
+    onClick: (tabIndex: number, tabPane: string) => void;
 }
 
-const TabItem = ({ active = "", children, onClick } : TabItemProps) => {
+const TabItem = ({ active = false, children, onClick } : TabItemProps) => {
 
     return (
-        <span onClick={onClick} className={classNames(s.tabItem, {
-            [s[active]]: active
-        })}>
+        <span onClick={onClick} className={active ? s.tabItemActive : s.tabItem} >
             {children}
         </span>
     )
 }
 
-export default TabItem;
\ No newline at end of file
+export default TabItem;

From b4c2c9a4b30692b3f91543db03006326c2146fbd Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <89386072+sonnguyenkieio@users.noreply.github.com>
Date: Tue, 7 Sep 2021 12:16:26 +0700
Subject: [PATCH 08/19] :sparkles: feat: Tab Common

---
 .../common/TabCommon/TabItem/TabItem.module.scss     | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/common/TabCommon/TabItem/TabItem.module.scss b/src/components/common/TabCommon/TabItem/TabItem.module.scss
index efb10f1f4..bdbb0b66a 100644
--- a/src/components/common/TabCommon/TabItem/TabItem.module.scss
+++ b/src/components/common/TabCommon/TabItem/TabItem.module.scss
@@ -5,10 +5,16 @@
     padding-top: 1.6rem;
     padding-bottom: 1.6rem;
 
-    &.active {
-        @apply font-bold;
-        border-bottom: 2px solid var(--primary);
+    &:hover {
+        @apply cursor-pointer;
     }
+}
+
+.tabItemActive {
+    @apply font-bold;
+    margin-right: 4.8rem;
+    padding-top: 1.6rem;
+    padding-bottom: 1.6rem;
 
     &:hover {
         @apply cursor-pointer;

From 859f645c03189b2fd0f3b4ed8c75e01f85a84d11 Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Tue, 7 Sep 2021 14:41:53 +0700
Subject: [PATCH 09/19] :hammer: refactor: checkout

:%s
---
 pages/test.tsx                                | 46 ++++++++-----------
 .../CardItemCheckout/CardItemCheckout.tsx     |  2 +-
 .../CheckoutBill/CheckoutBill.module.scss     |  9 ++++
 .../common/CheckoutBill/CheckoutBill.tsx      | 30 ++++++++++++
 .../CheckoutCollapse.module.scss              |  0
 .../CheckoutCollapse/CheckoutCollapse.tsx     |  0
 .../CustomerInfoForm.module.scss              |  2 +-
 .../CustomerInfoForm/CustomerInfoForm.tsx     |  0
 .../PaymentInfoForm.module.scss               |  0
 .../PaymentInfoForm/PaymentInfoForm.tsx       |  4 +-
 .../ShippingInfoForm.module.scss              |  3 +-
 .../ShippingInfoForm/ShippingInfoForm.tsx     |  0
 src/components/common/index.ts                |  4 ++
 .../components/CheckoutBill/CheckoutBill.tsx  | 23 ----------
 .../CheckoutBill.module.scss => index.ts}     |  0
 15 files changed, 69 insertions(+), 54 deletions(-)
 create mode 100644 src/components/common/CheckoutBill/CheckoutBill.module.scss
 create mode 100644 src/components/common/CheckoutBill/CheckoutBill.tsx
 rename src/components/{modules/checkout/components => common}/CheckoutCollapse/CheckoutCollapse.module.scss (100%)
 rename src/components/{modules/checkout/components => common}/CheckoutCollapse/CheckoutCollapse.tsx (100%)
 rename src/components/{modules/checkout/components => common}/CustomerInfoForm/CustomerInfoForm.module.scss (84%)
 rename src/components/{modules/checkout/components => common}/CustomerInfoForm/CustomerInfoForm.tsx (100%)
 rename src/components/{modules/checkout/components => common}/PaymentInfoForm/PaymentInfoForm.module.scss (100%)
 rename src/components/{modules/checkout/components => common}/PaymentInfoForm/PaymentInfoForm.tsx (55%)
 rename src/components/{modules/checkout/components => common}/ShippingInfoForm/ShippingInfoForm.module.scss (94%)
 rename src/components/{modules/checkout/components => common}/ShippingInfoForm/ShippingInfoForm.tsx (100%)
 delete mode 100644 src/components/modules/checkout/components/CheckoutBill/CheckoutBill.tsx
 rename src/components/modules/checkout/{components/CheckoutBill/CheckoutBill.module.scss => index.ts} (100%)

diff --git a/pages/test.tsx b/pages/test.tsx
index 7f40661be..c1e1f5d5f 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,23 +1,26 @@
 import { useState } from 'react'
 import {
   CardItemCheckout,
+  CheckoutBill,
+  CustomerInfoForm,
   Layout,
+  ShippingInfoForm,
 } from 'src/components/common'
+import { CardItemCheckoutProps } from 'src/components/common/CardItemCheckout/CardItemCheckout'
+import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse'
 import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
-import CheckoutCollapse from 'src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse'
-import CustomerInfoForm from 'src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm'
-import ShippingInfoForm from 'src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm'
 import image5 from '../public/assets/images/image5.png'
 import image6 from '../public/assets/images/image6.png'
 import image7 from '../public/assets/images/image7.png'
 import image8 from '../public/assets/images/image8.png'
-const dataTest = [
+const dataTest:CardItemCheckoutProps[] = [
   {
     name: 'Tomato',
     weight: '250g',
     category: 'VEGGIE',
     price: 'Rp 27.500',
     imageSrc: image7.src,
+    quantity:10
   },
   {
     name: 'Carrot',
@@ -25,6 +28,7 @@ const dataTest = [
     category: 'VEGGIE',
     price: 'Rp 27.500',
     imageSrc: image7.src,
+    quantity:1
   },
   {
     name: 'Salad',
@@ -32,6 +36,7 @@ const dataTest = [
     category: 'VEGGIE',
     price: 'Rp 27.500',
     imageSrc: image8.src,
+    quantity:2
   },
   {
     name: 'Tomato',
@@ -39,20 +44,7 @@ const dataTest = [
     category: 'VEGGIE',
     price: 'Rp 27.500',
     imageSrc: image5.src,
-  },
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
+    quantity:9
   },
 ]
 export default function Test() {
@@ -72,14 +64,16 @@ export default function Test() {
   }
   return (
     <>
-      <CardItemCheckout {...dataTest[0]} quantity={2}/>
-      <div className="w-full" style={{padding: "0 3.2rem"}} >
-        <CheckoutCollapse id={1} visible={visible} onOpen={onOpen} onClose={onClose} title="Customer Information" isEdit={true}>
-          <CustomerInfoForm/>
-        </CheckoutCollapse>
-        <CheckoutCollapse id={2} visible={visible2} onOpen={onOpen2} onClose={onClose2} title="Shipping Information" isEdit={true}>
-          <ShippingInfoForm/>
-        </CheckoutCollapse>
+      <div className="w-full flex" style={{padding: "0 3.2rem"}} >
+        <div className="">
+          <CheckoutCollapse id={1} visible={visible} onOpen={onOpen} onClose={onClose} title="Customer Information" isEdit={true}>
+            <CustomerInfoForm/>
+          </CheckoutCollapse>
+          <CheckoutCollapse id={2} visible={visible2} onOpen={onOpen2} onClose={onClose2} title="Shipping Information" isEdit={true}>
+            <ShippingInfoForm/>
+          </CheckoutCollapse>
+        </div>
+        <CheckoutBill data={dataTest}/>
       </div>
     </>
   )
diff --git a/src/components/common/CardItemCheckout/CardItemCheckout.tsx b/src/components/common/CardItemCheckout/CardItemCheckout.tsx
index dd9fb14c5..e67057aa6 100644
--- a/src/components/common/CardItemCheckout/CardItemCheckout.tsx
+++ b/src/components/common/CardItemCheckout/CardItemCheckout.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import s from "./CardItemCheckout.module.scss"
 import { ProductProps } from 'src/utils/types.utils'
-interface CardItemCheckoutProps extends ProductProps {
+export interface CardItemCheckoutProps extends ProductProps {
     quantity:number
 }
 
diff --git a/src/components/common/CheckoutBill/CheckoutBill.module.scss b/src/components/common/CheckoutBill/CheckoutBill.module.scss
new file mode 100644
index 000000000..9c002b2e5
--- /dev/null
+++ b/src/components/common/CheckoutBill/CheckoutBill.module.scss
@@ -0,0 +1,9 @@
+.warpper{
+    max-width: 56.3rem;
+    @apply flex justify-between flex-col;
+    .bot{
+        .promo{
+            padding: 3.2rem;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/CheckoutBill/CheckoutBill.tsx b/src/components/common/CheckoutBill/CheckoutBill.tsx
new file mode 100644
index 000000000..5493565cd
--- /dev/null
+++ b/src/components/common/CheckoutBill/CheckoutBill.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import s from "./CheckoutBill.module.scss"
+import { CardItemCheckout } from '..'
+import { CardItemCheckoutProps } from '../CardItemCheckout/CardItemCheckout'
+
+interface CheckoutBillProps {
+    data: CardItemCheckoutProps[]
+}
+
+const CheckoutBill = ({data}: CheckoutBillProps) => {
+    return (
+        <div className={s.warpper}>
+            <div className={s.list}>
+                {data.map((item,index)=>{
+                    return <CardItemCheckout {...item} key={index}/>
+                })}
+            </div>
+            <div className={s.bot}>
+                <div className={s.promo}>
+                    
+                </div>
+                <div className={s.price}>
+    
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CheckoutBill
diff --git a/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.module.scss b/src/components/common/CheckoutCollapse/CheckoutCollapse.module.scss
similarity index 100%
rename from src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.module.scss
rename to src/components/common/CheckoutCollapse/CheckoutCollapse.module.scss
diff --git a/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.tsx b/src/components/common/CheckoutCollapse/CheckoutCollapse.tsx
similarity index 100%
rename from src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.tsx
rename to src/components/common/CheckoutCollapse/CheckoutCollapse.tsx
diff --git a/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.module.scss b/src/components/common/CustomerInfoForm/CustomerInfoForm.module.scss
similarity index 84%
rename from src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.module.scss
rename to src/components/common/CustomerInfoForm/CustomerInfoForm.module.scss
index f5b7ddcde..f31bc57b0 100644
--- a/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.module.scss
+++ b/src/components/common/CustomerInfoForm/CustomerInfoForm.module.scss
@@ -1,4 +1,4 @@
-@import "../../../../../styles/utilities";
+@import "../../../styles/utilities";
 .warpper{
     @apply u-form;
     padding: 0 5.6rem;
diff --git a/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.tsx b/src/components/common/CustomerInfoForm/CustomerInfoForm.tsx
similarity index 100%
rename from src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.tsx
rename to src/components/common/CustomerInfoForm/CustomerInfoForm.tsx
diff --git a/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.module.scss b/src/components/common/PaymentInfoForm/PaymentInfoForm.module.scss
similarity index 100%
rename from src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.module.scss
rename to src/components/common/PaymentInfoForm/PaymentInfoForm.module.scss
diff --git a/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.tsx b/src/components/common/PaymentInfoForm/PaymentInfoForm.tsx
similarity index 55%
rename from src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.tsx
rename to src/components/common/PaymentInfoForm/PaymentInfoForm.tsx
index 4b8410177..6ba65dc43 100644
--- a/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.tsx
+++ b/src/components/common/PaymentInfoForm/PaymentInfoForm.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
+import TabCommon from 'src/components/common/TabCommon/TabCommon'
 
 interface PaymentInfoFormProps {
     
 }
 
-const PaymentInfoForm = (props: PaymentInfoFormProps) => {
+const PaymentInfoForm = ({}: PaymentInfoFormProps) => {
     return (
         <div>
-            
         </div>
     )
 }
diff --git a/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.module.scss b/src/components/common/ShippingInfoForm/ShippingInfoForm.module.scss
similarity index 94%
rename from src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.module.scss
rename to src/components/common/ShippingInfoForm/ShippingInfoForm.module.scss
index 439fb2628..acda6bc56 100644
--- a/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.module.scss
+++ b/src/components/common/ShippingInfoForm/ShippingInfoForm.module.scss
@@ -1,4 +1,5 @@
-@import "../../../../../styles/utilities";
+@import "../../../styles/utilities";
+
 .warpper{
     @apply u-form;
     padding: 0 5.6rem;
diff --git a/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.tsx b/src/components/common/ShippingInfoForm/ShippingInfoForm.tsx
similarity index 100%
rename from src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.tsx
rename to src/components/common/ShippingInfoForm/ShippingInfoForm.tsx
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index bf7ac1d93..fb4f8daf5 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -37,3 +37,7 @@ export { default as CardItemCheckout} from './CardItemCheckout/CardItemCheckout'
 export { default as CardBlog} from './CardBlog/CardBlog'
 export { default as RelevantBlogPosts} from './RelevantBlogPosts/RelevantBlogPosts'
 export { default as CollapseCommon} from './CollapseCommon/CollapseCommon'
+export { default as CheckoutBill} from './CheckoutBill/CheckoutBill'
+export { default as CustomerInfoForm} from './CustomerInfoForm/CustomerInfoForm'
+export { default as ShippingInfoForm} from './ShippingInfoForm/ShippingInfoForm'
+export { default as PaymentInfoForm} from './PaymentInfoForm/PaymentInfoForm'
diff --git a/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.tsx b/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.tsx
deleted file mode 100644
index 96bb74d3f..000000000
--- a/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-import s from "CheckoutBill.module.scss"
-interface CheckoutBillProps {
-    
-}
-
-const CheckoutBill = ({}: CheckoutBillProps) => {
-    return (
-        <div className={s.warpper}>
-            <div className={s.list}>
-
-            </div>
-            <div className={s.promo}>
-                
-            </div>
-            <div className={s.price}>
-
-            </div>
-        </div>
-    )
-}
-
-export default CheckoutBill
diff --git a/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.module.scss b/src/components/modules/checkout/index.ts
similarity index 100%
rename from src/components/modules/checkout/components/CheckoutBill/CheckoutBill.module.scss
rename to src/components/modules/checkout/index.ts

From 69e685b55c03a4711e4b7eb87c2648f5304db85b Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <89386072+sonnguyenkieio@users.noreply.github.com>
Date: Tue, 7 Sep 2021 15:44:00 +0700
Subject: [PATCH 10/19] :sparkles: feat: Tab Common

---
 src/components/common/TabCommon/TabCommon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx
index 60a2649f6..b837004d6 100644
--- a/src/components/common/TabCommon/TabCommon.tsx
+++ b/src/components/common/TabCommon/TabCommon.tsx
@@ -4,7 +4,7 @@ import s from './TabCommon.module.scss'
 import TabItem from './TabItem/TabItem'
 
 interface TabCommonProps {
-    tabs: {ref:RefObject<HTMLLIElement>, tabName: string, active: boolean, onClick: (tabIndex: number, tabPane: string) => void}[];
+    tabs: {ref:RefObject<HTMLLIElement>, tabName: string, active: boolean, onClick: (tabIndex: number, tabPane?: string) => void}[];
     defaultActiveTab: number;
     sliderRef : RefObject<HTMLDivElement>;
     slideToTab: (ref: any) => void;

From 4f964266516723ce33fe81b2658e49ab106d72f3 Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Wed, 8 Sep 2021 09:25:46 +0700
Subject: [PATCH 11/19] :hammer: refactor: collapse checkout

:%s
---
 components/auth/ForgotPassword.tsx            |  78 -------
 components/auth/LoginView.tsx                 | 104 ---------
 components/auth/SignUpView.tsx                | 114 ---------
 components/auth/index.ts                      |   3 -
 components/cart/CartItem/CartItem.module.css  |  32 ---
 components/cart/CartItem/CartItem.tsx         | 151 ------------
 components/cart/CartItem/index.ts             |   1 -
 .../CartSidebarView.module.css                |  11 -
 .../cart/CartSidebarView/CartSidebarView.tsx  | 129 -----------
 components/cart/CartSidebarView/index.ts      |   1 -
 components/cart/index.ts                      |   2 -
 .../CheckoutSidebarView.module.css            |   7 -
 .../CheckoutSidebarView.tsx                   |  89 --------
 .../checkout/CheckoutSidebarView/index.ts     |   1 -
 .../PaymentMethodView.module.css              |  17 --
 .../PaymentMethodView/PaymentMethodView.tsx   |  84 -------
 .../checkout/PaymentMethodView/index.ts       |   1 -
 .../PaymentWidget/PaymentWidget.module.css    |   4 -
 .../checkout/PaymentWidget/PaymentWidget.tsx  |  29 ---
 components/checkout/PaymentWidget/index.ts    |   1 -
 .../ShippingView/ShippingView.module.css      |  21 --
 .../checkout/ShippingView/ShippingView.tsx    |  78 -------
 components/checkout/ShippingView/index.ts     |   1 -
 .../ShippingWidget/ShippingWidget.module.css  |   4 -
 .../ShippingWidget/ShippingWidget.tsx         |  33 ---
 components/checkout/ShippingWidget/index.ts   |   1 -
 components/common/Avatar/Avatar.tsx           |  24 --
 components/common/Avatar/index.ts             |   1 -
 .../common/FeatureBar/FeatureBar.module.css   |   7 -
 components/common/FeatureBar/FeatureBar.tsx   |  39 ----
 components/common/FeatureBar/index.ts         |   1 -
 components/common/Footer/Footer.module.css    |  13 --
 components/common/Footer/Footer.tsx           | 117 ----------
 components/common/Footer/index.ts             |   1 -
 components/common/Head/Head.tsx               |  18 --
 components/common/Head/index.ts               |   1 -
 .../HomeAllProductsGrid.module.css            |   7 -
 .../HomeAllProductsGrid.tsx                   |  47 ----
 .../common/HomeAllProductsGrid/index.ts       |   1 -
 .../common/I18nWidget/I18nWidget.module.css   |  46 ----
 components/common/I18nWidget/I18nWidget.tsx   | 101 --------
 components/common/I18nWidget/index.ts         |   1 -
 components/common/Layout/Layout.module.css    |   4 -
 components/common/Layout/Layout.tsx           | 126 ----------
 components/common/Layout/index.ts             |   1 -
 components/common/Navbar/Navbar.module.css    |  35 ---
 components/common/Navbar/Navbar.tsx           |  53 -----
 components/common/Navbar/NavbarRoot.tsx       |  33 ---
 components/common/Navbar/index.ts             |   1 -
 .../common/Searchbar/Searchbar.module.css     |  29 ---
 components/common/Searchbar/Searchbar.tsx     |  63 -----
 components/common/Searchbar/index.ts          |   1 -
 .../SidebarLayout/SidebarLayout.module.css    |  20 --
 .../common/SidebarLayout/SidebarLayout.tsx    |  50 ----
 components/common/SidebarLayout/index.ts      |   1 -
 .../common/UserNav/DropdownMenu.module.css    |  24 --
 components/common/UserNav/DropdownMenu.tsx    | 125 ----------
 components/common/UserNav/UserNav.module.css  |  40 ----
 components/common/UserNav/UserNav.tsx         |  63 -----
 components/common/UserNav/index.ts            |   1 -
 components/common/index.ts                    |   9 -
 components/icons/ArrowLeft.tsx                |  27 ---
 components/icons/ArrowRight.tsx               |  28 ---
 components/icons/Bag.tsx                      |  33 ---
 components/icons/Check.tsx                    |  21 --
 components/icons/ChevronDown.tsx              |  20 --
 components/icons/ChevronLeft.tsx              |  20 --
 components/icons/ChevronRight.tsx             |  20 --
 components/icons/ChevronUp.tsx                |  20 --
 components/icons/CreditCard.tsx               |  21 --
 components/icons/Cross.tsx                    |  21 --
 components/icons/DoubleChevron.tsx            |  22 --
 components/icons/Github.tsx                   |  20 --
 components/icons/Heart.tsx                    |  22 --
 components/icons/Info.tsx                     |  22 --
 components/icons/MapPin.tsx                   |  20 --
 components/icons/Minus.tsx                    |  15 --
 components/icons/Moon.tsx                     |  20 --
 components/icons/Plus.tsx                     |  22 --
 components/icons/Star.tsx                     |  16 --
 components/icons/Sun.tsx                      |  28 ---
 components/icons/Trash.tsx                    |  43 ----
 components/icons/Vercel.tsx                   |  40 ----
 components/icons/index.ts                     |  22 --
 .../ProductCard/ProductCard.module.css        | 114 ---------
 .../product/ProductCard/ProductCard.tsx       | 132 -----------
 components/product/ProductCard/index.ts       |   1 -
 .../product/ProductOptions/ProductOptions.tsx |  50 ----
 components/product/ProductOptions/index.ts    |   1 -
 .../ProductSidebar/ProductSidebar.module.css  |  84 -------
 .../product/ProductSidebar/ProductSidebar.tsx |  89 --------
 components/product/ProductSidebar/index.ts    |   1 -
 .../ProductSlider/ProductSlider.module.css    |  64 ------
 .../product/ProductSlider/ProductSlider.tsx   | 136 -----------
 components/product/ProductSlider/index.ts     |   1 -
 .../ProductSliderControl.module.css           |  29 ---
 .../ProductSliderControl.tsx                  |  31 ---
 .../product/ProductSliderControl/index.ts     |   1 -
 .../product/ProductTag/ProductTag.module.css  |  30 ---
 components/product/ProductTag/ProductTag.tsx  |  36 ---
 components/product/ProductTag/index.ts        |   1 -
 .../ProductView/ProductView.module.css        |  60 -----
 .../product/ProductView/ProductView.tsx       | 109 ---------
 components/product/ProductView/index.ts       |   1 -
 components/product/Swatch/Swatch.module.css   |  54 -----
 components/product/Swatch/Swatch.tsx          |  62 -----
 components/product/Swatch/index.ts            |   1 -
 components/product/helpers.ts                 |  32 ---
 components/product/index.ts                   |   5 -
 components/ui/Button/Button.module.css        |  48 ----
 components/ui/Button/Button.tsx               |  73 ------
 components/ui/Button/index.ts                 |   2 -
 components/ui/Collapse/Collapse.module.css    |  25 --
 components/ui/Collapse/Collapse.tsx           |  46 ----
 components/ui/Collapse/index.ts               |   2 -
 components/ui/Container/Container.tsx         |  27 ---
 components/ui/Container/index.ts              |   1 -
 components/ui/Grid/Grid.module.css            | 154 -------------
 components/ui/Grid/Grid.tsx                   |  34 ---
 components/ui/Grid/index.ts                   |   1 -
 components/ui/Hero/Hero.module.css            |  30 ---
 components/ui/Hero/Hero.tsx                   |  33 ---
 components/ui/Hero/index.ts                   |   1 -
 components/ui/Input/Input.module.css          |   7 -
 components/ui/Input/Input.tsx                 |  37 ---
 components/ui/Input/index.ts                  |   1 -
 components/ui/Link/Link.tsx                   |  11 -
 components/ui/Link/index.ts                   |   1 -
 .../ui/LoadingDots/LoadingDots.module.css     |  33 ---
 components/ui/LoadingDots/LoadingDots.tsx     |  13 --
 components/ui/LoadingDots/index.ts            |   1 -
 components/ui/Logo/Logo.tsx                   |  21 --
 components/ui/Logo/index.ts                   |   1 -
 components/ui/Marquee/Marquee.module.css      |  22 --
 components/ui/Marquee/Marquee.tsx             |  39 ----
 components/ui/Marquee/index.ts                |   1 -
 components/ui/Modal/Modal.module.css          |  17 --
 components/ui/Modal/Modal.tsx                 |  59 -----
 components/ui/Modal/index.ts                  |   1 -
 components/ui/Quantity/Quantity.module.css    |  27 ---
 components/ui/Quantity/Quantity.tsx           |  62 -----
 components/ui/Quantity/index.ts               |   2 -
 components/ui/README.md                       |   3 -
 components/ui/Rating/Rating.tsx               |  27 ---
 components/ui/Rating/index.ts                 |   2 -
 components/ui/Sidebar/Sidebar.module.css      |  14 --
 components/ui/Sidebar/Sidebar.tsx             |  46 ----
 components/ui/Sidebar/index.ts                |   1 -
 components/ui/Skeleton/Skeleton.module.css    |  48 ----
 components/ui/Skeleton/Skeleton.tsx           |  57 -----
 components/ui/Skeleton/index.ts               |   1 -
 components/ui/Text/Text.module.css            |  15 --
 components/ui/Text/Text.tsx                   |  70 ------
 components/ui/Text/index.ts                   |   1 -
 components/ui/context.tsx                     | 216 ------------------
 components/ui/index.ts                        |  16 --
 .../WishlistButton/WishlistButton.module.css  |  33 ---
 .../WishlistButton/WishlistButton.tsx         |  84 -------
 components/wishlist/WishlistButton/index.ts   |   1 -
 components/wishlist/index.ts                  |   1 -
 grocery-vercel-commerce                       |   1 -
 next.config.js                                |   4 +
 pages/404.tsx                                 |  22 +-
 pages/[...pages].tsx                          |  86 -------
 pages/cart.tsx                                |  50 ----
 pages/demo.tsx                                |  13 ++
 pages/index.tsx                               |  32 +--
 pages/product/[slug].tsx                      |  82 +------
 pages/test.tsx                                |  23 +-
 .../BreadcrumbCommon.module.scss              |   6 +-
 .../BreadcrumbCommon/BreadcrumbCommon.tsx     |  45 ++--
 .../BreadcrumbItem/BreadcrumbItem.module.scss |   5 +
 .../BreadcrumbItem/BreadcrumbItem.tsx         |   3 +-
 .../BreadcrumbSeparator.tsx                   |   2 +-
 .../ButtonCommon/ButtonCommon.module.scss     |   8 +-
 .../CarouselCommon/CarouselCommon.module.scss |   1 +
 .../common/CartDrawer/CartDrawer.module.scss  |  12 +
 .../common/CartDrawer/CartDrawer.tsx          |  35 +++
 .../CartCheckoutButton.module.scss            |   6 +
 .../CartCheckoutButton/CartCheckoutButton.tsx |  13 ++
 .../CartMessage/CartMessage.module.scss       |  16 ++
 .../components/CartMessage/CartMessage.tsx    |  18 ++
 .../CartRecommendation.module.scss            |  26 +++
 .../CartRecommendation/CartRecommendation.tsx |  43 ++++
 .../ProductCartItem.module.scss               |  54 +++++
 .../ProductCartItem/ProductCartItem.tsx       |  56 +++++
 .../ProductsInCart/ProductsInCart.module.scss |   9 +
 .../ProductsInCart/ProductsInCart.tsx         |  30 +++
 .../CheckoutBill/CheckoutBill.module.scss     |  37 ++-
 .../common/CheckoutBill/CheckoutBill.tsx      |  54 +++--
 .../CheckoutCollapse/CheckoutCollapse.tsx     |  15 +-
 .../CustomerInfoForm/CustomerInfoForm.tsx     |  33 +--
 .../DrawerCommon/DrawerCommon.module.scss     |  52 +++++
 .../common/DrawerCommon/DrawerCommon.tsx      |  36 +++
 src/components/common/Header/Header.tsx       |   2 +-
 .../HeaderMenu/HeaderMenu.module.scss         |   5 +-
 .../components/HeaderMenu/HeaderMenu.tsx      |   7 +-
 .../ImgWithLink/ImgWithLink.module.scss       |   9 +
 .../common/ImgWithLink/ImgWithLink.tsx        |  18 ++
 src/components/common/Layout/Layout.tsx       |  16 +-
 .../InfoProducts/InfoProducts.module.scss     |  23 ++
 .../InfoProducts/InfoProducts.tsx             |  26 +++
 .../ListProductWithInfo.module.scss           |  48 ++++
 .../ListProductWithInfo.tsx                   |  51 +++++
 src/components/common/Logo/Logo.module.scss   |   8 +-
 src/components/common/Logo/Logo.tsx           |  20 +-
 .../MenuDropdown/MenuDropdown.module.scss     |  13 ++
 .../common/MenuDropdown/MenuDropdown.tsx      |   4 +-
 .../ProductCard/ProductCard.module.scss       |   6 +-
 .../common/ProductCard/ProductCard.tsx        |   9 +
 .../ProductNotSell/ProductNotSell.module.scss |  27 +++
 .../ProductNotSell/ProductNotSell.tsx         |  28 +++
 .../common/QuanittyInput/QuanittyInput.tsx    |   6 +-
 .../common/RecipeCard/RecipeCard.module.scss  |   3 +
 .../RecipeDetail/RecipeDetail.module.scss     |   0
 .../common/RecipeDetail/RecipeDetail.tsx      |  23 ++
 .../RecipeBriefInfo.module.scss               |  19 ++
 .../RecipeBriefInfo/RecipeBriefInfo.tsx       |  29 +++
 .../RecipeDetailInfo.module.scss              |  61 +++++
 .../RecipeDetailInfo/RecipeDetailInfo.tsx     |  59 +++++
 .../RecipeIngredient.module.scss              |  21 ++
 .../RecipeIngredient/RecipeIngredient.tsx     |  33 +++
 .../common/ScrollToTop/ScrollTarget.tsx       |  15 --
 .../common/ScrollToTop/ScrollToTop.tsx        |   7 +-
 .../ShippingInfoForm/ShippingInfoForm.tsx     |  22 +-
 .../ViewAllItem/ViewAllItem.module.scss       |   2 +-
 src/components/common/index.ts                |   5 +-
 src/components/hooks/index.ts                 |   1 +
 src/components/hooks/useModalCommon.tsx       |   4 +-
 src/components/icons/IconCirclePlus.tsx       |  20 ++
 src/components/icons/IconClose.tsx            |  20 ++
 src/components/icons/IconDelete.tsx           |  11 +
 src/components/icons/IconLocation.tsx         |  11 +
 src/components/icons/IconMinus.tsx            |   8 +-
 src/components/icons/IconPeople.tsx           |  11 +
 src/components/icons/IconPlus.tsx             |   8 +-
 src/components/icons/IconTime.tsx             |  11 +
 src/components/icons/index.ts                 |   8 +-
 .../CheckoutInfo/CheckoutInfo.module.scss     |   7 +
 .../checkout/CheckoutInfo/CheckoutInfo.tsx    |  87 +++++++
 src/components/modules/checkout/index.ts      |   1 +
 .../ProductInfoDetail.module.scss             |  10 +
 .../ProductInfoDetail/ProductInfoDetail.tsx   |  20 ++
 .../ProductImgs/ProductImgs.module.scss       |   9 +
 .../components/ProductImgs/ProductImgs.tsx    |  40 ++++
 .../ProductInfo/ProductInfo.module.scss       |  81 +++++++
 .../components/ProductInfo/ProductInfo.tsx    |  46 ++++
 .../RecommendedRecipes.module.scss            |  27 +++
 .../RecommendedRecipes/RecommendedRecipes.tsx |  51 +++++
 .../ReleventProducts/ReleventProducts.tsx     |  15 ++
 .../ViewedProducts/ViewedProducts.tsx         |  15 ++
 .../modules/product-detail/index.ts           |   4 +
 src/styles/_base.scss                         |   7 +-
 src/styles/_utilities.scss                    |  24 ++
 src/utils/constanst.utils.ts                  |   3 +
 src/utils/demo-data.ts                        | 215 +++++++++++++++++
 src/utils/language.utils.ts                   |   2 +
 src/utils/types.utils.ts                      |  26 ++-
 tailwind.config.js                            |  17 +-
 259 files changed, 1939 insertions(+), 5672 deletions(-)
 delete mode 100644 components/auth/ForgotPassword.tsx
 delete mode 100644 components/auth/LoginView.tsx
 delete mode 100644 components/auth/SignUpView.tsx
 delete mode 100644 components/auth/index.ts
 delete mode 100644 components/cart/CartItem/CartItem.module.css
 delete mode 100644 components/cart/CartItem/CartItem.tsx
 delete mode 100644 components/cart/CartItem/index.ts
 delete mode 100644 components/cart/CartSidebarView/CartSidebarView.module.css
 delete mode 100644 components/cart/CartSidebarView/CartSidebarView.tsx
 delete mode 100644 components/cart/CartSidebarView/index.ts
 delete mode 100644 components/cart/index.ts
 delete mode 100644 components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css
 delete mode 100644 components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
 delete mode 100644 components/checkout/CheckoutSidebarView/index.ts
 delete mode 100644 components/checkout/PaymentMethodView/PaymentMethodView.module.css
 delete mode 100644 components/checkout/PaymentMethodView/PaymentMethodView.tsx
 delete mode 100644 components/checkout/PaymentMethodView/index.ts
 delete mode 100644 components/checkout/PaymentWidget/PaymentWidget.module.css
 delete mode 100644 components/checkout/PaymentWidget/PaymentWidget.tsx
 delete mode 100644 components/checkout/PaymentWidget/index.ts
 delete mode 100644 components/checkout/ShippingView/ShippingView.module.css
 delete mode 100644 components/checkout/ShippingView/ShippingView.tsx
 delete mode 100644 components/checkout/ShippingView/index.ts
 delete mode 100644 components/checkout/ShippingWidget/ShippingWidget.module.css
 delete mode 100644 components/checkout/ShippingWidget/ShippingWidget.tsx
 delete mode 100644 components/checkout/ShippingWidget/index.ts
 delete mode 100644 components/common/Avatar/Avatar.tsx
 delete mode 100644 components/common/Avatar/index.ts
 delete mode 100644 components/common/FeatureBar/FeatureBar.module.css
 delete mode 100644 components/common/FeatureBar/FeatureBar.tsx
 delete mode 100644 components/common/FeatureBar/index.ts
 delete mode 100644 components/common/Footer/Footer.module.css
 delete mode 100644 components/common/Footer/Footer.tsx
 delete mode 100644 components/common/Footer/index.ts
 delete mode 100644 components/common/Head/Head.tsx
 delete mode 100644 components/common/Head/index.ts
 delete mode 100644 components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css
 delete mode 100644 components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
 delete mode 100644 components/common/HomeAllProductsGrid/index.ts
 delete mode 100644 components/common/I18nWidget/I18nWidget.module.css
 delete mode 100644 components/common/I18nWidget/I18nWidget.tsx
 delete mode 100644 components/common/I18nWidget/index.ts
 delete mode 100644 components/common/Layout/Layout.module.css
 delete mode 100644 components/common/Layout/Layout.tsx
 delete mode 100644 components/common/Layout/index.ts
 delete mode 100644 components/common/Navbar/Navbar.module.css
 delete mode 100644 components/common/Navbar/Navbar.tsx
 delete mode 100644 components/common/Navbar/NavbarRoot.tsx
 delete mode 100644 components/common/Navbar/index.ts
 delete mode 100644 components/common/Searchbar/Searchbar.module.css
 delete mode 100644 components/common/Searchbar/Searchbar.tsx
 delete mode 100644 components/common/Searchbar/index.ts
 delete mode 100644 components/common/SidebarLayout/SidebarLayout.module.css
 delete mode 100644 components/common/SidebarLayout/SidebarLayout.tsx
 delete mode 100644 components/common/SidebarLayout/index.ts
 delete mode 100644 components/common/UserNav/DropdownMenu.module.css
 delete mode 100644 components/common/UserNav/DropdownMenu.tsx
 delete mode 100644 components/common/UserNav/UserNav.module.css
 delete mode 100644 components/common/UserNav/UserNav.tsx
 delete mode 100644 components/common/UserNav/index.ts
 delete mode 100644 components/common/index.ts
 delete mode 100644 components/icons/ArrowLeft.tsx
 delete mode 100644 components/icons/ArrowRight.tsx
 delete mode 100644 components/icons/Bag.tsx
 delete mode 100644 components/icons/Check.tsx
 delete mode 100644 components/icons/ChevronDown.tsx
 delete mode 100644 components/icons/ChevronLeft.tsx
 delete mode 100644 components/icons/ChevronRight.tsx
 delete mode 100644 components/icons/ChevronUp.tsx
 delete mode 100644 components/icons/CreditCard.tsx
 delete mode 100644 components/icons/Cross.tsx
 delete mode 100644 components/icons/DoubleChevron.tsx
 delete mode 100644 components/icons/Github.tsx
 delete mode 100644 components/icons/Heart.tsx
 delete mode 100644 components/icons/Info.tsx
 delete mode 100644 components/icons/MapPin.tsx
 delete mode 100644 components/icons/Minus.tsx
 delete mode 100644 components/icons/Moon.tsx
 delete mode 100644 components/icons/Plus.tsx
 delete mode 100644 components/icons/Star.tsx
 delete mode 100644 components/icons/Sun.tsx
 delete mode 100644 components/icons/Trash.tsx
 delete mode 100644 components/icons/Vercel.tsx
 delete mode 100644 components/icons/index.ts
 delete mode 100644 components/product/ProductCard/ProductCard.module.css
 delete mode 100644 components/product/ProductCard/ProductCard.tsx
 delete mode 100644 components/product/ProductCard/index.ts
 delete mode 100644 components/product/ProductOptions/ProductOptions.tsx
 delete mode 100644 components/product/ProductOptions/index.ts
 delete mode 100644 components/product/ProductSidebar/ProductSidebar.module.css
 delete mode 100644 components/product/ProductSidebar/ProductSidebar.tsx
 delete mode 100644 components/product/ProductSidebar/index.ts
 delete mode 100644 components/product/ProductSlider/ProductSlider.module.css
 delete mode 100644 components/product/ProductSlider/ProductSlider.tsx
 delete mode 100644 components/product/ProductSlider/index.ts
 delete mode 100644 components/product/ProductSliderControl/ProductSliderControl.module.css
 delete mode 100644 components/product/ProductSliderControl/ProductSliderControl.tsx
 delete mode 100644 components/product/ProductSliderControl/index.ts
 delete mode 100644 components/product/ProductTag/ProductTag.module.css
 delete mode 100644 components/product/ProductTag/ProductTag.tsx
 delete mode 100644 components/product/ProductTag/index.ts
 delete mode 100644 components/product/ProductView/ProductView.module.css
 delete mode 100644 components/product/ProductView/ProductView.tsx
 delete mode 100644 components/product/ProductView/index.ts
 delete mode 100644 components/product/Swatch/Swatch.module.css
 delete mode 100644 components/product/Swatch/Swatch.tsx
 delete mode 100644 components/product/Swatch/index.ts
 delete mode 100644 components/product/helpers.ts
 delete mode 100644 components/product/index.ts
 delete mode 100644 components/ui/Button/Button.module.css
 delete mode 100644 components/ui/Button/Button.tsx
 delete mode 100644 components/ui/Button/index.ts
 delete mode 100644 components/ui/Collapse/Collapse.module.css
 delete mode 100644 components/ui/Collapse/Collapse.tsx
 delete mode 100644 components/ui/Collapse/index.ts
 delete mode 100644 components/ui/Container/Container.tsx
 delete mode 100644 components/ui/Container/index.ts
 delete mode 100644 components/ui/Grid/Grid.module.css
 delete mode 100644 components/ui/Grid/Grid.tsx
 delete mode 100644 components/ui/Grid/index.ts
 delete mode 100644 components/ui/Hero/Hero.module.css
 delete mode 100644 components/ui/Hero/Hero.tsx
 delete mode 100644 components/ui/Hero/index.ts
 delete mode 100644 components/ui/Input/Input.module.css
 delete mode 100644 components/ui/Input/Input.tsx
 delete mode 100644 components/ui/Input/index.ts
 delete mode 100644 components/ui/Link/Link.tsx
 delete mode 100644 components/ui/Link/index.ts
 delete mode 100644 components/ui/LoadingDots/LoadingDots.module.css
 delete mode 100644 components/ui/LoadingDots/LoadingDots.tsx
 delete mode 100644 components/ui/LoadingDots/index.ts
 delete mode 100644 components/ui/Logo/Logo.tsx
 delete mode 100644 components/ui/Logo/index.ts
 delete mode 100644 components/ui/Marquee/Marquee.module.css
 delete mode 100644 components/ui/Marquee/Marquee.tsx
 delete mode 100644 components/ui/Marquee/index.ts
 delete mode 100644 components/ui/Modal/Modal.module.css
 delete mode 100644 components/ui/Modal/Modal.tsx
 delete mode 100644 components/ui/Modal/index.ts
 delete mode 100644 components/ui/Quantity/Quantity.module.css
 delete mode 100644 components/ui/Quantity/Quantity.tsx
 delete mode 100644 components/ui/Quantity/index.ts
 delete mode 100644 components/ui/README.md
 delete mode 100644 components/ui/Rating/Rating.tsx
 delete mode 100644 components/ui/Rating/index.ts
 delete mode 100644 components/ui/Sidebar/Sidebar.module.css
 delete mode 100644 components/ui/Sidebar/Sidebar.tsx
 delete mode 100644 components/ui/Sidebar/index.ts
 delete mode 100644 components/ui/Skeleton/Skeleton.module.css
 delete mode 100644 components/ui/Skeleton/Skeleton.tsx
 delete mode 100644 components/ui/Skeleton/index.ts
 delete mode 100644 components/ui/Text/Text.module.css
 delete mode 100644 components/ui/Text/Text.tsx
 delete mode 100644 components/ui/Text/index.ts
 delete mode 100644 components/ui/context.tsx
 delete mode 100644 components/ui/index.ts
 delete mode 100644 components/wishlist/WishlistButton/WishlistButton.module.css
 delete mode 100644 components/wishlist/WishlistButton/WishlistButton.tsx
 delete mode 100644 components/wishlist/WishlistButton/index.ts
 delete mode 100644 components/wishlist/index.ts
 delete mode 160000 grocery-vercel-commerce
 delete mode 100644 pages/[...pages].tsx
 delete mode 100644 pages/cart.tsx
 create mode 100644 pages/demo.tsx
 create mode 100644 src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.module.scss
 create mode 100644 src/components/common/CartDrawer/CartDrawer.module.scss
 create mode 100644 src/components/common/CartDrawer/CartDrawer.tsx
 create mode 100644 src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss
 create mode 100644 src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx
 create mode 100644 src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss
 create mode 100644 src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx
 create mode 100644 src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
 create mode 100644 src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx
 create mode 100644 src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss
 create mode 100644 src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx
 create mode 100644 src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss
 create mode 100644 src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx
 create mode 100644 src/components/common/DrawerCommon/DrawerCommon.module.scss
 create mode 100644 src/components/common/DrawerCommon/DrawerCommon.tsx
 create mode 100644 src/components/common/ImgWithLink/ImgWithLink.module.scss
 create mode 100644 src/components/common/ImgWithLink/ImgWithLink.tsx
 create mode 100644 src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss
 create mode 100644 src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx
 create mode 100644 src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
 create mode 100644 src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
 create mode 100644 src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss
 create mode 100644 src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx
 rename components/ui/Rating/Rating.module.css => src/components/common/RecipeDetail/RecipeDetail.module.scss (100%)
 create mode 100644 src/components/common/RecipeDetail/RecipeDetail.tsx
 create mode 100644 src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss
 create mode 100644 src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx
 create mode 100644 src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss
 create mode 100644 src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx
 create mode 100644 src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss
 create mode 100644 src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx
 delete mode 100644 src/components/common/ScrollToTop/ScrollTarget.tsx
 create mode 100644 src/components/hooks/index.ts
 create mode 100644 src/components/icons/IconCirclePlus.tsx
 create mode 100644 src/components/icons/IconClose.tsx
 create mode 100644 src/components/icons/IconDelete.tsx
 create mode 100644 src/components/icons/IconLocation.tsx
 create mode 100644 src/components/icons/IconPeople.tsx
 create mode 100644 src/components/icons/IconTime.tsx
 create mode 100644 src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss
 create mode 100644 src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
 create mode 100644 src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss
 create mode 100644 src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx
 create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss
 create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
 create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss
 create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx
 create mode 100644 src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss
 create mode 100644 src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx
 create mode 100644 src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx
 create mode 100644 src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx
 create mode 100644 src/components/modules/product-detail/index.ts
 create mode 100644 src/utils/demo-data.ts

diff --git a/components/auth/ForgotPassword.tsx b/components/auth/ForgotPassword.tsx
deleted file mode 100644
index dbac371c7..000000000
--- a/components/auth/ForgotPassword.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { FC, useEffect, useState, useCallback } from 'react'
-import { validate } from 'email-validator'
-import { useUI } from '@components/ui/context'
-import { Logo, Button, Input } from '@components/ui'
-
-interface Props {}
-
-const ForgotPassword: FC<Props> = () => {
-  // Form State
-  const [email, setEmail] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [message, setMessage] = useState('')
-  const [dirty, setDirty] = useState(false)
-  const [disabled, setDisabled] = useState(false)
-
-  const { setModalView, closeModal } = useUI()
-
-  const handleResetPassword = async (e: React.SyntheticEvent<EventTarget>) => {
-    e.preventDefault()
-
-    if (!dirty && !disabled) {
-      setDirty(true)
-      handleValidation()
-    }
-  }
-
-  const handleValidation = useCallback(() => {
-    // Unable to send form unless fields are valid.
-    if (dirty) {
-      setDisabled(!validate(email))
-    }
-  }, [email, dirty])
-
-  useEffect(() => {
-    handleValidation()
-  }, [handleValidation])
-
-  return (
-    <form
-      onSubmit={handleResetPassword}
-      className="w-80 flex flex-col justify-between p-3"
-    >
-      <div className="flex justify-center pb-12 ">
-        <Logo width="64px" height="64px" />
-      </div>
-      <div className="flex flex-col space-y-4">
-        {message && (
-          <div className="text-red border border-red p-3">{message}</div>
-        )}
-
-        <Input placeholder="Email" onChange={setEmail} type="email" />
-        <div className="pt-2 w-full flex flex-col">
-          <Button
-            variant="slim"
-            type="submit"
-            loading={loading}
-            disabled={disabled}
-          >
-            Recover Password
-          </Button>
-        </div>
-
-        <span className="pt-3 text-center text-sm">
-          <span className="text-accent-7">Do you have an account?</span>
-          {` `}
-          <a
-            className="text-accent-9 font-bold hover:underline cursor-pointer"
-            onClick={() => setModalView('LOGIN_VIEW')}
-          >
-            Log In
-          </a>
-        </span>
-      </div>
-    </form>
-  )
-}
-
-export default ForgotPassword
diff --git a/components/auth/LoginView.tsx b/components/auth/LoginView.tsx
deleted file mode 100644
index 35ff98f66..000000000
--- a/components/auth/LoginView.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { FC, useEffect, useState, useCallback } from 'react'
-import { Logo, Button, Input } from '@components/ui'
-import useLogin from '@framework/auth/use-login'
-import { useUI } from '@components/ui/context'
-import { validate } from 'email-validator'
-
-interface Props {}
-
-const LoginView: FC<Props> = () => {
-  // Form State
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [message, setMessage] = useState('')
-  const [dirty, setDirty] = useState(false)
-  const [disabled, setDisabled] = useState(false)
-  const { setModalView, closeModal } = useUI()
-
-  const login = useLogin()
-
-  const handleLogin = async (e: React.SyntheticEvent<EventTarget>) => {
-    e.preventDefault()
-
-    if (!dirty && !disabled) {
-      setDirty(true)
-      handleValidation()
-    }
-
-    try {
-      setLoading(true)
-      setMessage('')
-      await login({
-        email,
-        password,
-      })
-      setLoading(false)
-      closeModal()
-    } catch ({ errors }) {
-      setMessage(errors[0].message)
-      setLoading(false)
-    }
-  }
-
-  const handleValidation = useCallback(() => {
-    // Test for Alphanumeric password
-    const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
-
-    // Unable to send form unless fields are valid.
-    if (dirty) {
-      setDisabled(!validate(email) || password.length < 7 || !validPassword)
-    }
-  }, [email, password, dirty])
-
-  useEffect(() => {
-    handleValidation()
-  }, [handleValidation])
-
-  return (
-    <form
-      onSubmit={handleLogin}
-      className="w-80 flex flex-col justify-between p-3"
-    >
-      <div className="flex justify-center pb-12 ">
-        <Logo width="64px" height="64px" />
-      </div>
-      <div className="flex flex-col space-y-3">
-        {message && (
-          <div className="text-red border border-red p-3">
-            {message}. Did you {` `}
-            <a
-              className="text-accent-9 inline font-bold hover:underline cursor-pointer"
-              onClick={() => setModalView('FORGOT_VIEW')}
-            >
-              forgot your password?
-            </a>
-          </div>
-        )}
-        <Input type="email" placeholder="Email" onChange={setEmail} />
-        <Input type="password" placeholder="Password" onChange={setPassword} />
-
-        <Button
-          variant="slim"
-          type="submit"
-          loading={loading}
-          disabled={disabled}
-        >
-          Log In
-        </Button>
-        <div className="pt-1 text-center text-sm">
-          <span className="text-accent-7">Don't have an account?</span>
-          {` `}
-          <a
-            className="text-accent-9 font-bold hover:underline cursor-pointer"
-            onClick={() => setModalView('SIGNUP_VIEW')}
-          >
-            Sign Up
-          </a>
-        </div>
-      </div>
-    </form>
-  )
-}
-
-export default LoginView
diff --git a/components/auth/SignUpView.tsx b/components/auth/SignUpView.tsx
deleted file mode 100644
index a85a3bc27..000000000
--- a/components/auth/SignUpView.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { FC, useEffect, useState, useCallback } from 'react'
-import { validate } from 'email-validator'
-import { Info } from '@components/icons'
-import { useUI } from '@components/ui/context'
-import { Logo, Button, Input } from '@components/ui'
-import useSignup from '@framework/auth/use-signup'
-
-interface Props {}
-
-const SignUpView: FC<Props> = () => {
-  // Form State
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [firstName, setFirstName] = useState('')
-  const [lastName, setLastName] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [message, setMessage] = useState('')
-  const [dirty, setDirty] = useState(false)
-  const [disabled, setDisabled] = useState(false)
-
-  const signup = useSignup()
-  const { setModalView, closeModal } = useUI()
-
-  const handleSignup = async (e: React.SyntheticEvent<EventTarget>) => {
-    e.preventDefault()
-
-    if (!dirty && !disabled) {
-      setDirty(true)
-      handleValidation()
-    }
-
-    try {
-      setLoading(true)
-      setMessage('')
-      await signup({
-        email,
-        firstName,
-        lastName,
-        password,
-      })
-      setLoading(false)
-      closeModal()
-    } catch ({ errors }) {
-      setMessage(errors[0].message)
-      setLoading(false)
-    }
-  }
-
-  const handleValidation = useCallback(() => {
-    // Test for Alphanumeric password
-    const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
-
-    // Unable to send form unless fields are valid.
-    if (dirty) {
-      setDisabled(!validate(email) || password.length < 7 || !validPassword)
-    }
-  }, [email, password, dirty])
-
-  useEffect(() => {
-    handleValidation()
-  }, [handleValidation])
-
-  return (
-    <form
-      onSubmit={handleSignup}
-      className="w-80 flex flex-col justify-between p-3"
-    >
-      <div className="flex justify-center pb-12 ">
-        <Logo width="64px" height="64px" />
-      </div>
-      <div className="flex flex-col space-y-4">
-        {message && (
-          <div className="text-red border border-red p-3">{message}</div>
-        )}
-        <Input placeholder="First Name" onChange={setFirstName} />
-        <Input placeholder="Last Name" onChange={setLastName} />
-        <Input type="email" placeholder="Email" onChange={setEmail} />
-        <Input type="password" placeholder="Password" onChange={setPassword} />
-        <span className="text-accent-8">
-          <span className="inline-block align-middle ">
-            <Info width="15" height="15" />
-          </span>{' '}
-          <span className="leading-6 text-sm">
-            <strong>Info</strong>: Passwords must be longer than 7 chars and
-            include numbers.{' '}
-          </span>
-        </span>
-        <div className="pt-2 w-full flex flex-col">
-          <Button
-            variant="slim"
-            type="submit"
-            loading={loading}
-            disabled={disabled}
-          >
-            Sign Up
-          </Button>
-        </div>
-
-        <span className="pt-1 text-center text-sm">
-          <span className="text-accent-7">Do you have an account?</span>
-          {` `}
-          <a
-            className="text-accent-9 font-bold hover:underline cursor-pointer"
-            onClick={() => setModalView('LOGIN_VIEW')}
-          >
-            Log In
-          </a>
-        </span>
-      </div>
-    </form>
-  )
-}
-
-export default SignUpView
diff --git a/components/auth/index.ts b/components/auth/index.ts
deleted file mode 100644
index 11571fac7..000000000
--- a/components/auth/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as LoginView } from './LoginView'
-export { default as SignUpView } from './SignUpView'
-export { default as ForgotPassword } from './ForgotPassword'
diff --git a/components/cart/CartItem/CartItem.module.css b/components/cart/CartItem/CartItem.module.css
deleted file mode 100644
index dd43314fb..000000000
--- a/components/cart/CartItem/CartItem.module.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.root {
-  @apply flex flex-col py-4;
-}
-
-.root:first-child {
-  padding-top: 0;
-}
-
-.quantity {
-  appearance: textfield;
-  @apply w-8 border-accent-2 border mx-3 rounded text-center text-sm text-black;
-}
-
-.quantity::-webkit-outer-spin-button,
-.quantity::-webkit-inner-spin-button {
-  @apply appearance-none m-0;
-}
-
-.productImage {
-  position: absolute;
-  transform: scale(1.9);
-  width: 100%;
-  height: 100%;
-  left: 30% !important;
-  top: 30% !important;
-  z-index: 1;
-}
-
-.productName {
-  @apply font-medium cursor-pointer pb-1;
-  margin-top: -4px;
-}
diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
deleted file mode 100644
index a59024e06..000000000
--- a/components/cart/CartItem/CartItem.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { ChangeEvent, FocusEventHandler, useEffect, useState } from 'react'
-import cn from 'classnames'
-import Image from 'next/image'
-import Link from 'next/link'
-import s from './CartItem.module.css'
-import { Trash, Plus, Minus, Cross } from '@components/icons'
-import { useUI } from '@components/ui/context'
-import type { LineItem } from '@commerce/types/cart'
-import usePrice from '@framework/product/use-price'
-import useUpdateItem from '@framework/cart/use-update-item'
-import useRemoveItem from '@framework/cart/use-remove-item'
-import Quantity from '@components/ui/Quantity'
-
-type ItemOption = {
-  name: string
-  nameId: number
-  value: string
-  valueId: number
-}
-
-const CartItem = ({
-  item,
-  variant = 'default',
-  currencyCode,
-  ...rest
-}: {
-  variant?: 'default' | 'display'
-  item: LineItem
-  currencyCode: string
-}) => {
-  const { closeSidebarIfPresent } = useUI()
-  const [removing, setRemoving] = useState(false)
-  const [quantity, setQuantity] = useState<number>(item.quantity)
-  const removeItem = useRemoveItem()
-  const updateItem = useUpdateItem({ item })
-
-  const { price } = usePrice({
-    amount: item.variant.price * item.quantity,
-    baseAmount: item.variant.listPrice * item.quantity,
-    currencyCode,
-  })
-
-  const handleChange = async ({
-    target: { value },
-  }: ChangeEvent<HTMLInputElement>) => {
-    setQuantity(Number(value))
-    await updateItem({ quantity: Number(value) })
-  }
-
-  const increaseQuantity = async (n = 1) => {
-    const val = Number(quantity) + n
-    setQuantity(val)
-    await updateItem({ quantity: val })
-  }
-
-  const handleRemove = async () => {
-    setRemoving(true)
-    try {
-      await removeItem(item)
-    } catch (error) {
-      setRemoving(false)
-    }
-  }
-
-  // TODO: Add a type for this
-  const options = (item as any).options
-
-  useEffect(() => {
-    // Reset the quantity state if the item quantity changes
-    if (item.quantity !== Number(quantity)) {
-      setQuantity(item.quantity)
-    }
-  }, [item.quantity])
-
-  return (
-    <li
-      className={cn(s.root, {
-        'opacity-50 pointer-events-none': removing,
-      })}
-      {...rest}
-    >
-      <div className="flex flex-row space-x-4 py-4">
-        <div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer z-0">
-          <Link href={`/product/${item.path}`}>
-            <Image
-              onClick={() => closeSidebarIfPresent()}
-              className={s.productImage}
-              width={150}
-              height={150}
-              src={item.variant.image!.url}
-              alt={item.variant.image!.altText}
-              unoptimized
-            />
-          </Link>
-        </div>
-        <div className="flex-1 flex flex-col text-base">
-          <Link href={`/product/${item.path}`}>
-            <span
-              className={s.productName}
-              onClick={() => closeSidebarIfPresent()}
-            >
-              {item.name}
-            </span>
-          </Link>
-          {options && options.length > 0 && (
-            <div className="flex items-center pb-1">
-              {options.map((option: ItemOption, i: number) => (
-                <div
-                  key={`${item.id}-${option.name}`}
-                  className="text-sm font-semibold text-accent-7 inline-flex items-center justify-center"
-                >
-                  {option.name}
-                  {option.name === 'Color' ? (
-                    <span
-                      className="mx-2 rounded-full bg-transparent border w-5 h-5 p-1 text-accent-9 inline-flex items-center justify-center overflow-hidden"
-                      style={{
-                        backgroundColor: `${option.value}`,
-                      }}
-                    ></span>
-                  ) : (
-                    <span className="mx-2 rounded-full bg-transparent border h-5 p-1 text-accent-9 inline-flex items-center justify-center overflow-hidden">
-                      {option.value}
-                    </span>
-                  )}
-                  {i === options.length - 1 ? '' : <span className="mr-3" />}
-                </div>
-              ))}
-            </div>
-          )}
-          {variant === 'display' && (
-            <div className="text-sm tracking-wider">{quantity}x</div>
-          )}
-        </div>
-        <div className="flex flex-col justify-between space-y-2 text-sm">
-          <span>{price}</span>
-        </div>
-      </div>
-      {variant === 'default' && (
-        <Quantity
-          value={quantity}
-          handleRemove={handleRemove}
-          handleChange={handleChange}
-          increase={() => increaseQuantity(1)}
-          decrease={() => increaseQuantity(-1)}
-        />
-      )}
-    </li>
-  )
-}
-
-export default CartItem
diff --git a/components/cart/CartItem/index.ts b/components/cart/CartItem/index.ts
deleted file mode 100644
index b5f6dc52f..000000000
--- a/components/cart/CartItem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './CartItem'
diff --git a/components/cart/CartSidebarView/CartSidebarView.module.css b/components/cart/CartSidebarView/CartSidebarView.module.css
deleted file mode 100644
index c9ffbed50..000000000
--- a/components/cart/CartSidebarView/CartSidebarView.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.root {
-  min-height: 100vh;
-}
-
-.root.empty {
-  @apply bg-secondary text-secondary;
-}
-
-.lineItemsList {
-  @apply py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-accent-2;
-}
diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
deleted file mode 100644
index 128b928a8..000000000
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import cn from 'classnames'
-import Link from 'next/link'
-import { FC } from 'react'
-import s from './CartSidebarView.module.css'
-import CartItem from '../CartItem'
-import { Button, Text } from '@components/ui'
-import { useUI } from '@components/ui/context'
-import { Bag, Cross, Check } from '@components/icons'
-import useCart from '@framework/cart/use-cart'
-import usePrice from '@framework/product/use-price'
-import SidebarLayout from '@components/common/SidebarLayout'
-
-const CartSidebarView: FC = () => {
-  const { closeSidebar, setSidebarView } = useUI()
-  const { data, isLoading, isEmpty } = useCart()
-
-  const { price: subTotal } = usePrice(
-    data && {
-      amount: Number(data.subtotalPrice),
-      currencyCode: data.currency.code,
-    }
-  )
-  const { price: total } = usePrice(
-    data && {
-      amount: Number(data.totalPrice),
-      currencyCode: data.currency.code,
-    }
-  )
-  const handleClose = () => closeSidebar()
-  const goToCheckout = () => setSidebarView('CHECKOUT_VIEW')
-
-  const error = null
-  const success = null
-
-  return (
-    <SidebarLayout
-      className={cn({
-        [s.empty]: error || success || isLoading || isEmpty,
-      })}
-      handleClose={handleClose}
-    >
-      {isLoading || isEmpty ? (
-        <div className="flex-1 px-4 flex flex-col justify-center items-center">
-          <span className="border border-dashed border-primary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-secondary text-secondary">
-            <Bag className="absolute" />
-          </span>
-          <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
-            Your cart is empty
-          </h2>
-          <p className="text-accent-3 px-10 text-center pt-2">
-            Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
-          </p>
-        </div>
-      ) : error ? (
-        <div className="flex-1 px-4 flex flex-col justify-center items-center">
-          <span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
-            <Cross width={24} height={24} />
-          </span>
-          <h2 className="pt-6 text-xl font-light text-center">
-            We couldn’t process the purchase. Please check your card information
-            and try again.
-          </h2>
-        </div>
-      ) : success ? (
-        <div className="flex-1 px-4 flex flex-col justify-center items-center">
-          <span className="border border-white rounded-full flex items-center justify-center w-16 h-16">
-            <Check />
-          </span>
-          <h2 className="pt-6 text-xl font-light text-center">
-            Thank you for your order.
-          </h2>
-        </div>
-      ) : (
-        <>
-          <div className="px-4 sm:px-6 flex-1">
-            <Link href="/cart">
-              <Text variant="sectionHeading" onClick={handleClose}>
-                My Cart
-              </Text>
-            </Link>
-            <ul className={s.lineItemsList}>
-              {data!.lineItems.map((item: any) => (
-                <CartItem
-                  key={item.id}
-                  item={item}
-                  currencyCode={data!.currency.code}
-                />
-              ))}
-            </ul>
-          </div>
-
-          <div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 border-t text-sm">
-            <ul className="pb-2">
-              <li className="flex justify-between py-1">
-                <span>Subtotal</span>
-                <span>{subTotal}</span>
-              </li>
-              <li className="flex justify-between py-1">
-                <span>Taxes</span>
-                <span>Calculated at checkout</span>
-              </li>
-              <li className="flex justify-between py-1">
-                <span>Shipping</span>
-                <span className="font-bold tracking-wide">FREE</span>
-              </li>
-            </ul>
-            <div className="flex justify-between border-t border-accent-2 py-3 font-bold mb-2">
-              <span>Total</span>
-              <span>{total}</span>
-            </div>
-            <div>
-              {process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED ? (
-                <Button Component="a" width="100%" onClick={goToCheckout}>
-                  Proceed to Checkout ({total})
-                </Button>
-              ) : (
-                <Button href="/checkout" Component="a" width="100%">
-                  Proceed to Checkout
-                </Button>
-              )}
-            </div>
-          </div>
-        </>
-      )}
-    </SidebarLayout>
-  )
-}
-
-export default CartSidebarView
diff --git a/components/cart/CartSidebarView/index.ts b/components/cart/CartSidebarView/index.ts
deleted file mode 100644
index 0262e448e..000000000
--- a/components/cart/CartSidebarView/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './CartSidebarView'
diff --git a/components/cart/index.ts b/components/cart/index.ts
deleted file mode 100644
index 3e53fa34a..000000000
--- a/components/cart/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as CartSidebarView } from './CartSidebarView'
-export { default as CartItem } from './CartItem'
diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css
deleted file mode 100644
index 34c1b487c..000000000
--- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.root {
-  min-height: calc(100vh - 322px);
-}
-
-.lineItemsList {
-  @apply py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-accent-2;
-}
diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
deleted file mode 100644
index fb562e7af..000000000
--- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import cn from 'classnames'
-import Link from 'next/link'
-import { FC } from 'react'
-import CartItem from '@components/cart/CartItem'
-import { Button, Text } from '@components/ui'
-import { useUI } from '@components/ui/context'
-import useCart from '@framework/cart/use-cart'
-import usePrice from '@framework/product/use-price'
-import ShippingWidget from '../ShippingWidget'
-import PaymentWidget from '../PaymentWidget'
-import SidebarLayout from '@components/common/SidebarLayout'
-import s from './CheckoutSidebarView.module.css'
-
-const CheckoutSidebarView: FC = () => {
-  const { setSidebarView } = useUI()
-  const { data } = useCart()
-
-  const { price: subTotal } = usePrice(
-    data && {
-      amount: Number(data.subtotalPrice),
-      currencyCode: data.currency.code,
-    }
-  )
-  const { price: total } = usePrice(
-    data && {
-      amount: Number(data.totalPrice),
-      currencyCode: data.currency.code,
-    }
-  )
-
-  return (
-    <SidebarLayout
-      className={s.root}
-      handleBack={() => setSidebarView('CART_VIEW')}
-    >
-      <div className="px-4 sm:px-6 flex-1">
-        <Link href="/cart">
-          <Text variant="sectionHeading">Checkout</Text>
-        </Link>
-
-        <PaymentWidget onClick={() => setSidebarView('PAYMENT_VIEW')} />
-        <ShippingWidget onClick={() => setSidebarView('SHIPPING_VIEW')} />
-
-        <ul className={s.lineItemsList}>
-          {data!.lineItems.map((item: any) => (
-            <CartItem
-              key={item.id}
-              item={item}
-              currencyCode={data!.currency.code}
-              variant="display"
-            />
-          ))}
-        </ul>
-      </div>
-
-      <div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 border-t text-sm">
-        <ul className="pb-2">
-          <li className="flex justify-between py-1">
-            <span>Subtotal</span>
-            <span>{subTotal}</span>
-          </li>
-          <li className="flex justify-between py-1">
-            <span>Taxes</span>
-            <span>Calculated at checkout</span>
-          </li>
-          <li className="flex justify-between py-1">
-            <span>Shipping</span>
-            <span className="font-bold tracking-wide">FREE</span>
-          </li>
-        </ul>
-        <div className="flex justify-between border-t border-accent-2 py-3 font-bold mb-2">
-          <span>Total</span>
-          <span>{total}</span>
-        </div>
-        <div>
-          {/* Once data is correcly filled */}
-          {/* <Button Component="a" width="100%">
-                Confirm Purchase
-              </Button> */}
-          <Button Component="a" width="100%" variant="ghost" disabled>
-            Continue
-          </Button>
-        </div>
-      </div>
-    </SidebarLayout>
-  )
-}
-
-export default CheckoutSidebarView
diff --git a/components/checkout/CheckoutSidebarView/index.ts b/components/checkout/CheckoutSidebarView/index.ts
deleted file mode 100644
index 168bc58f4..000000000
--- a/components/checkout/CheckoutSidebarView/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './CheckoutSidebarView'
diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.module.css b/components/checkout/PaymentMethodView/PaymentMethodView.module.css
deleted file mode 100644
index f3880c72c..000000000
--- a/components/checkout/PaymentMethodView/PaymentMethodView.module.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.fieldset {
-  @apply flex flex-col my-3;
-}
-
-.fieldset .label {
-  @apply text-accent-7 uppercase text-xs font-medium mb-2;
-}
-
-.fieldset .input,
-.fieldset .select {
-  @apply p-2 border border-accent-2 w-full text-sm font-normal;
-}
-
-.fieldset .input:focus,
-.fieldset .select:focus {
-  @apply outline-none shadow-outline-normal;
-}
diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.tsx b/components/checkout/PaymentMethodView/PaymentMethodView.tsx
deleted file mode 100644
index a5f6f4b51..000000000
--- a/components/checkout/PaymentMethodView/PaymentMethodView.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { FC } from 'react'
-import cn from 'classnames'
-import { Button, Text } from '@components/ui'
-import { useUI } from '@components/ui/context'
-import s from './PaymentMethodView.module.css'
-import SidebarLayout from '@components/common/SidebarLayout'
-
-const PaymentMethodView: FC = () => {
-  const { setSidebarView } = useUI()
-
-  return (
-    <SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
-      <div className="px-4 sm:px-6 flex-1">
-        <Text variant="sectionHeading"> Payment Method</Text>
-        <div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Cardholder Name</label>
-            <input className={s.input} />
-          </div>
-          <div className="grid gap-3 grid-flow-row grid-cols-12">
-            <div className={cn(s.fieldset, 'col-span-7')}>
-              <label className={s.label}>Card Number</label>
-              <input className={s.input} />
-            </div>
-            <div className={cn(s.fieldset, 'col-span-3')}>
-              <label className={s.label}>Expires</label>
-              <input className={s.input} placeholder="MM/YY" />
-            </div>
-            <div className={cn(s.fieldset, 'col-span-2')}>
-              <label className={s.label}>CVC</label>
-              <input className={s.input} />
-            </div>
-          </div>
-          <hr className="border-accent-2 my-6" />
-          <div className="grid gap-3 grid-flow-row grid-cols-12">
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>First Name</label>
-              <input className={s.input} />
-            </div>
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>Last Name</label>
-              <input className={s.input} />
-            </div>
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Company (Optional)</label>
-            <input className={s.input} />
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Street and House Number</label>
-            <input className={s.input} />
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
-            <input className={s.input} />
-          </div>
-          <div className="grid gap-3 grid-flow-row grid-cols-12">
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>Postal Code</label>
-              <input className={s.input} />
-            </div>
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>City</label>
-              <input className={s.input} />
-            </div>
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Country/Region</label>
-            <select className={s.select}>
-              <option>Hong Kong</option>
-            </select>
-          </div>
-        </div>
-      </div>
-      <div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
-        <Button Component="a" width="100%" variant="ghost">
-          Continue
-        </Button>
-      </div>
-    </SidebarLayout>
-  )
-}
-
-export default PaymentMethodView
diff --git a/components/checkout/PaymentMethodView/index.ts b/components/checkout/PaymentMethodView/index.ts
deleted file mode 100644
index 951b3c318..000000000
--- a/components/checkout/PaymentMethodView/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './PaymentMethodView'
diff --git a/components/checkout/PaymentWidget/PaymentWidget.module.css b/components/checkout/PaymentWidget/PaymentWidget.module.css
deleted file mode 100644
index 38dcab0c0..000000000
--- a/components/checkout/PaymentWidget/PaymentWidget.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.root {
-  @apply border border-accent-2 px-6 py-5 mb-4 text-center
-  flex items-center cursor-pointer hover:border-accent-4;
-}
diff --git a/components/checkout/PaymentWidget/PaymentWidget.tsx b/components/checkout/PaymentWidget/PaymentWidget.tsx
deleted file mode 100644
index e1892934e..000000000
--- a/components/checkout/PaymentWidget/PaymentWidget.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { FC } from 'react'
-import s from './PaymentWidget.module.css'
-import { ChevronRight, CreditCard } from '@components/icons'
-
-interface ComponentProps {
-  onClick?: () => any
-}
-
-const PaymentWidget: FC<ComponentProps> = ({ onClick }) => {
-  /* Shipping Address 
-  Only available with checkout set to true - 
-  This means that the provider does offer checkout functionality. */
-  return (
-    <div onClick={onClick} className={s.root}>
-      <div className="flex flex-1 items-center">
-        <CreditCard className="w-5 flex" />
-        <span className="ml-5 text-sm text-center font-medium">
-          Add Payment Method
-        </span>
-        {/* <span>VISA #### #### #### 2345</span> */}
-      </div>
-      <div>
-        <ChevronRight />
-      </div>
-    </div>
-  )
-}
-
-export default PaymentWidget
diff --git a/components/checkout/PaymentWidget/index.ts b/components/checkout/PaymentWidget/index.ts
deleted file mode 100644
index 18cadea57..000000000
--- a/components/checkout/PaymentWidget/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './PaymentWidget'
diff --git a/components/checkout/ShippingView/ShippingView.module.css b/components/checkout/ShippingView/ShippingView.module.css
deleted file mode 100644
index 157d3174e..000000000
--- a/components/checkout/ShippingView/ShippingView.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.fieldset {
-  @apply flex flex-col my-3;
-}
-
-.fieldset .label {
-  @apply text-accent-7 uppercase text-xs font-medium mb-2;
-}
-
-.fieldset .input,
-.fieldset .select {
-  @apply p-2 border border-accent-2 w-full text-sm font-normal;
-}
-
-.fieldset .input:focus,
-.fieldset .select:focus {
-  @apply outline-none shadow-outline-normal;
-}
-
-.radio {
-  @apply bg-black;
-}
diff --git a/components/checkout/ShippingView/ShippingView.tsx b/components/checkout/ShippingView/ShippingView.tsx
deleted file mode 100644
index 1d03a2aac..000000000
--- a/components/checkout/ShippingView/ShippingView.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { FC } from 'react'
-import cn from 'classnames'
-import s from './ShippingView.module.css'
-import Button from '@components/ui/Button'
-import { useUI } from '@components/ui/context'
-import SidebarLayout from '@components/common/SidebarLayout'
-
-const PaymentMethodView: FC = () => {
-  const { setSidebarView } = useUI()
-
-  return (
-    <SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
-      <div className="px-4 sm:px-6 flex-1">
-        <h2 className="pt-1 pb-8 text-2xl font-semibold tracking-wide cursor-pointer inline-block">
-          Shipping
-        </h2>
-        <div>
-          <div className="flex flex-row my-3 items-center">
-            <input className={s.radio} type="radio" />
-            <span className="ml-3 text-sm">Same as billing address</span>
-          </div>
-          <div className="flex flex-row my-3 items-center">
-            <input className={s.radio} type="radio" />
-            <span className="ml-3 text-sm">
-              Use a different shipping address
-            </span>
-          </div>
-          <hr className="border-accent-2 my-6" />
-          <div className="grid gap-3 grid-flow-row grid-cols-12">
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>First Name</label>
-              <input className={s.input} />
-            </div>
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>Last Name</label>
-              <input className={s.input} />
-            </div>
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Company (Optional)</label>
-            <input className={s.input} />
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Street and House Number</label>
-            <input className={s.input} />
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
-            <input className={s.input} />
-          </div>
-          <div className="grid gap-3 grid-flow-row grid-cols-12">
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>Postal Code</label>
-              <input className={s.input} />
-            </div>
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>City</label>
-              <input className={s.input} />
-            </div>
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Country/Region</label>
-            <select className={s.select}>
-              <option>Hong Kong</option>
-            </select>
-          </div>
-        </div>
-      </div>
-      <div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
-        <Button Component="a" width="100%" variant="ghost">
-          Continue
-        </Button>
-      </div>
-    </SidebarLayout>
-  )
-}
-
-export default PaymentMethodView
diff --git a/components/checkout/ShippingView/index.ts b/components/checkout/ShippingView/index.ts
deleted file mode 100644
index 428e7e4fe..000000000
--- a/components/checkout/ShippingView/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ShippingView'
diff --git a/components/checkout/ShippingWidget/ShippingWidget.module.css b/components/checkout/ShippingWidget/ShippingWidget.module.css
deleted file mode 100644
index 38dcab0c0..000000000
--- a/components/checkout/ShippingWidget/ShippingWidget.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.root {
-  @apply border border-accent-2 px-6 py-5 mb-4 text-center
-  flex items-center cursor-pointer hover:border-accent-4;
-}
diff --git a/components/checkout/ShippingWidget/ShippingWidget.tsx b/components/checkout/ShippingWidget/ShippingWidget.tsx
deleted file mode 100644
index b072178b0..000000000
--- a/components/checkout/ShippingWidget/ShippingWidget.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { FC } from 'react'
-import s from './ShippingWidget.module.css'
-import { ChevronRight, MapPin } from '@components/icons'
-import cn from 'classnames'
-
-interface ComponentProps {
-  onClick?: () => any
-}
-
-const ShippingWidget: FC<ComponentProps> = ({ onClick }) => {
-  /* Shipping Address 
-  Only available with checkout set to true - 
-  This means that the provider does offer checkout functionality. */
-  return (
-    <div onClick={onClick} className={s.root}>
-      <div className="flex flex-1 items-center">
-        <MapPin className="w-5 flex" />
-        <span className="ml-5 text-sm text-center font-medium">
-          Add Shipping Address
-        </span>
-        {/* <span>
-          1046 Kearny Street.<br/>
-          San Franssisco, California
-        </span> */}
-      </div>
-      <div>
-        <ChevronRight />
-      </div>
-    </div>
-  )
-}
-
-export default ShippingWidget
diff --git a/components/checkout/ShippingWidget/index.ts b/components/checkout/ShippingWidget/index.ts
deleted file mode 100644
index 88e6dca4b..000000000
--- a/components/checkout/ShippingWidget/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ShippingWidget'
diff --git a/components/common/Avatar/Avatar.tsx b/components/common/Avatar/Avatar.tsx
deleted file mode 100644
index 663538450..000000000
--- a/components/common/Avatar/Avatar.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { FC, useRef, useEffect } from 'react'
-import { useUserAvatar } from '@lib/hooks/useUserAvatar'
-
-interface Props {
-  className?: string
-  children?: any
-}
-
-const Avatar: FC<Props> = ({}) => {
-  let ref = useRef() as React.MutableRefObject<HTMLInputElement>
-  let { userAvatar } = useUserAvatar()
-
-  return (
-    <div
-      ref={ref}
-      style={{ backgroundImage: userAvatar }}
-      className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition-colors ease-linear"
-    >
-      {/* Add an image - We're generating a gradient as placeholder  <img></img> */}
-    </div>
-  )
-}
-
-export default Avatar
diff --git a/components/common/Avatar/index.ts b/components/common/Avatar/index.ts
deleted file mode 100644
index a4600ec77..000000000
--- a/components/common/Avatar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Avatar'
diff --git a/components/common/FeatureBar/FeatureBar.module.css b/components/common/FeatureBar/FeatureBar.module.css
deleted file mode 100644
index a3cb61cd2..000000000
--- a/components/common/FeatureBar/FeatureBar.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.root {
-  @apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30 transition-all duration-300 ease-out;
-
-  @screen md {
-    @apply flex text-left;
-  }
-}
diff --git a/components/common/FeatureBar/FeatureBar.tsx b/components/common/FeatureBar/FeatureBar.tsx
deleted file mode 100644
index 8923a721e..000000000
--- a/components/common/FeatureBar/FeatureBar.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import cn from 'classnames'
-import s from './FeatureBar.module.css'
-
-interface FeatureBarProps {
-  className?: string
-  title: string
-  description?: string
-  hide?: boolean
-  action?: React.ReactNode
-}
-
-const FeatureBar: React.FC<FeatureBarProps> = ({
-  title,
-  description,
-  className,
-  action,
-  hide,
-}) => {
-  const rootClassName = cn(
-    s.root,
-    {
-      transform: true,
-      'translate-y-0 opacity-100': !hide,
-      'translate-y-full opacity-0': hide,
-    },
-    className
-  )
-  return (
-    <div className={rootClassName}>
-      <span className="block md:inline">{title}</span>
-      <span className="block mb-6 md:inline md:mb-0 md:ml-2">
-        {description}
-      </span>
-      {action && action}
-    </div>
-  )
-}
-
-export default FeatureBar
diff --git a/components/common/FeatureBar/index.ts b/components/common/FeatureBar/index.ts
deleted file mode 100644
index d78bc9d20..000000000
--- a/components/common/FeatureBar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './FeatureBar'
diff --git a/components/common/Footer/Footer.module.css b/components/common/Footer/Footer.module.css
deleted file mode 100644
index 2ba492086..000000000
--- a/components/common/Footer/Footer.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.root {
-  @apply border-t border-accent-2;
-}
-
-.link {
-  & > svg {
-    @apply transform duration-75 ease-linear;
-  }
-
-  &:hover > svg {
-    @apply scale-110;
-  }
-}
diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx
deleted file mode 100644
index 04b80404e..000000000
--- a/components/common/Footer/Footer.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { FC } from 'react'
-import cn from 'classnames'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import type { Page } from '@commerce/types/page'
-import getSlug from '@lib/get-slug'
-import { Github, Vercel } from '@components/icons'
-import { Logo, Container } from '@components/ui'
-import { I18nWidget } from '@components/common'
-import s from './Footer.module.css'
-
-interface Props {
-  className?: string
-  children?: any
-  pages?: Page[]
-}
-
-const links = [
-  {
-    name: 'Home',
-    url: '/',
-  },
-]
-
-const Footer: FC<Props> = ({ className, pages }) => {
-  const { sitePages } = usePages(pages)
-  const rootClassName = cn(s.root, className)
-
-  return (
-    <footer className={rootClassName}>
-      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accent-2 py-12 text-primary bg-primary transition-colors duration-150">
-          <div className="col-span-1 lg:col-span-2">
-            <Link href="/">
-              <a className="flex flex-initial items-center font-bold md:mr-24">
-                <span className="rounded-full border border-accent-6 mr-2">
-                  <Logo />
-                </span>
-                <span>ACME</span>
-              </a>
-            </Link>
-          </div>
-          <div className="col-span-1 lg:col-span-8">
-            <div className="grid md:grid-rows-4 md:grid-cols-3 md:grid-flow-col">
-              {[...links, ...sitePages].map((page) => (
-                <span key={page.url} className="py-3 md:py-0 md:pb-4">
-                  <Link href={page.url!}>
-                    <a className="text-accent-9 hover:text-accent-6 transition ease-in-out duration-150">
-                      {page.name}
-                    </a>
-                  </Link>
-                </span>
-              ))}
-            </div>
-          </div>
-          <div className="col-span-1 lg:col-span-2 flex items-start lg:justify-end text-primary">
-            <div className="flex space-x-6 items-center h-10">
-              <a
-                className={s.link}
-                aria-label="Github Repository"
-                href="https://github.com/vercel/commerce"
-              >
-                <Github />
-              </a>
-              <I18nWidget />
-            </div>
-          </div>
-        </div>
-        <div className="pt-6 pb-10 flex flex-col md:flex-row justify-between items-center space-y-4 text-accent-6 text-sm">
-          <div>
-            <span>&copy; 2020 ACME, Inc. All rights reserved.</span>
-          </div>
-          <div className="flex items-center text-primary text-sm">
-            <span className="text-primary">Created by</span>
-            <a
-              rel="noopener"
-              href="https://vercel.com"
-              aria-label="Vercel.com Link"
-              target="_blank"
-              className="text-primary"
-            >
-              <Vercel
-                className="inline-block h-6 ml-3 text-primary"
-                alt="Vercel.com Logo"
-              />
-            </a>
-          </div>
-        </div>
-      </Container>
-    </footer>
-  )
-}
-
-function usePages(pages?: Page[]) {
-  const { locale } = useRouter()
-  const sitePages: Page[] = []
-
-  if (pages) {
-    pages.forEach((page) => {
-      const slug = page.url && getSlug(page.url)
-      if (!slug) return
-      if (locale && !slug.startsWith(`${locale}/`)) return
-      sitePages.push(page)
-    })
-  }
-
-  return {
-    sitePages: sitePages.sort(bySortOrder),
-  }
-}
-
-// Sort pages by the sort order assigned in the BC dashboard
-function bySortOrder(a: Page, b: Page) {
-  return (a.sort_order ?? 0) - (b.sort_order ?? 0)
-}
-
-export default Footer
diff --git a/components/common/Footer/index.ts b/components/common/Footer/index.ts
deleted file mode 100644
index 5d06e9b71..000000000
--- a/components/common/Footer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Footer'
diff --git a/components/common/Head/Head.tsx b/components/common/Head/Head.tsx
deleted file mode 100644
index b2c0c997b..000000000
--- a/components/common/Head/Head.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { FC } from 'react'
-import NextHead from 'next/head'
-import { DefaultSeo } from 'next-seo'
-import config from '@config/seo.json'
-
-const Head: FC = () => {
-  return (
-    <>
-      <DefaultSeo {...config} />
-      <NextHead>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="manifest" href="/site.webmanifest" key="site-manifest" />
-      </NextHead>
-    </>
-  )
-}
-
-export default Head
diff --git a/components/common/Head/index.ts b/components/common/Head/index.ts
deleted file mode 100644
index b317a124b..000000000
--- a/components/common/Head/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Head'
diff --git a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css b/components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css
deleted file mode 100644
index 91d1fdc60..000000000
--- a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.root {
-  @apply flex flex-col w-full;
-
-  @screen md {
-    @apply flex-row;
-  }
-}
diff --git a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx b/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
deleted file mode 100644
index d0fac461f..000000000
--- a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { FC } from 'react'
-import Link from 'next/link'
-import type { Product } from '@commerce/types/product'
-import { Grid } from '@components/ui'
-import { ProductCard } from '@components/product'
-import s from './HomeAllProductsGrid.module.css'
-import { getCategoryPath, getDesignerPath } from '@lib/search'
-import { Category } from '@commerce/types/site'
-
-interface Props {
-  categories?: Category[]
-  brands?: any
-  products?: Product[]
-}
-
-const HomeAllProductsGrid: FC<Props> = ({
-  categories = [],
-  brands,
-  products = [],
-}) => {
-  return (
-    <div className={s.root}>
-      <div className="flex-1">
-        {categories.map((category) => (
-          <div>
-            <div className="text-primary font-bold">{category.name}</div>
-            <div className="flex">
-              {products.slice(0, 4).map((product) => (
-                <ProductCard
-                  key={product.path}
-                  product={product}
-                  variant="simple"
-                  imgProps={{
-                    width: 300,
-                    height: 300,
-                  }}
-                />
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export default HomeAllProductsGrid
diff --git a/components/common/HomeAllProductsGrid/index.ts b/components/common/HomeAllProductsGrid/index.ts
deleted file mode 100644
index 31d313d16..000000000
--- a/components/common/HomeAllProductsGrid/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './HomeAllProductsGrid'
diff --git a/components/common/I18nWidget/I18nWidget.module.css b/components/common/I18nWidget/I18nWidget.module.css
deleted file mode 100644
index 269aa5f61..000000000
--- a/components/common/I18nWidget/I18nWidget.module.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.root {
-  @apply relative;
-}
-
-.button {
-  @apply h-10 px-2 rounded-md border border-accent-2 flex items-center justify-center transition-colors ease-linear;
-}
-
-.button:hover {
-  @apply border-accent-3 shadow-sm;
-}
-
-.button:focus {
-  @apply outline-none;
-}
-
-.dropdownMenu {
-  @apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
-
-  @screen lg {
-    @apply absolute border border-accent-1 shadow-lg w-56 h-auto;
-  }
-}
-
-.closeButton {
-  @screen md {
-    @apply hidden;
-  }
-}
-
-.item {
-  @apply flex cursor-pointer px-6 py-3 transition ease-in-out duration-150 text-primary leading-6 font-medium items-center;
-  text-transform: capitalize;
-}
-
-.item:hover {
-  @apply bg-accent-1;
-}
-
-.icon {
-  transition: transform 0.2s ease;
-}
-
-.icon.active {
-  transform: rotate(180deg);
-}
diff --git a/components/common/I18nWidget/I18nWidget.tsx b/components/common/I18nWidget/I18nWidget.tsx
deleted file mode 100644
index 58135f12a..000000000
--- a/components/common/I18nWidget/I18nWidget.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import cn from 'classnames'
-import Link from 'next/link'
-import { FC, useState } from 'react'
-import { useRouter } from 'next/router'
-import s from './I18nWidget.module.css'
-import { Cross, ChevronUp } from '@components/icons'
-import ClickOutside from '@lib/click-outside'
-interface LOCALE_DATA {
-  name: string
-  img: {
-    filename: string
-    alt: string
-  }
-}
-
-const LOCALES_MAP: Record<string, LOCALE_DATA> = {
-  es: {
-    name: 'Español',
-    img: {
-      filename: 'flag-es-co.svg',
-      alt: 'Bandera Colombiana',
-    },
-  },
-  'en-US': {
-    name: 'English',
-    img: {
-      filename: 'flag-en-us.svg',
-      alt: 'US Flag',
-    },
-  },
-}
-
-const I18nWidget: FC = () => {
-  const [display, setDisplay] = useState(false)
-  const {
-    locale,
-    locales,
-    defaultLocale = 'en-US',
-    asPath: currentPath,
-  } = useRouter()
-
-  const options = locales?.filter((val) => val !== locale)
-  const currentLocale = locale || defaultLocale
-
-  return (
-    <ClickOutside active={display} onClick={() => setDisplay(false)}>
-      <nav className={s.root}>
-        <div
-          className="flex items-center relative"
-          onClick={() => setDisplay(!display)}
-        >
-          <button className={s.button} aria-label="Language selector">
-            <img
-              width="20"
-              height="20"
-              className="block mr-2 w-5"
-              src={`/${LOCALES_MAP[currentLocale].img.filename}`}
-              alt={LOCALES_MAP[currentLocale].img.alt}
-            />
-            {options && (
-              <span className="cursor-pointer">
-                <ChevronUp className={cn(s.icon, { [s.active]: display })} />
-              </span>
-            )}
-          </button>
-        </div>
-        <div className="absolute top-0 right-0">
-          {options?.length && display ? (
-            <div className={s.dropdownMenu}>
-              <div className="flex flex-row justify-end px-6">
-                <button
-                  onClick={() => setDisplay(false)}
-                  aria-label="Close panel"
-                  className={s.closeButton}
-                >
-                  <Cross className="h-6 w-6" />
-                </button>
-              </div>
-              <ul>
-                {options.map((locale) => (
-                  <li key={locale}>
-                    <Link href={currentPath} locale={locale}>
-                      <a
-                        className={cn(s.item)}
-                        onClick={() => setDisplay(false)}
-                      >
-                        {LOCALES_MAP[locale].name}
-                      </a>
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ) : null}
-        </div>
-      </nav>
-    </ClickOutside>
-  )
-}
-
-export default I18nWidget
diff --git a/components/common/I18nWidget/index.ts b/components/common/I18nWidget/index.ts
deleted file mode 100644
index 46525c3d4..000000000
--- a/components/common/I18nWidget/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './I18nWidget'
diff --git a/components/common/Layout/Layout.module.css b/components/common/Layout/Layout.module.css
deleted file mode 100644
index bb90675a6..000000000
--- a/components/common/Layout/Layout.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.root {
-  @apply h-full bg-primary mx-auto transition-colors duration-150;
-  max-width: 2460px;
-}
diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx
deleted file mode 100644
index ff6d72aaf..000000000
--- a/components/common/Layout/Layout.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import cn from 'classnames'
-import React, { FC } from 'react'
-import dynamic from 'next/dynamic'
-import { useRouter } from 'next/router'
-import { CommerceProvider } from '@framework'
-import { useUI } from '@components/ui/context'
-import type { Page } from '@commerce/types/page'
-import { Navbar, Footer } from '@components/common'
-import type { Category } from '@commerce/types/site'
-import ShippingView from '@components/checkout/ShippingView'
-import CartSidebarView from '@components/cart/CartSidebarView'
-import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
-import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
-import PaymentMethodView from '@components/checkout/PaymentMethodView'
-import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView'
-
-import LoginView from '@components/auth/LoginView'
-import s from './Layout.module.css'
-
-const Loading = () => (
-  <div className="w-80 h-80 flex items-center text-center justify-center p-3">
-    <LoadingDots />
-  </div>
-)
-
-const dynamicProps = {
-  loading: () => <Loading />,
-}
-
-const SignUpView = dynamic(
-  () => import('@components/auth/SignUpView'),
-  dynamicProps
-)
-
-const ForgotPassword = dynamic(
-  () => import('@components/auth/ForgotPassword'),
-  dynamicProps
-)
-
-const FeatureBar = dynamic(
-  () => import('@components/common/FeatureBar'),
-  dynamicProps
-)
-
-interface Props {
-  pageProps: {
-    pages?: Page[]
-    categories: Category[]
-  }
-}
-
-const ModalView: FC<{ modalView: string; closeModal(): any }> = ({
-  modalView,
-  closeModal,
-}) => {
-  return (
-    <Modal onClose={closeModal}>
-      {modalView === 'LOGIN_VIEW' && <LoginView />}
-      {modalView === 'SIGNUP_VIEW' && <SignUpView />}
-      {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
-    </Modal>
-  )
-}
-
-const ModalUI: FC = () => {
-  const { displayModal, closeModal, modalView } = useUI()
-  return displayModal ? (
-    <ModalView modalView={modalView} closeModal={closeModal} />
-  ) : null
-}
-
-const SidebarView: FC<{ sidebarView: string; closeSidebar(): any }> = ({
-  sidebarView,
-  closeSidebar,
-}) => {
-  return (
-    <Sidebar onClose={closeSidebar}>
-      {sidebarView === 'CART_VIEW' && <CartSidebarView />}
-      {sidebarView === 'CHECKOUT_VIEW' && <CheckoutSidebarView />}
-      {sidebarView === 'PAYMENT_VIEW' && <PaymentMethodView />}
-      {sidebarView === 'SHIPPING_VIEW' && <ShippingView />}
-    </Sidebar>
-  )
-}
-
-const SidebarUI: FC = () => {
-  const { displaySidebar, closeSidebar, sidebarView } = useUI()
-  return displaySidebar ? (
-    <SidebarView sidebarView={sidebarView} closeSidebar={closeSidebar} />
-  ) : null
-}
-
-const Layout: FC<Props> = ({
-  children,
-  pageProps: { categories = [], ...pageProps },
-}) => {
-  const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
-  const { locale = 'en-US' } = useRouter()
-  const navBarlinks = categories.slice(0, 2).map((c) => ({
-    label: c.name,
-    href: `/search/${c.slug}`,
-  }))
-
-  return (
-    <CommerceProvider locale={locale}>
-      <div className={cn(s.root)}>
-        <Navbar links={navBarlinks} />
-        <main className="fit">{children}</main>
-        <Footer pages={pageProps.pages} />
-        <ModalUI />
-        <SidebarUI />
-        <FeatureBar
-          title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
-          hide={acceptedCookies}
-          action={
-            <Button className="mx-5" onClick={() => onAcceptCookies()}>
-              Accept cookies
-            </Button>
-          }
-        />
-      </div>
-    </CommerceProvider>
-  )
-}
-
-export default Layout
diff --git a/components/common/Layout/index.ts b/components/common/Layout/index.ts
deleted file mode 100644
index 0e2737eee..000000000
--- a/components/common/Layout/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Layout'
diff --git a/components/common/Navbar/Navbar.module.css b/components/common/Navbar/Navbar.module.css
deleted file mode 100644
index faa86d156..000000000
--- a/components/common/Navbar/Navbar.module.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.root {
-  @apply sticky top-0 bg-primary z-40 transition-all duration-150;
-  min-height: 74px;
-}
-
-.nav {
-  @apply relative flex flex-row justify-between py-4 md:py-4;
-}
-
-.navMenu {
-  @apply hidden ml-6 space-x-4 lg:block;
-}
-
-.link {
-  @apply inline-flex items-center leading-6
-  transition ease-in-out duration-75 cursor-pointer
-  text-accent-5;
-}
-
-.link:hover {
-  @apply text-accent-9;
-}
-
-.link:focus {
-  @apply outline-none text-accent-8;
-}
-
-.logo {
-  @apply cursor-pointer rounded-full border transform duration-100 ease-in-out;
-
-  &:hover {
-    @apply shadow-md;
-    transform: scale(1.05);
-  }
-}
diff --git a/components/common/Navbar/Navbar.tsx b/components/common/Navbar/Navbar.tsx
deleted file mode 100644
index 2ce5f33b8..000000000
--- a/components/common/Navbar/Navbar.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { FC } from 'react'
-import Link from 'next/link'
-import s from './Navbar.module.css'
-import NavbarRoot from './NavbarRoot'
-import { Logo, Container } from '@components/ui'
-import { Searchbar, UserNav } from '@components/common'
-
-interface Link {
-  href: string
-  label: string
-}
-interface NavbarProps {
-  links?: Link[]
-}
-
-const Navbar: FC<NavbarProps> = ({ links }) => (
-  <NavbarRoot>
-    <Container>
-      <div className={s.nav}>
-        <div className="flex items-center flex-1">
-          <Link href="/">
-            <a className={s.logo} aria-label="Logo">
-              <Logo />
-            </a>
-          </Link>
-          <nav className={s.navMenu}>
-            <Link href="/search">
-              <a className={s.link}>All</a>
-            </Link>
-            {links?.map((l) => (
-              <Link href={l.href} key={l.href}>
-                <a className={s.link}>{l.label}</a>
-              </Link>
-            ))}
-          </nav>
-        </div>
-        {process.env.COMMERCE_SEARCH_ENABLED && (
-          <div className="justify-center flex-1 hidden lg:flex">
-            <Searchbar />
-          </div>
-        )}
-        <div className="flex items-center justify-end flex-1 space-x-8">
-          <UserNav />
-        </div>
-      </div>
-      <div className="flex pb-4 lg:px-6 lg:hidden">
-        <Searchbar id="mobile-search" />
-      </div>
-    </Container>
-  </NavbarRoot>
-)
-
-export default Navbar
diff --git a/components/common/Navbar/NavbarRoot.tsx b/components/common/Navbar/NavbarRoot.tsx
deleted file mode 100644
index 2eb8c5429..000000000
--- a/components/common/Navbar/NavbarRoot.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { FC, useState, useEffect } from 'react'
-import throttle from 'lodash.throttle'
-import cn from 'classnames'
-import s from './Navbar.module.css'
-
-const NavbarRoot: FC = ({ children }) => {
-  const [hasScrolled, setHasScrolled] = useState(false)
-
-  useEffect(() => {
-    const handleScroll = throttle(() => {
-      const offset = 0
-      const { scrollTop } = document.documentElement
-      const scrolled = scrollTop > offset
-
-      if (hasScrolled !== scrolled) {
-        setHasScrolled(scrolled)
-      }
-    }, 200)
-
-    document.addEventListener('scroll', handleScroll)
-    return () => {
-      document.removeEventListener('scroll', handleScroll)
-    }
-  }, [hasScrolled])
-
-  return (
-    <div className={cn(s.root, { 'shadow-magical': hasScrolled })}>
-      {children}
-    </div>
-  )
-}
-
-export default NavbarRoot
diff --git a/components/common/Navbar/index.ts b/components/common/Navbar/index.ts
deleted file mode 100644
index e6400ae40..000000000
--- a/components/common/Navbar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Navbar'
diff --git a/components/common/Searchbar/Searchbar.module.css b/components/common/Searchbar/Searchbar.module.css
deleted file mode 100644
index 7f20ed973..000000000
--- a/components/common/Searchbar/Searchbar.module.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.root {
-  @apply relative text-sm bg-accent-0 text-base w-full transition-colors duration-150 border border-accent-2;
-}
-
-.input {
-  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out pr-10;
-}
-
-.input::placeholder {
-  @apply text-accent-3;
-}
-
-.input:focus {
-  @apply outline-none shadow-outline-normal;
-}
-
-.iconContainer {
-  @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none;
-}
-
-.icon {
-  @apply h-5 w-5;
-}
-
-@screen sm {
-  .input {
-    min-width: 300px;
-  }
-}
diff --git a/components/common/Searchbar/Searchbar.tsx b/components/common/Searchbar/Searchbar.tsx
deleted file mode 100644
index 0fc276d02..000000000
--- a/components/common/Searchbar/Searchbar.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { FC, InputHTMLAttributes, useEffect, useMemo } from 'react'
-import cn from 'classnames'
-import s from './Searchbar.module.css'
-import { useRouter } from 'next/router'
-
-interface Props {
-  className?: string
-  id?: string
-}
-
-const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
-  const router = useRouter()
-
-  useEffect(() => {
-    router.prefetch('/search')
-  }, [])
-
-  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    e.preventDefault()
-
-    if (e.key === 'Enter') {
-      const q = e.currentTarget.value
-
-      router.push(
-        {
-          pathname: `/search`,
-          query: q ? { q } : {},
-        },
-        undefined,
-        { shallow: true }
-      )
-    }
-  }
-
-  return useMemo(
-    () => (
-      <div className={cn(s.root, className)}>
-        <label className="hidden" htmlFor={id}>
-          Search
-        </label>
-        <input
-          id={id}
-          className={s.input}
-          placeholder="Search for products..."
-          defaultValue={router.query.q}
-          onKeyUp={handleKeyUp}
-        />
-        <div className={s.iconContainer}>
-          <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-            />
-          </svg>
-        </div>
-      </div>
-    ),
-    []
-  )
-}
-
-export default Searchbar
diff --git a/components/common/Searchbar/index.ts b/components/common/Searchbar/index.ts
deleted file mode 100644
index e6c0e36c8..000000000
--- a/components/common/Searchbar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Searchbar'
diff --git a/components/common/SidebarLayout/SidebarLayout.module.css b/components/common/SidebarLayout/SidebarLayout.module.css
deleted file mode 100644
index a8940dc52..000000000
--- a/components/common/SidebarLayout/SidebarLayout.module.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.root {
-  @apply relative h-full flex flex-col;
-}
-
-.header {
-  @apply sticky top-0 pl-4 py-4 pr-6
-  flex items-center justify-between 
-  bg-accent-0 box-border w-full z-10;
-  min-height: 66px;
-}
-
-.container {
-  @apply flex flex-col flex-1 box-border;
-}
-
-@screen lg {
-  .header {
-    min-height: 74px;
-  }
-}
diff --git a/components/common/SidebarLayout/SidebarLayout.tsx b/components/common/SidebarLayout/SidebarLayout.tsx
deleted file mode 100644
index a4e60a758..000000000
--- a/components/common/SidebarLayout/SidebarLayout.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { FC } from 'react'
-import { Cross, ChevronLeft } from '@components/icons'
-import { UserNav } from '@components/common'
-import cn from 'classnames'
-import s from './SidebarLayout.module.css'
-
-type ComponentProps = { className?: string } & (
-  | { handleClose: () => any; handleBack?: never }
-  | { handleBack: () => any; handleClose?: never }
-)
-
-const SidebarLayout: FC<ComponentProps> = ({
-  children,
-  className,
-  handleClose,
-  handleBack,
-}) => {
-  return (
-    <div className={cn(s.root, className)}>
-      <header className={s.header}>
-        {handleClose && (
-          <button
-            onClick={handleClose}
-            aria-label="Close"
-            className="hover:text-accent-5 transition ease-in-out duration-150 flex items-center focus:outline-none"
-          >
-            <Cross className="h-6 w-6 hover:text-accent-3" />
-            <span className="ml-2 text-accent-7 text-sm ">Close</span>
-          </button>
-        )}
-        {handleBack && (
-          <button
-            onClick={handleBack}
-            aria-label="Go back"
-            className="hover:text-accent-5 transition ease-in-out duration-150 flex items-center focus:outline-none"
-          >
-            <ChevronLeft className="h-6 w-6 hover:text-accent-3" />
-            <span className="ml-2 text-accent-7 text-xs">Back</span>
-          </button>
-        )}
-        <span className={s.nav}>
-          <UserNav />
-        </span>
-      </header>
-      <div className={s.container}>{children}</div>
-    </div>
-  )
-}
-
-export default SidebarLayout
diff --git a/components/common/SidebarLayout/index.ts b/components/common/SidebarLayout/index.ts
deleted file mode 100644
index 45ded0cf0..000000000
--- a/components/common/SidebarLayout/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SidebarLayout'
diff --git a/components/common/UserNav/DropdownMenu.module.css b/components/common/UserNav/DropdownMenu.module.css
deleted file mode 100644
index d6b13ecb5..000000000
--- a/components/common/UserNav/DropdownMenu.module.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.dropdownMenu {
-  @apply fixed right-0 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
-
-  @screen lg {
-    @apply absolute top-10 border border-accent-1 shadow-lg w-56 h-auto;
-  }
-}
-
-.link {
-  @apply text-primary flex cursor-pointer px-6 py-3 flex transition ease-in-out duration-150 leading-6 font-medium items-center;
-  text-transform: capitalize;
-}
-
-.link:hover {
-  @apply bg-accent-1;
-}
-
-.link.active {
-  @apply font-bold bg-accent-2;
-}
-
-.off {
-  @apply hidden;
-}
diff --git a/components/common/UserNav/DropdownMenu.tsx b/components/common/UserNav/DropdownMenu.tsx
deleted file mode 100644
index f79fd5821..000000000
--- a/components/common/UserNav/DropdownMenu.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import cn from 'classnames'
-import Link from 'next/link'
-import { FC, useRef, useState, useEffect } from 'react'
-import { useTheme } from 'next-themes'
-import { useRouter } from 'next/router'
-import s from './DropdownMenu.module.css'
-import { Avatar } from '@components/common'
-import { Moon, Sun } from '@components/icons'
-import { useUI } from '@components/ui/context'
-import ClickOutside from '@lib/click-outside'
-import useLogout from '@framework/auth/use-logout'
-
-import {
-  disableBodyScroll,
-  enableBodyScroll,
-  clearAllBodyScrollLocks,
-} from 'body-scroll-lock'
-
-interface DropdownMenuProps {
-  open?: boolean
-}
-
-const LINKS = [
-  {
-    name: 'My Orders',
-    href: '/orders',
-  },
-  {
-    name: 'My Profile',
-    href: '/profile',
-  },
-  {
-    name: 'My Cart',
-    href: '/cart',
-  },
-]
-
-const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
-  const logout = useLogout()
-  const { pathname } = useRouter()
-  const { theme, setTheme } = useTheme()
-  const [display, setDisplay] = useState(false)
-  const { closeSidebarIfPresent } = useUI()
-  const ref = useRef() as React.MutableRefObject<HTMLUListElement>
-
-  useEffect(() => {
-    if (ref.current) {
-      if (display) {
-        disableBodyScroll(ref.current)
-      } else {
-        enableBodyScroll(ref.current)
-      }
-    }
-    return () => {
-      clearAllBodyScrollLocks()
-    }
-  }, [display])
-
-  return (
-    <ClickOutside active={display} onClick={() => setDisplay(false)}>
-      <div>
-        <button
-          className={s.avatarButton}
-          onClick={() => setDisplay(!display)}
-          aria-label="Menu"
-        >
-          <Avatar />
-        </button>
-        {display && (
-          <ul className={s.dropdownMenu} ref={ref}>
-            {LINKS.map(({ name, href }) => (
-              <li key={href}>
-                <div>
-                  <Link href={href}>
-                    <a
-                      className={cn(s.link, {
-                        [s.active]: pathname === href,
-                      })}
-                      onClick={() => {
-                        setDisplay(false)
-                        closeSidebarIfPresent()
-                      }}
-                    >
-                      {name}
-                    </a>
-                  </Link>
-                </div>
-              </li>
-            ))}
-            <li>
-              <a
-                className={cn(s.link, 'justify-between')}
-                onClick={() => {
-                  theme === 'dark' ? setTheme('light') : setTheme('dark')
-                  setDisplay(false)
-                }}
-              >
-                <div>
-                  Theme: <strong>{theme}</strong>{' '}
-                </div>
-                <div className="ml-3">
-                  {theme == 'dark' ? (
-                    <Moon width={20} height={20} />
-                  ) : (
-                    <Sun width="20" height={20} />
-                  )}
-                </div>
-              </a>
-            </li>
-            <li>
-              <a
-                className={cn(s.link, 'border-t border-accent-2 mt-4')}
-                onClick={() => logout()}
-              >
-                Logout
-              </a>
-            </li>
-          </ul>
-        )}
-      </div>
-    </ClickOutside>
-  )
-}
-
-export default DropdownMenu
diff --git a/components/common/UserNav/UserNav.module.css b/components/common/UserNav/UserNav.module.css
deleted file mode 100644
index 92f62c10d..000000000
--- a/components/common/UserNav/UserNav.module.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.root {
-  @apply relative;
-}
-
-.list {
-  @apply flex flex-row items-center justify-items-end h-full;
-}
-
-.item {
-  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary;
-
-  &:hover {
-    @apply text-accent-6 transition scale-110 duration-100;
-  }
-
-  &:last-child {
-    @apply mr-0;
-  }
-
-  &:focus,
-  &:active {
-    @apply outline-none;
-  }
-}
-
-.bagCount {
-  @apply border border-accent-1 bg-secondary text-secondary absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs;
-  padding-left: 2.5px;
-  padding-right: 2.5px;
-  min-width: 1.25rem;
-  min-height: 1.25rem;
-}
-
-.avatarButton {
-  @apply inline-flex justify-center rounded-full;
-}
-
-.avatarButton:focus {
-  @apply outline-none;
-}
diff --git a/components/common/UserNav/UserNav.tsx b/components/common/UserNav/UserNav.tsx
deleted file mode 100644
index 5d7d28df3..000000000
--- a/components/common/UserNav/UserNav.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { FC } from 'react'
-import Link from 'next/link'
-import cn from 'classnames'
-import type { LineItem } from '@commerce/types/cart'
-import useCart from '@framework/cart/use-cart'
-import useCustomer from '@framework/customer/use-customer'
-import { Avatar } from '@components/common'
-import { Heart, Bag } from '@components/icons'
-import { useUI } from '@components/ui/context'
-import DropdownMenu from './DropdownMenu'
-import s from './UserNav.module.css'
-
-interface Props {
-  className?: string
-}
-
-const countItem = (count: number, item: LineItem) => count + item.quantity
-
-const UserNav: FC<Props> = ({ className }) => {
-  const { data } = useCart()
-  const { data: customer } = useCustomer()
-  const { toggleSidebar, closeSidebarIfPresent, openModal } = useUI()
-  const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0
-
-  return (
-    <nav className={cn(s.root, className)}>
-      <ul className={s.list}>
-        {process.env.COMMERCE_CART_ENABLED && (
-          <li className={s.item} onClick={toggleSidebar}>
-            <Bag />
-            {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
-          </li>
-        )}
-        {process.env.COMMERCE_WISHLIST_ENABLED && (
-          <li className={s.item}>
-            <Link href="/wishlist">
-              <a onClick={closeSidebarIfPresent} aria-label="Wishlist">
-                <Heart />
-              </a>
-            </Link>
-          </li>
-        )}
-        {process.env.COMMERCE_CUSTOMERAUTH_ENABLED && (
-          <li className={s.item}>
-            {customer ? (
-              <DropdownMenu />
-            ) : (
-              <button
-                className={s.avatarButton}
-                aria-label="Menu"
-                onClick={() => openModal()}
-              >
-                <Avatar />
-              </button>
-            )}
-          </li>
-        )}
-      </ul>
-    </nav>
-  )
-}
-
-export default UserNav
diff --git a/components/common/UserNav/index.ts b/components/common/UserNav/index.ts
deleted file mode 100644
index 9e35ac018..000000000
--- a/components/common/UserNav/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './UserNav'
diff --git a/components/common/index.ts b/components/common/index.ts
deleted file mode 100644
index 98dd3394b..000000000
--- a/components/common/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export { default as Avatar } from './Avatar'
-export { default as FeatureBar } from './FeatureBar'
-export { default as Footer } from './Footer'
-export { default as Layout } from './Layout'
-export { default as Navbar } from './Navbar'
-export { default as Searchbar } from './Searchbar'
-export { default as UserNav } from './UserNav'
-export { default as Head } from './Head'
-export { default as I18nWidget } from './I18nWidget'
diff --git a/components/icons/ArrowLeft.tsx b/components/icons/ArrowLeft.tsx
deleted file mode 100644
index 8cc1e1294..000000000
--- a/components/icons/ArrowLeft.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-const ArrowLeft = ({ ...props }) => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      {...props}
-    >
-      <path
-        d="M19 12H5"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M12 19L5 12L12 5"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export default ArrowLeft
diff --git a/components/icons/ArrowRight.tsx b/components/icons/ArrowRight.tsx
deleted file mode 100644
index e644951d9..000000000
--- a/components/icons/ArrowRight.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-const ArrowRight = ({ ...props }) => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M5 12H19"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M12 5L19 12L12 19"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export default ArrowRight
diff --git a/components/icons/Bag.tsx b/components/icons/Bag.tsx
deleted file mode 100644
index de2cde0d1..000000000
--- a/components/icons/Bag.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-const Bag = ({ ...props }) => {
-  return (
-    <svg
-      width="20"
-      height="22"
-      viewBox="0 0 20 22"
-      fill="none"
-      stroke="currentColor"
-      {...props}
-    >
-      <path
-        d="M4 1L1 5V19C1 19.5304 1.21071 20.0391 1.58579 20.4142C1.96086 20.7893 2.46957 21 3 21H17C17.5304 21 18.0391 20.7893 18.4142 20.4142C18.7893 20.0391 19 19.5304 19 19V5L16 1H4Z"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M1 5H19"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M14 9C14 10.0609 13.5786 11.0783 12.8284 11.8284C12.0783 12.5786 11.0609 13 10 13C8.93913 13 7.92172 12.5786 7.17157 11.8284C6.42143 11.0783 6 10.0609 6 9"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export default Bag
diff --git a/components/icons/Check.tsx b/components/icons/Check.tsx
deleted file mode 100644
index 89c91a1e3..000000000
--- a/components/icons/Check.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-const Check = ({ ...props }) => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      {...props}
-    >
-      <path
-        d="M20 6L9 17L4 12"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export default Check
diff --git a/components/icons/ChevronDown.tsx b/components/icons/ChevronDown.tsx
deleted file mode 100644
index 542e8056d..000000000
--- a/components/icons/ChevronDown.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-const ChevronDown = ({ ...props }) => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      shapeRendering="geometricPrecision"
-      {...props}
-    >
-      <path d="M6 9l6 6 6-6" />
-    </svg>
-  )
-}
-
-export default ChevronDown
diff --git a/components/icons/ChevronLeft.tsx b/components/icons/ChevronLeft.tsx
deleted file mode 100644
index 4efb6a522..000000000
--- a/components/icons/ChevronLeft.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-const ChevronLeft = ({ ...props }) => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      shapeRendering="geometricPrecision"
-      {...props}
-    >
-      <path d="M15 18l-6-6 6-6" />
-    </svg>
-  )
-}
-
-export default ChevronLeft
diff --git a/components/icons/ChevronRight.tsx b/components/icons/ChevronRight.tsx
deleted file mode 100644
index d72b77a32..000000000
--- a/components/icons/ChevronRight.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-const ChevronUp = ({ ...props }) => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      shapeRendering="geometricPrecision"
-      {...props}
-    >
-      <path d="M9 18l6-6-6-6" />
-    </svg>
-  )
-}
-
-export default ChevronUp
diff --git a/components/icons/ChevronUp.tsx b/components/icons/ChevronUp.tsx
deleted file mode 100644
index 69b9959b8..000000000
--- a/components/icons/ChevronUp.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-const ChevronUp = ({ ...props }) => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      shapeRendering="geometricPrecision"
-      {...props}
-    >
-      <path d="M18 15l-6-6-6 6" />
-    </svg>
-  )
-}
-
-export default ChevronUp
diff --git a/components/icons/CreditCard.tsx b/components/icons/CreditCard.tsx
deleted file mode 100644
index 958c31193..000000000
--- a/components/icons/CreditCard.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-const CreditCard = ({ ...props }) => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      shapeRendering="geometricPrecision"
-      {...props}
-    >
-      <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
-      <path d="M1 10h22" />
-    </svg>
-  )
-}
-
-export default CreditCard
diff --git a/components/icons/Cross.tsx b/components/icons/Cross.tsx
deleted file mode 100644
index 12e115ac9..000000000
--- a/components/icons/Cross.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-const Cross = ({ ...props }) => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      shapeRendering="geometricPrecision"
-      {...props}
-    >
-      <path d="M18 6L6 18" />
-      <path d="M6 6l12 12" />
-    </svg>
-  )
-}
-
-export default Cross
diff --git a/components/icons/DoubleChevron.tsx b/components/icons/DoubleChevron.tsx
deleted file mode 100644
index 198c30464..000000000
--- a/components/icons/DoubleChevron.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-const DoubleChevron = ({ ...props }) => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M16 8.90482L12 4L8 8.90482M8 15.0952L12 20L16 15.0952"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export default DoubleChevron
diff --git a/components/icons/Github.tsx b/components/icons/Github.tsx
deleted file mode 100644
index 1195a3c3a..000000000
--- a/components/icons/Github.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-const Github = ({ ...props }) => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12 0C5.37 0 0 5.50583 0 12.3035C0 17.7478 3.435 22.3463 8.205 23.9765C8.805 24.0842 9.03 23.715 9.03 23.3921C9.03 23.0999 9.015 22.131 9.015 21.1005C6 21.6696 5.22 20.347 4.98 19.6549C4.845 19.3012 4.26 18.2092 3.75 17.917C3.33 17.6863 2.73 17.1173 3.735 17.1019C4.68 17.0865 5.355 17.9939 5.58 18.363C6.66 20.2239 8.385 19.701 9.075 19.3781C9.18 18.5783 9.495 18.04 9.84 17.7325C7.17 17.4249 4.38 16.3637 4.38 11.6576C4.38 10.3196 4.845 9.21227 5.61 8.35102C5.49 8.04343 5.07 6.78232 5.73 5.09058C5.73 5.09058 6.735 4.76762 9.03 6.3517C9.99 6.07487 11.01 5.93645 12.03 5.93645C13.05 5.93645 14.07 6.07487 15.03 6.3517C17.325 4.75224 18.33 5.09058 18.33 5.09058C18.99 6.78232 18.57 8.04343 18.45 8.35102C19.215 9.21227 19.68 10.3042 19.68 11.6576C19.68 16.3791 16.875 17.4249 14.205 17.7325C14.64 18.1169 15.015 18.8552 15.015 20.0086C15.015 21.6542 15 22.9768 15 23.3921C15 23.715 15.225 24.0995 15.825 23.9765C18.2072 23.1519 20.2773 21.5822 21.7438 19.4882C23.2103 17.3942 23.9994 14.8814 24 12.3035C24 5.50583 18.63 0 12 0Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
-
-export default Github
diff --git a/components/icons/Heart.tsx b/components/icons/Heart.tsx
deleted file mode 100644
index afa2f6aaa..000000000
--- a/components/icons/Heart.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-const Heart = ({ ...props }) => {
-  return (
-    <svg
-      width="24"
-      height="20"
-      viewBox="0 0 24 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M20.84 2.61C20.3292 2.099 19.7228 1.69365 19.0554 1.41708C18.3879 1.14052 17.6725 0.998175 16.95 0.998175C16.2275 0.998175 15.5121 1.14052 14.8446 1.41708C14.1772 1.69365 13.5708 2.099 13.06 2.61L12 3.67L10.94 2.61C9.9083 1.57831 8.50903 0.998709 7.05 0.998709C5.59096 0.998709 4.19169 1.57831 3.16 2.61C2.1283 3.64169 1.54871 5.04097 1.54871 6.5C1.54871 7.95903 2.1283 9.35831 3.16 10.39L4.22 11.45L12 19.23L19.78 11.45L20.84 10.39C21.351 9.87924 21.7563 9.27281 22.0329 8.60536C22.3095 7.9379 22.4518 7.22249 22.4518 6.5C22.4518 5.77751 22.3095 5.0621 22.0329 4.39464C21.7563 3.72719 21.351 3.12076 20.84 2.61V2.61Z"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export default Heart
diff --git a/components/icons/Info.tsx b/components/icons/Info.tsx
deleted file mode 100644
index 67c79cf27..000000000
--- a/components/icons/Info.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-const Info = ({ ...props }) => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      shapeRendering="geometricPrecision"
-      {...props}
-    >
-      <circle cx="12" cy="12" r="10" fill="transparent" />
-      <path d="M12 8v4" stroke="currentColor" />
-      <path d="M12 16h.01" stroke="currentColor" />
-    </svg>
-  )
-}
-
-export default Info
diff --git a/components/icons/MapPin.tsx b/components/icons/MapPin.tsx
deleted file mode 100644
index 6323b9c1c..000000000
--- a/components/icons/MapPin.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-const MapPin = ({ ...props }) => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      shapeRendering="geometricPrecision"
-    >
-      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
-      <circle cx="12" cy="10" r="3" />
-    </svg>
-  )
-}
-
-export default MapPin
diff --git a/components/icons/Minus.tsx b/components/icons/Minus.tsx
deleted file mode 100644
index 1e9411dda..000000000
--- a/components/icons/Minus.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-const Minus = ({ ...props }) => {
-  return (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
-      <path
-        d="M5 12H19"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export default Minus
diff --git a/components/icons/Moon.tsx b/components/icons/Moon.tsx
deleted file mode 100644
index e02f2a30d..000000000
--- a/components/icons/Moon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-const Moon = ({ ...props }) => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      shapeRendering="geometricPrecision"
-      {...props}
-    >
-      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
-    </svg>
-  )
-}
-
-export default Moon
diff --git a/components/icons/Plus.tsx b/components/icons/Plus.tsx
deleted file mode 100644
index ad030b92e..000000000
--- a/components/icons/Plus.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-const Plus = ({ ...props }) => {
-  return (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
-      <path
-        d="M12 5V19"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M5 12H19"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export default Plus
diff --git a/components/icons/Star.tsx b/components/icons/Star.tsx
deleted file mode 100644
index d98f55e1d..000000000
--- a/components/icons/Star.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-const Star = ({ ...props }) => {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path d="M12.43 8L10 0L7.57 8H0L6.18 12.41L3.83 20L10 15.31L16.18 20L13.83 12.41L20 8H12.43Z" />
-    </svg>
-  )
-}
-
-export default Star
diff --git a/components/icons/Sun.tsx b/components/icons/Sun.tsx
deleted file mode 100644
index d3684bcb9..000000000
--- a/components/icons/Sun.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-const Sun = ({ ...props }) => {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      shapeRendering="geometricPrecision"
-      {...props}
-    >
-      <circle cx="12" cy="12" r="5" />
-      <path d="M12 1v2" />
-      <path d="M12 21v2" />
-      <path d="M4.22 4.22l1.42 1.42" />
-      <path d="M18.36 18.36l1.42 1.42" />
-      <path d="M1 12h2" />
-      <path d="M21 12h2" />
-      <path d="M4.22 19.78l1.42-1.42" />
-      <path d="M18.36 5.64l1.42-1.42" />
-    </svg>
-  )
-}
-
-export default Sun
diff --git a/components/icons/Trash.tsx b/components/icons/Trash.tsx
deleted file mode 100644
index b005ea892..000000000
--- a/components/icons/Trash.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-const Trash = ({ ...props }) => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M3 6H21"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M10 11V17"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M14 11V17"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export default Trash
diff --git a/components/icons/Vercel.tsx b/components/icons/Vercel.tsx
deleted file mode 100644
index 96e619fdf..000000000
--- a/components/icons/Vercel.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-const Vercel = ({ ...props }) => {
-  return (
-    <svg
-      width="89"
-      height="20"
-      viewBox="0 0 89 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path d="M11.5625 0L23.125 20H0L11.5625 0Z" fill="currentColor" />
-      <path
-        d="M49.875 10.625C49.875 7.40625 47.5 5.15625 44.0937 5.15625C40.6875 5.15625 38.3125 7.40625 38.3125 10.625C38.3125 13.7812 40.875 16.0937 44.4062 16.0937C46.3438 16.0937 48.0938 15.375 49.2188 14.0625L47.0938 12.8437C46.4375 13.5 45.4688 13.9062 44.4062 13.9062C42.8438 13.9062 41.5 13.0625 41.0312 11.7812L40.9375 11.5625H49.7812C49.8438 11.25 49.875 10.9375 49.875 10.625ZM40.9062 9.6875L40.9688 9.5C41.375 8.15625 42.5625 7.34375 44.0625 7.34375C45.5938 7.34375 46.75 8.15625 47.1562 9.5L47.2188 9.6875H40.9062Z"
-        fill="currentColor"
-      />
-      <path
-        d="M83.5313 10.625C83.5313 7.40625 81.1563 5.15625 77.75 5.15625C74.3438 5.15625 71.9688 7.40625 71.9688 10.625C71.9688 13.7812 74.5313 16.0937 78.0625 16.0937C80 16.0937 81.75 15.375 82.875 14.0625L80.75 12.8437C80.0938 13.5 79.125 13.9062 78.0625 13.9062C76.5 13.9062 75.1563 13.0625 74.6875 11.7812L74.5938 11.5625H83.4375C83.5 11.25 83.5313 10.9375 83.5313 10.625ZM74.5625 9.6875L74.625 9.5C75.0313 8.15625 76.2188 7.34375 77.7188 7.34375C79.25 7.34375 80.4063 8.15625 80.8125 9.5L80.875 9.6875H74.5625Z"
-        fill="currentColor"
-      />
-      <path
-        d="M68.5313 8.84374L70.6563 7.62499C69.6563 6.06249 67.875 5.18749 65.7188 5.18749C62.3125 5.18749 59.9375 7.43749 59.9375 10.6562C59.9375 13.875 62.3125 16.125 65.7188 16.125C67.875 16.125 69.6563 15.25 70.6563 13.6875L68.5313 12.4687C67.9688 13.4062 66.9688 13.9375 65.7188 13.9375C63.75 13.9375 62.4375 12.625 62.4375 10.6562C62.4375 8.68749 63.75 7.37499 65.7188 7.37499C66.9375 7.37499 67.9688 7.90624 68.5313 8.84374Z"
-        fill="currentColor"
-      />
-      <path
-        d="M88.2188 1.75H85.7188V15.8125H88.2188V1.75Z"
-        fill="currentColor"
-      />
-      <path
-        d="M40.1563 1.75H37.2813L31.7813 11.25L26.2813 1.75H23.375L31.7813 16.25L40.1563 1.75Z"
-        fill="currentColor"
-      />
-      <path
-        d="M57.8438 8.0625C58.125 8.0625 58.4062 8.09375 58.6875 8.15625V5.5C56.5625 5.5625 54.5625 6.75 54.5625 8.21875V5.5H52.0625V15.8125H54.5625V11.3437C54.5625 9.40625 55.9062 8.0625 57.8438 8.0625Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
-
-export default Vercel
diff --git a/components/icons/index.ts b/components/icons/index.ts
deleted file mode 100644
index 97eef6d58..000000000
--- a/components/icons/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export { default as Bag } from './Bag'
-export { default as Heart } from './Heart'
-export { default as Trash } from './Trash'
-export { default as Cross } from './Cross'
-export { default as Plus } from './Plus'
-export { default as Minus } from './Minus'
-export { default as Check } from './Check'
-export { default as Sun } from './Sun'
-export { default as Moon } from './Moon'
-export { default as Github } from './Github'
-export { default as Info } from './Info'
-export { default as Vercel } from './Vercel'
-export { default as MapPin } from './MapPin'
-export { default as Star } from './Star'
-export { default as ArrowLeft } from './ArrowLeft'
-export { default as ArrowRight } from './ArrowRight'
-export { default as CreditCard } from './CreditCard'
-export { default as ChevronUp } from './ChevronUp'
-export { default as ChevronLeft } from './ChevronLeft'
-export { default as ChevronDown } from './ChevronDown'
-export { default as ChevronRight } from './ChevronRight'
-export { default as DoubleChevron } from './DoubleChevron'
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
deleted file mode 100644
index d5d441fea..000000000
--- a/components/product/ProductCard/ProductCard.module.css
+++ /dev/null
@@ -1,114 +0,0 @@
-.root {
-  @apply relative max-h-full w-full box-border overflow-hidden
-  bg-no-repeat bg-center bg-cover transition-transform
-  ease-linear cursor-pointer inline-block bg-accent-1;
-  height: 100% !important;
-}
-
-.root:hover {
-  & .productImage {
-    transform: scale(1.2625);
-  }
-
-  & .header .name span,
-  & .header .price,
-  & .wishlistButton {
-    @apply bg-secondary text-secondary;
-  }
-
-  &:nth-child(6n + 1) .header .name span,
-  &:nth-child(6n + 1) .header .price,
-  &:nth-child(6n + 1) .wishlistButton {
-    @apply bg-violet text-white;
-  }
-
-  &:nth-child(6n + 5) .header .name span,
-  &:nth-child(6n + 5) .header .price,
-  &:nth-child(6n + 5) .wishlistButton {
-    @apply bg-blue text-white;
-  }
-
-  &:nth-child(6n + 3) .header .name span,
-  &:nth-child(6n + 3) .header .price,
-  &:nth-child(6n + 3) .wishlistButton {
-    @apply bg-pink text-white;
-  }
-
-  &:nth-child(6n + 6) .header .name span,
-  &:nth-child(6n + 6) .header .price,
-  &:nth-child(6n + 6) .wishlistButton {
-    @apply bg-cyan text-white;
-  }
-}
-
-.header {
-  @apply transition-colors ease-in-out duration-500
-  absolute top-0 left-0 z-20 pr-16;
-}
-
-.header .name {
-  @apply pt-0 max-w-full w-full leading-extra-loose
-  transition-colors ease-in-out duration-500;
-  font-size: 2rem;
-  letter-spacing: 0.4px;
-}
-
-.header .name span {
-  @apply py-4 px-6 bg-primary text-primary font-bold
-  transition-colors ease-in-out duration-500;
-  font-size: inherit;
-  letter-spacing: inherit;
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
-}
-
-.header .price {
-  @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
-  font-semibold inline-block tracking-wide
-  transition-colors ease-in-out duration-500;
-}
-
-.imageContainer {
-  @apply flex items-center justify-center overflow-hidden;
-}
-
-.imageContainer > div {
-  min-width: 100%;
-}
-
-.imageContainer .productImage {
-  @apply transform transition-transform duration-500
-  object-cover scale-120;
-}
-
-.root .wishlistButton {
-  @apply top-0 right-0 z-30 absolute;
-}
-
-/* Variant Simple */
-.simple .header .name {
-  @apply pt-2 text-lg leading-10 -mt-1;
-}
-
-.simple .header .price {
-  @apply text-sm;
-}
-
-/* Variant Slim */
-.slim {
-  @apply bg-transparent relative overflow-hidden
-  box-border;
-}
-
-.slim .header {
-  @apply absolute inset-0 flex items-center justify-end mr-8 z-20;
-}
-
-.slim span {
-  @apply bg-accent-9 text-accent-0 inline-block p-3
-  font-bold text-xl break-words;
-}
-
-.root:global(.secondary) .header span {
-  @apply bg-accent-0 text-accent-9;
-}
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
deleted file mode 100644
index 39c19db00..000000000
--- a/components/product/ProductCard/ProductCard.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { FC } from 'react'
-import cn from 'classnames'
-import Link from 'next/link'
-import type { Product } from '@commerce/types/product'
-import s from './ProductCard.module.css'
-import Image, { ImageProps } from 'next/image'
-import WishlistButton from '@components/wishlist/WishlistButton'
-import usePrice from '@framework/product/use-price'
-import ProductTag from '../ProductTag'
-interface Props {
-  className?: string
-  product: Product
-  noNameTag?: boolean
-  imgProps?: Omit<ImageProps, 'src' | 'layout' | 'placeholder' | 'blurDataURL'>
-  variant?: 'default' | 'slim' | 'simple'
-}
-
-const placeholderImg = '/product-img-placeholder.svg'
-
-const ProductCard: FC<Props> = ({
-  product,
-  imgProps,
-  className,
-  noNameTag = false,
-  variant = 'default',
-  ...props
-}) => {
-  const { price } = usePrice({
-    amount: product.price.value,
-    baseAmount: product.price.retailPrice,
-    currencyCode: product.price.currencyCode!,
-  })
-
-  const rootClassName = cn(
-    s.root,
-    { [s.slim]: variant === 'slim', [s.simple]: variant === 'simple' },
-    className
-  )
-
-  return (
-    <Link href={`/product/${product.slug}`} {...props}>
-      <a className={rootClassName}>
-        {variant === 'slim' && (
-          <>
-            <div className={s.header}>
-              <span>{product.name}</span>
-            </div>
-            {product?.images && (
-              <Image
-                quality="85"
-                src={product.images[0]?.url || placeholderImg}
-                alt={product.name || 'Product Image'}
-                height={320}
-                width={320}
-                layout="fixed"
-                {...imgProps}
-              />
-            )}
-          </>
-        )}
-
-        {variant === 'simple' && (
-          <>
-            {process.env.COMMERCE_WISHLIST_ENABLED && (
-              <WishlistButton
-                className={s.wishlistButton}
-                productId={product.id}
-                variant={product.variants[0]}
-              />
-            )}
-            {!noNameTag && (
-              <div className={s.header}>
-                <h3 className={s.name}>
-                  <span>{product.name}</span>
-                </h3>
-                <div className={s.price}>
-                  {`${price} ${product.price?.currencyCode}`}
-                </div>
-              </div>
-            )}
-            <div className={s.imageContainer}>
-              {product?.images && (
-                <Image
-                  alt={product.name || 'Product Image'}
-                  className={s.productImage}
-                  src={product.images[0]?.url || placeholderImg}
-                  height={540}
-                  width={540}
-                  quality="85"
-                  layout="responsive"
-                  {...imgProps}
-                />
-              )}
-            </div>
-          </>
-        )}
-
-        {variant === 'default' && (
-          <>
-            {process.env.COMMERCE_WISHLIST_ENABLED && (
-              <WishlistButton
-                className={s.wishlistButton}
-                productId={product.id}
-                variant={product.variants[0] as any}
-              />
-            )}
-            <ProductTag
-              name={product.name}
-              price={`${price} ${product.price?.currencyCode}`}
-            />
-            <div className={s.imageContainer}>
-              {product?.images && (
-                <Image
-                  alt={product.name || 'Product Image'}
-                  className={s.productImage}
-                  src={product.images[0]?.url || placeholderImg}
-                  height={540}
-                  width={540}
-                  quality="85"
-                  layout="responsive"
-                  {...imgProps}
-                />
-              )}
-            </div>
-          </>
-        )}
-      </a>
-    </Link>
-  )
-}
-
-export default ProductCard
diff --git a/components/product/ProductCard/index.ts b/components/product/ProductCard/index.ts
deleted file mode 100644
index 4559faa14..000000000
--- a/components/product/ProductCard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ProductCard'
diff --git a/components/product/ProductOptions/ProductOptions.tsx b/components/product/ProductOptions/ProductOptions.tsx
deleted file mode 100644
index 9261406bc..000000000
--- a/components/product/ProductOptions/ProductOptions.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Swatch } from '@components/product'
-import type { ProductOption } from '@commerce/types/product'
-import { SelectedOptions } from '../helpers'
-import React from 'react'
-interface ProductOptionsProps {
-  options: ProductOption[]
-  selectedOptions: SelectedOptions
-  setSelectedOptions: React.Dispatch<React.SetStateAction<SelectedOptions>>
-}
-
-const ProductOptions: React.FC<ProductOptionsProps> = React.memo(
-  ({ options, selectedOptions, setSelectedOptions }) => {
-    return (
-      <div>
-        {options.map((opt) => (
-          <div className="pb-4" key={opt.displayName}>
-            <h2 className="uppercase font-medium text-sm tracking-wide">
-              {opt.displayName}
-            </h2>
-            <div className="flex flex-row py-4">
-              {opt.values.map((v, i: number) => {
-                const active = selectedOptions[opt.displayName.toLowerCase()]
-                return (
-                  <Swatch
-                    key={`${opt.id}-${i}`}
-                    active={v.label.toLowerCase() === active}
-                    variant={opt.displayName}
-                    color={v.hexColors ? v.hexColors[0] : ''}
-                    label={v.label}
-                    onClick={() => {
-                      setSelectedOptions((selectedOptions) => {
-                        return {
-                          ...selectedOptions,
-                          [opt.displayName.toLowerCase()]:
-                            v.label.toLowerCase(),
-                        }
-                      })
-                    }}
-                  />
-                )
-              })}
-            </div>
-          </div>
-        ))}
-      </div>
-    )
-  }
-)
-
-export default ProductOptions
diff --git a/components/product/ProductOptions/index.ts b/components/product/ProductOptions/index.ts
deleted file mode 100644
index 252415ab7..000000000
--- a/components/product/ProductOptions/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ProductOptions'
diff --git a/components/product/ProductSidebar/ProductSidebar.module.css b/components/product/ProductSidebar/ProductSidebar.module.css
deleted file mode 100644
index b6ecc2b77..000000000
--- a/components/product/ProductSidebar/ProductSidebar.module.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.root {
-  @apply relative grid items-start gap-1 grid-cols-1 overflow-x-hidden;
-  min-height: auto;
-}
-
-.main {
-  @apply relative px-0 pb-0 box-border  flex flex-col col-span-1;
-  min-height: 500px;
-}
-
-.header {
-  @apply transition-colors ease-in-out duration-500
-  absolute top-0 left-0 z-20 pr-16;
-}
-
-.header .name {
-  @apply pt-0 max-w-full w-full leading-extra-loose;
-  font-size: 2rem;
-  letter-spacing: 0.4px;
-}
-
-.header .name span {
-  @apply py-4 px-6 bg-primary text-primary font-bold;
-  font-size: inherit;
-  letter-spacing: inherit;
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
-}
-
-.header .price {
-  @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
-  font-semibold inline-block tracking-wide;
-}
-
-.sidebar {
-  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 py-6 w-full h-full;
-}
-
-.sliderContainer {
-  @apply flex items-center justify-center overflow-x-hidden bg-violet;
-}
-
-.imageContainer {
-  @apply text-center;
-}
-
-.imageContainer > div,
-.imageContainer > div > div {
-  @apply h-full;
-}
-
-.sliderContainer .img {
-  @apply w-full h-auto max-h-full object-cover;
-}
-
-.button {
-  width: 100%;
-}
-
-.wishlistButton {
-  @apply absolute z-30 top-0 right-0;
-}
-
-.relatedProductsGrid {
-  @apply grid grid-cols-2 py-2 gap-2 md:grid-cols-4 md:gap-7;
-}
-
-@screen lg {
-  .root {
-    @apply grid-cols-12;
-  }
-
-  .main {
-    @apply mx-0 col-span-8;
-  }
-
-  .sidebar {
-    @apply col-span-4 py-6;
-  }
-
-  .imageContainer {
-    max-height: 600px;
-  }
-}
diff --git a/components/product/ProductSidebar/ProductSidebar.tsx b/components/product/ProductSidebar/ProductSidebar.tsx
deleted file mode 100644
index fe8a71aa5..000000000
--- a/components/product/ProductSidebar/ProductSidebar.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import s from './ProductSidebar.module.css'
-import { useAddItem } from '@framework/cart'
-import { FC, useEffect, useState } from 'react'
-import { ProductOptions } from '@components/product'
-import type { Product } from '@commerce/types/product'
-import { Button, Text, Rating, Collapse, useUI } from '@components/ui'
-import {
-  getProductVariant,
-  selectDefaultOptionFromProduct,
-  SelectedOptions,
-} from '../helpers'
-
-interface ProductSidebarProps {
-  product: Product
-  className?: string
-}
-
-const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
-  const addItem = useAddItem()
-  const { openSidebar } = useUI()
-  const [loading, setLoading] = useState(false)
-  const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>({})
-
-  useEffect(() => {
-    selectDefaultOptionFromProduct(product, setSelectedOptions)
-  }, [])
-
-  const variant = getProductVariant(product, selectedOptions)
-  const addToCart = async () => {
-    setLoading(true)
-    try {
-      await addItem({
-        productId: String(product.id),
-        variantId: String(variant ? variant.id : product.variants[0].id),
-      })
-      openSidebar()
-      setLoading(false)
-    } catch (err) {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <div className={className}>
-      <ProductOptions
-        options={product.options}
-        selectedOptions={selectedOptions}
-        setSelectedOptions={setSelectedOptions}
-      />
-      <Text
-        className="pb-4 break-words w-full max-w-xl"
-        html={product.descriptionHtml || product.description}
-      />
-      <div className="flex flex-row justify-between items-center">
-        <Rating value={4} />
-        <div className="text-accent-6 pr-1 font-medium text-sm">36 reviews</div>
-      </div>
-      <div>
-        {process.env.COMMERCE_CART_ENABLED && (
-          <Button
-            aria-label="Add to Cart"
-            type="button"
-            className={s.button}
-            onClick={addToCart}
-            loading={loading}
-            disabled={variant?.availableForSale === false}
-          >
-            {variant?.availableForSale === false
-              ? 'Not Available'
-              : 'Add To Cart'}
-          </Button>
-        )}
-      </div>
-      <div className="mt-6">
-        <Collapse title="Care">
-          This is a limited edition production run. Printing starts when the
-          drop ends.
-        </Collapse>
-        <Collapse title="Details">
-          This is a limited edition production run. Printing starts when the
-          drop ends. Reminder: Bad Boys For Life. Shipping may take 10+ days due
-          to COVID-19.
-        </Collapse>
-      </div>
-    </div>
-  )
-}
-
-export default ProductSidebar
diff --git a/components/product/ProductSidebar/index.ts b/components/product/ProductSidebar/index.ts
deleted file mode 100644
index 7e00359c4..000000000
--- a/components/product/ProductSidebar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ProductSidebar'
diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css
deleted file mode 100644
index 8d7265eb8..000000000
--- a/components/product/ProductSlider/ProductSlider.module.css
+++ /dev/null
@@ -1,64 +0,0 @@
-.root {
-  @apply relative w-full h-full select-none;
-  overflow: hidden;
-}
-
-.slider {
-  @apply relative h-full transition-opacity duration-150;
-  opacity: 0;
-}
-
-.slider.show {
-  opacity: 1;
-}
-
-.thumb {
-  @apply transition-transform transition-colors
-  ease-linear duration-75 overflow-hidden inline-block
-  cursor-pointer h-full;
-  width: 125px;
-  width: calc(100% / 3);
-}
-
-.thumb.selected {
-  @apply bg-white;
-}
-
-.thumb img {
-  height: 85% !important;
-}
-
-.album {
-  width: 100%;
-  height: 100%;
-  @apply bg-violet-dark;
-  box-sizing: content-box;
-  overflow-y: hidden;
-  overflow-x: auto;
-  white-space: nowrap;
-  height: 125px;
-  scrollbar-width: none;
-}
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-.album::-webkit-scrollbar {
-  display: none;
-}
-
-@screen md {
-  .thumb:hover {
-    transform: scale(1.02);
-    background-color: rgba(255, 255, 255, 0.08);
-  }
-
-  .thumb.selected {
-    @apply bg-white;
-  }
-
-  .album {
-    height: 182px;
-  }
-  .thumb {
-    width: 235px;
-  }
-}
diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx
deleted file mode 100644
index 8c3441906..000000000
--- a/components/product/ProductSlider/ProductSlider.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { useKeenSlider } from 'keen-slider/react'
-import React, {
-  Children,
-  FC,
-  isValidElement,
-  useState,
-  useRef,
-  useEffect,
-} from 'react'
-import cn from 'classnames'
-import { a } from '@react-spring/web'
-import s from './ProductSlider.module.css'
-import ProductSliderControl from '../ProductSliderControl'
-
-interface ProductSliderProps {
-  children: React.ReactNode[]
-  className?: string
-}
-
-const ProductSlider: React.FC<ProductSliderProps> = ({
-  children,
-  className = '',
-}) => {
-  const [currentSlide, setCurrentSlide] = useState(0)
-  const [isMounted, setIsMounted] = useState(false)
-  const sliderContainerRef = useRef<HTMLDivElement>(null)
-  const thumbsContainerRef = useRef<HTMLDivElement>(null)
-
-  const [ref, slider] = useKeenSlider<HTMLDivElement>({
-    loop: true,
-    slidesPerView: 1,
-    mounted: () => setIsMounted(true),
-    slideChanged(s) {
-      const slideNumber = s.details().relativeSlide
-      setCurrentSlide(slideNumber)
-
-      if (thumbsContainerRef.current) {
-        const $el = document.getElementById(
-          `thumb-${s.details().relativeSlide}`
-        )
-        if (slideNumber >= 3) {
-          thumbsContainerRef.current.scrollLeft = $el!.offsetLeft
-        } else {
-          thumbsContainerRef.current.scrollLeft = 0
-        }
-      }
-    },
-  })
-
-  // Stop the history navigation gesture on touch devices
-  useEffect(() => {
-    const preventNavigation = (event: TouchEvent) => {
-      // Center point of the touch area
-      const touchXPosition = event.touches[0].pageX
-      // Size of the touch area
-      const touchXRadius = event.touches[0].radiusX || 0
-
-      // We set a threshold (10px) on both sizes of the screen,
-      // if the touch area overlaps with the screen edges
-      // it's likely to trigger the navigation. We prevent the
-      // touchstart event in that case.
-      if (
-        touchXPosition - touchXRadius < 10 ||
-        touchXPosition + touchXRadius > window.innerWidth - 10
-      )
-        event.preventDefault()
-    }
-
-    sliderContainerRef.current!.addEventListener(
-      'touchstart',
-      preventNavigation
-    )
-
-    return () => {
-      if (sliderContainerRef.current) {
-        sliderContainerRef.current!.removeEventListener(
-          'touchstart',
-          preventNavigation
-        )
-      }
-    }
-  }, [])
-
-  const onPrev = React.useCallback(() => slider.prev(), [slider])
-  const onNext = React.useCallback(() => slider.next(), [slider])
-
-  return (
-    <div className={cn(s.root, className)} ref={sliderContainerRef}>
-      <div
-        ref={ref}
-        className={cn(s.slider, { [s.show]: isMounted }, 'keen-slider')}
-      >
-        {slider && <ProductSliderControl onPrev={onPrev} onNext={onNext} />}
-        {Children.map(children, (child) => {
-          // Add the keen-slider__slide className to children
-          if (isValidElement(child)) {
-            return {
-              ...child,
-              props: {
-                ...child.props,
-                className: `${
-                  child.props.className ? `${child.props.className} ` : ''
-                }keen-slider__slide`,
-              },
-            }
-          }
-          return child
-        })}
-      </div>
-
-      <a.div className={s.album} ref={thumbsContainerRef}>
-        {slider &&
-          Children.map(children, (child, idx) => {
-            if (isValidElement(child)) {
-              return {
-                ...child,
-                props: {
-                  ...child.props,
-                  className: cn(child.props.className, s.thumb, {
-                    [s.selected]: currentSlide === idx,
-                  }),
-                  id: `thumb-${idx}`,
-                  onClick: () => {
-                    slider.moveToSlideRelative(idx)
-                  },
-                },
-              }
-            }
-            return child
-          })}
-      </a.div>
-    </div>
-  )
-}
-
-export default ProductSlider
diff --git a/components/product/ProductSlider/index.ts b/components/product/ProductSlider/index.ts
deleted file mode 100644
index 504440410..000000000
--- a/components/product/ProductSlider/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ProductSlider'
diff --git a/components/product/ProductSliderControl/ProductSliderControl.module.css b/components/product/ProductSliderControl/ProductSliderControl.module.css
deleted file mode 100644
index c744e7598..000000000
--- a/components/product/ProductSliderControl/ProductSliderControl.module.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.control {
-  @apply bg-violet absolute bottom-10 right-10 flex flex-row
-  border-accent-0 border text-accent-0 z-30 shadow-xl select-none;
-  height: 48px;
-}
-
-.leftControl,
-.rightControl {
-  @apply px-9 cursor-pointer;
-  transition: background-color 0.2s ease;
-}
-
-.leftControl:hover,
-.rightControl:hover {
-  background-color: var(--violet-dark);
-}
-
-.leftControl:focus,
-.rightControl:focus {
-  @apply outline-none;
-}
-
-.rightControl {
-  @apply border-l border-accent-0;
-}
-
-.leftControl {
-  margin-right: -1px;
-}
diff --git a/components/product/ProductSliderControl/ProductSliderControl.tsx b/components/product/ProductSliderControl/ProductSliderControl.tsx
deleted file mode 100644
index 4e767b5db..000000000
--- a/components/product/ProductSliderControl/ProductSliderControl.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import cn from 'classnames'
-import React from 'react'
-import s from './ProductSliderControl.module.css'
-import { ArrowLeft, ArrowRight } from '@components/icons'
-
-interface ProductSliderControl {
-  onPrev: React.MouseEventHandler<HTMLButtonElement>
-  onNext: React.MouseEventHandler<HTMLButtonElement>
-}
-
-const ProductSliderControl: React.FC<ProductSliderControl> = React.memo(
-  ({ onPrev, onNext }) => (
-    <div className={s.control}>
-      <button
-        className={cn(s.leftControl)}
-        onClick={onPrev}
-        aria-label="Previous Product Image"
-      >
-        <ArrowLeft />
-      </button>
-      <button
-        className={cn(s.rightControl)}
-        onClick={onNext}
-        aria-label="Next Product Image"
-      >
-        <ArrowRight />
-      </button>
-    </div>
-  )
-)
-export default ProductSliderControl
diff --git a/components/product/ProductSliderControl/index.ts b/components/product/ProductSliderControl/index.ts
deleted file mode 100644
index 5b63c466f..000000000
--- a/components/product/ProductSliderControl/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ProductSliderControl'
diff --git a/components/product/ProductTag/ProductTag.module.css b/components/product/ProductTag/ProductTag.module.css
deleted file mode 100644
index faf2fd97f..000000000
--- a/components/product/ProductTag/ProductTag.module.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.root {
-  @apply transition-colors ease-in-out duration-500
-  absolute top-0 left-0 z-20 pr-16;
-}
-
-.root .name {
-  @apply pt-0 max-w-full w-full leading-extra-loose;
-  font-size: 2rem;
-  letter-spacing: 0.4px;
-  line-height: 2.2em;
-}
-
-.root .name span {
-  @apply py-4 px-6 bg-primary text-primary font-bold;
-  min-height: 70px;
-  font-size: inherit;
-  letter-spacing: inherit;
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
-}
-
-.root .name span.fontsizing {
-  display: flex;
-  padding-top: 1.5rem;
-}
-
-.root .price {
-  @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
-  font-semibold inline-block tracking-wide;
-}
diff --git a/components/product/ProductTag/ProductTag.tsx b/components/product/ProductTag/ProductTag.tsx
deleted file mode 100644
index 2bc80b878..000000000
--- a/components/product/ProductTag/ProductTag.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import cn from 'classnames'
-import { inherits } from 'util'
-import s from './ProductTag.module.css'
-
-interface ProductTagProps {
-  className?: string
-  name: string
-  price: string
-  fontSize?: number
-}
-
-const ProductTag: React.FC<ProductTagProps> = ({
-  name,
-  price,
-  className = '',
-  fontSize = 32,
-}) => {
-  return (
-    <div className={cn(s.root, className)}>
-      <h3 className={s.name}>
-        <span
-          className={cn({ [s.fontsizing]: fontSize < 32 })}
-          style={{
-            fontSize: `${fontSize}px`,
-            lineHeight: `${fontSize}px`,
-          }}
-        >
-          {name}
-        </span>
-      </h3>
-      <div className={s.price}>{price}</div>
-    </div>
-  )
-}
-
-export default ProductTag
diff --git a/components/product/ProductTag/index.ts b/components/product/ProductTag/index.ts
deleted file mode 100644
index cb345e8bd..000000000
--- a/components/product/ProductTag/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ProductTag'
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
deleted file mode 100644
index 0b3ebf564..000000000
--- a/components/product/ProductView/ProductView.module.css
+++ /dev/null
@@ -1,60 +0,0 @@
-.root {
-  @apply relative grid items-start gap-1 grid-cols-1 overflow-x-hidden;
-  min-height: auto;
-}
-
-.main {
-  @apply relative px-0 pb-0 box-border  flex flex-col col-span-1;
-  min-height: 500px;
-}
-
-.sidebar {
-  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 py-6 w-full h-full;
-}
-
-.sliderContainer {
-  @apply flex items-center justify-center overflow-x-hidden bg-violet;
-}
-
-.imageContainer {
-  @apply text-center;
-}
-
-.imageContainer > div,
-.imageContainer > div > div {
-  @apply h-full;
-}
-
-.sliderContainer .img {
-  @apply w-full h-auto max-h-full object-cover;
-}
-
-.button {
-  width: 100%;
-}
-
-.wishlistButton {
-  @apply absolute z-30 top-0 right-0;
-}
-
-.relatedProductsGrid {
-  @apply grid grid-cols-2 py-2 gap-2 md:grid-cols-4 md:gap-7;
-}
-
-@screen lg {
-  .root {
-    @apply grid-cols-12;
-  }
-
-  .main {
-    @apply mx-0 col-span-8;
-  }
-
-  .sidebar {
-    @apply col-span-4 py-6;
-  }
-
-  .imageContainer {
-    max-height: 600px;
-  }
-}
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
deleted file mode 100644
index cfe26983a..000000000
--- a/components/product/ProductView/ProductView.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import cn from 'classnames'
-import Image from 'next/image'
-import { NextSeo } from 'next-seo'
-import s from './ProductView.module.css'
-import { FC } from 'react'
-import type { Product } from '@commerce/types/product'
-import usePrice from '@framework/product/use-price'
-import { ProductSlider, ProductCard } from '@components/product'
-import { Container, Text } from '@components/ui'
-import ProductSidebar from '../ProductSidebar'
-import ProductTag from '../ProductTag'
-import { WishlistButton } from '@components/wishlist'
-interface ProductViewProps {
-  product: Product
-  relatedProducts: Product[]
-}
-
-const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
-  const { price } = usePrice({
-    amount: product.price.value,
-    baseAmount: product.price.retailPrice,
-    currencyCode: product.price.currencyCode!,
-  })
-
-  return (
-    <>
-      <Container className="max-w-none w-full" clean>
-        <div className={cn(s.root, 'fit')}>
-          <div className={cn(s.main, 'fit')}>
-            <ProductTag
-              name={product.name}
-              price={`${price} ${product.price?.currencyCode}`}
-              fontSize={32}
-            />
-            <div className={s.sliderContainer}>
-              <ProductSlider key={product.id}>
-                {product.images.map((image, i) => (
-                  <div key={image.url} className={s.imageContainer}>
-                    <Image
-                      className={s.img}
-                      src={image.url!}
-                      alt={image.alt || 'Product Image'}
-                      width={600}
-                      height={600}
-                      priority={i === 0}
-                      quality="85"
-                    />
-                  </div>
-                ))}
-              </ProductSlider>
-            </div>
-            {process.env.COMMERCE_WISHLIST_ENABLED && (
-              <WishlistButton
-                className={s.wishlistButton}
-                productId={product.id}
-                variant={product.variants[0]}
-              />
-            )}
-          </div>
-
-          <ProductSidebar product={product} className={s.sidebar} />
-        </div>
-        <hr className="mt-7 border-accent-2" />
-        <section className="py-12 px-6 mb-10">
-          <Text variant="sectionHeading">Related Products</Text>
-          <div className={s.relatedProductsGrid}>
-            {relatedProducts.map((p) => (
-              <div
-                key={p.path}
-                className="animated fadeIn bg-accent-0 border border-accent-2"
-              >
-                <ProductCard
-                  noNameTag
-                  product={p}
-                  key={p.path}
-                  variant="simple"
-                  className="animated fadeIn"
-                  imgProps={{
-                    width: 300,
-                    height: 300,
-                  }}
-                />
-              </div>
-            ))}
-          </div>
-        </section>
-      </Container>
-      <NextSeo
-        title={product.name}
-        description={product.description}
-        openGraph={{
-          type: 'website',
-          title: product.name,
-          description: product.description,
-          images: [
-            {
-              url: product.images[0]?.url!,
-              width: 800,
-              height: 600,
-              alt: product.name,
-            },
-          ],
-        }}
-      />
-    </>
-  )
-}
-
-export default ProductView
diff --git a/components/product/ProductView/index.ts b/components/product/ProductView/index.ts
deleted file mode 100644
index 9ac144801..000000000
--- a/components/product/ProductView/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ProductView'
diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css
deleted file mode 100644
index 79a69e548..000000000
--- a/components/product/Swatch/Swatch.module.css
+++ /dev/null
@@ -1,54 +0,0 @@
-.swatch {
-  box-sizing: border-box;
-  composes: root from '@components/ui/Button/Button.module.css';
-  @apply h-10 w-10 bg-primary text-primary rounded-full mr-3 inline-flex
-  items-center justify-center cursor-pointer transition duration-150 ease-in-out
-  p-0 shadow-none border-accent-3 border box-border select-none;
-  margin-right: calc(0.75rem - 1px);
-  overflow: hidden;
-  width: 48px;
-  height: 48px;
-}
-
-.swatch::before,
-.swatch::after {
-  box-sizing: border-box;
-}
-
-.swatch:hover {
-  @apply transform scale-110 bg-hover;
-}
-
-.swatch > span {
-  @apply absolute;
-}
-
-.color {
-  @apply text-black transition duration-150 ease-in-out;
-}
-
-.color :hover {
-  @apply text-black;
-}
-
-.color.dark,
-.color.dark:hover {
-  color: white !important;
-}
-
-.active {
-  @apply border-accent-9 border-2;
-  padding-right: 1px;
-  padding-left: 1px;
-}
-
-.textLabel {
-  @apply w-auto px-4;
-  min-width: 3rem;
-}
-
-.active.textLabel {
-  @apply border-accent-9 border-2;
-  padding-right: calc(1rem - 1px);
-  padding-left: calc(1rem - 1px);
-}
diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx
deleted file mode 100644
index d04e77a78..000000000
--- a/components/product/Swatch/Swatch.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import cn from 'classnames'
-import React from 'react'
-import s from './Swatch.module.css'
-import { Check } from '@components/icons'
-import Button, { ButtonProps } from '@components/ui/Button'
-import { isDark } from '@lib/colors'
-interface SwatchProps {
-  active?: boolean
-  children?: any
-  className?: string
-  variant?: 'size' | 'color' | string
-  color?: string
-  label?: string | null
-}
-
-const Swatch: React.FC<Omit<ButtonProps, 'variant'> & SwatchProps> = React.memo(
-  ({
-    active,
-    className,
-    color = '',
-    label = null,
-    variant = 'size',
-    ...props
-  }) => {
-    variant = variant?.toLowerCase()
-
-    if (label) {
-      label = label?.toLowerCase()
-    }
-
-    const swatchClassName = cn(
-      s.swatch,
-      {
-        [s.color]: color,
-        [s.active]: active,
-        [s.size]: variant === 'size',
-        [s.dark]: color ? isDark(color) : false,
-        [s.textLabel]: !color && label && label.length > 3,
-      },
-      className
-    )
-
-    return (
-      <Button
-        aria-label="Variant Swatch"
-        className={swatchClassName}
-        {...(label && color && { title: label })}
-        style={color ? { backgroundColor: color } : {}}
-        {...props}
-      >
-        {color && active && (
-          <span>
-            <Check />
-          </span>
-        )}
-        {!color ? label : null}
-      </Button>
-    )
-  }
-)
-
-export default Swatch
diff --git a/components/product/Swatch/index.ts b/components/product/Swatch/index.ts
deleted file mode 100644
index c8a795498..000000000
--- a/components/product/Swatch/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Swatch'
diff --git a/components/product/helpers.ts b/components/product/helpers.ts
deleted file mode 100644
index d3fbd5ef5..000000000
--- a/components/product/helpers.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Product } from '@commerce/types/product'
-export type SelectedOptions = Record<string, string | null>
-import { Dispatch, SetStateAction } from 'react'
-
-export function getProductVariant(product: Product, opts: SelectedOptions) {
-  const variant = product.variants.find((variant) => {
-    return Object.entries(opts).every(([key, value]) =>
-      variant.options.find((option) => {
-        if (
-          option.__typename === 'MultipleChoiceOption' &&
-          option.displayName.toLowerCase() === key.toLowerCase()
-        ) {
-          return option.values.find((v) => v.label.toLowerCase() === value)
-        }
-      })
-    )
-  })
-  return variant
-}
-
-export function selectDefaultOptionFromProduct(
-  product: Product,
-  updater: Dispatch<SetStateAction<SelectedOptions>>
-) {
-  // Selects the default option
-  product.variants[0].options?.forEach((v) => {
-    updater((choices) => ({
-      ...choices,
-      [v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(),
-    }))
-  })
-}
diff --git a/components/product/index.ts b/components/product/index.ts
deleted file mode 100644
index 8b70f8e2e..000000000
--- a/components/product/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as Swatch } from './Swatch'
-export { default as ProductView } from './ProductView'
-export { default as ProductCard } from './ProductCard'
-export { default as ProductSlider } from './ProductSlider'
-export { default as ProductOptions } from './ProductOptions'
diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css
deleted file mode 100644
index 2ac7544f7..000000000
--- a/components/ui/Button/Button.module.css
+++ /dev/null
@@ -1,48 +0,0 @@
-.root {
-  @apply bg-accent-9 text-accent-0 cursor-pointer inline-flex
-  px-10 py-5 leading-6 transition ease-in-out duration-150
-  shadow-sm text-center justify-center uppercase
-  border border-transparent items-center text-sm font-semibold
-  tracking-wide;
-  max-height: 64px;
-}
-
-.root:hover {
-  @apply border-accent-9 bg-accent-6;
-}
-
-.root:focus {
-  @apply shadow-outline-normal outline-none;
-}
-
-.root[data-active] {
-  @apply bg-accent-6;
-}
-
-.loading {
-  @apply bg-accent-1 text-accent-3 border-accent-2 cursor-not-allowed;
-}
-
-.slim {
-  @apply py-2 transform-none normal-case;
-}
-
-.ghost {
-  @apply border border-accent-2 bg-accent-0 text-accent-9 text-sm;
-}
-
-.ghost:hover {
-  @apply border-accent-9 bg-accent-9 text-accent-0;
-}
-
-.disabled,
-.disabled:hover {
-  @apply text-accent-4 border-accent-2 bg-accent-1 cursor-not-allowed;
-  filter: grayscale(1);
-  -webkit-transform: translateZ(0);
-  -webkit-perspective: 1000;
-  -webkit-backface-visibility: hidden;
-}
-
-.progress {
-}
diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx
deleted file mode 100644
index b29fb432a..000000000
--- a/components/ui/Button/Button.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import cn from 'classnames'
-import React, {
-  forwardRef,
-  ButtonHTMLAttributes,
-  JSXElementConstructor,
-  useRef,
-} from 'react'
-import mergeRefs from 'react-merge-refs'
-import s from './Button.module.css'
-import { LoadingDots } from '@components/ui'
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  href?: string
-  className?: string
-  variant?: 'flat' | 'slim' | 'ghost'
-  active?: boolean
-  type?: 'submit' | 'reset' | 'button'
-  Component?: string | JSXElementConstructor<any>
-  width?: string | number
-  loading?: boolean
-  disabled?: boolean
-}
-
-const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
-  const {
-    className,
-    variant = 'flat',
-    children,
-    active,
-    width,
-    loading = false,
-    disabled = false,
-    style = {},
-    Component = 'button',
-    ...rest
-  } = props
-  const ref = useRef<typeof Component>(null)
-
-  const rootClassName = cn(
-    s.root,
-    {
-      [s.ghost]: variant === 'ghost',
-      [s.slim]: variant === 'slim',
-      [s.loading]: loading,
-      [s.disabled]: disabled,
-    },
-    className
-  )
-
-  return (
-    <Component
-      aria-pressed={active}
-      data-variant={variant}
-      ref={mergeRefs([ref, buttonRef])}
-      className={rootClassName}
-      disabled={disabled}
-      style={{
-        width,
-        ...style,
-      }}
-      {...rest}
-    >
-      {children}
-      {loading && (
-        <i className="pl-2 m-0 flex">
-          <LoadingDots />
-        </i>
-      )}
-    </Component>
-  )
-})
-
-export default Button
diff --git a/components/ui/Button/index.ts b/components/ui/Button/index.ts
deleted file mode 100644
index aa076c58e..000000000
--- a/components/ui/Button/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './Button'
-export * from './Button'
diff --git a/components/ui/Collapse/Collapse.module.css b/components/ui/Collapse/Collapse.module.css
deleted file mode 100644
index fb4a82a90..000000000
--- a/components/ui/Collapse/Collapse.module.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.root {
-  @apply border-b border-accent-2 py-4 flex flex-col outline-none;
-}
-
-.header {
-  @apply flex flex-row items-center;
-}
-
-.header .label {
-  @apply text-base font-medium;
-}
-
-.content {
-  @apply pt-3 overflow-hidden pl-8;
-}
-
-.icon {
-  @apply mr-3 text-accent-6;
-  margin-left: -6px;
-  transition: transform 0.2s ease;
-}
-
-.icon.open {
-  transform: rotate(90deg);
-}
diff --git a/components/ui/Collapse/Collapse.tsx b/components/ui/Collapse/Collapse.tsx
deleted file mode 100644
index b2f9525ac..000000000
--- a/components/ui/Collapse/Collapse.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import cn from 'classnames'
-import React, { FC, ReactNode, useState } from 'react'
-import s from './Collapse.module.css'
-import { ChevronRight } from '@components/icons'
-import { useSpring, a } from '@react-spring/web'
-import useMeasure from 'react-use-measure'
-
-export interface CollapseProps {
-  title: string
-  children: ReactNode
-}
-
-const Collapse: FC<CollapseProps> = React.memo(({ title, children }) => {
-  const [isActive, setActive] = useState(false)
-  const [ref, { height: viewHeight }] = useMeasure()
-
-  const animProps = useSpring({
-    height: isActive ? viewHeight : 0,
-    config: { tension: 250, friction: 32, clamp: true, duration: 150 },
-    opacity: isActive ? 1 : 0,
-  })
-
-  const toggle = () => setActive((x) => !x)
-
-  return (
-    <div
-      className={s.root}
-      role="button"
-      tabIndex={0}
-      aria-expanded={isActive}
-      onClick={toggle}
-    >
-      <div className={s.header}>
-        <ChevronRight className={cn(s.icon, { [s.open]: isActive })} />
-        <span className={s.label}>{title}</span>
-      </div>
-      <a.div style={{ overflow: 'hidden', ...animProps }}>
-        <div ref={ref} className={s.content}>
-          {children}
-        </div>
-      </a.div>
-    </div>
-  )
-})
-
-export default Collapse
diff --git a/components/ui/Collapse/index.ts b/components/ui/Collapse/index.ts
deleted file mode 100644
index 1e584a53b..000000000
--- a/components/ui/Collapse/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './Collapse'
-export * from './Collapse'
diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx
deleted file mode 100644
index 538b1cac7..000000000
--- a/components/ui/Container/Container.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import cn from 'classnames'
-import React, { FC } from 'react'
-
-interface ContainerProps {
-  className?: string
-  children?: any
-  el?: HTMLElement
-  clean?: boolean
-}
-
-const Container: FC<ContainerProps> = ({
-  children,
-  className,
-  el = 'div',
-  clean,
-}) => {
-  const rootClassName = cn(className, {
-    'mx-auto max-w-8xl px-6': !clean,
-  })
-
-  let Component: React.ComponentType<React.HTMLAttributes<HTMLDivElement>> =
-    el as any
-
-  return <Component className={rootClassName}>{children}</Component>
-}
-
-export default Container
diff --git a/components/ui/Container/index.ts b/components/ui/Container/index.ts
deleted file mode 100644
index 9dbd596a8..000000000
--- a/components/ui/Container/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Container'
diff --git a/components/ui/Grid/Grid.module.css b/components/ui/Grid/Grid.module.css
deleted file mode 100644
index 27e4c5b19..000000000
--- a/components/ui/Grid/Grid.module.css
+++ /dev/null
@@ -1,154 +0,0 @@
-.root {
-  @apply grid grid-cols-1 gap-0;
-
-  @screen lg {
-    @apply grid-cols-3 grid-rows-2;
-  }
-
-  & > * {
-    @apply row-span-1 bg-transparent box-border overflow-hidden;
-    height: 500px;
-    max-height: 800px;
-
-    @screen lg {
-      @apply col-span-1;
-      height: inherit;
-    }
-  }
-}
-
-.default {
-  & > * {
-    @apply bg-transparent;
-  }
-}
-
-.layoutNormal {
-  @apply gap-3;
-}
-
-@screen md {
-  .layoutNormal > * {
-    max-height: min-content !important;
-  }
-}
-
-@screen lg {
-  .layoutNormal > * {
-    max-height: 400px;
-  }
-}
-
-.layoutA {
-  & > *:nth-child(6n + 1),
-  & > *:nth-child(6n + 5) {
-    @apply row-span-2;
-    height: var(--row-height);
-
-    @screen lg {
-      @apply col-span-2;
-    }
-  }
-
-  &.filled {
-    & > *:nth-child(6n + 1) {
-      @apply bg-violet;
-    }
-
-    & > *:nth-child(6n + 2) {
-      @apply bg-accent-8;
-    }
-
-    & > *:nth-child(6n + 3) {
-      @apply bg-pink;
-    }
-
-    & > *:nth-child(6n + 6) {
-      @apply bg-cyan;
-    }
-  }
-}
-
-.layoutB {
-  & > *:nth-child(6n + 2),
-  & > *:nth-child(6n + 4) {
-    @apply row-span-2;
-    height: var(--row-height);
-
-    @screen lg {
-      @apply col-span-2;
-    }
-  }
-
-  &.filled {
-    & > *:nth-child(6n + 1) {
-      @apply bg-violet;
-    }
-
-    & > *:nth-child(6n + 2) {
-      @apply bg-accent-8;
-    }
-
-    & > *:nth-child(6n + 3) {
-      @apply bg-pink;
-    }
-
-    & > *:nth-child(6n + 6) {
-      @apply bg-cyan;
-    }
-  }
-}
-
-.layoutC {
-  & > *:nth-child(12n + 1),
-  & > *:nth-child(12n + 8) {
-    @apply row-span-2;
-    height: var(--row-height);
-
-    @screen lg {
-      @apply col-span-2;
-    }
-  }
-
-  &.filled {
-    & > *:nth-child(12n + 1) {
-      @apply bg-violet;
-      height: var(--row-height);
-    }
-
-    & > *:nth-child(12n + 8) {
-      @apply bg-cyan;
-      height: var(--row-height);
-    }
-
-    & > *:nth-child(6n + 3) {
-      @apply bg-pink;
-    }
-  }
-}
-
-.layoutD {
-  & > *:nth-child(12n + 2),
-  & > *:nth-child(12n + 7) {
-    @apply row-span-2;
-    height: var(--row-height);
-
-    @screen lg {
-      @apply col-span-2;
-    }
-  }
-
-  &.filled {
-    & > *:nth-child(12n + 2) {
-      @apply bg-violet;
-    }
-
-    & > *:nth-child(12n + 7) {
-      @apply bg-cyan;
-    }
-
-    & > *:nth-child(6n + 3) {
-      @apply bg-pink;
-    }
-  }
-}
diff --git a/components/ui/Grid/Grid.tsx b/components/ui/Grid/Grid.tsx
deleted file mode 100644
index 55ca78277..000000000
--- a/components/ui/Grid/Grid.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import cn from 'classnames'
-import { FC, ReactNode, Component } from 'react'
-import s from './Grid.module.css'
-
-interface GridProps {
-  className?: string
-  children?: ReactNode[] | Component[] | any[]
-  layout?: 'A' | 'B' | 'C' | 'D' | 'normal'
-  variant?: 'default' | 'filled'
-}
-
-const Grid: FC<GridProps> = ({
-  className,
-  layout = 'A',
-  children,
-  variant = 'default',
-}) => {
-  const rootClassName = cn(
-    s.root,
-    {
-      [s.layoutA]: layout === 'A',
-      [s.layoutB]: layout === 'B',
-      [s.layoutC]: layout === 'C',
-      [s.layoutD]: layout === 'D',
-      [s.layoutNormal]: layout === 'normal',
-      [s.default]: variant === 'default',
-      [s.filled]: variant === 'filled',
-    },
-    className
-  )
-  return <div className={rootClassName}>{children}</div>
-}
-
-export default Grid
diff --git a/components/ui/Grid/index.ts b/components/ui/Grid/index.ts
deleted file mode 100644
index ddb51299b..000000000
--- a/components/ui/Grid/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Grid'
diff --git a/components/ui/Hero/Hero.module.css b/components/ui/Hero/Hero.module.css
deleted file mode 100644
index a0f1798f5..000000000
--- a/components/ui/Hero/Hero.module.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.root {
-  @apply flex flex-col py-16 mx-auto;
-}
-
-.title {
-  @apply text-accent-0 font-extrabold text-4xl leading-none tracking-tight;
-}
-
-.description {
-  @apply mt-4 text-xl leading-8 text-accent-2 mb-1 lg:max-w-4xl;
-}
-
-@screen lg {
-  .root {
-    @apply flex-row items-start justify-center py-32;
-  }
-  .title {
-    @apply text-5xl max-w-xl text-right leading-10 -mt-3;
-    line-height: 3.5rem;
-  }
-  .description {
-    @apply mt-0 ml-6;
-  }
-}
-
-@screen xl {
-  .title {
-    @apply text-6xl;
-  }
-}
diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx
deleted file mode 100644
index 58d13e5de..000000000
--- a/components/ui/Hero/Hero.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { FC } from 'react'
-import { Container } from '@components/ui'
-import { ArrowRight } from '@components/icons'
-import s from './Hero.module.css'
-import Link from 'next/link'
-interface HeroProps {
-  className?: string
-  headline: string
-  description: string
-}
-
-const Hero: FC<HeroProps> = ({ headline, description }) => {
-  return (
-    <div className="bg-accent-9 border-b border-t border-accent-2">
-      <Container>
-        <div className={s.root}>
-          <h2 className={s.title}>{headline}</h2>
-          <div className={s.description}>
-            <p>{description}</p>
-            <Link href="/">
-              <a className="flex items-center text-accent-0 pt-3 font-bold hover:underline cursor-pointer w-max-content">
-                Read it here
-                <ArrowRight width="20" heigh="20" className="ml-1" />
-              </a>
-            </Link>
-          </div>
-        </div>
-      </Container>
-    </div>
-  )
-}
-
-export default Hero
diff --git a/components/ui/Hero/index.ts b/components/ui/Hero/index.ts
deleted file mode 100644
index b08fa5ac8..000000000
--- a/components/ui/Hero/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Hero'
diff --git a/components/ui/Input/Input.module.css b/components/ui/Input/Input.module.css
deleted file mode 100644
index 34507f445..000000000
--- a/components/ui/Input/Input.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.root {
-  @apply bg-primary py-2 px-6 w-full appearance-none transition duration-150 ease-in-out pr-10 border border-accent-3 text-accent-6;
-}
-
-.root:focus {
-  @apply outline-none shadow-outline-normal;
-}
diff --git a/components/ui/Input/Input.tsx b/components/ui/Input/Input.tsx
deleted file mode 100644
index e630728b2..000000000
--- a/components/ui/Input/Input.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import cn from 'classnames'
-import s from './Input.module.css'
-import React, { InputHTMLAttributes } from 'react'
-
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  className?: string
-  onChange?: (...args: any[]) => any
-}
-
-const Input: React.FC<InputProps> = (props) => {
-  const { className, children, onChange, ...rest } = props
-
-  const rootClassName = cn(s.root, {}, className)
-
-  const handleOnChange = (e: any) => {
-    if (onChange) {
-      onChange(e.target.value)
-    }
-    return null
-  }
-
-  return (
-    <label>
-      <input
-        className={rootClassName}
-        onChange={handleOnChange}
-        autoComplete="off"
-        autoCorrect="off"
-        autoCapitalize="off"
-        spellCheck="false"
-        {...rest}
-      />
-    </label>
-  )
-}
-
-export default Input
diff --git a/components/ui/Input/index.ts b/components/ui/Input/index.ts
deleted file mode 100644
index aa97178e5..000000000
--- a/components/ui/Input/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Input'
diff --git a/components/ui/Link/Link.tsx b/components/ui/Link/Link.tsx
deleted file mode 100644
index 27f30e863..000000000
--- a/components/ui/Link/Link.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import NextLink, { LinkProps as NextLinkProps } from 'next/link'
-
-const Link: React.FC<NextLinkProps> = ({ href, children, ...props }) => {
-  return (
-    <NextLink href={href}>
-      <a {...props}>{children}</a>
-    </NextLink>
-  )
-}
-
-export default Link
diff --git a/components/ui/Link/index.ts b/components/ui/Link/index.ts
deleted file mode 100644
index 518d37298..000000000
--- a/components/ui/Link/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Link'
diff --git a/components/ui/LoadingDots/LoadingDots.module.css b/components/ui/LoadingDots/LoadingDots.module.css
deleted file mode 100644
index 6054de3c7..000000000
--- a/components/ui/LoadingDots/LoadingDots.module.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.root {
-  @apply inline-flex text-center items-center leading-7;
-}
-
-.root .dot {
-  @apply rounded-full h-2 w-2;
-  background-color: currentColor;
-  animation-name: blink;
-  animation-duration: 1.4s;
-  animation-iteration-count: infinite;
-  animation-fill-mode: both;
-  margin: 0 2px;
-}
-
-.root .dot:nth-of-type(2) {
-  animation-delay: 0.2s;
-}
-
-.root .dot::nth-of-type(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes blink {
-  0% {
-    opacity: 0.2;
-  }
-  20% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.2;
-  }
-}
diff --git a/components/ui/LoadingDots/LoadingDots.tsx b/components/ui/LoadingDots/LoadingDots.tsx
deleted file mode 100644
index 27ce9f25f..000000000
--- a/components/ui/LoadingDots/LoadingDots.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import s from './LoadingDots.module.css'
-
-const LoadingDots: React.FC = () => {
-  return (
-    <span className={s.root}>
-      <span className={s.dot} key={`dot_1`} />
-      <span className={s.dot} key={`dot_2`} />
-      <span className={s.dot} key={`dot_3`} />
-    </span>
-  )
-}
-
-export default LoadingDots
diff --git a/components/ui/LoadingDots/index.ts b/components/ui/LoadingDots/index.ts
deleted file mode 100644
index 63df282bf..000000000
--- a/components/ui/LoadingDots/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './LoadingDots'
diff --git a/components/ui/Logo/Logo.tsx b/components/ui/Logo/Logo.tsx
deleted file mode 100644
index f15bde40a..000000000
--- a/components/ui/Logo/Logo.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-const Logo = ({ className = '', ...props }) => (
-  <svg
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...props}
-  >
-    <rect width="100%" height="100%" rx="16" fill="var(--secondary)" />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="var(--primary)"
-    />
-  </svg>
-)
-
-export default Logo
diff --git a/components/ui/Logo/index.ts b/components/ui/Logo/index.ts
deleted file mode 100644
index 93dce23b4..000000000
--- a/components/ui/Logo/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Logo'
diff --git a/components/ui/Marquee/Marquee.module.css b/components/ui/Marquee/Marquee.module.css
deleted file mode 100644
index e5ecb16ef..000000000
--- a/components/ui/Marquee/Marquee.module.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.root {
-  @apply w-full min-w-full relative flex flex-row items-center overflow-hidden py-0;
-  max-height: 320px;
-}
-
-.root > div {
-  max-height: 320px;
-  padding: 0;
-  margin: 0;
-}
-
-.root > div > * > *:nth-child(2) * {
-  max-height: 100%;
-}
-
-.primary {
-  @apply bg-accent-0;
-}
-
-.secondary {
-  @apply bg-accent-9;
-}
diff --git a/components/ui/Marquee/Marquee.tsx b/components/ui/Marquee/Marquee.tsx
deleted file mode 100644
index ce5ec2338..000000000
--- a/components/ui/Marquee/Marquee.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import cn from 'classnames'
-import s from './Marquee.module.css'
-import { FC, ReactNode, Component, Children } from 'react'
-import { default as FastMarquee } from 'react-fast-marquee'
-
-interface MarqueeProps {
-  className?: string
-  children?: ReactNode[] | Component[] | any[]
-  variant?: 'primary' | 'secondary'
-}
-
-const Marquee: FC<MarqueeProps> = ({
-  className = '',
-  children,
-  variant = 'primary',
-}) => {
-  const rootClassName = cn(
-    s.root,
-    {
-      [s.primary]: variant === 'primary',
-      [s.secondary]: variant === 'secondary',
-    },
-    className
-  )
-
-  return (
-    <FastMarquee gradient={false} className={rootClassName}>
-      {Children.map(children, (child) => ({
-        ...child,
-        props: {
-          ...child.props,
-          className: cn(child.props.className, `${variant}`),
-        },
-      }))}
-    </FastMarquee>
-  )
-}
-
-export default Marquee
diff --git a/components/ui/Marquee/index.ts b/components/ui/Marquee/index.ts
deleted file mode 100644
index b59b75568..000000000
--- a/components/ui/Marquee/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Marquee'
diff --git a/components/ui/Modal/Modal.module.css b/components/ui/Modal/Modal.module.css
deleted file mode 100644
index f30d7c90a..000000000
--- a/components/ui/Modal/Modal.module.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.root {
-  @apply fixed bg-black bg-opacity-40 flex items-center inset-0 z-50 justify-center;
-  backdrop-filter: blur(0.8px);
-  -webkit-backdrop-filter: blur(0.8px);
-}
-
-.modal {
-  @apply bg-primary p-12 border border-accent-2 relative;
-}
-
-.modal:focus {
-  @apply outline-none;
-}
-
-.close {
-  @apply hover:text-accent-5 transition ease-in-out duration-150 focus:outline-none absolute right-0 top-0 m-6;
-}
diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx
deleted file mode 100644
index bb42b3d1b..000000000
--- a/components/ui/Modal/Modal.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { FC, useRef, useEffect, useCallback } from 'react'
-import s from './Modal.module.css'
-import FocusTrap from '@lib/focus-trap'
-import { Cross } from '@components/icons'
-import {
-  disableBodyScroll,
-  clearAllBodyScrollLocks,
-  enableBodyScroll,
-} from 'body-scroll-lock'
-interface ModalProps {
-  className?: string
-  children?: any
-  onClose: () => void
-  onEnter?: () => void | null
-}
-
-const Modal: FC<ModalProps> = ({ children, onClose }) => {
-  const ref = useRef() as React.MutableRefObject<HTMLDivElement>
-
-  const handleKey = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        return onClose()
-      }
-    },
-    [onClose]
-  )
-
-  useEffect(() => {
-    if (ref.current) {
-      disableBodyScroll(ref.current, { reserveScrollBarGap: true })
-      window.addEventListener('keydown', handleKey)
-    }
-    return () => {
-      if (ref && ref.current) {
-        enableBodyScroll(ref.current)
-      }
-      clearAllBodyScrollLocks()
-      window.removeEventListener('keydown', handleKey)
-    }
-  }, [handleKey])
-
-  return (
-    <div className={s.root}>
-      <div className={s.modal} role="dialog" ref={ref}>
-        <button
-          onClick={() => onClose()}
-          aria-label="Close panel"
-          className={s.close}
-        >
-          <Cross className="h-6 w-6" />
-        </button>
-        <FocusTrap focusFirst>{children}</FocusTrap>
-      </div>
-    </div>
-  )
-}
-
-export default Modal
diff --git a/components/ui/Modal/index.ts b/components/ui/Modal/index.ts
deleted file mode 100644
index e24753a1e..000000000
--- a/components/ui/Modal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Modal'
diff --git a/components/ui/Quantity/Quantity.module.css b/components/ui/Quantity/Quantity.module.css
deleted file mode 100644
index fa60cc56e..000000000
--- a/components/ui/Quantity/Quantity.module.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.actions {
-  @apply flex p-1 border-accent-2 border items-center justify-center
-  w-12 text-accent-7;
-  transition-property: border-color, background, color, transform, box-shadow;
-
-  transition-duration: 0.15s;
-  transition-timing-function: ease;
-  user-select: none;
-}
-
-.actions:hover {
-  @apply border bg-accent-1 border-accent-3 text-accent-9;
-  transition: border-color;
-  z-index: 10;
-}
-
-.actions:focus {
-  @apply outline-none;
-}
-
-.actions:disabled {
-  @apply cursor-not-allowed;
-}
-
-.input {
-  @apply bg-transparent px-4 w-full h-full focus:outline-none select-none pointer-events-auto;
-}
diff --git a/components/ui/Quantity/Quantity.tsx b/components/ui/Quantity/Quantity.tsx
deleted file mode 100644
index abde145aa..000000000
--- a/components/ui/Quantity/Quantity.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { FC } from 'react'
-import s from './Quantity.module.css'
-import { Cross, Plus, Minus } from '@components/icons'
-import cn from 'classnames'
-export interface QuantityProps {
-  value: number
-  increase: () => any
-  decrease: () => any
-  handleRemove: React.MouseEventHandler<HTMLButtonElement>
-  handleChange: React.ChangeEventHandler<HTMLInputElement>
-  max?: number
-}
-
-const Quantity: FC<QuantityProps> = ({
-  value,
-  increase,
-  decrease,
-  handleChange,
-  handleRemove,
-  max = 6,
-}) => {
-  return (
-    <div className="flex flex-row h-9">
-      <button className={s.actions} onClick={handleRemove}>
-        <Cross width={20} height={20} />
-      </button>
-      <label className="w-full border-accent-2 border ml-2">
-        <input
-          className={s.input}
-          onChange={(e) =>
-            Number(e.target.value) < max + 1 ? handleChange(e) : () => {}
-          }
-          value={value}
-          type="number"
-          max={max}
-          min="0"
-          readOnly
-        />
-      </label>
-      <button
-        type="button"
-        onClick={decrease}
-        className={s.actions}
-        style={{ marginLeft: '-1px' }}
-        disabled={value <= 1}
-      >
-        <Minus width={18} height={18} />
-      </button>
-      <button
-        type="button"
-        onClick={increase}
-        className={cn(s.actions)}
-        style={{ marginLeft: '-1px' }}
-        disabled={value < 1 || value >= max}
-      >
-        <Plus width={18} height={18} />
-      </button>
-    </div>
-  )
-}
-
-export default Quantity
diff --git a/components/ui/Quantity/index.ts b/components/ui/Quantity/index.ts
deleted file mode 100644
index 5ee880cc9..000000000
--- a/components/ui/Quantity/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './Quantity'
-export * from './Quantity'
diff --git a/components/ui/README.md b/components/ui/README.md
deleted file mode 100644
index 5bf4fe510..000000000
--- a/components/ui/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# UI
-
-Building blocks to build a rich graphical interfaces. Components should be atomic and pure. Serve one purpose.
diff --git a/components/ui/Rating/Rating.tsx b/components/ui/Rating/Rating.tsx
deleted file mode 100644
index 259e642ea..000000000
--- a/components/ui/Rating/Rating.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { FC } from 'react'
-import rangeMap from '@lib/range-map'
-import { Star } from '@components/icons'
-import cn from 'classnames'
-
-export interface RatingProps {
-  value: number
-}
-
-const Quantity: React.FC<RatingProps> = React.memo(({ value = 5 }) => {
-  return (
-    <div className="flex flex-row py-6 text-accent-9">
-      {rangeMap(5, (i) => (
-        <span
-          key={`star_${i}`}
-          className={cn('inline-block ml-1 ', {
-            'text-accent-5': i >= Math.floor(value),
-          })}
-        >
-          <Star />
-        </span>
-      ))}
-    </div>
-  )
-})
-
-export default Quantity
diff --git a/components/ui/Rating/index.ts b/components/ui/Rating/index.ts
deleted file mode 100644
index 1354efb25..000000000
--- a/components/ui/Rating/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './Rating'
-export * from './Rating'
diff --git a/components/ui/Sidebar/Sidebar.module.css b/components/ui/Sidebar/Sidebar.module.css
deleted file mode 100644
index f6a49387f..000000000
--- a/components/ui/Sidebar/Sidebar.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.root {
-  @apply fixed inset-0 h-full z-50 box-border;
-}
-
-.sidebar {
-  @apply h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto overflow-x-hidden;
-  -webkit-overflow-scrolling: touch !important;
-}
-
-.backdrop {
-  @apply absolute inset-0 bg-black bg-opacity-40 duration-100 ease-linear;
-  backdrop-filter: blur(0.8px);
-  -webkit-backdrop-filter: blur(0.8px);
-}
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
deleted file mode 100644
index ce0eeefe2..000000000
--- a/components/ui/Sidebar/Sidebar.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { FC, useEffect, useRef } from 'react'
-import s from './Sidebar.module.css'
-import cn from 'classnames'
-import {
-  disableBodyScroll,
-  enableBodyScroll,
-  clearAllBodyScrollLocks,
-} from 'body-scroll-lock'
-
-interface SidebarProps {
-  children: any
-  onClose: () => void
-}
-
-const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
-  const ref = useRef() as React.MutableRefObject<HTMLDivElement>
-
-  useEffect(() => {
-    if (ref.current) {
-      disableBodyScroll(ref.current, { reserveScrollBarGap: true })
-    }
-    return () => {
-      if (ref && ref.current) {
-        enableBodyScroll(ref.current)
-      }
-      clearAllBodyScrollLocks()
-    }
-  }, [])
-
-  return (
-    <div className={cn(s.root)}>
-      <div className="absolute inset-0 overflow-hidden">
-        <div className={s.backdrop} onClick={onClose} />
-        <section className="absolute inset-y-0 right-0 max-w-full flex outline-none pl-10">
-          <div className="h-full w-full md:w-screen md:max-w-md">
-            <div className={s.sidebar} ref={ref}>
-              {children}
-            </div>
-          </div>
-        </section>
-      </div>
-    </div>
-  )
-}
-
-export default Sidebar
diff --git a/components/ui/Sidebar/index.ts b/components/ui/Sidebar/index.ts
deleted file mode 100644
index 877187ca3..000000000
--- a/components/ui/Sidebar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Sidebar'
diff --git a/components/ui/Skeleton/Skeleton.module.css b/components/ui/Skeleton/Skeleton.module.css
deleted file mode 100644
index 37c164de7..000000000
--- a/components/ui/Skeleton/Skeleton.module.css
+++ /dev/null
@@ -1,48 +0,0 @@
-.skeleton {
-  @apply block;
-  background-image: linear-gradient(
-    270deg,
-    var(--accent-0),
-    var(--accent-2),
-    var(--accent-0),
-    var(--accent-1)
-  );
-  background-size: 400% 100%;
-  animation: loading 8s ease-in-out infinite;
-}
-
-.wrapper {
-  @apply block relative;
-
-  &:not(.show)::before {
-    content: none;
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 100;
-    background-image: linear-gradient(
-      270deg,
-      var(--accent-0),
-      var(--accent-2),
-      var(--accent-0),
-      var(--accent-1)
-    );
-    background-size: 400% 100%;
-    animation: loading 8s ease-in-out infinite;
-  }
-}
-
-@keyframes loading {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
diff --git a/components/ui/Skeleton/Skeleton.tsx b/components/ui/Skeleton/Skeleton.tsx
deleted file mode 100644
index 9cef2c1ac..000000000
--- a/components/ui/Skeleton/Skeleton.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { CSSProperties } from 'react'
-import cn from 'classnames'
-import px from '@lib/to-pixels'
-import s from './Skeleton.module.css'
-
-interface SkeletonProps {
-  show?: boolean
-  block?: boolean
-  className?: string
-  style?: CSSProperties
-  width?: string | number
-  height?: string | number
-  boxHeight?: string | number
-}
-
-const Skeleton: React.FC<SkeletonProps> = ({
-  style,
-  width,
-  height,
-  children,
-  className,
-  show = true,
-  boxHeight = height,
-}) => {
-  // Automatically calculate the size if there are children
-  // and no fixed sizes are specified
-  const shouldAutoSize = !!children && !(width || height)
-
-  // Defaults
-  width = width || 24
-  height = height || 24
-  boxHeight = boxHeight || height
-
-  return (
-    <span
-      className={cn(s.skeleton, className, {
-        [s.show]: show,
-        [s.wrapper]: shouldAutoSize,
-        [s.loaded]: !shouldAutoSize && !!children,
-      })}
-      style={
-        shouldAutoSize
-          ? {}
-          : {
-              minWidth: px(width),
-              minHeight: px(height),
-              marginBottom: `calc(${px(boxHeight)} - ${px(height)})`,
-              ...style,
-            }
-      }
-    >
-      {children}
-    </span>
-  )
-}
-
-export default Skeleton
diff --git a/components/ui/Skeleton/index.ts b/components/ui/Skeleton/index.ts
deleted file mode 100644
index 3ec6c0031..000000000
--- a/components/ui/Skeleton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Skeleton'
diff --git a/components/ui/Text/Text.module.css b/components/ui/Text/Text.module.css
deleted file mode 100644
index f572fdf18..000000000
--- a/components/ui/Text/Text.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.body {
-  @apply text-base leading-7 max-w-6xl mx-auto;
-}
-
-.heading {
-  @apply text-5xl pt-1 pb-2 font-semibold tracking-wide cursor-pointer mb-2;
-}
-
-.pageHeading {
-  @apply pt-1 pb-4 text-2xl leading-7 font-bold tracking-wide;
-}
-
-.sectionHeading {
-  @apply pt-1 pb-2 text-2xl font-bold tracking-wide cursor-pointer mb-2;
-}
diff --git a/components/ui/Text/Text.tsx b/components/ui/Text/Text.tsx
deleted file mode 100644
index 6106c209a..000000000
--- a/components/ui/Text/Text.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, {
-  FunctionComponent,
-  JSXElementConstructor,
-  CSSProperties,
-} from 'react'
-import cn from 'classnames'
-import s from './Text.module.css'
-
-interface TextProps {
-  variant?: Variant
-  className?: string
-  style?: CSSProperties
-  children?: React.ReactNode | any
-  html?: string
-  onClick?: () => any
-}
-
-type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading'
-
-const Text: FunctionComponent<TextProps> = ({
-  style,
-  className = '',
-  variant = 'body',
-  children,
-  html,
-  onClick,
-}) => {
-  const componentsMap: {
-    [P in Variant]: React.ComponentType<any> | string
-  } = {
-    body: 'div',
-    heading: 'h1',
-    pageHeading: 'h1',
-    sectionHeading: 'h2',
-  }
-
-  const Component:
-    | JSXElementConstructor<any>
-    | React.ReactElement<any>
-    | React.ComponentType<any>
-    | string = componentsMap![variant!]
-
-  const htmlContentProps = html
-    ? {
-        dangerouslySetInnerHTML: { __html: html },
-      }
-    : {}
-
-  return (
-    <Component
-      className={cn(
-        s.root,
-        {
-          [s.body]: variant === 'body',
-          [s.heading]: variant === 'heading',
-          [s.pageHeading]: variant === 'pageHeading',
-          [s.sectionHeading]: variant === 'sectionHeading',
-        },
-        className
-      )}
-      onClick={onClick}
-      style={style}
-      {...htmlContentProps}
-    >
-      {children}
-    </Component>
-  )
-}
-
-export default Text
diff --git a/components/ui/Text/index.ts b/components/ui/Text/index.ts
deleted file mode 100644
index e1e5fa74e..000000000
--- a/components/ui/Text/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Text'
diff --git a/components/ui/context.tsx b/components/ui/context.tsx
deleted file mode 100644
index d2f5aebfd..000000000
--- a/components/ui/context.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import React, { FC, useCallback, useMemo } from 'react'
-import { ThemeProvider } from 'next-themes'
-
-export interface State {
-  displaySidebar: boolean
-  displayDropdown: boolean
-  displayModal: boolean
-  sidebarView: string
-  modalView: string
-  userAvatar: string
-}
-
-const initialState = {
-  displaySidebar: false,
-  displayDropdown: false,
-  displayModal: false,
-  modalView: 'LOGIN_VIEW',
-  sidebarView: 'CHECKOUT_VIEW',
-  userAvatar: '',
-}
-
-type Action =
-  | {
-      type: 'OPEN_SIDEBAR'
-    }
-  | {
-      type: 'CLOSE_SIDEBAR'
-    }
-  | {
-      type: 'OPEN_DROPDOWN'
-    }
-  | {
-      type: 'CLOSE_DROPDOWN'
-    }
-  | {
-      type: 'OPEN_MODAL'
-    }
-  | {
-      type: 'CLOSE_MODAL'
-    }
-  | {
-      type: 'SET_MODAL_VIEW'
-      view: MODAL_VIEWS
-    }
-  | {
-      type: 'SET_SIDEBAR_VIEW'
-      view: SIDEBAR_VIEWS
-    }
-  | {
-      type: 'SET_USER_AVATAR'
-      value: string
-    }
-
-type MODAL_VIEWS =
-  | 'SIGNUP_VIEW'
-  | 'LOGIN_VIEW'
-  | 'FORGOT_VIEW'
-  | 'NEW_SHIPPING_ADDRESS'
-  | 'NEW_PAYMENT_METHOD'
-
-type SIDEBAR_VIEWS = 'CART_VIEW' | 'CHECKOUT_VIEW' | 'PAYMENT_METHOD_VIEW'
-
-export const UIContext = React.createContext<State | any>(initialState)
-
-UIContext.displayName = 'UIContext'
-
-function uiReducer(state: State, action: Action) {
-  switch (action.type) {
-    case 'OPEN_SIDEBAR': {
-      return {
-        ...state,
-        displaySidebar: true,
-      }
-    }
-    case 'CLOSE_SIDEBAR': {
-      return {
-        ...state,
-        displaySidebar: false,
-      }
-    }
-    case 'OPEN_DROPDOWN': {
-      return {
-        ...state,
-        displayDropdown: true,
-      }
-    }
-    case 'CLOSE_DROPDOWN': {
-      return {
-        ...state,
-        displayDropdown: false,
-      }
-    }
-    case 'OPEN_MODAL': {
-      return {
-        ...state,
-        displayModal: true,
-        displaySidebar: false,
-      }
-    }
-    case 'CLOSE_MODAL': {
-      return {
-        ...state,
-        displayModal: false,
-      }
-    }
-    case 'SET_MODAL_VIEW': {
-      return {
-        ...state,
-        modalView: action.view,
-      }
-    }
-    case 'SET_SIDEBAR_VIEW': {
-      return {
-        ...state,
-        sidebarView: action.view,
-      }
-    }
-    case 'SET_USER_AVATAR': {
-      return {
-        ...state,
-        userAvatar: action.value,
-      }
-    }
-  }
-}
-
-export const UIProvider: FC = (props) => {
-  const [state, dispatch] = React.useReducer(uiReducer, initialState)
-
-  const openSidebar = useCallback(
-    () => dispatch({ type: 'OPEN_SIDEBAR' }),
-    [dispatch]
-  )
-  const closeSidebar = useCallback(
-    () => dispatch({ type: 'CLOSE_SIDEBAR' }),
-    [dispatch]
-  )
-  const toggleSidebar = useCallback(
-    () =>
-      state.displaySidebar
-        ? dispatch({ type: 'CLOSE_SIDEBAR' })
-        : dispatch({ type: 'OPEN_SIDEBAR' }),
-    [dispatch, state.displaySidebar]
-  )
-  const closeSidebarIfPresent = useCallback(
-    () => state.displaySidebar && dispatch({ type: 'CLOSE_SIDEBAR' }),
-    [dispatch, state.displaySidebar]
-  )
-
-  const openDropdown = useCallback(
-    () => dispatch({ type: 'OPEN_DROPDOWN' }),
-    [dispatch]
-  )
-  const closeDropdown = useCallback(
-    () => dispatch({ type: 'CLOSE_DROPDOWN' }),
-    [dispatch]
-  )
-
-  const openModal = useCallback(
-    () => dispatch({ type: 'OPEN_MODAL' }),
-    [dispatch]
-  )
-  const closeModal = useCallback(
-    () => dispatch({ type: 'CLOSE_MODAL' }),
-    [dispatch]
-  )
-
-  const setUserAvatar = useCallback(
-    (value: string) => dispatch({ type: 'SET_USER_AVATAR', value }),
-    [dispatch]
-  )
-
-  const setModalView = useCallback(
-    (view: MODAL_VIEWS) => dispatch({ type: 'SET_MODAL_VIEW', view }),
-    [dispatch]
-  )
-
-  const setSidebarView = useCallback(
-    (view: SIDEBAR_VIEWS) => dispatch({ type: 'SET_SIDEBAR_VIEW', view }),
-    [dispatch]
-  )
-
-  const value = useMemo(
-    () => ({
-      ...state,
-      openSidebar,
-      closeSidebar,
-      toggleSidebar,
-      closeSidebarIfPresent,
-      openDropdown,
-      closeDropdown,
-      openModal,
-      closeModal,
-      setModalView,
-      setSidebarView,
-      setUserAvatar,
-    }),
-    [state]
-  )
-
-  return <UIContext.Provider value={value} {...props} />
-}
-
-export const useUI = () => {
-  const context = React.useContext(UIContext)
-  if (context === undefined) {
-    throw new Error(`useUI must be used within a UIProvider`)
-  }
-  return context
-}
-
-export const ManagedUIContext: FC = ({ children }) => (
-  <UIProvider>
-    <ThemeProvider>{children}</ThemeProvider>
-  </UIProvider>
-)
diff --git a/components/ui/index.ts b/components/ui/index.ts
deleted file mode 100644
index 47bdbd9ff..000000000
--- a/components/ui/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export { default as Hero } from './Hero'
-export { default as Logo } from './Logo'
-export { default as Grid } from './Grid'
-export { default as Button } from './Button'
-export { default as Sidebar } from './Sidebar'
-export { default as Marquee } from './Marquee'
-export { default as Container } from './Container'
-export { default as LoadingDots } from './LoadingDots'
-export { default as Skeleton } from './Skeleton'
-export { default as Modal } from './Modal'
-export { default as Text } from './Text'
-export { default as Input } from './Input'
-export { default as Collapse } from './Collapse'
-export { default as Quantity } from './Quantity'
-export { default as Rating } from './Rating'
-export { useUI } from './context'
diff --git a/components/wishlist/WishlistButton/WishlistButton.module.css b/components/wishlist/WishlistButton/WishlistButton.module.css
deleted file mode 100644
index 3bdf1e710..000000000
--- a/components/wishlist/WishlistButton/WishlistButton.module.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.root {
-  transition-duration: 0.2s;
-  transition-timing-function: ease;
-  transition-property: color, background-color, opacity;
-  @apply p-3 text-accent-9 flex items-center
-  justify-center font-semibold cursor-pointer
-  bg-accent-0 text-sm;
-}
-
-.root:focus {
-  @apply outline-none;
-}
-
-.icon {
-  transition-duration: 0.2s;
-  transition-timing-function: ease;
-  transition-property: transform, fill;
-  color: currentColor;
-}
-
-.icon.loading {
-  fill: var(--pink-light);
-}
-
-.icon.inWishlist {
-  fill: var(--pink);
-}
-
-@screen lg {
-  .root {
-    @apply p-4;
-  }
-}
diff --git a/components/wishlist/WishlistButton/WishlistButton.tsx b/components/wishlist/WishlistButton/WishlistButton.tsx
deleted file mode 100644
index a48eac170..000000000
--- a/components/wishlist/WishlistButton/WishlistButton.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { FC, useState } from 'react'
-import cn from 'classnames'
-import { useUI } from '@components/ui'
-import { Heart } from '@components/icons'
-import useAddItem from '@framework/wishlist/use-add-item'
-import useCustomer from '@framework/customer/use-customer'
-import useWishlist from '@framework/wishlist/use-wishlist'
-import useRemoveItem from '@framework/wishlist/use-remove-item'
-import s from './WishlistButton.module.css'
-import type { Product, ProductVariant } from '@commerce/types/product'
-
-type Props = {
-  productId: Product['id']
-  variant: ProductVariant
-} & React.ButtonHTMLAttributes<HTMLButtonElement>
-
-const WishlistButton: FC<Props> = ({
-  productId,
-  variant,
-  className,
-  ...props
-}) => {
-  const { data } = useWishlist()
-  const addItem = useAddItem()
-  const removeItem = useRemoveItem()
-  const { data: customer } = useCustomer()
-  const { openModal, setModalView } = useUI()
-  const [loading, setLoading] = useState(false)
-
-  // @ts-ignore Wishlist is not always enabled
-  const itemInWishlist = data?.items?.find(
-    // @ts-ignore Wishlist is not always enabled
-    (item) =>
-      item.product_id === Number(productId) &&
-      (item.variant_id as any) === Number(variant.id)
-  )
-
-  const handleWishlistChange = async (e: any) => {
-    e.preventDefault()
-
-    if (loading) return
-
-    // A login is required before adding an item to the wishlist
-    if (!customer) {
-      setModalView('LOGIN_VIEW')
-      return openModal()
-    }
-
-    setLoading(true)
-
-    try {
-      if (itemInWishlist) {
-        await removeItem({ id: itemInWishlist.id! })
-      } else {
-        await addItem({
-          productId,
-          variantId: variant?.id!,
-        })
-      }
-
-      setLoading(false)
-    } catch (err) {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <button
-      aria-label="Add to wishlist"
-      className={cn(s.root, className)}
-      onClick={handleWishlistChange}
-      {...props}
-    >
-      <Heart
-        className={cn(s.icon, {
-          [s.loading]: loading,
-          [s.inWishlist]: itemInWishlist,
-        })}
-      />
-    </button>
-  )
-}
-
-export default WishlistButton
diff --git a/components/wishlist/WishlistButton/index.ts b/components/wishlist/WishlistButton/index.ts
deleted file mode 100644
index 66e88074b..000000000
--- a/components/wishlist/WishlistButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './WishlistButton'
diff --git a/components/wishlist/index.ts b/components/wishlist/index.ts
deleted file mode 100644
index 9fe0a3541..000000000
--- a/components/wishlist/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as WishlistButton } from './WishlistButton'
diff --git a/grocery-vercel-commerce b/grocery-vercel-commerce
deleted file mode 160000
index 3c7aa8e86..000000000
--- a/grocery-vercel-commerce
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 3c7aa8e862bfd8d44719be44c6c0a31ab01524a3
diff --git a/next.config.js b/next.config.js
index 515b2ae7c..d3ad64f4a 100644
--- a/next.config.js
+++ b/next.config.js
@@ -13,6 +13,10 @@ const isVendure = provider === 'vendure'
 
 module.exports = withCommerceConfig({
   commerce,
+  images: {
+    // todo: replace domains for images
+    domains: ['user-images.githubusercontent.com'],
+  },
   i18n: {
     locales: ['en-US', 'es'],
     defaultLocale: 'en-US',
diff --git a/pages/404.tsx b/pages/404.tsx
index 38a01bcc4..8a357fb51 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -1,24 +1,4 @@
-import type { GetStaticPropsContext } from 'next'
-import commerce from '@lib/api/commerce'
-import { Layout } from '@components/common'
-
-export async function getStaticProps({
-  preview,
-  locale,
-  locales,
-}: GetStaticPropsContext) {
-  const config = { locale, locales }
-  const { pages } = await commerce.getAllPages({ config, preview })
-  const { categories, brands } = await commerce.getSiteInfo({ config, preview })
-  return {
-    props: {
-      pages,
-      categories,
-      brands,
-    },
-    revalidate: 200,
-  }
-}
+import { Layout } from "src/components/common"
 
 export default function NotFound() {
   return (
diff --git a/pages/[...pages].tsx b/pages/[...pages].tsx
deleted file mode 100644
index a8a24b3aa..000000000
--- a/pages/[...pages].tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import type {
-  GetStaticPathsContext,
-  GetStaticPropsContext,
-  InferGetStaticPropsType,
-} from 'next'
-import commerce from '@lib/api/commerce'
-import { Text } from '@components/ui'
-import { Layout } from '@components/common'
-import getSlug from '@lib/get-slug'
-import { missingLocaleInPages } from '@lib/usage-warns'
-import type { Page } from '@commerce/types/page'
-import { useRouter } from 'next/router'
-
-export async function getStaticProps({
-  preview,
-  params,
-  locale,
-  locales,
-}: GetStaticPropsContext<{ pages: string[] }>) {
-  const config = { locale, locales }
-  const pagesPromise = commerce.getAllPages({ config, preview })
-  const siteInfoPromise = commerce.getSiteInfo({ config, preview })
-  const { pages } = await pagesPromise
-  const { categories } = await siteInfoPromise
-  const path = params?.pages.join('/')
-  const slug = locale ? `${locale}/${path}` : path
-  const pageItem = pages.find((p: Page) =>
-    p.url ? getSlug(p.url) === slug : false
-  )
-  const data =
-    pageItem &&
-    (await commerce.getPage({
-      variables: { id: pageItem.id! },
-      config,
-      preview,
-    }))
-
-  const page = data?.page
-
-  if (!page) {
-    // We throw to make sure this fails at build time as this is never expected to happen
-    throw new Error(`Page with slug '${slug}' not found`)
-  }
-
-  return {
-    props: { pages, page, categories },
-    revalidate: 60 * 60, // Every hour
-  }
-}
-
-export async function getStaticPaths({ locales }: GetStaticPathsContext) {
-  const config = { locales }
-  const { pages }: { pages: Page[] } = await commerce.getAllPages({ config })
-  const [invalidPaths, log] = missingLocaleInPages()
-  const paths = pages
-    .map((page) => page.url)
-    .filter((url) => {
-      if (!url || !locales) return url
-      // If there are locales, only include the pages that include one of the available locales
-      if (locales.includes(getSlug(url).split('/')[0])) return url
-
-      invalidPaths.push(url)
-    })
-  log()
-
-  return {
-    paths,
-    fallback: 'blocking',
-  }
-}
-
-export default function Pages({
-  page,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
-  const router = useRouter()
-
-  return router.isFallback ? (
-    <h1>Loading...</h1> // TODO (BC) Add Skeleton Views
-  ) : (
-    <div className="max-w-2xl mx-8 sm:mx-auto py-20">
-      {page?.body && <Text html={page.body} />}
-    </div>
-  )
-}
-
-Pages.Layout = Layout
diff --git a/pages/cart.tsx b/pages/cart.tsx
deleted file mode 100644
index b9659d21b..000000000
--- a/pages/cart.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import type { GetStaticPropsContext } from 'next'
-import commerce from '@lib/api/commerce'
-import { Layout } from '@components/common'
-// import useCart from '@framework/cart/use-cart'
-// import usePrice from '@framework/product/use-price'
-// import { Button, Text } from '@components/ui'
-// import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons'
-// import { CartItem } from '@components/cart'
-
-export async function getStaticProps({
-  preview,
-  locale,
-  locales,
-}: GetStaticPropsContext) {
-  const config = { locale, locales }
-  const pagesPromise = commerce.getAllPages({ config, preview })
-  const siteInfoPromise = commerce.getSiteInfo({ config, preview })
-  const { pages } = await pagesPromise
-  const { categories } = await siteInfoPromise
-  return {
-    props: { pages, categories },
-  }
-}
-
-export default function Cart() {
-  // const error = null
-  // const success = null
-  // const { data, isLoading, isEmpty } = useCart()
-
-  // const { price: subTotal } = usePrice(
-  //   data && {
-  //     amount: Number(data.subtotalPrice),
-  //     currencyCode: data.currency.code,
-  //   }
-  // )
-  // const { price: total } = usePrice(
-  //   data && {
-  //     amount: Number(data.totalPrice),
-  //     currencyCode: data.currency.code,
-  //   }
-  // )
-
-  return (
-    <div>
-      This is cart page
-    </div>
-  )
-}
-
-Cart.Layout = Layout
diff --git a/pages/demo.tsx b/pages/demo.tsx
new file mode 100644
index 000000000..38f91037c
--- /dev/null
+++ b/pages/demo.tsx
@@ -0,0 +1,13 @@
+import { Layout } from 'src/components/common';
+
+
+
+export default function Demo() {
+    return <>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias possimus tempore, nulla voluptate sed iste unde qui. Natus, amet minus, fugiat unde optio iste perferendis ea quae iusto asperiores voluptates enim sunt ducimus? Perferendis velit maxime sint pariatur beatae, veniam nulla sed, impedit, consectetur minus est libero enim? Quia reiciendis dolor, porro nisi harum fuga ullam pariatur facilis quas, praesentium quae, eveniet officiis officia animi aspernatur ut sunt commodi vero totam! Rerum, placeat perferendis laborum itaque blanditiis natus aperiam, eum delectus enim architecto eos, et voluptates! Illo at sed, pariatur ullam suscipit rerum recusandae doloremque natus nihil. Et temporibus quae necessitatibus quam alias, repellat laudantium a perspiciatis dolorum accusamus officiis pariatur ipsum facilis, nobis magni molestiae accusantium assumenda tempora consequuntur natus nostrum? Id, mollitia alias quidem hic aperiam error, blanditiis vero distinctio sit neque assumenda odio praesentium, perspiciatis aspernatur exercitationem. Eveniet nostrum tempore saepe cupiditate totam fuga doloremque placeat natus beatae quibusdam labore tempora delectus alias architecto vel, recusandae facilis nam rerum dolores magni? Eaque fugiat ut dicta. Aperiam, excepturi ad molestias non corrupti, officia dolore sequi, provident laborum officiis praesentium beatae quos? Totam et consequatur atque fugit voluptate. Aliquam neque, ab hic suscipit obcaecati ut aut quos. Expedita, ipsam.
+    </>
+}
+
+Demo.Layout = Layout
diff --git a/pages/index.tsx b/pages/index.tsx
index c193554a9..158b1dc60 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,37 +1,19 @@
-
-import { CardBlog, CollapseCommon, Layout, RelevantBlogPosts } from 'src/components/common';
+import { Layout } from 'src/components/common';
 import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
-import {SelectCommon} from 'src/components/common'
-import card from "../public/assets/images/card.png"
 
-const CONTENT = [
-  "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
-  "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
-  "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
-]
 export default function Home() {
   return (
     <>
-      {/* <HomeBanner />
-      <HomeBanner/>
+      <HomeBanner />
       <HomeFeature />
       <HomeCategories />
       <HomeCollection />
       <HomeVideo />
-      <HomeCTA /> */}
-      {/* <HomeRecipe />
-      <HomeSubscribe /> */}
-      {/* <HomeRecipe /> */}
-      {/* <SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
-      <SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon> */}
-      <CollapseCommon title="This is a subtitle" content={CONTENT} />
-      <CollapseCommon title="This is a subtitle" content={CONTENT} />
-      <CollapseCommon title="This is a subtitle" content={CONTENT} />
-      <CollapseCommon title="This is a subtitle" content={CONTENT} />
-      <CollapseCommon title="This is a subtitle" content={CONTENT} />
-      <CollapseCommon title="This is a subtitle" content={CONTENT} />
-      <RelevantBlogPosts />
-      {/* todo: uncomment */}
+      <HomeCTA />
+      <HomeRecipe />
+      <HomeSubscribe />
+
+      {/* // todo: uncomment */}
       {/* <ModalCreateUserInfo/> */}
     </>
   )
diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index c5bcbdba1..c34394af5 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -1,76 +1,16 @@
-import { Layout } from '@components/common'
-import commerce from '@lib/api/commerce'
-import type {
-  GetStaticPathsContext,
-  GetStaticPropsContext,
-  InferGetStaticPropsType
-} from 'next'
-import { useRouter } from 'next/router'
 
-export async function getStaticProps({
-  params,
-  locale,
-  locales,
-  preview,
-}: GetStaticPropsContext<{ slug: string }>) {
-  const config = { locale, locales }
-  const pagesPromise = commerce.getAllPages({ config, preview })
-  const siteInfoPromise = commerce.getSiteInfo({ config, preview })
-  const productPromise = commerce.getProduct({
-    variables: { slug: params!.slug },
-    config,
-    preview,
-  })
+import { Layout, RecipeDetail } from 'src/components/common'
+import { ProductInfoDetail, RecommendedRecipes, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
+import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
 
-  const allProductsPromise = commerce.getAllProducts({
-    variables: { first: 4 },
-    config,
-    preview,
-  })
-  const { pages } = await pagesPromise
-  const { categories } = await siteInfoPromise
-  const { product } = await productPromise
-  const { products: relatedProducts } = await allProductsPromise
-
-  if (!product) {
-    throw new Error(`Product with slug '${params!.slug}' not found`)
-  }
-
-  return {
-    props: {
-      pages,
-      product,
-      relatedProducts,
-      categories,
-    },
-    revalidate: 200,
-  }
-}
-
-export async function getStaticPaths({ locales }: GetStaticPathsContext) {
-  const { products } = await commerce.getAllProductPaths()
-
-  return {
-    paths: locales
-      ? locales.reduce<string[]>((arr, locale) => {
-          // Add a product path for every locale
-          products.forEach((product: any) => {
-            arr.push(`/${locale}/product${product.path}`)
-          })
-          return arr
-        }, [])
-      : products.map((product: any) => `/product${product.path}`),
-    fallback: 'blocking',
-  }
-}
-
-export default function Slug({
-  product,
-  relatedProducts,
-}: InferGetStaticPropsType<typeof getStaticProps>) {
-  const router = useRouter()
-
-  return <div>This is product page</div>
+export default function Slug() {
+  return <>
+    <ProductInfoDetail />
+    <RecipeDetail ingredients={INGREDIENT_DATA_TEST} />
+    <RecommendedRecipes data={RECIPE_DATA_TEST} />
+    <ReleventProducts />
+    <ViewedProducts />
+  </>
 }
 
 Slug.Layout = Layout
diff --git a/pages/test.tsx b/pages/test.tsx
index c1e1f5d5f..7fb1f9294 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -9,6 +9,7 @@ import {
 import { CardItemCheckoutProps } from 'src/components/common/CardItemCheckout/CardItemCheckout'
 import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse'
 import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
+import { CheckoutInfo } from 'src/components/modules/checkout'
 import image5 from '../public/assets/images/image5.png'
 import image6 from '../public/assets/images/image6.png'
 import image7 from '../public/assets/images/image7.png'
@@ -16,6 +17,7 @@ import image8 from '../public/assets/images/image8.png'
 const dataTest:CardItemCheckoutProps[] = [
   {
     name: 'Tomato',
+    slug: "tomato",
     weight: '250g',
     category: 'VEGGIE',
     price: 'Rp 27.500',
@@ -24,6 +26,7 @@ const dataTest:CardItemCheckoutProps[] = [
   },
   {
     name: 'Carrot',
+    slug: "carrot",
     weight: '250g',
     category: 'VEGGIE',
     price: 'Rp 27.500',
@@ -32,20 +35,13 @@ const dataTest:CardItemCheckoutProps[] = [
   },
   {
     name: 'Salad',
+    slug:"salad",
     weight: '250g',
     category: 'VEGGIE',
     price: 'Rp 27.500',
     imageSrc: image8.src,
     quantity:2
   },
-  {
-    name: 'Tomato',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image5.src,
-    quantity:9
-  },
 ]
 export default function Test() {
   const [visible, setVisible] = useState(false)
@@ -64,15 +60,8 @@ export default function Test() {
   }
   return (
     <>
-      <div className="w-full flex" style={{padding: "0 3.2rem"}} >
-        <div className="">
-          <CheckoutCollapse id={1} visible={visible} onOpen={onOpen} onClose={onClose} title="Customer Information" isEdit={true}>
-            <CustomerInfoForm/>
-          </CheckoutCollapse>
-          <CheckoutCollapse id={2} visible={visible2} onOpen={onOpen2} onClose={onClose2} title="Shipping Information" isEdit={true}>
-            <ShippingInfoForm/>
-          </CheckoutCollapse>
-        </div>
+      <div className="w-full flex justify-between" style={{padding: "0 3.2rem"}} >
+        <CheckoutInfo/>
         <CheckoutBill data={dataTest}/>
       </div>
     </>
diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
index 6741f386c..8f6c05bf7 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
@@ -1,6 +1,8 @@
 @import '../../../styles/utilities';
 
 .breadcrumbCommon {
-    @apply spacing-horizontal-left;
     color: var(--text-base);
-}
\ No newline at end of file
+    .currentItem {
+        cursor: default;
+    }
+}
diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
index 2dca6b714..be84dcb67 100644
--- a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
@@ -1,42 +1,37 @@
 import React from 'react'
+import { ROUTE } from 'src/utils/constanst.utils'
 import s from './BreadcrumbCommon.module.scss'
 
 import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem'
 import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator'
 
 interface BreadcrumbCommonProps {
-    crumbs: { link:string, name:string }[];
+    crumbs: { link: string, name: string }[];
     showHomePage?: boolean;
 }
 
-const BreadcrumbCommon = ({ crumbs, showHomePage=false } : BreadcrumbCommonProps) => {
-    if (showHomePage) {
-        crumbs.unshift({link: "/", name: "Home"});
-    }
+const BreadcrumbCommon = ({ crumbs, showHomePage = true }: BreadcrumbCommonProps) => {
     return (
         <section className={s.breadcrumbCommon}>
             {
-                crumbs.map((crumb, i) => {
-                    if (i === 0) {
-                        return (
-                            <BreadcrumbItem key={i} text={crumb.name} href={crumb.link} />
-                        )
-                    }
-                    if (i === crumbs.length-1) {
-                        return (
-                            <BreadcrumbSeparator key={i}>
-                                <BreadcrumbItem key={i} text={crumb.name} href="#" />
-                            </BreadcrumbSeparator>
-                        )
-                    }
-                    return (
-                        <BreadcrumbSeparator key={i}>
-                            <BreadcrumbItem key={i} text={crumb.name} href={crumb.link} />
-                        </BreadcrumbSeparator>
-                    )
-                })
+
+                showHomePage && <BreadcrumbItem key='Home' text='Home' href={ROUTE.HOME} />
             }
-        </section>
+            {
+                crumbs.length > 0 && <>
+
+                    {
+                        crumbs.slice(0, crumbs.length - 1).map((crumb) => (
+                            < BreadcrumbSeparator key={crumb.name}>
+                                <BreadcrumbItem text={crumb.name} href={crumb.link} />
+                            </BreadcrumbSeparator>
+                        ))}
+                    < BreadcrumbSeparator>
+                        <span className={s.currentItem}>{crumbs[crumbs.length - 1].name}</span>
+                    </BreadcrumbSeparator>
+                </>
+            }
+        </section >
     )
 }
 
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.module.scss b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.module.scss
new file mode 100644
index 000000000..3a785f480
--- /dev/null
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.module.scss
@@ -0,0 +1,5 @@
+.breadcrumbItem {
+    &:hover {
+        color: var(--primary);
+    }
+}
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
index f807de555..13f980ea9 100644
--- a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Link from 'next/link'
+import s from './BreadcrumbItem.module.scss'
 
 interface BreadcrumbItemProps {
     text: string;
@@ -9,7 +10,7 @@ interface BreadcrumbItemProps {
 const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => {
     return (
         <Link href={href}>
-            <a>{text}</a>
+            <a className={s.breadcrumbItem}>{text}</a>
         </Link>
     )
 }
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
index f84bc3a51..370c342d8 100644
--- a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 interface BreadcrumbSeparatorProps {
-    children?: React.ReactNode;
+    children?: React.ReactNode
 }
 
 const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => {
diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
index 4cfe737de..c7b9f1ffa 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -7,6 +7,9 @@
   align-items: center;
   padding: 1rem 2rem;
   @screen md {
+    padding: 0.8rem 1.6rem;
+  }
+  @screen lg {
     padding: 0.8rem 3.2rem;
   }
   &:disabled {
@@ -84,11 +87,14 @@
       padding: 1rem;
     }
     @screen md {
-      padding: 1.6rem 4.8rem;
+      padding: 1.6rem 3.2rem;
       &.onlyIcon {
         padding: 1.6rem;
       }
     }
+    @screen lg {
+      padding: 1.6rem 4.8rem;
+    }
     &.loading {
       &::before {
         width: 2.4rem;
diff --git a/src/components/common/CarouselCommon/CarouselCommon.module.scss b/src/components/common/CarouselCommon/CarouselCommon.module.scss
index da306f38f..ef2671947 100644
--- 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;
     }
diff --git a/src/components/common/CartDrawer/CartDrawer.module.scss b/src/components/common/CartDrawer/CartDrawer.module.scss
new file mode 100644
index 000000000..126028d3c
--- /dev/null
+++ 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;
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/CartDrawer/CartDrawer.tsx b/src/components/common/CartDrawer/CartDrawer.tsx
new file mode 100644
index 000000000..0a432bb65
--- /dev/null
+++ 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;
\ No newline at end of file
diff --git a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss
new file mode 100644
index 000000000..3f90bffbd
--- /dev/null
+++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss
@@ -0,0 +1,6 @@
+.cartCheckoutButton {
+    padding: 1.6rem;
+    button {
+        width: 100%;
+    }
+}
diff --git a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx
new file mode 100644
index 000000000..0cd7d00a2
--- /dev/null
+++ 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;
\ No newline at end of file
diff --git a/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss b/src/components/common/CartDrawer/components/CartMessage/CartMessage.module.scss
new file mode 100644
index 000000000..59d8e8ddc
--- /dev/null
+++ 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);
+        }
+    }
+}
diff --git a/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx b/src/components/common/CartDrawer/components/CartMessage/CartMessage.tsx
new file mode 100644
index 000000000..2cc85fb49
--- /dev/null
+++ 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;
\ No newline at end of file
diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
new file mode 100644
index 000000000..88664460c
--- /dev/null
+++ 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);
+                }
+            }
+        }
+    }
+}
diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx
new file mode 100644
index 000000000..bbc40647e
--- /dev/null
+++ 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;
diff --git a/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.module.scss
new file mode 100644
index 000000000..4988d4a66
--- /dev/null
+++ 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);
+                }
+            }
+        }
+    }
+}
diff --git a/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx b/src/components/common/CartDrawer/components/ProductCartItem/ProductCartItem.tsx
new file mode 100644
index 000000000..7ec3ecbdb
--- /dev/null
+++ 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;
\ No newline at end of file
diff --git a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.module.scss
new file mode 100644
index 000000000..61ef7421e
--- /dev/null
+++ 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);
+        }
+    }
+}
diff --git a/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx b/src/components/common/CartDrawer/components/ProductsInCart/ProductsInCart.tsx
new file mode 100644
index 000000000..b455d4d73
--- /dev/null
+++ 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;
\ No newline at end of file
diff --git a/src/components/common/CheckoutBill/CheckoutBill.module.scss b/src/components/common/CheckoutBill/CheckoutBill.module.scss
index 9c002b2e5..d0b15d516 100644
--- a/src/components/common/CheckoutBill/CheckoutBill.module.scss
+++ b/src/components/common/CheckoutBill/CheckoutBill.module.scss
@@ -1,9 +1,30 @@
-.warpper{
-    max-width: 56.3rem;
-    @apply flex justify-between flex-col;
-    .bot{
-        .promo{
-            padding: 3.2rem;
-        }
+.warpper {
+  max-width: 56.3rem;
+	padding: 3.2rem;
+  @apply flex justify-between flex-col border-l-2 border-solid border-line;
+  .title {
+    font-weight: bold;
+    font-size: 2rem;
+    line-height: 2.8rem;
+  }
+  .list {
+    min-height: 52.8rem;
+  }
+  .bot {
+    .promo {
+      // padding: 3.2rem;
+      @apply bg-gray flex justify-between items-center;
+      min-height: 6.4rem;
     }
-}
\ No newline at end of file
+    .price {
+      .line {
+        @apply flex justify-between items-center text-label;
+        .total {
+          font-weight: bold;
+          font-size: 2rem;
+          line-height: 2.8rem;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/common/CheckoutBill/CheckoutBill.tsx b/src/components/common/CheckoutBill/CheckoutBill.tsx
index 5493565cd..cdbbe5165 100644
--- a/src/components/common/CheckoutBill/CheckoutBill.tsx
+++ b/src/components/common/CheckoutBill/CheckoutBill.tsx
@@ -1,30 +1,46 @@
 import React from 'react'
-import s from "./CheckoutBill.module.scss"
+import s from './CheckoutBill.module.scss'
 import { CardItemCheckout } from '..'
 import { CardItemCheckoutProps } from '../CardItemCheckout/CardItemCheckout'
+import { IconCirclePlus } from 'src/components/icons'
 
 interface CheckoutBillProps {
-    data: CardItemCheckoutProps[]
+  data: CardItemCheckoutProps[]
 }
 
-const CheckoutBill = ({data}: CheckoutBillProps) => {
-    return (
-        <div className={s.warpper}>
-            <div className={s.list}>
-                {data.map((item,index)=>{
-                    return <CardItemCheckout {...item} key={index}/>
-                })}
-            </div>
-            <div className={s.bot}>
-                <div className={s.promo}>
-                    
-                </div>
-                <div className={s.price}>
-    
-                </div>
-            </div>
+const CheckoutBill = ({ data }: CheckoutBillProps) => {
+  return (
+    <div className={s.warpper}>
+    <div className = {s.title}>
+        Your cart ({data.length})
+    </div>
+      <div className={s.list}>
+        {data.map((item) => {
+          return <CardItemCheckout {...item} key={item.slug} />
+        })}
+      </div>
+      <div className={s.bot}>
+        <div className={s.promo}>
+          Apply Promotion Code
+          <IconCirclePlus />
         </div>
-    )
+        <div className={s.price}>
+          <div className={s.line}>
+            Subtotal
+            <div className={s.subTotal}>RP 120.500</div>
+          </div>
+          <div className={s.line}>
+            Shipping
+            <div className={s.shipping}>Free</div>
+          </div>
+          <div className={s.line}>
+            Estimated Total
+            <div className={s.total}>RP 120.500</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }
 
 export default CheckoutBill
diff --git a/src/components/common/CheckoutCollapse/CheckoutCollapse.tsx b/src/components/common/CheckoutCollapse/CheckoutCollapse.tsx
index b4825730a..14348a625 100644
--- a/src/components/common/CheckoutCollapse/CheckoutCollapse.tsx
+++ b/src/components/common/CheckoutCollapse/CheckoutCollapse.tsx
@@ -7,8 +7,9 @@ interface CheckoutCollapseProps {
   children: React.ReactNode
   title: string
   isEdit: boolean
-  onClose: () => void
-  onOpen: () => void
+  onClose?: (id:number) => void
+  onOpen?: (id:number) => void
+  onEditClick?:(id:number) => void
 }
 
 const CheckoutCollapse = ({
@@ -19,14 +20,18 @@ const CheckoutCollapse = ({
   visible,
   onOpen,
 	onClose,
+  onEditClick
 }: CheckoutCollapseProps) => {
 	const handleTitleClick = () => {
 		if(visible){
-			onClose && onClose()
+			onClose && onClose(id)
 		}else{
-			onOpen && onOpen()
+			onOpen && onOpen(id)
 		}
 	}
+  const handleEdit = () => {
+		onEditClick && onEditClick(id)
+	}
   return (
     <div className={s.warpper}>
       <div className={s.header}>
@@ -38,7 +43,7 @@ const CheckoutCollapse = ({
             {title}
           </div>
         </div>
-        {isEdit && <div className={s.edit}>{'Edit'}</div>}
+        {isEdit && <div className={s.edit} onClick={handleEdit}>{'Edit'}</div>}
       </div>
       <div className={classNames(s.body, { [`${s.show}`]: visible })}>{children}</div>
     </div>
diff --git a/src/components/common/CustomerInfoForm/CustomerInfoForm.tsx b/src/components/common/CustomerInfoForm/CustomerInfoForm.tsx
index a821c66eb..8496b119d 100644
--- a/src/components/common/CustomerInfoForm/CustomerInfoForm.tsx
+++ b/src/components/common/CustomerInfoForm/CustomerInfoForm.tsx
@@ -2,29 +2,30 @@ import Link from 'next/link'
 import React, { useRef } from 'react'
 import { ButtonCommon, Inputcommon } from 'src/components/common'
 import InputCommon from 'src/components/common/InputCommon/InputCommon'
+import { CheckOutForm } from 'src/utils/types.utils'
 import s from './CustomerInfoForm.module.scss'
 interface CustomerInfoFormProps {
-	onConfirm?: ()=>void
+  onConfirm?: (id: number, formInfo: CheckOutForm) => void
+  id: number
 }
 
-const CustomerInfoForm = ({}: CustomerInfoFormProps) => {
-	const nameRef =  useRef<React.ElementRef<typeof InputCommon>>(null);
-	const emailRef =  useRef<React.ElementRef<typeof InputCommon>>(null);
+const CustomerInfoForm = ({ id, onConfirm }: CustomerInfoFormProps) => {
+  const nameRef = useRef<React.ElementRef<typeof InputCommon>>(null)
+  const emailRef = useRef<React.ElementRef<typeof InputCommon>>(null)
 
-
-
-	const handleConfirmClick = () => {
-		return {
-			name:nameRef?.current?.getValue(),
-			email:emailRef.current?.getValue()
-		}
-	}
+  const handleConfirmClick = () => {
+    onConfirm &&
+      onConfirm(id, {
+        name: nameRef?.current?.getValue().toString(),
+        email: emailRef.current?.getValue().toString(),
+      })
+  }
 
   return (
     <div className={s.warpper}>
       <div className={s.body}>
-        <Inputcommon type="text" placeholder="Full Name" ref={nameRef}/>
-        <Inputcommon type="text" placeholder="Email Address" ref={emailRef}/>
+        <Inputcommon type="text" placeholder="Full Name" ref={nameRef} />
+        <Inputcommon type="text" placeholder="Email Address" ref={emailRef} />
       </div>
       <div className={s.bottom}>
         <div className={s.note}>
@@ -42,7 +43,9 @@ const CustomerInfoForm = ({}: CustomerInfoFormProps) => {
           }
           .
         </div>
-        <ButtonCommon onClick={handleConfirmClick}>Continue to Shipping</ButtonCommon>
+        <ButtonCommon onClick={handleConfirmClick}>
+          Continue to Shipping
+        </ButtonCommon>
       </div>
     </div>
   )
diff --git a/src/components/common/DrawerCommon/DrawerCommon.module.scss b/src/components/common/DrawerCommon/DrawerCommon.module.scss
new file mode 100644
index 000000000..3253eac50
--- /dev/null
+++ 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;
+        }
+    }
+}
diff --git a/src/components/common/DrawerCommon/DrawerCommon.tsx b/src/components/common/DrawerCommon/DrawerCommon.tsx
new file mode 100644
index 000000000..deb1af3eb
--- /dev/null
+++ 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;
\ No newline at end of file
diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index e9a06b9a8..a9926f765 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import React, { memo, useEffect, useState } from 'react'
-import { useModalCommon } from 'src/components/hooks/useModalCommon'
+import { useModalCommon } from 'src/components/hooks'
 import { isMobile } from 'src/utils/funtion.utils'
 import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
 import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo'
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
index a61c059e6..2832211c1 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
@@ -52,7 +52,10 @@
                 }
                 a {
                     @appy no-underline;
-                    &.iconFovourite {
+                    &:hover {
+                        opacity: .8;
+                    }
+                    &.iconFavourite {
                         svg path {
                             fill: var(--negative);
                         }
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
index 969964608..aa962605d 100644
--- 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>
diff --git a/src/components/common/ImgWithLink/ImgWithLink.module.scss b/src/components/common/ImgWithLink/ImgWithLink.module.scss
new file mode 100644
index 000000000..413f96cdb
--- /dev/null
+++ b/src/components/common/ImgWithLink/ImgWithLink.module.scss
@@ -0,0 +1,9 @@
+.imgWithLink {
+    position: relative;
+    min-width: 5rem;
+    width: 100%;
+    height: 100%;
+    img {
+        object-fit: cover;
+    }
+}
diff --git a/src/components/common/ImgWithLink/ImgWithLink.tsx b/src/components/common/ImgWithLink/ImgWithLink.tsx
new file mode 100644
index 000000000..092322085
--- /dev/null
+++ b/src/components/common/ImgWithLink/ImgWithLink.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import s from './ImgWithLink.module.scss'
+import Image from 'next/image'
+
+export interface ImgWithLinkProps {
+    src: string,
+    alt?: string,
+}
+
+const ImgWithLink = ({ src, alt }: ImgWithLinkProps) => {
+    return (
+        <div className={s.imgWithLink}>
+            <Image src={src} alt={alt} layout="fill" className={s.imgWithLink} />
+        </div>
+    )
+}
+
+export default ImgWithLink
\ No newline at end of file
diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx
index af7ab25c7..c510e4e14 100644
--- 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,13 +15,25 @@ 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>
-                {/* <Footer /> */}
+                <button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
+                <CartDrawer
+                    visible={visibleCartDrawer}
+                    onClose={closeCartDrawer} />
+                <Footer />
             </div>
         </CommerceProvider>
 
diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss
new file mode 100644
index 000000000..c1cd9966e
--- /dev/null
+++ b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss
@@ -0,0 +1,23 @@
+@import "../../../../styles/utilities";
+
+.infoProducts {
+    @apply flex justify-between items-center spacing-horizontal;
+
+    .top {
+        .sub {
+            display: none;
+        }
+    }
+    @screen lg {
+        @apply block;
+        margin-right: 4rem;
+        padding: 0;
+        .top {
+            margin-bottom: 3.2rem;
+            .sub {
+                display: block;
+                margin-top: 0.4rem;
+            }
+        }
+    }
+}
diff --git a/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx
new file mode 100644
index 000000000..25e18252c
--- /dev/null
+++ b/src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { ROUTE } from 'src/utils/constanst.utils';
+import HeadingCommon from '../../HeadingCommon/HeadingCommon';
+import ViewAllItem from '../../ViewAllItem/ViewAllItem';
+import s from './InfoProducts.module.scss'
+interface Props {
+    title: string,
+    subtitle?: string,
+}
+
+const InfoProducts = ({ title, subtitle }: Props) => {
+    return (
+        <div className={s.infoProducts}>
+            <div className={s.top}>
+                <HeadingCommon>{title}</HeadingCommon>
+                <div className={s.sub}>
+                    {subtitle}
+                </div>
+            </div>
+            <ViewAllItem link={ROUTE.PRODUCTS} />
+
+        </div>
+    );
+};
+
+export default InfoProducts;
\ No newline at end of file
diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
new file mode 100644
index 000000000..ddd8ed901
--- /dev/null
+++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
@@ -0,0 +1,48 @@
+@import "../../../styles/utilities";
+
+.listProductWithInfo {
+    background-color: var(--background);
+    border-top: 1rem solid var(--gray);
+    border-bottom: 1rem solid var(--gray);
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+    @screen lg {
+        @apply flex spacing-horizontal-left;
+        padding-top: 5.6rem;
+        padding-bottom: 5.6rem;
+        border: none;
+        background-color: var(--background-gray);
+    }
+    .productsWrap {
+        @apply spacing-horizontal-left;
+        @screen lg {
+            max-width: 75%;
+            @apply custom-border-radius-lg bg-white;
+            padding: 4rem .8rem;
+            :global(.customArrow) {
+                @screen lg {
+                    &:global(.leftArrow) {
+                        left: calc(-6.4rem + 3rem);
+                    }
+                    &:global(.rightArrow) {
+                        right: calc(-6.4rem + 3rem);
+                    }
+                }
+            }
+        }
+        @screen xl {
+            padding: 4rem 2.4rem;
+            max-width: 80%;
+            :global(.customArrow) {
+                @screen lg {
+                    &:global(.leftArrow) {
+                        left: calc(-6.4rem + 1rem);
+                    }
+                    &:global(.rightArrow) {
+                        right: calc(-6.4rem + 1rem);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
new file mode 100644
index 000000000..66b8253d1
--- /dev/null
+++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
@@ -0,0 +1,51 @@
+import { TOptionsEvents } from 'keen-slider';
+import React from 'react';
+import CarouselCommon from '../CarouselCommon/CarouselCommon';
+import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard';
+import InfoProducts from './InfoProducts/InfoProducts';
+import s from './ListProductWithInfo.module.scss';
+
+interface Props {
+    data: ProductCardProps[],
+    title: string,
+    subtitle?: string,
+}
+const OPTION_DEFAULT: TOptionsEvents = {
+    slidesPerView: 2,
+    mode: 'free',
+    breakpoints: {
+        '(min-width: 640px)': {
+            slidesPerView: 3,
+        },
+        '(min-width: 768px)': {
+            slidesPerView: 4,
+        },
+        '(min-width: 1024px)': {
+            slidesPerView: 3,
+        },
+        '(min-width: 1280px)': {
+            slidesPerView: 4.5,
+        },
+    },
+}
+
+const ListProductWithInfo = ({ data, title, subtitle }: Props) => {
+    return (
+        <div className={s.listProductWithInfo}>
+            <InfoProducts
+                title={title}
+                subtitle={subtitle}
+            />
+            <div className={s.productsWrap}>
+                <CarouselCommon<ProductCardProps>
+                    data={data}
+                    Component={ProductCard}
+                    itemKey={title}
+                    option={OPTION_DEFAULT}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default ListProductWithInfo;
\ No newline at end of file
diff --git a/src/components/common/Logo/Logo.module.scss b/src/components/common/Logo/Logo.module.scss
index 2660c4880..da6bfc49f 100644
--- 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;
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/common/Logo/Logo.tsx b/src/components/common/Logo/Logo.tsx
index 96d1820e0..58a0ea5de 100644
--- 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>
     )
 }
 
diff --git a/src/components/common/MenuDropdown/MenuDropdown.module.scss b/src/components/common/MenuDropdown/MenuDropdown.module.scss
index 8fc270b2a..ae5b76c3d 100644
--- a/src/components/common/MenuDropdown/MenuDropdown.module.scss
+++ b/src/components/common/MenuDropdown/MenuDropdown.module.scss
@@ -3,6 +3,9 @@
 .menuDropdown {
     @apply relative cursor-pointer;
     width: fit-content;
+    .label {
+        all: unset;
+    }
     &:hover {
         .label {
             color: var(--primary);
@@ -65,6 +68,16 @@
             margin-top: 0.4rem;
             li {
                 @apply block w-full transition-all duration-200 cursor-pointer text-active;
+                word-wrap: break-word;
+                -webkit-hyphens: auto;
+                -ms-hyphens: auto;
+                -moz-hyphens: auto;
+                hyphens: auto;
+                overflow-x: hidden;
+                position: relative;
+                max-width: 15rem;
+                white-space: nowrap;
+                text-overflow: ellipsis;
                 button {
                     all: unset;
                     color: currentColor;
diff --git a/src/components/common/MenuDropdown/MenuDropdown.tsx b/src/components/common/MenuDropdown/MenuDropdown.tsx
index bd3f0c851..ca25f22f8 100644
--- 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',
diff --git a/src/components/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss
index 65e81c811..cffbe063b 100644
--- a/src/components/common/ProductCard/ProductCard.module.scss
+++ b/src/components/common/ProductCard/ProductCard.module.scss
@@ -2,8 +2,12 @@
     max-width: 20.8rem;
     min-height: 31.8rem;
     padding: 1.2rem 1.2rem 0 1.2rem;
+    margin: auto;
     margin-bottom: 1px;
     @apply flex flex-col justify-between;
+    &.notSell {
+        @apply justify-center;
+    }
     .cardTop{
         @apply relative;
         height: 13.8rem;
@@ -29,8 +33,6 @@
         .cardMidTop{
             .productname{
                 font-weight: bold;
-                line-height: 2.4rem;
-                font-size: 1.6rem;
                 color: var(--text-active);
                 &:hover{
                     cursor: pointer;
diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx
index 7d94be6bc..4f1e3b329 100644
--- a/src/components/common/ProductCard/ProductCard.tsx
+++ b/src/components/common/ProductCard/ProductCard.tsx
@@ -6,6 +6,7 @@ import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
 import ItemWishList from '../ItemWishList/ItemWishList'
 import LabelCommon from '../LabelCommon/LabelCommon'
 import s from './ProductCard.module.scss'
+import ProductNotSell from './ProductNotSell/ProductNotSell'
 
 export interface ProductCardProps extends ProductProps {
   buttonText?: string
@@ -18,7 +19,15 @@ const ProductCard = ({
   price,
   buttonText = 'Buy Now',
   imageSrc,
+  isNotSell,
 }: ProductCardProps) => {
+  if (isNotSell) {
+    return <div className={`${s.productCardWarpper} ${s.notSell}`}>
+      <ProductNotSell name={name} imageSrc={imageSrc} />
+    </div>
+
+  }
+
   return (
     <div className={s.productCardWarpper}>
       <div className={s.cardTop}>
diff --git a/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss
new file mode 100644
index 000000000..4945220a9
--- /dev/null
+++ b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss
@@ -0,0 +1,27 @@
+@import "../../../../styles/utilities";
+
+.imgWrap {
+    img {
+        opacity: 0.5;
+    }
+}
+
+.name {
+    @apply text-label cursor-default font-bold;
+}
+
+.info {
+    @apply flex justify-center items-center custom-border-radius bg-info-light text-center;
+    padding: .8rem 1.6rem;
+    margin-top: 1.6rem;
+    color: var(--info);
+    svg {
+        @apply u-icon;
+        path {
+            fill: currentColor;
+        }
+    }
+    .text {
+        margin-left: 0.8rem;
+    }
+}
diff --git a/src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx
new file mode 100644
index 000000000..f87d87c43
--- /dev/null
+++ b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { IconInfo } from 'src/components/icons';
+import ImgWithLink from '../../ImgWithLink/ImgWithLink';
+import s from './ProductNotSell.module.scss';
+
+export interface Props {
+    name: string,
+    imageSrc: string,
+}
+
+const ProductNotSell = ({ name, imageSrc }: Props) => {
+    return (
+        <>
+            <div className={s.imgWrap}>
+                <ImgWithLink src={imageSrc} alt={name} />
+            </div>
+            <div className={s.name}>{name}</div>
+            <div className={s.info}>
+                <IconInfo />
+                <div className={s.text}>
+                    Not Sell
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default ProductNotSell;
\ No newline at end of file
diff --git a/src/components/common/QuanittyInput/QuanittyInput.tsx b/src/components/common/QuanittyInput/QuanittyInput.tsx
index a01f16fe7..20baba9ea 100644
--- 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>
   )
diff --git a/src/components/common/RecipeCard/RecipeCard.module.scss b/src/components/common/RecipeCard/RecipeCard.module.scss
index 1fd6fd65e..19f3eb76a 100644
--- a/src/components/common/RecipeCard/RecipeCard.module.scss
+++ b/src/components/common/RecipeCard/RecipeCard.module.scss
@@ -6,6 +6,9 @@
         width: 100%;
         max-height: 22rem;
         border-radius: 2.4rem;
+        img {
+            border-radius: 2.4rem;
+        }
         &:hover{
             cursor: pointer;
         }
diff --git a/components/ui/Rating/Rating.module.css b/src/components/common/RecipeDetail/RecipeDetail.module.scss
similarity index 100%
rename from components/ui/Rating/Rating.module.css
rename to src/components/common/RecipeDetail/RecipeDetail.module.scss
diff --git a/src/components/common/RecipeDetail/RecipeDetail.tsx b/src/components/common/RecipeDetail/RecipeDetail.tsx
new file mode 100644
index 000000000..cdec99994
--- /dev/null
+++ b/src/components/common/RecipeDetail/RecipeDetail.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { ProductCardProps } from '../ProductCard/ProductCard'
+import RecipeDetailInfo from './components/RecipeDetailInfo/RecipeDetailInfo'
+import RecipeIngredient from './components/RecipeIngredient/RecipeIngredient'
+import s from './RecipeDetail.module.scss'
+
+
+interface Props {
+    className?: string
+    children?: any,
+    ingredients: ProductCardProps[],
+}
+
+const RecipeDetail = ({ ingredients }: Props) => {
+    return (
+        <section className={s.recipeDetail}>
+            <RecipeDetailInfo />
+            <RecipeIngredient data={ingredients} />
+        </section >
+    )
+}
+
+export default RecipeDetail
diff --git a/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss
new file mode 100644
index 000000000..56f1e6500
--- /dev/null
+++ b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss
@@ -0,0 +1,19 @@
+.recipeBriefInfo {
+    @apply flex;
+    .item {
+        @apply flex;
+        &:not(:last-child) {
+            margin-right: 2.4rem;
+        }
+        svg {
+            width: 2rem;
+            height: 2rem;
+            path {
+                fill: var(--text-label);
+            }
+        }
+        .content {
+            margin-left: 0.8rem;
+        }
+    }
+}
diff --git a/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx
new file mode 100644
index 000000000..d06387914
--- /dev/null
+++ b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { IconLocation, IconPeople, IconTime } from 'src/components/icons'
+import s from './RecipeBriefInfo.module.scss'
+
+interface Props {
+    className?: string
+    children?: any,
+}
+
+const RecipeBriefInfo = ({ }: Props) => {
+    return (
+        <section className={s.recipeBriefInfo}>
+            <div className={s.item}>
+                <IconTime />
+                <div className={s.content}>15 minutes</div>
+            </div>
+            <div className={s.item}>
+                <IconPeople />
+                <div className={s.content}>4 People</div>
+            </div>
+            <div className={s.item}>
+                <IconLocation />
+                <div className={s.content}>15 minutes</div>
+            </div>
+        </section >
+    )
+}
+
+export default RecipeBriefInfo
diff --git a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss
new file mode 100644
index 000000000..86b525083
--- /dev/null
+++ b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss
@@ -0,0 +1,61 @@
+@import "../../../../../styles/utilities";
+
+.recipeDetailInfo {
+    @apply spacing-horizontal;
+    margin: 5.6rem auto;
+    @screen md {
+        @apply flex;
+    }
+    .img {
+        width: fit-content;
+        margin-top: 0;
+
+        @screen sm-only {
+            margin-bottom: 2rem;
+        }
+        @screen lg {
+            max-width: 60rem;
+        }
+        img {
+            @apply w-full;
+            object-fit: contain;
+            max-height: 64rem;
+            border-radius: 2.4rem;
+            @screen md {
+                max-height: 90rem;
+            }
+        }
+    }
+
+    .recipeInfo {
+        @screen md {
+            max-width: 39rem;
+            margin-left: 4.8rem;
+        }
+        @screen lg {
+            margin-left: 11.2rem;
+        }
+        .top {
+            margin-bottom: 4.8rem;
+            .name {
+                @apply heading-1 font-heading;
+                margin-bottom: 1.6rem;
+            }
+        }
+        .detail {
+            .item {
+                &:not(:last-child) {
+                    margin-bottom: 2.4rem;
+                }
+                .heading {
+                    @apply heading-3 font-heading;
+                    margin-bottom: 0.8rem;
+                }
+                .content {
+                    list-style: disc;
+                    margin-left: 2rem;
+                }
+            }
+        }
+    }
+}
diff --git a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx
new file mode 100644
index 000000000..4d212e10a
--- /dev/null
+++ b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import RecipeBriefInfo from '../RecipeBriefInfo/RecipeBriefInfo'
+import s from './RecipeDetailInfo.module.scss'
+
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+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" />
+            </div>
+            <div className={s.recipeInfo}>
+                <div className={s.top}>
+                    <h1 className={s.name}>
+                        Crispy Fried  Calamari
+                    </h1>
+                    <RecipeBriefInfo />
+                </div>
+                <div className={s.detail}>
+                    <div className={s.item}>
+                        <h3 className={s.heading}>Ingredients</h3>
+                        <ul className={s.content}>
+                            <li>Canola oil for frying</li>
+                            <li>1 pound clean squid bodies cut in 1/4 inch rings and dried with a paper towel</li>
+                            <li>2 cups flour</li>
+                            <li>1/2 teaspoon kosher salt</li>
+                            <li>1/2 teaspoon garlic powder</li>
+                            <li>1/8 teaspoon coarse ground black pepper</li>
+                            <li>1 lemon cut into wedges</li>
+                        </ul>
+                    </div>
+
+                    <div className={s.item}>
+                        <h3 className={s.heading}>Preparation</h3>
+                        <ul className={s.content}>
+                            <li>1In a large pot or dutch oven add three inches of oil and bring to 350 degrees.</li>
+                            <li>Add the flour, salt, garlic powder and pepper to a large bowl and stir to combine.</li>
+                            <li>Toss the squid pieces in the flour then into the hot oil.</li>
+                            <li>Fry the squid for 1-2 minutes. You want the color to stay pale like in the pictures.</li>
+                            <li>Remove to a cookie sheet to drain (do not add paper towels as it will steam the calamari and make it soft.)</li>
+                            <li>Serve with lemon wedges.</li>
+                        </ul>
+                    </div>
+                    <div className={s.item}>
+                        <h3 className={s.heading}>Link</h3>
+                        <a href="https://dinnerthendessert.com/crispy-fried-calamari" target="_blank" rel="noopener noreferrer">https://dinnerthendessert.com/crispy-fried-calamari</a>
+                    </div>
+                </div>
+            </div>
+        </section >
+    )
+}
+
+export default RecipeDetailInfo
diff --git a/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss
new file mode 100644
index 000000000..b1419699d
--- /dev/null
+++ b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.module.scss
@@ -0,0 +1,21 @@
+@import "../../../../../styles/utilities";
+
+.recipeIngredient {
+    padding: 6rem 0;
+    @screen md {
+        padding: 5.6rem 0;
+    }
+    .top {
+        @apply flex justify-between items-center spacing-horizontal;
+    }
+    .bottom {
+        @apply flex justify-center items-center spacing-horizontal;
+        margin-top: 4rem;
+        button {
+            width: 100%;
+            @screen md {
+                width: 39rem;
+            }
+        }
+    }
+}
diff --git a/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx
new file mode 100644
index 000000000..a879f0b72
--- /dev/null
+++ b/src/components/common/RecipeDetail/components/RecipeIngredient/RecipeIngredient.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import ButtonCommon from 'src/components/common/ButtonCommon/ButtonCommon'
+import HeadingCommon from 'src/components/common/HeadingCommon/HeadingCommon'
+import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'
+import ProductCarousel from 'src/components/common/ProductCarousel/ProductCarousel'
+import ViewAllItem from 'src/components/common/ViewAllItem/ViewAllItem'
+import { ROUTE } from 'src/utils/constanst.utils'
+import s from './RecipeIngredient.module.scss'
+
+interface Props {
+    className?: string
+    children?: any,
+    data: ProductCardProps[],
+}
+
+const RecipeIngredient = ({ data }: Props) => {
+    return (
+        <section className={s.recipeIngredient}>
+            <div className={s.top}>
+                <HeadingCommon>Ingredients</HeadingCommon>
+                <div>
+                    <ViewAllItem link={ROUTE.PRODUCTS} />
+                </div>
+            </div>
+            <ProductCarousel data={data} itemKey="recipe-ingredient" />
+            <div className={s.bottom}>
+                <ButtonCommon type='ghost' size='large'>Buy all</ButtonCommon>
+            </div>
+        </section>
+    )
+}
+
+export default RecipeIngredient
diff --git a/src/components/common/ScrollToTop/ScrollTarget.tsx b/src/components/common/ScrollToTop/ScrollTarget.tsx
deleted file mode 100644
index 50a839c83..000000000
--- a/src/components/common/ScrollToTop/ScrollTarget.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { MutableRefObject } from 'react'
-
-interface ScrollTargetProps {
-    refScrollUp: MutableRefObject<HTMLDivElement>;
-}
-
-const ScrollTarget = ({ refScrollUp } : ScrollTargetProps) => {
-
-    return (
-        <div ref={refScrollUp}></div>
-    )
-
-}
-
-export default ScrollTarget
diff --git a/src/components/common/ScrollToTop/ScrollToTop.tsx b/src/components/common/ScrollToTop/ScrollToTop.tsx
index 98e16168d..d148c8937 100644
--- a/src/components/common/ScrollToTop/ScrollToTop.tsx
+++ b/src/components/common/ScrollToTop/ScrollToTop.tsx
@@ -5,11 +5,10 @@ import s from './ScrollToTop.module.scss'
 import ArrowUp from '../../icons/IconArrowUp'
 
 interface ScrollToTopProps {
-    target: MutableRefObject<HTMLDivElement>;
     visibilityHeight?: number;
 }
 
-const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => {
+const ScrollToTop = ({ visibilityHeight=450 }: ScrollToTopProps) => {
 
     const [scrollPosition, setSrollPosition] = useState(0);
     const [showScrollToTop, setShowScrollToTop] = useState("hide");
@@ -26,7 +25,7 @@ const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => {
     };
 
     function handleScrollUp() {
-        target.current.scrollIntoView({ behavior: "smooth" });
+        window.scrollTo(0, 0);
     }
 
     function addEventScroll() {
@@ -34,7 +33,7 @@ const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => {
     }
 
     useEffect(() => {
-        addEventScroll()
+        addEventScroll();
     });    
 
     return (
diff --git a/src/components/common/ShippingInfoForm/ShippingInfoForm.tsx b/src/components/common/ShippingInfoForm/ShippingInfoForm.tsx
index d8c858399..ac4bc8af5 100644
--- a/src/components/common/ShippingInfoForm/ShippingInfoForm.tsx
+++ b/src/components/common/ShippingInfoForm/ShippingInfoForm.tsx
@@ -4,8 +4,12 @@ import s from './ShippingInfoForm.module.scss'
 import Link from 'next/link'
 import { CustomInputCommon } from 'src/utils/type.utils'
 import { Shipping } from 'src/components/icons'
+import { CheckOutForm } from 'src/utils/types.utils'
 
-interface ShippingInfoFormProps {}
+interface ShippingInfoFormProps {
+  onConfirm?: (id:number,formInfo:CheckOutForm)=>void
+  id:number
+}
 
 const option = [
   {
@@ -16,20 +20,20 @@ const option = [
   },
 ]
 
-const ShippingInfoForm = ({}: ShippingInfoFormProps) => {
+const ShippingInfoForm = ({onConfirm,id}: ShippingInfoFormProps) => {
   const addressRef = useRef<CustomInputCommon>(null)
   const cityRef = useRef<CustomInputCommon>(null)
   const stateRef = useRef<CustomInputCommon>(null)
   const codeRef = useRef<CustomInputCommon>(null)
   const phoneRef = useRef<CustomInputCommon>(null)
   const handleConfirmClick = () => {
-    return {
-      address: addressRef?.current?.getValue(),
-      city: cityRef.current?.getValue(),
-      state: stateRef?.current?.getValue(),
-      code: codeRef.current?.getValue(),
-      phone: phoneRef?.current?.getValue(),
-    }
+    onConfirm && onConfirm(id,{
+      address: addressRef?.current?.getValue().toString(),
+      city: cityRef.current?.getValue().toString(),
+      state: stateRef?.current?.getValue().toString(),
+      code: Number(codeRef.current?.getValue()),
+      phone: Number(phoneRef?.current?.getValue()),
+    })
   }
 
   return (
diff --git a/src/components/common/ViewAllItem/ViewAllItem.module.scss b/src/components/common/ViewAllItem/ViewAllItem.module.scss
index 4b8b6fe6d..b4ec26872 100644
--- a/src/components/common/ViewAllItem/ViewAllItem.module.scss
+++ b/src/components/common/ViewAllItem/ViewAllItem.module.scss
@@ -4,7 +4,7 @@
     display: flex;
     .content {
         color: var(--primary);
-        margin: 0.8rem 0.8rem 0.8rem 1.6rem;
+        margin: 0.8rem 0.8rem 0.8rem 0;
         font-weight: bold;
     }
     .vector {
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index fb4f8daf5..8d5a44b73 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -19,7 +19,6 @@ export { default as DateTime} from './DateTime/DateTime'
 export { default as HeadingCommon } from './HeadingCommon/HeadingCommon'
 export { default as CollectionHeading } from './CollectionHeading/CollectionHeading'
 export { default as ScrollToTop } from './ScrollToTop/ScrollToTop'
-export { default as ScrollTarget } from './ScrollToTop/ScrollTarget'
 export { default as InputSearch} from './InputSearch/InputSearch'
 export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy'
 export { default as Banner} from './Banner/Banner'
@@ -41,3 +40,7 @@ export { default as CheckoutBill} from './CheckoutBill/CheckoutBill'
 export { default as CustomerInfoForm} from './CustomerInfoForm/CustomerInfoForm'
 export { default as ShippingInfoForm} from './ShippingInfoForm/ShippingInfoForm'
 export { default as PaymentInfoForm} from './PaymentInfoForm/PaymentInfoForm'
+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'
diff --git a/src/components/hooks/index.ts b/src/components/hooks/index.ts
new file mode 100644
index 000000000..cf83feb42
--- /dev/null
+++ b/src/components/hooks/index.ts
@@ -0,0 +1 @@
+export { default as useModalCommon } from './useModalCommon'
diff --git a/src/components/hooks/useModalCommon.tsx b/src/components/hooks/useModalCommon.tsx
index 02626ce94..41aed648f 100644
--- a/src/components/hooks/useModalCommon.tsx
+++ b/src/components/hooks/useModalCommon.tsx
@@ -4,7 +4,7 @@ interface Props {
     initialValue?: boolean,
 }
 
-export const useModalCommon = ({ initialValue = false }: Props) => {
+const useModalCommon = ({ initialValue = false }: Props) => {
     const [visible, setVisible] = useState<boolean>(initialValue)
 
     const openModal = (e?: any) => {
@@ -21,3 +21,5 @@ export const useModalCommon = ({ initialValue = false }: Props) => {
         visible, openModal, closeModal
     }
 };
+
+export default useModalCommon
\ No newline at end of file
diff --git a/src/components/icons/IconCirclePlus.tsx b/src/components/icons/IconCirclePlus.tsx
new file mode 100644
index 000000000..c59766d89
--- /dev/null
+++ b/src/components/icons/IconCirclePlus.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+const IconCirclePlus = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7363 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 10 0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C18 12.1217 17.1572 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18ZM14 9H11V6C11 5.73478 10.8946 5.48043 10.7071 5.29289C10.5196 5.10536 10.2652 5 10 5C9.73479 5 9.48043 5.10536 9.2929 5.29289C9.10536 5.48043 9 5.73478 9 6V9H6C5.73479 9 5.48043 9.10536 5.2929 9.29289C5.10536 9.48043 5 9.73478 5 10C5 10.2652 5.10536 10.5196 5.2929 10.7071C5.48043 10.8946 5.73479 11 6 11H9V14C9 14.2652 9.10536 14.5196 9.2929 14.7071C9.48043 14.8946 9.73479 15 10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14V11H14C14.2652 11 14.5196 10.8946 14.7071 10.7071C14.8946 10.5196 15 10.2652 15 10C15 9.73478 14.8946 9.48043 14.7071 9.29289C14.5196 9.10536 14.2652 9 14 9Z"
+        fill="#141414"
+      />
+    </svg>
+  )
+}
+
+export default IconCirclePlus
diff --git a/src/components/icons/IconClose.tsx b/src/components/icons/IconClose.tsx
new file mode 100644
index 000000000..018ee8cd6
--- /dev/null
+++ 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
diff --git a/src/components/icons/IconDelete.tsx b/src/components/icons/IconDelete.tsx
new file mode 100644
index 000000000..4daff3f80
--- /dev/null
+++ 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
diff --git a/src/components/icons/IconLocation.tsx b/src/components/icons/IconLocation.tsx
new file mode 100644
index 000000000..3dc0a81b9
--- /dev/null
+++ b/src/components/icons/IconLocation.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconLocation = () => {
+    return (
+        <svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14.9999 3.47991C13.4086 1.88861 11.2504 0.994629 8.99993 0.994629C6.74949 0.994629 4.59123 1.88861 2.99993 3.47991C1.40863 5.07121 0.514648 7.22947 0.514648 9.47991C0.514648 11.7303 1.40863 13.8886 2.99993 15.4799L8.26993 20.7599C8.36289 20.8536 8.47349 20.928 8.59535 20.9788C8.71721 21.0296 8.84792 21.0557 8.97993 21.0557C9.11194 21.0557 9.24265 21.0296 9.36451 20.9788C9.48637 20.928 9.59697 20.8536 9.68993 20.7599L14.9999 15.4299C16.5846 13.8452 17.4748 11.696 17.4748 9.45491C17.4748 7.21386 16.5846 5.06459 14.9999 3.47991ZM13.5699 13.9999L8.99993 18.5899L4.42993 13.9999C3.52707 13.0962 2.91241 11.9452 2.66362 10.6922C2.41484 9.43925 2.54312 8.14066 3.03223 6.96059C3.52135 5.78052 4.34935 4.77196 5.41156 4.06239C6.47377 3.35281 7.72251 2.97409 8.99993 2.97409C10.2773 2.97409 11.5261 3.35281 12.5883 4.06239C13.6505 4.77196 14.4785 5.78052 14.9676 6.96059C15.4567 8.14066 15.585 9.43925 15.3362 10.6922C15.0875 11.9452 14.4728 13.0962 13.5699 13.9999ZM5.99993 6.40991C5.19264 7.21968 4.73932 8.31648 4.73932 9.45991C4.73932 10.6033 5.19264 11.7001 5.99993 12.5099C6.59969 13.1107 7.36352 13.521 8.19558 13.6893C9.02764 13.8576 9.89088 13.7765 10.677 13.4561C11.4631 13.1356 12.1371 12.5902 12.6144 11.8882C13.0917 11.1861 13.3511 10.3588 13.3599 9.50991C13.3644 8.94311 13.2553 8.38117 13.0388 7.8573C12.8224 7.33343 12.5032 6.85827 12.0999 6.45991C11.7036 6.05449 11.231 5.73145 10.7094 5.50938C10.1877 5.2873 9.62727 5.17059 9.06033 5.16594C8.49339 5.16129 7.93113 5.26881 7.4059 5.4823C6.88067 5.69579 6.40285 6.01104 5.99993 6.40991ZM10.6899 11.0899C10.311 11.4747 9.81014 11.7158 9.27306 11.7722C8.73597 11.8285 8.19599 11.6966 7.74544 11.3988C7.29488 11.1011 6.96173 10.6562 6.80294 10.14C6.64415 9.62384 6.66958 9.06855 6.87489 8.56907C7.0802 8.06958 7.45263 7.65693 7.92851 7.40165C8.4044 7.14637 8.95418 7.06432 9.48387 7.16953C10.0135 7.27474 10.4902 7.56067 10.8324 7.97844C11.1746 8.39621 11.3611 8.91988 11.3599 9.45991C11.3454 10.0772 11.0864 10.6634 10.6399 11.0899H10.6899Z" fill="#8F8F8F" />
+        </svg>
+    )
+}
+
+export default IconLocation
diff --git a/src/components/icons/IconMinus.tsx b/src/components/icons/IconMinus.tsx
index ba4eb2fc0..abf3a2907 100644
--- a/src/components/icons/IconMinus.tsx
+++ b/src/components/icons/IconMinus.tsx
@@ -1,14 +1,14 @@
 const IconMinus = ({ ...props }) => {
   return (
     <svg
-      width="22"
-      height="22"
-      viewBox="0 0 22 4"
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M20.333 0.666748H1.66634C1.31272 0.666748 0.973581 0.807224 0.723532 1.05727C0.473484 1.30732 0.333008 1.64646 0.333008 2.00008C0.333008 2.3537 0.473484 2.69284 0.723532 2.94289C0.973581 3.19294 1.31272 3.33342 1.66634 3.33342H20.333C20.6866 3.33342 21.0258 3.19294 21.2758 2.94289C21.5259 2.69284 21.6663 2.3537 21.6663 2.00008C21.6663 1.64646 21.5259 1.30732 21.2758 1.05727C21.0258 0.807224 20.6866 0.666748 20.333 0.666748Z"
+        d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
         fill="#141414"
       />
     </svg>
diff --git a/src/components/icons/IconPeople.tsx b/src/components/icons/IconPeople.tsx
new file mode 100644
index 000000000..0075b0f75
--- /dev/null
+++ b/src/components/icons/IconPeople.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconPeople = () => {
+    return (
+        <svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M11.3 9.22C11.8336 8.75813 12.2616 8.18688 12.5549 7.54502C12.8482 6.90316 13 6.20571 13 5.5C13 4.17392 12.4732 2.90215 11.5355 1.96447C10.5979 1.02678 9.32608 0.5 8 0.5C6.67392 0.5 5.40215 1.02678 4.46447 1.96447C3.52678 2.90215 3 4.17392 3 5.5C2.99999 6.20571 3.1518 6.90316 3.44513 7.54502C3.73845 8.18688 4.16642 8.75813 4.7 9.22C3.30014 9.85388 2.11247 10.8775 1.27898 12.1685C0.445495 13.4596 0.00147185 14.9633 0 16.5C0 16.7652 0.105357 17.0196 0.292893 17.2071C0.48043 17.3946 0.734784 17.5 1 17.5C1.26522 17.5 1.51957 17.3946 1.70711 17.2071C1.89464 17.0196 2 16.7652 2 16.5C2 14.9087 2.63214 13.3826 3.75736 12.2574C4.88258 11.1321 6.4087 10.5 8 10.5C9.5913 10.5 11.1174 11.1321 12.2426 12.2574C13.3679 13.3826 14 14.9087 14 16.5C14 16.7652 14.1054 17.0196 14.2929 17.2071C14.4804 17.3946 14.7348 17.5 15 17.5C15.2652 17.5 15.5196 17.3946 15.7071 17.2071C15.8946 17.0196 16 16.7652 16 16.5C15.9985 14.9633 15.5545 13.4596 14.721 12.1685C13.8875 10.8775 12.6999 9.85388 11.3 9.22ZM8 8.5C7.40666 8.5 6.82664 8.32405 6.33329 7.99441C5.83994 7.66476 5.45542 7.19623 5.22836 6.64805C5.0013 6.09987 4.94189 5.49667 5.05764 4.91473C5.1734 4.33279 5.45912 3.79824 5.87868 3.37868C6.29824 2.95912 6.83279 2.6734 7.41473 2.55764C7.99667 2.44189 8.59987 2.5013 9.14805 2.72836C9.69623 2.95542 10.1648 3.33994 10.4944 3.83329C10.8241 4.32664 11 4.90666 11 5.5C11 6.29565 10.6839 7.05871 10.1213 7.62132C9.55871 8.18393 8.79565 8.5 8 8.5ZM17.74 8.82C18.38 8.09933 18.798 7.20905 18.9438 6.25634C19.0896 5.30362 18.9569 4.32907 18.5618 3.45C18.1666 2.57093 17.5258 1.8248 16.7165 1.30142C15.9071 0.77805 14.9638 0.499742 14 0.5C13.7348 0.5 13.4804 0.605357 13.2929 0.792893C13.1054 0.98043 13 1.23478 13 1.5C13 1.76522 13.1054 2.01957 13.2929 2.20711C13.4804 2.39464 13.7348 2.5 14 2.5C14.7956 2.5 15.5587 2.81607 16.1213 3.37868C16.6839 3.94129 17 4.70435 17 5.5C16.9986 6.02524 16.8593 6.5409 16.5961 6.99542C16.3328 7.44994 15.9549 7.82738 15.5 8.09C15.3517 8.17552 15.2279 8.29766 15.1404 8.44474C15.0528 8.59182 15.0045 8.7589 15 8.93C14.9958 9.09976 15.0349 9.2678 15.1137 9.41826C15.1924 9.56872 15.3081 9.69665 15.45 9.79L15.84 10.05L15.97 10.12C17.1754 10.6917 18.1923 11.596 18.901 12.7263C19.6096 13.8566 19.9805 15.1659 19.97 16.5C19.97 16.7652 20.0754 17.0196 20.2629 17.2071C20.4504 17.3946 20.7048 17.5 20.97 17.5C21.2352 17.5 21.4896 17.3946 21.6771 17.2071C21.8646 17.0196 21.97 16.7652 21.97 16.5C21.9782 14.9654 21.5938 13.4543 20.8535 12.1101C20.1131 10.7659 19.0413 9.63331 17.74 8.82Z" fill="#8F8F8F" />
+        </svg>
+    )
+}
+
+export default IconPeople
diff --git a/src/components/icons/IconPlus.tsx b/src/components/icons/IconPlus.tsx
index a532c6244..63d6d2dd4 100644
--- a/src/components/icons/IconPlus.tsx
+++ b/src/components/icons/IconPlus.tsx
@@ -1,14 +1,14 @@
 const IconPlus = ({ ...props }) => {
   return (
     <svg
-      width="22"
-      height="22"
-      viewBox="0 0 22 22"
+      width="12"
+      height="2"
+      viewBox="0 0 12 2"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M20.333 9.66658H12.333V1.66659C12.333 1.31296 12.1925 0.973825 11.9425 0.723776C11.6924 0.473728 11.3533 0.333252 10.9997 0.333252C10.6461 0.333252 10.3069 0.473728 10.0569 0.723776C9.80682 0.973825 9.66634 1.31296 9.66634 1.66659V9.66658H1.66634C1.31272 9.66658 0.973581 9.80706 0.723532 10.0571C0.473484 10.3072 0.333008 10.6463 0.333008 10.9999C0.333008 11.3535 0.473484 11.6927 0.723532 11.9427C0.973581 12.1928 1.31272 12.3333 1.66634 12.3333H9.66634V20.3333C9.66634 20.6869 9.80682 21.026 10.0569 21.2761C10.3069 21.5261 10.6461 21.6666 10.9997 21.6666C11.3533 21.6666 11.6924 21.5261 11.9425 21.2761C12.1925 21.026 12.333 20.6869 12.333 20.3333V12.3333H20.333C20.6866 12.3333 21.0258 12.1928 21.2758 11.9427C21.5259 11.6927 21.6663 11.3535 21.6663 10.9999C21.6663 10.6463 21.5259 10.3072 21.2758 10.0571C21.0258 9.80706 20.6866 9.66658 20.333 9.66658Z"
+        d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
         fill="#141414"
       />
     </svg>
diff --git a/src/components/icons/IconTime.tsx b/src/components/icons/IconTime.tsx
new file mode 100644
index 000000000..81064df9d
--- /dev/null
+++ b/src/components/icons/IconTime.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconTime = () => {
+    return (
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7363 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 10 0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C18 12.1217 17.1572 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18ZM10 4C9.73479 4 9.48043 4.10536 9.2929 4.29289C9.10536 4.48043 9 4.73478 9 5V9.42L6.9 10.63C6.70736 10.7392 6.5564 10.9092 6.47078 11.1134C6.38517 11.3176 6.36975 11.5444 6.42695 11.7583C6.48414 11.9722 6.61072 12.1611 6.78682 12.2953C6.96292 12.4296 7.17859 12.5015 7.4 12.5C7.57518 12.5012 7.7476 12.4564 7.9 12.37L10.5 10.87L10.59 10.78L10.75 10.65C10.7891 10.6005 10.8226 10.5468 10.85 10.49C10.8826 10.4363 10.9094 10.3793 10.93 10.32C10.9572 10.2564 10.9741 10.1889 10.98 10.12L11 10V5C11 4.73478 10.8946 4.48043 10.7071 4.29289C10.5196 4.10536 10.2652 4 10 4Z" fill="#8F8F8F" />
+        </svg>
+    )
+}
+
+export default IconTime
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 8bdbb1740..7dfe3657c 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -22,6 +22,12 @@ export { default as IconPassword } from './IconPassword'
 export { default as IconPasswordCross } from './IconPasswordCross'
 export { default as IconError } from './IconError'
 export { default as IconCheck } from './IconCheck'
+export { default as Shipping} from './Shipping'
+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'
-export { default as Shipping} from './Shipping'
\ No newline at end of file
+export { default as IconCirclePlus } from './IconCirclePlus'
diff --git a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss
new file mode 100644
index 000000000..3ca7d7101
--- /dev/null
+++ b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss
@@ -0,0 +1,7 @@
+.warpper{
+    @apply w-full;
+    .title{
+        padding: 3.2rem 0;
+        @apply flex justify-start items-center
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
new file mode 100644
index 000000000..3b4c64838
--- /dev/null
+++ b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
@@ -0,0 +1,87 @@
+import React, { useState } from 'react'
+import { CustomerInfoForm, Logo, ShippingInfoForm } from 'src/components/common'
+import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse'
+import { CheckOutForm } from 'src/utils/types.utils'
+import s from './CheckoutInfo.module.scss'
+interface CheckoutInfoProps {}
+
+const CheckoutInfo = ({}: CheckoutInfoProps) => {
+  const [active, setActive] = useState(1)
+  const [done, setDone] = useState<number[]>([])
+  const [info, setInfo] = useState<CheckOutForm>({})
+  const onOpen = (id:number) => {
+		setActive(id)
+	}
+
+  const onEdit = (id:number) => {
+		setActive(id)
+	}
+
+  const onClose = (id:number) => {
+		setActive(id)
+	}
+
+  const onConfirm = (id:number,formInfo:CheckOutForm) => {
+		if(id+1>formList.length){
+			console.log({...info,...formInfo})
+		}else{
+
+			setActive(id+1)
+		}
+		setDone([...done,id])
+		setInfo({...info,...formInfo})
+	}
+  const formList = [
+    {
+      id: 1,
+      title: 'Customer Information',
+      form: <CustomerInfoForm onConfirm={onConfirm} id={1}/>,
+    },
+    {
+      id: 2,
+      title: 'Shipping Information',
+      form: <ShippingInfoForm onConfirm={onConfirm} id={2}/>,
+    },
+  ]
+  return (
+    <div className={s.warpper}>
+      <div className={s.title}>
+        <Logo />
+      </div>
+      {formList.map((item) => {
+        return <CheckoutCollapse
+					key={item.title}
+          id={item.id}
+          visible={item.id === active}
+          title={item.title}
+          onEditClick={onEdit}
+          isEdit={done.includes(item.id)}
+        >
+          {item.form}
+        </CheckoutCollapse>
+      })}
+      {/* <CheckoutCollapse
+        id={1}
+        visible={active === 1}
+        // onOpen={onOpen}
+        // onClose={onClose}
+        title="Customer Information"
+        isEdit={true}
+      >
+        <CustomerInfoForm />
+      </CheckoutCollapse>
+      <CheckoutCollapse
+        id={2}
+        visible={active === 2}
+        // onOpen={onOpen2}
+        // onClose={onClose2}
+        title="Shipping Information"
+        isEdit={true}
+      >
+        <ShippingInfoForm />
+      </CheckoutCollapse> */}
+    </div>
+  )
+}
+
+export default CheckoutInfo
diff --git a/src/components/modules/checkout/index.ts b/src/components/modules/checkout/index.ts
index e69de29bb..24a765b23 100644
--- a/src/components/modules/checkout/index.ts
+++ b/src/components/modules/checkout/index.ts
@@ -0,0 +1 @@
+export { default as CheckoutInfo } from './CheckoutInfo/CheckoutInfo'
diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss
new file mode 100644
index 000000000..645ff7259
--- /dev/null
+++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.module.scss
@@ -0,0 +1,10 @@
+@import '../../../../styles/utilities';
+
+.productInfoDetail {
+    @apply spacing-horizontal;
+    padding-bottom: 4rem;
+    @screen md {
+        @apply flex;
+        padding-bottom: 5.6rem;
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx
new file mode 100644
index 000000000..d1047bd3a
--- /dev/null
+++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import ProductImgs from './components/ProductImgs/ProductImgs'
+import ProductInfo from './components/ProductInfo/ProductInfo'
+import s from './ProductInfoDetail.module.scss'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const ProductInfoDetail = ({ }: Props) => {
+    return (
+        <section className={s.productInfoDetail}>
+            <ProductImgs/>
+            <ProductInfo/>
+        </section >
+    )
+}
+
+export default ProductInfoDetail
diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss
new file mode 100644
index 000000000..a10eb5865
--- /dev/null
+++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss
@@ -0,0 +1,9 @@
+.productImgs {
+    @apply w-full flex justify-between items-center;
+    @screen sm-only {
+        margin-bottom: 2rem;
+    }
+    @screen lg {
+        max-width: 60rem;
+    }
+}
diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
new file mode 100644
index 000000000..325c6b453
--- /dev/null
+++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { CarouselCommon, ImgWithLink } from 'src/components/common'
+import { ImgWithLinkProps } from 'src/components/common/ImgWithLink/ImgWithLink'
+import s from './ProductImgs.module.scss'
+
+interface Props {
+    className?: string
+    children?: any,
+}
+
+const DATA = [
+    {
+        src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
+        alt: 'Broccoli',
+    },
+    {
+        src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
+        alt: 'Broccoli',
+    }
+]
+
+const option = {
+    slidesPerView: 1,
+}
+
+const ProductImgs = ({ }: Props) => {
+    return (
+        <section className={s.productImgs}>
+            <CarouselCommon<ImgWithLinkProps>
+                data={DATA}
+                itemKey="product-detail-img"
+                Component={ImgWithLink}
+                option={option}
+                isDot={true}
+            />
+        </section >
+    )
+}
+
+export default ProductImgs
diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss
new file mode 100644
index 000000000..403782c51
--- /dev/null
+++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss
@@ -0,0 +1,81 @@
+@import "../../../../../../styles/utilities";
+
+.productInfo {
+    @screen md {
+        max-width: 39rem;
+        margin-left: 4.8rem;
+    }
+    @screen lg {
+        margin-left: 11.2rem;
+    }
+    .info {
+        margin-bottom: 3.2rem;
+        .heading {
+            @apply heading-2 font-heading;
+            margin-top: 0.8rem;
+        }
+        .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;
+            }
+        }
+        .description {
+            margin-top: 0.8rem;
+        }
+    }
+    .actions {
+        @screen sm-only {
+            @apply fixed flex justify-between items-center bg-white w-full;
+            z-index: 10000;
+            bottom: 0;
+            left: 0;
+            padding: 2rem;
+        }
+    }
+    .bottom {
+        @screen sm-only {
+            @apply flex justify-between items-center flex-row-reverse;
+            margin-left: 1rem;
+            flex: 1;
+            button {
+                &:first-child {
+                    min-width: 13rem;
+                }
+                &:nth-child(n + 1) {
+                    margin-left: 0.8rem;
+                }
+            }
+        }
+        .buttonWithIcon {
+            @apply flex items-center;
+            .label {
+                @apply hidden;
+                @screen md {
+                    @apply inline-block;
+                    margin-left: 0.8rem;
+                }
+            }
+        }
+        button {
+            @apply w-full;
+        }
+
+        @screen md {
+            margin-top: 2.4rem;
+            button {
+                &:first-child {
+                    margin-bottom: 0.8rem;
+                }
+            }
+        }
+    }
+}
diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx
new file mode 100644
index 000000000..4abb62568
--- /dev/null
+++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common'
+import { IconBuy } from 'src/components/icons'
+import { LANGUAGE } from 'src/utils/language.utils'
+import s from './ProductInfo.module.scss'
+
+interface Props {
+    className?: string
+    children?: any,
+}
+
+const ProductInfo = ({ }: Props) => {
+    return (
+        <section className={s.productInfo}>
+            <div className={s.info}>
+                <LabelCommon shape='half'>SEAFOOD</LabelCommon>
+                <h2 className={s.heading}>SeaPAk</h2>
+                <div className={s.price}>
+                    <div className={s.old}>
+                        <span className={s.number}>Rp 32.000</span>
+                        <LabelCommon type='discount'>-15%</LabelCommon>
+                    </div>
+                    <div className={s.current}>Rp 27.500</div>
+                </div>
+                <div className={s.description}>
+                    In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley
+                </div>
+            </div>
+            <div className={s.actions}>
+                <QuanittyInput />
+                <div className={s.bottom}>
+                    {/* <ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.PREORDER}</ButtonCommon> */}
+                    <ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.BUY_NOW}</ButtonCommon>
+
+                    <ButtonCommon size='large' type='light'>
+                        <span className={s.buttonWithIcon}>
+                            <IconBuy /><span className={s.label}>{LANGUAGE.BUTTON_LABEL.ADD_TO_CARD}</span>
+                        </span>
+                    </ButtonCommon>
+                </div>
+            </div>
+        </section >
+    )
+}
+
+export default ProductInfo
diff --git a/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss
new file mode 100644
index 000000000..d43e2d58c
--- /dev/null
+++ b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss
@@ -0,0 +1,27 @@
+@import "../../../../styles/utilities";
+
+.recommendedRecipes {
+    margin: 6rem auto;
+    @screen md {
+        margin: 5.6rem auto;
+    }
+    .infoProducts {
+        @apply flex justify-between items-center spacing-horizontal;
+        margin-bottom: 3.2rem;
+    }
+    .productsWrap {
+        @apply spacing-horizontal-left;
+        @screen xl {
+            :global(.customArrow) {
+                @screen lg {
+                    &:global(.leftArrow) {
+                        left: calc(-6.4rem - 2rem);
+                    }
+                    &:global(.rightArrow) {
+                        right: calc(-6.4rem - 2rem);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx
new file mode 100644
index 000000000..34950fbab
--- /dev/null
+++ b/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx
@@ -0,0 +1,51 @@
+import { TOptionsEvents } from 'keen-slider';
+import React from 'react';
+import { CarouselCommon, HeadingCommon, RecipeCard, ViewAllItem } from 'src/components/common';
+import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard';
+import { ROUTE } from 'src/utils/constanst.utils';
+import s from './RecommendedRecipes.module.scss';
+
+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,
+        },
+    },
+}
+
+interface Props {
+    data: RecipeCardProps[],
+}
+
+const RecommendedRecipes = ({ data }: Props) => {
+    return (
+        <div className={s.recommendedRecipes}>
+            <div className={s.infoProducts}>
+                <HeadingCommon>Recommended Recipes</HeadingCommon>
+                <ViewAllItem link={ROUTE.RECIPES} />
+            </div>
+            <div className={s.productsWrap}>
+                <CarouselCommon<RecipeCardProps>
+                    data={data}
+                    Component={RecipeCard}
+                    itemKey="Recommended Recipes"
+                    option={OPTION_DEFAULT}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default RecommendedRecipes;
\ No newline at end of file
diff --git a/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx
new file mode 100644
index 000000000..e11d31065
--- /dev/null
+++ b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo';
+import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
+
+const ReleventProducts = () => {
+    return (
+        <ListProductWithInfo
+            title="Relevant Products"
+            subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+            data={PRODUCT_DATA_TEST}
+        />
+    );
+};
+
+export default ReleventProducts;
\ No newline at end of file
diff --git a/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx b/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx
new file mode 100644
index 000000000..820af402f
--- /dev/null
+++ b/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ListProductWithInfo from 'src/components/common/ListProductWithInfo/ListProductWithInfo';
+import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
+
+const ViewedProducts = () => {
+    return (
+        <ListProductWithInfo
+            title="viewed Products"
+            subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+            data={PRODUCT_DATA_TEST}
+        />
+    );
+};
+
+export default ViewedProducts;
\ No newline at end of file
diff --git a/src/components/modules/product-detail/index.ts b/src/components/modules/product-detail/index.ts
new file mode 100644
index 000000000..ef4461432
--- /dev/null
+++ b/src/components/modules/product-detail/index.ts
@@ -0,0 +1,4 @@
+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'
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index 67eb96726..e8719581f 100644
--- 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;
 
@@ -21,7 +21,7 @@
   --warning-light: #fef8eb;
 
   --negative-dark: #741a06;
-  --negative: #f34f2b;
+  --negative: #D1644D;
   --negative-border-line: #fddfd8;
   --negative-light: #feefec;
 
@@ -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);
@@ -79,5 +80,5 @@ html {
 }
 
 a {
-  -webkit-tap-highlight-color: var(--text-active);
+  -webkit-tap-highlight-color: var(--primary);
 }
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index 26cea17c0..cc13ea3cf 100644
--- 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 {
@@ -137,4 +156,9 @@
             }
         }
     }
+
+    .u-icon {
+        width: 2rem;
+        height: 2rem;
+    }
 }
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index f299e8e20..e5966ad7e 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -8,9 +8,12 @@ export const SOCIAL_LINKS = {
 export const ROUTE = {
     HOME: '/',
     PRODUCTS: '/products',
+    PRODUCT_DETAIL: '/product',
     ABOUT: '/about',
     BLOG_DETAIL: '/blogdetail',
     ACCOUNT: '/account',
+    RECIPES: '/recipes',
+
     BUSSINESS: '/bussiness',
     CONTACT: '/contact',
     FAQ: '/faq',
diff --git a/src/utils/demo-data.ts b/src/utils/demo-data.ts
new file mode 100644
index 000000000..64c8128ae
--- /dev/null
+++ b/src/utils/demo-data.ts
@@ -0,0 +1,215 @@
+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',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png",
+    },
+    {
+        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",
+    },
+    {
+        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",
+    },
+    {
+        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",
+    },
+    {
+        name: 'Tomato',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646224-d22dc2e4-6ae8-4bbe-adcf-491ce191f09b.png",
+    },
+    {
+        name: 'Cucumber',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646225-2728f192-481b-4142-99b0-dde92f53c6c6.png",
+    },
+    {
+        name: 'Tomato',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646227-b5705e64-3b45-47a3-9433-9f4b5ee8d40c.png",
+    },
+    {
+        name: 'Cucumber',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646231-2d1c3ad1-4f5b-4a8e-9874-ca731f4ce128.png",
+    },
+]
+
+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',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646211-d56b77ac-83f1-4dd2-b55c-e3f1e0ba4e49.png",
+    },
+    {
+        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",
+        isNotSell: true,
+    },
+    {
+        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",
+    },
+    {
+        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",
+        isNotSell: true,
+    },
+    {
+        name: 'Tomato',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646224-d22dc2e4-6ae8-4bbe-adcf-491ce191f09b.png",
+    },
+    {
+        name: 'Cucumber',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646225-2728f192-481b-4142-99b0-dde92f53c6c6.png",
+    },
+    {
+        name: 'Tomato',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646227-b5705e64-3b45-47a3-9433-9f4b5ee8d40c.png",
+    },
+    {
+        name: 'Cucumber',
+        slug: 'tomato',
+        weight: '250g',
+        category: 'VEGGIE',
+        price: 'Rp 27.500',
+        imageSrc: "https://user-images.githubusercontent.com/76729908/131646231-2d1c3ad1-4f5b-4a8e-9874-ca731f4ce128.png",
+    },
+]
+
+export const RECIPE_DATA_TEST: RecipeCardProps[] = [
+    {
+        title: "Special Recipe of Vietnamese Phở",
+        description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients.  To make this pho soup recipe, you will need:",
+        imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png'
+    },
+    {
+        title: "Original Recipe of Curry",
+        description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
+        imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png'
+    },
+    {
+        title: "The Best Recipe of Beef Noodle Soup",
+        description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
+        imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png'
+    },
+    {
+        title: "Special Recipe of Vietnamese Phở",
+        description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients.  To make this pho soup recipe, you will need:",
+        imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png'
+    },
+    {
+        title: "Original Recipe of Curry",
+        description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
+        imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png'
+    },
+    {
+        title: "The Best Recipe of Beef Noodle Soup",
+        description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
+        imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png'
+    },
+]
\ No newline at end of file
diff --git a/src/utils/language.utils.ts b/src/utils/language.utils.ts
index 3f8d61926..191215aaa 100644
--- a/src/utils/language.utils.ts
+++ b/src/utils/language.utils.ts
@@ -2,6 +2,8 @@ export const LANGUAGE = {
     BUTTON_LABEL: {
         BUY_NOW: 'Buy now',
         SHOP_NOW: 'Shop now',
+        ADD_TO_CARD: 'Add to Cart',
+        PREORDER: 'Pre-Order Now',
     },
     PLACE_HOLDER: {
         SEARCH: 'Search',
diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts
index 6fa8df0e8..c927f977e 100644
--- a/src/utils/types.utils.ts
+++ b/src/utils/types.utils.ts
@@ -1,9 +1,13 @@
 export interface ProductProps {
-    category: string
+    category?: string
     name: string
+    slug: string
     weight: string
     price: string
+    oldPrice?: string
+    discount?: string
     imageSrc: string
+    isNotSell?: boolean
 }
 
 export interface FeaturedProductProps {
@@ -16,20 +20,20 @@ export interface FeaturedProductProps {
 
 export interface RecipeProps {
     title: string
-    description:string
+    description: string
     imageSrc: string
 }
 
 export interface CheckOutForm {
-    name: string
-    email:string
-    address: string
-    city:string
-    state:string
-    code:number
-    phone:number
-    method:string
-    shipping_fee:number
+    name?: string
+    email?:string
+    address?: string
+    city?:string
+    state?:string
+    code?:number
+    phone?:number
+    method?:string
+    shipping_fee?:number
 }
 
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 028e78f05..69ab1ade5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -47,19 +47,20 @@ module.exports = {
 
         'line': 'var(--border-line)',
         'background': 'var(--background)',
+        'background-gray': 'var(--background-gray)',
         'white': 'var(--white)',
 
-        'background-arrow':'var(--background-arrow)',
+        'background-arrow': 'var(--background-arrow)',
+
 
-        
         'disabled': 'var(--text-disabled)',
         line: 'var(--border-line)',
         background: 'var(--background)',
         white: 'var(--white)',
         gray: 'var(--gray)',
         disabled: 'var(--text-disabled)',
-        'background-arrow':'var(--background-arrow)',
-        
+        'background-arrow': 'var(--background-arrow)',
+
         // @deprecated (NOT use these variables)
         'primary-2': 'var(--primary-2)',
         secondary: 'var(--secondary)',
@@ -93,7 +94,7 @@ module.exports = {
         label: 'var(--text-label)',
         placeholder: 'var(--text-placeholder)',
         primary: 'var(--primary)',
-        
+
         // @deprecated (NOT use these variables)
         secondary: 'var(--text-secondary)',
       },
@@ -112,9 +113,11 @@ module.exports = {
         'sm-only': {'min': '0', 'max': '767px'},
         'sm': '640px',
         // => @media (min-width: 640px) { ... }
+
         'md-only': {'min': '768px', 'max': '1023px'},
         'md': '768px',
         // => @media (min-width: 768px) { ... }
+
         'lg-only': {'min': '1024px', 'max': '1279px'},
         'lg': '1024px',
         // => @media (min-width: 1024px) { ... }
@@ -125,8 +128,8 @@ module.exports = {
         '2xl': '1536px',
         // => @media (min-width: 1536px) { ... }
       },
-      caroucel:{
-        "arrow-height":"64px"
+      caroucel: {
+        "arrow-height": "64px"
       },
     },
   },

From 7fcea39572e3c0227e12d3df753a086ce958e2c3 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Wed, 8 Sep 2021 09:58:06 +0700
Subject: [PATCH 12/19] :sparkles: feat: Tab Common

---
 src/components/common/TabCommon/TabCommon.tsx                   | 2 +-
 .../TabCommon/{ => components}/TabItem/TabItem.module.scss      | 0
 .../common/TabCommon/{ => components}/TabItem/TabItem.tsx       | 0
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename src/components/common/TabCommon/{ => components}/TabItem/TabItem.module.scss (100%)
 rename src/components/common/TabCommon/{ => components}/TabItem/TabItem.tsx (100%)

diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx
index b837004d6..691b1d026 100644
--- a/src/components/common/TabCommon/TabCommon.tsx
+++ b/src/components/common/TabCommon/TabCommon.tsx
@@ -1,7 +1,7 @@
 import React, { RefObject, useEffect } from "react"
 import s from './TabCommon.module.scss'
 
-import TabItem from './TabItem/TabItem'
+import TabItem from './components/TabItem/TabItem'
 
 interface TabCommonProps {
     tabs: {ref:RefObject<HTMLLIElement>, tabName: string, active: boolean, onClick: (tabIndex: number, tabPane?: string) => void}[];
diff --git a/src/components/common/TabCommon/TabItem/TabItem.module.scss b/src/components/common/TabCommon/components/TabItem/TabItem.module.scss
similarity index 100%
rename from src/components/common/TabCommon/TabItem/TabItem.module.scss
rename to src/components/common/TabCommon/components/TabItem/TabItem.module.scss
diff --git a/src/components/common/TabCommon/TabItem/TabItem.tsx b/src/components/common/TabCommon/components/TabItem/TabItem.tsx
similarity index 100%
rename from src/components/common/TabCommon/TabItem/TabItem.tsx
rename to src/components/common/TabCommon/components/TabItem/TabItem.tsx

From e21fc5ee303dadd4757c9b569947a8f19a338fe9 Mon Sep 17 00:00:00 2001
From: sonnguyenkieio <sonnguyen@kie.io>
Date: Wed, 8 Sep 2021 09:59:40 +0700
Subject: [PATCH 13/19] :sparkles: feat: Tab Common

---
 .../components/TabPane/TabPane.module.scss    | 23 +++++++++++++++++++
 .../TabCommon/components/TabPane/TabPane.tsx  | 20 ++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 src/components/common/TabCommon/components/TabPane/TabPane.module.scss
 create mode 100644 src/components/common/TabCommon/components/TabPane/TabPane.tsx

diff --git a/src/components/common/TabCommon/components/TabPane/TabPane.module.scss b/src/components/common/TabCommon/components/TabPane/TabPane.module.scss
new file mode 100644
index 000000000..6904a6acb
--- /dev/null
+++ b/src/components/common/TabCommon/components/TabPane/TabPane.module.scss
@@ -0,0 +1,23 @@
+@import '../../../../../../styles/utilities';
+
+.tabPane {
+    @apply hidden;
+    animation-duration: 0.6s;
+    animation-name: appear;
+    @keyframes appear {
+        from {
+            margin-left: 100%;
+            width: 200%;
+        }
+        
+        to {
+            margin-left: 0%;
+            width: 100%;
+        }
+    }
+    
+
+    &.active {
+        @apply block;
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/TabCommon/components/TabPane/TabPane.tsx b/src/components/common/TabCommon/components/TabPane/TabPane.tsx
new file mode 100644
index 000000000..3b39291b7
--- /dev/null
+++ b/src/components/common/TabCommon/components/TabPane/TabPane.tsx
@@ -0,0 +1,20 @@
+import classNames from "classnames"
+import React from "react"
+import s from './TabPane.module.scss'
+
+interface TabPaneProps {
+    active: string;
+    children?: React.ReactNode;
+}
+
+const TabPane = ({ active="", children } : TabPaneProps) => {
+    return (
+        <section className={classNames(s.tabPane, {
+            [s[active]] : active
+        })}>
+            {children}
+        </section>
+    )
+}
+
+export default TabPane
\ No newline at end of file

From c4829f1d527cd8797a53565fc541dddbc6451048 Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Wed, 8 Sep 2021 14:48:53 +0700
Subject: [PATCH 14/19] :hammer: refactor: tabcommon -datnguyen

:%s
---
 pages/test.tsx                                | 31 ++++--
 .../common/TabCommon/TabCommon.module.scss    | 43 ++++----
 src/components/common/TabCommon/TabCommon.tsx | 97 ++++++++++++++-----
 .../components/TabItem/TabItem.module.scss    | 22 ++---
 .../TabCommon/components/TabItem/TabItem.tsx  | 37 ++++---
 .../components/TabPane/TabPane.module.scss    | 28 +++---
 .../TabCommon/components/TabPane/TabPane.tsx  |  9 +-
 7 files changed, 172 insertions(+), 95 deletions(-)

diff --git a/pages/test.tsx b/pages/test.tsx
index 970588581..6df50d601 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,8 +1,7 @@
 import { useState } from 'react'
-import {
-  ButtonCommon,
-  Layout, ModalInfo
-} from 'src/components/common'
+import { ButtonCommon, Layout, ModalInfo } from 'src/components/common'
+import TabPane from 'src/components/common/TabCommon/components/TabPane/TabPane'
+import TabCommon from 'src/components/common/TabCommon/TabCommon'
 export default function Test() {
   const [visible, setVisible] = useState(false)
   const onClose = () => {
@@ -13,10 +12,26 @@ export default function Test() {
   }
   return (
     <>
-      <ButtonCommon onClick={onOpen}>open</ButtonCommon>
-      <ModalInfo visible={visible} onClose={onClose}>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi?
-      </ModalInfo>
+      <TabCommon center={true}>
+        <TabPane
+          active={true}
+          tabName={'dat datdat datdatdatdatdatdat'}
+        >
+          <div className="w-full">
+          datdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdat
+          </div>
+        </TabPane>
+        <TabPane active={true} tabName={'1234567890'}>
+        <div className="w-full">
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit harum sint maiores optio? Perspiciatis, necessitatibus pariatur, ut sed aperiam minus reiciendis alias deleniti eligendi obcaecati illum id maxime accusantium beatae.
+          </div>
+        </TabPane>
+        <TabPane active={true} tabName={'1'}>
+        <div className="w-full">
+          11111111111111111111111111111111111111111111111111111111111
+          </div>
+        </TabPane>
+      </TabCommon>
     </>
   )
 }
diff --git a/src/components/common/TabCommon/TabCommon.module.scss b/src/components/common/TabCommon/TabCommon.module.scss
index 3d3473d82..e087018be 100644
--- a/src/components/common/TabCommon/TabCommon.module.scss
+++ b/src/components/common/TabCommon/TabCommon.module.scss
@@ -1,21 +1,28 @@
 @import '../../../styles/utilities';
-
-.tabCommon {
-    @apply flex;
-    position: relative;
-    border-bottom: 2px solid #FBFBFB;
-    padding-top: 1.6rem;
-    padding-bottom: 1.6rem;
-    width: 100%;
-
-    .slider {
-        @apply inline-block;
-        height: .2rem;
-        border-radius: 3px;
-        background-color: var(--primary);
-        position: absolute;
-        z-index: 1200;
-        bottom: 0;
-        transition: all .4s linear;
+.tabWapper{
+    @apply flex flex-col w-full;
+    .tabHeader{
+        @apply relative;
+        .tabList {
+            @apply flex;
+            position: relative;
+            border-bottom: 2px solid #FBFBFB;
+            padding: 0.8rem 0;
+            width: 100%;
+            &.center{
+                @apply justify-center;
+            }
+        
+        }
+        .slider {
+            @apply inline-block;
+            height: .2rem;
+            border-radius: 3px;
+            background-color: var(--primary);
+            position: absolute;
+            z-index: 1200;
+            bottom: 0;
+            transition: all .25s linear;
+        }
     }
 }
diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx
index 691b1d026..ea0a762b3 100644
--- a/src/components/common/TabCommon/TabCommon.tsx
+++ b/src/components/common/TabCommon/TabCommon.tsx
@@ -1,36 +1,85 @@
-import React, { RefObject, useEffect } from "react"
+import React, {
+  Children,
+  PropsWithChildren,
+  ReactElement,
+  RefObject,
+  useEffect,
+  useRef,
+  useState,
+	cloneElement,
+} from 'react'
 import s from './TabCommon.module.scss'
 
 import TabItem from './components/TabItem/TabItem'
+import { TabPaneProps } from './components/TabPane/TabPane'
+import classNames from 'classnames'
 
 interface TabCommonProps {
-    tabs: {ref:RefObject<HTMLLIElement>, tabName: string, active: boolean, onClick: (tabIndex: number, tabPane?: string) => void}[];
-    defaultActiveTab: number;
-    sliderRef : RefObject<HTMLDivElement>;
-    slideToTab: (ref: any) => void;
+  defaultActiveTab?: number
+  children: React.ReactNode
+	center?:boolean
 }
 
-const TabCommon = ({ tabs, defaultActiveTab, sliderRef, slideToTab } : TabCommonProps) => {
+const TabCommon = ({
+  defaultActiveTab = 0,
+  children,
+	center
+}: TabCommonProps) => {
+  const [active, setActive] = useState(0)
+  const slider = useRef<HTMLDivElement>(null)
+  const headerRef = useRef<HTMLUListElement>(null)
+  useEffect(() => {
+    setActive(defaultActiveTab)
+  }, [])
 
-    useEffect(() => {
-        slideToTab(tabs[defaultActiveTab].ref);
-    }, [])
+  useEffect(() => {
+    slide(active)
+  }, [active])
 
-    return (
-        <ul className={s.tabCommon}>
-            {
-                tabs.map((tab) => {
-                    return (
-                        <li key={tab.tabName} ref={tab.ref}>
-                            <TabItem onClick={tab.onClick} active={tab.active}>{tab.tabName}</TabItem>
-                        </li>
-                    )
-                })
-            }
-    
-            <div ref={sliderRef} className={s.slider}></div>
+  function slide(index: number) {
+    const active = headerRef.current?.children
+      .item(index)
+      ?.getBoundingClientRect()
+    const current = slider.current
+    if (current && active) {
+      let width = active.width - 24 <= 0 ? 24 : active.width - 24
+      let left = active.left 
+      current.style.width = width.toString() + 'px'
+      current.style.left = left.toString() + 'px'
+    }
+  }
+  const onTabClick = (index: number) => {
+    setActive(index)
+  }
+  return (
+    <section className={s.tabWapper}>
+      <div className={s.tabHeader}>
+        <ul className={classNames(s.tabList,{[s.center]:center})} ref={headerRef}>
+          {Children.map(children, (tab, index) => {
+            let item = tab as ReactElement<PropsWithChildren<TabPaneProps>>
+            return (
+              <li key={item.props.tabName}>
+                <TabItem
+                  active={active === index}
+                  onClick={onTabClick}
+                  tabIndex={index}
+                >
+                  {item.props.tabName}
+                </TabItem>
+              </li>
+            )
+          })}
         </ul>
-    )
+        <div ref={slider} className={s.slider}></div>
+      </div>
+      <div className={s.tabBody}>
+				{Children.map(children, (tab, index) => {
+					let item = tab as ReactElement<PropsWithChildren<TabPaneProps>>
+					return cloneElement(item, { active:index===active });
+				})
+			}</div>
+    </section>
+  )
 }
 
-export default TabCommon;
+export default TabCommon
diff --git a/src/components/common/TabCommon/components/TabItem/TabItem.module.scss b/src/components/common/TabCommon/components/TabItem/TabItem.module.scss
index bdbb0b66a..2b4f6af7f 100644
--- a/src/components/common/TabCommon/components/TabItem/TabItem.module.scss
+++ b/src/components/common/TabCommon/components/TabItem/TabItem.module.scss
@@ -1,22 +1,14 @@
-@import '../../../../styles/utilities';
+@import '../../../../../styles/utilities';
 
 .tabItem {
-    margin-right: 4.8rem;
-    padding-top: 1.6rem;
-    padding-bottom: 1.6rem;
-
+    margin-right:2.4rem;
+    padding: 0.8rem 0;
+    min-width: 2.4rem;
     &:hover {
         @apply cursor-pointer;
     }
-}
-
-.tabItemActive {
-    @apply font-bold;
-    margin-right: 4.8rem;
-    padding-top: 1.6rem;
-    padding-bottom: 1.6rem;
-
-    &:hover {
-        @apply cursor-pointer;
+    &.tabItemActive {
+        @apply font-bold;
     }
 }
+
diff --git a/src/components/common/TabCommon/components/TabItem/TabItem.tsx b/src/components/common/TabCommon/components/TabItem/TabItem.tsx
index 6881c2aca..742c1e0dd 100644
--- a/src/components/common/TabCommon/components/TabItem/TabItem.tsx
+++ b/src/components/common/TabCommon/components/TabItem/TabItem.tsx
@@ -1,19 +1,32 @@
-import React from "react"
+import classNames from 'classnames'
+import React, { RefObject, useRef } from 'react'
 import s from './TabItem.module.scss'
 
 interface TabItemProps {
-    active: boolean;
-    children: string;
-    onClick: (tabIndex: number, tabPane: string) => void;
+  active: boolean
+  children: string
+  onClick?: (tabIndex: number) => void
+  tabIndex: number
 }
 
-const TabItem = ({ active = false, children, onClick } : TabItemProps) => {
-
-    return (
-        <span onClick={onClick} className={active ? s.tabItemActive : s.tabItem} >
-            {children}
-        </span>
-    )
+const TabItem = ({
+  active = false,
+  children,
+  onClick,
+  tabIndex,
+}: TabItemProps) => {
+  const handleClick = () => {
+    onClick && onClick(tabIndex)
+  }
+  return (
+    <span
+      onClick={handleClick}
+      // className={active ? s.tabItemActive : s.tabItem}
+      className={classNames(s.tabItem, {[s.tabItemActive]:active})}
+    >
+      {children}
+    </span>
+  )
 }
 
-export default TabItem;
+export default TabItem
diff --git a/src/components/common/TabCommon/components/TabPane/TabPane.module.scss b/src/components/common/TabCommon/components/TabPane/TabPane.module.scss
index 6904a6acb..380472828 100644
--- a/src/components/common/TabCommon/components/TabPane/TabPane.module.scss
+++ b/src/components/common/TabCommon/components/TabPane/TabPane.module.scss
@@ -1,20 +1,20 @@
-@import '../../../../../../styles/utilities';
-
+@import "../../../../../styles/utilities";
 .tabPane {
     @apply hidden;
-    animation-duration: 0.6s;
-    animation-name: appear;
-    @keyframes appear {
-        from {
-            margin-left: 100%;
-            width: 200%;
-        }
+    transition: all 0.6s;
+    // animation-duration: 0.6s;
+    // animation-name: appear;
+    // @keyframes appear {
+    //     from {
+    //         margin-left: 100%;
+    //         width: 200%;
+    //     }
         
-        to {
-            margin-left: 0%;
-            width: 100%;
-        }
-    }
+    //     to {
+    //         margin-left: 0%;
+    //         width: 100%;
+    //     }
+    // }
     
 
     &.active {
diff --git a/src/components/common/TabCommon/components/TabPane/TabPane.tsx b/src/components/common/TabCommon/components/TabPane/TabPane.tsx
index 3b39291b7..e67784535 100644
--- a/src/components/common/TabCommon/components/TabPane/TabPane.tsx
+++ b/src/components/common/TabCommon/components/TabPane/TabPane.tsx
@@ -2,15 +2,16 @@ import classNames from "classnames"
 import React from "react"
 import s from './TabPane.module.scss'
 
-interface TabPaneProps {
-    active: string;
+export interface TabPaneProps {
+    active: boolean;
     children?: React.ReactNode;
+    tabName: string
 }
 
-const TabPane = ({ active="", children } : TabPaneProps) => {
+const TabPane = ({ active, children } : TabPaneProps) => {
     return (
         <section className={classNames(s.tabPane, {
-            [s[active]] : active
+            [s.active] : active
         })}>
             {children}
         </section>

From 0920bef68b9e34d4f32b1b148abd2f83a1139855 Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Wed, 8 Sep 2021 15:30:12 +0700
Subject: [PATCH 15/19] :hammer: refactor: tabcommon

:%s
---
 .../common/TabCommon/TabCommon.module.scss    | 25 +++++++++----------
 src/components/common/TabCommon/TabCommon.tsx |  7 +++---
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/common/TabCommon/TabCommon.module.scss b/src/components/common/TabCommon/TabCommon.module.scss
index e087018be..6dcb203c1 100644
--- a/src/components/common/TabCommon/TabCommon.module.scss
+++ b/src/components/common/TabCommon/TabCommon.module.scss
@@ -2,27 +2,26 @@
 .tabWapper{
     @apply flex flex-col w-full;
     .tabHeader{
-        @apply relative;
+        @apply flex;
         .tabList {
             @apply flex;
             position: relative;
             border-bottom: 2px solid #FBFBFB;
             padding: 0.8rem 0;
-            width: 100%;
             &.center{
-                @apply justify-center;
+                margin: auto;
             }
         
-        }
-        .slider {
-            @apply inline-block;
-            height: .2rem;
-            border-radius: 3px;
-            background-color: var(--primary);
-            position: absolute;
-            z-index: 1200;
-            bottom: 0;
-            transition: all .25s linear;
+            .slider {
+                @apply inline-block;
+                height: .2rem;
+                border-radius: 3px;
+                background-color: var(--primary);
+                position: absolute;
+                z-index: 1200;
+                bottom: 0;
+                transition: all .25s linear;
+            }
         }
     }
 }
diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx
index ea0a762b3..afefb0da3 100644
--- a/src/components/common/TabCommon/TabCommon.tsx
+++ b/src/components/common/TabCommon/TabCommon.tsx
@@ -40,10 +40,11 @@ const TabCommon = ({
     const active = headerRef.current?.children
       .item(index)
       ?.getBoundingClientRect()
+		const header = headerRef.current?.getBoundingClientRect()
     const current = slider.current
-    if (current && active) {
+    if (current && active && header) {
       let width = active.width - 24 <= 0 ? 24 : active.width - 24
-      let left = active.left 
+      let left = active.left - header.left
       current.style.width = width.toString() + 'px'
       current.style.left = left.toString() + 'px'
     }
@@ -69,8 +70,8 @@ const TabCommon = ({
               </li>
             )
           })}
-        </ul>
         <div ref={slider} className={s.slider}></div>
+        </ul>
       </div>
       <div className={s.tabBody}>
 				{Children.map(children, (tab, index) => {

From 1d17953816b4fd6b90ac2b0152c8d46654355884 Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Wed, 8 Sep 2021 17:41:26 +0700
Subject: [PATCH 16/19] init:bank transfer

---
 .../TabCommon/components/TabPane/TabPane.tsx  |  2 +-
 src/components/common/index.ts                |  2 ++
 .../checkout/CheckoutInfo/CheckoutInfo.tsx    |  6 ++++++
 .../PaymentInfoForm/PaymentInfoForm.tsx       | 21 ++++++++++++-------
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/common/TabCommon/components/TabPane/TabPane.tsx b/src/components/common/TabCommon/components/TabPane/TabPane.tsx
index e67784535..c0c7d2efa 100644
--- a/src/components/common/TabCommon/components/TabPane/TabPane.tsx
+++ b/src/components/common/TabCommon/components/TabPane/TabPane.tsx
@@ -3,7 +3,7 @@ import React from "react"
 import s from './TabPane.module.scss'
 
 export interface TabPaneProps {
-    active: boolean;
+    active?: boolean;
     children?: React.ReactNode;
     tabName: string
 }
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index a7b9075d3..33a555bff 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -41,3 +41,5 @@ 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'
+export { default as TabPane} from './TabCommon/components/TabPane/TabPane'
+export { default as TabCommon} from './TabCommon/TabCommon'
diff --git a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
index 16852ea43..0e0c9ccaa 100644
--- a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
@@ -4,6 +4,7 @@ import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCol
 import { CheckOutForm } from 'src/utils/types.utils'
 import s from './CheckoutInfo.module.scss'
 import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm'
+import PaymentInfoForm from './components/PaymentInfoForm/PaymentInfoForm'
 import ShippingInfoForm from './components/ShippingInfoForm/ShippingInfoForm'
 interface CheckoutInfoProps {}
 
@@ -44,6 +45,11 @@ const CheckoutInfo = ({}: CheckoutInfoProps) => {
       title: 'Shipping Information',
       form: <ShippingInfoForm onConfirm={onConfirm} id={2}/>,
     },
+    {
+      id: 3,
+      title: 'Payment Information',
+      form: <PaymentInfoForm onConfirm={onConfirm} id={3}/>,
+    },
   ]
   return (
     <div className={s.warpper}>
diff --git a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx
index a947faa8b..1e29789c0 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx
@@ -1,19 +1,26 @@
 import React from 'react'
-import TabPane from 'src/components/common/TabCommon/components/TabPane/TabPane'
-import TabCommon from 'src/components/common/TabCommon/TabCommon'
+import { TabCommon, TabPane } from 'src/components/common'
+import { CheckOutForm } from 'src/utils/types.utils'
+import BankTransfer from '../BankTransfer/BankTransfer'
+
 import s from "./PaymentInfoForm.module.scss"
 interface PaymentInfoFormProps {
-    
+    onConfirm?: (id:number,formInfo:CheckOutForm)=>void
+    id:number
 }
 
 const PaymentInfoForm = ({}: PaymentInfoFormProps) => {
     return (
-        <div className={s.warpper}>
+        <div className="">
             <TabCommon>
-                {/* <TabPane tabName="Bank Transfer">
-
-                </TabPane> */}
+                <TabPane tabName = "Bank Transfer">
+                    <BankTransfer/>
+                </TabPane>
+                <TabPane tabName = "Bank Transfer 2">
+                    <BankTransfer/>
+                </TabPane>
             </TabCommon>
+            
         </div>
     )
 }

From 0eed5ab0512fb4b0f8c897801471b929713dd180 Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Thu, 9 Sep 2021 16:18:51 +0700
Subject: [PATCH 17/19] :sparkles: feat: Checkout Page

:%s
---
 pages/checkout.tsx                            | 13 ++++
 pages/test.tsx                                | 36 +----------
 .../CardItemCheckout.module.scss              |  8 +--
 .../common/CheckboxCommon/CheckboxCommon.tsx  |  5 +-
 .../CheckoutCollapse.module.scss              | 14 ++++-
 .../CheckoutCollapse/CheckoutCollapse.tsx     | 10 ++-
 src/components/common/index.ts                |  1 -
 src/components/icons/IconDoneCheckout.tsx     | 20 ++++++
 src/components/icons/index.ts                 |  1 +
 .../CheckoutBill/CheckoutBill.module.scss     |  1 +
 .../checkout}/CheckoutBill/CheckoutBill.tsx   |  4 +-
 .../CheckoutInfo/CheckoutInfo.module.scss     |  3 +-
 .../checkout/CheckoutInfo/CheckoutInfo.tsx    | 56 ++++++++---------
 .../BankTransfer/BankTransfer.module.scss     | 18 ++++--
 .../components/BankTransfer/BankTransfer.tsx  | 24 ++++----
 .../CreditCardForm/CreditCardForm.module.scss | 12 ++++
 .../CreditCardForm/CreditCardForm.tsx         | 27 ++++++++
 .../PaymentInfoForm.module.scss               | 14 +++++
 .../PaymentInfoForm/PaymentInfoForm.tsx       | 61 +++++++++++++------
 .../CheckoutPage/CheckoutPage.module.scss     | 10 +++
 .../checkout/CheckoutPage/CheckoutPage.tsx    | 18 ++++++
 src/components/modules/checkout/index.ts      |  2 +
 src/utils/demo-data.ts                        | 33 +++++++++-
 src/utils/funtion.utils.ts                    |  8 +++
 24 files changed, 287 insertions(+), 112 deletions(-)
 create mode 100644 pages/checkout.tsx
 create mode 100644 src/components/icons/IconDoneCheckout.tsx
 rename src/components/{common => modules/checkout}/CheckoutBill/CheckoutBill.module.scss (95%)
 rename src/components/{common => modules/checkout}/CheckoutBill/CheckoutBill.tsx (89%)
 create mode 100644 src/components/modules/checkout/CheckoutInfo/components/CreditCardForm/CreditCardForm.module.scss
 create mode 100644 src/components/modules/checkout/CheckoutInfo/components/CreditCardForm/CreditCardForm.tsx
 create mode 100644 src/components/modules/checkout/CheckoutPage/CheckoutPage.module.scss
 create mode 100644 src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx

diff --git a/pages/checkout.tsx b/pages/checkout.tsx
new file mode 100644
index 000000000..f2bc93517
--- /dev/null
+++ b/pages/checkout.tsx
@@ -0,0 +1,13 @@
+import { Layout } from 'src/components/common';
+import { CheckoutPage } from 'src/components/modules/checkout';
+import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
+
+export default function Checkout() {
+  return (
+    <>
+        <CheckoutPage/>
+    </>
+  )
+}
+
+Checkout.Layout = Layout
diff --git a/pages/test.tsx b/pages/test.tsx
index b7298a091..f46bd55fe 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react'
 import {
-  CheckoutBill,
   Layout,
 } from 'src/components/common'
 import { CardItemCheckoutProps } from 'src/components/common/CardItemCheckout/CardItemCheckout'
@@ -9,43 +8,12 @@ import TabCommon from 'src/components/common/TabCommon/TabCommon'
 import { CheckoutInfo } from 'src/components/modules/checkout'
 import image7 from '../public/assets/images/image7.png'
 import image8 from '../public/assets/images/image8.png'
-const dataTest:CardItemCheckoutProps[] = [
-  {
-    name: 'Tomato',
-    slug: "tomato",
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-    quantity:10
-  },
-  {
-    name: 'Carrot',
-    slug: "carrot",
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-    quantity:1
-  },
-  {
-    name: 'Salad',
-    slug:"salad",
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
-    quantity:2
-  },
-]
+
 
 export default function Test() {
   return (
     <>
-      <div className="w-full flex justify-between" style={{padding: "0 3.2rem"}} >
-        <CheckoutInfo/>
-        <CheckoutBill data={dataTest}/>
-      </div>
+      
       <TabCommon center={true}>
         <TabPane
           active={true}
diff --git a/src/components/common/CardItemCheckout/CardItemCheckout.module.scss b/src/components/common/CardItemCheckout/CardItemCheckout.module.scss
index 374529453..c87b8efad 100644
--- a/src/components/common/CardItemCheckout/CardItemCheckout.module.scss
+++ b/src/components/common/CardItemCheckout/CardItemCheckout.module.scss
@@ -4,13 +4,13 @@
     padding:1.6rem 0;
     @apply flex items-center;
     .image{
-        min-width: 13.3rem;
-        max-width: 8.8rem;
+        width: 13.3rem;
+        height: 8.8rem;
         margin: 0.8rem;
         @apply flex justify-center items-center;
         img{
-            width: 100%;
-            height: 100%;
+            max-width: 100%;
+            max-height: 100%;
         }
     }
     .right{
diff --git a/src/components/common/CheckboxCommon/CheckboxCommon.tsx b/src/components/common/CheckboxCommon/CheckboxCommon.tsx
index d901f91f4..73c69bb24 100644
--- a/src/components/common/CheckboxCommon/CheckboxCommon.tsx
+++ b/src/components/common/CheckboxCommon/CheckboxCommon.tsx
@@ -8,9 +8,10 @@ interface CheckboxProps extends Omit<
     >{
     onChange?: (value: boolean) => void,
     defaultChecked?: boolean
+    text?:string
 }
 
-const CheckboxCommon = ({onChange,defaultChecked = true,...props}: CheckboxProps) =>{
+const CheckboxCommon = ({onChange,defaultChecked = true,text="Billing address is same as shipping", ...props}: CheckboxProps) =>{
     
     const [value, setValue] = useState<boolean>(true);
 
@@ -31,7 +32,7 @@ const CheckboxCommon = ({onChange,defaultChecked = true,...props}: CheckboxProps
                 <span className={s.checkMark}></span>
              </label>
              <div className={classNames(s.checkboxText)}>
-                <label htmlFor="check"> Billing address is same as shipping </label>
+                <label htmlFor="check"> {text} </label>
              </div>
         </div>
     )
diff --git a/src/components/common/CheckoutCollapse/CheckoutCollapse.module.scss b/src/components/common/CheckoutCollapse/CheckoutCollapse.module.scss
index b34630fed..9e8e1f8e5 100644
--- a/src/components/common/CheckoutCollapse/CheckoutCollapse.module.scss
+++ b/src/components/common/CheckoutCollapse/CheckoutCollapse.module.scss
@@ -1,7 +1,15 @@
 .warpper{
+    padding: 2.4rem 0;
+    @apply border-b border-solid border-line;
+    .note{
+        font-size: 1.2rem;
+        line-height: 2rem;
+        letter-spacing: 0.01em;
+        color: var(--text-label);
+        padding: 0 5.6rem;
+    }
     .header{
         @apply flex justify-between;
-        padding-bottom: 3.2rem;
         .left{
             @apply flex items-center;
             .number{
@@ -16,6 +24,9 @@
                     border: none;
                     color: var(--white);
                 }
+                &.done{
+                    @apply border-2 border-solid border-primary;
+                }
             }
             .title{
                 padding-left: 2.4rem;
@@ -33,6 +44,7 @@
         height: 0;
         @apply overflow-hidden;
         &.show{
+            margin-top: 3.2rem;
             height: initial;
         }
     }
diff --git a/src/components/common/CheckoutCollapse/CheckoutCollapse.tsx b/src/components/common/CheckoutCollapse/CheckoutCollapse.tsx
index 14348a625..077b94a79 100644
--- a/src/components/common/CheckoutCollapse/CheckoutCollapse.tsx
+++ b/src/components/common/CheckoutCollapse/CheckoutCollapse.tsx
@@ -1,5 +1,8 @@
 import classNames from 'classnames'
+import { divide } from 'lodash'
 import React from 'react'
+import { IconDoneCheckout } from 'src/components/icons'
+import { CheckOutForm } from 'src/utils/types.utils'
 import s from './CheckoutCollapse.module.scss'
 interface CheckoutCollapseProps {
   visible: boolean
@@ -10,6 +13,7 @@ interface CheckoutCollapseProps {
   onClose?: (id:number) => void
   onOpen?: (id:number) => void
   onEditClick?:(id:number) => void
+  note?:string
 }
 
 const CheckoutCollapse = ({
@@ -18,6 +22,7 @@ const CheckoutCollapse = ({
   title,
   isEdit,
   visible,
+  note,
   onOpen,
 	onClose,
   onEditClick
@@ -36,8 +41,8 @@ const CheckoutCollapse = ({
     <div className={s.warpper}>
       <div className={s.header}>
         <div className={s.left}>
-          <div className={classNames(s.number, { [`${s.visible}`]: visible })}>
-            {id}
+          <div className={classNames(s.number, { [s.visible]: visible, [s.done]:isEdit })}>
+            {isEdit?<IconDoneCheckout/>:id}
           </div>
           <div className={s.title} onClick={handleTitleClick}>
             {title}
@@ -45,6 +50,7 @@ const CheckoutCollapse = ({
         </div>
         {isEdit && <div className={s.edit} onClick={handleEdit}>{'Edit'}</div>}
       </div>
+      {(!visible && isEdit) && (<div className={s.note}>{note}</div>) }
       <div className={classNames(s.body, { [`${s.show}`]: visible })}>{children}</div>
     </div>
   )
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 33a555bff..15c2e4537 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -36,7 +36,6 @@ export { default as CardItemCheckout} from './CardItemCheckout/CardItemCheckout'
 export { default as CardBlog} from './CardBlog/CardBlog'
 export { default as RelevantBlogPosts} from './RelevantBlogPosts/RelevantBlogPosts'
 export { default as CollapseCommon} from './CollapseCommon/CollapseCommon'
-export { default as CheckoutBill} from './CheckoutBill/CheckoutBill'
 export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
 export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
 export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'
diff --git a/src/components/icons/IconDoneCheckout.tsx b/src/components/icons/IconDoneCheckout.tsx
new file mode 100644
index 000000000..418472d23
--- /dev/null
+++ b/src/components/icons/IconDoneCheckout.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+const IconDoneCheckout = () => {
+  return (
+    <svg
+      width="16"
+      height="12"
+      viewBox="0 0 16 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.7099 1.20986C14.617 1.11613 14.5064 1.04174 14.3845 0.990969C14.2627 0.940201 14.132 0.914062 13.9999 0.914062C13.8679 0.914062 13.7372 0.940201 13.6154 0.990969C13.4935 1.04174 13.3829 1.11613 13.29 1.20986L5.83995 8.66986L2.70995 5.52986C2.61343 5.43662 2.49949 5.36331 2.37463 5.3141C2.24978 5.2649 2.11645 5.24077 1.98227 5.24309C1.84809 5.24541 1.71568 5.27414 1.5926 5.32763C1.46953 5.38113 1.35819 5.45834 1.26495 5.55486C1.17171 5.65138 1.0984 5.76532 1.04919 5.89018C0.999989 6.01503 0.975859 6.14836 0.97818 6.28254C0.980502 6.41672 1.00923 6.54913 1.06272 6.67221C1.11622 6.79529 1.19343 6.90662 1.28995 6.99986L5.12995 10.8399C5.22291 10.9336 5.33351 11.008 5.45537 11.0588C5.57723 11.1095 5.70794 11.1357 5.83995 11.1357C5.97196 11.1357 6.10267 11.1095 6.22453 11.0588C6.34639 11.008 6.45699 10.9336 6.54995 10.8399L14.7099 2.67986C14.8115 2.58622 14.8925 2.47257 14.9479 2.34607C15.0033 2.21957 15.0319 2.08296 15.0319 1.94486C15.0319 1.80676 15.0033 1.67015 14.9479 1.54365C14.8925 1.41715 14.8115 1.3035 14.7099 1.20986Z"
+        fill="#4EA674"
+      />
+    </svg>
+  )
+}
+
+export default IconDoneCheckout
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 7dfe3657c..152bb414c 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -31,3 +31,4 @@ export { default as IconDelete } from './IconDelete'
 export { default as IconPlus } from './IconPlus'
 export { default as IconMinus } from './IconMinus'
 export { default as IconCirclePlus } from './IconCirclePlus'
+export { default as IconDoneCheckout } from './IconDoneCheckout'
diff --git a/src/components/common/CheckoutBill/CheckoutBill.module.scss b/src/components/modules/checkout/CheckoutBill/CheckoutBill.module.scss
similarity index 95%
rename from src/components/common/CheckoutBill/CheckoutBill.module.scss
rename to src/components/modules/checkout/CheckoutBill/CheckoutBill.module.scss
index d0b15d516..d47382780 100644
--- a/src/components/common/CheckoutBill/CheckoutBill.module.scss
+++ b/src/components/modules/checkout/CheckoutBill/CheckoutBill.module.scss
@@ -17,6 +17,7 @@
       min-height: 6.4rem;
     }
     .price {
+      margin-top: 3.2rem;
       .line {
         @apply flex justify-between items-center text-label;
         .total {
diff --git a/src/components/common/CheckoutBill/CheckoutBill.tsx b/src/components/modules/checkout/CheckoutBill/CheckoutBill.tsx
similarity index 89%
rename from src/components/common/CheckoutBill/CheckoutBill.tsx
rename to src/components/modules/checkout/CheckoutBill/CheckoutBill.tsx
index cdbbe5165..259397980 100644
--- a/src/components/common/CheckoutBill/CheckoutBill.tsx
+++ b/src/components/modules/checkout/CheckoutBill/CheckoutBill.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import s from './CheckoutBill.module.scss'
-import { CardItemCheckout } from '..'
-import { CardItemCheckoutProps } from '../CardItemCheckout/CardItemCheckout'
+import { CardItemCheckout } from '../../../common'
+import { CardItemCheckoutProps } from '../../../common/CardItemCheckout/CardItemCheckout'
 import { IconCirclePlus } from 'src/components/icons'
 
 interface CheckoutBillProps {
diff --git a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss
index 3ca7d7101..6f97371a8 100644
--- a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss
+++ b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss
@@ -1,7 +1,8 @@
 .warpper{
     @apply w-full;
+    padding: 3.2rem;
     .title{
-        padding: 3.2rem 0;
+        margin-bottom: 3.2rem;
         @apply flex justify-start items-center
     }
 }
\ No newline at end of file
diff --git a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
index 0e0c9ccaa..c989709e7 100644
--- a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { Logo } from 'src/components/common'
 import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse'
+import { removeItem } from 'src/utils/funtion.utils'
 import { CheckOutForm } from 'src/utils/types.utils'
 import s from './CheckoutInfo.module.scss'
 import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm'
@@ -12,28 +13,41 @@ const CheckoutInfo = ({}: CheckoutInfoProps) => {
   const [active, setActive] = useState(1)
   const [done, setDone] = useState<number[]>([])
   const [info, setInfo] = useState<CheckOutForm>({})
-  const onOpen = (id:number) => {
-		setActive(id)
-	}
 
   const onEdit = (id:number) => {
 		setActive(id)
-	}
-
-  const onClose = (id:number) => {
-		setActive(id)
+    setDone(removeItem<number>(done,id))
 	}
 
   const onConfirm = (id:number,formInfo:CheckOutForm) => {
 		if(id+1>formList.length){
 			console.log({...info,...formInfo})
 		}else{
-
-			setActive(id+1)
+      if(done.length>0){
+        for (let i = id+1; i <= formList.length; i++) {
+          if(!done.includes(i)){
+            setActive(i)
+          }
+        }
+      }else{
+        setActive(id+1)
+      }
+      setDone([...done,id])
 		}
-		setDone([...done,id])
 		setInfo({...info,...formInfo})
 	}
+
+  const getNote = (id:number) => {
+    switch (id) {
+      case 1:
+        return `${info.name}, ${info.email}`
+        case 2:
+          return `${info.address}, ${info.state}, ${info.city}, ${info.code}, ${info.phone}, `
+      default:
+        return ""
+    }
+  }
+
   const formList = [
     {
       id: 1,
@@ -57,6 +71,7 @@ const CheckoutInfo = ({}: CheckoutInfoProps) => {
         <Logo />
       </div>
       {formList.map((item) => {
+        let note = getNote(item.id)
         return <CheckoutCollapse
 					key={item.title}
           id={item.id}
@@ -64,30 +79,11 @@ const CheckoutInfo = ({}: CheckoutInfoProps) => {
           title={item.title}
           onEditClick={onEdit}
           isEdit={done.includes(item.id)}
+          note={note}
         >
           {item.form}
         </CheckoutCollapse>
       })}
-      {/* <CheckoutCollapse
-        id={1}
-        visible={active === 1}
-        // onOpen={onOpen}
-        // onClose={onClose}
-        title="Customer Information"
-        isEdit={true}
-      >
-        <CustomerInfoForm />
-      </CheckoutCollapse>
-      <CheckoutCollapse
-        id={2}
-        visible={active === 2}
-        // onOpen={onOpen2}
-        // onClose={onClose2}
-        title="Shipping Information"
-        isEdit={true}
-      >
-        <ShippingInfoForm />
-      </CheckoutCollapse> */}
     </div>
   )
 }
diff --git a/src/components/modules/checkout/CheckoutInfo/components/BankTransfer/BankTransfer.module.scss b/src/components/modules/checkout/CheckoutInfo/components/BankTransfer/BankTransfer.module.scss
index e7d6e3573..44ac98048 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/BankTransfer/BankTransfer.module.scss
+++ b/src/components/modules/checkout/CheckoutInfo/components/BankTransfer/BankTransfer.module.scss
@@ -1,9 +1,15 @@
 .warpper{
-    .title{
-        min-width: 19.4rem;
-        @apply text-label;
-    }
-    .hightlight{
-        @apply text-active;
+    .info{
+        .line{
+            @apply flex justify-start items-center;
+            .title{
+                margin-right: 3.2rem;
+                min-width: 19.4rem;
+                @apply text-label;
+            }
+            .hightlight{
+                @apply text-active;
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/components/modules/checkout/CheckoutInfo/components/BankTransfer/BankTransfer.tsx b/src/components/modules/checkout/CheckoutInfo/components/BankTransfer/BankTransfer.tsx
index 463711618..7de11245c 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/BankTransfer/BankTransfer.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/components/BankTransfer/BankTransfer.tsx
@@ -5,17 +5,19 @@ interface BankTransferProps {}
 const BankTransfer = ({}: BankTransferProps) => {
   return (
     <div className={s.warpper}>
-      <div className={s.line}>
-        <div className={s.title}>Account Name:</div>
-        <div className={s.hightlight}>Duong Dinh Vu</div>
-      </div>
-      <div className={s.line}>
-        <div className={s.title}>Account Number:</div>
-        <div className={s.hightlight}>1234 1234 1234 1234</div>
-      </div>
-      <div className={s.line}>
-        <div className={s.title}>Bank Name:</div>
-        <div className={s.hightlight}>Techcombank - HCMC</div>
+      <div className={s.info}>
+        <div className={s.line}>
+          <div className={s.title}>Account Name:</div>
+          <div className={s.hightlight}>Duong Dinh Vu</div>
+        </div>
+        <div className={s.line}>
+          <div className={s.title}>Account Number:</div>
+          <div className={s.hightlight}>1234 1234 1234 1234</div>
+        </div>
+        <div className={s.line}>
+          <div className={s.title}>Bank Name:</div>
+          <div className={s.hightlight}>Techcombank - HCMC</div>
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/modules/checkout/CheckoutInfo/components/CreditCardForm/CreditCardForm.module.scss b/src/components/modules/checkout/CheckoutInfo/components/CreditCardForm/CreditCardForm.module.scss
new file mode 100644
index 000000000..62dbbc8d3
--- /dev/null
+++ b/src/components/modules/checkout/CheckoutInfo/components/CreditCardForm/CreditCardForm.module.scss
@@ -0,0 +1,12 @@
+@import "../../../../../../styles/utilities";
+.warpper{
+    @apply u-form;
+    .line{
+        >div{
+            width: 50%;
+        }
+    }
+    .checkbox{
+        margin-top: 1.6rem;
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/checkout/CheckoutInfo/components/CreditCardForm/CreditCardForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/CreditCardForm/CreditCardForm.tsx
new file mode 100644
index 000000000..d289165e0
--- /dev/null
+++ b/src/components/modules/checkout/CheckoutInfo/components/CreditCardForm/CreditCardForm.tsx
@@ -0,0 +1,27 @@
+import React, { useRef } from 'react'
+import { CheckboxCommon, Inputcommon } from 'src/components/common'
+import { CustomInputCommon } from 'src/utils/type.utils'
+import s from "./CreditCardForm.module.scss"
+interface CreditCardFormProps {
+    
+}
+
+const CreditCardForm = ({}: CreditCardFormProps) => {
+    const cardNumberRef = useRef<CustomInputCommon>(null)
+    const dateRef = useRef<CustomInputCommon>(null)
+    const cvsRef = useRef<CustomInputCommon>(null)
+    return (
+        <div className={s.warpper}>
+            <div className={s.body}>
+                <Inputcommon type="text" placeholder="Cârd Number" ref={cardNumberRef} />
+                <div className={s.line}>
+                    <Inputcommon type="text" placeholder="MM/YY" ref={dateRef} />
+                    <Inputcommon type="text" placeholder="CVS" ref={cvsRef} />
+                </div>
+            </div>
+            <div className={s.checkbox}><CheckboxCommon/></div>
+        </div>
+    )
+}
+
+export default CreditCardForm
diff --git a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss b/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss
index e69de29bb..d70dcda16 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss
+++ b/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss
@@ -0,0 +1,14 @@
+.wrapper{
+    padding: 0 5.6rem;
+    .inner{
+        padding: 4rem 0;
+    }
+    .bottom{
+        margin-top: 2.4rem;
+        @apply flex justify-between items-center;
+        .note{
+            font-size: 1.2rem;
+            line-height: 2rem;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx
index 1e29789c0..dc84fec38 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx
@@ -1,28 +1,55 @@
 import React from 'react'
-import { TabCommon, TabPane } from 'src/components/common'
+import { ButtonCommon, TabCommon, TabPane } from 'src/components/common'
 import { CheckOutForm } from 'src/utils/types.utils'
 import BankTransfer from '../BankTransfer/BankTransfer'
+import Link from 'next/link'
 
-import s from "./PaymentInfoForm.module.scss"
+import s from './PaymentInfoForm.module.scss'
+import CreditCardForm from '../CreditCardForm/CreditCardForm'
 interface PaymentInfoFormProps {
-    onConfirm?: (id:number,formInfo:CheckOutForm)=>void
-    id:number
+  onConfirm?: (id: number, formInfo: CheckOutForm) => void
+  id: number
 }
 
-const PaymentInfoForm = ({}: PaymentInfoFormProps) => {
-    return (
-        <div className="">
-            <TabCommon>
-                <TabPane tabName = "Bank Transfer">
-                    <BankTransfer/>
-                </TabPane>
-                <TabPane tabName = "Bank Transfer 2">
-                    <BankTransfer/>
-                </TabPane>
-            </TabCommon>
-            
+const PaymentInfoForm = ({onConfirm,id}: PaymentInfoFormProps) => {
+  const handleConfirmClick = () => {
+    onConfirm && onConfirm(id,{})
+  }
+  return (
+    <div className={s.wrapper}>
+      <TabCommon>
+        <TabPane tabName="Bank Transfer">
+          <div className={s.inner}><BankTransfer /></div>
+        </TabPane>
+        <TabPane tabName="Ewallet">
+          <div className={s.inner}></div>
+        </TabPane>
+        <TabPane tabName="Credit Card">
+          <div className={s.inner}><CreditCardForm /></div>
+        </TabPane>
+      </TabCommon>
+      <div className={s.bottom}>
+        <div className={s.note}>
+          By clicking continue you agree to Casper's{' '}
+          {
+            <Link href="#">
+              <strong>terms and conditions</strong>
+            </Link>
+          }{' '}
+          and{' '}
+          {
+            <Link href="#">
+              <strong>privacy policy </strong>
+            </Link>
+          }
+          .
         </div>
-    )
+        <ButtonCommon onClick={handleConfirmClick}>
+          Submit Order
+        </ButtonCommon>
+      </div>
+    </div>
+  )
 }
 
 export default PaymentInfoForm
diff --git a/src/components/modules/checkout/CheckoutPage/CheckoutPage.module.scss b/src/components/modules/checkout/CheckoutPage/CheckoutPage.module.scss
new file mode 100644
index 000000000..2038507d7
--- /dev/null
+++ b/src/components/modules/checkout/CheckoutPage/CheckoutPage.module.scss
@@ -0,0 +1,10 @@
+.warrper{
+    @apply flex;
+    .right{
+        min-width: 56.3rem;
+    }
+    .left{
+        @apply w-full;
+
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx b/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx
new file mode 100644
index 000000000..5e2275f46
--- /dev/null
+++ b/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { CHECKOUT_BILL_DATA } from 'src/utils/demo-data'
+import { CheckoutBill, CheckoutInfo } from '..'
+import s from "./CheckoutPage.module.scss"
+interface CheckoutPageProps {
+    
+}
+
+const CheckoutPage = ({}: CheckoutPageProps) => {
+    return (
+        <div className={s.warrper}>
+            <div className={s.left}><CheckoutInfo/></div>
+            <div className={s.right}><CheckoutBill data={CHECKOUT_BILL_DATA}/></div>
+        </div>
+    )
+}
+
+export default CheckoutPage
diff --git a/src/components/modules/checkout/index.ts b/src/components/modules/checkout/index.ts
index 24a765b23..736375e4c 100644
--- a/src/components/modules/checkout/index.ts
+++ b/src/components/modules/checkout/index.ts
@@ -1 +1,3 @@
 export { default as CheckoutInfo } from './CheckoutInfo/CheckoutInfo'
+export { default as CheckoutPage } from './CheckoutPage/CheckoutPage'
+export { default as CheckoutBill } from './CheckoutBill/CheckoutBill'
diff --git a/src/utils/demo-data.ts b/src/utils/demo-data.ts
index 64c8128ae..a4ebee5dc 100644
--- a/src/utils/demo-data.ts
+++ b/src/utils/demo-data.ts
@@ -1,3 +1,4 @@
+import { CardItemCheckoutProps } from "src/components/common/CardItemCheckout/CardItemCheckout"
 import { RecipeCardProps } from "src/components/common/RecipeCard/RecipeCard"
 
 export const PRODUCT_DATA_TEST = [
@@ -212,4 +213,34 @@ export const RECIPE_DATA_TEST: RecipeCardProps[] = [
         description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
         imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png'
     },
-]
\ No newline at end of file
+]
+
+export const CHECKOUT_BILL_DATA:CardItemCheckoutProps[] = [
+    {
+      name: 'Tomato',
+      slug: "tomato",
+      weight: '250g',
+      category: 'VEGGIE',
+      price: 'Rp 27.500',
+      imageSrc: "https://user-images.githubusercontent.com/76729908/131646227-b5705e64-3b45-47a3-9433-9f4b5ee8d40c.png",
+      quantity:10
+    },
+    {
+      name: 'Carrot',
+      slug: "carrot",
+      weight: '250g',
+      category: 'VEGGIE',
+      price: 'Rp 27.500',
+      imageSrc: "https://user-images.githubusercontent.com/76729908/131646217-23b86160-45c9-4845-8dcc-b3e1a4483edd.png",
+      quantity:1
+    },
+    {
+      name: 'Salad',
+      slug:"salad",
+      weight: '250g',
+      category: 'VEGGIE',
+      price: 'Rp 27.500',
+      imageSrc: "https://user-images.githubusercontent.com/76729908/131646221-aaa1d48d-bb80-470f-9400-ae2aa47285b6.png",
+      quantity:2
+    },
+  ]
\ No newline at end of file
diff --git a/src/utils/funtion.utils.ts b/src/utils/funtion.utils.ts
index b1e7b5536..619e9ae30 100644
--- a/src/utils/funtion.utils.ts
+++ b/src/utils/funtion.utils.ts
@@ -1,3 +1,11 @@
 export function isMobile() {
     return window.innerWidth <= 768
+}
+
+export function removeItem<T>(arr: Array<T>, value: T): Array<T> { 
+    const index = arr.indexOf(value);
+    if (index > -1) {
+      arr.splice(index, 1);
+    }
+    return [...arr];
 }
\ No newline at end of file

From c712d66fa57b98fb145cb6f48617f4b4c0472e54 Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Fri, 10 Sep 2021 13:50:24 +0700
Subject: [PATCH 18/19] reponsive: checkout info

---
 .../CardItemCheckout.module.scss              |  4 +-
 .../CheckoutBill/CheckoutBill.module.scss     | 13 +++--
 .../CheckoutInfo/CheckoutInfo.module.scss     | 11 +++-
 .../checkout/CheckoutInfo/CheckoutInfo.tsx    |  7 ++-
 .../CustomerInfoForm.module.scss              |  4 +-
 .../PaymentInfoForm.module.scss               |  4 +-
 .../ShippingInfoForm.module.scss              |  4 +-
 .../CheckoutPage/CheckoutPage.module.scss     | 52 +++++++++++++++++--
 .../checkout/CheckoutPage/CheckoutPage.tsx    | 25 +++++++--
 9 files changed, 108 insertions(+), 16 deletions(-)

diff --git a/src/components/common/CardItemCheckout/CardItemCheckout.module.scss b/src/components/common/CardItemCheckout/CardItemCheckout.module.scss
index c87b8efad..3617cb91f 100644
--- a/src/components/common/CardItemCheckout/CardItemCheckout.module.scss
+++ b/src/components/common/CardItemCheckout/CardItemCheckout.module.scss
@@ -1,8 +1,10 @@
 .warpper{
-    max-width: 49.9rem;
     max-height: 12rem;
     padding:1.6rem 0;
     @apply flex items-center;
+    @screen lg {
+        max-width: 49.9rem;
+    }
     .image{
         width: 13.3rem;
         height: 8.8rem;
diff --git a/src/components/modules/checkout/CheckoutBill/CheckoutBill.module.scss b/src/components/modules/checkout/CheckoutBill/CheckoutBill.module.scss
index d47382780..403bdb76b 100644
--- a/src/components/modules/checkout/CheckoutBill/CheckoutBill.module.scss
+++ b/src/components/modules/checkout/CheckoutBill/CheckoutBill.module.scss
@@ -1,11 +1,18 @@
 .warpper {
-  max-width: 56.3rem;
-	padding: 3.2rem;
-  @apply flex justify-between flex-col border-l-2 border-solid border-line;
+  padding: 3.2rem;
+  min-width: 100%;
+  @screen lg {
+    max-width: 56.3rem;
+    @apply flex justify-between flex-col border-l-2 border-solid border-line;
+  }
   .title {
+    display: none;
     font-weight: bold;
     font-size: 2rem;
     line-height: 2.8rem;
+    @screen md {
+      display: block;
+    }
   }
   .list {
     min-height: 52.8rem;
diff --git a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss
index 6f97371a8..cadf9f684 100644
--- a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss
+++ b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss
@@ -3,6 +3,15 @@
     padding: 3.2rem;
     .title{
         margin-bottom: 3.2rem;
-        @apply flex justify-start items-center
+        @apply flex justify-between items-center;
+        .viewCart{
+            margin-right: 5.6rem;
+            @apply text-primary font-bold;
+            display: block;
+            cursor: pointer;
+            @screen lg {
+                display: none;
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
index c989709e7..423f92635 100644
--- a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
@@ -7,9 +7,11 @@ import s from './CheckoutInfo.module.scss'
 import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm'
 import PaymentInfoForm from './components/PaymentInfoForm/PaymentInfoForm'
 import ShippingInfoForm from './components/ShippingInfoForm/ShippingInfoForm'
-interface CheckoutInfoProps {}
+interface CheckoutInfoProps {
+  onViewCart:()=>void
+}
 
-const CheckoutInfo = ({}: CheckoutInfoProps) => {
+const CheckoutInfo = ({onViewCart}: CheckoutInfoProps) => {
   const [active, setActive] = useState(1)
   const [done, setDone] = useState<number[]>([])
   const [info, setInfo] = useState<CheckOutForm>({})
@@ -69,6 +71,7 @@ const CheckoutInfo = ({}: CheckoutInfoProps) => {
     <div className={s.warpper}>
       <div className={s.title}>
         <Logo />
+        <div className={s.viewCart} onClick={onViewCart}>View cart</div>
       </div>
       {formList.map((item) => {
         let note = getNote(item.id)
diff --git a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss
index 8db473479..b0ecf8144 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss
+++ b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss
@@ -1,7 +1,9 @@
 @import "../../../../../../styles/utilities";
 .warpper{
     @apply u-form;
-    padding: 0 5.6rem;
+    @screen md {
+        padding: 0 5.6rem;
+    }
     .bottom{
         margin-top: 2.4rem;
         @apply flex justify-between items-center;
diff --git a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss b/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss
index d70dcda16..15a70659c 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss
+++ b/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss
@@ -1,5 +1,7 @@
 .wrapper{
-    padding: 0 5.6rem;
+    @screen md {
+        padding: 0 5.6rem;
+    }
     .inner{
         padding: 4rem 0;
     }
diff --git a/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.module.scss b/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.module.scss
index 79057f7d4..c0c8b2795 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.module.scss
+++ b/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.module.scss
@@ -2,7 +2,9 @@
 
 .warpper{
     @apply u-form;
-    padding: 0 5.6rem;
+    @screen md {
+        padding: 0 5.6rem;
+    }
     .bottom{
         margin-top: 2.4rem;
         @apply flex justify-between items-center;
diff --git a/src/components/modules/checkout/CheckoutPage/CheckoutPage.module.scss b/src/components/modules/checkout/CheckoutPage/CheckoutPage.module.scss
index 2038507d7..1661f243c 100644
--- a/src/components/modules/checkout/CheckoutPage/CheckoutPage.module.scss
+++ b/src/components/modules/checkout/CheckoutPage/CheckoutPage.module.scss
@@ -1,10 +1,56 @@
+@import "../../../../styles/utilities";
 .warrper{
     @apply flex;
     .right{
-        min-width: 56.3rem;
+        display: none;
+        @screen lg {
+            display: block;
+            min-width: 45rem;
+        }
+        @screen xl {
+            min-width: 56.3rem;
+        }
     }
-    .left{
+    .left{  
         @apply w-full;
-
+    }
+    .mobile{
+        @apply hidden;
+        &.isShow{
+            @apply block;
+            @screen lg {
+                @apply hidden;
+            }
+        }
+        .modal{
+            background: rgba(0, 0, 0, 0.5);
+            position: fixed;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 10000;
+            .content{
+                @apply spacing-horizontal;
+                margin-top: 3rem;
+                padding-top: 6.4rem ;
+                padding-bottom: 5rem;
+                background-color: white;
+                overflow: auto;
+                height: 100%;
+                border-radius: 2.4rem 2.4rem 0 0;
+                .head{
+                    @apply flex justify-between;
+                    h3{
+                        @apply heading-3 font-bold;
+                        color:var(--text-base);
+                    }
+                }
+                button{
+                    margin-top: 2rem;
+                    width: 100%;
+                }
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx b/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx
index 5e2275f46..8cfcc31f3 100644
--- a/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx
+++ b/src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx
@@ -1,16 +1,35 @@
-import React from 'react'
+import classNames from 'classnames'
+import React, { useState } from 'react'
+import IconHide from 'src/components/icons/IconHide'
 import { CHECKOUT_BILL_DATA } from 'src/utils/demo-data'
 import { CheckoutBill, CheckoutInfo } from '..'
 import s from "./CheckoutPage.module.scss"
 interface CheckoutPageProps {
-    
 }
 
 const CheckoutPage = ({}: CheckoutPageProps) => {
+    const [isShow, setIsShow] = useState(false)
+    const onClose = () => {
+        setIsShow(false)
+    }
+    const onViewCart =() => {
+        setIsShow(true)
+    }
     return (
         <div className={s.warrper}>
-            <div className={s.left}><CheckoutInfo/></div>
+            <div className={s.left}><CheckoutInfo onViewCart = {onViewCart}/></div>
             <div className={s.right}><CheckoutBill data={CHECKOUT_BILL_DATA}/></div>
+            <div className={classNames({ [s.mobile] :true,[s.isShow]: isShow})}>
+                <div className={s.modal}>
+                    <div className={s.content}>
+                        <div className={s.head}>
+                            <h3>Your Cart({CHECKOUT_BILL_DATA.length})</h3>
+                            <div onClick={onClose}><IconHide/></div>
+                        </div>
+                        <CheckoutBill data={CHECKOUT_BILL_DATA}/>
+                    </div>
+                </div>
+            </div>
         </div>
     )
 }

From 53df72970812641f419d389a9f884a2c98693b12 Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Fri, 10 Sep 2021 17:57:11 +0700
Subject: [PATCH 19/19] reponsive: product list page

---
 src/components/common/Layout/Layout.module.scss             | 2 +-
 .../MenuNavigationProductList.module.scss                   | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Layout/Layout.module.scss b/src/components/common/Layout/Layout.module.scss
index d9649900a..30e4a077d 100644
--- a/src/components/common/Layout/Layout.module.scss
+++ b/src/components/common/Layout/Layout.module.scss
@@ -7,7 +7,7 @@
     }
 }
 .filter{
-    @screen md {
+    @screen xl {
         display: none;
     }
 }
\ No newline at end of file
diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
index 3c05d840d..042785c05 100644
--- a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
+++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
@@ -1,8 +1,12 @@
 @import "../../../styles/utilities";
 .menuNavigationProductListDesktop{
-    @screen sm-only {
+    @screen sm {
         @apply hidden;
     }
+
+    @screen xl {
+        @apply block;
+    }
 }
 .menuNavigationProductListMobile{
     @apply relative transition-all duration-100;