n

package-lock.json

@@ -17,6 +17,7 @@
         "react-bootstrap-carousel": "^4.1.1",
         "react-dom": "^17.0.2",
         "react-google-maps": "^9.4.5",
+        "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.3",
         "spectre.css": "^0.5.9",
         "web-vitals": "^1.1.1"
@@ -3995,7 +3996,8 @@
     "node_modules/babel-runtime/node_modules/core-js": {
       "version": "2.6.12",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "hasInstallScript": true
     },
     "node_modules/babel-runtime/node_modules/regenerator-runtime": {
       "version": "0.11.1",
@@ -5038,7 +5040,8 @@
     "node_modules/core-js": {
       "version": "3.9.1",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.9.1.tgz",
-      "integrity": "sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg=="
+      "integrity": "sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg==",
+      "hasInstallScript": true
     },
     "node_modules/core-js-compat": {
       "version": "3.9.1",
@@ -5060,7 +5063,8 @@
     "node_modules/core-js-pure": {
       "version": "3.9.1",
       "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.9.1.tgz",
-      "integrity": "sha512-laz3Zx0avrw9a4QEIdmIblnVuJz8W51leY9iLThatCsFawWxC3sE4guASC78JbCin+DkwMpCdp1AVAuzL/GN7A=="
+      "integrity": "sha512-laz3Zx0avrw9a4QEIdmIblnVuJz8W51leY9iLThatCsFawWxC3sE4guASC78JbCin+DkwMpCdp1AVAuzL/GN7A==",
+      "hasInstallScript": true
     },
     "node_modules/core-util-is": {
       "version": "1.0.2",
@@ -6269,6 +6273,7 @@
       "version": "2.7.4",
       "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.7.4.tgz",
       "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==",
+      "hasInstallScript": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8642,6 +8647,19 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "node_modules/history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -12301,6 +12319,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/mini-create-react-context": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "tiny-warning": "^1.0.3"
+      }
+    },
     "node_modules/mini-css-extract-plugin": {
       "version": "0.11.3",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
@@ -15433,6 +15460,58 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.4.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
+    "node_modules/react-router/node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/react-router/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+    },
+    "node_modules/react-router/node_modules/path-to-regexp": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz",
@@ -15996,6 +16075,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "node_modules/resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -17952,6 +18036,16 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -18554,6 +18648,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -18757,6 +18856,7 @@
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
       "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+      "hasInstallScript": true,
       "optional": true,
       "os": [
         "darwin"
@@ -19201,6 +19301,7 @@
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
       "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+      "hasInstallScript": true,
       "optional": true,
       "os": [
         "darwin"
@@ -27800,6 +27901,19 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -30724,6 +30838,15 @@
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
     },
+    "mini-create-react-context": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "tiny-warning": "^1.0.3"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.11.3",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
@@ -33329,6 +33452,60 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-router": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.4.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+          "requires": {
+            "react-is": "^16.7.0"
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-scripts": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz",
@@ -33787,6 +33964,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
     },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -35460,6 +35642,16 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -35956,6 +36148,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

package.json

@@ -12,6 +12,7 @@
     "react-bootstrap-carousel": "^4.1.1",
     "react-dom": "^17.0.2",
     "react-google-maps": "^9.4.5",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "spectre.css": "^0.5.9",
     "web-vitals": "^1.1.1"

src/App.js

@@ -2,7 +2,7 @@ import { Component } from "react";
 import Footer from "./shared-components/footer-component/Footer";
 import Navbar from "./shared-components/navbar-component/Navbar";
 import { BrowserRouter, Route } from "react-router-dom";
-import HomePage from "./homePage/homePage";
+import HomePage from "./homePage/Homepage";
 import ListingsPage from "./listings-page/ListingsPage";
 import AgentPage from "./agent-page/AgentPage";
 // import ContactUs from "./shared-components/Contact-us/Contact-us";

src/agent-page/AgentPage.js

@@ -1,39 +1,42 @@
 import React, { Component } from "react";
 import Agents from './Agents'
 import './agent-page.css';
-import Carousel from 'react-bootstrap/Carousel'
 import Agent1 from "../images/Agent1.jpg";
 import Agent2 from "../images/Agent2.jpg";
 import Agent3 from "../images/Agent3.jpg";
 import Agent4 from "../images/Agent4.jpg";
 import Agent5 from "../images/Agent5.jpg";
 import Agent6 from "../images/Agent6.jpg";
- class AgentPage extends Component {
+class AgentPage extends Component {
-   state={
+  state = {
-     agents: [
+    agents: [
 
-      {title:'head sales assistant',name: 'Michael', src: Agent1,word:'Michael has a genuine passion for helping others and for giving back to the community.',id:1},
+      { title: 'head sales assistant', name: 'Michael', src: Agent1, word: 'Michael has a genuine passion for helping others and for giving back to the community.', id: 1 },
-       {title:'sales assistant',name: 'Jin', src: Agent2,word:'I have a passion for assisting clients with various real estate needs.',id:2},
+      { title: 'sales assistant', name: 'Jin', src: Agent2, word: 'I have a passion for assisting clients with various real estate needs.', id: 2 },
-       {title:'sales assistant',name: 'Anita', src: Agent3,word:'Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.',id:3},
+      { title: 'sales assistant', name: 'Anita', src: Agent3, word: 'Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.', id: 3 },
-       {title:'sales assistant',name: 'Alex', src: Agent4,word:'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA',id:4},
+      { title: 'sales assistant', name: 'Alex', src: Agent4, word: 'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA', id: 4 },
-       {title:'sales assistant',name: 'Xuan', src: Agent5,word:'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto. ',id:5},
+      { title: 'sales assistant', name: 'Xuan', src: Agent5, word: 'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto.', id: 5 },
-       {title:'sales assistant',name: 'Walter', src: Agent6,word:'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.',id:6},
+      { title: 'sales assistant', name: 'Walter', src: Agent6, word: 'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.', id: 6 },
 
 
-     ]
+    ]
-    }  
-    render(){
-      return(
-          <div className="container">
-              <div className="center  blue-text text-darken-4">
-                  <h1>Meet the team</h1>
-              </div>
-            
-              <Agents agents={this.state.agents} />
-          </div>
-      )
   }
-  displayAgents= (agent) => {
+  render() {
+    return (
+      <div>
+        <div className="center  blue-text text-darken-4">
+          <h1 style={{ fontFamily: "Georgia"  }} >Meet the Team</h1>
+        </div>
+
+        <div className="container">
+          <Agents agents={this.state.agents} /> 
+        </div>
+
+
+      </div>
+    )
+  }
+  displayAgents = (agent) => {
     console.log(agent);
   }
 

src/agent-page/Agents.js

@@ -1,5 +1,4 @@
 import React from "react";
-import AgentPage from "./AgentPage";
 /* import {Link} from 'react-router-dom' */
 import Card from "react-bootstrap/Card";
 import Button from "react-bootstrap/Button";
@@ -9,17 +8,19 @@ const Agents = ({ agents }) => {
     return (
       <div className="agent" key={agent.id}>
         {}
-            <Card style={{ width: "18rem" }}>
+        <Card style={{ width: "22rem", height: "42rem" }}>
-              <Card.Img variant="top" src={agent.src} />
+          <Card.Img variant="top" style={{ height: "22rem" }} src={agent.src} />
-              <Card.Body>
+          <Card.Body>
-                <Card.Title>{agent.title}</Card.Title>
+            <Card.Title>{agent.title}</Card.Title>
-                <Card.Text>{agent.name}</Card.Text>
+            <Card.Text>{agent.name}</Card.Text>
-                <Card.Text>
+            <Card.Text style={{ height: "7rem" }}>
-                  {agent.word}
+              {agent.word}
-                </Card.Text>
+            </Card.Text>
-                <Button variant="primary">VIEW</Button>
+            <div className="buttonfriend">
-              </Card.Body>
+              <Button variant="primary">VIEW</Button>
-            </Card>
+            </div>
+          </Card.Body>
+        </Card>
       </div>
     );
   });

src/agent-page/agent-page.css

@@ -12,8 +12,18 @@
   }
   .center{
     height: 25vh; /* Magic here */
-    background-color: yellow;
+    background-color: #e7dec8;
     display: flex;
     justify-content: center;
     align-items: center;
   }
+
+  .agent{
+    padding-left: 16%;
+    padding-top: 15px;
+  }
+  
+  .buttonfriend{
+    padding-top: 15px;
+    padding-left: 120px;
+  }

src/homePage/Homepage.css

@@ -1,5 +1,5 @@
 .colored-section {
-    background-color: #ffe609;
+    background-color: #e7dec8;
     color: #000000;
     white-space: nowrap;
 }
@@ -14,6 +14,13 @@
     font-family: "Georgia";
 }
 
+#features .container-fluid {
+    padding: 2% 48% 2%;
+    text-align: left;
+    font-family: "Georgia";
+}
+
+
 .housesIntro{
     padding: 4% 5%;
 }

src/homePage/Homepage.js

@@ -1,107 +1,126 @@
 import { Component } from "react";
-import './Homepage.css';
+import "./Homepage.css";
-import house1 from '../images/house1.jpg';
+import house1 from "../images/house1.jpg";
-import house2 from '../images/house2.jpg';
+import house2 from "../images/house2.jpg";
-import house3 from '../images/house3.jpg';
+import house3 from "../images/house3.jpg";
-import Carousel from 'react-bootstrap/Carousel'
+import Carousel from "react-bootstrap/Carousel";
 
 class Homepage extends Component {
-    constructor(props) {
+  constructor(props) {
-        super(props);
+    super(props);
-        this.state = {
+    this.state = {
-            firstname: '',
+      firstname: "",
-            lastname: '',
+      lastname: "",
-            email: '',
+      email: "",
-            message: ''
+      message: "",
-        }
+    };
-    }
+  }
 
-    render() {
+  render() {
-        return (
+    return (
-            <div className="Homepage">
+      <div className="homePage">
-                <section className="colored-section" id="title">
+        <section className="colored-section" id="title">
-                    <div className="container-fluid">
+          <div className="container-fluid">
-                        <div className="row">
+            <div className="row">
-                            <div className="col-12">
+              <div className="col-12">
-                                <h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
+                <h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
-                                <h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
+                <h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
-                            </div>
+              </div>
-                        </div>
-                    </div>
-                </section>
-                <section className="white-section" id="white-section">
-                    <div className="housesIntro">
-                        <Carousel>
-                            <Carousel.Item>
-                                <img
-                                    className="headerImg"
-                                    src={house1}
-                                    alt="First House"
-                                />
-                            </Carousel.Item>
-                            <Carousel.Item>
-                                <img
-                                    className="headerImg"
-                                    src={house2}
-                                    alt="Second House"
-                                />
-
-                            </Carousel.Item>
-                            <Carousel.Item>
-                                <img
-                                    className="headerImg"
-                                    src={house3}
-                                    alt="Third House"
-                                />
-
-                            </Carousel.Item>
-                        </Carousel>
-                    </div>
-                </section>
-                <section class="colored-section" id="contact">
-                    <div className="container-fluid">
-                        <div className="contactIntro">
-                            <h2 className="heading-1">Contact Us</h2>
-                            <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
-                                <div className="formhelper row">
-                                    <div className="col-6">
-                                        <input type="text" className="form-control" placeholder="First Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
-                                    </div>
-                                    <div className="col-6">
-                                        <input type="text" className="form-control" placeholder="Last Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
-                                    </div>
-                                </div>
-                                <div className="form-group">
-                                    <input type="email" className="form-control" placeholder="Email Address" aria-describedby="emailHelp" value={this.state.email} onChange={this.onEmailChange.bind(this)} />
-                                </div>
-                                <div className="form-group">
-                                    <textarea className="form-control" placeholder="Message" rows="5" value={this.state.message} onChange={this.onMessageChange.bind(this)} />
-                                </div>
-                                <div className="buttonhelper">
-                                    <button type="submit" className="button-1">Submit</button>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                </section>
             </div>
-        );
+          </div>
-    }
+        </section>
+        <section className="white-section" id="white-section">
+          <div className="housesIntro">
+            <Carousel>
+              <Carousel.Item>
+                <img className="headerImg" src={house1} alt="First House" />
+              </Carousel.Item>
+              <Carousel.Item>
+                <img className="headerImg" src={house2} alt="Second House" />
+              </Carousel.Item>
+              <Carousel.Item>
+                <img className="headerImg" src={house3} alt="Third House" />
+              </Carousel.Item>
+            </Carousel>
+          </div>
+        </section>
+        <section class="colored-section" id="contact">
+          <div className="container-fluid">
+            <div className="contactIntro">
+              <h2 className="heading-1">Contact Us</h2>
+              <form
+                id="contact-form"
+                onSubmit={this.handleSubmit.bind(this)}
+                method="POST"
+              >
+                <div className="formhelper row">
+                  <div className="col-6">
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="First Name"
+                      value={this.state.firstname}
+                      onChange={this.onFirstNameChange.bind(this)}
+                    />
+                  </div>
+                  <div className="col-6">
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="Last Name"
+                      value={this.state.lastname}
+                      onChange={this.onLastNameChange.bind(this)}
+                    />
+                  </div>
+                </div>
+                <div className="form-group">
+                  <input
+                    type="email"
+                    className="form-control"
+                    placeholder="Email Address"
+                    aria-describedby="emailHelp"
+                    value={this.state.email}
+                    onChange={this.onEmailChange.bind(this)}
+                  />
+                </div>
+                <div className="form-group">
+                  <textarea
+                    className="form-control"
+                    placeholder="Message"
+                    rows="5"
+                    value={this.state.message}
+                    onChange={this.onMessageChange.bind(this)}
+                  />
+                </div>
+                <div className="buttonhelper">
+                  <button type="submit" className="button-1">
+                    Submit
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </section>
+      </div>
+    );
+  }
+  onFirstNameChange(event) {
+    this.setState({ firstname: event.target.value });
+  }
 
-    onNameChange(event) {
+  onLastNameChange(event) {
-        this.setState({ name: event.target.value })
+    this.setState({ lastname: event.target.value });
-    }
+  }
 
-    onEmailChange(event) {
+  onEmailChange(event) {
-        this.setState({ email: event.target.value })
+    this.setState({ email: event.target.value });
-    }
+  }
 
-    onMessageChange(event) {
+  onMessageChange(event) {
-        this.setState({ message: event.target.value })
+    this.setState({ message: event.target.value });
-    }
+  }
 
-    handleSubmit(event) {
+  handleSubmit(event) {}
-    }
 }
 
 export default Homepage;

src/homePage/homePage.css

@@ -1,62 +0,0 @@
-.colored-section {
-    background-color: #ffe609;
-    color: #000000;
-    white-space: nowrap;
-}
-
-.white-section {
-    background-color: #ffffff;
-}
-
-#title .container-fluid {
-    padding: 4% 34% 6%;
-    text-align: left;
-    font-family: "Georgia";
-}
-
-.housesIntro{
-    padding: 4% 5%;
-}
-
-.contactIntro{
-    padding-left: 30%;
-    padding-right: 30%;
-    padding-bottom: 80px;
-}
-
-.carouselSection {
-    margin: 2% 8%;
-}
-
-.headerImg{
-    width: 2000px;
-    height: 600px;
-}
-
-.heading-1{
-    padding-left: 40%;
-    padding-top: 10%;
-    padding-bottom: 20px;
-}
-
-.formhelper{
-    padding-bottom: 15px;
-}
-
-.button-1 {
-    background-color: rgb(0, 0, 0);
-    border-color: transparent;
-    color: #ffffff;
-    font-size: 20px;
-}
-
-.button-1:hover {
-    background-color: rgb(92, 92, 92);
-    color: #ffffff;
-    border-color: transparent;
-}
-
-.buttonhelper {
-    padding-left: 45%;
-    padding-top: 15px;
-}

src/homePage/homePage.js

@@ -1,107 +1,126 @@
 import { Component } from "react";
-import './Homepage.css';
+import "./Homepage.css";
-import house1 from '../images/house1.jpg';
+import house1 from "../images/house1.jpg";
-import house2 from '../images/house2.jpg';
+import house2 from "../images/house2.jpg";
-import house3 from '../images/house3.jpg';
+import house3 from "../images/house3.jpg";
-import Carousel from 'react-bootstrap/Carousel'
+import Carousel from "react-bootstrap/Carousel";
 
 class Homepage extends Component {
-    constructor(props) {
+  constructor(props) {
-        super(props);
+    super(props);
-        this.state = {
+    this.state = {
-            firstname: '',
+      firstname: "",
-            lastname: '',
+      lastname: "",
-            email: '',
+      email: "",
-            message: ''
+      message: "",
-        }
+    };
-    }
+  }
 
-    render() {
+  render() {
-        return (
+    return (
-            <div className="Homepage">
+      <div className="homePage">
-                <section className="colored-section" id="title">
+        <section className="colored-section" id="title">
-                    <div className="container-fluid">
+          <div className="container-fluid">
-                        <div className="row">
+            <div className="row">
-                            <div className="col-12">
+              <div className="col-12">
-                                <h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
+                <h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
-                                <h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
+                <h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
-                            </div>
+              </div>
-                        </div>
-                    </div>
-                </section>
-                <section className="white-section" id="white-section">
-                    <div className="housesIntro">
-                        <Carousel>
-                            <Carousel.Item>
-                                <img
-                                    className="headerImg"
-                                    src={house1}
-                                    alt="First House"
-                                />
-                            </Carousel.Item>
-                            <Carousel.Item>
-                                <img
-                                    className="headerImg"
-                                    src={house2}
-                                    alt="Second House"
-                                />
-
-                            </Carousel.Item>
-                            <Carousel.Item>
-                                <img
-                                    className="headerImg"
-                                    src={house3}
-                                    alt="Third House"
-                                />
-
-                            </Carousel.Item>
-                        </Carousel>
-                    </div>
-                </section>
-                <section class="colored-section" id="contact">
-                    <div className="container-fluid">
-                        <div className="contactIntro">
-                            <h2 className="heading-1">Contact Us</h2>
-                            <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
-                                <div className="formhelper row">
-                                    <div className="col-6">
-                                        <input type="text" className="form-control" placeholder="First Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
-                                    </div>
-                                    <div className="col-6">
-                                        <input type="text" className="form-control" placeholder="Last Name" value={this.state.name} onChange={this.onNameChange.bind(this)} />
-                                    </div>
-                                </div>
-                                <div className="form-group">
-                                    <input type="email" className="form-control" placeholder="Email Address" aria-describedby="emailHelp" value={this.state.email} onChange={this.onEmailChange.bind(this)} />
-                                </div>
-                                <div className="form-group">
-                                    <textarea className="form-control" placeholder="Message" rows="5" value={this.state.message} onChange={this.onMessageChange.bind(this)} />
-                                </div>
-                                <div className="buttonhelper">
-                                    <button type="submit" className="button-1">Submit</button>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                </section>
             </div>
-        );
+          </div>
-    }
+        </section>
+        <section className="white-section" id="white-section">
+          <div className="housesIntro">
+            <Carousel>
+              <Carousel.Item>
+                <img className="headerImg" src={house1} alt="First House" />
+              </Carousel.Item>
+              <Carousel.Item>
+                <img className="headerImg" src={house2} alt="Second House" />
+              </Carousel.Item>
+              <Carousel.Item>
+                <img className="headerImg" src={house3} alt="Third House" />
+              </Carousel.Item>
+            </Carousel>
+          </div>
+        </section>
+        <section class="colored-section" id="contact">
+          <div className="container-fluid">
+            <div className="contactIntro">
+              <h2 className="heading-1">Contact Us</h2>
+              <form
+                id="contact-form"
+                onSubmit={this.handleSubmit.bind(this)}
+                method="POST"
+              >
+                <div className="formhelper row">
+                  <div className="col-6">
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="First Name"
+                      value={this.state.firstname}
+                      onChange={this.onFirstNameChange.bind(this)}
+                    />
+                  </div>
+                  <div className="col-6">
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="Last Name"
+                      value={this.state.lastname}
+                      onChange={this.onLastNameChange.bind(this)}
+                    />
+                  </div>
+                </div>
+                <div className="form-group">
+                  <input
+                    type="email"
+                    className="form-control"
+                    placeholder="Email Address"
+                    aria-describedby="emailHelp"
+                    value={this.state.email}
+                    onChange={this.onEmailChange.bind(this)}
+                  />
+                </div>
+                <div className="form-group">
+                  <textarea
+                    className="form-control"
+                    placeholder="Message"
+                    rows="5"
+                    value={this.state.message}
+                    onChange={this.onMessageChange.bind(this)}
+                  />
+                </div>
+                <div className="buttonhelper">
+                  <button type="submit" className="button-1">
+                    Submit
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </section>
+      </div>
+    );
+  }
+  onFirstNameChange(event) {
+    this.setState({ firstname: event.target.value });
+  }
 
-    onNameChange(event) {
+  onLastNameChange(event) {
-        this.setState({ name: event.target.value })
+    this.setState({ lastname: event.target.value });
-    }
+  }
 
-    onEmailChange(event) {
+  onEmailChange(event) {
-        this.setState({ email: event.target.value })
+    this.setState({ email: event.target.value });
-    }
+  }
 
-    onMessageChange(event) {
+  onMessageChange(event) {
-        this.setState({ message: event.target.value })
+    this.setState({ message: event.target.value });
-    }
+  }
 
-    handleSubmit(event) {
+  handleSubmit(event) {}
-    }
 }
 
 export default Homepage;

src/listings-page/ListingsPage.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 import React, { useState, useEffect, Component } from "react";
 import {
   GoogleMap,
@@ -5,12 +6,12 @@ import {
   withGoogleMap,
   Marker,
   InfoWindow
- } from "react-google-maps";
+} from "react-google-maps";
- import * as listingData from "./data/property-data.json";
+import * as listingData from "./data/property-data.json";
- import mapStyles from "./mapStyles";
+import mapStyles from "./mapStyles";
- import "./ListingsPage.css";
+import "./ListingsPage.css";
 
-function Map(){
+function Map() {
 
   const [selectedProperty, setSelectedProperty] = useState(null);
 
@@ -19,81 +20,81 @@ function Map(){
   return (
     <GoogleMap
       defaultZoom={10}
-      defaultCenter={{lat: 45.4231, lng:-75.6931}}
+      defaultCenter={{ lat: 45.4231, lng: -75.6931 }}
       //https://snazzymaps.com/explore
-      defaultOptions={{styles: mapStyles}}
+      defaultOptions={{ styles: mapStyles }}
     >
 
-        {listingData.Properties.map(house => (
+      {listingData.Properties.map(house => (
 
-          <Marker
+        <Marker
-            key={house.LISTING_ID}
+          key={house.LISTING_ID}
-            position={{ 
+          position={{
-              lat: house.coordinates[1],
+            lat: house.coordinates[1],
-              lng: house.coordinates[0]
+            lng: house.coordinates[0]
 
-            }}      
+          }}
 
-            onClick={() => {
+          onClick={() => {
-              setSelectedProperty(house)
+            setSelectedProperty(house)
-            }}      
+          }}
 
-            icon={{
+          icon={{
-              url:"homes-3.svg",
+            url: "homes-3.svg",
-              scaledSize: new window.google.maps.Size(50,50)
+            scaledSize: new window.google.maps.Size(50, 50)
-            }}
+          }}
 
 
 
-          />
+        />
 
 
 
-        ))}
+      ))}
 
 
-        {selectedProperty && (
+      {selectedProperty && (
 
-          <InfoWindow
+        <InfoWindow
-            position={{ 
+          position={{
-              lat: selectedProperty.coordinates[1],
+            lat: selectedProperty.coordinates[1],
-              lng: selectedProperty.coordinates[0]
+            lng: selectedProperty.coordinates[0]
 
-            }} 
+          }}
-            onCloseClick={() => {
+          onCloseClick={() => {
-             setSelectedProperty(null);
+            setSelectedProperty(null);
-            }}
+          }}
-          >
+        >
+          <div>
+            <h2>{selectedProperty.ADDRESS}</h2>
+            <p> {selectedProperty.DESC}</p>
             <div>
-              <h2>{selectedProperty.ADDRESS}</h2>
+              <div class="row">
-              <p> {selectedProperty.DESC}</p>
-              <div>
-                <div class="row">
 
-                  <div className="col-6">
+                <div className="col-6">
                   <i class="fas fa-bed fa-3x"></i> <span class="popup_nums"> 1 </span>
                   <i class="fas fa-bath fa-3x"></i> <span class="popup_nums"> 2</span>
 
 
 
-                  </div>
+                </div>
 
-                  <div className="col-6 booking_button">
+                <div className="col-6 booking_button">
                   <button>Show Listing</button>
 
 
-                  </div>
-
                 </div>
 
-
               </div>
 
 
             </div>
-          </InfoWindow>
 
-        )}
+
+          </div>
+        </InfoWindow>
+
+      )}
 
 
 
@@ -113,12 +114,12 @@ class ListingsPage extends Component {
   render() {
     return (
 
-    <div className="listings">
+      <div className="listings">
 
-      <section class="colored-section2" id="cta">
+        <section class="colored-section2" id="cta">
 
 
-      {/*
+          {/*
       
     
     
@@ -154,36 +155,40 @@ class ListingsPage extends Component {
         </div>
   */}
 
-        <div class="row"> 
+          <div class="row">
 
-          <div class="col-12">
+            <div class="col-12">
 
-            <h2> Map </h2>
+              <section className="colored-section" id="features">
+                <div className="container-fluid">
+                  <h2> Map </h2>
+                </div>
+              </section>
 
-            <div style={{ width: "100vm", height: "800px" }}>
+              <div style={{ width: "100vm", height: "800px" }}>
-              <MapWrapped
+                <MapWrapped
-                googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
+                  googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
                 AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`}
-                loadingElement={<div style={{ height: `100%` }} />}
+                  loadingElement={<div style={{ height: `100%` }} />}
-                containerElement={<div style={{ height: `100%` }} />}
+                  containerElement={<div style={{ height: `100%` }} />}
-                mapElement={<div style={{ height: `100%` }} />}
+                  mapElement={<div style={{ height: `100%` }} />}
-              />
+                />
+              </div>
+
+
+
+
             </div>
 
-
-
-
           </div>
 
-        </div>
 
 
 
-
+        </section>
-      </section>
 
 
-    </div>
+      </div>
 
 
 

src/listings-page/mapStyles.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 export default [
     {
         "featureType": "all",

src/shared-components/navbar-component/Navbar.css

@@ -1,3 +1,13 @@
 .Navbar{
-    background-color: pink;
+    background-color: #30475e;
+    padding-top: 20px;
+    padding-bottom: 24px;
 }
+
+.navbar-brand{
+
+    color: #5b83aa;
+    padding-left:20px; 
+
+}
+

src/shared-components/navbar-component/Navbar.js

@@ -1,18 +1,19 @@
 import React from "react";
 import { Link, withRouter } from "react-router-dom";
 import "./Navbar.css";
+import logo from "./logo2.png";
 /* eslint-disable jsx-a11y/anchor-is-valid */
 const Navbar = () => {
   return (
     /* Nav Bar */
     <div className="Navbar">
       <nav class="navbar navbar-expand-lg navbar-dark">
-        <img src=""></img>
+        <img src={logo} alt="" width="40" height="40"></img>
         <a href="/" class="navbar-brand">
           Kene's Cribs
         </a>
         <button
-          class="navbar-toggler"
+          className="navbar-toggler"
           type="button"
           data-toggle="collapse"
           data-target="#navbarTogglerDemo02"
@@ -20,25 +21,37 @@ const Navbar = () => {
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
-          <span class="navbar-toggler-icon"></span>
+          <span className="navbar-toggler-icon"></span>
         </button>
-        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
+        <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
-          <ul class="navbar-nav ml-auto">
+          <ul className="navbar-nav ml-auto">
-            <li class="nav-item">
+            <li className="nav-item">
-              <Link class="nav-link" exact to="/">
+              <Link className="nav-link" exact to="/">
                 Home
               </Link>
             </li>
-            <li class="nav-item">
+            <li className="nav-item">
-              <Link class="nav-link" to="/listings">
+              <Link className="nav-link" to="/listings">
                 Listings
               </Link>
             </li>
-            <li class="nav-item">
+
-              <Link class="nav-link" to="/agents">
+            <li className="nav-item">
+              <Link className="nav-link" to="/agents">
                 Agents
               </Link>
             </li>
+
+            <li className="nav-item">
+              <Link className="nav-link" to="/">
+                Contact Us
+              </Link>
+            </li>
+            <li className="nav-item">
+              <Link className="nav-link" to="/">
+                Login
+              </Link>
+            </li>
           </ul>
         </div>
       </nav>