103 lines
4.6 KiB
JavaScript
103 lines
4.6 KiB
JavaScript
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);
|