made the route for the pages, navbar and footer of the application

src/App.css

@@ -1,38 +1,10 @@
-.App {
+body{
+  margin: 0;
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
+/* .App {
+  text-align: center;
+} */
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,28 +1,25 @@
 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 ListingsPage from "./listings-page/listings-page";
+import AgentPage from "./agent-page/agent-page";
+import ContactUs from "./shared-components/Contact-us/Contact-us";
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <h1>Kene's Cribs</h1>
-          <p>Real Website loading.......</p>
-        </header>
-        <section>
-          <h1>hello everyone</h1>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-          <div class="alert alert-primary" role="alert">
-            A simple primary alert—check it out!
-          </div>
-        </section>
+        <BrowserRouter>
+          <Navbar></Navbar>
+          <Route path="/home" component={HomePage}></Route>
+          <Route path="/listings" component={ListingsPage}></Route>
+          <Route path="/agents" component={AgentPage}></Route>
+          <Route path="/contact-us" component={ContactUs}></Route>
+        </BrowserRouter>
+
+        <Footer></Footer>
       </div>
     );
   }

src/homePage/homePage.js

@@ -0,0 +1,9 @@
+import React, { Component } from "react";
+
+class HomePage extends Component {
+  render() {
+    return <div>HomePage</div>;
+  }
+}
+
+export default HomePage;

src/homePage/homePage.test.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { shallow } from "enzyme";
+import HomePage from "./homePage";
+
+describe("HomePage", () => {
+  test("matches snapshot", () => {
+    const wrapper = shallow(<HomePage />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/homePage/index.js

@@ -0,0 +1 @@
+export { default } from "./homePage";

src/shared-components/contact-us/Contact-us.test.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { shallow } from "enzyme";
+import ContactUs from "./Contact-us";
+
+describe("ContactUs", () => {
+  test("matches snapshot", () => {
+    const wrapper = shallow(<ContactUs />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/shared-components/contact-us/contact-us.js

@@ -0,0 +1,9 @@
+import React, { Component } from "react";
+
+class ContactUs extends Component {
+  render() {
+    return <div>ContactUs</div>;
+  }
+}
+
+export default ContactUs;

src/shared-components/contact-us/index.js

@@ -0,0 +1 @@
+export { default } from "./Contact-us";

src/shared-components/footer-component/Footer.css

@@ -0,0 +1,12 @@
+#footer{
+    text-align: center;
+    padding: 5% 7%;
+}
+
+.social-icon{
+    margin: 2px 10px;
+}
+
+.social-icon:hover{
+    color: pink;
+}

src/shared-components/footer-component/Footer.js

@@ -0,0 +1,18 @@
+import React from "react";
+import "./Footer.css";
+const Footer = () => {
+  return (
+    <footer>
+      <section id="footer">
+        <div class="container-fluid">
+          <i class="fab fa-twitter social-icon"></i>
+          <i class="fab fa-facebook social-icon"></i>
+          <i class="fab fa-instagram social-icon"></i>
+          <i class="fas fa-envelope social-icon"></i>
+          <p class="">© Copyright SEG3125 - Group 3</p>
+        </div>
+      </section>
+    </footer>
+  );
+};
+export default Footer;

src/shared-components/footer-component/Footer.test.js

@@ -1,10 +1,10 @@
 import React from "react";
 import { shallow } from "enzyme";
-import NavBar from "./navBar";
+import Footer from "./Footer";
 
-describe("NavBar", () => {
+describe("Footer", () => {
   test("matches snapshot", () => {
-    const wrapper = shallow(<NavBar />);
+    const wrapper = shallow(<Footer />);
     expect(wrapper).toMatchSnapshot();
   });
 });

src/shared-components/navBar/index.js

@@ -1 +0,0 @@
-export { default } from "./navBar";

src/shared-components/navBar/navBar.js

@@ -1,9 +0,0 @@
-import React, { Component } from "react";
-
-class NavBar extends Component {
-  render() {
-    return <div>NavBar</div>;
-  }
-}
-
-export default NavBar;

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

@@ -0,0 +1,3 @@
+.Navbar{
+    background-color: pink;
+}

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

@@ -0,0 +1,54 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "./Navbar.css";
+/* 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>
+        <a href="/" class="navbar-brand">
+          Kene's Cribs
+        </a>
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-toggle="collapse"
+          data-target="#navbarTogglerDemo02"
+          aria-controls="navbarTogglerDemo02"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item">
+              <Link class="nav-link" to="/home">
+                Home
+              </Link>
+            </li>
+            <li class="nav-item">
+              <Link class="nav-link" to="/listings">
+                Listings
+              </Link>
+            </li>
+            <li class="nav-item">
+              <Link class="nav-link" to="/agents">
+                Agents
+              </Link>
+            </li>
+            <li class="nav-item">
+              <Link class="nav-link" to="/contact-us">
+                Contact Us
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </nav>
+    </div>
+  );
+};
+
+export default Navbar;

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Navbar from "./Navbar";
+
+describe("Navbar", () => {
+  test("matches snapshot", () => {
+    const wrapper = shallow(<Navbar />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});