From 2e3def034e90970c2656fc0d07e39f2e4b05ebae Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Sat, 11 Sep 2021 13:08:39 +0700
Subject: [PATCH 01/30] config: yarn lock changed

---
 yarn.lock | 1007 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 987 insertions(+), 20 deletions(-)

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"

From 50725d982f616cd8f42dd7a34585b9993d8cf12d Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 10:30:09 +0700
Subject: [PATCH 02/30] styles: banner common

---
 pages/product/[slug].tsx                      |  5 ++--
 src/components/common/Banner/Banner.tsx       | 13 +++++++++-
 .../Banner/BannerItem/BannerItem.module.scss  | 24 +++++++------------
 .../ProductListBanner/ProductListBanner.tsx   |  2 +-
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index c34394af5..d48c4b604 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -1,7 +1,7 @@
 
-import { Layout, RecipeDetail } from 'src/components/common'
+import { Layout, RecipeDetail, RelevantBlogPosts } from 'src/components/common'
 import { ProductInfoDetail, RecommendedRecipes, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
-import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
+import { BLOGS_DATA_TEST, INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
 
 export default function Slug() {
   return <>
@@ -10,6 +10,7 @@ export default function Slug() {
     <RecommendedRecipes data={RECIPE_DATA_TEST} />
     <ReleventProducts />
     <ViewedProducts />
+    <RelevantBlogPosts data={BLOGS_DATA_TEST} title="You will like also" bgcolor="cream"/>
   </>
 }
 
diff --git a/src/components/common/Banner/Banner.tsx b/src/components/common/Banner/Banner.tsx
index 1dbc04d9f..9b6b1099a 100644
--- a/src/components/common/Banner/Banner.tsx
+++ b/src/components/common/Banner/Banner.tsx
@@ -11,13 +11,24 @@ const option = {
     breakpoints: {}
 }
 const Banner = memo(({ data }: Props) => {
+    if (data.length === 1) {
+        const item = data[0]
+        return <BannerItem
+            title={item.title}
+            imgLink={item.imgLink}
+            subtitle={item.subtitle}
+            buttonLabel={item.buttonLabel}
+            linkButton={item.linkButton}
+            size={item.size}
+        />
+    }
     return (
         <CarouselCommon<BannerItemProps>
             data={data}
             itemKey="banner"
             Component={BannerItem}
             option={option}
-            isDot = {true}
+            isDot={true}
         />
     )
 })
diff --git a/src/components/common/Banner/BannerItem/BannerItem.module.scss b/src/components/common/Banner/BannerItem/BannerItem.module.scss
index 72690f92d..72a288374 100644
--- a/src/components/common/Banner/BannerItem/BannerItem.module.scss
+++ b/src/components/common/Banner/BannerItem/BannerItem.module.scss
@@ -1,31 +1,28 @@
 @import "../../../../styles/utilities";
 
 .bannerItem {
-  @apply bg-primary-light custom-border-radius-lg overflow-hidden;
-  @screen md {
-    border: 1px solid var(--primary);
-  }
+  @apply bg-primary-light shape-common-lg overflow-hidden;
+  padding: 0;
   &.large {
     margin-bottom: 2.8rem;
     .inner {
-      @screen xl {
-        @apply bg-right-bottom;
-        background-size: unset;
-      }
+      background-size: cover;
+      background-position: right bottom;  
     }
   }
   .inner {
     @apply bg-no-repeat;
     background-size: 90%;
-    background-position: right -500% bottom 0%;
+    background-position: right -500%   bottom 0%;
     .content {
       background-image: linear-gradient(
         to right,
-        rgb(227, 242, 233, 0.9),
-        rgb(227, 242, 233, 0.5) 80%,
+        rgb(227, 242, 233) 63%,
         rgb(227, 242, 233, 0)
       );
-      padding: 1.6rem;
+      
+      padding: 2rem;
+      padding-bottom: 4rem;
       max-width: 37rem;
       @screen md {
         max-width: 49.6rem;
@@ -38,9 +35,6 @@
         }
         .subHeading {
           @apply sub-headline;
-          @screen md {
-            @apply caption;
-          }
         }
       }
 
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",
-                    },
+                    }
                     ]
                 }
             />

From 0eddfe7c91638822ca9a2f64568965530089a848 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 10:30:19 +0700
Subject: [PATCH 03/30] styles: banner home

---
 .../modules/home/HomeBanner/HomeBanner.module.scss         | 4 ++--
 src/components/modules/home/HomeBanner/HomeBanner.tsx      | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/modules/home/HomeBanner/HomeBanner.module.scss b/src/components/modules/home/HomeBanner/HomeBanner.module.scss
index fdba411c0..a8b1b1d27 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;
diff --git a/src/components/modules/home/HomeBanner/HomeBanner.tsx b/src/components/modules/home/HomeBanner/HomeBanner.tsx
index 18432ec82..90732211a 100644
--- a/src/components/modules/home/HomeBanner/HomeBanner.tsx
+++ b/src/components/modules/home/HomeBanner/HomeBanner.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
-import { Banner } from 'src/components/common'
+import { Banner, StaticImage } from 'src/components/common'
 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'
+import { ROUTE } from 'src/utils/constanst.utils'
 
 interface Props {
     className?: string
@@ -15,7 +16,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 +29,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,
                     }
                     ]
                 }

From 46233a1108f5025fdfde95fa7a2e35c3c5d7ffa4 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 11:51:46 +0700
Subject: [PATCH 04/30] styles: banner item

---
 .../Banner/BannerItem/BannerItem.module.scss      | 15 +++++++--------
 src/components/common/Header/Header.tsx           |  2 ++
 src/utils/funtion.utils.ts                        |  2 +-
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/common/Banner/BannerItem/BannerItem.module.scss b/src/components/common/Banner/BannerItem/BannerItem.module.scss
index 72a288374..9331a7aff 100644
--- a/src/components/common/Banner/BannerItem/BannerItem.module.scss
+++ b/src/components/common/Banner/BannerItem/BannerItem.module.scss
@@ -7,20 +7,19 @@
     margin-bottom: 2.8rem;
     .inner {
       background-size: cover;
-      background-position: right bottom;  
+      background-position: center bottom;
+      @screen xl {
+        background-position: right bottom;
+      }
     }
   }
   .inner {
     @apply bg-no-repeat;
     background-size: 90%;
-    background-position: right -500%   bottom 0%;
+    background-position: right -500% bottom 0%;
     .content {
-      background-image: linear-gradient(
-        to right,
-        rgb(227, 242, 233) 63%,
-        rgb(227, 242, 233, 0)
-      );
-      
+      background-image: linear-gradient(to right, rgb(227, 242, 233) 63%, rgb(227, 242, 233, 0));
+
       padding: 2rem;
       padding-bottom: 4rem;
       max-width: 37rem;
diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 5b42c6aaf..42dffbe0f 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)
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> { 

From 829aeaa84778d73b390e8729c01b31ce1bcaf04f Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 12:07:55 +0700
Subject: [PATCH 05/30] styles: fix product detail img

---
 .../ProductImgItem/ProductImgItem.module.scss |  8 ++++++++
 .../ProductImgItem/ProductImgItem.tsx         | 19 +++++++++++++++++++
 .../ProductImgs/ProductImgs.module.scss       |  3 +++
 .../components/ProductImgs/ProductImgs.tsx    | 16 ++++++++++++----
 4 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.module.scss
 create mode 100644 src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx

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..9a6d3da75 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',
@@ -21,15 +25,18 @@ const DATA = [
 
 const option = {
     slidesPerView: 1,
+    // mode: "free",
+
+
 }
 
 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 +45,4 @@ const ProductImgs = ({ }: Props) => {
 }
 
 export default ProductImgs
+

From fa84e88212c8e48966add25e68994462cb8850ba Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 13:14:43 +0700
Subject: [PATCH 06/30] :art: styles: button common with shape common

:%s
---
 pages/test.tsx                                |   5 +
 .../ButtonCommon/ButtonCommon.module.scss     | 150 ++++++++++--------
 .../common/ButtonCommon/ButtonCommon.tsx      |  10 +-
 .../components/ProductImgs/ProductImgs.tsx    |   3 -
 .../ProductInfo/ProductInfo.module.scss       |   3 +
 src/styles/_utilities.scss                    |   4 +-
 6 files changed, 104 insertions(+), 71 deletions(-)

diff --git a/pages/test.tsx b/pages/test.tsx
index 644dc08ed..aa3fd1780 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -78,6 +78,11 @@ export default function Test() {
 }
   return (
     <>
+    <div className="shape-common-border">
+      <div className="inner">
+        Lorem ipsum dolor sit amet.
+      </div>
+    </div>
       {/* <BlogDetailPage /> */}
       
       {/* <RecipeListPage/> */}
diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
index c7b9f1ffa..41ecee010 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -1,102 +1,124 @@
 @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: 1.6rem;
+      .icon {
+        margin: 0;
+      }
     }
   }
 
   &.large {
-    padding: 1rem 1.5rem;
-    &.onlyIcon {
-      padding: 1rem;
-    }
-    @screen md {
-      padding: 1.6rem 3.2rem;
+    .inner {
+      padding: 1rem 1.5rem;
       &.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,9 +126,11 @@
   }
 
   &.preserve {
-    flex-direction: row-reverse;
-    .icon {
-      margin: 0 0 0 1.6rem;
+    .inner {
+      flex-direction: row-reverse;
+      .icon {
+        margin: 0 0 0 1.6rem;
+      }
     }
   }
 
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/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
index 9a6d3da75..c300fba38 100644
--- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
+++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
@@ -25,9 +25,6 @@ const DATA = [
 
 const option = {
     slidesPerView: 1,
-    // mode: "free",
-
-
 }
 
 const ProductImgs = ({ }: Props) => {
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..2119b3295 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,9 @@
                     margin-left: 0.8rem;
                 }
             }
+            svg path {
+                fill: currentColor;
+            }
         }
         button {
             @apply w-full;
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 {

From ab619e7f644dfa02d82db39369c71869778129d7 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 13:30:37 +0700
Subject: [PATCH 07/30] :art: styles: fix shape input common

:%s
---
 .../InputCommon/InputCommon.module.scss       | 45 ++++++++++---------
 .../common/InputCommon/InputCommon.tsx        |  7 +--
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/components/common/InputCommon/InputCommon.module.scss b/src/components/common/InputCommon/InputCommon.module.scss
index 6b12d2bbd..1c64c764e 100644
--- a/src/components/common/InputCommon/InputCommon.module.scss
+++ b/src/components/common/InputCommon/InputCommon.module.scss
@@ -15,10 +15,10 @@
     .icon + .inputCommon {
       padding-left: 4.8rem;
     }
-    
+
     .inputCommon {
       @apply block w-full transition-all duration-200 rounded bg-white;
-      padding: 1.2rem 1.6rem;
+      padding: 1.6rem;
       border: 1px solid var(--border-line);
       &:hover,
       &:focus,
@@ -31,24 +31,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 +73,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..fbe1df191 100644
--- a/src/components/common/InputCommon/InputCommon.tsx
+++ b/src/components/common/InputCommon/InputCommon.tsx
@@ -6,7 +6,7 @@ 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,
@@ -80,8 +83,6 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
                     onKeyDown={handleKeyDown}
                     className={classNames({
                         [s.inputCommon]: true,
-                        [s[styleType]]: true,
-                        [s.bgTransparent]: backgroundTransparent
                     })}
                 />
             </div>

From 6cdad60b0a87f9d9ec35a8fdc5f595c47acfcf6c Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 13:40:53 +0700
Subject: [PATCH 08/30] :art: styles: fix img, bg home categories section

:%s
---
 src/components/common/InputCommon/InputCommon.tsx         | 8 +++-----
 .../CategoriesItem/CategoryItem.module.scss               | 2 +-
 .../home/HomeCategories/CategoriesItem/CategoryItem.tsx   | 3 ++-
 .../home/HomeCategories/HomeCategories.module.scss        | 4 ++--
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/common/InputCommon/InputCommon.tsx b/src/components/common/InputCommon/InputCommon.tsx
index fbe1df191..7ef9d886f 100644
--- a/src/components/common/InputCommon/InputCommon.tsx
+++ b/src/components/common/InputCommon/InputCommon.tsx
@@ -1,6 +1,6 @@
 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';
 
@@ -81,9 +81,7 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
                     placeholder={placeholder}
                     onChange={handleChange}
                     onKeyDown={handleKeyDown}
-                    className={classNames({
-                        [s.inputCommon]: true,
-                    })}
+                    className={s.inputCommon}
                 />
             </div>
             {
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 {

From d191ffc535cca035c542a65b34fdccf4ea110869 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 14:04:00 +0700
Subject: [PATCH 09/30] :art: styles: change img recipe to img common

:%s
---
 .../RecipeDetailInfo.module.scss              | 24 ++++++++++++-------
 .../RecipeDetailInfo/RecipeDetailInfo.tsx     |  3 ++-
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss
index 86b525083..fe2c7224b 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;
+            //     }
             }
         }
     }
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}>

From 4512e8cf24ad66003e3eacdfc5bd73233fc68687 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 14:08:10 +0700
Subject: [PATCH 10/30] :art: styles: fix img height in cart product not sell

:%s
---
 .../ProductNotSell/ProductNotSell.module.scss          | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

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

From fc3ade50db98f032e350119dc413a5e9082c390e Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 14:50:28 +0700
Subject: [PATCH 11/30] :art: styles: product carousel responsive

:%s
---
 .../ButtonCommon/ButtonCommon.module.scss     |  5 +-
 .../ProductCard/ProductCard.module.scss       | 49 ++++++++++++-------
 .../ProductCarousel/ProductCarousel.tsx       |  9 ++--
 3 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
index 41ecee010..1c188af4b 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -94,7 +94,10 @@
 
   &.onlyIcon {
     .inner {
-      padding: 1.6rem;
+      padding: 1rem;
+      @screen md {
+        padding: 1.6rem;
+      }
       .icon {
         margin: 0;
       }
diff --git a/src/components/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss
index cffbe063b..2e62cc4d5 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,47 @@
     &.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{
+            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 +56,24 @@
             }
         }
     }
-    .cardBot{
+    .cardBot {
         min-height: 4rem;
-        @apply flex justify-between items-center; 
-        .cardIcon{
+        @apply flex justify-between items-center;
+        .cardIcon {
             margin-right: 0.8rem;
         }
+        .cardButton {
+            button {
+                > 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/ProductCarousel/ProductCarousel.tsx b/src/components/common/ProductCarousel/ProductCarousel.tsx
index 533e81ed3..381fc2992 100644
--- a/src/components/common/ProductCarousel/ProductCarousel.tsx
+++ b/src/components/common/ProductCarousel/ProductCarousel.tsx
@@ -19,11 +19,12 @@ const OPTION_DEFAULT: TOptionsEvents = {
       slidesPerView: 3,
     },
     '(min-width: 768px)': {
-      slidesPerView: 4,
+      slidesPerView: 3,
     },
-    '(min-width: 1024px)': {
-      slidesPerView: 4.5,
-    },'(min-width: 1280px)': {
+    '(min-width: 1008px)': {
+      slidesPerView: 3.5,
+    },
+    '(min-width: 1440px)': {
       slidesPerView: 5.5,
     },
   },

From 0369e1dd25dd5d52ae1797f3403dd58a41842362 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 15:18:51 +0700
Subject: [PATCH 12/30] :art: styles: change shape component list product with
 info

:%s
---
 .../ListProductWithInfo.module.scss           | 19 ++++++-------------
 .../ListProductWithInfo.tsx                   | 12 +++++++++---
 .../ProductCarousel/ProductCarousel.tsx       |  9 ++++++---
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
index ddd8ed901..6acb4aed0 100644
--- a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
+++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
@@ -17,8 +17,11 @@
         @apply spacing-horizontal-left;
         @screen lg {
             max-width: 75%;
-            @apply custom-border-radius-lg bg-white;
-            padding: 4rem .8rem;
+            padding: 0 .8rem;
+            > div > div {
+                @apply shape-common-lg bg-white;
+                padding: 4rem 0;
+            }
             :global(.customArrow) {
                 @screen lg {
                     &:global(.leftArrow) {
@@ -31,18 +34,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..2200fd71e 100644
--- a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
+++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
@@ -18,12 +18,18 @@ 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,
         },
     },
diff --git a/src/components/common/ProductCarousel/ProductCarousel.tsx b/src/components/common/ProductCarousel/ProductCarousel.tsx
index 381fc2992..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,
@@ -24,6 +24,9 @@ const OPTION_DEFAULT: TOptionsEvents = {
     '(min-width: 1008px)': {
       slidesPerView: 3.5,
     },
+    '(min-width: 1280px)': {
+      slidesPerView: 4.5,
+    },
     '(min-width: 1440px)': {
       slidesPerView: 5.5,
     },

From 022c905d82fd7c5be5244c9ec85947894f066f9f Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 15:27:19 +0700
Subject: [PATCH 13/30] :art: styles: border viewed product in product detail

:%s
---
 pages/product/[slug].tsx                                 | 2 +-
 .../ListProductWithInfo/ListProductWithInfo.module.scss  | 6 ++++--
 .../common/ListProductWithInfo/ListProductWithInfo.tsx   | 9 +++++++--
 .../product-detail/ViewedProducts/ViewedProducts.tsx     | 1 +
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index d48c4b604..dd06bb337 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -10,7 +10,7 @@ export default function Slug() {
     <RecommendedRecipes data={RECIPE_DATA_TEST} />
     <ReleventProducts />
     <ViewedProducts />
-    <RelevantBlogPosts data={BLOGS_DATA_TEST} title="You will like also" bgcolor="cream"/>
+    <RelevantBlogPosts data={BLOGS_DATA_TEST} title="You will like also"/>
   </>
 }
 
diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
index 6acb4aed0..9697a8ead 100644
--- a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
+++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
@@ -3,9 +3,11 @@
 .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 {
         @apply flex spacing-horizontal-left;
         padding-top: 5.6rem;
@@ -17,7 +19,7 @@
         @apply spacing-horizontal-left;
         @screen lg {
             max-width: 75%;
-            padding: 0 .8rem;
+            padding: 0 0.8rem;
             > div > div {
                 @apply shape-common-lg bg-white;
                 padding: 4rem 0;
diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
index 2200fd71e..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,
@@ -35,9 +37,12 @@ const OPTION_DEFAULT: TOptionsEvents = {
     },
 }
 
-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/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}
         />
     );
 };

From a3240ab05942a59eb638d3c72e1e78c8f63c47ac Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 15:38:31 +0700
Subject: [PATCH 14/30] :art: styles: page product detail

:%s
---
 pages/product/[slug].tsx                                 | 2 +-
 .../common/ButtonCommon/ButtonCommon.module.scss         | 9 ++++++---
 .../ListProductWithInfo/ListProductWithInfo.module.scss  | 3 +++
 .../RecipeDetailInfo/RecipeDetailInfo.module.scss        | 5 ++++-
 .../components/ProductInfo/ProductInfo.module.scss       | 7 +++++--
 5 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index dd06bb337..5413c686a 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -10,7 +10,7 @@ export default function Slug() {
     <RecommendedRecipes data={RECIPE_DATA_TEST} />
     <ReleventProducts />
     <ViewedProducts />
-    <RelevantBlogPosts data={BLOGS_DATA_TEST} title="You will like also"/>
+    <RelevantBlogPosts data={BLOGS_DATA_TEST} title="relevent blog posts"/>
   </>
 }
 
diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
index 1c188af4b..a0c33947d 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -106,7 +106,7 @@
 
   &.large {
     .inner {
-      padding: 1rem 1.5rem;
+      padding: 1rem 1.6rem;
       &.onlyIcon {
         padding: 1rem;
       }
@@ -139,8 +139,11 @@
 
   .icon {
     margin: 0 1.6rem 0 0;
-    svg path {
-      fill: currentColor;
+    svg {
+      height: 2rem;
+      path {
+        fill: currentColor;
+      }
     }
   }
 }
diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
index 9697a8ead..de7b96d3d 100644
--- a/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
+++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
@@ -7,6 +7,9 @@
     padding-bottom: 6rem;
     &.borderBottom {
         border-bottom: 1rem solid var(--gray);
+        @screen lg {
+            border-bottom: none;
+        }
     }
     @screen lg {
         @apply flex spacing-horizontal-left;
diff --git a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss
index fe2c7224b..94647504d 100644
--- a/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss
+++ b/src/components/common/RecipeDetail/components/RecipeDetailInfo/RecipeDetailInfo.module.scss
@@ -7,7 +7,7 @@
         @apply flex;
         margin: 5.6rem auto;
     }
-    
+
     .img {
         width: 100%;
         margin-top: 0;
@@ -61,6 +61,9 @@
                     list-style: disc;
                     margin-left: 2rem;
                 }
+                a {
+                    color: var(--info);
+                }
             }
         }
     }
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 2119b3295..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,8 +64,11 @@
                     margin-left: 0.8rem;
                 }
             }
-            svg path {
-                fill: currentColor;
+            svg {
+                height: 2rem;
+                path {
+                    fill: currentColor;
+                }
             }
         }
         button {

From 9336462af17bee9f9e8b480d3952fbad17dae465 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Mon, 13 Sep 2021 16:13:07 +0700
Subject: [PATCH 15/30] :art: styles: cart drawer responsive

:%s
---
 .../CartCheckoutButton/CartCheckoutButton.module.scss  |  2 ++
 .../CartCheckoutButton/CartCheckoutButton.tsx          | 10 +++++++---
 .../CartRecommendation/CartRecommendation.module.scss  |  4 +++-
 src/utils/constanst.utils.ts                           |  3 ++-
 4 files changed, 14 insertions(+), 5 deletions(-)

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..1d0f95582 100644
--- a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
+++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
@@ -2,6 +2,7 @@
 
 .cartRecommendation {
     @apply w-full bg-background-gray;
+    padding-bottom: 1.6rem;
     .top {
         @apply flex justify-between items-center;
         padding: 1.6rem;
@@ -12,7 +13,8 @@
     .productCardWarpper {
         padding-left: 1.6rem;
         :global(.customArrow) {
-            @apply bg-line;
+            @apply bg-line shadow-md;
+            opacity: .8;
             @screen lg {
                 &:global(.leftArrow) {
                     left: calc(-6.4rem - 2rem);
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index 3757feb1e..bdb2665db 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -12,11 +12,12 @@ export const ROUTE = {
     PRODUCTS: '/products',
     PRODUCT_DETAIL: '/product',
     ABOUT: '/about',
-    BLOG_DETAIL: '/blog',
     ACCOUNT: '/account',
+    BLOG_DETAIL: '/blog',
     RECIPES: '/recipes',
     BUSSINESS: '/bussiness',
     CONTACT: '/contact',
+    CHECKOUT: '/checkout',
     FAQ: '/faq',
     CUSTOMER_SERVICE: '/customer-service',
     TERM_CONDITION: '/term-condition',

From f7608e5ef1c3c74630e7d703a1beccdc279577f9 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 09:32:52 +0700
Subject: [PATCH 16/30] :art: styles: cart drawer recommendation with single
 btn

:%s
---
 .../common/CarouselCommon/CarouselCommon.tsx  | 15 +++++++----
 .../common/CartDrawer/CartDrawer.module.scss  |  2 +-
 .../CartRecommendation/CartRecommendation.tsx | 11 ++++++--
 .../ProductCard/ProductCard.module.scss       |  5 +++-
 .../common/ProductCard/ProductCard.tsx        | 25 ++++++++++++++-----
 5 files changed, 43 insertions(+), 15 deletions(-)

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..3ff81bc0a 100644
--- a/src/components/common/CartDrawer/CartDrawer.module.scss
+++ b/src/components/common/CartDrawer/CartDrawer.module.scss
@@ -4,7 +4,7 @@
 .cartDrawer {
     @apply flex flex-col h-full;
     .body {
-        @apply overflow-y-auto overflow-x-hidden h-full custom-scroll;
+        @apply flex flex-col justify-center overflow-y-auto overflow-x-hidden h-full custom-scroll;
     }
     .bottom {
         padding-top: 1.6rem;
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/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss
index 2e62cc4d5..4a11c7ff0 100644
--- a/src/components/common/ProductCard/ProductCard.module.scss
+++ b/src/components/common/ProductCard/ProductCard.module.scss
@@ -57,13 +57,16 @@
         }
     }
     .cardBot {
-        min-height: 4rem;
         @apply flex justify-between items-center;
+        min-height: 4rem;
+        margin-top: 1.6rem;
         .cardIcon {
             margin-right: 0.8rem;
         }
         .cardButton {
+            width: 100%;
             button {
+                width: 100%;
                 > div {
                     span {
                         display: -webkit-box;
diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx
index a6022efa4..f867d3724 100644
--- a/src/components/common/ProductCard/ProductCard.tsx
+++ b/src/components/common/ProductCard/ProductCard.tsx
@@ -1,5 +1,6 @@
 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 ButtonCommon from '../ButtonCommon/ButtonCommon'
@@ -11,6 +12,7 @@ import ProductNotSell from './ProductNotSell/ProductNotSell'
 
 export interface ProductCardProps extends ProductProps {
   buttonText?: string
+  isSingleButton?: boolean,
 }
 
 const ProductCard = ({
@@ -21,6 +23,7 @@ const ProductCard = ({
   buttonText = 'Buy Now',
   imageSrc,
   isNotSell,
+  isSingleButton,
 }: ProductCardProps) => {
   if (isNotSell) {
     return <div className={`${s.productCardWarpper} ${s.notSell}`}>
@@ -56,12 +59,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>
   )

From 4ae9ace396bb51ea2f34c6ff9295550a4b199fc8 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 09:35:58 +0700
Subject: [PATCH 17/30] :bug: bug: toggle btn cart in from btn in header -
 mobile view

:%s
---
 src/components/common/Header/Header.tsx       |  2 +-
 .../HeaderMenu/HeaderMenu.module.scss         | 26 ++++++++--------
 .../components/HeaderMenu/HeaderMenu.tsx      | 30 +++++++++----------
 3 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 42dffbe0f..7aad47d71 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -78,7 +78,7 @@ const Header = memo(({ toggleFilter }: props) => {
                     openModalInfo={openModalInfo} />
             </div>
 
-            <HeaderSubMenuMobile />
+            <HeaderSubMenuMobile/>
             <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
             <ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />
             <CartDrawer
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
index 09f4dadbc..62932206f 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
@@ -47,6 +47,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 +83,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..293d556fe 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -13,11 +13,11 @@ interface Props {
     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 router = useRouter()
@@ -44,16 +44,16 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter,
         <section className={classNames({ [s.headerMenu]: true, [s.full]: isFull })}>
             <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 +86,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>
     )

From b312069710bd89fd2a14324089b3e3740c986095 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 09:42:06 +0700
Subject: [PATCH 18/30] :art: styles: cart drawer spacing

:%s
---
 src/components/common/CartDrawer/CartDrawer.module.scss        | 3 ---
 src/components/common/CartDrawer/CartDrawer.tsx                | 2 +-
 .../CartRecommendation/CartRecommendation.module.scss          | 2 +-
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/common/CartDrawer/CartDrawer.module.scss b/src/components/common/CartDrawer/CartDrawer.module.scss
index 3ff81bc0a..d5bba6c57 100644
--- a/src/components/common/CartDrawer/CartDrawer.module.scss
+++ b/src/components/common/CartDrawer/CartDrawer.module.scss
@@ -6,7 +6,4 @@
     .body {
         @apply flex flex-col justify-center overflow-y-auto overflow-x-hidden h-full custom-scroll;
     }
-    .bottom {
-        padding-top: 1.6rem;
-    }
 }
\ No newline at end of file
diff --git a/src/components/common/CartDrawer/CartDrawer.tsx b/src/components/common/CartDrawer/CartDrawer.tsx
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/CartRecommendation/CartRecommendation.module.scss b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
index 1d0f95582..11b781537 100644
--- a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
+++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
@@ -2,7 +2,7 @@
 
 .cartRecommendation {
     @apply w-full bg-background-gray;
-    padding-bottom: 1.6rem;
+    padding-bottom: 5.4rem;
     .top {
         @apply flex justify-between items-center;
         padding: 1.6rem;

From 362ae97526299262c325bccb5e1677b450ef258f Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 09:44:03 +0700
Subject: [PATCH 19/30] :art: styles: arrow in cart recommendation

:%s
---
 .../CartRecommendation.module.scss                  | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
index 11b781537..9095aadc1 100644
--- a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
+++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.module.scss
@@ -1,4 +1,4 @@
-@import '../../../../../styles/utilities';
+@import "../../../../../styles/utilities";
 
 .cartRecommendation {
     @apply w-full bg-background-gray;
@@ -14,14 +14,9 @@
         padding-left: 1.6rem;
         :global(.customArrow) {
             @apply bg-line shadow-md;
-            opacity: .8;
-            @screen lg {
-                &:global(.leftArrow) {
-                    left: calc(-6.4rem - 2rem);
-                }
-                &:global(.rightArrow) {
-                    right: calc(-6.4rem - 2rem);
-                }
+            opacity: 0.8;
+            &:global(.rightArrow) {
+                right: 1rem;
             }
         }
     }

From 20d6ebf24cb31c7e67c97c90c22224cadb3c9699 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 10:43:38 +0700
Subject: [PATCH 20/30] :art: styles: fix header active item in mobile and
 color when tap to link header

:%s
---
 .../HeaderSubMenuMobile.module.scss                  | 12 +++++++-----
 .../HeaderSubMenuMobile/HeaderSubMenuMobile.tsx      |  9 +++++++--
 src/components/icons/IconNoti.tsx                    | 11 +++++++++++
 src/components/icons/index.ts                        |  1 +
 src/utils/constanst.utils.ts                         |  1 +
 5 files changed, 27 insertions(+), 7 deletions(-)
 create mode 100644 src/components/icons/IconNoti.tsx

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..ee15ac2cf 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.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.NOTIFICATION}`,
+        name: 'Notifications',
+        icon: <IconNoti />,
+        isMarked: true,
+    },
     {
         link: ROUTE.ACCOUNT,
         name: 'Account',
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 7dd36b14f..0a6aab07a 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -33,3 +33,4 @@ export { default as IconMinus } from './IconMinus'
 export { default as IconCirclePlus } from './IconCirclePlus'
 export { default as IconDoneCheckout } from './IconDoneCheckout'
 export { default as IconFilter } from './IconFilter'
+export { default as IconNoti } from './IconNoti'
\ No newline at end of file
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index bdb2665db..ad3a5bf81 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -30,6 +30,7 @@ export const ACCOUNT_TAB = {
     CUSTOMER_INFO: '',
     ORDER: 'orders',
     FAVOURITE: 'wishlist',
+    NOTIFICATION: 'notification',
 }
 
 export const QUERY_KEY = {

From faf0bc1e35fa25294ff66d9ae0deca6d4fe84b4d Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 10:52:58 +0700
Subject: [PATCH 21/30] :art: styles: img common in product cart

:%s
---
 src/components/common/ProductCard/ProductCard.module.scss | 6 ++++++
 src/components/common/ProductCard/ProductCard.tsx         | 3 ++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss
index 4a11c7ff0..170ac7743 100644
--- a/src/components/common/ProductCard/ProductCard.module.scss
+++ b/src/components/common/ProductCard/ProductCard.module.scss
@@ -16,6 +16,12 @@
             height: 100%;
             width: 100%;
             @apply flex justify-center items-center;
+            > div {
+                min-height: 13rem;
+                img {
+                    object-fit: contain;
+                }
+            }
             img {
                 @apply inline;
             }
diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx
index f867d3724..af982cbd1 100644
--- a/src/components/common/ProductCard/ProductCard.tsx
+++ b/src/components/common/ProductCard/ProductCard.tsx
@@ -3,6 +3,7 @@ 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'
@@ -37,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}>

From 3e001bbf1804dbf928709629be7ae0218c3e1681 Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Tue, 14 Sep 2021 11:48:24 +0700
Subject: [PATCH 22/30] refactor: change image

---
 .../common/CardBlog/CardBlog.module.scss      |  5 ++-
 src/components/common/CardBlog/CardBlog.tsx   |  4 +-
 .../RelevantBlogPosts/RelevantBlogPosts.tsx   | 15 +++----
 .../modules/blogs/BlogsList/BlogsList.tsx     | 42 ++++++++-----------
 .../FeaturedCardBlog.module.scss              | 10 +++--
 .../FeaturedCardBlog/FeaturedCardBlog.tsx     | 15 +++----
 6 files changed, 42 insertions(+), 49 deletions(-)

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

From 0eb8ade7308f5e9d1de16e93e6677307139de1dd Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 14:01:19 +0700
Subject: [PATCH 23/30] :art: styles: border radius input common default

:%s
---
 .../common/InputCommon/InputCommon.module.scss        |  3 ++-
 .../common/MenuDropdown/MenuDropdown.module.scss      |  3 ++-
 .../ModalCreateUserInfo/ModalCreateUserInfo.tsx       |  9 +++------
 src/utils/constanst.utils.ts                          | 11 +++++++++++
 tailwind.config.js                                    |  3 ---
 5 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/common/InputCommon/InputCommon.module.scss b/src/components/common/InputCommon/InputCommon.module.scss
index 1c64c764e..5471b2169 100644
--- a/src/components/common/InputCommon/InputCommon.module.scss
+++ b/src/components/common/InputCommon/InputCommon.module.scss
@@ -17,7 +17,8 @@
     }
 
     .inputCommon {
-      @apply block w-full transition-all duration-200 rounded bg-white;
+      @apply block w-full transition-all duration-200 bg-white;
+      border-radius: .8rem;
       padding: 1.6rem;
       border: 1px solid var(--border-line);
       &:hover,
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/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index ad3a5bf81..b1afabb7a 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -119,3 +119,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/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',

From 083d0f11420c05436ac602169835d70667707435 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 14:01:36 +0700
Subject: [PATCH 24/30] :art: styles: set border width select commong =1px

:%s
---
 src/components/common/SelectCommon/SelectCommon.module.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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

From b3b5a310d8a044c5874ec329ff533e868193023c Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 14:13:51 +0700
Subject: [PATCH 25/30] :art: styles: fix header animation

:%s
---
 src/components/common/Header/Header.tsx                      | 3 +--
 .../components/HeaderHighLight/HeaderHighLight.module.scss   | 1 +
 .../Header/components/HeaderMenu/HeaderMenu.module.scss      | 4 ----
 .../common/Header/components/HeaderMenu/HeaderMenu.tsx       | 5 ++---
 .../components/HeaderSubMenu/HeaderSubMenu.module.scss       | 1 +
 5 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 7aad47d71..1638b6571 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -59,7 +59,6 @@ const Header = memo(({ toggleFilter }: props) => {
                     <HeaderMenu
                         toggleFilter={toggleFilter}
                         toggleCart={toggleCart}
-                        isFull={isFullHeader}
                         openModalAuthen={openModalAuthen}
                         openModalInfo={openModalInfo} />
                     <HeaderSubMenu />
@@ -71,7 +70,7 @@ const Header = memo(({ toggleFilter }: props) => {
                 [s.headerSticky]: true,
                 [s.show]: !isFullHeader
             })}>
-                <HeaderMenu isFull={isFullHeader}
+                <HeaderMenu
                     toggleFilter={toggleFilter}
                     toggleCart={toggleCart}
                     openModalAuthen={openModalAuthen}
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 62932206f..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 {
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
index 293d556fe..4aefb954c 100644
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -10,7 +10,6 @@ import s from './HeaderMenu.module.scss'
 import { useRouter } from 'next/router'
 interface Props {
     children?: any,
-    isFull: boolean,
     openModalAuthen: () => void,
     openModalInfo: () => void,
     toggleFilter: () => void,
@@ -19,7 +18,7 @@ interface Props {
 
 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(() => [
         {
@@ -41,7 +40,7 @@ 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 />
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 {

From 9802a6537a5aa8f0f8d996c7b5ef4c3b975d41ce Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 14:14:00 +0700
Subject: [PATCH 26/30] :art: styles: recipe detail

:%s
---
 pages/product/[slug].tsx                             |  4 ++--
 pages/recipe/[slug].tsx                              | 12 ++++++++++++
 .../RecommendedRecipes.module.scss                   |  2 +-
 .../RecommendedRecipes/RecommendedRecipes.tsx        |  0
 src/components/common/index.ts                       |  1 +
 src/components/modules/product-detail/index.ts       |  1 -
 src/styles/_pages.scss                               |  6 ++++++
 src/styles/main.scss                                 |  2 ++
 8 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 pages/recipe/[slug].tsx
 rename src/components/{modules/product-detail => common}/RecommendedRecipes/RecommendedRecipes.module.scss (94%)
 rename src/components/{modules/product-detail => common}/RecommendedRecipes/RecommendedRecipes.tsx (100%)
 create mode 100644 src/styles/_pages.scss

diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index 5413c686a..ab9a1c17c 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -1,6 +1,6 @@
 
-import { Layout, RecipeDetail, RelevantBlogPosts } from 'src/components/common'
-import { ProductInfoDetail, RecommendedRecipes, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
+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() {
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/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/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/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/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/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'

From 8452638097c533a5c1ea38930d32fa4f3f962d37 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 14:20:46 +0700
Subject: [PATCH 27/30] :recycle: enhan: link to recipe detail

:%s
---
 .../common/RecipeCard/RecipeCard.tsx          | 21 ++++++++++++-------
 src/utils/constanst.utils.ts                  | 11 +++++++---
 2 files changed, 21 insertions(+), 11 deletions(-)

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/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index b1afabb7a..e85f5fdee 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -9,12 +9,18 @@ export const SOCIAL_LINKS = {
 
 export const ROUTE = {
     HOME: '/',
-    PRODUCTS: '/products',
-    PRODUCT_DETAIL: '/product',
     ABOUT: '/about',
     ACCOUNT: '/account',
+
+    PRODUCTS: '/products',
+    PRODUCT_DETAIL: '/product',
+    
+    BLOGS: '/blogs',
     BLOG_DETAIL: '/blog',
+
     RECIPES: '/recipes',
+    RECIPE_DETAIL: '/recipe',
+
     BUSSINESS: '/bussiness',
     CONTACT: '/contact',
     CHECKOUT: '/checkout',
@@ -22,7 +28,6 @@ export const ROUTE = {
     CUSTOMER_SERVICE: '/customer-service',
     TERM_CONDITION: '/term-condition',
     PRIVACY_POLICY: '/privacy-policy',
-    BLOGS: '/blogs',
     FORGOT_PASSWORD: '/forgot-password'
 }
 

From 208ddd146f3cab88bbd56a0324a9b2cc1540d718 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 14:33:08 +0700
Subject: [PATCH 28/30] :wrench: config: (image) set minimumCacheTTL=60

:%s
---
 next.config.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

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)
   },
 })

From df47b3a6f4024361d29e05018eee31203fef2c86 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 14:36:54 +0700
Subject: [PATCH 29/30] :recycle: enhan: add prop blurDataURL to component
 ImgWithLink

:%s
---
 src/components/common/ImgWithLink/ImgWithLink.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

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>
     )

From a99b4d5e2172a6ce973fdc06cc4311ec37f7566c Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 14 Sep 2021 14:45:00 +0700
Subject: [PATCH 30/30] bugs: header animation

---
 src/components/common/Header/Header.tsx       | 25 +++++++++----------
 .../modules/home/HomeBanner/HomeBanner.tsx    |  3 +--
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 1638b6571..eea61abb9 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -53,6 +53,17 @@ 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}>
@@ -65,19 +76,7 @@ const Header = memo(({ toggleFilter }: props) => {
                 </div>
             </header>
 
-
-            <div className={classNames({
-                [s.headerSticky]: true,
-                [s.show]: !isFullHeader
-            })}>
-                <HeaderMenu
-                    toggleFilter={toggleFilter}
-                    toggleCart={toggleCart}
-                    openModalAuthen={openModalAuthen}
-                    openModalInfo={openModalInfo} />
-            </div>
-
-            <HeaderSubMenuMobile/>
+            <HeaderSubMenuMobile />
             <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} />
             <ModalCreateUserInfo demoVisible={visibleModalInfo} demoCloseModal={closeModalInfo} />
             <CartDrawer
diff --git a/src/components/modules/home/HomeBanner/HomeBanner.tsx b/src/components/modules/home/HomeBanner/HomeBanner.tsx
index 90732211a..ebb9af6bf 100644
--- a/src/components/modules/home/HomeBanner/HomeBanner.tsx
+++ b/src/components/modules/home/HomeBanner/HomeBanner.tsx
@@ -1,10 +1,9 @@
 import React from 'react'
 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'
-import { ROUTE } from 'src/utils/constanst.utils'
 
 interface Props {
     className?: string