From de18389b58337d4604971f462b37bbe4692ceddd Mon Sep 17 00:00:00 2001
From: ruchi <ruchirawperera@gmail.com>
Date: Wed, 7 Apr 2021 16:24:02 -0400
Subject: [PATCH 1/3] message

---
 src/homePage/Homepage.css | 126 --------------------------------------
 src/homePage/Homepage.js  | 103 -------------------------------
 src/homePage/homePage.js  | 126 --------------------------------------
 3 files changed, 355 deletions(-)
 delete mode 100644 src/homePage/Homepage.css
 delete mode 100644 src/homePage/Homepage.js
 delete mode 100644 src/homePage/homePage.js

diff --git a/src/homePage/Homepage.css b/src/homePage/Homepage.css
deleted file mode 100644
index 018d5c6..0000000
--- a/src/homePage/Homepage.css
+++ /dev/null
@@ -1,126 +0,0 @@
-.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%;
-}
\ No newline at end of file
diff --git a/src/homePage/Homepage.js b/src/homePage/Homepage.js
deleted file mode 100644
index dc2ce32..0000000
--- a/src/homePage/Homepage.js
+++ /dev/null
@@ -1,103 +0,0 @@
-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);
diff --git a/src/homePage/homePage.js b/src/homePage/homePage.js
deleted file mode 100644
index 2fd748e..0000000
--- a/src/homePage/homePage.js
+++ /dev/null
@@ -1,126 +0,0 @@
-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 Carousel from "react-bootstrap/Carousel";
-
-class Homepage extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      firstname: "",
-      lastname: "",
-      email: "",
-      message: "",
-    };
-  }
-
-  render() {
-    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">YOU ARE NOT BUYING A HOUSE, </h1>
-                <h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
-              </div>
-            </div>
-          </div>
-        </section>
-        <section className="white-section" id="white-section">
-          <div className="housesIntro">
-            <Carousel>
-              <Carousel.Item>
-                <img className="headerImg" src={house1} alt="First House" />
-              </Carousel.Item>
-              <Carousel.Item>
-                <img className="headerImg" src={house2} alt="Second House" />
-              </Carousel.Item>
-              <Carousel.Item>
-                <img className="headerImg" src={house3} alt="Third House" />
-              </Carousel.Item>
-            </Carousel>
-          </div>
-        </section>
-        <section class="colored-section" id="contact">
-          <div className="container-fluid">
-            <div className="contactIntro">
-              <h2 className="heading-1">Contact Us</h2>
-              <form
-                id="contact-form"
-                onSubmit={this.handleSubmit.bind(this)}
-                method="POST"
-              >
-                <div className="formhelper row">
-                  <div className="col-6">
-                    <input
-                      type="text"
-                      className="form-control"
-                      placeholder="First Name"
-                      value={this.state.firstname}
-                      onChange={this.onFirstNameChange.bind(this)}
-                    />
-                  </div>
-                  <div className="col-6">
-                    <input
-                      type="text"
-                      className="form-control"
-                      placeholder="Last Name"
-                      value={this.state.lastname}
-                      onChange={this.onLastNameChange.bind(this)}
-                    />
-                  </div>
-                </div>
-                <div className="form-group">
-                  <input
-                    type="email"
-                    className="form-control"
-                    placeholder="Email Address"
-                    aria-describedby="emailHelp"
-                    value={this.state.email}
-                    onChange={this.onEmailChange.bind(this)}
-                  />
-                </div>
-                <div className="form-group">
-                  <textarea
-                    className="form-control"
-                    placeholder="Message"
-                    rows="5"
-                    value={this.state.message}
-                    onChange={this.onMessageChange.bind(this)}
-                  />
-                </div>
-                <div className="buttonhelper">
-                  <button type="submit" className="button-1">
-                    Submit
-                  </button>
-                </div>
-              </form>
-            </div>
-          </div>
-        </section>
-      </div>
-    );
-  }
-  onFirstNameChange(event) {
-    this.setState({ firstname: event.target.value });
-  }
-
-  onLastNameChange(event) {
-    this.setState({ lastname: event.target.value });
-  }
-
-  onEmailChange(event) {
-    this.setState({ email: event.target.value });
-  }
-
-  onMessageChange(event) {
-    this.setState({ message: event.target.value });
-  }
-
-  handleSubmit(event) {}
-}
-
-export default Homepage;

From 8cf2fe0d219b14045321ae50c66c73298059460c Mon Sep 17 00:00:00 2001
From: ruchi <ruchirawperera@gmail.com>
Date: Wed, 7 Apr 2021 16:38:34 -0400
Subject: [PATCH 2/3] filter, search bar

---
 src/App.js                |   2 -
 src/homePage/Homepage.css | 126 ++++++++++++++++++++++++++++++++++++++
 src/homePage/Homepage.js  | 103 +++++++++++++++++++++++++++++++
 3 files changed, 229 insertions(+), 2 deletions(-)
 create mode 100644 src/homePage/Homepage.css
 create mode 100644 src/homePage/Homepage.js

diff --git a/src/App.js b/src/App.js
index be57faa..75af360 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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";
diff --git a/src/homePage/Homepage.css b/src/homePage/Homepage.css
new file mode 100644
index 0000000..018d5c6
--- /dev/null
+++ b/src/homePage/Homepage.css
@@ -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%;
+}
\ No newline at end of file
diff --git a/src/homePage/Homepage.js b/src/homePage/Homepage.js
new file mode 100644
index 0000000..dc2ce32
--- /dev/null
+++ b/src/homePage/Homepage.js
@@ -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);

From 2edeb80b86484de1a4f69fe62f6e014e5b099466 Mon Sep 17 00:00:00 2001
From: ruchi <ruchirawperera@gmail.com>
Date: Wed, 7 Apr 2021 16:39:44 -0400
Subject: [PATCH 3/3] filter, search

---
 src/homePage/Homepage.css | 126 ++++++++++++++++++++++++++++++++++++++
 src/homePage/Homepage.js  | 103 +++++++++++++++++++++++++++++++
 2 files changed, 229 insertions(+)
 create mode 100644 src/homePage/Homepage.css
 create mode 100644 src/homePage/Homepage.js

diff --git a/src/homePage/Homepage.css b/src/homePage/Homepage.css
new file mode 100644
index 0000000..018d5c6
--- /dev/null
+++ b/src/homePage/Homepage.css
@@ -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%;
+}
\ No newline at end of file
diff --git a/src/homePage/Homepage.js b/src/homePage/Homepage.js
new file mode 100644
index 0000000..dc2ce32
--- /dev/null
+++ b/src/homePage/Homepage.js
@@ -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);