create 404Page and ContactPage

package-lock.json

@@ -11,10 +11,12 @@
         "@emotion/react": "^11.7.1",
         "@emotion/styled": "^11.6.0",
         "@mui/icons-material": "^5.2.5",
+        "@mui/lab": "^5.0.0-alpha.62",
         "@mui/material": "^5.2.5",
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
+        "google-maps-react": "^2.0.6",
         "node-sass": "^7.0.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -1847,6 +1849,75 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
       "integrity": "sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg=="
     },
+    "node_modules/@date-io/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-DvPBnNoeuLaoSJZaxgpu54qzRhRKjSYVyQjhznTFrllKuDpm0sDFjHo6lvNLCM/cfMx2gb2PM2zY2kc9C8nmuw=="
+    },
+    "node_modules/@date-io/date-fns": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.11.0.tgz",
+      "integrity": "sha512-mPQ71plBeFrArvBSHtjWMHXA89IUbZ6kuo2dsjlRC/1uNOybo91spIb+wTu03NxKTl8ut07s0jJ9svF71afpRg==",
+      "dependencies": {
+        "@date-io/core": "^2.11.0"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/dayjs": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.11.0.tgz",
+      "integrity": "sha512-w67vRK56NZJIKhJM/CrNbfnIcuMvR3ApfxzNZiCZ5w29sxgBDeKuX4M+P7A9r5HXOMGcsOcpgaoTDINNGkdpGQ==",
+      "dependencies": {
+        "@date-io/core": "^2.11.0"
+      },
+      "peerDependencies": {
+        "dayjs": "^1.8.17"
+      },
+      "peerDependenciesMeta": {
+        "dayjs": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/luxon": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.11.1.tgz",
+      "integrity": "sha512-JUXo01kdPQxLORxqdENrgdUhooKgDUggsNRSdi2BcUhASIY2KGwwWXu8ikVHHGkw+DUF4FOEKGfkQd0RHSvX6g==",
+      "dependencies": {
+        "@date-io/core": "^2.11.0"
+      },
+      "peerDependencies": {
+        "luxon": "^1.21.3 || ^2.x"
+      },
+      "peerDependenciesMeta": {
+        "luxon": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@date-io/moment": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.11.0.tgz",
+      "integrity": "sha512-QSL+83qezQ9Ty0dtFgAkk6eC0GMl/lgYfDajeVUDB3zVA2A038hzczRLBg29ifnBGhQMPABxuOafgWwhDjlarg==",
+      "dependencies": {
+        "@date-io/core": "^2.11.0"
+      },
+      "peerDependencies": {
+        "moment": "^2.24.0"
+      },
+      "peerDependenciesMeta": {
+        "moment": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.7.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
@@ -2826,6 +2897,91 @@
         }
       }
     },
+    "node_modules/@mui/lab": {
+      "version": "5.0.0-alpha.62",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.62.tgz",
+      "integrity": "sha512-oUxGhoaTvNFiXjV6xe3pGu+wvQsDC9R8Q6Os8xL4TUwihdaU/pIBRuUiANtJOZJPgJ1JyUpTwZZDTvOiCQFwZA==",
+      "dependencies": {
+        "@babel/runtime": "^7.16.3",
+        "@date-io/date-fns": "^2.11.0",
+        "@date-io/dayjs": "^2.11.0",
+        "@date-io/luxon": "^2.11.1",
+        "@date-io/moment": "^2.11.0",
+        "@mui/base": "5.0.0-alpha.62",
+        "@mui/system": "^5.2.6",
+        "@mui/utils": "^5.2.3",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2",
+        "react-transition-group": "^4.4.2",
+        "rifm": "^0.12.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "date-fns": "^2.25.0",
+        "dayjs": "^1.10.7",
+        "luxon": "^1.28.0 || ^2.0.0",
+        "moment": "^2.29.1",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/lab/node_modules/@mui/base": {
+      "version": "5.0.0-alpha.62",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.62.tgz",
+      "integrity": "sha512-ItmdSZwHKQbLbAsS3sWguR7OHqYqh2cYWahoVmHb13Kc6bMdmVUTY4x57IlDSU712B0yuA0Q/gPTq7xADKnFow==",
+      "dependencies": {
+        "@babel/runtime": "^7.16.3",
+        "@emotion/is-prop-valid": "^1.1.1",
+        "@mui/utils": "^5.2.3",
+        "@popperjs/core": "^2.4.4",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.6 || ^17.0.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.2.5",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.2.5.tgz",
@@ -2897,12 +3053,12 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "5.2.5",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.2.5.tgz",
-      "integrity": "sha512-vNEB2SXCetXKLeMZ49SZLWeiX8uQeLI/jk/dzqnYdGJx8Eq98hCfTucDfJwt2RUhSYGH/3BET2pZqT3w8aOTzQ==",
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.2.6.tgz",
+      "integrity": "sha512-bqAhli8eGS6v2qxivy2/4K0Ag8o//jsu1G2G6QcieFiT6y7oIF/nd/6Tvw6OSm3roOTifVQWNKwkt1yFWhGS+w==",
       "dependencies": {
         "@babel/runtime": "^7.16.3",
-        "@emotion/cache": "^11.6.0",
+        "@emotion/cache": "^11.7.1",
         "prop-types": "^15.7.2"
       },
       "engines": {
@@ -2927,13 +3083,13 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.2.5",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.2.5.tgz",
-      "integrity": "sha512-UHKsEZCZa0wuR9w8EXRmDVolHjjFBWinMhSmaRuR6nbmxVMUq7AhF5N0+Aw4IhFSehwfpVpf8FOlZDfg9QnGBA==",
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.2.6.tgz",
+      "integrity": "sha512-PZ7bmpWOLikWgqn2zWv9/Xa7lxnRBOmfjoMH7c/IVYJs78W3971brXJ3xV9MEWWQcoqiYQeXzUJaNf4rFbKCBA==",
       "dependencies": {
         "@babel/runtime": "^7.16.3",
         "@mui/private-theming": "^5.2.3",
-        "@mui/styled-engine": "^5.2.5",
+        "@mui/styled-engine": "^5.2.6",
         "@mui/types": "^7.1.0",
         "@mui/utils": "^5.2.3",
         "clsx": "^1.1.1",
@@ -8586,6 +8742,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/google-maps-react": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.6.tgz",
+      "integrity": "sha512-M8Eo9WndfQEfxcmm6yRq03qdJgw1x6rQmJ9DN+a+xPQ3K7yNDGkVDbinrf4/8vcox7nELbeopbm4bpefKewWfQ==",
+      "peerDependencies": {
+        "react": "~0.14.8 || ^15.0.0 || ^16.0.0",
+        "react-dom": "~0.14.8 || ^15.0.0 || ^16.0.0"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.8",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
@@ -15145,6 +15310,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rifm": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
+      "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -16859,19 +17032,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "node_modules/typescript": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz",
-      "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -19257,6 +19417,43 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
       "integrity": "sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg=="
     },
+    "@date-io/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-DvPBnNoeuLaoSJZaxgpu54qzRhRKjSYVyQjhznTFrllKuDpm0sDFjHo6lvNLCM/cfMx2gb2PM2zY2kc9C8nmuw=="
+    },
+    "@date-io/date-fns": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.11.0.tgz",
+      "integrity": "sha512-mPQ71plBeFrArvBSHtjWMHXA89IUbZ6kuo2dsjlRC/1uNOybo91spIb+wTu03NxKTl8ut07s0jJ9svF71afpRg==",
+      "requires": {
+        "@date-io/core": "^2.11.0"
+      }
+    },
+    "@date-io/dayjs": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.11.0.tgz",
+      "integrity": "sha512-w67vRK56NZJIKhJM/CrNbfnIcuMvR3ApfxzNZiCZ5w29sxgBDeKuX4M+P7A9r5HXOMGcsOcpgaoTDINNGkdpGQ==",
+      "requires": {
+        "@date-io/core": "^2.11.0"
+      }
+    },
+    "@date-io/luxon": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.11.1.tgz",
+      "integrity": "sha512-JUXo01kdPQxLORxqdENrgdUhooKgDUggsNRSdi2BcUhASIY2KGwwWXu8ikVHHGkw+DUF4FOEKGfkQd0RHSvX6g==",
+      "requires": {
+        "@date-io/core": "^2.11.0"
+      }
+    },
+    "@date-io/moment": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.11.0.tgz",
+      "integrity": "sha512-QSL+83qezQ9Ty0dtFgAkk6eC0GMl/lgYfDajeVUDB3zVA2A038hzczRLBg29ifnBGhQMPABxuOafgWwhDjlarg==",
+      "requires": {
+        "@date-io/core": "^2.11.0"
+      }
+    },
     "@emotion/babel-plugin": {
       "version": "11.7.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
@@ -19969,6 +20166,42 @@
         "@babel/runtime": "^7.16.3"
       }
     },
+    "@mui/lab": {
+      "version": "5.0.0-alpha.62",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.62.tgz",
+      "integrity": "sha512-oUxGhoaTvNFiXjV6xe3pGu+wvQsDC9R8Q6Os8xL4TUwihdaU/pIBRuUiANtJOZJPgJ1JyUpTwZZDTvOiCQFwZA==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@date-io/date-fns": "^2.11.0",
+        "@date-io/dayjs": "^2.11.0",
+        "@date-io/luxon": "^2.11.1",
+        "@date-io/moment": "^2.11.0",
+        "@mui/base": "5.0.0-alpha.62",
+        "@mui/system": "^5.2.6",
+        "@mui/utils": "^5.2.3",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2",
+        "react-transition-group": "^4.4.2",
+        "rifm": "^0.12.1"
+      },
+      "dependencies": {
+        "@mui/base": {
+          "version": "5.0.0-alpha.62",
+          "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.62.tgz",
+          "integrity": "sha512-ItmdSZwHKQbLbAsS3sWguR7OHqYqh2cYWahoVmHb13Kc6bMdmVUTY4x57IlDSU712B0yuA0Q/gPTq7xADKnFow==",
+          "requires": {
+            "@babel/runtime": "^7.16.3",
+            "@emotion/is-prop-valid": "^1.1.1",
+            "@mui/utils": "^5.2.3",
+            "@popperjs/core": "^2.4.4",
+            "clsx": "^1.1.1",
+            "prop-types": "^15.7.2",
+            "react-is": "^17.0.2"
+          }
+        }
+      }
+    },
     "@mui/material": {
       "version": "5.2.5",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.2.5.tgz",
@@ -19999,23 +20232,23 @@
       }
     },
     "@mui/styled-engine": {
-      "version": "5.2.5",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.2.5.tgz",
-      "integrity": "sha512-vNEB2SXCetXKLeMZ49SZLWeiX8uQeLI/jk/dzqnYdGJx8Eq98hCfTucDfJwt2RUhSYGH/3BET2pZqT3w8aOTzQ==",
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.2.6.tgz",
+      "integrity": "sha512-bqAhli8eGS6v2qxivy2/4K0Ag8o//jsu1G2G6QcieFiT6y7oIF/nd/6Tvw6OSm3roOTifVQWNKwkt1yFWhGS+w==",
       "requires": {
         "@babel/runtime": "^7.16.3",
-        "@emotion/cache": "^11.6.0",
+        "@emotion/cache": "^11.7.1",
         "prop-types": "^15.7.2"
       }
     },
     "@mui/system": {
-      "version": "5.2.5",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.2.5.tgz",
-      "integrity": "sha512-UHKsEZCZa0wuR9w8EXRmDVolHjjFBWinMhSmaRuR6nbmxVMUq7AhF5N0+Aw4IhFSehwfpVpf8FOlZDfg9QnGBA==",
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.2.6.tgz",
+      "integrity": "sha512-PZ7bmpWOLikWgqn2zWv9/Xa7lxnRBOmfjoMH7c/IVYJs78W3971brXJ3xV9MEWWQcoqiYQeXzUJaNf4rFbKCBA==",
       "requires": {
         "@babel/runtime": "^7.16.3",
         "@mui/private-theming": "^5.2.3",
-        "@mui/styled-engine": "^5.2.5",
+        "@mui/styled-engine": "^5.2.6",
         "@mui/types": "^7.1.0",
         "@mui/utils": "^5.2.3",
         "clsx": "^1.1.1",
@@ -20026,8 +20259,7 @@
     "@mui/types": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.0.tgz",
-      "integrity": "sha512-Hh7ALdq/GjfIwLvqH3XftuY3bcKhupktTm+S6qRIDGOtPtRuq2L21VWzOK4p7kblirK0XgGVH5BLwa6u8z/6QQ==",
-      "requires": {}
+      "integrity": "sha512-Hh7ALdq/GjfIwLvqH3XftuY3bcKhupktTm+S6qRIDGOtPtRuq2L21VWzOK4p7kblirK0XgGVH5BLwa6u8z/6QQ=="
     },
     "@mui/utils": {
       "version": "5.2.3",
@@ -21061,14 +21293,12 @@
     "acorn-import-assertions": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
-      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "requires": {}
+      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw=="
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "requires": {}
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
     },
     "acorn-node": {
       "version": "1.8.2",
@@ -21163,8 +21393,7 @@
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "requires": {}
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -21528,8 +21757,7 @@
     "babel-plugin-named-asset-import": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz",
-      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==",
-      "requires": {}
+      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q=="
     },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.3.0",
@@ -22319,8 +22547,7 @@
     "css-prefers-color-scheme": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.0.tgz",
-      "integrity": "sha512-Ko2uKO81GbDgV1DG0OywofFy8Oz3/beGryi3ohmXAGo3duZI2HCz6MCQq85WdiKhWE7N3pMjUByIh137Xp5v6g==",
-      "requires": {}
+      "integrity": "sha512-Ko2uKO81GbDgV1DG0OywofFy8Oz3/beGryi3ohmXAGo3duZI2HCz6MCQq85WdiKhWE7N3pMjUByIh137Xp5v6g=="
     },
     "css-select": {
       "version": "4.2.1",
@@ -22424,8 +22651,7 @@
     "cssnano-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz",
-      "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==",
-      "requires": {}
+      "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ=="
     },
     "csso": {
       "version": "4.2.0",
@@ -23376,8 +23602,7 @@
     "eslint-plugin-react-hooks": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz",
-      "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==",
-      "requires": {}
+      "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA=="
     },
     "eslint-plugin-testing-library": {
       "version": "5.0.1",
@@ -24178,6 +24403,11 @@
         }
       }
     },
+    "google-maps-react": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.6.tgz",
+      "integrity": "sha512-M8Eo9WndfQEfxcmm6yRq03qdJgw1x6rQmJ9DN+a+xPQ3K7yNDGkVDbinrf4/8vcox7nELbeopbm4bpefKewWfQ=="
+    },
     "graceful-fs": {
       "version": "4.2.8",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
@@ -24481,8 +24711,7 @@
     "icss-utils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "requires": {}
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
     },
     "idb": {
       "version": "6.1.5",
@@ -25560,8 +25789,7 @@
     "jest-pnp-resolver": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
-      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "requires": {}
+      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w=="
     },
     "jest-regex-util": {
       "version": "27.4.0",
@@ -27434,8 +27662,7 @@
     "postcss-browser-comments": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz",
-      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==",
-      "requires": {}
+      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg=="
     },
     "postcss-calc": {
       "version": "8.0.0",
@@ -27492,8 +27719,7 @@
     "postcss-custom-media": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz",
-      "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==",
-      "requires": {}
+      "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g=="
     },
     "postcss-custom-properties": {
       "version": "12.0.1",
@@ -27522,26 +27748,22 @@
     "postcss-discard-comments": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz",
-      "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==",
-      "requires": {}
+      "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg=="
     },
     "postcss-discard-duplicates": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz",
-      "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==",
-      "requires": {}
+      "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA=="
     },
     "postcss-discard-empty": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz",
-      "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==",
-      "requires": {}
+      "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw=="
     },
     "postcss-discard-overridden": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz",
-      "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==",
-      "requires": {}
+      "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q=="
     },
     "postcss-double-position-gradients": {
       "version": "3.0.3",
@@ -27562,8 +27784,7 @@
     "postcss-flexbugs-fixes": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
-      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
-      "requires": {}
+      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ=="
     },
     "postcss-focus-visible": {
       "version": "6.0.2",
@@ -27584,14 +27805,12 @@
     "postcss-font-variant": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
-      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
-      "requires": {}
+      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA=="
     },
     "postcss-gap-properties": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.1.tgz",
-      "integrity": "sha512-t7ztwUmG17KQRTHDWeekeSQ41ZsjYK+OJagee3E3hFS46n9RD5QcT/NRxwbc2DWjVSL5GQf46al3wEiH6FRSKg==",
-      "requires": {}
+      "integrity": "sha512-t7ztwUmG17KQRTHDWeekeSQ41ZsjYK+OJagee3E3hFS46n9RD5QcT/NRxwbc2DWjVSL5GQf46al3wEiH6FRSKg=="
     },
     "postcss-image-set-function": {
       "version": "4.0.3",
@@ -27604,8 +27823,7 @@
     "postcss-initial": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
-      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
-      "requires": {}
+      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ=="
     },
     "postcss-js": {
       "version": "3.0.3",
@@ -27647,14 +27865,12 @@
     "postcss-logical": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.1.tgz",
-      "integrity": "sha512-cKekWCoZrxdQktbj8PyCOqQWxsYAPyHjoeBPedkQzfWuEqRm0KVFRHypsHAiH2dDVUae52yx8PBtWS+V3BqT5w==",
-      "requires": {}
+      "integrity": "sha512-cKekWCoZrxdQktbj8PyCOqQWxsYAPyHjoeBPedkQzfWuEqRm0KVFRHypsHAiH2dDVUae52yx8PBtWS+V3BqT5w=="
     },
     "postcss-media-minmax": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
-      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
-      "requires": {}
+      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ=="
     },
     "postcss-merge-longhand": {
       "version": "5.0.4",
@@ -27717,8 +27933,7 @@
     "postcss-modules-extract-imports": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "requires": {}
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw=="
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -27775,8 +27990,7 @@
     "postcss-normalize-charset": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz",
-      "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==",
-      "requires": {}
+      "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg=="
     },
     "postcss-normalize-display-values": {
       "version": "5.0.1",
@@ -27859,14 +28073,12 @@
     "postcss-overflow-shorthand": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.1.tgz",
-      "integrity": "sha512-/ajDNoTF+LiuhIZjenjb/ndBoKP/WYy/dTT8BCCtLU1wrezkax+lXw5r3c5qR4cadNNMbksAnhWJXNjd9xNTHA==",
-      "requires": {}
+      "integrity": "sha512-/ajDNoTF+LiuhIZjenjb/ndBoKP/WYy/dTT8BCCtLU1wrezkax+lXw5r3c5qR4cadNNMbksAnhWJXNjd9xNTHA=="
     },
     "postcss-page-break": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
-      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
-      "requires": {}
+      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ=="
     },
     "postcss-place": {
       "version": "7.0.2",
@@ -27945,8 +28157,7 @@
     "postcss-replace-overflow-wrap": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
-      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
-      "requires": {}
+      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw=="
     },
     "postcss-selector-not": {
       "version": "5.0.0",
@@ -28824,6 +29035,11 @@
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
+    "rifm": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
+      "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg=="
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -29633,8 +29849,7 @@
     "style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
-      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
-      "requires": {}
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ=="
     },
     "stylehacks": {
       "version": "5.0.1",
@@ -30142,12 +30357,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "typescript": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz",
-      "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==",
-      "peer": true
-    },
     "unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -30542,8 +30751,7 @@
         "ws": {
           "version": "8.4.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.4.0.tgz",
-          "integrity": "sha512-IHVsKe2pjajSUIl4KYMQOdlyliovpEPquKkqbwswulszzI7r0SfQrxnXdWAEqOlDCLrVSJzo+O1hAwdog2sKSQ==",
-          "requires": {}
+          "integrity": "sha512-IHVsKe2pjajSUIl4KYMQOdlyliovpEPquKkqbwswulszzI7r0SfQrxnXdWAEqOlDCLrVSJzo+O1hAwdog2sKSQ=="
         }
       }
     },
@@ -30992,8 +31200,7 @@
     "ws": {
       "version": "7.5.6",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz",
-      "integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==",
-      "requires": {}
+      "integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA=="
     },
     "xml-name-validator": {
       "version": "3.0.0",

package.json

@@ -6,10 +6,12 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@mui/icons-material": "^5.2.5",
+    "@mui/lab": "^5.0.0-alpha.62",
     "@mui/material": "^5.2.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "google-maps-react": "^2.0.6",
     "node-sass": "^7.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/App.js

@@ -2,14 +2,20 @@ import './App.scss';
 import {Router, Route, Link, Redirect} from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
 import MainPage from "./pages/MainPage";
-
+import Page404 from "./pages/404Page";
+import ContactPage from "./pages/ContactPage";
+import Switch from "react-router-dom/es/Switch";
 
 const history = createHistory();
 
 function App() {
   return (
       <Router history={history}>
-        <MainPage/>
+          <Switch>
+              <Route path="/" component={MainPage} exact/>
+              <Route path="/contact" component={ContactPage} />
+              <Route path="*" component={Page404} />
+          </Switch>
       </Router>
   )
 }

src/components/Breadcrumbs.jsx

@@ -5,7 +5,7 @@ import Stack from '@mui/material/Stack';
 import {Typography, useMediaQuery} from "@mui/material";
 import background from "../img/breadcrumbs/bg-breadcrumbs.png";
 
-const Breadcrumb = ({links=['this page']}) => {
+const Breadcrumb = ({links=['this page'], title}) => {
     const matches = useMediaQuery('(max-width:899px)');
 
     let arr = links.map(i => {
@@ -14,7 +14,7 @@ const Breadcrumb = ({links=['this page']}) => {
                     style={{
                         color: "#fff",
                         textDecoration: "none",
-                        fontSize: "13px"
+                        fontSize: "11px"
                     }}
                     to={`/${link}`}> {i.toUpperCase()}
                 </Link>
@@ -22,15 +22,15 @@ const Breadcrumb = ({links=['this page']}) => {
     arr.unshift(<Link style={{
         color: "#fff",
         textDecoration: "none",
-        fontSize: "13px"
-    }} to="/"> MAIN PAGE </Link>)
+        fontSize: "11px"
+    }} to="/"> HOME </Link>)
 
     return (
         <article
             style={{
-                background: `url(${background}) center repeat`,
+                background: `url(${background}) center/contain repeat`,
                 padding: "40px 0",
-                height: "260px",
+                height: "210px",
                 display: "flex",
                 flexDirection: "column",
                 justifyContent: "center",
@@ -43,12 +43,12 @@ const Breadcrumb = ({links=['this page']}) => {
                 color="#fff"
                 variant={matches ? "h4" : "h3"}
             >
-                {links[links.length-1].toUpperCase()}
+                {title || links[links.length-1].toUpperCase()}
             </Typography>
             <Stack
                 spacing={2}
                 position="absolute"
-                bottom="50px"
+                bottom="40px"
             >
                 <Breadcrumbs color="#fff" separator="›" aria-label="breadcrumb">
                     {arr}

src/components/Footer.jsx

@@ -10,6 +10,7 @@ import YouTubeIcon from '@mui/icons-material/YouTube';
 import LinkRouter from "react-router-dom/es/Link";
 import background from "../img/footer/bg-footer.png"
 import "../scss/Footer.scss"
+import Social from "./SocialLink";
 
 
 const contactDefault = [
@@ -52,21 +53,6 @@ const Contact = ({Icon, text, link}) => {
         </Typography>
     )
 }
-const Social = ({Icon, link}) => {
-    return (
-        <Link
-            className='Footer__Social'
-            marginRight="30px"
-            component="a"
-            variant="body2"
-            href={link}
-            color="#969696"
-            underline="none"
-        >
-            <Icon />
-        </Link>
-    )
-}
 
 const Footer = ({contact=contactDefault, linksSocial=linksSocialDefault}) => {
     const matches = useMediaQuery('(max-width:899px)');

src/components/GoogleMap.jsx

@@ -0,0 +1,41 @@
+import React, {Component} from "react";
+import {GoogleApiWrapper, Map, Marker} from "google-maps-react";
+
+export class MapContainer extends Component {
+    state = {
+        showingInfoWindow: false,
+        activeMarker: {},
+        selectedPlace: {},
+        mapCenter: {
+            lat: this.props.lat,
+            lng: this.props.lng
+        }
+    };
+
+    onMarkerClick = (props, marker, e) =>
+        this.setState({
+            selectedPlace: props,
+            activeMarker: marker,
+            showingInfoWindow: true
+        });
+
+
+    render() {
+        return (
+            <Map google={this.props.google}
+                 style={{width: '100%'}}
+                 initialCenter={{
+                     lat: this.state.mapCenter.lat,
+                     lng: this.state.mapCenter.lng
+                 }}
+            >
+                <Marker onClick={this.onMarkerClick}
+                        name={'Current location'} />
+            </Map>
+        )
+    }
+}
+
+export default GoogleApiWrapper({
+    apiKey: ('AIzaSyDkXxBec2hJjj5QMNBnqaYzAROJCwP6CzQ')
+})(MapContainer)

src/components/SocialLink.jsx

@@ -0,0 +1,19 @@
+import {Link} from "@mui/material";
+import * as React from "react";
+
+const Social = ({Icon, link}) => {
+    return (
+        <Link
+            className='Footer__Social'
+            marginRight="30px"
+            component="a"
+            variant="body2"
+            href={link}
+            color="#969696"
+            underline="none"
+        >
+            <Icon />
+        </Link>
+    )
+}
+export default Social

src/pages/404Page.jsx

@@ -0,0 +1,52 @@
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import Breadcrumbs from "../components/Breadcrumbs";
+import imgUrl from "../img/not found/1.png"
+import {Box, Container, Typography, useMediaQuery} from "@mui/material";
+
+const Page404 = () => {
+    const matches = useMediaQuery('(max-width:899px)');
+    const matches2 = useMediaQuery('(max-width:450px)');
+    return (
+        <>
+            <Header/>
+            <Breadcrumbs links={['404 page']} title={'PAGE NOT FOUND'}/>
+            <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
+                <Container maxWidth="lg">
+                    <Box sx={{
+                        backgroundColor: "#fff",
+                        height: matches2 ? "250px" : "350px",
+                        display: "flex",
+                        flexDirection: "column",
+                        justifyContent: "center",
+                        alignItems: "center"
+                    }}>
+                        <img style={{
+                            maxWidth: matches2 ? "100px" : "150px"
+                        }} src={imgUrl} alt="PAGE NOT FOUND"/>
+                        <Typography
+                            variant={matches2 ? "h6" : "h5"}
+                            fontFamily="sarif"
+                            fontWeight="300"
+                            marginBottom="20px"
+                            marginTop="20px"
+                            textAlign="center"
+                        >
+                            OOPS! THAT PAGE CAN’T BE FOUND
+                        </Typography>
+                        <Typography
+                            variant={matches2 ? "body1" : "h7"}
+                            textAlign="center"
+                            fontWeight="300"
+                        >
+                            The page you are trying to reach is not available.
+                        </Typography>
+                    </Box>
+                </Container>
+            </main>
+            <Footer/>
+        </>
+    )
+}
+
+export default Page404

src/pages/ContactPage.jsx

@@ -0,0 +1,222 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Header from "../components/Header";
+import Breadcrumbs from "../components/Breadcrumbs";
+import Footer from "../components/Footer";
+import {useState} from "react";
+import {Container, Grid, useMediaQuery} from "@mui/material";
+import FacebookIcon from "@mui/icons-material/Facebook";
+import InstagramIcon from "@mui/icons-material/Instagram";
+import TwitterIcon from "@mui/icons-material/Twitter";
+import YouTubeIcon from "@mui/icons-material/YouTube";
+import Social from "../components/SocialLink";
+import GoogleMap from "../components/GoogleMap";
+
+const defaultAddress = {
+    'NEW YORK': {
+        phones: ['212-371-8500', '212-371-8555'],
+        address: '9 East 40th Street, 3rd Floor, New York City',
+        email: ['newyork@gmail.com'],
+        "social networks": [
+            {icon: FacebookIcon, url: 'https://www.facebook.com/'},
+            {icon: InstagramIcon, url: 'https://www.instagram.com/'},
+            {icon: TwitterIcon, url: 'https://twitter.com/home'},
+            {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
+        ],
+        coordinates: {
+            lat: 40.751936,
+            lng: -73.981081
+        }
+    },
+    'TOKYO':{
+        phones: ['212-371-8500', '212-371-8555'],
+        address: 'Япония, 〒162-0044 Tokyo, Shinjuku City, Kikuicho, ２０−110 エヌエフ喜久井町',
+        email: ['tokyo@gmail.com'],
+        "social networks": [
+            {icon: FacebookIcon, url: 'https://www.facebook.com/'},
+            {icon: InstagramIcon, url: 'https://www.instagram.com/'},
+            {icon: TwitterIcon, url: 'https://twitter.com/home'},
+            {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
+        ],
+        coordinates: {
+            lat: 35.704015,
+            lng: 139.721445
+        }
+    },
+    'LONDON':{
+        phones: ['212-371-8500', '212-371-8555'],
+        address: 'Randolph St, London NW1 0TL, Great Britain',
+        email: ['london@gmail.com'],
+        "social networks": [
+            {icon: FacebookIcon, url: 'https://www.facebook.com/'},
+            {icon: InstagramIcon, url: 'https://www.instagram.com/'},
+            {icon: TwitterIcon, url: 'https://twitter.com/home'},
+            {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
+        ],
+        coordinates: {
+            lat: 51.541663,
+            lng: -0.136698
+        }
+    },
+    'PARIS':{
+        phones: ['212-371-8500', '212-371-8555'],
+        address: '22 Pass. Hébrard, 75010 Paris, France',
+        email: ['paris@gmail.com'],
+        "social networks": [
+            {icon: FacebookIcon, url: 'https://www.facebook.com/'},
+            {icon: InstagramIcon, url: 'https://www.instagram.com/'},
+            {icon: TwitterIcon, url: 'https://twitter.com/home'},
+            {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
+        ],
+        coordinates: {
+            lat: 48.873213,
+            lng: 2.373185
+        }
+    },
+}
+
+function TabPanel(props) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+        >
+            {value === index && (
+                <Box sx={{ p: 3 }}>
+                    <Typography>{children}</Typography>
+                </Box>
+            )}
+        </div>
+    );
+}
+TabPanel.propTypes = {
+    children: PropTypes.node,
+    index: PropTypes.number.isRequired,
+    value: PropTypes.number.isRequired,
+};
+function a11yProps(index) {
+    return {
+        id: `simple-tab-${index}`,
+        'aria-controls': `simple-tabpanel-${index}`,
+    };
+}
+
+const AddressItem = ({item}) => {
+    return (
+        <>
+            <Grid padding='50px 40px !important' item xs={12} md={6}>
+                <Typography
+                    variant="h5"
+                    letterSpacing="2px"
+                    marginBottom='40px'
+                >
+                    {item[0].toString()}
+                </Typography>
+                <Grid color="#616161" container spacing={2}>
+                    <Grid marginBottom='30px' item xs={12} sm={6}>
+                        <Typography
+                            fontSize='13px'
+                            fontWeight='300'
+                            marginBottom='15px'
+                        >
+                            PHONES
+                        </Typography>
+                        {item[1].phones.map(i => <Typography lineHeight='1.7em' fontWeight='400' variant="body1">{i.toString()}</Typography>)}
+                    </Grid>
+                    <Grid marginBottom='30px' item xs={12} sm={6}>
+                        <Typography
+                            fontSize='13px'
+                            fontWeight='300'
+                            marginBottom='15px'
+                        >
+                            ADDRESS
+                        </Typography>
+                        <Typography lineHeight='1.7em' fontWeight='400' variant="body1">{item[1].address}</Typography>
+                    </Grid>
+                    <Grid marginBottom='30px' item xs={12} sm={6}>
+                        <Typography
+                            fontSize='13px'
+                            fontWeight='300'
+                            marginBottom='15px'
+                        >
+                            EMAIL
+                        </Typography>
+                        {item[1].email.map(i => <Typography lineHeight='1.7em' fontWeight='400' variant="body1">{i.toString()}</Typography>)}
+                    </Grid>
+                    <Grid marginBottom='30px' item xs={12} sm={6}>
+                        <Typography
+                            fontSize='13px'
+                            fontWeight='300'
+                            marginBottom='15px'
+                        >
+                            SOCIAL NETWORKS
+                        </Typography>
+                        {(item[1]["social networks"] || []).map(item =>
+                            <Social Icon={item.icon} link={item.url}/>
+                        )}
+                    </Grid>
+                </Grid>
+            </Grid>
+        </>
+    )
+}
+
+const Contact = ({address=defaultAddress}) => {
+    const matches = useMediaQuery('(max-width:768px)');
+    const matches2 = useMediaQuery('(max-width:420px)');
+    const [value, setValue] = useState(0);
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+    };
+    return (
+        <>
+            <Header/>
+            <Breadcrumbs links={['contact']}/>
+            <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
+                <Container maxWidth="lg">
+                    <Box sx={{ width: '100%' }}>
+                        <Box sx={{ color: "#616161" }}>
+                            <Tabs
+                                value={value}
+                                onChange={handleChange}
+                                aria-label="contact"
+                                textColor="inherit"
+                                variant={matches2 ? "scrollable" : "standard"}
+                                TabIndicatorProps={{style: {background:'#616161', height: '1px'}}}
+                                sx={{fontWeight: 300, marginBottom: '30px'}}
+                                centered
+                            >
+                                {Object.keys(address).map((value, index) => {
+                                    return <Tab sx={{borderBottom: '1px solid #dedede'}} label={value.toString()} {...a11yProps(index)} />
+                                })}
+                            </Tabs>
+                        </Box>
+                        {Object.entries(address).map((item, index) => {
+                            return (
+                                <TabPanel value={value} index={index}>
+                                    <Grid sx={{backgroundColor: '#fff', padding: '0px 0px', marginLeft: '-10px'}} container spacing={2}>
+                                        <AddressItem key={index} item={item} />
+                                        <Grid sx={{padding: '0px 0px !important', position: 'relative', height: matches ? '300px': '500px'}} item xs={12} md={6}>
+                                            <GoogleMap lat={item[1].coordinates.lat} lng={item[1].coordinates.lng} key={index} />
+                                        </Grid>
+                                    </Grid>
+                                </TabPanel>
+                            )
+                        })}
+                    </Box>
+                </Container>
+            </main>
+            <Footer/>
+        </>
+    )
+}
+export default Contact

src/pages/MainPage.jsx

@@ -7,7 +7,8 @@ const MainPage = () => {
             <Header/>
             <main>
                 <article>
-
+                    Main page
+                    <br/><br/><br/><br/><br/><br/><br/><br/>
                 </article>
             </main>
             <Footer/>

src/scss/Breadcrumbs.scss

@@ -1 +0,0 @@
-

src/scss/Footer.scss

@@ -45,14 +45,14 @@
   }
   &__Social {
     &:last-child {
-      margin: 0!important;
+      margin: 0 !important;
     }
     svg {
       width: 20px;
       height: 20px;
       transition: 0.3s;
       &:hover {
-        fill: #fafafa;
+        fill: #5b5353;
       }
     }
   }