batuhan-basoglu/Kene-s-Cribs-Website
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #34 from ArcticHawk1/ListingsRoute

Browse source 
Linked the listing pages.
This commit is contained in:
Samuel Oyediran 2021-04-07 20:32:30 -04:00 committed by GitHub
commit 68139952c4
19 changed files with 675 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
package.json
View file

@ -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": {

5
public/assets/locales/en/translations.json
View file

@ -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.",

5
public/assets/locales/fr/translations.json
View file

@ -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.",

10
src/App.js
View file

@ -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>

14
src/homePage/Homepage.js
View file

@ -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>

3
src/listings-page/ListingsPage.js
View file

@ -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>

2
src/listings-page/single-listing/listing-page.css → src/listings-page/single-listing-1/listing-page-1.css
View file

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

10
src/listings-page/single-listing/listing-page.js → src/listings-page/single-listing-1/listing-page-1.js
View file

@ -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;

6
src/listings-page/single-listing/listing-page.test.js → src/listings-page/single-listing-1/listing-page-1.test.js
View file

@ -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();
});
});

62
src/listings-page/single-listing-2/listing-page-2.css Normal file
View file

@ -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;
}

139
src/listings-page/single-listing-2/listing-page-2.js Normal file
View file

@ -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;

10
src/listings-page/single-listing-2/listing-page-2.test.js Normal file
View file

@ -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();
});
});

62
src/listings-page/single-listing-3/listing-page-3.css Normal file
View file

@ -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;
}

139
src/listings-page/single-listing-3/listing-page-3.js Normal file
View file

@ -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;

10
src/listings-page/single-listing-3/listing-page-3.test.js Normal file
View file

@ -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();
});
});

62
src/listings-page/single-listing-4/listing-page-4.css Normal file
View file

@ -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;
}

139
src/listings-page/single-listing-4/listing-page-4.js Normal file
View file

@ -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;

10
src/listings-page/single-listing-4/listing-page-4.test.js Normal file
View file

@ -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();
});
});

6
src/shared-components/navbar-component/Navbar.js
View file

@ -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")}