From c769666d3d5a9ebbc175b183968274a76d975eae Mon Sep 17 00:00:00 2001
From: soyed <oyediransamuel1995@gmail.com>
Date: Wed, 31 Mar 2021 14:46:24 -0400
Subject: [PATCH] merged all components and completed the route

---
 src/App.js                                    |   5 +-
 src/homePage/homePage.js                      | 206 ++++++++++--------
 .../navbar-component/Navbar.js                |   6 +-
 3 files changed, 115 insertions(+), 102 deletions(-)

diff --git a/src/App.js b/src/App.js
index 7ef9462..9eee6fd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -20,11 +20,8 @@ class App extends Component {
           <Route path="/agents" component={AgentPage}></Route>
           {/* <Route path="/contact-us" component={ContactUs}></Route> */}
         </BrowserRouter>
-
+        <Homepage></Homepage>
         <Footer></Footer>
-        {/* <Homepage/> */}
-
-        <Homepage />
       </div>
     );
   }
diff --git a/src/homePage/homePage.js b/src/homePage/homePage.js
index f95a614..86803fd 100644
--- a/src/homePage/homePage.js
+++ b/src/homePage/homePage.js
@@ -1,107 +1,123 @@
 import { Component } from "react";
-import './Homepage.css';
-import house1 from '../images/house1.jpg';
-import house2 from '../images/house2.jpg';
-import house3 from '../images/house3.jpg';
-import Carousel from 'react-bootstrap/Carousel'
+import "./Homepage.css";
+import house1 from "../images/house1.jpg";
+import house2 from "../images/house2.jpg";
+import house3 from "../images/house3.jpg";
+import Carousel from "react-bootstrap/Carousel";
 
 class Homepage extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            firstname: '',
-            lastname: '',
-            email: '',
-            message: ''
-        }
-    }
+  constructor(props) {
+    super(props);
+    this.state = {
+      firstname: "",
+      lastname: "",
+      email: "",
+      message: "",
+    };
+  }
 
-    render() {
-        return (
-            <div className="Homepage">
-                <section className="colored-section" id="title">
-                    <div className="container-fluid">
-                        <div className="row">
-                            <div className="col-12">
-                                <h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
-                                <h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
-                            </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>
+  render() {
+    return (
+      <div className="Homepage">
+        <section className="colored-section" id="title">
+          <div className="container-fluid">
+            <div className="row">
+              <div className="col-12">
+                <h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
+                <h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
+              </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>
+    );
+  }
 
-    onNameChange(event) {
-        this.setState({ name: event.target.value })
-    }
+  onNameChange(event) {
+    this.setState({ name: event.target.value });
+  }
 
-    onEmailChange(event) {
-        this.setState({ email: event.target.value })
-    }
+  onEmailChange(event) {
+    this.setState({ email: event.target.value });
+  }
 
-    onMessageChange(event) {
-        this.setState({ message: event.target.value })
-    }
+  onMessageChange(event) {
+    this.setState({ message: event.target.value });
+  }
 
-    handleSubmit(event) {
-    }
+  handleSubmit(event) {}
 }
 
 export default Homepage;
diff --git a/src/shared-components/navbar-component/Navbar.js b/src/shared-components/navbar-component/Navbar.js
index 7273a59..1c4cbb3 100644
--- a/src/shared-components/navbar-component/Navbar.js
+++ b/src/shared-components/navbar-component/Navbar.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, withRouter } from "react-router-dom";
 import "./Navbar.css";
 /* eslint-disable jsx-a11y/anchor-is-valid */
 const Navbar = () => {
@@ -25,7 +25,7 @@ const Navbar = () => {
         <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
           <ul class="navbar-nav ml-auto">
             <li class="nav-item">
-              <Link class="nav-link" to="/home">
+              <Link class="nav-link" to="/">
                 Home
               </Link>
             </li>
@@ -51,4 +51,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default withRouter(Navbar);