Kene-s-Cribs-Website/src/listings-page/single-listing-4/listing-page-4.js
2021-04-08 17:44:17 -04:00

119 lines
4.5 KiB
JavaScript

import React from "react";
import "./listing-page-4.css";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
// import house images
import house_img1 from "../../images/house4.jpg";
import house_img2 from "../../images/house4-2.jpg";
import house_img3 from "../../images/house4-3.jpg";
const ListingPage4 = () => {
const { t } = useTranslation();
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> {t("Listing4-address")}
</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_img2}
class="d-block w-100"
alt="listing-img"
></img>
</div>
<div class="carousel-item">
<img
src={house_img3}
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">3</span>
<i class="fas fa-bed fa-3x amentities-icon"></i>
<span className="amentities-text">3</span>
<i class="fas fa-bath fa-3x amentities-icon"></i>
</div>
{/* Description for the listing */}
<div className="description-box">
<h2 className="description-title">{t("Listing-description-header")}</h2>
<p className="listing-description">{t("Listing4-description")}</p>
<div className="booking-btn">
<Link to="/contact-us">
<button type="button" class="btn btn-lg btn-info">
{t("Listing-booking-btn")}
</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;