diff --git a/next.config.js b/next.config.js
index 27bddfae6..3a0fee27b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -26,6 +26,7 @@ module.exports = withCommerceConfig({
   images: {
     // todo: replace domains for images
     domains: ['user-images.githubusercontent.com'],
+    minimumCacheTTL: 60,
   },
   i18n: {
     locales: ['en-US', 'es'],
@@ -46,10 +47,10 @@ module.exports = withCommerceConfig({
       // For Vendure, rewrite the local api url to the remote (external) api url. This is required
       // to make the session cookies work.
       isVendure &&
-        process.env.NEXT_PUBLIC_VENDURE_LOCAL_URL && {
-          source: `${process.env.NEXT_PUBLIC_VENDURE_LOCAL_URL}/:path*`,
-          destination: `${process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL}/:path*`,
-        },
+      process.env.NEXT_PUBLIC_VENDURE_LOCAL_URL && {
+        source: `${process.env.NEXT_PUBLIC_VENDURE_LOCAL_URL}/:path*`,
+        destination: `${process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL}/:path*`,
+      },
     ].filter(Boolean)
   },
 })
diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index c34394af5..ab9a1c17c 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -1,7 +1,7 @@
 
-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'
+import { Layout, RecipeDetail, RecommendedRecipes, RelevantBlogPosts } from 'src/components/common'
+import { ProductInfoDetail, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
+import { BLOGS_DATA_TEST, INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
 
 export default function Slug() {
   return <>
@@ -10,6 +10,7 @@ export default function Slug() {
     <RecommendedRecipes data={RECIPE_DATA_TEST} />
     <ReleventProducts />
     <ViewedProducts />
+    <RelevantBlogPosts data={BLOGS_DATA_TEST} title="relevent blog posts"/>
   </>
 }
 
diff --git a/pages/recipe/[slug].tsx b/pages/recipe/[slug].tsx
new file mode 100644
index 000000000..1f71ba5be
--- /dev/null
+++ b/pages/recipe/[slug].tsx
@@ -0,0 +1,12 @@
+
+import { Layout, RecipeDetail, RecommendedRecipes } from 'src/components/common'
+import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
+
+export default function Slug() {
+  return <div className="page-recipe-detail">
+    <RecipeDetail ingredients={INGREDIENT_DATA_TEST} />
+    <RecommendedRecipes data={RECIPE_DATA_TEST} />
+  </div>
+}
+
+Slug.Layout = Layout
diff --git a/pages/test.tsx b/pages/test.tsx
index 644dc08ed..0ec1c8136 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -78,13 +78,26 @@ export default function Test() {
 }
   return (
     <>
+    <div className="shape-common-border">
+      <div className="inner">
+        Lorem ipsum dolor sit amet.
+      </div>
+    </div>
       {/* <BlogDetailPage /> */}
       
       {/* <RecipeListPage/> */}
         {/*<MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>*/}
-        <button onClick={toggle}>toggle menu : {visibleMenuFilter.toString()}</button>
-           <MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleMenuFilter} onClose={closeMenuFilter}/> 
+        {/* <button onClick={toggle}>toggle menu : {visibleMenuFilter.toString()}</button>
+           <MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleMenuFilter} onClose={closeMenuFilter}/>  */}
            {/* <CartDrawer  /> */}
+           <div className="shape-common-lg">
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit maiores aut, delectus assumenda explicabo, dolore facilis, quasi quae sed obcaecati doloribus dolorum architecto aperiam nisi dignissimos consequuntur amet neque possimus.
+           </div>
+           <div className="shape-common-lg-border">
+              <div className="inner">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, porro aut. Quas, consequuntur! Officiis magni cum placeat magnam ut hic beatae error facere obcaecati. Labore eius explicabo fugit minus veritatis.
+              </div>
+           </div>
     </>
   )
 }
diff --git a/src/components/common/Author/Author.module.scss b/src/components/common/Author/Author.module.scss
index 8d903546f..5a2dad969 100644
--- a/src/components/common/Author/Author.module.scss
+++ b/src/components/common/Author/Author.module.scss
@@ -2,11 +2,15 @@
 .authorWarper{
     @apply flex flex-row items-center;
     
-    .authorImage{
+    .authorImage {
         width:3.2rem;
         height:3.2rem;
         border-radius:3.2rem;
+        div{
+            min-width:3.2rem !important; 
+        }
     }
+    
     .authorName{
         margin-left:1rem;
         color:var(--text-label);
diff --git a/src/components/common/Author/Author.tsx b/src/components/common/Author/Author.tsx
index 1cf8e52af..6ec347b2c 100644
--- a/src/components/common/Author/Author.tsx
+++ b/src/components/common/Author/Author.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import s from './Author.module.scss';
 import classNames from 'classnames';
+import ImgWithLink from "../ImgWithLink/ImgWithLink";
 
 interface Props {
     image:string,
@@ -11,7 +12,9 @@ const Author = ({image,name}:Props) =>{
 
     return (
         <div className={classNames(s.authorWarper)}>
-            <img className={classNames(s.authorImage)}  src={image}  alt=""/>
+            <div className={classNames(s.authorImage)}  >
+                <ImgWithLink src={image} alt="author" />
+            </div>
             <div className={classNames(s.authorName)}>{name}</div>
         </div>
     )
diff --git a/src/components/common/Banner/Banner.tsx b/src/components/common/Banner/Banner.tsx
index 1dbc04d9f..410fded77 100644
--- a/src/components/common/Banner/Banner.tsx
+++ b/src/components/common/Banner/Banner.tsx
@@ -8,16 +8,27 @@ interface Props {
 
 const option = {
     slidesPerView: 1,
-    breakpoints: {}
+    mode: 'free',
 }
 const Banner = memo(({ data }: Props) => {
+    if (data.length === 1) {
+        const item = data[0]
+        return <BannerItem
+            title={item.title}
+            imgLink={item.imgLink}
+            subtitle={item.subtitle}
+            buttonLabel={item.buttonLabel}
+            linkButton={item.linkButton}
+            size={item.size}
+        />
+    }
     return (
         <CarouselCommon<BannerItemProps>
             data={data}
             itemKey="banner"
             Component={BannerItem}
             option={option}
-            isDot = {true}
+            isDot={true}
         />
     )
 })
diff --git a/src/components/common/Banner/BannerItem/BannerItem.module.scss b/src/components/common/Banner/BannerItem/BannerItem.module.scss
index 72690f92d..9331a7aff 100644
--- a/src/components/common/Banner/BannerItem/BannerItem.module.scss
+++ b/src/components/common/Banner/BannerItem/BannerItem.module.scss
@@ -1,16 +1,15 @@
 @import "../../../../styles/utilities";
 
 .bannerItem {
-  @apply bg-primary-light custom-border-radius-lg overflow-hidden;
-  @screen md {
-    border: 1px solid var(--primary);
-  }
+  @apply bg-primary-light shape-common-lg overflow-hidden;
+  padding: 0;
   &.large {
     margin-bottom: 2.8rem;
     .inner {
+      background-size: cover;
+      background-position: center bottom;
       @screen xl {
-        @apply bg-right-bottom;
-        background-size: unset;
+        background-position: right bottom;
       }
     }
   }
@@ -19,13 +18,10 @@
     background-size: 90%;
     background-position: right -500% bottom 0%;
     .content {
-      background-image: linear-gradient(
-        to right,
-        rgb(227, 242, 233, 0.9),
-        rgb(227, 242, 233, 0.5) 80%,
-        rgb(227, 242, 233, 0)
-      );
-      padding: 1.6rem;
+      background-image: linear-gradient(to right, rgb(227, 242, 233) 63%, rgb(227, 242, 233, 0));
+
+      padding: 2rem;
+      padding-bottom: 4rem;
       max-width: 37rem;
       @screen md {
         max-width: 49.6rem;
@@ -38,9 +34,6 @@
         }
         .subHeading {
           @apply sub-headline;
-          @screen md {
-            @apply caption;
-          }
         }
       }
 
diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
index c7b9f1ffa..a0c33947d 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -1,102 +1,127 @@
 @import "../../../styles/utilities";
 
 .buttonCommon {
-  @apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1rem 2rem;
-  @screen md {
-    padding: 0.8rem 1.6rem;
-  }
-  @screen lg {
-    padding: 0.8rem 3.2rem;
-  }
-  &:disabled {
-    filter: brightness(0.9);
-    cursor: not-allowed;
-    color: var(--disabled);
-  }
-  &:hover {
-    @apply shadow-md;
-    &:not(:disabled) {
+  @apply shape-common;
+  .inner {
+    padding: 1rem 2rem;
+    @apply bg-primary transition-all duration-200 text-white font-bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    @screen md {
+      padding: 1.6rem 1.6rem;
+    }
+    @screen lg {
+      padding: 1.6rem 3.2rem;
+    }
+    &:disabled {
+      filter: brightness(0.9);
+      cursor: not-allowed;
+      color: var(--disabled);
+    }
+    &:hover {
+      @apply shadow-md;
+      &:not(:disabled) {
+        filter: brightness(1.05);
+      }
+    }
+    &:focus {
+      outline: none;
       filter: brightness(1.05);
     }
+    &:focus-visible {
+      outline: 2px solid var(--text-active);
+    }
   }
-  &:focus {
-    outline: none;
-    filter: brightness(1.05);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--text-active);
-  }
-
   &.loading {
-    &::before {
-      content: "";
-      border-radius: 50%;
-      width: 1.6rem;
-      height: 1.6rem;
-      border: 3px solid rgba(170, 170, 170, 0.5);
-      border-top: 3px solid var(--white);
-      -webkit-animation: spin 2s linear infinite;
-      animation: spin 2s linear infinite;
-      margin-right: 0.8rem;
+    .inner {
+      &::after {
+        content: "";
+        border-radius: 50%;
+        width: 1.6rem;
+        height: 1.6rem;
+        border: 3px solid rgba(170, 170, 170, 0.5);
+        border-top: 3px solid var(--white);
+        -webkit-animation: spin 2s linear infinite;
+        animation: spin 2s linear infinite;
+        margin-right: 0.8rem;
+      }
     }
   }
 
   &.light {
-    @apply text-base bg-white;
-    border: 1px solid var(--text-active);
+    @apply shape-common-border;
+    &::before {
+      background-color: var(--text-active);
+    }
+    .inner {
+      @apply text-base bg-white;
+    }
     &.loading {
-      &::before {
-        border-top-color: var(--primary);
+      .inner {
+        &::after {
+          border-top-color: var(--primary);
+        }
       }
     }
   }
 
   &.lightBorderNone {
-    @apply bg-white text-primary;
+    .inner {
+      @apply bg-white text-primary;
+    }
     &.loading {
-      &::before {
+      .inner::after {
         border-top-color: var(--primary);
       }
     }
   }
 
   &.ghost {
-    @apply bg-white text-primary;
-    border: 1px solid var(--primary);
+    @apply shape-common-border;
+    .inner {
+      @apply bg-white text-primary;
+    }
+    &::before {
+      background-color: var(--primary);
+    }
     &.loading {
-      &::before {
+      .inner::after {
         border-top-color: var(--text-active);
       }
     }
   }
 
   &.onlyIcon {
-    padding: 0.8rem;
-    .icon {
-      margin: 0;
+    .inner {
+      padding: 1rem;
+      @screen md {
+        padding: 1.6rem;
+      }
+      .icon {
+        margin: 0;
+      }
     }
   }
 
   &.large {
-    padding: 1rem 1.5rem;
-    &.onlyIcon {
-      padding: 1rem;
-    }
-    @screen md {
-      padding: 1.6rem 3.2rem;
+    .inner {
+      padding: 1rem 1.6rem;
       &.onlyIcon {
-        padding: 1.6rem;
+        padding: 1rem;
+      }
+      @screen md {
+        padding: 1.6rem 3.2rem;
+        &.onlyIcon {
+          padding: 1.6rem;
+        }
+      }
+      @screen lg {
+        padding: 1.6rem 4.8rem;
       }
     }
-    @screen lg {
-      padding: 1.6rem 4.8rem;
-    }
     &.loading {
-      &::before {
+      .inner::before {
         width: 2.4rem;
         height: 2.4rem;
       }
@@ -104,16 +129,21 @@
   }
 
   &.preserve {
-    flex-direction: row-reverse;
-    .icon {
-      margin: 0 0 0 1.6rem;
+    .inner {
+      flex-direction: row-reverse;
+      .icon {
+        margin: 0 0 0 1.6rem;
+      }
     }
   }
 
   .icon {
     margin: 0 1.6rem 0 0;
-    svg path {
-      fill: currentColor;
+    svg {
+      height: 2rem;
+      path {
+        fill: currentColor;
+      }
     }
   }
 }
diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx
index 5b943f65b..965e9519e 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.tsx
+++ b/src/components/common/ButtonCommon/ButtonCommon.tsx
@@ -27,10 +27,12 @@ const ButtonCommon = memo(({ type = 'primary', size = 'default', loading = false
             disabled={disabled}
             onClick={onClick}
         >
-            {
-                icon && <span className={s.icon}>{icon}</span>
-            }
-            <span className={s.label}>{children}</span>
+            <div className={s.inner}>
+                {
+                    icon && <span className={s.icon}>{icon}</span>
+                }
+                <span className={s.label}>{children}</span>
+            </div>
         </button>
     )
 })
diff --git a/src/components/common/CardBlog/CardBlog.module.scss b/src/components/common/CardBlog/CardBlog.module.scss
index 6e62ed5ff..f9d1b58e5 100644
--- a/src/components/common/CardBlog/CardBlog.module.scss
+++ b/src/components/common/CardBlog/CardBlog.module.scss
@@ -4,8 +4,6 @@
     @apply inline-flex flex-col justify-start;
     max-width: 39.2rem;
     .image {
-        width: 100%;
-        max-height: 22rem;
         border-radius: 2.4rem;
         &:hover {
             cursor: pointer;
@@ -13,6 +11,9 @@
         img{
             border-radius: 2.4rem;
         }
+        > div{
+            min-height: 22rem;
+        }
     }
     .title {
         padding: 1.6rem 0.8rem 0.4rem 0.8rem;
diff --git a/src/components/common/CardBlog/CardBlog.tsx b/src/components/common/CardBlog/CardBlog.tsx
index 314a6a1fd..a44f45494 100644
--- a/src/components/common/CardBlog/CardBlog.tsx
+++ b/src/components/common/CardBlog/CardBlog.tsx
@@ -2,7 +2,9 @@ import Link from 'next/link'
 import React from 'react'
 import { ROUTE } from 'src/utils/constanst.utils'
 import { BlogProps } from 'src/utils/types.utils'
+import { ImgWithLink } from '..'
 import s from './CardBlog.module.scss'
+
 export interface BlogCardProps extends BlogProps {
   // todo: edit when intergrate API
 
@@ -14,7 +16,7 @@ const CardBlog = ({ imageSrc, title, description, slug }: BlogCardProps) => {
       <Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
         <a>
           <div className={s.image}>
-            <img src={imageSrc} alt="image cardblog" />
+            <ImgWithLink src={imageSrc} alt="image cardblog" />
           </div>
         </a>
       </Link>
diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx
index 3b5854ed4..29f351ccb 100644
--- a/src/components/common/CarouselCommon/CarouselCommon.tsx
+++ b/src/components/common/CarouselCommon/CarouselCommon.tsx
@@ -15,6 +15,7 @@ export interface CarouselCommonProps<T> {
   option: TOptionsEvents
   keenClassname?: string
   isPadding?: boolean
+  defaultComponentProps?: object
 }
 
 const CarouselCommon = <T,>({
@@ -25,6 +26,7 @@ const CarouselCommon = <T,>({
   isPadding = false,
   isArrow = true,
   isDot = false,
+  defaultComponentProps,
   option: { slideChanged,slidesPerView, ...sliderOption },
 }: CarouselCommonProps<T>) => {
   const [currentSlide, setCurrentSlide] = React.useState(0)
@@ -68,11 +70,14 @@ const CarouselCommon = <T,>({
           [s.isPadding]: isPadding,
         })}
       >
-        {data?.map((props, index) => (
-          <div className="keen-slider__slide" key={`${itemKey}-${index}`}>
-            <Component {...props} />
-          </div>
-        ))}
+        {data?.map((props, index) => {
+          const allProps = defaultComponentProps ? { ...props, ...defaultComponentProps } : props
+          return (
+            <div className="keen-slider__slide" key={`${itemKey}-${index}`}>
+              <Component {...allProps} />
+            </div>
+          )
+        })}
       </div>
       {slider && isArrow && (
         <>
diff --git a/src/components/common/CartDrawer/CartDrawer.module.scss b/src/components/common/CartDrawer/CartDrawer.module.scss
index 126028d3c..d5bba6c57 100644
--- a/src/components/common/CartDrawer/CartDrawer.module.scss
+++ b/src/components/common/CartDrawer/CartDrawer.module.scss
@@ -4,9 +4,6 @@
 .cartDrawer {
     @apply flex flex-col h-full;
     .body {
-        @apply overflow-y-auto overflow-x-hidden h-full custom-scroll;
-    }
-    .bottom {
-        padding-top: 1.6rem;
+        @apply flex flex-col justify-center overflow-y-auto overflow-x-hidden h-full custom-scroll;
     }
 }
\ No newline at end of file
diff --git a/src/components/common/CartDrawer/CartDrawer.tsx b/src/components/common/CartDrawer/CartDrawer.tsx
index 0a432bb65..31da985ef 100644
--- a/src/components/common/CartDrawer/CartDrawer.tsx
+++ b/src/components/common/CartDrawer/CartDrawer.tsx
@@ -23,7 +23,7 @@ const CartDrawer = ({ visible, onClose }: Props) => {
           <ProductsInCart data={PRODUCT_CART_DATA_TEST}/>
           <CartRecommendation />
         </div>
-        <div className={s.bottom}>
+        <div>
           <CartMessage />
           <CartCheckoutButton />
         </div>
diff --git a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss
index 3f90bffbd..e4fceb2d1 100644
--- a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss
+++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.module.scss
@@ -1,5 +1,7 @@
 .cartCheckoutButton {
+    display: block;
     padding: 1.6rem;
+    width: 100%;
     button {
         width: 100%;
     }
diff --git a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx
index 0cd7d00a2..5cc8f5f6f 100644
--- a/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx
+++ b/src/components/common/CartDrawer/components/CartCheckoutButton/CartCheckoutButton.tsx
@@ -1,12 +1,16 @@
 import React, { memo } from 'react';
 import { ButtonCommon } from 'src/components/common';
 import s from './CartCheckoutButton.module.scss';
+import Link from 'next/link'
+import { ROUTE } from 'src/utils/constanst.utils';
 
 const CartCheckoutButton = memo(() => {
   return (
-    <div className={s.cartCheckoutButton}>
-      <ButtonCommon size='large'>Check out - Rp 120.500</ButtonCommon>
-    </div>
+    <Link href={ROUTE.CHECKOUT}>
+      <a className={s.cartCheckoutButton}>
+        <ButtonCommon size='large'>Check out - Rp 120.500</ButtonCommon>
+      </a>
+    </Link>
   )
 })
 
diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
index 88664460c..9095aadc1 100644
--- a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
+++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
@@ -1,7 +1,8 @@
-@import '../../../../../styles/utilities';
+@import "../../../../../styles/utilities";
 
 .cartRecommendation {
     @apply w-full bg-background-gray;
+    padding-bottom: 5.4rem;
     .top {
         @apply flex justify-between items-center;
         padding: 1.6rem;
@@ -12,14 +13,10 @@
     .productCardWarpper {
         padding-left: 1.6rem;
         :global(.customArrow) {
-            @apply bg-line;
-            @screen lg {
-                &:global(.leftArrow) {
-                    left: calc(-6.4rem - 2rem);
-                }
-                &:global(.rightArrow) {
-                    right: calc(-6.4rem - 2rem);
-                }
+            @apply bg-line shadow-md;
+            opacity: 0.8;
+            &:global(.rightArrow) {
+                right: 1rem;
             }
         }
     }
diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx
index bbc40647e..b275ceda5 100644
--- a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx
+++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx
@@ -7,14 +7,20 @@ import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
 import s from './CartRecommendation.module.scss';
 
 const option: TOptionsEvents = {
-  slidesPerView: 2,
+  slidesPerView: 1.5,
   mode: 'free',
   breakpoints: {
     '(min-width: 640px)': {
-      slidesPerView: 1,
+      slidesPerView: 1.5,
     },
     '(min-width: 768px)': {
       slidesPerView: 2.5,
+    },
+    '(min-width: 1008px)': {
+      slidesPerView: 2.2,
+    },
+    '(min-width: 1440px)': {
+      slidesPerView: 2.5,
     }
   },
 }
@@ -34,6 +40,7 @@ const CartRecommendation = () => {
           Component={ProductCard}
           itemKey="cart-recommendation"
           option={option}
+          defaultComponentProps={{ isSingleButton: true }}
         />
       </div>
     </div>
diff --git a/src/components/common/Header/Header.module.scss b/src/components/common/Header/Header.module.scss
index 99cd29fe0..1a73bbae5 100644
--- a/src/components/common/Header/Header.module.scss
+++ b/src/components/common/Header/Header.module.scss
@@ -6,20 +6,28 @@
   left: 0;
   z-index: 9999;
   margin-bottom: 3.2rem;
-  @screen md {
-    @apply relative;
-  }
+
   &.full {
     @apply shadow-none;
-    border: 1px solid var(--border-line);
   }
   .menu {
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     padding-left: 3.2rem;
     padding-right: 3.2rem;
   }
   .logo {
     @apply font-logo;
   }
+
+  @screen md {
+    @apply relative;
+    &.full {
+      border: 1px solid var(--border-line);
+    }
+    .menu {
+      @apply shadow-none;
+    }
+  }
 }
 
 .headerSticky {
diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 5b42c6aaf..eea61abb9 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -41,6 +41,8 @@ const Header = memo(({ toggleFilter }: props) => {
                 } else {
                     setIsFullHeader(true)
                 }
+            } else {
+                setIsFullHeader(true)
             }
         }
         window.addEventListener('scroll', handleScroll)
@@ -51,31 +53,29 @@ const Header = memo(({ toggleFilter }: props) => {
 
     return (
         <>
+            <div className={classNames({
+                [s.headerSticky]: true,
+                [s.show]: !isFullHeader
+            })}>
+                <HeaderMenu
+                    toggleFilter={toggleFilter}
+                    toggleCart={toggleCart}
+                    openModalAuthen={openModalAuthen}
+                    openModalInfo={openModalInfo} />
+            </div>
+            
             <header ref={headeFullRef} className={classNames({ [s.header]: true, [s.full]: isFullHeader })}>
                 <HeaderHighLight />
                 <div className={s.menu}>
                     <HeaderMenu
                         toggleFilter={toggleFilter}
                         toggleCart={toggleCart}
-                        isFull={isFullHeader}
                         openModalAuthen={openModalAuthen}
                         openModalInfo={openModalInfo} />
                     <HeaderSubMenu />
                 </div>
             </header>
 
-
-            <div className={classNames({
-                [s.headerSticky]: true,
-                [s.show]: !isFullHeader
-            })}>
-                <HeaderMenu isFull={isFullHeader}
-                    toggleFilter={toggleFilter}
-                    toggleCart={toggleCart}
-                    openModalAuthen={openModalAuthen}
-                    openModalInfo={openModalInfo} />
-            </div>
-
             <HeaderSubMenuMobile />
             <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
             <ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />
diff --git a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
index 77e6aee82..2db143931 100644
--- a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
+++ b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
@@ -7,6 +7,7 @@
         padding-top: 0.8rem;
         padding-bottom: 0.8rem;
         color: var(--white);
+        margin-bottom: 1.6rem;
         .menu {
             @apply flex items-center list-none;
             padding: 0.8rem 0;
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
index 09f4dadbc..0c1282bd3 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
@@ -7,10 +7,6 @@
         @apply flex justify-between items-center;
         padding-top: 0.8rem;
         padding-bottom: 0.8rem;
-        &.full {
-            padding-top: 2.4rem;
-            padding-bottom: 2.4rem;
-        }
     }
     .left {
         .top {
@@ -47,6 +43,19 @@
             }
         }
     }
+    .btnCart {
+        all: unset;
+        cursor: pointer;
+        &:focus-visible {
+            outline: 2px solid #000;
+        }
+        &:hover {
+            svg path {
+                fill: var(--primary);
+                opacity: 0.8;
+            }
+        }
+    }
     .menu {
         @apply hidden;
         @screen md {
@@ -70,19 +79,6 @@
                         }
                     }
                 }
-                .btnCart {
-                    all: unset;
-                    cursor: pointer;
-                    &:focus-visible {
-                        outline: 2px solid #000;
-                    }
-                    &:hover {
-                        svg path {
-                            fill: var(--primary);
-                            opacity: 0.8;
-                        }
-                    }
-                }
             }
         }
         @screen xl {
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
index 8037b357a..40b329ca8 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -1,5 +1,5 @@
-import classNames from 'classnames'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { memo, useMemo } from 'react'
 import InputSearch from 'src/components/common/InputSearch/InputSearch'
 import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
@@ -7,19 +7,17 @@ import { IconBuy, IconFilter, IconHeart, IconHistory, IconUser } from 'src/compo
 import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import Logo from '../../../Logo/Logo'
 import s from './HeaderMenu.module.scss'
-import { useRouter } from 'next/router'
 interface Props {
     children?: any,
-    isFull: boolean,
     openModalAuthen: () => void,
     openModalInfo: () => void,
-    toggleFilter:() => void,
-    toggleCart:() => void,
+    toggleFilter: () => void,
+    toggleCart: () => void,
 }
 
-const FILTER_PAGE = [ROUTE.HOME,ROUTE.PRODUCTS]
+const FILTER_PAGE = [ROUTE.HOME, ROUTE.PRODUCTS]
 
-const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
+const HeaderMenu = memo(({ openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
     const router = useRouter()
     const optionMenu = useMemo(() => [
         {
@@ -30,6 +28,10 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter,
             onClick: openModalInfo,
             name: 'Create User Info (Demo)',
         },
+        {
+            link: ROUTE.NOTIFICATION,
+            name: 'Notifications',
+        },
         {
             link: ROUTE.ACCOUNT,
             name: 'Account',
@@ -41,19 +43,19 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter,
 
     ], [openModalAuthen])
     return (
-        <section className={classNames({ [s.headerMenu]: true, [s.full]: isFull })}>
+        <section className={s.headerMenu}>
             <div className={s.left}>
                 <div className={s.top}>
-                    <Logo/>
+                    <Logo />
                     <div className={s.iconGroup}>
                         {
                             FILTER_PAGE.includes(router.pathname) && (
                                 <button className={s.iconFilter} onClick={toggleFilter}>
-                                    <IconFilter/>
+                                    <IconFilter />
                                 </button>
                             )
                         }
-                        <button className={s.iconCart}>
+                        <button className={`${s.iconCart} ${s.btnCart}`} onClick={toggleCart}>
                             <IconBuy />
                         </button>
                     </div>
@@ -86,16 +88,16 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter,
                         <IconBuy />
                     </button>
                 </li>
-                
+
                 {
-                            FILTER_PAGE.includes(router.pathname) && (
-                                <li className={s.iconFilterDesk}>
-                                    <button className={s.iconFilter} onClick={toggleFilter}>
-                                        <IconFilter/>
-                                    </button>
-                                </li>
-                            )
-                        }
+                    FILTER_PAGE.includes(router.pathname) && (
+                        <li className={s.iconFilterDesk}>
+                            <button className={s.iconFilter} onClick={toggleFilter}>
+                                <IconFilter />
+                            </button>
+                        </li>
+                    )
+                }
             </ul>
         </section>
     )
diff --git a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss
index 3d8016c6b..231ac8300 100644
--- a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss
+++ b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss
@@ -5,6 +5,7 @@
     @screen md {
         @apply block;
         padding-bottom: 2.4rem;
+        margin-top: 1.6rem;
         transform: none;
         height: unset;
         @screen lg {
diff --git a/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.module.scss b/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.module.scss
index 230d9e59e..5acab44b4 100644
--- a/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.module.scss
+++ b/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.module.scss
@@ -4,30 +4,32 @@
     @apply fixed w-full bg-white;
     bottom: 0;
     left: 0;
-    padding: 2rem 1rem;
+    padding: 0 1rem 1rem;
     border-top: 1px solid var(--border-line);
     box-shadow: -5px 6px 10px rgba(0, 0, 0, 0.2);
     z-index: 9999;
     .menu {
-        @apply grid grid-cols-4;
+        @apply grid grid-cols-5;
         li {
             a {
                 @apply transition-all duration-200 no-underline;
-                &:hover {
-                    color: var(--primary);
-                }
+                -webkit-tap-highlight-color: unset;
             }
             .menuItem {
                 @apply flex flex-col justify-center items-center sm-label;
+                padding-top: 1rem;
+                border-top: 2px solid transparent;
                 .icon {
                     position: relative;
                     margin-bottom: 0.5rem;
+                    height: 3rem;
                     svg path {
                         fill: currentColor;
                     }
                 }
                 &.active {
                     @apply text-primary;
+                    border-top: 2px solid var(--primary);
                 }
                 &.dot {
                     .icon {
diff --git a/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.tsx b/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.tsx
index d2cf1bf3e..7537f7b8e 100644
--- a/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.tsx
+++ b/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { memo } from 'react'
-import { IconHeart, IconHome, IconShopping, IconUser } from 'src/components/icons'
+import { IconHeart, IconHome, IconNoti, IconShopping, IconUser } from 'src/components/icons'
 import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import s from './HeaderSubMenuMobile.module.scss'
 
@@ -11,7 +11,6 @@ const OPTION_MENU = [
         link: ROUTE.HOME,
         name: 'Home',
         icon: <IconHome />,
-        isMarked: true,
     },
     {
         link: ROUTE.PRODUCTS,
@@ -25,6 +24,12 @@ const OPTION_MENU = [
         icon: <IconHeart />,
         isMarked: false,
     },
+    {
+        link: ROUTE.NOTIFICATION,
+        name: 'Notifications',
+        icon: <IconNoti />,
+        isMarked: true,
+    },
     {
         link: ROUTE.ACCOUNT,
         name: 'Account',
diff --git a/src/components/common/ImgWithLink/ImgWithLink.tsx b/src/components/common/ImgWithLink/ImgWithLink.tsx
index 62a30fa45..212e45583 100644
--- a/src/components/common/ImgWithLink/ImgWithLink.tsx
+++ b/src/components/common/ImgWithLink/ImgWithLink.tsx
@@ -6,16 +6,17 @@ import { BLUR_DATA_IMG } from 'src/utils/constanst.utils'
 export interface ImgWithLinkProps {
     src: string,
     alt?: string,
+    blurDataURL?: string,
 }
 
-const ImgWithLink = ({ src, alt }: ImgWithLinkProps) => {
+const ImgWithLink = ({ src, alt, blurDataURL = BLUR_DATA_IMG }: ImgWithLinkProps) => {
     return (
         <div className={s.imgWithLink}>
             <Image src={src} alt={alt}
                 layout="fill"
                 className={s.imgWithLink}
                 placeholder="blur"
-                blurDataURL={BLUR_DATA_IMG}
+                blurDataURL={blurDataURL}
             />
         </div>
     )
diff --git a/src/components/common/InputCommon/InputCommon.module.scss b/src/components/common/InputCommon/InputCommon.module.scss
index 6b12d2bbd..5471b2169 100644
--- a/src/components/common/InputCommon/InputCommon.module.scss
+++ b/src/components/common/InputCommon/InputCommon.module.scss
@@ -15,10 +15,11 @@
     .icon + .inputCommon {
       padding-left: 4.8rem;
     }
-    
+
     .inputCommon {
-      @apply block w-full transition-all duration-200 rounded bg-white;
-      padding: 1.2rem 1.6rem;
+      @apply block w-full transition-all duration-200 bg-white;
+      border-radius: .8rem;
+      padding: 1.6rem;
       border: 1px solid var(--border-line);
       &:hover,
       &:focus,
@@ -31,24 +32,6 @@
       &::placeholder {
         @apply text-label;
       }
-
-      &.custom {
-        @apply custom-border-radius;
-        border: 1px solid transparent;
-        background: var(--gray);
-        &:hover,
-        &:focus,
-        &:active {
-          border: 1px solid var(--primary);
-        }
-      }
-      &.bgTransparent {
-        background: rgb(227, 242, 233, 0.3);
-        color: var(--white);
-        &::placeholder {
-          color: var(--white);
-        }
-      }
     }
 
     &.preserve {
@@ -91,4 +74,27 @@
     color: var(--negative);
     margin-top: 0.4rem;
   }
+
+  &.custom {
+    @apply shape-common;
+    .inputCommon {
+      border: none;
+      background: var(--background-gray);
+      &:hover,
+      &:focus,
+      &:active {
+        @apply shadow-md;
+        border: none;
+      }
+    }
+  }
+  &.bgTransparent {
+    .inputCommon {
+      background: rgb(227, 242, 233, 0.3);
+      color: var(--white);
+      &::placeholder {
+        color: var(--white);
+      }
+    }
+  }
 }
diff --git a/src/components/common/InputCommon/InputCommon.tsx b/src/components/common/InputCommon/InputCommon.tsx
index 0389c99b3..7ef9d886f 100644
--- a/src/components/common/InputCommon/InputCommon.tsx
+++ b/src/components/common/InputCommon/InputCommon.tsx
@@ -1,12 +1,12 @@
 import classNames from 'classnames';
-import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { IconCheck, IconError, IconPassword, IconPasswordCross } from 'src/components/icons';
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { IconCheck, IconError } from 'src/components/icons';
 import { KEY } from 'src/utils/constanst.utils';
 import s from './InputCommon.module.scss';
 
 type Ref = {
     focus: () => void
-    getValue: () =>  string | number
+    getValue: () => string | number
 } | null;
 interface Props {
     children?: React.ReactNode,
@@ -63,6 +63,9 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
     return (
         <div className={classNames({
             [s.inputWrap]: true,
+            [s[styleType]]: true,
+            [s.bgTransparent]: backgroundTransparent
+
         })}>
             <div className={classNames({
                 [s.inputInner]: true,
@@ -78,11 +81,7 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
                     placeholder={placeholder}
                     onChange={handleChange}
                     onKeyDown={handleKeyDown}
-                    className={classNames({
-                        [s.inputCommon]: true,
-                        [s[styleType]]: true,
-                        [s.bgTransparent]: backgroundTransparent
-                    })}
+                    className={s.inputCommon}
                 />
             </div>
             {
diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
index ddd8ed901..de7b96d3d 100644
--- a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
+++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
@@ -3,9 +3,14 @@
 .listProductWithInfo {
     background-color: var(--background);
     border-top: 1rem solid var(--gray);
-    border-bottom: 1rem solid var(--gray);
     padding-top: 6rem;
     padding-bottom: 6rem;
+    &.borderBottom {
+        border-bottom: 1rem solid var(--gray);
+        @screen lg {
+            border-bottom: none;
+        }
+    }
     @screen lg {
         @apply flex spacing-horizontal-left;
         padding-top: 5.6rem;
@@ -17,8 +22,11 @@
         @apply spacing-horizontal-left;
         @screen lg {
             max-width: 75%;
-            @apply custom-border-radius-lg bg-white;
-            padding: 4rem .8rem;
+            padding: 0 0.8rem;
+            > div > div {
+                @apply shape-common-lg bg-white;
+                padding: 4rem 0;
+            }
             :global(.customArrow) {
                 @screen lg {
                     &:global(.leftArrow) {
@@ -31,18 +39,8 @@
             }
         }
         @screen xl {
-            padding: 4rem 2.4rem;
+            padding: 0 2.4rem;
             max-width: 80%;
-            :global(.customArrow) {
-                @screen lg {
-                    &:global(.leftArrow) {
-                        left: calc(-6.4rem + 1rem);
-                    }
-                    &:global(.rightArrow) {
-                        right: calc(-6.4rem + 1rem);
-                    }
-                }
-            }
         }
     }
 }
diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
index 66b8253d1..0bbd1df65 100644
--- a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
+++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { TOptionsEvents } from 'keen-slider';
 import React from 'react';
 import CarouselCommon from '../CarouselCommon/CarouselCommon';
@@ -9,6 +10,7 @@ interface Props {
     data: ProductCardProps[],
     title: string,
     subtitle?: string,
+    hasBorderBottomMobile?: boolean,
 }
 const OPTION_DEFAULT: TOptionsEvents = {
     slidesPerView: 2,
@@ -18,20 +20,29 @@ const OPTION_DEFAULT: TOptionsEvents = {
             slidesPerView: 3,
         },
         '(min-width: 768px)': {
-            slidesPerView: 4,
-        },
-        '(min-width: 1024px)': {
             slidesPerView: 3,
         },
+        '(min-width: 1008px)': {
+            slidesPerView: 3.5,
+        },
+        '(min-width: 1024px)': {
+            slidesPerView: 2.5,
+        },
         '(min-width: 1280px)': {
+            slidesPerView: 3.5,
+        },
+        '(min-width: 1440px)': {
             slidesPerView: 4.5,
         },
     },
 }
 
-const ListProductWithInfo = ({ data, title, subtitle }: Props) => {
+const ListProductWithInfo = ({ data, title, subtitle, hasBorderBottomMobile }: Props) => {
     return (
-        <div className={s.listProductWithInfo}>
+        <div className={classNames({
+            [s.listProductWithInfo]: true,
+            [s.borderBottom]: hasBorderBottomMobile,
+        })}>
             <InfoProducts
                 title={title}
                 subtitle={subtitle}
diff --git a/src/components/common/MenuDropdown/MenuDropdown.module.scss b/src/components/common/MenuDropdown/MenuDropdown.module.scss
index 5332794ff..20b54dcaa 100644
--- a/src/components/common/MenuDropdown/MenuDropdown.module.scss
+++ b/src/components/common/MenuDropdown/MenuDropdown.module.scss
@@ -71,7 +71,8 @@
             @apply block shadow-md;
         }
         .menuIner {
-            @apply rounded list-none bg-white;
+            @apply list-none bg-white;
+            border-radius: 0.8rem;
             border: 1px solid var(--text-active);
             margin-top: 0.4rem;
             > li {
diff --git a/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx b/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx
index 85817c930..c3794bf81 100644
--- a/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx
+++ b/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx
@@ -1,9 +1,7 @@
-import classNames from 'classnames';
-import Link from 'next/link';
 import React, { useRef } from 'react';
-import { useModalCommon } from 'src/components/hooks/useModalCommon';
+import { STATE_OPTIONS } from 'src/utils/constanst.utils';
 import { CustomInputCommon } from 'src/utils/type.utils';
-import { Inputcommon } from '..';
+import { Inputcommon, SelectCommon } from '..';
 import ButtonCommon from '../ButtonCommon/ButtonCommon';
 import ModalCommon from '../ModalCommon/ModalCommon';
 import s from './ModalCreateUserInfo.module.scss';
@@ -27,8 +25,7 @@ const ModalCreateUserInfo = ({ demoVisible: visible, demoCloseModal: closeModal
                         <Inputcommon placeholder='Street Address' ref={firstInputRef} />
                         <Inputcommon placeholder='City' />
                         <div className={s.line}>
-                            {/* todo: select, not input */}
-                            <Inputcommon placeholder='State' />
+                            <SelectCommon option={STATE_OPTIONS} type="custom" size="large" placeholder='State'/>
                             <Inputcommon placeholder='Zip code' />
                         </div>
                         <Inputcommon placeholder='Phone (delivery contact)' />
diff --git a/src/components/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss
index cffbe063b..170ac7743 100644
--- a/src/components/common/ProductCard/ProductCard.module.scss
+++ b/src/components/common/ProductCard/ProductCard.module.scss
@@ -1,5 +1,5 @@
-.productCardWarpper{
-    max-width: 20.8rem;
+.productCardWarpper {
+    max-width: 22.4rem;
     min-height: 31.8rem;
     padding: 1.2rem 1.2rem 0 1.2rem;
     margin: auto;
@@ -8,47 +8,53 @@
     &.notSell {
         @apply justify-center;
     }
-    .cardTop{
+    .cardTop {
         @apply relative;
         height: 13.8rem;
         width: 100%;
-        .productImage{
+        .productImage {
             height: 100%;
             width: 100%;
             @apply flex justify-center items-center;
-            img{
+            > div {
+                min-height: 13rem;
+                img {
+                    object-fit: contain;
+                }
+            }
+            img {
                 @apply inline;
             }
-            &:hover{
+            &:hover {
                 cursor: pointer;
             }
         }
-        .productLabel{
+        .productLabel {
             @apply absolute left-0 bottom-0;
         }
     }
-    .cardMid{
+    .cardMid {
         min-height: 10.4rem;
         @apply flex flex-col justify-between;
-        .cardMidTop{
-            .productname{
+        .cardMidTop {
+            .productname {
                 font-weight: bold;
                 color: var(--text-active);
-                &:hover{
+                &:hover {
                     cursor: pointer;
                 }
             }
-            .productWeight{
+            .productWeight {
                 font-size: 1.2rem;
                 line-height: 2rem;
                 letter-spacing: 0.01em;
                 color: var(--text-base);
             }
         }
-        .cardMidBot{
+        .cardMidBot {
             padding-top: 0.8rem;
             @apply flex justify-between items-center border-t border-solid border-line;
-            .productPrice{
+            .productPrice {
                 @apply font-bold;
                 font-size: 2rem;
                 line-height: 2.8rem;
@@ -56,11 +62,27 @@
             }
         }
     }
-    .cardBot{
+    .cardBot {
+        @apply flex justify-between items-center;
         min-height: 4rem;
-        @apply flex justify-between items-center; 
-        .cardIcon{
+        margin-top: 1.6rem;
+        .cardIcon {
             margin-right: 0.8rem;
         }
+        .cardButton {
+            width: 100%;
+            button {
+                width: 100%;
+                > div {
+                    span {
+                        display: -webkit-box;
+                        -webkit-line-clamp: 1;
+                        -webkit-box-orient: vertical;
+                        overflow-y: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+            }
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx
index a6022efa4..af982cbd1 100644
--- a/src/components/common/ProductCard/ProductCard.tsx
+++ b/src/components/common/ProductCard/ProductCard.tsx
@@ -1,7 +1,9 @@
 import Link from 'next/link'
 import React from 'react'
+import { IconBuy } from 'src/components/icons'
 import { ROUTE } from 'src/utils/constanst.utils'
 import { ProductProps } from 'src/utils/types.utils'
+import { ImgWithLink } from '..'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
 import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
 import ItemWishList from '../ItemWishList/ItemWishList'
@@ -11,6 +13,7 @@ import ProductNotSell from './ProductNotSell/ProductNotSell'
 
 export interface ProductCardProps extends ProductProps {
   buttonText?: string
+  isSingleButton?: boolean,
 }
 
 const ProductCard = ({
@@ -21,6 +24,7 @@ const ProductCard = ({
   buttonText = 'Buy Now',
   imageSrc,
   isNotSell,
+  isSingleButton,
 }: ProductCardProps) => {
   if (isNotSell) {
     return <div className={`${s.productCardWarpper} ${s.notSell}`}>
@@ -34,7 +38,7 @@ const ProductCard = ({
       <div className={s.cardTop}>
         <Link href={`${ROUTE.PRODUCT_DETAIL}/test`}>
           <div className={s.productImage}>
-            <img src={imageSrc} alt="image" />
+            <ImgWithLink src={imageSrc} alt={name}/>
           </div>
         </Link>
         <div className={s.productLabel}>
@@ -56,12 +60,22 @@ const ProductCard = ({
         </div>
       </div>
       <div className={s.cardBot}>
-        <div className={s.cardIcon}>
-          <ButtonIconBuy />
-        </div>
-        <div className={s.cardButton}>
-          <ButtonCommon type="light">{buttonText}</ButtonCommon>
-        </div>
+        {
+          isSingleButton ?
+            <div className={s.cardButton}>
+              <ButtonCommon type="light" icon={<IconBuy />}>Add to cart</ButtonCommon>
+            </div>
+            :
+            <>
+              <div className={s.cardIcon}>
+                <ButtonIconBuy />
+              </div>
+              <div className={s.cardButton}>
+                <ButtonCommon type="light">{buttonText}</ButtonCommon>
+              </div>
+            </>
+        }
+
       </div>
     </div>
   )
diff --git a/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss
index 4945220a9..963a602ec 100644
--- a/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss
+++ b/src/components/common/ProductCard/ProductNotSell/ProductNotSell.module.scss
@@ -1,8 +1,12 @@
 @import "../../../../styles/utilities";
 
 .imgWrap {
-    img {
-        opacity: 0.5;
+    > div {
+        min-height: 13rem;
+        img {
+            opacity: 0.5;
+            object-fit: contain
+        }
     }
 }
 
@@ -11,7 +15,7 @@
 }
 
 .info {
-    @apply flex justify-center items-center custom-border-radius bg-info-light text-center;
+    @apply flex justify-center items-center shape-common bg-info-light text-center;
     padding: .8rem 1.6rem;
     margin-top: 1.6rem;
     color: var(--info);
diff --git a/src/components/common/ProductCarousel/ProductCarousel.tsx b/src/components/common/ProductCarousel/ProductCarousel.tsx
index 533e81ed3..8252e08a6 100644
--- a/src/components/common/ProductCarousel/ProductCarousel.tsx
+++ b/src/components/common/ProductCarousel/ProductCarousel.tsx
@@ -7,9 +7,9 @@ import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'
 import s from "./ProductCarousel.module.scss"
 
 interface ProductCarouselProps
-  extends Omit<CarouselCommonProps<ProductCardProps>, 'Component'|"option"> {
-		option?:TOptionsEvents
-	}
+  extends Omit<CarouselCommonProps<ProductCardProps>, 'Component' | "option"> {
+  option?: TOptionsEvents
+}
 
 const OPTION_DEFAULT: TOptionsEvents = {
   slidesPerView: 2,
@@ -19,11 +19,15 @@ const OPTION_DEFAULT: TOptionsEvents = {
       slidesPerView: 3,
     },
     '(min-width: 768px)': {
-      slidesPerView: 4,
+      slidesPerView: 3,
     },
-    '(min-width: 1024px)': {
+    '(min-width: 1008px)': {
+      slidesPerView: 3.5,
+    },
+    '(min-width: 1280px)': {
       slidesPerView: 4.5,
-    },'(min-width: 1280px)': {
+    },
+    '(min-width: 1440px)': {
       slidesPerView: 5.5,
     },
   },
diff --git a/src/components/common/RecipeCard/RecipeCard.tsx b/src/components/common/RecipeCard/RecipeCard.tsx
index 92ab879e9..014708935 100644
--- a/src/components/common/RecipeCard/RecipeCard.tsx
+++ b/src/components/common/RecipeCard/RecipeCard.tsx
@@ -1,19 +1,24 @@
 import Link from 'next/link'
 import React from 'react'
+import { ROUTE } from 'src/utils/constanst.utils'
 import { RecipeProps } from 'src/utils/types.utils'
 import s from './RecipeCard.module.scss'
-export interface RecipeCardProps extends RecipeProps {}
+export interface RecipeCardProps extends RecipeProps { }
 
-const RecipeCard = ({ imageSrc, title, description }: RecipeCardProps) => {
+const RecipeCard = ({ imageSrc, title, description, slug }: RecipeCardProps) => {
   return (
     <div className={s.recipeCardWarpper}>
-      <Link href="#">
-        <div className={s.image}>
-          <img src={imageSrc} alt="image recipe" />
-        </div>
+      <Link href={`${ROUTE.RECIPE_DETAIL}/${slug}`}>
+        <a>
+          <div className={s.image}>
+            <img src={imageSrc} alt="image recipe" />
+          </div>
+        </a>
       </Link>
-      <Link href="#">
-        <div className={s.title}>{title}</div>
+      <Link href={`${ROUTE.RECIPE_DETAIL}/${slug}`}>
+        <a>
+          <div className={s.title}>{title}</div>
+        </a>
       </Link>
       <div className={s.description}>{description}</div>
     </div>
diff --git a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss
index 86b525083..94647504d 100644
--- a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss
+++ b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss
@@ -2,13 +2,16 @@
 
 .recipeDetailInfo {
     @apply spacing-horizontal;
-    margin: 5.6rem auto;
+    margin: 0 auto 5.6rem;
     @screen md {
         @apply flex;
+        margin: 5.6rem auto;
     }
+
     .img {
-        width: fit-content;
+        width: 100%;
         margin-top: 0;
+        min-height: 50rem;
 
         @screen sm-only {
             margin-bottom: 2rem;
@@ -16,13 +19,16 @@
         @screen lg {
             max-width: 60rem;
         }
-        img {
-            @apply w-full;
-            object-fit: contain;
-            max-height: 64rem;
-            border-radius: 2.4rem;
-            @screen md {
-                max-height: 90rem;
+        > div {
+            min-height: 64rem;
+            img {
+                // object-fit: contain;
+            //     @apply w-full;
+                min-height: 64rem;
+                border-radius: 2.4rem;
+            //     @screen md {
+            //         max-height: 90rem;
+            //     }
             }
         }
     }
@@ -55,6 +61,9 @@
                     list-style: disc;
                     margin-left: 2rem;
                 }
+                a {
+                    color: var(--info);
+                }
             }
         }
     }
diff --git a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx
index 4d212e10a..a853ad869 100644
--- a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx
+++ b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { ImgWithLink } from 'src/components/common'
 import RecipeBriefInfo from '../RecipeBriefInfo/RecipeBriefInfo'
 import s from './RecipeDetailInfo.module.scss'
 
@@ -12,7 +13,7 @@ const RecipeDetailInfo = ({ }: Props) => {
     return (
         <section className={s.recipeDetailInfo}>
             <div className={s.img}>
-                <img src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="Recipe" />
+                <ImgWithLink src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="Recipe" />
             </div>
             <div className={s.recipeInfo}>
                 <div className={s.top}>
diff --git a/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss b/src/components/common/RecommendedRecipes/RecommendedRecipes.module.scss
similarity index 94%
rename from src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss
rename to src/components/common/RecommendedRecipes/RecommendedRecipes.module.scss
index d43e2d58c..b96b7d4e7 100644
--- a/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.module.scss
+++ b/src/components/common/RecommendedRecipes/RecommendedRecipes.module.scss
@@ -1,4 +1,4 @@
-@import "../../../../styles/utilities";
+@import "../../../styles/utilities";
 
 .recommendedRecipes {
     margin: 6rem auto;
diff --git a/src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx b/src/components/common/RecommendedRecipes/RecommendedRecipes.tsx
similarity index 100%
rename from src/components/modules/product-detail/RecommendedRecipes/RecommendedRecipes.tsx
rename to src/components/common/RecommendedRecipes/RecommendedRecipes.tsx
diff --git a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
index 1d71a6ca1..ab21590c3 100644
--- a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
+++ b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
@@ -1,6 +1,3 @@
-import image15 from '../../../../public/assets/images/image15.png'
-import image16 from '../../../../public/assets/images/image16.png'
-import image17 from '../../../../public/assets/images/image17.png'
 import classNames from 'classnames'
 import React from 'react'
 import {  HeadingCommon, ViewAllItem } from 'src/components/common'
@@ -22,32 +19,32 @@ const recipe:BlogCardProps[] = [
     title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
     slug: 'have-a-nice-lunch',
     description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
-    imageSrc: image15.src,
+    imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
 },{
     title: "9 Ways to Make an Aloe Vera Mask at Home",
     slug: 'have-a-nice-lunch',
     description:"Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
-    imageSrc: image16.src,
+    imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
 },{
     title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
     slug: 'have-a-nice-lunch',
     description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
-    imageSrc: image17.src,
+    imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
 },{
     title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
     slug: 'have-a-nice-lunch',
     description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
-    imageSrc: image15.src,
+    imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
 },{
     title: "9 Ways to Make an Aloe Vera Mask at Home",
     slug: 'have-a-nice-lunch',
     description:"Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
-    imageSrc: image16.src,
+    imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
 },{
     title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
     slug: 'have-a-nice-lunch',
     description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
-    imageSrc: image17.src,
+    imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
 }]
 
   const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => {
diff --git a/src/components/common/ScrollToTop/ScrollToTop.tsx b/src/components/common/ScrollToTop/ScrollToTop.tsx
index d148c8937..eef74cb24 100644
--- a/src/components/common/ScrollToTop/ScrollToTop.tsx
+++ b/src/components/common/ScrollToTop/ScrollToTop.tsx
@@ -34,7 +34,7 @@ const ScrollToTop = ({ visibilityHeight=450 }: ScrollToTopProps) => {
 
     useEffect(() => {
         addEventScroll();
-    });    
+    }, []);    
 
     return (
         <div className={classNames(s.scrollToTop, {
diff --git a/src/components/common/SelectCommon/SelectCommon.module.scss b/src/components/common/SelectCommon/SelectCommon.module.scss
index 4809a46bb..82ce46f5b 100644
--- a/src/components/common/SelectCommon/SelectCommon.module.scss
+++ b/src/components/common/SelectCommon/SelectCommon.module.scss
@@ -28,7 +28,7 @@
     }
     &.custom {
         .selectTrigger {
-            @apply border-2;
+            border-width: 1px;
             border-color: var(--border-line);
             color: var(--text-label);
         }
@@ -68,7 +68,7 @@
             @apply border-solid border border-current;
         }
         &.custom {
-            @apply border-2;
+            border-width: 1px;
             border-color: var(--border-line);
             color: var(--text-label);
         }
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 7de333d3a..868d49e29 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -46,3 +46,4 @@ export { default as TabCommon} from './TabCommon/TabCommon'
 export { default as StaticImage} from './StaticImage/StaticImage'
 export { default as EmptyCommon} from './EmptyCommon/EmptyCommon'
 export { default as CustomShapeSvg} from './CustomShapeSvg/CustomShapeSvg'
+export { default as RecommendedRecipes} from './RecommendedRecipes/RecommendedRecipes'
diff --git a/src/components/icons/IconNoti.tsx b/src/components/icons/IconNoti.tsx
new file mode 100644
index 000000000..ab166fecc
--- /dev/null
+++ b/src/components/icons/IconNoti.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconNoti = () => {
+    return (
+        <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M17.0003 13.3763V9.66634C16.9986 8.01332 16.412 6.41422 15.3444 5.15224C14.2767 3.89027 12.7969 3.04684 11.167 2.77134V1.49967C11.167 1.19026 11.0441 0.893509 10.8253 0.674717C10.6065 0.455924 10.3097 0.333008 10.0003 0.333008C9.6909 0.333008 9.39416 0.455924 9.17537 0.674717C8.95657 0.893509 8.83366 1.19026 8.83366 1.49967V2.77134C7.20375 3.04684 5.72394 3.89027 4.65627 5.15224C3.58861 6.41422 3.002 8.01332 3.00033 9.66634V13.3763C2.31952 13.617 1.72982 14.0624 1.31209 14.6514C0.89435 15.2404 0.669022 15.9442 0.666992 16.6663V18.9997C0.666992 19.3091 0.789909 19.6058 1.0087 19.8246C1.22749 20.0434 1.52424 20.1663 1.83366 20.1663H5.49699C5.76566 21.1549 6.35216 22.0277 7.16602 22.6499C7.97988 23.2721 8.97587 23.6092 10.0003 23.6092C11.0248 23.6092 12.0208 23.2721 12.8346 22.6499C13.6485 22.0277 14.235 21.1549 14.5037 20.1663H18.167C18.4764 20.1663 18.7732 20.0434 18.9919 19.8246C19.2107 19.6058 19.3337 19.3091 19.3337 18.9997V16.6663C19.3316 15.9442 19.1063 15.2404 18.6886 14.6514C18.2708 14.0624 17.6811 13.617 17.0003 13.3763ZM5.33366 9.66634C5.33366 8.42866 5.82532 7.24168 6.70049 6.36651C7.57566 5.49134 8.76265 4.99967 10.0003 4.99967C11.238 4.99967 12.425 5.49134 13.3002 6.36651C14.1753 7.24168 14.667 8.42866 14.667 9.66634V13.1663H5.33366V9.66634ZM10.0003 21.333C9.59313 21.3305 9.19366 21.2216 8.84163 21.0169C8.48959 20.8122 8.19725 20.519 7.99366 20.1663H12.007C11.8034 20.519 11.5111 20.8122 11.159 21.0169C10.807 21.2216 10.4075 21.3305 10.0003 21.333ZM17.0003 17.833H3.00033V16.6663C3.00033 16.3569 3.12324 16.0602 3.34203 15.8414C3.56083 15.6226 3.85757 15.4997 4.16699 15.4997H15.8337C16.1431 15.4997 16.4398 15.6226 16.6586 15.8414C16.8774 16.0602 17.0003 16.3569 17.0003 16.6663V17.833Z" fill="#5B9A74" />
+        </svg>
+    )
+}
+
+export default IconNoti
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 184e107e1..586ff3cb7 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -33,5 +33,9 @@ export { default as IconMinus } from './IconMinus'
 export { default as IconCirclePlus } from './IconCirclePlus'
 export { default as IconDoneCheckout } from './IconDoneCheckout'
 export { default as IconFilter } from './IconFilter'
+<<<<<<< HEAD
 export { default as IconBell } from './IconBell'
-export { default as IconBill } from './IconBill'
\ No newline at end of file
+export { default as IconBill } from './IconBill'
+=======
+export { default as IconNoti } from './IconNoti'
+>>>>>>> 83b5f9048687e555a978ae71e26a1d19aac2247c
diff --git a/src/components/modules/blog-detail/BlogContent/BlogContent.module.scss b/src/components/modules/blog-detail/BlogContent/BlogContent.module.scss
index e081b5f15..7904c99aa 100644
--- a/src/components/modules/blog-detail/BlogContent/BlogContent.module.scss
+++ b/src/components/modules/blog-detail/BlogContent/BlogContent.module.scss
@@ -31,12 +31,13 @@
         padding: 2rem 0;
     }
     .content{
-        
-
-       
-        img{
-            width: 100%;
-            border-radius: 2.4rem;
+        figure{
+            div{
+                width: 100%;
+                border-radius: 2.4rem;
+                min-height: 45.2rem;
+                object-fit: cover;
+            }
         }
     }
     .boxShare{
diff --git a/src/components/modules/blog-detail/BlogContent/BlogContent.tsx b/src/components/modules/blog-detail/BlogContent/BlogContent.tsx
index 17d8555ae..cb9d6b8d8 100644
--- a/src/components/modules/blog-detail/BlogContent/BlogContent.tsx
+++ b/src/components/modules/blog-detail/BlogContent/BlogContent.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Author, DateTime } from "src/components/common";
+import { Author, DateTime, ImgWithLink } from "src/components/common";
 import IconFacebook from 'src/components/icons/IconFacebook';
 import IconInstagram from 'src/components/icons/IconInstagram';
 import IconTwitter from 'src/components/icons/IconTwitter';
@@ -55,7 +55,10 @@ const BlogContent = ({}:BlogContentProps) => {
                     You can eat broccoli stems. In fact, they are delicious. Just use a peeler to peel off the outsides and then trim the stalks into small 1/4”-1/2” cubes.
                     </p>
                     <br/>
-                    <img  src="https://cdn.pastaxi-manager.onepas.vn/content/uploads/articles/An-%C4%91%E1%BA%B7c%20s%E1%BA%A3n%20v%C3%B9ng%20mi%E1%BB%81n/An-2-21%20%C4%91%E1%BA%B7c%20s%E1%BA%A3n%20SG%20ngon%20n%E1%BB%95i%20ti%E1%BA%BFng/tong-hop-21-dac-san-sai-gon-ngon-noi-tieng-khong-an-that-co-loi-2.jpg" alt="blog-detail" />
+
+                    <figure>
+                        <ImgWithLink src="https://user-images.githubusercontent.com/89437339/133046625-bdf9cc0d-6f22-43e5-a49d-d4d34df19cf2.jpg"  alt="blog-detail" />
+                    </figure>
                   
                 </section>
                   
diff --git a/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss b/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss
index 98206b439..aad3aebbf 100644
--- a/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss
+++ b/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss
@@ -3,10 +3,14 @@
     padding-bottom: 3.2rem;
 }
 .image{
-    width: 100%;
-    padding: 0 2rem;
-    margin-bottom: 2rem;
-    border-radius: 2.4rem;
+    div{
+        width: 100%;
+        padding: 0 2rem;
+        margin-bottom: 2rem;
+        border-radius: 2.4rem;
+        min-height: 45.2rem;
+    }
+   
     @screen md {
         width: 90%;
         margin:0 auto;
diff --git a/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.tsx b/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.tsx
index b7eb6aaef..ed9b88a29 100644
--- a/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.tsx
+++ b/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.tsx
@@ -1,5 +1,6 @@
 
 import React from 'react';
+import { ImgWithLink } from 'src/components/common';
 import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
 import s from './BlogDetailImg.module.scss';
 interface Props {
@@ -19,7 +20,9 @@ const BlogDetailImg = ({}:Props ) => {
             <div className={s.beadcrumb}>
                 <BreadcrumbCommon crumbs={CRUMBS} />
             </div>
-             <img className={s.image} src="https://i.pinimg.com/564x/3d/42/94/3d429429428377070c4f91844a8d8755.jpg" alt="Ảnh đại diện" />
+            <div className={s.image}>
+                <ImgWithLink src="https://user-images.githubusercontent.com/89437339/133044532-8b5f9442-841b-4187-84b4-d6cc66676b52.png" alt="Ảnh đại diện"/>
+            </div>
         </>
     )
 }
diff --git a/src/components/modules/blog-detail/BlogDetailImg/img/tong-hop-21-dac-san-sai-gon-ngon-noi-tieng-khong-an-that-co-loi-2.jpg b/src/components/modules/blog-detail/BlogDetailImg/img/tong-hop-21-dac-san-sai-gon-ngon-noi-tieng-khong-an-that-co-loi-2.jpg
new file mode 100644
index 000000000..ca84eae92
Binary files /dev/null and b/src/components/modules/blog-detail/BlogDetailImg/img/tong-hop-21-dac-san-sai-gon-ngon-noi-tieng-khong-an-that-co-loi-2.jpg differ
diff --git a/src/components/modules/blogs/BlogsList/BlogsList.tsx b/src/components/modules/blogs/BlogsList/BlogsList.tsx
index 536aa4afd..9b7ddc1e0 100644
--- a/src/components/modules/blogs/BlogsList/BlogsList.tsx
+++ b/src/components/modules/blogs/BlogsList/BlogsList.tsx
@@ -3,12 +3,6 @@ import CardBlog, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog
 import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
 import s from "./BlogsList.module.scss"
 import { DEFAULT_BLOG_PAGE_SIZE } from 'src/utils/constanst.utils'
-import image15 from '../../../../../public/assets/images/image15.png'
-import image16 from '../../../../../public/assets/images/image16.png'
-import image17 from '../../../../../public/assets/images/image17.png'
-import image21 from '../../../../../public/assets/images/image21.png'
-import image22 from '../../../../../public/assets/images/image22.png'
-import image23 from '../../../../../public/assets/images/image23.png'
 
 interface BlogsListProps {
     data?: BlogCardProps[],
@@ -16,109 +10,109 @@ interface BlogsListProps {
 
 const BLOGSLIST_DATA = [
     {
-      imageSrc: image15.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
       title: "1",
       description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image16.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
       title: "2",
       description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image17.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
       title: "3",
       description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image21.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186410-d8718d90-82fb-46cb-a0f2-0ec96356ae89.png",
       title: "4",
       description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image22.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186474-b2d89bbc-32ed-4174-a05e-3d388c0a39ff.png",
       title: "5",
       description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image23.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186545-d860f4ee-222c-4d72-a876-808af0f397a0.png",
       title: "6",
       description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image15.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
       title: "7",
       description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image16.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
       title: "8",
       description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image17.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
       title: "9",
       description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image23.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186545-d860f4ee-222c-4d72-a876-808af0f397a0.png",
       title: "10",
       description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image21.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186410-d8718d90-82fb-46cb-a0f2-0ec96356ae89.png",
       title: "11",
       description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image22.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186474-b2d89bbc-32ed-4174-a05e-3d388c0a39ff.png",
       title: "12",
       description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image15.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
       title: "13",
       description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image16.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
       title: "14",
       description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image17.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
       title: "15",
       description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image21.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186410-d8718d90-82fb-46cb-a0f2-0ec96356ae89.png",
       title: "16",
       description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image23.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186545-d860f4ee-222c-4d72-a876-808af0f397a0.png",
       title: "17",
       description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
       slug: "happy-diet"
     },
     {
-      imageSrc: image22.src,
+      imageSrc: "https://user-images.githubusercontent.com/46085455/133186474-b2d89bbc-32ed-4174-a05e-3d388c0a39ff.png",
       title: "18",
       description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
       slug: "happy-diet"
diff --git a/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss
index 6fb16450c..f8e2ff3e8 100644
--- a/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss
+++ b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss
@@ -11,13 +11,15 @@
     }
 }
 .left {
-    max-width: 59.8rem;
-    img {
-        border-radius: 2.4rem;
+    > div{
+        min-width: 59.8rem;
+        min-height: 33.6rem;
+        img {
+            border-radius: 2.4rem;
+        }
     }
 }
 .right {
-    flex-shrink: 3;
     @screen lg {
         margin-left: 6.4rem;
     }
diff --git a/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx
index 2bd158d79..ec90633d8 100644
--- a/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx
+++ b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx
@@ -1,14 +1,11 @@
 import s from './FeaturedCardBlog.module.scss'
-import { Author, DateTime } from 'src/components/common'
-import Image from "next/image";
-import image20 from '../../../../../public/assets/images/image20.png'
-import author from '../../../../../public/assets/images/author.png'
+import { Author, DateTime, ImgWithLink } from 'src/components/common'
 
 interface FeaturedCardBlogProps{
     title?: string,
     content?: string,
-    imgSrc?: any,
-    imgAuthor?: any,
+    imgSrc?: string,
+    imgAuthor?: string,
     date?: string,
     authorName?: string,
 }
@@ -16,8 +13,8 @@ interface FeaturedCardBlogProps{
 const FEATURED_DATA = {
     title: "Flammekueche with green asparagus",
     content: "Traditionally, the Flammekueche is made with rapeseed oil, which, contrary to popular belief, is indeed an oil that can be cooked hot and is not limited to seasoning. It is important to vary the oils in the kitchen to take advantage of the benefits of each. Rapeseed oil is an oil rich in omega 3 which participate in the proper functioning of the cardiovascular system as well as in vitamins E which contributes to the protection of cells against oxidative stress. In short, oils are your friends 😉",
-    imgSrc: image20,
-    imgAuthor: author.src,
+    imgSrc: "https://user-images.githubusercontent.com/46085455/133186666-1ea8081f-4319-4617-8644-d20ed14b1825.png",
+    imgAuthor: "https://user-images.githubusercontent.com/46085455/133186783-d0c71d43-b7bc-44b6-b560-818c71bd162f.png",
     date: "APRIL 30, 2021",
     author: "Alessandro Del Piero"
 }
@@ -34,7 +31,7 @@ const FeaturedCardBlog = ({
         <section className={s.featuredCard}>
             <div className={s.featuredCardWrapper}>
                 <div className={s.left}>
-                    <Image src={imgSrc} alt="image feature card"/>
+                    <ImgWithLink src={imgSrc} alt="image feature card"/>
                 </div>
                 <div className={s.right}>
                     <div className={s.titleWrapper}>
diff --git a/src/components/modules/home/HomeBanner/HomeBanner.module.scss b/src/components/modules/home/HomeBanner/HomeBanner.module.scss
index fdba411c0..bb65a2549 100644
--- a/src/components/modules/home/HomeBanner/HomeBanner.module.scss
+++ b/src/components/modules/home/HomeBanner/HomeBanner.module.scss
@@ -11,14 +11,14 @@
     @apply grid;
     grid-template-columns: 1fr 1.8fr;
     .left {
-      @apply relative flex items-end justify-center custom-border-radius-lg;
+      @apply relative flex items-end justify-center shape-common-lg;
       margin-right: 1.6rem;
       .imgWrap {
         @apply absolute w-full h-full;
         top: 0;
         left: 0;
         > div {
-          @apply w-full h-full custom-border-radius-lg;
+          @apply w-full h-full shape-common-lg;
         }
         img {
           object-fit: cover;
@@ -31,11 +31,15 @@
         width: min-content;
 
         color: var(--white);
-        font-size: 8.8rem;
+        font-size: 7rem;
         line-height: 8rem;
         letter-spacing: -0.03em;
         font-weight: bold;
         text-transform: uppercase;
+
+        @screen 2xl {
+          line-height: 8rem;
+        }
         &::after {
           @apply absolute;
           content: "";
diff --git a/src/components/modules/home/HomeBanner/HomeBanner.tsx b/src/components/modules/home/HomeBanner/HomeBanner.tsx
index 18432ec82..ebb9af6bf 100644
--- a/src/components/modules/home/HomeBanner/HomeBanner.tsx
+++ b/src/components/modules/home/HomeBanner/HomeBanner.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Banner } from 'src/components/common'
+import { Banner, StaticImage } from 'src/components/common'
+import { ROUTE } from 'src/utils/constanst.utils'
 import BannerImgRight from './assets/banner_full.png'
 import HomeBannerImg from './assets/home_banner.png'
 import s from './HomeBanner.module.scss'
-import Image from 'next/image'
 
 interface Props {
     className?: string
@@ -15,7 +15,7 @@ const HomeBanner = ({ }: Props) => {
         <div className={s.homeBanner}>
             <section className={s.left}>
                 <div className={s.imgWrap}>
-                    <Image src={HomeBannerImg} placeholder='blur' />
+                    <StaticImage src={HomeBannerImg} />
                 </div>
                 <div className={s.text}>
                     Freshness<br />guaranteed
@@ -28,12 +28,14 @@ const HomeBanner = ({ }: Props) => {
                         subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
                         imgLink: BannerImgRight.src,
                         size: "small",
+                        linkButton: ROUTE.PRODUCTS,
                     },
                     {
                         title: "Save 15% on your first order 2",
                         subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
                         imgLink: BannerImgRight.src,
                         size: "small",
+                        linkButton: ROUTE.PRODUCTS,
                     }
                     ]
                 }
diff --git a/src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.module.scss b/src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.module.scss
index 41d593b6e..ae2b758e1 100644
--- a/src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.module.scss
+++ b/src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.module.scss
@@ -2,7 +2,7 @@
 
 .categoryItem {
     .categoryItemImage {
-        @apply transition-all duration-200;
+        @apply flex justify-center items-center transition-all duration-200;
         width: 10.6rem;
         margin: 0 auto;
         max-height: 14rem;
diff --git a/src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.tsx b/src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.tsx
index 64046c1b3..1f94e176e 100644
--- a/src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.tsx
+++ b/src/components/modules/home/HomeCategories/CategoriesItem/CategoryItem.tsx
@@ -4,6 +4,7 @@ import s from './CategoryItem.module.scss'
 import classNames from 'classnames';
 import Image from "next/image";
 import Link from 'next/link';
+import { StaticImage } from 'src/components/common';
 
 interface CategoryItem {
     image: StaticImageData,
@@ -17,7 +18,7 @@ const CategoryItem = ({ image, name, link }: CategoryItem) => {
             <div className={classNames(s.categoryItemImage)}>
                 <Link href={link}>
                     <a>
-                        <Image src={image} />
+                        <StaticImage src={image} />
                     </a>
                 </Link>
             </div>
diff --git a/src/components/modules/home/HomeCategories/HomeCategories.module.scss b/src/components/modules/home/HomeCategories/HomeCategories.module.scss
index 9865b95ed..f4135bd3c 100644
--- a/src/components/modules/home/HomeCategories/HomeCategories.module.scss
+++ b/src/components/modules/home/HomeCategories/HomeCategories.module.scss
@@ -4,7 +4,7 @@
     margin: 3rem auto;
 
     .inner {
-        @apply relative spacing-horizontal;
+        @apply relative spacing-horizontal w-full;
 
         padding-top: 1.6rem;
         padding-bottom: 1.6rem;
@@ -15,7 +15,7 @@
     }
     @screen md {
         @apply relative;
-        margin: 5.6rem auto;
+        margin: 12.8rem auto;
 
         &::before,
         &::after {
diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.module.scss
new file mode 100644
index 000000000..5ce5cc0ce
--- /dev/null
+++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.module.scss
@@ -0,0 +1,8 @@
+.productImgItem {
+    @apply w-full h-full;
+    min-height: 30rem;
+    img {
+        object-fit: contain;
+    }
+}
+
diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx
new file mode 100644
index 000000000..95236266c
--- /dev/null
+++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { ImgWithLink } from 'src/components/common'
+import s from './ProductImgItem.module.scss'
+
+export interface ProductImgItemProps {
+    src: string
+    alt?: string
+}
+
+
+const ProductImgItem = ({ src, alt }: ProductImgItemProps) => {
+    return (
+        <section className={s.productImgItem}>
+            <ImgWithLink src={src} alt={alt} />
+        </section >
+    )
+}
+
+export default ProductImgItem
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
index a10eb5865..94ce13cc1 100644
--- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss
+++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss
@@ -6,4 +6,7 @@
     @screen lg {
         max-width: 60rem;
     }
+    > div {
+        width: 100%;
+    }
 }
diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
index 325c6b453..c300fba38 100644
--- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
+++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { CarouselCommon, ImgWithLink } from 'src/components/common'
-import { ImgWithLinkProps } from 'src/components/common/ImgWithLink/ImgWithLink'
+import { CarouselCommon } from 'src/components/common'
+import ProductImgItem, { ProductImgItemProps } from '../ProductImgItem/ProductImgItem'
 import s from './ProductImgs.module.scss'
 
 interface Props {
@@ -9,6 +9,10 @@ interface Props {
 }
 
 const DATA = [
+    {
+        src: 'https://user-images.githubusercontent.com/76729908/133026929-199799fc-bd75-4445-a24d-15c0e41796eb.png',
+        alt: 'Meat',
+    },
     {
         src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
         alt: 'Broccoli',
@@ -26,10 +30,10 @@ const option = {
 const ProductImgs = ({ }: Props) => {
     return (
         <section className={s.productImgs}>
-            <CarouselCommon<ImgWithLinkProps>
+            <CarouselCommon<ProductImgItemProps>
                 data={DATA}
                 itemKey="product-detail-img"
-                Component={ImgWithLink}
+                Component={ProductImgItem}
                 option={option}
                 isDot={true}
             />
@@ -38,3 +42,4 @@ const ProductImgs = ({ }: Props) => {
 }
 
 export default ProductImgs
+
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
index 403782c51..4235edf66 100644
--- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss
+++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss
@@ -64,6 +64,12 @@
                     margin-left: 0.8rem;
                 }
             }
+            svg {
+                height: 2rem;
+                path {
+                    fill: currentColor;
+                }
+            }
         }
         button {
             @apply w-full;
diff --git a/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx b/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx
index 820af402f..87e600416 100644
--- a/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx
+++ b/src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx
@@ -8,6 +8,7 @@ const ViewedProducts = () => {
             title="viewed Products"
             subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
             data={PRODUCT_DATA_TEST}
+            hasBorderBottomMobile={true}
         />
     );
 };
diff --git a/src/components/modules/product-detail/index.ts b/src/components/modules/product-detail/index.ts
index ef4461432..07fd04753 100644
--- a/src/components/modules/product-detail/index.ts
+++ b/src/components/modules/product-detail/index.ts
@@ -1,4 +1,3 @@
 export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail'
 export { default as ViewedProducts } from './ViewedProducts/ViewedProducts'
 export { default as ReleventProducts } from './ReleventProducts/ReleventProducts'
-export { default as RecommendedRecipes } from './RecommendedRecipes/RecommendedRecipes'
diff --git a/src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx b/src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx
index 17d48d637..edeaa9f35 100644
--- a/src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx
+++ b/src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx
@@ -16,7 +16,7 @@ const ProductListBanner = ({ }: Props) => {
                         subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
                         imgLink: BannerRight.src,
                         size: "large",
-                    },
+                    }
                     ]
                 }
             />
diff --git a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss
index 2f70eb3ca..dac6dbbc9 100644
--- a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss
+++ b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss
@@ -11,11 +11,12 @@
     .recipesItemImage {
         @apply transition-all duration-200;
         width: 31%;
-        img {
-            @apply block object-cover;
-            width: 100%;
-            min-height: 12.5rem;
-            border-radius: 1.5rem;
+        a{
+            div{
+                @apply object-cover;
+                min-height: 19.6rem;
+                border-radius: 1.5rem;
+            }
         }
 
         @screen md {
diff --git a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx
index f43227d5a..01918c86e 100644
--- a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx
+++ b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import React from 'react';
+import { ImgWithLink } from 'src/components/common';
 import s from './RecipesItem.module.scss';
 interface RecipesItem {
     image:string,
@@ -14,7 +15,7 @@ const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
             <div className={s.recipesItemImage}>
                 <Link href={link}>
                     <a>
-                        <img src={image} />
+                        <ImgWithLink src={image} alt="author" />
                     </a>
                 </Link>
             </div>
diff --git a/src/styles/_pages.scss b/src/styles/_pages.scss
new file mode 100644
index 000000000..0855aaada
--- /dev/null
+++ b/src/styles/_pages.scss
@@ -0,0 +1,6 @@
+.page-recipe-detail {
+    margin-bottom: 5.4rem;
+    @screen lg {
+        margin-bottom: 12.8rem;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index c73526a27..5ce5f24af 100644
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -121,12 +121,13 @@
 
     .shape-common-border {
         position: relative;
-        $border: 2px;
+        $border: 1px;
         margin: $border;
 
         .inner {
             background: var(--white);
             clip-path: url(#svg-custom-shape);
+            margin: 1px;
         }
         &::before {
             position: absolute;
@@ -152,6 +153,7 @@
 
         .inner {
             padding: 2rem;
+            margin: 1px;
             clip-path: url(#svg-custom-shape-lg);
         }
         &::before {
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 2e4abf3da..51391b33f 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -5,3 +5,5 @@
 
 @import "~tailwindcss/utilities";
 @import './utilities';
+
+@import './pages'
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index 3757feb1e..90ac2a175 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -9,19 +9,26 @@ export const SOCIAL_LINKS = {
 
 export const ROUTE = {
     HOME: '/',
+    ABOUT: '/about',
+    ACCOUNT: '/account',
+
     PRODUCTS: '/products',
     PRODUCT_DETAIL: '/product',
-    ABOUT: '/about',
+    
+    BLOGS: '/blogs',
     BLOG_DETAIL: '/blog',
-    ACCOUNT: '/account',
+
     RECIPES: '/recipes',
+    RECIPE_DETAIL: '/recipe',
+
+    NOTIFICATION: '/notification',
     BUSSINESS: '/bussiness',
     CONTACT: '/contact',
+    CHECKOUT: '/checkout',
     FAQ: '/faq',
     CUSTOMER_SERVICE: '/customer-service',
     TERM_CONDITION: '/term-condition',
     PRIVACY_POLICY: '/privacy-policy',
-    BLOGS: '/blogs',
     FORGOT_PASSWORD: '/forgot-password'
 }
 
@@ -117,3 +124,14 @@ export const FEATURED = [
   ]
   
 export const DEFAULT_BLOG_PAGE_SIZE=6;
+
+export const STATE_OPTIONS = [
+  {
+    name: 'Hồ Chí Minh',
+    value: 'Hồ Chí Minh',
+  },
+  {
+    name: 'Hà Nội',
+    value: 'Hà Nội',
+  },
+]
\ No newline at end of file
diff --git a/src/utils/funtion.utils.ts b/src/utils/funtion.utils.ts
index 619e9ae30..43d517589 100644
--- a/src/utils/funtion.utils.ts
+++ b/src/utils/funtion.utils.ts
@@ -1,5 +1,5 @@
 export function isMobile() {
-    return window.innerWidth <= 768
+    return window.innerWidth < 768
 }
 
 export function removeItem<T>(arr: Array<T>, value: T): Array<T> { 
diff --git a/tailwind.config.js b/tailwind.config.js
index 69ab1ade5..ec9f0e5d1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -106,9 +106,6 @@ module.exports = {
       fontSize: {
         base: ['16px', '24px'],
       },
-      borderRadius: {
-        rounded: '.8rem',
-      },
       screens: {
         'sm-only': {'min': '0', 'max': '767px'},
         'sm': '640px',
diff --git a/yarn.lock b/yarn.lock
index 96275a4eb..7d98b108e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -428,6 +428,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/runtime-corejs3@^7.10.2":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.15.4.tgz#403139af262b9a6e8f9ba04a6fdcebf8de692bf1"
+  integrity sha512-lWcAqKeB624/twtTc3w6w/2o9RqJPaNBhPGK6DKLSiwuVWC7WFkypWyNg+CpZoyJH0jVzv1uMtXZ/5/lQOLtCg==
+  dependencies:
+    core-js-pure "^3.16.0"
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@7.12.5":
   version "7.12.5"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz"
@@ -449,6 +457,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
+  integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.14.5":
   version "7.14.5"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz"
@@ -529,6 +544,21 @@
     ts-node "^9"
     tslib "^2"
 
+"@eslint/eslintrc@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
+  integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.1.1"
+    espree "^7.3.0"
+    globals "^13.9.0"
+    ignore "^4.0.6"
+    import-fresh "^3.2.1"
+    js-yaml "^3.13.1"
+    minimatch "^3.0.4"
+    strip-json-comments "^3.1.1"
+
 "@fullhuman/postcss-purgecss@^4.0.3":
   version "4.0.3"
   resolved "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-4.0.3.tgz"
@@ -926,6 +956,20 @@
   resolved "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.2.0.tgz"
   integrity sha512-sqKVVVOe5ivCaXDWivIJYVSaEgdQK9ul7a4Kity5Iw7u9+wBAPbX1RMSnLLmp7O4Vzj0WOWwMAJsTL00xwaNug==
 
+"@humanwhocodes/config-array@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
+  integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.0"
+    debug "^4.1.1"
+    minimatch "^3.0.4"
+
+"@humanwhocodes/object-schema@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
+  integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
+
 "@iarna/toml@^2.2.5":
   version "2.2.5"
   resolved "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz"
@@ -948,6 +992,13 @@
   resolved "https://registry.npmjs.org/@next/env/-/env-11.0.1.tgz"
   integrity sha512-yZfKh2U6R9tEYyNUrs2V3SBvCMufkJ07xMH5uWy8wqcl5gAXoEw6A/1LDqwX3j7pUutF9d1ZxpdGDA3Uag+aQQ==
 
+"@next/eslint-plugin-next@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-11.1.2.tgz#f26cf90bcb6cd2e4645e2ba253bbc9aaaa43a170"
+  integrity sha512-cN+ojHRsufr9Yz0rtvjv8WI5En0RPZRJnt0y16Ha7DD+0n473evz8i1ETEJHmOLeR7iPJR0zxRrxeTN/bJMOjg==
+  dependencies:
+    glob "7.1.7"
+
 "@next/polyfill-module@11.0.1":
   version "11.0.1"
   resolved "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-11.0.1.tgz"
@@ -1046,6 +1097,11 @@
     "@react-spring/shared" "~9.2.0"
     "@react-spring/types" "~9.2.0"
 
+"@rushstack/eslint-patch@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz#023d72a5c4531b4ce204528971700a78a85a0c50"
+  integrity sha512-Myxw//kzromB9yWgS8qYGuGVf91oBUUJpNvy5eM50sqvmKLbKjwLxohJnkWGTeeI9v9IBMtPLxz5Gc60FIfvCA==
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.1"
   resolved "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz"
@@ -1107,6 +1163,11 @@
   resolved "https://registry.npmjs.org/@types/json-stable-stringify/-/json-stable-stringify-1.0.33.tgz"
   integrity sha512-qEWiQff6q2tA5gcJGWwzplQcXdJtm+0oy6IHGHzlOf3eFAkGE/FIPXZK9ofWgNSHVp8AFFI33PJJshS0ei3Gvw==
 
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
+  integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
+
 "@types/jsonwebtoken@^8.5.0":
   version "8.5.5"
   resolved "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-8.5.5.tgz"
@@ -1198,6 +1259,50 @@
   dependencies:
     "@types/node" "*"
 
+"@typescript-eslint/parser@^4.20.0":
+  version "4.31.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.31.0.tgz#87b7cd16b24b9170c77595d8b1363f8047121e05"
+  integrity sha512-oWbzvPh5amMuTmKaf1wp0ySxPt2ZXHnFQBN2Szu1O//7LmOvgaKTCIDNLK2NvzpmVd5A2M/1j/rujBqO37hj3w==
+  dependencies:
+    "@typescript-eslint/scope-manager" "4.31.0"
+    "@typescript-eslint/types" "4.31.0"
+    "@typescript-eslint/typescript-estree" "4.31.0"
+    debug "^4.3.1"
+
+"@typescript-eslint/scope-manager@4.31.0":
+  version "4.31.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.31.0.tgz#9be33aed4e9901db753803ba233b70d79a87fc3e"
+  integrity sha512-LJ+xtl34W76JMRLjbaQorhR0hfRAlp3Lscdiz9NeI/8i+q0hdBZ7BsiYieLoYWqy+AnRigaD3hUwPFugSzdocg==
+  dependencies:
+    "@typescript-eslint/types" "4.31.0"
+    "@typescript-eslint/visitor-keys" "4.31.0"
+
+"@typescript-eslint/types@4.31.0":
+  version "4.31.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.31.0.tgz#9a7c86fcc1620189567dc4e46cad7efa07ee8dce"
+  integrity sha512-9XR5q9mk7DCXgXLS7REIVs+BaAswfdHhx91XqlJklmqWpTALGjygWVIb/UnLh4NWhfwhR5wNe1yTyCInxVhLqQ==
+
+"@typescript-eslint/typescript-estree@4.31.0":
+  version "4.31.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.31.0.tgz#4da4cb6274a7ef3b21d53f9e7147cc76f278a078"
+  integrity sha512-QHl2014t3ptg+xpmOSSPn5hm4mY8D4s97ftzyk9BZ8RxYQ3j73XcwuijnJ9cMa6DO4aLXeo8XS3z1omT9LA/Eg==
+  dependencies:
+    "@typescript-eslint/types" "4.31.0"
+    "@typescript-eslint/visitor-keys" "4.31.0"
+    debug "^4.3.1"
+    globby "^11.0.3"
+    is-glob "^4.0.1"
+    semver "^7.3.5"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/visitor-keys@4.31.0":
+  version "4.31.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.31.0.tgz#4e87b7761cb4e0e627dc2047021aa693fc76ea2b"
+  integrity sha512-HUcRp2a9I+P21+O21yu3ezv3GEPGjyGiXoEUQwZXjR8UxRApGeLyWH4ZIIUSalE28aG4YsV6GjtaAVB3QKOu0w==
+  dependencies:
+    "@typescript-eslint/types" "4.31.0"
+    eslint-visitor-keys "^2.0.0"
+
 "@vercel/fetch-cached-dns@^2.0.2":
   version "2.0.2"
   resolved "https://registry.npmjs.org/@vercel/fetch-cached-dns/-/fetch-cached-dns-2.0.2.tgz"
@@ -1243,6 +1348,11 @@ abort-controller@3.0.0:
   dependencies:
     event-target-shim "^5.0.0"
 
+acorn-jsx@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
 acorn-node@^1.6.1:
   version "1.8.2"
   resolved "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz"
@@ -1262,9 +1372,9 @@ acorn-walk@^8.0.0:
   resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.1.1.tgz"
   integrity sha512-FbJdceMlPHEAWJOILDk1fXD8lnTlEIWFkqtfk+MvmL5q/qlHfN7GEHcsFZWt/Tea9jRNPWUZG4G976nqAAmU9w==
 
-acorn@^7.0.0:
+acorn@^7.0.0, acorn@^7.4.0:
   version "7.4.1"
-  resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 acorn@^8.0.4:
@@ -1294,6 +1404,26 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
+ajv@^6.10.0, ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ajv@^8.0.1:
+  version "8.6.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.6.2.tgz#2fb45e0e5fcbc0813326c1c3da535d1881bb0571"
+  integrity sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
 anser@1.4.9:
   version "1.4.9"
   resolved "https://registry.npmjs.org/anser/-/anser-1.4.9.tgz"
@@ -1373,11 +1503,26 @@ arg@^5.0.0:
   resolved "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz"
   integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==
 
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-query@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
+  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    "@babel/runtime-corejs3" "^7.10.2"
+
 array-includes-with-glob@^3.0.6:
   version "3.1.0"
   resolved "https://registry.npmjs.org/array-includes-with-glob/-/array-includes-with-glob-3.1.0.tgz"
@@ -1386,11 +1531,31 @@ array-includes-with-glob@^3.0.6:
     "@babel/runtime" "^7.14.0"
     matcher "^4.0.0"
 
+array-includes@^3.1.1, array-includes@^3.1.2, array-includes@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.3.tgz#c7f619b382ad2afaf5326cddfdc0afc61af7690a"
+  integrity sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.2"
+    get-intrinsic "^1.1.1"
+    is-string "^1.0.5"
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
+array.prototype.flat@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz#6ef638b43312bd401b4c6199fdec7e2dc9e9a123"
+  integrity sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.1"
+
 array.prototype.flatmap@^1.2.4:
   version "1.2.4"
   resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz"
@@ -1434,6 +1599,11 @@ assert@^1.1.1:
     object-assign "^4.1.1"
     util "0.10.3"
 
+ast-types-flow@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
+  integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
+
 ast-types@0.13.2:
   version "0.13.2"
   resolved "https://registry.npmjs.org/ast-types/-/ast-types-0.13.2.tgz"
@@ -1498,6 +1668,16 @@ available-typed-arrays@^1.0.4:
   resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.4.tgz"
   integrity sha512-SA5mXJWrId1TaQjfxUYghbqQ/hYioKmLJvPJyDuYRtXXenFNMjj4hSSt1Cf1xsuXSXrtxrVC5Ot4eU6cOtBDdA==
 
+axe-core@^4.0.2:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.3.tgz#b55cd8e8ddf659fe89b064680e1c6a4dceab0325"
+  integrity sha512-/lqqLAmuIPi79WYfRpy2i8z+x+vxU3zX2uAm0gs1q52qTuKwolOj1P8XbufpXcsydrpKx2yGn2wzAnxCMV86QA==
+
+axobject-query@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
+  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
+
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz"
@@ -2096,6 +2276,11 @@ cookie@^0.4.1:
   resolved "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz"
   integrity sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
 
+core-js-pure@^3.16.0:
+  version "3.17.3"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.17.3.tgz#98ea3587188ab7ef4695db6518eeb71aec42604a"
+  integrity sha512-YusrqwiOTTn8058JDa0cv9unbXdIiIgcgI9gXso0ey4WgkFLd3lYlV9rp9n7nDCsYxXsMDTjA4m1h3T348mdlQ==
+
 core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
@@ -2169,7 +2354,7 @@ cross-fetch@3.1.4, cross-fetch@^3.0.4, cross-fetch@^3.0.6:
   dependencies:
     node-fetch "2.6.1"
 
-cross-spawn@^7.0.3:
+cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -2261,6 +2446,11 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
+damerau-levenshtein@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz#64368003512a1a6992593741a09a9d31a836f55d"
+  integrity sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw==
+
 data-uri-to-buffer@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
@@ -2281,7 +2471,7 @@ debounce@^1.2.0:
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
   integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
 
-debug@2:
+debug@2, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -2302,13 +2492,20 @@ debug@4, debug@^4.1.0, debug@^4.3.1:
   dependencies:
     ms "2.1.2"
 
-debug@^3.1.0:
+debug@^3.1.0, debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
   integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
   dependencies:
     ms "^2.1.1"
 
+debug@^4.0.1, debug@^4.1.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
+  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
+  dependencies:
+    ms "2.1.2"
+
 decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -2331,6 +2528,11 @@ deep-extend@^0.6.0:
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
 deepmerge@4.2.2, deepmerge@^4.0.0, deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@@ -2426,6 +2628,20 @@ dlv@^1.1.3:
   resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
   integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
 
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
 domain-browser@4.19.0:
   version "4.19.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-4.19.0.tgz#1093e17c0a17dbd521182fe90d49ac1370054af1"
@@ -2499,6 +2715,11 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
+emoji-regex@^9.0.0:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -2518,7 +2739,7 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enquirer@^2.3.6:
+enquirer@^2.3.5, enquirer@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
   integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
@@ -2554,6 +2775,30 @@ es-abstract@^1.18.0-next.1:
     string.prototype.trimstart "^1.0.4"
     unbox-primitive "^1.0.1"
 
+es-abstract@^1.18.0-next.2, es-abstract@^1.18.2:
+  version "1.18.6"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.6.tgz#2c44e3ea7a6255039164d26559777a6d978cb456"
+  integrity sha512-kAeIT4cku5eNLNuUKhlmtuk1/TRZvQoYccn6TO0cSVdf1kzB0T7+dYuVK9MWM7l+/53W2Q8M7N2c6MQvhXFcUQ==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.1.1"
+    get-symbol-description "^1.0.0"
+    has "^1.0.3"
+    has-symbols "^1.0.2"
+    internal-slot "^1.0.3"
+    is-callable "^1.2.4"
+    is-negative-zero "^2.0.1"
+    is-regex "^1.1.4"
+    is-string "^1.0.7"
+    object-inspect "^1.11.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    string.prototype.trimend "^1.0.4"
+    string.prototype.trimstart "^1.0.4"
+    unbox-primitive "^1.0.1"
+
 es-abstract@^1.18.5:
   version "1.18.5"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.5.tgz#9b10de7d4c206a3581fd5b2124233e04db49ae19"
@@ -2606,6 +2851,224 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
+eslint-config-next@^11.1.2:
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-11.1.2.tgz#73c918f2fa6120d5f65080bf3fcf6b154905707e"
+  integrity sha512-dFutecxX2Z5/QVlLwdtKt+gIfmNMP8Qx6/qZh3LM/DFVdGJEAnUKrr4VwGmACB2kx/PQ5bx3R+QxnEg4fDPiTg==
+  dependencies:
+    "@next/eslint-plugin-next" "11.1.2"
+    "@rushstack/eslint-patch" "^1.0.6"
+    "@typescript-eslint/parser" "^4.20.0"
+    eslint-import-resolver-node "^0.3.4"
+    eslint-import-resolver-typescript "^2.4.0"
+    eslint-plugin-import "^2.22.1"
+    eslint-plugin-jsx-a11y "^6.4.1"
+    eslint-plugin-react "^7.23.1"
+    eslint-plugin-react-hooks "^4.2.0"
+
+eslint-config-prettier@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
+  integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
+
+eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd"
+  integrity sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==
+  dependencies:
+    debug "^3.2.7"
+    resolve "^1.20.0"
+
+eslint-import-resolver-typescript@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.4.0.tgz#ec1e7063ebe807f0362a7320543aaed6fe1100e1"
+  integrity sha512-useJKURidCcldRLCNKWemr1fFQL1SzB3G4a0li6lFGvlc5xGe1hY343bvG07cbpCzPuM/lK19FIJB3XGFSkplA==
+  dependencies:
+    debug "^4.1.1"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    resolve "^1.17.0"
+    tsconfig-paths "^3.9.0"
+
+eslint-module-utils@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.2.tgz#94e5540dd15fe1522e8ffa3ec8db3b7fa7e7a534"
+  integrity sha512-QG8pcgThYOuqxupd06oYTZoNOGaUdTY1PqK+oS6ElF6vs4pBdk/aYxFVQQXzcrAqp9m7cl7lb2ubazX+g16k2Q==
+  dependencies:
+    debug "^3.2.7"
+    pkg-dir "^2.0.0"
+
+eslint-plugin-import@^2.22.1:
+  version "2.24.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.24.2.tgz#2c8cd2e341f3885918ee27d18479910ade7bb4da"
+  integrity sha512-hNVtyhiEtZmpsabL4neEj+6M5DCLgpYyG9nzJY8lZQeQXEn5UPW1DpUdsMHMXsq98dbNm7nt1w9ZMSVpfJdi8Q==
+  dependencies:
+    array-includes "^3.1.3"
+    array.prototype.flat "^1.2.4"
+    debug "^2.6.9"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-module-utils "^2.6.2"
+    find-up "^2.0.0"
+    has "^1.0.3"
+    is-core-module "^2.6.0"
+    minimatch "^3.0.4"
+    object.values "^1.1.4"
+    pkg-up "^2.0.0"
+    read-pkg-up "^3.0.0"
+    resolve "^1.20.0"
+    tsconfig-paths "^3.11.0"
+
+eslint-plugin-jsx-a11y@^6.4.1:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.4.1.tgz#a2d84caa49756942f42f1ffab9002436391718fd"
+  integrity sha512-0rGPJBbwHoGNPU73/QCLP/vveMlM1b1Z9PponxO87jfr6tuH5ligXbDT6nHSSzBC8ovX2Z+BQu7Bk5D/Xgq9zg==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    aria-query "^4.2.2"
+    array-includes "^3.1.1"
+    ast-types-flow "^0.0.7"
+    axe-core "^4.0.2"
+    axobject-query "^2.2.0"
+    damerau-levenshtein "^1.0.6"
+    emoji-regex "^9.0.0"
+    has "^1.0.3"
+    jsx-ast-utils "^3.1.0"
+    language-tags "^1.0.5"
+
+eslint-plugin-react-hooks@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
+  integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==
+
+eslint-plugin-react@^7.23.1:
+  version "7.25.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.25.1.tgz#9286b7cd9bf917d40309760f403e53016eda8331"
+  integrity sha512-P4j9K1dHoFXxDNP05AtixcJEvIT6ht8FhYKsrkY0MPCPaUMYijhpWwNiRDZVtA8KFuZOkGSeft6QwH8KuVpJug==
+  dependencies:
+    array-includes "^3.1.3"
+    array.prototype.flatmap "^1.2.4"
+    doctrine "^2.1.0"
+    estraverse "^5.2.0"
+    has "^1.0.3"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.0.4"
+    object.entries "^1.1.4"
+    object.fromentries "^2.0.4"
+    object.values "^1.1.4"
+    prop-types "^15.7.2"
+    resolve "^2.0.0-next.3"
+    string.prototype.matchall "^4.0.5"
+
+eslint-scope@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+eslint-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
+eslint-visitor-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+
+eslint@^7.32.0:
+  version "7.32.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
+  integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
+  dependencies:
+    "@babel/code-frame" "7.12.11"
+    "@eslint/eslintrc" "^0.4.3"
+    "@humanwhocodes/config-array" "^0.5.0"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    enquirer "^2.3.5"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^2.0.0"
+    espree "^7.3.1"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.1.2"
+    globals "^13.6.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.0.4"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    progress "^2.0.0"
+    regexpp "^3.1.0"
+    semver "^7.2.1"
+    strip-ansi "^6.0.0"
+    strip-json-comments "^3.1.0"
+    table "^6.0.9"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
+espree@^7.3.0, espree@^7.3.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
+  integrity sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==
+  dependencies:
+    acorn "^7.4.0"
+    acorn-jsx "^5.3.1"
+    eslint-visitor-keys "^1.3.0"
+
+esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
+esquery@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
+  integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -2668,6 +3131,11 @@ extract-files@9.0.0, extract-files@^9.0.0:
   resolved "https://registry.yarnpkg.com/extract-files/-/extract-files-9.0.0.tgz#8a7744f2437f81f5ed3250ed9f1550de902fe54a"
   integrity sha512-CvdFfHkC95B4bBBk36hcEmvdR2awOdhhVUYH6S/zrVj3477zven/fJMYg7121h4T1xHZC+tetUpubpAhxwI7hQ==
 
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
 fast-glob@^3.1.1, fast-glob@^3.2.5:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
@@ -2680,6 +3148,16 @@ fast-glob@^3.1.1, fast-glob@^3.2.5:
     micromatch "^4.0.2"
     picomatch "^2.2.1"
 
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+
 fastq@^1.6.0:
   version "1.12.0"
   resolved "https://registry.npmjs.org/fastq/-/fastq-1.12.0.tgz"
@@ -2734,6 +3212,13 @@ figures@^3.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
@@ -2750,6 +3235,13 @@ find-cache-dir@3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-up@^2.0.0, find-up@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
+  dependencies:
+    locate-path "^2.0.0"
+
 find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz"
@@ -2758,6 +3250,19 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
+flat-cache@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
+  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  dependencies:
+    flatted "^3.1.0"
+    rimraf "^3.0.2"
+
+flatted@^3.1.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.2.tgz#64bfed5cb68fe3ca78b3eb214ad97b63bedce561"
+  integrity sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==
+
 flatten@^1.0.2:
   version "1.0.3"
   resolved "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz"
@@ -2815,6 +3320,11 @@ function-bind@^1.1.1:
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+functional-red-black-tree@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
+
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
@@ -2865,9 +3375,17 @@ get-stream@^6.0.0:
   resolved "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
 
-glob-parent@^5.1.0, glob-parent@~5.1.0, glob-parent@~5.1.2:
+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
+glob-parent@^5.1.0, glob-parent@^5.1.2, glob-parent@~5.1.0, glob-parent@~5.1.2:
   version "5.1.2"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
@@ -2884,7 +3402,7 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@^7.0.0, glob@^7.1.1, glob@^7.1.3, glob@^7.1.6:
+glob@7.1.7, glob@^7.0.0, glob@^7.1.1, glob@^7.1.3, glob@^7.1.6:
   version "7.1.7"
   resolved "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz"
   integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
@@ -2901,6 +3419,13 @@ globals@^11.1.0:
   resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
+globals@^13.6.0, globals@^13.9.0:
+  version "13.11.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.11.0.tgz#40ef678da117fe7bd2e28f1fab24951bd0255be7"
+  integrity sha512-08/xrJ7wQjK9kkkRoI3OFUBbLx4f+6x3SGwcPvQ0QH6goFDrOU2oyAWrmh3dJezu65buo+HBMzAMQy6rovVC3g==
+  dependencies:
+    type-fest "^0.20.2"
+
 globby@11.0.3:
   version "11.0.3"
   resolved "https://registry.npmjs.org/globby/-/globby-11.0.3.tgz"
@@ -2913,6 +3438,18 @@ globby@11.0.3:
     merge2 "^1.3.0"
     slash "^3.0.0"
 
+globby@^11.0.3:
+  version "11.0.4"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5"
+  integrity sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.1.1"
+    ignore "^5.1.4"
+    merge2 "^1.3.0"
+    slash "^3.0.0"
+
 got@^9.6.0:
   version "9.6.0"
   resolved "https://registry.npmjs.org/got/-/got-9.6.0.tgz"
@@ -3065,6 +3602,11 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hosted-git-info@^2.1.4:
+  version "2.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+
 html-tags@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz"
@@ -3144,6 +3686,11 @@ ieee754@^1.1.13, ieee754@^1.1.4:
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
+ignore@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
+
 ignore@^5.1.4:
   version "5.1.8"
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz"
@@ -3173,9 +3720,9 @@ import-cwd@^3.0.0:
   dependencies:
     import-from "^3.0.0"
 
-import-fresh@^3.2.1:
+import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
-  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
   dependencies:
     parent-module "^1.0.0"
@@ -3193,6 +3740,11 @@ import-from@4.0.0:
   resolved "https://registry.npmjs.org/import-from/-/import-from-4.0.0.tgz"
   integrity sha512-P9J71vT5nLlDeV8FHs5nNxaLbrpfAV5cF5srvbZfpwpcJoM/xZR3hiv+q+SAnuSmuGbXMWud063iIMx/V/EWZQ==
 
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
+
 indent-string@^3.0.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz"
@@ -3324,7 +3876,12 @@ is-callable@^1.1.4, is-callable@^1.2.3:
   resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz"
   integrity sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==
 
-is-core-module@^2.2.0:
+is-callable@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
+  integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
+
+is-core-module@^2.2.0, is-core-module@^2.6.0:
   version "2.6.0"
   resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz"
   integrity sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==
@@ -3367,7 +3924,7 @@ is-generator-function@^1.0.7:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-glob@4.0.1, is-glob@^4.0.1, is-glob@~4.0.1:
+is-glob@4.0.1, is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz"
   integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
@@ -3436,6 +3993,14 @@ is-regex@^1.1.3:
     call-bind "^1.0.2"
     has-symbols "^1.0.2"
 
+is-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
 is-regexp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz"
@@ -3463,6 +4028,13 @@ is-string@^1.0.5, is-string@^1.0.6:
   resolved "https://registry.npmjs.org/is-string/-/is-string-1.0.6.tgz"
   integrity sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w==
 
+is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.4"
   resolved "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz"
@@ -3552,6 +4124,14 @@ js-cookie@^2.2.1:
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
+js-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 js-yaml@^4.0.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz"
@@ -3569,11 +4149,31 @@ json-buffer@3.0.0:
   resolved "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz"
   integrity sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=
 
+json-parse-better-errors@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
+
 json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
   resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-schema-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
+
 json-stable-stringify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz"
@@ -3633,6 +4233,14 @@ jsonwebtoken@^8.5.1:
     ms "^2.1.1"
     semver "^5.6.0"
 
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz#41108d2cec408c3453c1bbe8a4aae9e1e2bd8f82"
+  integrity sha512-EIsmt3O3ljsU6sot/J4E1zDRxfBNrhjyf/OKjlydwgEimQuznlM4Wv7U+ueONJMyEn1WRE0K8dhi3dVAXYT24Q==
+  dependencies:
+    array-includes "^3.1.2"
+    object.assign "^4.1.2"
+
 jwa@^1.4.1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz"
@@ -3662,6 +4270,18 @@ keyv@^3.0.0:
   dependencies:
     json-buffer "3.0.0"
 
+language-subtag-registry@~0.3.2:
+  version "0.3.21"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz#04ac218bea46f04cb039084602c6da9e788dd45a"
+  integrity sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==
+
+language-tags@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
+  integrity sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=
+  dependencies:
+    language-subtag-registry "~0.3.2"
+
 latest-version@5.1.0:
   version "5.1.0"
   resolved "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz"
@@ -3669,6 +4289,14 @@ latest-version@5.1.0:
   dependencies:
     package-json "^6.3.0"
 
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
 lilconfig@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.3.tgz"
@@ -3757,6 +4385,16 @@ listr@^0.14.3:
     p-map "^2.0.0"
     rxjs "^6.3.3"
 
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+    strip-bom "^3.0.0"
+
 load-script@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
@@ -3771,6 +4409,14 @@ loader-utils@1.2.3:
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -3833,6 +4479,11 @@ lodash.isstring@^4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
   integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=
 
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.once@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
@@ -3863,6 +4514,11 @@ lodash.topath@^4.5.2:
   resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
   integrity sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=
 
+lodash.truncate@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
+  integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -3945,6 +4601,13 @@ lru-cache@5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
 make-dir@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
@@ -4110,6 +4773,11 @@ native-url@0.3.4:
   dependencies:
     querystring "^0.2.0"
 
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
+
 next-seo@^4.26.0:
   version "4.26.0"
   resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.26.0.tgz#4218cfae5651fdc2e330dcdf1cc1b34ce199d41c"
@@ -4242,6 +4910,16 @@ node-releases@^1.1.71:
   resolved "https://registry.npmjs.org/node-releases/-/node-releases-1.1.75.tgz"
   integrity sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==
 
+normalize-package-data@^2.3.2:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
+  dependencies:
+    hosted-git-info "^2.1.4"
+    resolve "^1.10.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
 normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz"
@@ -4351,6 +5029,34 @@ object.assign@^4.1.0, object.assign@^4.1.2:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
+object.entries@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.4.tgz#43ccf9a50bc5fd5b649d45ab1a579f24e088cafd"
+  integrity sha512-h4LWKWE+wKQGhtMjZEBud7uLGhqyLwj8fpHOarZhD2uY3C9cRtk57VQ89ke3moByLXMedqs3XCHzyb4AmA2DjA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.2"
+
+object.fromentries@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.4.tgz#26e1ba5c4571c5c6f0890cef4473066456a120b8"
+  integrity sha512-EsFBshs5RUUpQEY1D4q/m59kMfz4YJvxuNCJcv/jWwOJr34EaVnG11ZrZa0UHB3wnzV1wx8m58T4hQL8IuNXlQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.2"
+    has "^1.0.3"
+
+object.values@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.4.tgz#0d273762833e816b693a637d30073e7051535b30"
+  integrity sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.2"
+
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
@@ -4377,6 +5083,18 @@ opener@^1.5.2:
   resolved "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz"
   integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
 
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
 os-browserify@0.3.0, os-browserify@^0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz"
@@ -4399,6 +5117,13 @@ p-limit@3.1.0:
   dependencies:
     yocto-queue "^0.1.0"
 
+p-limit@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
+  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
+  dependencies:
+    p-try "^1.0.0"
+
 p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz"
@@ -4406,6 +5131,13 @@ p-limit@^2.2.0:
   dependencies:
     p-try "^2.0.0"
 
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
+  dependencies:
+    p-limit "^1.1.0"
+
 p-locate@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz"
@@ -4425,6 +5157,11 @@ p-map@^4.0.0:
   dependencies:
     aggregate-error "^3.0.0"
 
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
+
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz"
@@ -4480,6 +5217,14 @@ parse-filepath@^1.0.2:
     map-cache "^0.2.0"
     path-root "^0.1.1"
 
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
 parse-json@^5.0.0:
   version "5.2.0"
   resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz"
@@ -4516,6 +5261,11 @@ path-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
@@ -4548,6 +5298,13 @@ path-root@^0.1.1:
   dependencies:
     path-root-regex "^0.1.0"
 
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
+  dependencies:
+    pify "^3.0.0"
+
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
@@ -4574,6 +5331,18 @@ pify@^2.3.0:
   resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
   integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
 
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
+
+pkg-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  integrity sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=
+  dependencies:
+    find-up "^2.1.0"
+
 pkg-dir@^4.1.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz"
@@ -4581,6 +5350,13 @@ pkg-dir@^4.1.0:
   dependencies:
     find-up "^4.0.0"
 
+pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
+  integrity sha1-yBmscoBZpGHKscOImivjxJoATX8=
+  dependencies:
+    find-up "^2.1.0"
+
 platform@1.3.6:
   version "1.3.6"
   resolved "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz"
@@ -4972,6 +5748,11 @@ postcss@^8.1.6, postcss@^8.2.1, postcss@^8.3.5:
     nanoid "^3.1.23"
     source-map-js "^0.6.2"
 
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
 prepend-http@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
@@ -4997,6 +5778,11 @@ process@0.11.10, process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
+progress@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
 promise@^7.1.1:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
@@ -5202,6 +5988,23 @@ read-cache@^1.0.0:
   dependencies:
     pify "^2.3.0"
 
+read-pkg-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
+  integrity sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^3.0.0"
+
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
+  dependencies:
+    load-json-file "^4.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^3.0.0"
+
 readable-stream@^2.0.2, readable-stream@^2.3.3, readable-stream@^2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -5251,6 +6054,19 @@ regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
   integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
 
+regexp.prototype.flags@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
+  integrity sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+regexpp@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+
 registry-auth-token@^4.0.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.2.1.tgz#6d7b4006441918972ccd5fedcd41dc322c79b250"
@@ -5322,6 +6138,11 @@ require-directory@^2.1.1:
   resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz"
   integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
 require-main-filename@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz"
@@ -5337,7 +6158,7 @@ resolve-from@^4.0.0:
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.1.7, resolve@^1.20.0:
+resolve@^1.1.7, resolve@^1.10.0, resolve@^1.17.0, resolve@^1.20.0:
   version "1.20.0"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -5345,6 +6166,14 @@ resolve@^1.1.7, resolve@^1.20.0:
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
+resolve@^2.0.0-next.3:
+  version "2.0.0-next.3"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
+  integrity sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
 responselike@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz"
@@ -5383,9 +6212,9 @@ reusify@^1.0.4:
   resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rimraf@^3.0.0:
+rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
   dependencies:
     glob "^7.1.3"
@@ -5457,9 +6286,9 @@ semver-compare@^1.0.0:
   resolved "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz"
   integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w=
 
-semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.6.0:
   version "5.7.1"
-  resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
 semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
@@ -5467,6 +6296,13 @@ semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^7.2.1, semver@^7.3.5:
+  version "7.3.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+  dependencies:
+    lru-cache "^6.0.0"
+
 sentence-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz"
@@ -5622,6 +6458,32 @@ source-map@^0.6.0, source-map@^0.6.1:
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+spdx-correct@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.10.tgz#0d9becccde7003d6c658d487dd48a32f0bf3014b"
+  integrity sha512-oie3/+gKf7QtpitB0LYLETe+k8SifzsX4KixvpOsbI6S0kRiRQ5MKOio8eMSAKQ17N06+wdEOXRiId+zOxo0hA==
+
 sponge-case@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/sponge-case/-/sponge-case-1.0.1.tgz"
@@ -5629,6 +6491,11 @@ sponge-case@^1.0.1:
   dependencies:
     tslib "^2.0.3"
 
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
+
 stacktrace-parser@0.1.10:
   version "0.1.10"
   resolved "https://registry.npmjs.org/stacktrace-parser/-/stacktrace-parser-0.1.10.tgz"
@@ -5726,6 +6593,20 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
+string.prototype.matchall@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.5.tgz#59370644e1db7e4c0c045277690cf7b01203c4da"
+  integrity sha512-Z5ZaXO0svs0M2xd/6By3qpeKpLKd9mO4v4q3oMEQrk8Ck4xOD5d5XeBOOjGrmVZZ/AHB1S0CgG4N5r1G9N3E2Q==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.2"
+    get-intrinsic "^1.1.1"
+    has-symbols "^1.0.2"
+    internal-slot "^1.0.3"
+    regexp.prototype.flags "^1.3.1"
+    side-channel "^1.0.4"
+
 string.prototype.trimend@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz"
@@ -5786,11 +6667,21 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
+
 strip-final-newline@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
 strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz"
@@ -5909,6 +6800,18 @@ tabbable@^5.2.0:
   resolved "https://registry.npmjs.org/tabbable/-/tabbable-5.2.0.tgz"
   integrity sha512-0uyt8wbP0P3T4rrsfYg/5Rg3cIJ8Shl1RJ54QMqYxm1TLdWqJD1u6+RQjr2Lor3wmfT7JRHkirIwy99ydBsyPg==
 
+table@^6.0.9:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"
+  integrity sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==
+  dependencies:
+    ajv "^8.0.1"
+    lodash.clonedeep "^4.5.0"
+    lodash.truncate "^4.4.2"
+    slice-ansi "^4.0.0"
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+
 tailwindcss@^2.2.2:
   version "2.2.2"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.2.tgz"
@@ -5946,6 +6849,11 @@ tailwindcss@^2.2.2:
     resolve "^1.20.0"
     tmp "^0.2.1"
 
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
+
 through@^2.3.6, through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.npmjs.org/through/-/through-2.3.8.tgz"
@@ -6040,9 +6948,19 @@ ts-pnp@^1.1.6:
   resolved "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tslib@^1.9.0:
+tsconfig-paths@^3.11.0, tsconfig-paths@^3.9.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.11.0.tgz#954c1fe973da6339c78e06b03ce2e48810b65f36"
+  integrity sha512-7ecdYDnIdmv639mmDwslG6KQg1Z9STTz1j7Gcz0xa+nshh/gKDAHcPxRbWOsA3SPp0tXP2leTcY9Kw+NAkfZzA==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.1"
+    minimist "^1.2.0"
+    strip-bom "^3.0.0"
+
+tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
 tslib@^2, tslib@^2.0.3, tslib@^2.1.0, tslib@~2.2.0:
@@ -6065,6 +6983,13 @@ tslib@~2.3.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
+tsutils@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
+  dependencies:
+    tslib "^1.8.1"
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz"
@@ -6075,6 +7000,18 @@ tty-browserify@0.0.1:
   resolved "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz"
   integrity sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw==
 
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
 type-fest@^0.21.3:
   version "0.21.3"
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz"
@@ -6146,6 +7083,13 @@ upper-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
 url-parse-lax@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz"
@@ -6220,11 +7164,24 @@ uuidv4@^6.2.10:
     "@types/uuid" "8.3.1"
     uuid "8.3.2"
 
+v8-compile-cache@^2.0.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
+  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+
 valid-url@1.0.9, valid-url@^1.0.9:
   version "1.0.9"
   resolved "https://registry.npmjs.org/valid-url/-/valid-url-1.0.9.tgz"
   integrity sha1-HBRHm0DxOXp1eC8RXkCGRHQzogA=
 
+validate-npm-package-license@^3.0.1:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  dependencies:
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
+
 value-or-promise@1.0.10:
   version "1.0.10"
   resolved "https://registry.npmjs.org/value-or-promise/-/value-or-promise-1.0.10.tgz"
@@ -6317,6 +7274,11 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+word-wrap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
 wrap-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-3.0.1.tgz"
@@ -6373,6 +7335,11 @@ yallist@^3.0.2:
   resolved "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
 yaml-ast-parser@^0.0.43:
   version "0.0.43"
   resolved "https://registry.npmjs.org/yaml-ast-parser/-/yaml-ast-parser-0.0.43.tgz"