Merge pull request #34 from ArcticHawk1/ListingsRoute

Linked the listing pages.

package.json

@@ -3,12 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reach/combobox": "^0.10.5",
+    "@react-google-maps/api": "^1.9.0",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
     "bootstrap": "^4.6.0",
     "cors": "^2.8.5",
+    "date-fns": "^2.13.0",
     "email-validator": "^2.0.4",
     "express": "^4.17.1",
     "flag-icon-css": "^3.5.0",
@@ -34,13 +37,10 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-select": "^4.3.0",
-    "spectre.css": "^0.5.9",
-    "web-vitals": "^1.1.1",
-    "@reach/combobox": "^0.10.2",
-    "@react-google-maps/api": "^1.9.0",
-    "date-fns": "^2.13.0",
-    "use-places-autocomplete": "^1.3.5",
     "reactstrap": "^8.9.0",
+    "spectre.css": "^0.5.9",
+    "use-places-autocomplete": "^1.3.5",
+    "web-vitals": "^1.1.1",
     "yup": "^0.32.9"
   },
   "scripts": {

public/assets/locales/en/translations.json

@@ -33,7 +33,10 @@
     "Home5": "members who want to benefit from our deals. Above are some houses which can interest you. Feel free to",
     "Home6": "click the buttons above to explore the houses you want.",
     "Desc": "Description",
-    "Rooms": "1 Bedroom, 2 Bathroom",
+    "Rooms": "2 Bedroom, 3 Bathroom",
+    "Rooms1": "1 Bedroom, 1 Bathroom",
+    "Rooms2": "3 Bedroom, 3 Bathroom",
+    "Rooms3": "3 Bedroom, 3 Bathroom",
     "Danger1": "Message could not send.",
     "Danger2": "There are some errors in your contact form.",
     "Success1": "The message is successfully sent.",

public/assets/locales/fr/translations.json

@@ -33,7 +33,10 @@
     "Home5": "membres qui souhaitent bénéficier de nos offres. Ci-dessus, quelques maisons qui peuvent vous intéresser. N'hésitez",
     "Home6": "pas à cliquez sur les boutons ci-dessus pour explorer les maisons que vous souhaitez.",
     "Desc": "La Description",
-    "Rooms": "1 chambre, 2 salles de bains",
+    "Rooms": "2 chambre, 3 salles de bains",
+    "Rooms1": "1 chambre, 1 salles de bains",
+    "Rooms2": "3 chambre, 3 salles de bains",
+    "Rooms3": "3 chambre, 3 salles de bains",
     "Danger1": "Le message n'a pas pu être envoyé.",
     "Danger2": "Il y a des erreurs dans votre formulaire de contact.",
     "Success1": "Le message a été envoyé avec succès.",

src/App.js

@@ -7,7 +7,10 @@ import Cookies from "js-cookie";
 import HomePage from "./homePage/Homepage";
 import ListingsPage from "./listings-page/ListingsPage";
 import AgentPage from "./agent-page/AgentPage";
-import ListingPage from "./listings-page/single-listing/listing-page";
+import ListingPage1 from "./listings-page/single-listing-1/listing-page-1";
+import ListingPage2 from "./listings-page/single-listing-2/listing-page-2";
+import ListingPage3 from "./listings-page/single-listing-3/listing-page-3";
+import ListingPage4 from "./listings-page/single-listing-4/listing-page-4";
 import Login from "./login-page/Login";
 import Account from "./login-page/account/Account";
 import ContactUs from "./shared-components/contact-us/contact-us";
@@ -74,7 +77,10 @@ function App() {
           <Route exact path="/" component={HomePage}></Route>
           <Route path="/listings" component={ListingsPage}></Route>
           <Route path="/agents" component={AgentPage}></Route>
-          <Route path="/listing-page" component={ListingPage}></Route>
+          <Route path="/listing-page-1" component={ListingPage1}></Route>
+          <Route path="/listing-page-2" component={ListingPage2}></Route>
+          <Route path="/listing-page-3" component={ListingPage3}></Route>
+          <Route path="/listing-page-4" component={ListingPage4}></Route>
           <Route path="/login" component={Login}></Route>
           <Route path="/contact-us" component={ContactUs}></Route>
           <Route path="/account" component={Account}></Route>

src/homePage/Homepage.js

@@ -43,7 +43,7 @@ class Homepage extends Component {
                   <h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>100 Charlie Rogers, Kanata, ON K2V 1A7</h3>
                   <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
                   <div className="buttonka">
-                    <Button href="/listings" variant="info">{t("Info")}</Button>
+                    <Button href="/listing-page-3" variant="info">{t("Info")}</Button>
                   </div>
                 </Carousel.Caption>
               </Carousel.Item>
@@ -51,9 +51,9 @@ class Homepage extends Component {
                 <img className="headerImg" src={house2} alt="Second House" />
                 <Carousel.Caption>
                   <h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1490 Youville Drive, Orléans, ON K1C 2X8</h3>
-                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
+                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms1")}</h2>
                   <div className="buttonka">
-                    <Button href="/listings" variant="info">{t("Info")}</Button>
+                    <Button href="/listing-page-2" variant="info">{t("Info")}</Button>
                   </div>
                 </Carousel.Caption>
               </Carousel.Item>
@@ -61,9 +61,9 @@ class Homepage extends Component {
                 <img className="headerImg" src={house3} alt="Third House" />
                 <Carousel.Caption>
                   <h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>8720 Russell Road, Navan, ON K4B 1J1</h3>
-                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
+                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms2")}</h2>
                   <div className="buttonka">
-                    <Button href="/listings" variant="info">{t("Info")}</Button>
+                    <Button href="/listing-page-1" variant="info">{t("Info")}</Button>
                   </div>
                 </Carousel.Caption>
               </Carousel.Item>
@@ -71,9 +71,9 @@ class Homepage extends Component {
                 <img className="headerImg" src={house4} alt="Fourth House" />
                 <Carousel.Caption>
                   <h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>2785 8th Line Road, Metcalfe, ON K0A 2P0</h3>
-                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
+                  <h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms3")}</h2>
                   <div className="buttonka">
-                    <Button href="/listings" variant="info">{t("Info")}</Button>
+                    <Button href="/listing-page-4" variant="info">{t("Info")}</Button>
                   </div>
                 </Carousel.Caption>
               </Carousel.Item>

src/listings-page/ListingsPage.js

@@ -262,7 +262,8 @@ export default function ListingsPage() {
                     </div>
 
                     <div className="col-6 booking_button">
-                      <button>Show Listing</button>
+                      <button onClick={() => { window.location.href='/listing-page-'+selected.LISTING_ID
+                      }}>Show Listing</button>
                     </div>
                   </div>
                 </div>

src/listings-page/single-listing-1/listing-page-1.css

@@ -1,4 +1,4 @@
-.single-listing{
+.single-listing-1{
     padding: 7% 15%;
     /* background-color: darksalmon; */
 }

src/listings-page/single-listing-1/listing-page-1.js

@@ -1,17 +1,17 @@
 import React from "react";
-import "./listing-page.css";
+import "./listing-page-1.css";
 import { Link } from "react-router-dom";
 
 // import house images
 import house_img1 from "../../images/house1-2.jpg";
-const ListingPage = () => {
+const ListingPage1 = () => {
   return (
-    <div className="single-listing">
+    <div className="single-listing-1">
       {/* Listing header */}
       <div className="row listing-header">
         <div className="col-12">
           <h2 className="listing-title">
-            <i class="fas fa-home title-icon"></i> My title
+            <i class="fas fa-home title-icon"></i> 8720 Russell Road
           </h2>
         </div>
       </div>
@@ -136,4 +136,4 @@ const ListingPage = () => {
 // 2 ->https://pictureitsoldfl.com/wp-content/uploads/2016/07/305-Rudder-Cay-Way-Jupiter-FL-print-014-28-Family-Room-4200x2800-300dpi-1170x780.jpg
 // 3 ->https://www.tlcinteriors.com.au/wp-content/uploads/2018/06/hamptons-style-kitchen-from-metricon-bayville-display-home.jpg
 
-export default ListingPage;
+export default ListingPage1;

src/listings-page/single-listing-1/listing-page-1.test.js

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

src/listings-page/single-listing-2/listing-page-2.css

@@ -0,0 +1,62 @@
+.single-listing-2{
+    padding: 7% 15%;
+    /* background-color: darksalmon; */
+}
+
+.listing-header{
+    border: 1px solid black;
+    text-align: left;
+    padding: 1%;
+}
+.listing-title{
+    font-size: 2.5rem;
+    /* font-style: italic; */
+}
+
+.title-icon{
+
+}
+
+.listing-carousel{
+    margin: 5% 15%;
+    width: 70%;
+    /* padding-right: 10; */
+}
+
+.carousel-img{
+    /* width: 70%; */
+}
+
+
+.amentities{
+    border: 1px solid black;
+    /* padding: 5% 0; */
+    margin: 3% 40%;
+    padding: 1% 0%;
+}
+.amentities-text{
+
+}
+.amentities-icon{
+    margin: 0% 5%;
+}
+
+.description-box{
+    border: 1px solid black;
+    padding: 5%;
+    text-align: left;
+}
+
+.description-title{
+    padding: 2% 0%;
+}
+.listing-description{
+    
+
+}
+
+.booking-btn{
+    padding: 2% 0%;
+    text-align: center;
+}
+

src/listings-page/single-listing-2/listing-page-2.js

@@ -0,0 +1,139 @@
+import React from "react";
+import "./listing-page-2.css";
+import { Link } from "react-router-dom";
+
+// import house images
+import house_img1 from "../../images/house1-2.jpg";
+const ListingPage2 = () => {
+  return (
+    <div className="single-listing-2">
+      {/* Listing header */}
+      <div className="row listing-header">
+        <div className="col-12">
+          <h2 className="listing-title">
+            <i class="fas fa-home title-icon"></i> 1490 Youville Drive
+          </h2>
+        </div>
+      </div>
+
+      {/* Carousel for images of the listings */}
+      <div className="listing-carousel">
+        <div
+          id="carouselExampleControls"
+          class="carousel slide"
+          data-ride="carousel"
+        >
+          <div class="carousel-inner">
+            <div class="carousel-item active carousel-img">
+              <img
+                src={house_img1}
+                class="d-block w-100"
+                alt="listing-img"
+              ></img>
+            </div>
+            <div class="carousel-item carousel-img">
+              <img
+                src={house_img1}
+                class="d-block w-100"
+                alt="listing-img"
+              ></img>
+            </div>
+            <div class="carousel-item">
+              <img
+                src={house_img1}
+                class="d-block w-100"
+                alt="listing-img"
+              ></img>
+            </div>
+          </div>
+          <a
+            class="carousel-control-prev"
+            href="#carouselExampleControls"
+            role="button"
+            data-slide="prev"
+          >
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="sr-only">Previous</span>
+          </a>
+          <a
+            class="carousel-control-next"
+            href="#carouselExampleControls"
+            role="button"
+            data-slide="next"
+          >
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="sr-only">Next</span>
+          </a>
+        </div>
+      </div>
+
+      {/* Text box for listing amenities */}
+      <div className="amentities">
+        <span className="amentities-text">1</span>
+        <i class="fas fa-bed fa-2x amentities-icon"></i>
+        <span className="amentities-text">2</span>
+        <i class="fas fa-bath fa-2x amentities-icon"></i>
+        <span className="amentities-text">3</span>
+        <i class="fas fa-wifi fa-2x amentities-icon"></i>
+      </div>
+
+      {/* Description for the listing */}
+      <div className="description-box">
+        <h2 className="description-title">Description</h2>
+        <p className="listing-description">
+          MOVE IN READY I WALKING DISTANCE TO SHOPPING, SCHOOLS AND TRANSIT I
+          Conveniently located in Haysboro, you have Restaurants, Groceries,
+          Coffee shops, Schools and a Library all within walking distance. This
+          Updated Bungalow offers over 2000 square feet of developed living
+          space, 3 Bedrooms upstairs to accommodate almost any family and 2 down
+          stairs in the fully developed basement. Having a separate entrance
+          downstairs through the backyard makes it much easier if you ever want
+          to convert the basement into a suite. The double garage is even heated
+          with 220v plus 2 additional spaces that could be used for RV parking
+          or for any additional vehicles in the house. You will notice the home
+          has been tastefully updated over the years including a soaker tub in
+          the bathroom, in the kitchen your cabinetry goes right to the ceiling
+          for a nice finished look, granite counters and Kitchenaid appliances
+          and a new garburator. The entire property has a fresh coat of paint
+          inside and out, Newer windows and roof along with the Plumbing,
+          Electrical (Cat 5 connection throughout and 200amp service) has been
+          updated. Last but not least, the back deck already has gas and ready
+          for the BBQ season. With the BIG updates being done, all that is left
+          to do is enjoy Summer on the deck or enjoy a bonfire in your sunny
+          West facing backyard!
+        </p>
+        <div className="booking-btn">
+          <Link to="/contact-us">
+            <button type="button" class="btn btn-lg btn-info">
+              Book Showing
+            </button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// sources for the images used
+//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
+
+//House description
+// ->Link 1 -https://www.realtor.ca/real-estate/23018057/9811-elbow-drive-calgary-haysboro
+// images
+// 1 ->house1.jpg
+// 2 ->//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
+// 3 ->https://s3.amazonaws.com/on1-wp/wp-content/uploads/2018/08/3191-NW-Jenna-22-of-49v2-1024x683.jpg
+//-> Link2 -> https://www.realtor.ca/real-estate/23020015/lot-14-67-seastone-drive-port-howe-port-howe
+// 1 ->house2.jpg
+// 2 ->https://static.photocdn.pt/images/articles/2019/12/24/How_to_Take_Gorgeous_Interior_Real_Estate_Photos.jpg
+// 3 ->https://i.pinimg.com/originals/f3/72/87/f372870f4f99d3278193a3970aa394ce.jpg
+//->Link3 -> https://www.realtor.ca/real-estate/23020040/1035-butler-boulevard-petawawa-laurentian-highlands
+// 1 ->house3.jpg
+// 2 ->https://miro.medium.com/max/1200/1*EyGqOwy0wQwKHUgi3xpQZA.png
+// 3 ->https://i.pinimg.com/originals/9b/fe/76/9bfe76b23f7ed9dcb35f7553b8255f48.jpg
+//->Link4 -> https://www.realtor.ca/real-estate/23020103/62-riddle-court-north-bay
+// 1 ->house4.jpg
+// 2 ->https://pictureitsoldfl.com/wp-content/uploads/2016/07/305-Rudder-Cay-Way-Jupiter-FL-print-014-28-Family-Room-4200x2800-300dpi-1170x780.jpg
+// 3 ->https://www.tlcinteriors.com.au/wp-content/uploads/2018/06/hamptons-style-kitchen-from-metricon-bayville-display-home.jpg
+
+export default ListingPage2;

src/listings-page/single-listing-2/listing-page-2.test.js

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

src/listings-page/single-listing-3/listing-page-3.css

@@ -0,0 +1,62 @@
+.single-listing-3{
+    padding: 7% 15%;
+    /* background-color: darksalmon; */
+}
+
+.listing-header{
+    border: 1px solid black;
+    text-align: left;
+    padding: 1%;
+}
+.listing-title{
+    font-size: 2.5rem;
+    /* font-style: italic; */
+}
+
+.title-icon{
+
+}
+
+.listing-carousel{
+    margin: 5% 15%;
+    width: 70%;
+    /* padding-right: 10; */
+}
+
+.carousel-img{
+    /* width: 70%; */
+}
+
+
+.amentities{
+    border: 1px solid black;
+    /* padding: 5% 0; */
+    margin: 3% 40%;
+    padding: 1% 0%;
+}
+.amentities-text{
+
+}
+.amentities-icon{
+    margin: 0% 5%;
+}
+
+.description-box{
+    border: 1px solid black;
+    padding: 5%;
+    text-align: left;
+}
+
+.description-title{
+    padding: 2% 0%;
+}
+.listing-description{
+    
+
+}
+
+.booking-btn{
+    padding: 2% 0%;
+    text-align: center;
+}
+

src/listings-page/single-listing-3/listing-page-3.js

@@ -0,0 +1,139 @@
+import React from "react";
+import "./listing-page-3.css";
+import { Link } from "react-router-dom";
+
+// import house images
+import house_img1 from "../../images/house1-2.jpg";
+const ListingPage3 = () => {
+  return (
+    <div className="single-listing-3">
+      {/* Listing header */}
+      <div className="row listing-header">
+        <div className="col-12">
+          <h2 className="listing-title">
+            <i class="fas fa-home title-icon"></i> 100 Charlie Rogers Place
+          </h2>
+        </div>
+      </div>
+
+      {/* Carousel for images of the listings */}
+      <div className="listing-carousel">
+        <div
+          id="carouselExampleControls"
+          class="carousel slide"
+          data-ride="carousel"
+        >
+          <div class="carousel-inner">
+            <div class="carousel-item active carousel-img">
+              <img
+                src={house_img1}
+                class="d-block w-100"
+                alt="listing-img"
+              ></img>
+            </div>
+            <div class="carousel-item carousel-img">
+              <img
+                src={house_img1}
+                class="d-block w-100"
+                alt="listing-img"
+              ></img>
+            </div>
+            <div class="carousel-item">
+              <img
+                src={house_img1}
+                class="d-block w-100"
+                alt="listing-img"
+              ></img>
+            </div>
+          </div>
+          <a
+            class="carousel-control-prev"
+            href="#carouselExampleControls"
+            role="button"
+            data-slide="prev"
+          >
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="sr-only">Previous</span>
+          </a>
+          <a
+            class="carousel-control-next"
+            href="#carouselExampleControls"
+            role="button"
+            data-slide="next"
+          >
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="sr-only">Next</span>
+          </a>
+        </div>
+      </div>
+
+      {/* Text box for listing amenities */}
+      <div className="amentities">
+        <span className="amentities-text">1</span>
+        <i class="fas fa-bed fa-2x amentities-icon"></i>
+        <span className="amentities-text">2</span>
+        <i class="fas fa-bath fa-2x amentities-icon"></i>
+        <span className="amentities-text">3</span>
+        <i class="fas fa-wifi fa-2x amentities-icon"></i>
+      </div>
+
+      {/* Description for the listing */}
+      <div className="description-box">
+        <h2 className="description-title">Description</h2>
+        <p className="listing-description">
+          MOVE IN READY I WALKING DISTANCE TO SHOPPING, SCHOOLS AND TRANSIT I
+          Conveniently located in Haysboro, you have Restaurants, Groceries,
+          Coffee shops, Schools and a Library all within walking distance. This
+          Updated Bungalow offers over 2000 square feet of developed living
+          space, 3 Bedrooms upstairs to accommodate almost any family and 2 down
+          stairs in the fully developed basement. Having a separate entrance
+          downstairs through the backyard makes it much easier if you ever want
+          to convert the basement into a suite. The double garage is even heated
+          with 220v plus 2 additional spaces that could be used for RV parking
+          or for any additional vehicles in the house. You will notice the home
+          has been tastefully updated over the years including a soaker tub in
+          the bathroom, in the kitchen your cabinetry goes right to the ceiling
+          for a nice finished look, granite counters and Kitchenaid appliances
+          and a new garburator. The entire property has a fresh coat of paint
+          inside and out, Newer windows and roof along with the Plumbing,
+          Electrical (Cat 5 connection throughout and 200amp service) has been
+          updated. Last but not least, the back deck already has gas and ready
+          for the BBQ season. With the BIG updates being done, all that is left
+          to do is enjoy Summer on the deck or enjoy a bonfire in your sunny
+          West facing backyard!
+        </p>
+        <div className="booking-btn">
+          <Link to="/contact-us">
+            <button type="button" class="btn btn-lg btn-info">
+              Book Showing
+            </button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// sources for the images used
+//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
+
+//House description
+// ->Link 1 -https://www.realtor.ca/real-estate/23018057/9811-elbow-drive-calgary-haysboro
+// images
+// 1 ->house1.jpg
+// 2 ->//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
+// 3 ->https://s3.amazonaws.com/on1-wp/wp-content/uploads/2018/08/3191-NW-Jenna-22-of-49v2-1024x683.jpg
+//-> Link2 -> https://www.realtor.ca/real-estate/23020015/lot-14-67-seastone-drive-port-howe-port-howe
+// 1 ->house2.jpg
+// 2 ->https://static.photocdn.pt/images/articles/2019/12/24/How_to_Take_Gorgeous_Interior_Real_Estate_Photos.jpg
+// 3 ->https://i.pinimg.com/originals/f3/72/87/f372870f4f99d3278193a3970aa394ce.jpg
+//->Link3 -> https://www.realtor.ca/real-estate/23020040/1035-butler-boulevard-petawawa-laurentian-highlands
+// 1 ->house3.jpg
+// 2 ->https://miro.medium.com/max/1200/1*EyGqOwy0wQwKHUgi3xpQZA.png
+// 3 ->https://i.pinimg.com/originals/9b/fe/76/9bfe76b23f7ed9dcb35f7553b8255f48.jpg
+//->Link4 -> https://www.realtor.ca/real-estate/23020103/62-riddle-court-north-bay
+// 1 ->house4.jpg
+// 2 ->https://pictureitsoldfl.com/wp-content/uploads/2016/07/305-Rudder-Cay-Way-Jupiter-FL-print-014-28-Family-Room-4200x2800-300dpi-1170x780.jpg
+// 3 ->https://www.tlcinteriors.com.au/wp-content/uploads/2018/06/hamptons-style-kitchen-from-metricon-bayville-display-home.jpg
+
+export default ListingPage3;

src/listings-page/single-listing-3/listing-page-3.test.js

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

src/listings-page/single-listing-4/listing-page-4.css

@@ -0,0 +1,62 @@
+.single-listing-4{
+    padding: 7% 15%;
+    /* background-color: darksalmon; */
+}
+
+.listing-header{
+    border: 1px solid black;
+    text-align: left;
+    padding: 1%;
+}
+.listing-title{
+    font-size: 2.5rem;
+    /* font-style: italic; */
+}
+
+.title-icon{
+
+}
+
+.listing-carousel{
+    margin: 5% 15%;
+    width: 70%;
+    /* padding-right: 10; */
+}
+
+.carousel-img{
+    /* width: 70%; */
+}
+
+
+.amentities{
+    border: 1px solid black;
+    /* padding: 5% 0; */
+    margin: 3% 40%;
+    padding: 1% 0%;
+}
+.amentities-text{
+
+}
+.amentities-icon{
+    margin: 0% 5%;
+}
+
+.description-box{
+    border: 1px solid black;
+    padding: 5%;
+    text-align: left;
+}
+
+.description-title{
+    padding: 2% 0%;
+}
+.listing-description{
+    
+
+}
+
+.booking-btn{
+    padding: 2% 0%;
+    text-align: center;
+}
+

src/listings-page/single-listing-4/listing-page-4.js

@@ -0,0 +1,139 @@
+import React from "react";
+import "./listing-page-4.css";
+import { Link } from "react-router-dom";
+
+// import house images
+import house_img1 from "../../images/house1-2.jpg";
+const ListingPage4 = () => {
+  return (
+    <div className="single-listing-4">
+      {/* Listing header */}
+      <div className="row listing-header">
+        <div className="col-12">
+          <h2 className="listing-title">
+            <i class="fas fa-home title-icon"></i> 2785 8th Line Road
+          </h2>
+        </div>
+      </div>
+
+      {/* Carousel for images of the listings */}
+      <div className="listing-carousel">
+        <div
+          id="carouselExampleControls"
+          class="carousel slide"
+          data-ride="carousel"
+        >
+          <div class="carousel-inner">
+            <div class="carousel-item active carousel-img">
+              <img
+                src={house_img1}
+                class="d-block w-100"
+                alt="listing-img"
+              ></img>
+            </div>
+            <div class="carousel-item carousel-img">
+              <img
+                src={house_img1}
+                class="d-block w-100"
+                alt="listing-img"
+              ></img>
+            </div>
+            <div class="carousel-item">
+              <img
+                src={house_img1}
+                class="d-block w-100"
+                alt="listing-img"
+              ></img>
+            </div>
+          </div>
+          <a
+            class="carousel-control-prev"
+            href="#carouselExampleControls"
+            role="button"
+            data-slide="prev"
+          >
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="sr-only">Previous</span>
+          </a>
+          <a
+            class="carousel-control-next"
+            href="#carouselExampleControls"
+            role="button"
+            data-slide="next"
+          >
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="sr-only">Next</span>
+          </a>
+        </div>
+      </div>
+
+      {/* Text box for listing amenities */}
+      <div className="amentities">
+        <span className="amentities-text">1</span>
+        <i class="fas fa-bed fa-2x amentities-icon"></i>
+        <span className="amentities-text">2</span>
+        <i class="fas fa-bath fa-2x amentities-icon"></i>
+        <span className="amentities-text">3</span>
+        <i class="fas fa-wifi fa-2x amentities-icon"></i>
+      </div>
+
+      {/* Description for the listing */}
+      <div className="description-box">
+        <h2 className="description-title">Description</h2>
+        <p className="listing-description">
+          MOVE IN READY I WALKING DISTANCE TO SHOPPING, SCHOOLS AND TRANSIT I
+          Conveniently located in Haysboro, you have Restaurants, Groceries,
+          Coffee shops, Schools and a Library all within walking distance. This
+          Updated Bungalow offers over 2000 square feet of developed living
+          space, 3 Bedrooms upstairs to accommodate almost any family and 2 down
+          stairs in the fully developed basement. Having a separate entrance
+          downstairs through the backyard makes it much easier if you ever want
+          to convert the basement into a suite. The double garage is even heated
+          with 220v plus 2 additional spaces that could be used for RV parking
+          or for any additional vehicles in the house. You will notice the home
+          has been tastefully updated over the years including a soaker tub in
+          the bathroom, in the kitchen your cabinetry goes right to the ceiling
+          for a nice finished look, granite counters and Kitchenaid appliances
+          and a new garburator. The entire property has a fresh coat of paint
+          inside and out, Newer windows and roof along with the Plumbing,
+          Electrical (Cat 5 connection throughout and 200amp service) has been
+          updated. Last but not least, the back deck already has gas and ready
+          for the BBQ season. With the BIG updates being done, all that is left
+          to do is enjoy Summer on the deck or enjoy a bonfire in your sunny
+          West facing backyard!
+        </p>
+        <div className="booking-btn">
+          <Link to="/contact-us">
+            <button type="button" class="btn btn-lg btn-info">
+              Book Showing
+            </button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// sources for the images used
+//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
+
+//House description
+// ->Link 1 -https://www.realtor.ca/real-estate/23018057/9811-elbow-drive-calgary-haysboro
+// images
+// 1 ->house1.jpg
+// 2 ->//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
+// 3 ->https://s3.amazonaws.com/on1-wp/wp-content/uploads/2018/08/3191-NW-Jenna-22-of-49v2-1024x683.jpg
+//-> Link2 -> https://www.realtor.ca/real-estate/23020015/lot-14-67-seastone-drive-port-howe-port-howe
+// 1 ->house2.jpg
+// 2 ->https://static.photocdn.pt/images/articles/2019/12/24/How_to_Take_Gorgeous_Interior_Real_Estate_Photos.jpg
+// 3 ->https://i.pinimg.com/originals/f3/72/87/f372870f4f99d3278193a3970aa394ce.jpg
+//->Link3 -> https://www.realtor.ca/real-estate/23020040/1035-butler-boulevard-petawawa-laurentian-highlands
+// 1 ->house3.jpg
+// 2 ->https://miro.medium.com/max/1200/1*EyGqOwy0wQwKHUgi3xpQZA.png
+// 3 ->https://i.pinimg.com/originals/9b/fe/76/9bfe76b23f7ed9dcb35f7553b8255f48.jpg
+//->Link4 -> https://www.realtor.ca/real-estate/23020103/62-riddle-court-north-bay
+// 1 ->house4.jpg
+// 2 ->https://pictureitsoldfl.com/wp-content/uploads/2016/07/305-Rudder-Cay-Way-Jupiter-FL-print-014-28-Family-Room-4200x2800-300dpi-1170x780.jpg
+// 3 ->https://www.tlcinteriors.com.au/wp-content/uploads/2018/06/hamptons-style-kitchen-from-metricon-bayville-display-home.jpg
+
+export default ListingPage4;

src/listings-page/single-listing-4/listing-page-4.test.js

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

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

@@ -50,12 +50,6 @@ const Navbar = () => {
               </Link>
             </li>
 
-            <li className="nav-item">
-              <Link className="nav-link" to="/listing-page">
-                {t("Nav_listing_page")}
-              </Link>
-            </li>
-
             <li className="nav-item">
               <Link className="nav-link" to="/login">
                 {t("Nav_Login")}