Linked the listing pages.
This commit is contained in:
parent
faefd8ae38
commit
b9ffb3f01b
19 changed files with 675 additions and 35 deletions
12
package.json
12
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": {
|
||||
|
|
|
@ -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.",
|
||||
|
|
|
@ -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
10
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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
.single-listing{
|
||||
.single-listing-1{
|
||||
padding: 7% 15%;
|
||||
/* background-color: darksalmon; */
|
||||
}
|
|
@ -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;
|
|
@ -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
62
src/listings-page/single-listing-2/listing-page-2.css
Normal 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
139
src/listings-page/single-listing-2/listing-page-2.js
Normal 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
10
src/listings-page/single-listing-2/listing-page-2.test.js
Normal 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
62
src/listings-page/single-listing-3/listing-page-3.css
Normal 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
139
src/listings-page/single-listing-3/listing-page-3.js
Normal 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
10
src/listings-page/single-listing-3/listing-page-3.test.js
Normal 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
62
src/listings-page/single-listing-4/listing-page-4.css
Normal 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
139
src/listings-page/single-listing-4/listing-page-4.js
Normal 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
10
src/listings-page/single-listing-4/listing-page-4.test.js
Normal 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();
|
||||
});
|
||||
});
|
|
@ -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")}
|
||||
|
|
Loading…
Reference in a new issue