diff --git a/.eslintrc.json b/.eslintrc.json
index c9c0675c3..9bf93a0f7 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -23,7 +23,8 @@
     }
   },
   "plugins": [
-    "react-hooks"
+    "react-hooks",
+    "import"
   ],
   "rules": {
     "react/function-component-definition": [
@@ -50,12 +51,12 @@
     "curly": "error",
     "eol-last": "off",
     "import/extensions": "off",
-    "import/no-extraneous-dependencies": "off",
-    "import/no-unresolved": "off",
-    "import/prefer-default-export": "off",
+    "import/no-named-default": "error",
+    "import/order": ["error", {"newlines-between": "always"}],
+    "import/prefer-default-export": "warn",
     "indent": [
-      "error",
-      2,
+    "error",
+    2,
       {
         "SwitchCase": 1
       }
@@ -126,6 +127,10 @@
     "react/jsx-indent": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
-    "semi": "off"
+    "semi": "off",
+
+    "import/no-commonjs": 0,
+    "import/no-dynamic-require": "off",
+    "global-require": "off"
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 79e93a77f..c9a3b0644 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,6 @@
         "@babel/eslint-parser": "^7.18.9",
         "eslint": "^8.21.0",
         "eslint-config-airbnb": "^19.0.4",
-        "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-jsx-a11y": "^6.6.1",
         "eslint-plugin-react": "^7.30.1",
         "eslint-plugin-react-hooks": "^4.6.0",
@@ -20,6 +19,7 @@
       },
       "devDependencies": {
         "eslint-plugin-flowtype": "^8.0.3",
+        "eslint-plugin-import": "^2.27.5",
         "react-scripts": "5.0.1"
       }
     },
@@ -4535,6 +4535,18 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
+      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "is-array-buffer": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -4542,14 +4554,14 @@
       "dev": true
     },
     "node_modules/array-includes": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
-      "integrity": "sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==",
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.6.tgz",
+      "integrity": "sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==",
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5",
-        "get-intrinsic": "^1.1.1",
+        "es-abstract": "^1.20.4",
+        "get-intrinsic": "^1.1.3",
         "is-string": "^1.0.7"
       },
       "engines": {
@@ -4568,13 +4580,13 @@
       }
     },
     "node_modules/array.prototype.flat": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
-      "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
+      "integrity": "sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
         "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
@@ -4585,13 +4597,13 @@
       }
     },
     "node_modules/array.prototype.flatmap": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
-      "integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz",
+      "integrity": "sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
         "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
@@ -4685,6 +4697,17 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/axe-core": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
@@ -6622,33 +6645,44 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.2.tgz",
-      "integrity": "sha512-XxXQuVNrySBNlEkTYJoDNFe5+s2yIOpzq80sUHEdPdQr0S5nTLz4ZPPPswNIpKseDDUS5yghX1gfLIHQZ1iNuQ==",
+      "version": "1.21.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.2.tgz",
+      "integrity": "sha512-y/B5POM2iBnIxCiernH1G7rC9qQoM77lLIMQLuob0zhp8C56Po81+2Nj0WFKnd0pNReDTnkYryc+zhOzpEIROg==",
       "dependencies": {
+        "array-buffer-byte-length": "^1.0.0",
+        "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
+        "es-set-tostringtag": "^2.0.1",
         "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
         "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.1.2",
+        "get-intrinsic": "^1.2.0",
         "get-symbol-description": "^1.0.0",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
         "has": "^1.0.3",
         "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.3",
-        "is-callable": "^1.2.4",
+        "internal-slot": "^1.0.5",
+        "is-array-buffer": "^3.0.2",
+        "is-callable": "^1.2.7",
         "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
         "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.10",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.2",
+        "object-inspect": "^1.12.3",
         "object-keys": "^1.1.1",
         "object.assign": "^4.1.4",
         "regexp.prototype.flags": "^1.4.3",
-        "string.prototype.trimend": "^1.0.5",
-        "string.prototype.trimstart": "^1.0.5",
-        "unbox-primitive": "^1.0.2"
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trim": "^1.2.7",
+        "string.prototype.trimend": "^1.0.6",
+        "string.prototype.trimstart": "^1.0.6",
+        "typed-array-length": "^1.0.4",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.9"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6669,6 +6703,19 @@
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
       "dev": true
     },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
+      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3",
+        "has": "^1.0.3",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-shim-unscopables": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
@@ -6920,12 +6967,13 @@
       }
     },
     "node_modules/eslint-import-resolver-node": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
-      "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
+      "integrity": "sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==",
       "dependencies": {
         "debug": "^3.2.7",
-        "resolve": "^1.20.0"
+        "is-core-module": "^2.11.0",
+        "resolve": "^1.22.1"
       }
     },
     "node_modules/eslint-import-resolver-node/node_modules/debug": {
@@ -6979,22 +7027,24 @@
       }
     },
     "node_modules/eslint-plugin-import": {
-      "version": "2.26.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
-      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+      "version": "2.27.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
+      "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
       "dependencies": {
-        "array-includes": "^3.1.4",
-        "array.prototype.flat": "^1.2.5",
-        "debug": "^2.6.9",
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "array.prototype.flatmap": "^1.3.1",
+        "debug": "^3.2.7",
         "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.6",
-        "eslint-module-utils": "^2.7.3",
+        "eslint-import-resolver-node": "^0.3.7",
+        "eslint-module-utils": "^2.7.4",
         "has": "^1.0.3",
-        "is-core-module": "^2.8.1",
+        "is-core-module": "^2.11.0",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
-        "object.values": "^1.1.5",
-        "resolve": "^1.22.0",
+        "object.values": "^1.1.6",
+        "resolve": "^1.22.1",
+        "semver": "^6.3.0",
         "tsconfig-paths": "^3.14.1"
       },
       "engines": {
@@ -7005,11 +7055,11 @@
       }
     },
     "node_modules/eslint-plugin-import/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dependencies": {
-        "ms": "2.0.0"
+        "ms": "^2.1.1"
       }
     },
     "node_modules/eslint-plugin-import/node_modules/doctrine": {
@@ -7023,11 +7073,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/eslint-plugin-import/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
     "node_modules/eslint-plugin-jest": {
       "version": "25.7.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz",
@@ -7927,6 +7972,14 @@
         }
       }
     },
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dependencies": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "node_modules/fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
@@ -8241,9 +8294,9 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
-      "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -8377,6 +8430,20 @@
         "node": ">=4"
       }
     },
+    "node_modules/globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "dependencies": {
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/globby": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -8396,6 +8463,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -8472,6 +8550,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
@@ -8863,11 +8952,11 @@
       "dev": true
     },
     "node_modules/internal-slot": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
-      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
+      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
       "dependencies": {
-        "get-intrinsic": "^1.1.0",
+        "get-intrinsic": "^1.2.0",
         "has": "^1.0.3",
         "side-channel": "^1.0.4"
       },
@@ -8884,6 +8973,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
+      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.0",
+        "is-typed-array": "^1.1.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -8929,9 +9031,9 @@
       }
     },
     "node_modules/is-callable": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.6.tgz",
-      "integrity": "sha512-krO72EO2NptOGAX2KYyqbP9vYMlNAXdB53rq6f8LXY6RY7JdSR/3BD6wLUlPHSAesmY9vstNrjvqGaCiRK/91Q==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -8940,9 +9042,9 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
-      "integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -9166,6 +9268,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-typed-array": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
+      "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -12162,9 +12282,9 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -12254,13 +12374,13 @@
       }
     },
     "node_modules/object.values": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
-      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
+      "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -14937,6 +15057,19 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "node_modules/safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -15514,27 +15647,43 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz",
+      "integrity": "sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/string.prototype.trimend": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
-      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
+      "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/string.prototype.trimstart": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
-      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
+      "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -16189,6 +16338,19 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typed-array-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "is-typed-array": "^1.1.9"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -16888,6 +17050,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-typed-array": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
+      "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -20588,6 +20769,15 @@
         "@babel/runtime-corejs3": "^7.10.2"
       }
     },
+    "array-buffer-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
+      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "is-array-buffer": "^3.0.1"
+      }
+    },
     "array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -20595,14 +20785,14 @@
       "dev": true
     },
     "array-includes": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
-      "integrity": "sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==",
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.6.tgz",
+      "integrity": "sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==",
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5",
-        "get-intrinsic": "^1.1.1",
+        "es-abstract": "^1.20.4",
+        "get-intrinsic": "^1.1.3",
         "is-string": "^1.0.7"
       }
     },
@@ -20612,24 +20802,24 @@
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="
     },
     "array.prototype.flat": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
-      "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
+      "integrity": "sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
         "es-shim-unscopables": "^1.0.0"
       }
     },
     "array.prototype.flatmap": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
-      "integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz",
+      "integrity": "sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
         "es-shim-unscopables": "^1.0.0"
       }
     },
@@ -20689,6 +20879,11 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
+    },
     "axe-core": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
@@ -22144,33 +22339,44 @@
       }
     },
     "es-abstract": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.2.tgz",
-      "integrity": "sha512-XxXQuVNrySBNlEkTYJoDNFe5+s2yIOpzq80sUHEdPdQr0S5nTLz4ZPPPswNIpKseDDUS5yghX1gfLIHQZ1iNuQ==",
+      "version": "1.21.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.2.tgz",
+      "integrity": "sha512-y/B5POM2iBnIxCiernH1G7rC9qQoM77lLIMQLuob0zhp8C56Po81+2Nj0WFKnd0pNReDTnkYryc+zhOzpEIROg==",
       "requires": {
+        "array-buffer-byte-length": "^1.0.0",
+        "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
+        "es-set-tostringtag": "^2.0.1",
         "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
         "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.1.2",
+        "get-intrinsic": "^1.2.0",
         "get-symbol-description": "^1.0.0",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
         "has": "^1.0.3",
         "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.3",
-        "is-callable": "^1.2.4",
+        "internal-slot": "^1.0.5",
+        "is-array-buffer": "^3.0.2",
+        "is-callable": "^1.2.7",
         "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
         "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.10",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.2",
+        "object-inspect": "^1.12.3",
         "object-keys": "^1.1.1",
         "object.assign": "^4.1.4",
         "regexp.prototype.flags": "^1.4.3",
-        "string.prototype.trimend": "^1.0.5",
-        "string.prototype.trimstart": "^1.0.5",
-        "unbox-primitive": "^1.0.2"
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trim": "^1.2.7",
+        "string.prototype.trimend": "^1.0.6",
+        "string.prototype.trimstart": "^1.0.6",
+        "typed-array-length": "^1.0.4",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.9"
       }
     },
     "es-array-method-boxes-properly": {
@@ -22185,6 +22391,16 @@
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
       "dev": true
     },
+    "es-set-tostringtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
+      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "requires": {
+        "get-intrinsic": "^1.1.3",
+        "has": "^1.0.3",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "es-shim-unscopables": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
@@ -22447,12 +22663,13 @@
       }
     },
     "eslint-import-resolver-node": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
-      "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
+      "integrity": "sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==",
       "requires": {
         "debug": "^3.2.7",
-        "resolve": "^1.20.0"
+        "is-core-module": "^2.11.0",
+        "resolve": "^1.22.1"
       },
       "dependencies": {
         "debug": {
@@ -22494,31 +22711,33 @@
       }
     },
     "eslint-plugin-import": {
-      "version": "2.26.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
-      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+      "version": "2.27.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
+      "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
       "requires": {
-        "array-includes": "^3.1.4",
-        "array.prototype.flat": "^1.2.5",
-        "debug": "^2.6.9",
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "array.prototype.flatmap": "^1.3.1",
+        "debug": "^3.2.7",
         "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.6",
-        "eslint-module-utils": "^2.7.3",
+        "eslint-import-resolver-node": "^0.3.7",
+        "eslint-module-utils": "^2.7.4",
         "has": "^1.0.3",
-        "is-core-module": "^2.8.1",
+        "is-core-module": "^2.11.0",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
-        "object.values": "^1.1.5",
-        "resolve": "^1.22.0",
+        "object.values": "^1.1.6",
+        "resolve": "^1.22.1",
+        "semver": "^6.3.0",
         "tsconfig-paths": "^3.14.1"
       },
       "dependencies": {
         "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
           "requires": {
-            "ms": "2.0.0"
+            "ms": "^2.1.1"
           }
         },
         "doctrine": {
@@ -22528,11 +22747,6 @@
           "requires": {
             "esutils": "^2.0.2"
           }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
         }
       }
     },
@@ -23102,6 +23316,14 @@
       "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
       "dev": true
     },
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "requires": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
@@ -23316,9 +23538,9 @@
       "dev": true
     },
     "get-intrinsic": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
-      "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -23415,6 +23637,14 @@
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
     },
+    "globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "requires": {
+        "define-properties": "^1.1.3"
+      }
+    },
     "globby": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -23428,6 +23658,14 @@
         "slash": "^3.0.0"
       }
     },
+    "gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "requires": {
+        "get-intrinsic": "^1.1.3"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -23486,6 +23724,11 @@
         "get-intrinsic": "^1.1.1"
       }
     },
+    "has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
+    },
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
@@ -23773,11 +24016,11 @@
       "dev": true
     },
     "internal-slot": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
-      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
+      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
       "requires": {
-        "get-intrinsic": "^1.1.0",
+        "get-intrinsic": "^1.2.0",
         "has": "^1.0.3",
         "side-channel": "^1.0.4"
       }
@@ -23788,6 +24031,16 @@
       "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==",
       "dev": true
     },
+    "is-array-buffer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
+      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.0",
+        "is-typed-array": "^1.1.10"
+      }
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -23821,14 +24074,14 @@
       }
     },
     "is-callable": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.6.tgz",
-      "integrity": "sha512-krO72EO2NptOGAX2KYyqbP9vYMlNAXdB53rq6f8LXY6RY7JdSR/3BD6wLUlPHSAesmY9vstNrjvqGaCiRK/91Q=="
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA=="
     },
     "is-core-module": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
-      "integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
       "requires": {
         "has": "^1.0.3"
       }
@@ -23965,6 +24218,18 @@
         "has-symbols": "^1.0.2"
       }
     },
+    "is-typed-array": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
+      "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -26225,9 +26490,9 @@
       "dev": true
     },
     "object-inspect": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ=="
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
     },
     "object-keys": {
       "version": "1.1.1",
@@ -26287,13 +26552,13 @@
       }
     },
     "object.values": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
-      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
+      "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       }
     },
     "obuf": {
@@ -28086,6 +28351,16 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      }
+    },
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -28548,24 +28823,34 @@
         "side-channel": "^1.0.4"
       }
     },
+    "string.prototype.trim": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz",
+      "integrity": "sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
+      }
+    },
     "string.prototype.trimend": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
-      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
+      "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       }
     },
     "string.prototype.trimstart": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
-      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
+      "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       }
     },
     "stringify-object": {
@@ -29056,6 +29341,16 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed-array-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "is-typed-array": "^1.1.9"
+      }
+    },
     "typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -29569,6 +29864,19 @@
         "is-symbol": "^1.0.3"
       }
     },
+    "which-typed-array": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
+      "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0",
+        "is-typed-array": "^1.1.10"
+      }
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
diff --git a/package.json b/package.json
index 7214c8fde..f4b7e0d2d 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,6 @@
     "@babel/eslint-parser": "^7.18.9",
     "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -34,6 +33,7 @@
   },
   "devDependencies": {
     "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.27.5",
     "react-scripts": "5.0.1"
   }
 }
diff --git a/public/icons8-dumbbell.png b/public/icons8-dumbbell.png
new file mode 100644
index 000000000..fba7c4fed
Binary files /dev/null and b/public/icons8-dumbbell.png differ
diff --git a/public/index.html b/public/index.html
index e6730aa66..77e11390a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,10 +13,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Technigo React App</title>
+    <title>Design handoff project - Fit parent</title>
+  <link rel="icon" type="image/png" size="32x32" href="./icons8-dumbbell.png">
+    
   </head>
 
   <body>
+    <!-- Icon cred: <a target="_blank" href="https://icons8.com/icon/46494/dumbbell">Dumbbell</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a> -->
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/src/App.js b/src/App.js
index 781afcf72..052072006 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,13 @@
 import React from 'react'
 
+import Webpage from './components/Webpage';
+
 export const App = () => {
   return (
     <div>
-      Find me in src/app.js!
+      <Webpage />
     </div>
   )
 }
+
+export default App;
\ No newline at end of file
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 000000000..bcffd0574
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import '../index.css';
+
+import logo from '../images/Logo.png'
+import icon1 from '../images/Instagram.png'
+import icon2 from '../images/Facebook.png'
+import icon3 from '../images/LinkedIn.png'
+import icon4 from '../images/Twitter.png'
+
+// eslint-disable-next-line max-len
+const Footer = ({ footerImage, title, link1, link2, link3, link4, link5, link6, link7, link8, link9, shortText }) => {
+  const footerBackground = {
+    backgroundImage: `url(${footerImage})`
+  };
+  return (
+    <div className="footer-container" style={footerBackground}>
+      <div className="footer-content">
+        <div className="footer-col-1">
+          <img src={logo} alt="pageLogo" />
+          <div className="footer-links1">
+            <p>{link1}</p>
+            <p>{link2}</p>
+          </div>
+          <p>{shortText}</p>
+          <img src={icon1} alt="instagram" />
+          <img src={icon2} alt="facebook" />
+          <img src={icon3} alt="linkedin" />
+          <img src={icon4} alt="twitter" />
+        </div>
+        <div className="footer-col-2">
+          <h3>{title}</h3>
+          <div className="footer-links2">
+            <p>{link3}</p>
+            <p>{link4}</p>
+            <p>{link5}</p>
+            <p>{link6}</p>
+            <p>{link7}</p>
+            <p>{link8}</p>
+            <p>{link9}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 000000000..bfc7cac11
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import '../index.css';
+import Logo from '../images/Logo.png'
+import Dads from '../images/Dads.png'
+import Moms from '../images/Moms.png'
+import MomsDads from '../images/MomsDads.png'
+import Food from '../images/Food.png'
+import Hamburger from '../images/Hamburger.png'
+
+const Header = () => {
+  return (
+    <section className="header-section">
+      <div className="header-logo">
+        <img src={Logo} alt="page logo" />
+      </div>
+      <div className="header-menu">
+        <div className="header-content-1">
+          <img src={Dads} alt="dads" />
+        </div>
+        <div className="header-content-2">
+          <img src={Moms} alt="moms" />
+        </div>
+        <div className="header-content3">
+          <img src={MomsDads} alt="moms and dads" />
+        </div>
+        <div className="header-content-4">
+          <img src={Food} alt="food" />
+        </div>
+      </div>
+      <div className="hamburger">
+        <img src={Hamburger} alt="hamburger-menu" />
+      </div>
+    </section>
+  )
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/Hero.js b/src/components/Hero.js
new file mode 100644
index 000000000..a99e9779a
--- /dev/null
+++ b/src/components/Hero.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import '../index.css';
+
+const Hero = ({ title, subtitle, buttonText, onClick, heroImage }) => {
+  const heroBackground = {
+    backgroundImage: `url(${heroImage})`
+  };
+  return (
+    <div className="hero-container" style={heroBackground}>
+      <div className="hero-content">
+        <h1>{title}</h1>
+        <h3>{subtitle}</h3>
+        <button type="button" onClick={onClick}>{buttonText}</button>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;
\ No newline at end of file
diff --git a/src/components/Methods.js b/src/components/Methods.js
new file mode 100644
index 000000000..e49322d14
--- /dev/null
+++ b/src/components/Methods.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import '../index.css';
+
+import img1 from '../images/Icon-1.png'
+import img2 from '../images/Icon-2.png'
+import img3 from '../images/Icon-3.png'
+import img4 from '../images/Icon-4.png'
+
+const Methods = ({ title, img1Title, img2Title, img3Title, img4Title }) => {
+  return (
+    <section className="methods-section">
+      <div className="methods-container">
+        <h2>{title}</h2>
+        <div className="img-container-method">
+          <img src={img1} alt={img1Title} />
+          <p>{img1Title}</p>
+        </div>
+        <div className="img-container-method">
+          <img src={img2} alt={img2Title} />
+          <p>{img2Title}</p>
+        </div>
+        <div className="img-container-method">
+          <img src={img3} alt={img3Title} />
+          <p>{img3Title}</p>
+        </div>
+        <div className="img-container-method">
+          <img src={img4} alt={img4Title} />
+          <p>{img4Title}</p>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Methods;
\ No newline at end of file
diff --git a/src/components/Motivation.js b/src/components/Motivation.js
new file mode 100644
index 000000000..9483a1c21
--- /dev/null
+++ b/src/components/Motivation.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import '../index.css';
+
+import img1 from '../images/Motivation-1.png'
+import img2 from '../images/Motivation-2.png'
+import img3 from '../images/Motivation-3.png'
+import icon from '../images/Read-more.png'
+
+// eslint-disable-next-line max-len
+const Motivation = ({ title, backgroundImg, img1Title, img2Title, img3Title, img1Subtitle, img2Subtitle, img3Subtitle, shortText }) => {
+  const motivationBackground = {
+    backgroundImage: `url(${backgroundImg})`
+  };
+
+  return (
+    <section className="motivation-section" style={motivationBackground}>
+      <div className="motivation-container">
+        <h2>{title}</h2>
+        <div className="images-container">
+          <div className="img-container-motiv">
+            <img src={img1} alt={img1Title} />
+            <h3>{img1Title}</h3>
+            <p>{img1Subtitle}</p>
+          </div>
+          <div className="img-container-motiv">
+            <img src={img2} alt={img2Title} />
+            <h3>{img2Title}</h3>
+            <p>{img2Subtitle}</p>
+          </div>
+          <div className="img-container-motiv">
+            <img src={img3} alt={img3Title} />
+            <h3>{img3Title}</h3>
+            <p>{img3Subtitle}</p>
+          </div>
+        </div>
+        <div className="short-text-container">
+          <p>{shortText}</p>
+          <img src={icon} alt="icon" />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Motivation;
diff --git a/src/components/Plan.js b/src/components/Plan.js
new file mode 100644
index 000000000..15b25792b
--- /dev/null
+++ b/src/components/Plan.js
@@ -0,0 +1,42 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React from 'react';
+import '../index.css'
+
+const Plan = ({ title1, title2, plans, buttonText, finishingText, onClick }) => {
+  return (
+    <section className="plan-section">
+      <h2>{title1}</h2>
+      <div className="plan-buttons">
+        {plans.map((plan) => (
+          <button type="button" key={plan.title} className="plan-button">
+            <span className="plan-button-line1">{plan.title}</span>
+            <span className="plan-button-line2">{plan.amount}</span>
+          </button>
+        ))}
+      </div>
+      <form className="plan-form">
+        <h3>{title2}</h3>
+        <div className="plan-form-name">
+          <label htmlFor="firstName">First name</label>
+          <input type="text" id="firstName" />
+        </div>
+        <div className="plan-form-lastname">
+          <label htmlFor="surname">Surname</label>
+          <input type="text" id="surname" />
+        </div>
+        <div className="plan-form-email">
+          <label htmlFor="email">Email</label>
+          <input type="email" id="email" />
+        </div>
+        <div className="plan-form-pwd">
+          <label htmlFor="password">Password</label>
+          <input type="password" id="password" />
+        </div>
+        <button type="button" className="create-account" onClick={onClick}>{buttonText}</button>
+      </form>
+      <p className="plan-finishing-text">{finishingText}</p>
+    </section>
+  );
+};
+
+export default Plan;
diff --git a/src/components/Program.js b/src/components/Program.js
new file mode 100644
index 000000000..ada3f4144
--- /dev/null
+++ b/src/components/Program.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import '../index.css';
+
+import img1 from '../images/Program-1.png'
+import img2 from '../images/Program-2.png'
+import img3 from '../images/Program-3.png'
+import img4 from '../images/Program-4.png'
+import img5 from '../images/Program-5.png'
+import img6 from '../images/Program-7.png'
+
+// eslint-disable-next-line max-len
+const Program = ({ title, img1Title, img2Title, img3Title, img4Title, img5Title, img6Title, buttonText, onClick }) => {
+  return (
+    <section className="program-section">
+      <div className="program-container">
+        <h2>{title}</h2>
+        <div className="img-container-program">
+          <img src={img1} alt={img1Title} />
+          <h3>{img1Title}</h3>
+        </div>
+        <div className="img-container-program">
+          <img src={img2} alt={img2Title} />
+          <h3>{img2Title}</h3>
+        </div>
+        <div className="img-container-program">
+          <img src={img3} alt={img3Title} />
+          <h3>{img3Title}</h3>
+        </div>
+        <div className="img-container-program">
+          <img src={img4} alt={img4Title} />
+          <h3>{img4Title}</h3>
+        </div>
+        <div className="img-container-program">
+          <img src={img5} alt={img5Title} />
+          <h3>{img5Title}</h3>
+        </div>
+        <div className="img-container-program">
+          <img src={img6} alt={img6Title} />
+          <h3>{img6Title}</h3>
+        </div>
+        <button type="button" onClick={onClick}>{buttonText}</button>
+      </div>
+    </section>
+  )
+}
+
+export default Program;
diff --git a/src/components/Testimonials.js b/src/components/Testimonials.js
new file mode 100644
index 000000000..d509cc353
--- /dev/null
+++ b/src/components/Testimonials.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import '../index.css';
+
+import img1 from '../images/Test-1.png'
+import img2 from '../images/Test-2.png'
+import img3 from '../images/Test-3.png'
+
+// eslint-disable-next-line max-len
+const Testimonial = ({ title, backgroundImg, img1Title, img2Title, img3Title, img1Subtitle, img2Subtitle, img3Subtitle, buttonText, onClick }) => {
+  const testimonialBackground = {
+    backgroundImage: `url(${backgroundImg})`
+  };
+
+  return (
+    <section className="testimonial-section" style={testimonialBackground}>
+      <div className="testimonial-container">
+        <h2>{title}</h2>
+        <div className="images-container-test">
+          <div className="img-container-test">
+            <img src={img1} alt={img1Title} />
+            <p>{img1Title}</p>
+            <h3>{img1Subtitle}</h3>
+          </div>
+          <div className="img-container-test">
+            <img src={img2} alt={img2Title} />
+            <p>{img2Title}</p>
+            <h3>{img2Subtitle}</h3>
+          </div>
+          <div className="img-container-test">
+            <img src={img3} alt={img3Title} />
+            <p>{img3Title}</p>
+            <h3>{img3Subtitle}</h3>
+          </div>
+        </div>
+        <div className="test-btn-container">
+          <button type="button" onClick={onClick}>{buttonText}</button>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Testimonial;
diff --git a/src/components/Webpage.js b/src/components/Webpage.js
new file mode 100644
index 000000000..ea706c1a3
--- /dev/null
+++ b/src/components/Webpage.js
@@ -0,0 +1,92 @@
+import React from 'react';
+
+import HeroImg from '../images/HeroImg.png'
+
+import Hero from './Hero';
+import Motivation from './Motivation';
+import Program from './Program';
+import Plan from './Plan';
+import Testimonials from './Testimonials';
+import Methods from './Methods';
+import Footer from './Footer';
+import Header from './Header';
+
+// import backgroundImage from ''
+
+const WebPage = () => {
+  const plans = [
+    { title: 'Pre-selected', amount: '0 CHF' },
+    { title: '3 months plan', amount: 'XX CHF' },
+    { title: '6 months plan', amount: 'XX CHF' },
+    { title: '12 months plan', amount: 'XX CHF' }
+  ];
+
+  return (
+    <div>
+      <Header />
+      <Hero
+        heroImage={HeroImg}
+        title="Becoming a fit parent"
+        subtitle="Say Goodbye to Excuses and Hello to Results with Our Online Fitness Program for Busy Parents."
+        buttonText="Start trial"
+        onClick={() => console.log('Button clicked!')} />
+      <Motivation
+        // backgroundImg="https://example.com/background.jpg"
+        title="How we get you in shape:"
+        img1Title="Keep at it - even on the worse days"
+        img2Title="Do it when ever where ever you want"
+        img3Title="Push it but with caution"
+        img1Subtitle="Read more about our science-backed hacks"
+        img2Subtitle="With our science-proofed hacks you will not stay behind"
+        img3Subtitle="Our experienced team knows everything about Rectus stasis, C-section and..."
+        shortText="Choose your program" />
+      <Program
+        title="Find your program"
+        img1Title="Active in Pregnancy"
+        img2Title="Getting fit for your child"
+        img3Title="Postnatal recovery"
+        img4Title="Stay strong but soft"
+        img5Title="Busy but fit"
+        img6Title="Start running (again)"
+        buttonText="Load more"
+        onClick={() => console.log('Button clicked!')} />
+      <Plan
+        title1="Choose your plan"
+        title2="Become a fit parent"
+        plans={plans}
+        buttonText="Create account"
+        finishingText="Already have an account? Login"
+        onClick={() => console.log('Button clicked!')} />
+      <Testimonials
+        title="What other parents say about the fit parents program"
+        img1Title="I feel stable with my training - even in tough times."
+        img2Title="It took me some time but I feel very happy about my fitness level now."
+        img3Title="It was a match from the very first training!"
+        img1Subtitle="Simon Owl"
+        img2Subtitle="Belema Hedgehog"
+        img3Subtitle="Selma Whale"
+        buttonText="Start trial"
+        onClick={() => console.log('Button clicked!')} />
+      <Methods
+        title="Read more about our methods"
+        img1Title="Yoga"
+        img2Title="Fitness"
+        img3Title="Pilates"
+        img4Title="Running" />
+      <Footer
+        link1="Impressum"
+        link2="Datenschutz"
+        shortText="Follow us"
+        title="Programs"
+        link3="Active in pregnancy"
+        link4="Getting fit for the child"
+        link5="Postnatal recovery"
+        link6="Stay strong but soft"
+        link7="Start running (again)"
+        link8="Run better"
+        link9="In shape nutrition-plan" />
+    </div>
+  );
+};
+
+export default WebPage;
\ No newline at end of file
diff --git a/src/images/Dads.png b/src/images/Dads.png
new file mode 100644
index 000000000..114574a27
Binary files /dev/null and b/src/images/Dads.png differ
diff --git a/src/images/Facebook.png b/src/images/Facebook.png
new file mode 100644
index 000000000..f3ed1bd11
Binary files /dev/null and b/src/images/Facebook.png differ
diff --git a/src/images/Food.png b/src/images/Food.png
new file mode 100644
index 000000000..a1763c079
Binary files /dev/null and b/src/images/Food.png differ
diff --git a/src/images/Hamburger.png b/src/images/Hamburger.png
new file mode 100644
index 000000000..e6192fb5b
Binary files /dev/null and b/src/images/Hamburger.png differ
diff --git a/src/images/HeroImg.png b/src/images/HeroImg.png
new file mode 100644
index 000000000..822e3aa63
Binary files /dev/null and b/src/images/HeroImg.png differ
diff --git a/src/images/Icon-1.png b/src/images/Icon-1.png
new file mode 100644
index 000000000..c9b51d4e5
Binary files /dev/null and b/src/images/Icon-1.png differ
diff --git a/src/images/Icon-2.png b/src/images/Icon-2.png
new file mode 100644
index 000000000..36656ffd5
Binary files /dev/null and b/src/images/Icon-2.png differ
diff --git a/src/images/Icon-3.png b/src/images/Icon-3.png
new file mode 100644
index 000000000..356cb9710
Binary files /dev/null and b/src/images/Icon-3.png differ
diff --git a/src/images/Icon-4.png b/src/images/Icon-4.png
new file mode 100644
index 000000000..97c126640
Binary files /dev/null and b/src/images/Icon-4.png differ
diff --git a/src/images/Instagram.png b/src/images/Instagram.png
new file mode 100644
index 000000000..7108b09cb
Binary files /dev/null and b/src/images/Instagram.png differ
diff --git a/src/images/LinkedIn.png b/src/images/LinkedIn.png
new file mode 100644
index 000000000..e903c6cd3
Binary files /dev/null and b/src/images/LinkedIn.png differ
diff --git a/src/images/Logo.png b/src/images/Logo.png
new file mode 100644
index 000000000..9fad4e6c9
Binary files /dev/null and b/src/images/Logo.png differ
diff --git a/src/images/Moms.png b/src/images/Moms.png
new file mode 100644
index 000000000..703f3c0f9
Binary files /dev/null and b/src/images/Moms.png differ
diff --git a/src/images/MomsDads.png b/src/images/MomsDads.png
new file mode 100644
index 000000000..328360d44
Binary files /dev/null and b/src/images/MomsDads.png differ
diff --git a/src/images/Motivation-1.png b/src/images/Motivation-1.png
new file mode 100644
index 000000000..e21c23ce9
Binary files /dev/null and b/src/images/Motivation-1.png differ
diff --git a/src/images/Motivation-2.png b/src/images/Motivation-2.png
new file mode 100644
index 000000000..e7eb9693b
Binary files /dev/null and b/src/images/Motivation-2.png differ
diff --git a/src/images/Motivation-3.png b/src/images/Motivation-3.png
new file mode 100644
index 000000000..cc9fa9cf4
Binary files /dev/null and b/src/images/Motivation-3.png differ
diff --git a/src/images/Program-1.png b/src/images/Program-1.png
new file mode 100644
index 000000000..880f966cc
Binary files /dev/null and b/src/images/Program-1.png differ
diff --git a/src/images/Program-2.png b/src/images/Program-2.png
new file mode 100644
index 000000000..631058ad9
Binary files /dev/null and b/src/images/Program-2.png differ
diff --git a/src/images/Program-3.png b/src/images/Program-3.png
new file mode 100644
index 000000000..10f228407
Binary files /dev/null and b/src/images/Program-3.png differ
diff --git a/src/images/Program-4.png b/src/images/Program-4.png
new file mode 100644
index 000000000..7e9fdf041
Binary files /dev/null and b/src/images/Program-4.png differ
diff --git a/src/images/Program-5.png b/src/images/Program-5.png
new file mode 100644
index 000000000..1f31cf10a
Binary files /dev/null and b/src/images/Program-5.png differ
diff --git a/src/images/Program-6.png b/src/images/Program-6.png
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/images/Program-7.png b/src/images/Program-7.png
new file mode 100644
index 000000000..1c24b4632
Binary files /dev/null and b/src/images/Program-7.png differ
diff --git a/src/images/Read-more.png b/src/images/Read-more.png
new file mode 100644
index 000000000..b415a7368
Binary files /dev/null and b/src/images/Read-more.png differ
diff --git a/src/images/Test-1.png b/src/images/Test-1.png
new file mode 100644
index 000000000..8a9e9e797
Binary files /dev/null and b/src/images/Test-1.png differ
diff --git a/src/images/Test-2.png b/src/images/Test-2.png
new file mode 100644
index 000000000..cf2aaba64
Binary files /dev/null and b/src/images/Test-2.png differ
diff --git a/src/images/Test-3.png b/src/images/Test-3.png
new file mode 100644
index 000000000..d5cc5cb20
Binary files /dev/null and b/src/images/Test-3.png differ
diff --git a/src/images/Twitter.png b/src/images/Twitter.png
new file mode 100644
index 000000000..08794ad10
Binary files /dev/null and b/src/images/Twitter.png differ
diff --git a/src/index.css b/src/index.css
index 4a1df4db7..03c93aa4b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,3 +11,100 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.header-section {
+  background-color:#7034E4;
+  height: 4rem;
+  display: flex;
+  align-items: center;
+  position: sticky;
+  top: 0;
+}
+
+.header-logo img {
+  height: 2rem;
+}
+
+.header-logo {
+  flex: 1;
+}
+
+.header-menu {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.hamburger {
+  text-align: right;
+  flex: 1;
+}
+
+.hero-container {
+  height: 40rem;
+  margin-top: 0;
+  margin-left: 0;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.hero-content {
+  text-align: center;
+  color: beige;
+}
+
+h1 {
+  margin: 0;
+}
+
+h2 {
+  margin: 0;
+}
+
+p {
+  margin: 0;
+}
+
+.motivation-section {
+  background-color: #28282b;
+  color: beige;
+}
+
+.program-section {
+  background-color: white;
+}
+
+.plan-section {
+  background-color: #28282b;
+  color: beige;
+}
+
+.testimonial-section {
+  background-color: #344840;
+  color: #e4a195;
+}
+
+.methods-section {
+  background-color: #e4a195;
+  color: #344840;
+}
+
+.footer-container {
+  background-color: #7034E4;
+  color: beige;
+}
+
+.footer-col-1 img {
+  height: 2rem;
+}
+
+.footer-links1 {
+  text-decoration: underline;
+}
+
+.footer-links2 {
+  text-decoration: underline;
+}
+
diff --git a/src/index.js b/src/index.js
index 84eb42916..2c491bf52 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+
 import './index.css'
 import { App } from './App'