filter, search bar
This commit is contained in:
ruchi
parent
65401ae437
commit
9ae2ec7416
3 changed files with 229 additions and 2 deletions
|
|
@ -3,7 +3,6 @@ import Footer from "./shared-components/footer-component/Footer";
|
|||
import Navbar from "./shared-components/navbar-component/Navbar";
|
||||
import { BrowserRouter, Route, Switch } from "react-router-dom";
|
||||
import i18next from "i18next";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Cookies from "js-cookie";
|
||||
import HomePage from "./homePage/Homepage";
|
||||
import ListingsPage from "./listings-page/ListingsPage";
|
||||
|
|
@ -31,7 +30,6 @@ function App() {
|
|||
const currentLanguage = langauges.find(
|
||||
(lang) => lang.code === currentLanguageCode
|
||||
);
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
document.body.dir = currentLanguage.dir || "ltr";
|
||||
|
|
|
|||
126
src/homePage/Homepage.css
Normal file
126
src/homePage/Homepage.css
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
.colored-section {
|
||||
background-color: #e7dec8;
|
||||
color: #000000;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.white-section {
|
||||
background-color: #ffffff;
|
||||
padding-top: 10rem;
|
||||
padding-bottom: 5rem;
|
||||
padding-left: 18%;
|
||||
}
|
||||
|
||||
#title .container-fluid {
|
||||
padding: 5% 34% 6%;
|
||||
text-align: left;
|
||||
font-family: "Georgia";
|
||||
}
|
||||
|
||||
#features .container-fluid {
|
||||
padding: 2% 14% 4%;
|
||||
text-align: left;
|
||||
font-family: "Georgia";
|
||||
}
|
||||
|
||||
|
||||
.housesIntro{
|
||||
width: 1200px;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.contactIntro{
|
||||
padding-left: 30%;
|
||||
padding-right: 30%;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.headerImg{
|
||||
width: 1200px;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.button-1 {
|
||||
background-color: rgb(0, 0, 0);
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.button-1:hover {
|
||||
background-color: rgb(92, 92, 92);
|
||||
color: #ffffff;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.buttonhelper {
|
||||
padding-left: 45%;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.buttonka{
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.prev-icon,
|
||||
.next-icon {
|
||||
height: 210px;
|
||||
width: 100px;
|
||||
outline: black;
|
||||
background-size: 100%, 100%;
|
||||
border-radius: 50%;
|
||||
background-image: none;
|
||||
text-shadow: 2px 2px 5px black;
|
||||
}
|
||||
|
||||
.next-icon:after
|
||||
{
|
||||
content: '>';
|
||||
font-size: 140px;
|
||||
color: rgb(255, 255, 255);
|
||||
text-shadow: 2px 2px 5px black;
|
||||
}
|
||||
|
||||
.prev-icon:after {
|
||||
content: '<';
|
||||
font-size: 140px;
|
||||
color: rgb(255, 255, 255);
|
||||
text-shadow: 2px 2px 5px black;
|
||||
}
|
||||
|
||||
ol.carousel-indicators {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
ol.carousel-indicators li,
|
||||
ol.carousel-indicators li.active {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 0;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: 0 0 1px 1px black;
|
||||
}
|
||||
|
||||
ol.carousel-indicators li {
|
||||
background: rgb(255, 255, 255);
|
||||
margin-left: .5rem;
|
||||
margin-right: .5rem;
|
||||
box-shadow: 0 0 1px 1px black;
|
||||
}
|
||||
|
||||
ol.carousel-indicators li.active {
|
||||
background: #17a2b8;
|
||||
box-shadow: 0 0 1px 1px black;
|
||||
}
|
||||
|
||||
.homePage{
|
||||
padding-bottom: 15%;
|
||||
}
|
||||
103
src/homePage/Homepage.js
Normal file
103
src/homePage/Homepage.js
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import { Component } from "react";
|
||||
import "./Homepage.css";
|
||||
import house1 from "../images/house1.jpg";
|
||||
import house2 from "../images/house2.jpg";
|
||||
import house3 from "../images/house3.jpg";
|
||||
import house4 from "../images/house4.jpg";
|
||||
import Carousel from "react-bootstrap/Carousel";
|
||||
import Button from "react-bootstrap/Button";
|
||||
import { withTranslation } from "react-i18next";
|
||||
|
||||
|
||||
|
||||
class Homepage extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
nextIcon: <span className="next-icon"></span>,
|
||||
prevIcon: <span className="prev-icon"></span>,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
const { nextIcon, prevIcon } = this.state;
|
||||
return (
|
||||
<div className="homePage">
|
||||
<section className="colored-section" id="title">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<h1 className="big-heading">{t("Slogan_1")}</h1>
|
||||
<h1 className="big-heading">{t("Slogan_2")}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="white-section">
|
||||
<div className="housesIntro">
|
||||
<Carousel nextIcon={nextIcon} prevIcon={prevIcon}>
|
||||
<Carousel.Item>
|
||||
<img className="headerImg" src={house1} alt="First House" />
|
||||
<Carousel.Caption>
|
||||
<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>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
<Carousel.Item>
|
||||
<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>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
<Carousel.Item>
|
||||
<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>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
<Carousel.Item>
|
||||
<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>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
</Carousel>
|
||||
<section className="colored-section" id="features">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<h2 style={{ paddingLeft: "22rem", paddingBottom: "1rem", fontFamily: "Trebuchet MS" }}>{t("Desc")}</h2>
|
||||
<p style={{ fontSize: "110%" }}>{t("Home1")}<br></br>
|
||||
{t("Home2")}<br></br>
|
||||
{t("Home3")}<br></br>
|
||||
{t("Home4")}<br></br>
|
||||
{t("Home5")}<br></br>
|
||||
{t("Home6")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withTranslation()(Homepage);
|
||||
Loading…
Reference in a new issue