diff --git a/package-lock.json b/package-lock.json index 1110de5..b7192cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1271,11 +1271,6 @@ } } }, - "@googlemaps/js-api-loader": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.6.0.tgz", - "integrity": "sha512-amuilneCf7q5A/jDUE3ml83c9NjW/3DzIqiBDFIKZcraD0JSKbetkEQa5s57Z6QY7jxcequXgoL9CKJUY1xZ5A==" - }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -1921,156 +1916,6 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.1.tgz", "integrity": "sha512-DvJbbn3dUgMxDnJLH+RZQPnXak1h4ZVYQ7CWiFWjQwBFkVajT4rfw2PdpHLTSTwxrYfnoEXkuBiwkDm6tPMQeA==" }, - "@reach/auto-id": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/@reach/auto-id/-/auto-id-0.10.5.tgz", - "integrity": "sha512-we4/bwjFxJ3F+2eaddQ1HltbKvJ7AB8clkN719El7Zugpn/vOjfPMOVUiBqTmPGLUvkYrq4tpuFwLvk2HyOVHg==", - "requires": { - "@reach/utils": "0.10.5", - "tslib": "^2.0.0" - }, - "dependencies": { - "tslib": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", - "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" - } - } - }, - "@reach/combobox": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/@reach/combobox/-/combobox-0.10.5.tgz", - "integrity": "sha512-UrvdELLk+rnxK0o2e+jWmw6b7dteBWAylX4CEHE9KJuBbdwZ1PJY3YIAwJuvWM13Lcll2Pk7OlFJqRT90r2mRg==", - "requires": { - "@reach/auto-id": "0.10.5", - "@reach/descendants": "0.10.5", - "@reach/popover": "0.10.5", - "@reach/portal": "0.10.5", - "@reach/utils": "0.10.5", - "highlight-words-core": "1.2.2", - "prop-types": "^15.7.2", - "tslib": "^2.0.0" - }, - "dependencies": { - "tslib": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", - "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" - } - } - }, - "@reach/descendants": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/@reach/descendants/-/descendants-0.10.5.tgz", - "integrity": "sha512-8HhN4DwS/HsPQ+Ym/Ft/XJ1spXBYdE8hqpnbYR9UcU7Nx3oDbTIdhjA6JXXt23t5avYIx2jRa8YHCtVKSHuiwA==", - "requires": { - "@reach/utils": "0.10.5", - "tslib": "^2.0.0" - }, - "dependencies": { - "tslib": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", - "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" - } - } - }, - "@reach/observe-rect": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.2.0.tgz", - "integrity": "sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==" - }, - "@reach/popover": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/@reach/popover/-/popover-0.10.5.tgz", - "integrity": "sha512-S+qWIsjrN1yMpHjgELhjpdGc4Q3q1plJtXBGGQRxUAjmCUA/5OY7t5w5C8iqMNAEBwCvYXKvK/pLcXFxxLykSw==", - "requires": { - "@reach/portal": "0.10.5", - "@reach/rect": "0.10.5", - "@reach/utils": "0.10.5", - "tabbable": "^4.0.0", - "tslib": "^2.0.0" - }, - "dependencies": { - "tslib": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", - "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" - } - } - }, - "@reach/portal": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/@reach/portal/-/portal-0.10.5.tgz", - "integrity": "sha512-K5K8gW99yqDPDCWQjEfSNZAbGOQWSx5AN2lpuR1gDVoz4xyWpTJ0k0LbetYJTDVvLP/InEcR7AU42JaDYDCXQw==", - "requires": { - "@reach/utils": "0.10.5", - "tslib": "^2.0.0" - }, - "dependencies": { - "tslib": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", - "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" - } - } - }, - "@reach/rect": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/@reach/rect/-/rect-0.10.5.tgz", - "integrity": "sha512-JBKs2HniYecq5zLO6UFReX28SUBPM3n0aizdNgHuvwZmDcTfNV4jsuJYQLqJ+FbCQsrSHkBxKZqWpfGXY9bUEg==", - "requires": { - "@reach/observe-rect": "1.2.0", - "@reach/utils": "0.10.5", - "prop-types": "^15.7.2", - "tslib": "^2.0.0" - }, - "dependencies": { - "tslib": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", - "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" - } - } - }, - "@reach/utils": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.10.5.tgz", - "integrity": "sha512-5E/xxQnUbmpI/LrufBAOXjunl96DnqX6B4zC2MO2KH/dRzLug5gM5VuOwV26egsp0jvsSPxojwciOhS43px3qw==", - "requires": { - "@types/warning": "^3.0.0", - "tslib": "^2.0.0", - "warning": "^4.0.3" - }, - "dependencies": { - "tslib": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", - "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" - } - } - }, - "@react-google-maps/api": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-1.13.0.tgz", - "integrity": "sha512-mKwXziG5MbOvvcWG53FyZVZ8zjAuPNYkcS/+nYX9STMFNrI96AFq5l/zUn2QifRJnPzE8iO4V1vyMM+Ie9LpGg==", - "requires": { - "@googlemaps/js-api-loader": "1.6.0", - "@react-google-maps/infobox": "1.12.1", - "@react-google-maps/marker-clusterer": "1.12.1", - "invariant": "2.2.4" - } - }, - "@react-google-maps/infobox": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-1.12.1.tgz", - "integrity": "sha512-tD/xijqRtKK/LNRzuerzuyvybnRaD8SLgCA064len4/enTo1abhQN215ZYqwbTOn7RgYt9qMgNnwoX//u3xoWw==" - }, - "@react-google-maps/marker-clusterer": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-1.12.1.tgz", - "integrity": "sha512-JBSO5VJuouP/boBnSdRDCWq0UKO7jr3HvZVhis3ew+VGJ/BoCPu3lpU0HDsjjulfng+xwqLfVOIzP3QnvBPdCA==" - }, "@restart/context": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", @@ -5263,11 +5108,6 @@ "whatwg-url": "^8.0.0" } }, - "date-fns": { - "version": "2.19.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.19.0.tgz", - "integrity": "sha512-X3bf2iTPgCAQp9wvjOQytnf5vO5rESYRXlPIVcgSbtT5OTScPcsf9eZU+B/YIkKAtYr5WeCii58BgATrNitlWg==" - }, "debug": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", @@ -7730,11 +7570,6 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, - "highlight-words-core": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/highlight-words-core/-/highlight-words-core-1.2.2.tgz", - "integrity": "sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==" - }, "history": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", @@ -15407,11 +15242,6 @@ "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, - "tabbable": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz", - "integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==" - }, "table": { "version": "6.0.7", "resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz", @@ -16122,11 +15952,6 @@ "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" }, - "use-places-autocomplete": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/use-places-autocomplete/-/use-places-autocomplete-1.9.1.tgz", - "integrity": "sha512-ZIkCob6qFBT5kP5wvtiDHV2Dw+DjlVSOj8RoM0XRkDB95PPQzICTjWHOhe4ClY0gO2Nq1bFG5K2WfIYYlIYtfg==" - }, "util": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz", diff --git a/package.json b/package.json index 0a896a8..2879447 100644 --- a/package.json +++ b/package.json @@ -34,13 +34,9 @@ "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "react-select": "^4.3.0", + "reactstrap": "^8.9.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", "yup": "^0.32.9" }, "scripts": { 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: , + prevIcon: , + }; + } + + render() { + const { t } = this.props; + const { nextIcon, prevIcon } = this.state; + return ( +
+
+
+
+
+

{t("Slogan_1")}

+

{t("Slogan_2")}

+
+
+
+
+
+
+ + + First House + +

100 Charlie Rogers, Kanata, ON K2V 1A7

+

{t("Rooms")}

+
+ +
+ + + + Second House + +

1490 Youville Drive, Orléans, ON K1C 2X8

+

{t("Rooms")}

+
+ +
+ + + + Third House + +

8720 Russell Road, Navan, ON K4B 1J1

+

{t("Rooms")}

+
+ +
+ + + + Fourth House + +

2785 8th Line Road, Metcalfe, ON K0A 2P0

+

{t("Rooms")}

+
+ +
+ + + +
+
+
+
+

{t("Desc")}

+

{t("Home1")}

+ {t("Home2")}

+ {t("Home3")}

+ {t("Home4")}

+ {t("Home5")}

+ {t("Home6")}

+
+
+
+
+
+
+
+ ); + } +} + +export default withTranslation()(Homepage); diff --git a/src/images/bg1.jpg b/src/images/bg1.jpg deleted file mode 100644 index 9caa986..0000000 Binary files a/src/images/bg1.jpg and /dev/null differ diff --git a/src/images/fbg1.png b/src/images/fbg1.png deleted file mode 100644 index 1e09172..0000000 Binary files a/src/images/fbg1.png and /dev/null differ diff --git a/src/images/fbg2.png b/src/images/fbg2.png deleted file mode 100644 index fe37465..0000000 Binary files a/src/images/fbg2.png and /dev/null differ diff --git a/src/images/fbg3.png b/src/images/fbg3.png deleted file mode 100644 index 8b8019e..0000000 Binary files a/src/images/fbg3.png and /dev/null differ diff --git a/src/listings-page/ListingsPage.css b/src/listings-page/ListingsPage.css index 706b707..80ebdc9 100644 --- a/src/listings-page/ListingsPage.css +++ b/src/listings-page/ListingsPage.css @@ -1,9 +1,3 @@ -body{ - /*background-image: url("../images/bg1.jpg"); - background-position: 0px 60px; - */ -} - .booking_button{ text-align: right; } @@ -12,33 +6,4 @@ body{ font-size: 40px; font-weight:bolder; padding-right: 5%; -} - -.search{ - display:inline-block; - margin:3% 0%; -} - -.compass{ - height:25px; - width:25px; -} -.buttonImg{ - background-color: transparent; - border: none !important; - -} - -.main_borders{ - padding:0% 10% 4% 10%; - -} - -.map_style{ - text-align: center; -} - -.filters{ - margin: 2% 0% -} - +}; \ No newline at end of file diff --git a/src/listings-page/ListingsPage.js b/src/listings-page/ListingsPage.js index c9bbe8c..4d17a58 100644 --- a/src/listings-page/ListingsPage.js +++ b/src/listings-page/ListingsPage.js @@ -2,354 +2,198 @@ import React, { useState, useEffect, Component } from "react"; import { GoogleMap, - useLoadScript, + withScriptjs, + withGoogleMap, Marker, - InfoWindow, -} from "@react-google-maps/api"; -import usePlacesAutocomplete, { - getGeocode, - getLatLng, -} from "use-places-autocomplete"; -import { - Combobox, - ComboboxInput, - ComboboxPopover, - ComboboxList, - ComboboxOption, -} from "@reach/combobox"; -import { formatRelative } from "date-fns"; -import Select from "react-select"; - -import "@reach/combobox/styles.css"; -import mapStyles from "./mapStyles"; + InfoWindow +} from "react-google-maps"; import * as listingData from "./data/property-data.json"; +import mapStyles from "./mapStyles"; import "./ListingsPage.css"; -import compassImg from "./compass.svg"; +function Map() { -const libraries = ["places"]; + const [selectedProperty, setSelectedProperty] = useState(null); -const mapContainerStyle = { - height: "700px", - width: "100vm", -}; -const options = { - styles: mapStyles, - disableDefaultUI: true, - zoomControl: true, -}; -const center = { - lat: 45.4231, - lng: -75.6931, -}; - -export default function ListingsPage() { - const price_filter = [ - { - value: null, - label: "Any", - }, - { - value: 100000, - label: "$100000", - }, - { - value: 200000, - label: "$200000", - }, - { - value: 300000, - label: "$300000", - }, - { - value: 400000, - label: "$400000", - } - ]; - - const bed_filter = [ - { - value: null, - label: "Any", - }, - { - value: 1, - label: "One Bed", - }, - { - value: 2, - label: "Two Beds", - }, - { - value: 3, - label: "Three Beds", - } - - ]; - - const bath_filter = [ - { - value: null, - label: "Any", - }, - { - value: 1, - label: "One Bath", - }, - { - value: 2, - label: "Two Baths", - }, - { - value: 3, - label: "Three Baths", - } - ]; - - //console.log(data1[0]); - - const { isLoaded, loadError } = useLoadScript({ - googleMapsApiKey: `https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key= - AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`, - libraries, - }); - - const [selectedBudget, setSelectedBudget] = useState(null); - const [selectedBeds, setSelectedBeds] = useState(null); - const [selectedBaths, setSelectedBaths] = useState(null); - - const [markers, setMarkers] = React.useState([]); - const [selected, setSelected] = React.useState(null); - - const [budget, setBudget] = useState(null); - const [bed, setBed] = useState(null); - const [bath, setBath] = useState(null); - - const mapRef = React.useRef(); - const onMapLoad = React.useCallback((map) => { - mapRef.current = map; - //console.log(current); - }, []); - - const panTo = React.useCallback(({ lat, lng }) => { - mapRef.current.panTo({ lat, lng }); - mapRef.current.setZoom(10); - }, []); - - if (loadError) return "Error"; - if (!isLoaded) return "Loading..."; - - // handle onChange event of the dropdown - const handleBudgetChange = (e) => { - setSelectedBudget(e); - setBudget(e.value); - - //https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object - //https://stackoverflow.com/questions/57341541/removing-object-from-array-using-hooks-usestate/57341724 - }; - const handleBedChange = (e) => { - setSelectedBeds(e); - setBed(e.value); - }; - const handleBathChange = (e) => { - setSelectedBaths(e); - setBath(e.value); - }; return ( - -
- -
- - - - - -