diff --git a/package-lock.json b/package-lock.json index 4d60f86a5..a21f21b9e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,11 @@ "version": "0.0.0", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3", + "saas": "^1.0.0", + "sas": "^3.0.4", + "sass": "^1.71.1" }, "devDependencies": { "@types/react": "^18.2.56", @@ -926,6 +930,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.12.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.0.tgz", @@ -1257,6 +1269,18 @@ "node": ">=4" } }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -1399,6 +1423,14 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "engines": { + "node": ">=8" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1409,6 +1441,17 @@ "concat-map": "0.0.1" } }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/browserslist": { "version": "4.23.0", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", @@ -1503,6 +1546,40 @@ "node": ">=4" } }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -2164,6 +2241,17 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -2219,7 +2307,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -2474,6 +2561,11 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", + "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -2572,6 +2664,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-boolean-object": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz", @@ -2631,7 +2734,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -2667,7 +2769,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -2696,6 +2797,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "engines": { + "node": ">=0.12.0" + } + }, "node_modules/is-number-object": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz", @@ -3049,6 +3158,14 @@ "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", "dev": true }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -3262,6 +3379,17 @@ "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", "dev": true }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/possible-typed-array-names": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz", @@ -3386,6 +3514,47 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "dependencies": { + "@remix-run/router": "1.15.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "dependencies": { + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.5.tgz", @@ -3531,6 +3700,11 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/saas": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/saas/-/saas-1.0.0.tgz", + "integrity": "sha512-FgayhFS18BlPfcyMcOqxD7PIyNyUjqyv8R+rsr3X2KRK2icEUL4uvWBF+lZ0IPqJIO2kUO0d20OXY+R+pdriqg==" + }, "node_modules/safe-array-concat": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.0.tgz", @@ -3566,6 +3740,27 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sas": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/sas/-/sas-3.0.4.tgz", + "integrity": "sha512-Fi1sfAdsEpuNR1Ho7/lkrJYFU7kRPusFWFQP401lz0NIFX0OfcWhsUOXzEKyoNzW0TorfdmyC2yGorJ/CiNGqg==" + }, + "node_modules/sass": { + "version": "1.71.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.71.1.tgz", + "integrity": "sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/scheduler": { "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", @@ -3658,7 +3853,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3791,6 +3985,17 @@ "node": ">=4" } }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index 84e628e5f..3e575d097 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,11 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3", + "saas": "^1.0.0", + "sas": "^3.0.4", + "sass": "^1.71.1" }, "devDependencies": { "@types/react": "^18.2.56", diff --git a/react-estate-ui b/react-estate-ui new file mode 160000 index 000000000..da00af91d --- /dev/null +++ b/react-estate-ui @@ -0,0 +1 @@ +Subproject commit da00af91d767e438a7f95ead92c1a0ed17845ec1 diff --git a/src/App.jsx b/src/App.jsx index 88a1fa927..68b55a03d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,44 @@ + +import React from "react"; +import { + RouterProvider, + createBrowserRouter +} from "react-router-dom"; + +import HomePage from ".//routes/homePage/homePage"; +import Layout from "./routes/layout/layout"; +import ListPage from "./routes/listPage/listPage"; function App() { +const router = createBrowserRouter([ + { + path: "/", + element: , + children: [ + { + path: "/", + element: , + + + + + }, + { + path: "/list", + element: + } + ] + } + +]); + + + + + return ( -
Hello World
- ) + + + ); } -export default App \ No newline at end of file +export default App; diff --git a/src/components/card/Card.jsx b/src/components/card/Card.jsx new file mode 100644 index 000000000..a70aadcdc --- /dev/null +++ b/src/components/card/Card.jsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { Link } from "react-router-dom"; +import "./card.scss"; +function Card({item}) { + return ( +
+ + +
+

+ {item.title} +

+ +

+ + {item.address} +

+

${item.price}

+
+
+
+ +{item.bedroom } bedroom +
+
+ +{item.bathroom } bathroom +
+
+
+ + +
+
+ + + +
+
+
+
+
+
+ + ) +} + +export default Card \ No newline at end of file diff --git a/src/components/card/card.scss b/src/components/card/card.scss new file mode 100644 index 000000000..b3aae84a2 --- /dev/null +++ b/src/components/card/card.scss @@ -0,0 +1,93 @@ +.card { + display: flex; + gap: 20px; + + .imageContainer { + flex: 2; + height: 200px; + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 10px; + } + } + .textContainer { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 10px; + flex: 3; + img { + width: 16px; + height: 16px; + } + .title { + font-size: 20px; + font-weight: 600; + color: grey; + transition: all 0.4s ease; + &:hover { + color: black; + scale: 1.01%; + } + } + + .address { + font-size: 14px; + display: flex; + align-items: center; + gap: 5px; + color: darkgray; + } + + .price { + font-size: 20px; + font-weight: 300; + padding: 5px; + border-radius: 5px; + background-color: yellow; + width: max-content; + + } + .bottom{ + display: flex; + justify-content: space-between; + gap: 10px; + + .features{ + display: flex; + gap: 20px; + font-size: 14px; + + + .feature{ + display: flex; + align-items: center; + gap: 5px; + background-color: whitesmoke; + border-radius: 5px; + } + } + + .icons{ + display: flex; + gap: 20px; + + .icon{ + border: 1px solid grey; + padding: 2px 5px; + border-radius: 5px; + cursor: pointer; + align-items: center; + justify-content: center; + + &:hover{ + background-color: lightgray; + } + } + } + + } + } +} diff --git a/src/components/filter/Filter.jsx b/src/components/filter/Filter.jsx new file mode 100644 index 000000000..5151a8aaf --- /dev/null +++ b/src/components/filter/Filter.jsx @@ -0,0 +1,52 @@ +import React from 'react'; +import "./filter.scss"; +function Filter() { + return ( +
+

Search results for London

+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ ) +} + +export default Filter; diff --git a/src/components/filter/filter.scss b/src/components/filter/filter.scss new file mode 100644 index 000000000..9adbe749c --- /dev/null +++ b/src/components/filter/filter.scss @@ -0,0 +1,50 @@ +.filter { + display: flex; + flex-direction: column; + gap: 10px; + + h1 { + font-weight: 300; + font-size: 24px; + } + + .item { + display: flex; + flex-direction: column; + gap: 2px; + label { + font-size: 10px; + } + input,select { + width: 100px; + padding: 10px; + border: 1px solid grey; + border-radius: 5px; + font-size: 14px; + } + } + .top { + input { + width: 100%; + } + + } + + .bottom { + display: flex; + justify-content: space-between; + gap: 20px; + + button { + width: 100px; + border: none; + cursor: pointer; + background-color: darkkhaki; + padding: 10px; + } + img { + width: 24px; + height: 24px; + } + } +} diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx new file mode 100644 index 000000000..2efc33fa6 --- /dev/null +++ b/src/components/navbar/Navbar.jsx @@ -0,0 +1,40 @@ +import { useState } from "react"; +import "./navbar.scss"; + +function Navbar() { + const [open, setOpen] = useState(false) + return ( + + ); +} + +export default Navbar; diff --git a/src/components/navbar/navbar.css b/src/components/navbar/navbar.css new file mode 100644 index 000000000..8689ca663 --- /dev/null +++ b/src/components/navbar/navbar.css @@ -0,0 +1,100 @@ +nav { + display: flex; + justify-content: space-between; + height: 100px; + align-items: center; +} +nav a { + transition: all 0.4s ease; +} +@media (max-width: 738px) { + nav a { + display: none; + } +} +nav a:hover { + scale: 1.08; +} +nav .left { + flex: 3; + align-items: center; + display: flex; + gap: 50px; +} +nav .left .logo { + font-weight: bold; + font-size: 20px; + display: flex; + gap: 10px; + align-items: center; +} +nav .left .logo img { + width: 28px; +} +@media (max-width: 1024px) { + nav .left .logo span { + display: none; + } +} +@media (max-width: 738px) { + nav .left .logo span { + display: initial; + } +} +nav .right { + flex: 2; + display: flex; + align-items: center; + justify-content: end; + gap: 5px; + height: 100%; +} +@media (max-width: 1024px) { + nav .right { + background-color: transparent; + } +} +nav .right a { + padding: 12px 24px; + margin: 29px; +} +nav .right .register { + background-color: rgb(244, 244, 112); +} +nav .right .menuIcon { + display: none; + z-index: 999; +} +nav .right .menuIcon img { + width: 36px; + height: 36px; + cursor: pointer; +} +@media (max-width: 738px) { + nav .right .menuIcon { + display: inline; + } +} +nav .right .menu { + position: absolute; + top: 0; + right: -50%; + background-color: white; + color: black; + height: 100vh; + width: -50%; + transition: all 1s ease; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 24px; +} +nav .right .menu.active { + right: 0; +} +@media (max-width: 738px) { + nav .right .menu a { + display: initial; + } +}/*# sourceMappingURL=navbar.css.map */ \ No newline at end of file diff --git a/src/components/navbar/navbar.css.map b/src/components/navbar/navbar.css.map new file mode 100644 index 000000000..56a3cf5d0 --- /dev/null +++ b/src/components/navbar/navbar.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["navbar.scss","navbar.css","../../responsive.scss"],"names":[],"mappings":"AAEA;EACE,aAAA;EACA,8BAAA;EACA,aAAA;EACA,mBAAA;ACDF;ADEE;EACE,yBAAA;ACAJ;ACPE;EFMA;IAII,aAAA;ECCJ;AACF;ADCI;EACE,WAAA;ACCN;ADEE;EACE,OAAA;EAEA,mBAAA;EACA,aAAA;EACA,SAAA;ACDJ;ADEI;EACE,iBAAA;EACA,eAAA;EACA,aAAA;EACA,SAAA;EACA,mBAAA;ACAN;ADEM;EACE,WAAA;ACAR;AC1BE;EF6BI;IAEI,aAAA;ECDR;AACF;ACpCE;EFkCI;IAKI,gBAAA;ECCR;AACF;ADIE;EACE,OAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,QAAA;EACA,YAAA;ACFJ;AC5CE;EFwCA;IASI,6BAAA;ECDJ;AACF;ADEI;EACE,kBAAA;EACA,YAAA;ACAN;ADEI;EACE,oCAAA;ACAN;ADII;EACE,aAAA;EACA,YAAA;ACFN;ADIM;EACE,WAAA;EACA,YAAA;EACA,eAAA;ACFR;ACtEE;EFiEE;IAUI,eAAA;ECDN;AACF;ADII;EACE,kBAAA;EACA,MAAA;EACA,WAAA;EACA,uBAAA;EACA,YAAA;EACA,aAAA;EACA,WAAA;EACA,uBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ACFN;ADIM;EACE,QAAA;ACFR;AC7FE;EFkGM;IACE,gBAAA;ECFR;AACF","file":"navbar.css"} \ No newline at end of file diff --git a/src/components/navbar/navbar.scss b/src/components/navbar/navbar.scss new file mode 100644 index 000000000..fb577a30a --- /dev/null +++ b/src/components/navbar/navbar.scss @@ -0,0 +1,106 @@ +@import "../..//responsive.scss"; + +nav { + display: flex; + justify-content: space-between; + height: 100px; + align-items: center; + a { + transition: all 0.4s ease; + + @include sm { + display: none; + } + + &:hover { + scale: 1.08; + } + } + .left { + flex: 3; + // background-color: beige; + align-items: center; + display: flex; + gap: 50px; + .logo { + font-weight: bold; + font-size: 20px; + display: flex; + gap: 10px; + align-items: center; + + img { + width: 28px; + } + + span { + @include md { + display: none; + } + @include sm { + display: initial; + } + } + } + } + // for the right hand side tabs + .right { + flex: 2; + display: flex; + align-items: center; + justify-content: end; + gap: 5px; + height: 100%; + + @include md { + background-color: transparent; + } + a { + padding: 12px 24px; + margin: 29px; + } + .register { + background-color: rgb(244, 244, 112); + // border: 80px; + } + + .menuIcon { + display: none; + z-index: 999; + + img { + width: 36px; + height: 36px; + cursor: pointer; + } + @include sm { + display: inline; + + } + } + .menu { + position: absolute; + top: 0; + right: -50%; + background-color: white; + color: black; + height: 100vh; + width: -50%; + transition: all 1s ease; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 24px; + + &.active { + right: 0; + } + @include sm { + a { + display: initial; + } + } + } + } +} diff --git a/src/components/searchBar/SearchBar.jsx b/src/components/searchBar/SearchBar.jsx new file mode 100644 index 000000000..a818a06ec --- /dev/null +++ b/src/components/searchBar/SearchBar.jsx @@ -0,0 +1,61 @@ +import { useState } from "react"; +import "./searchBar.scss"; +import React from "react"; + +const types = ["buy", "rent"]; + +function SearchBar() { + const [query, setQuery] = useState({ + type: "buy", + location: "", + minPrice: 0, + maxPrice: 0, + }); + + const switchType = (val) => { + setQuery((prev) => ({ ...prev, type: val })); + }; + return ( +
+
+ {types.map((type) => ( + + ))} +
+
+ + + + + +
+
+ + ); +} + +export default SearchBar; diff --git a/src/components/searchBar/searchBar.css b/src/components/searchBar/searchBar.css new file mode 100644 index 000000000..189e70088 --- /dev/null +++ b/src/components/searchBar/searchBar.css @@ -0,0 +1 @@ +/*# sourceMappingURL=searchBar.css.map */ \ No newline at end of file diff --git a/src/components/searchBar/searchBar.css.map b/src/components/searchBar/searchBar.css.map new file mode 100644 index 000000000..17edd4c35 --- /dev/null +++ b/src/components/searchBar/searchBar.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"searchBar.css"} \ No newline at end of file diff --git a/src/components/searchBar/searchBar.scss b/src/components/searchBar/searchBar.scss new file mode 100644 index 000000000..464ad82a6 --- /dev/null +++ b/src/components/searchBar/searchBar.scss @@ -0,0 +1,99 @@ +@import "../../responsive.scss"; + +.searchBar { + .type { + @include sm { + margin-bottom: 5px; + } + button { + padding: 16px 36px; + border: 1px solid grey; + border-bottom: none; + cursor: pointer; + background-color: white; + text-transform: capitalize; + + &.active { + background-color: black; + color: white; + } + + &:first-child { + border-top-left-radius: 5px; + border-right: none; + } + + &:last-child { + border-top-right-radius: 5px; + border-left: none; + + @include sm { + border-bottom: 1px solid grey; + } + } + } + } + + form { + display: flex; + // align-items: center; + justify-content: space-between; + height: 64px; + gap: 5px; + border: 1px solid grey; + + @include sm { + flex-direction: column; + border: none; + } + + input { + border: none; + padding: 0px 10px; + width: 200px; + + @include lg { + padding: 0px 5px; + width: 200px; + &:nth-child(2), + &:nth-child(3) { + width: 140px; + } + + } + @include md { + width: 200px; + + &:nth-child(2), + &:nth-child(3) { + width: 200px; + } + } + @include sm { + padding: 20px; + width: auto; + &:nth-child(2), + &:nth-child(3) { + width: auto; + } + border: 1px solid black; + } + } + + button { + border: none; + cursor: pointer; + background-color: #fece51; + flex: 1; + + @include sm { + padding: 20px; + } + + img { + width: 24px; + height: 24px; + } + } + } +} diff --git a/src/index.css b/src/index.css index e69de29bb..e06558c52 100644 --- a/src/index.css +++ b/src/index.css @@ -0,0 +1,10 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +a { + text-decoration: none; + overflow: hidden; +}/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/src/index.css.map b/src/index.css.map new file mode 100644 index 000000000..0839e2bb3 --- /dev/null +++ b/src/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;ACCJ;;ADEA;EACI,qBAAA;EACA,gBAAA;ACCJ","file":"index.css"} \ No newline at end of file diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 000000000..7506a6c40 --- /dev/null +++ b/src/index.scss @@ -0,0 +1,10 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +a{ + text-decoration: none; + overflow: hidden; +} \ No newline at end of file diff --git a/src/layout.css b/src/layout.css new file mode 100644 index 000000000..5d17d9c71 --- /dev/null +++ b/src/layout.css @@ -0,0 +1,32 @@ +.layout { + height: 100vh; + max-width: 1366px; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; + display: flex; + flex-direction: column; +} +@media (max-width: 1366px) { + .layout { + background-color: rgb(237, 222, 222); + max-width: 1280px; + } +} +@media (max-width: 1024px) { + .layout { + background-color: rgb(221, 221, 243); + max-width: 768px; + } +} +@media (max-width: 738px) { + .layout { + background-color: rgb(236, 222, 222); + max-width: 640px; + } +} + +.content { + flex: 1; +}/*# sourceMappingURL=layout.css.map */ \ No newline at end of file diff --git a/src/layout.css.map b/src/layout.css.map new file mode 100644 index 000000000..12e5dc90a --- /dev/null +++ b/src/layout.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["layout.scss","layout.css","responsive.scss"],"names":[],"mappings":"AAEA;EACE,aAAA;EACA,iBAAA;EACA,iBAAA;EACA,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,aAAA;EACA,sBAAA;ACDF;ACEE;EFTF;IAWI,oCAAA;IACA,iBAAA;ECAF;AACF;ACTE;EFJF;IAeI,oCAAA;IACA,gBAAA;ECEF;AACF;ACpBE;EFCF;IAoBI,oCAAA;IACA,gBAAA;ECGF;AACF;;ADAA;EACE,OAAA;ACGF","file":"layout.css"} \ No newline at end of file diff --git a/src/lib/dummydata.js b/src/lib/dummydata.js new file mode 100644 index 000000000..1de1d78ff --- /dev/null +++ b/src/lib/dummydata.js @@ -0,0 +1,120 @@ +export const listData = [ + { + id: 1, + title: "A Great Apartment Next to the Beach!", + img: "https://images.pexels.com/photos/1918291/pexels-photo-1918291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 2, + bathroom: 1, + price: 1000, + address: "456 Park Avenue, London", + latitude: 51.5074, + longitude: -0.1278, + }, + { + id: 2, + title: "An Awesome Apartment Near the Park! Almost too good to be true!", + img: "https://images.pexels.com/photos/1428348/pexels-photo-1428348.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 3, + bathroom: 2, + price: 1500, + address: "789 Oxford Street, London", + latitude: 52.4862, + longitude: -1.8904, + }, + { + id: 3, + title: "A New Apartment in the City!", + img: "https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 1, + bathroom: 1, + price: 800, + address: "101 Baker Street, London", + latitude: 53.4808, + longitude: -2.2426, + }, + { + id: 4, + title: "Great Location! Great Price! Great Apartment!", + img: "https://images.pexels.com/photos/2467285/pexels-photo-2467285.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 2, + bathroom: 1, + price: 1000, + address: "234 Kingsway, London,", + latitude: 53.8008, + longitude: -1.5491, + }, + { + id: 5, + title: "Apartment 5", + img: "https://images.pexels.com/photos/276625/pexels-photo-276625.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 3, + bathroom: 2, + price: 1500, + address: "567 Victoria Road, London", + latitude: 53.4084, + longitude: -2.9916, + }, + { + id: 6, + title: "Apartment 6", + img: "https://images.pexels.com/photos/271816/pexels-photo-271816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 1, + bathroom: 1, + price: 800, + address: "890 Regent Street, London", + latitude: 54.9783, + longitude: -1.6174, + }, + { + id: 7, + title: "Apartment 7", + img: "https://images.pexels.com/photos/2029667/pexels-photo-2029667.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 2, + bathroom: 1, + price: 1000, + address: "112 Piccadilly, London", + latitude: 53.3811, + longitude: -1.4701, + }, + { + id: 8, + title: "Apartment 8", + img: "https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 3, + bathroom: 2, + price: 1500, + address: "8765 Main High Street, London", + latitude: 51.4545, + longitude: -2.5879, + }, +]; + +export const singlePostData = { + id: 1, + title: "Beautiful Apartment", + price: 1200, + images: [ + "https://images.pexels.com/photos/1918291/pexels-photo-1918291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + "https://images.pexels.com/photos/1428348/pexels-photo-1428348.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + "https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + "https://images.pexels.com/photos/2467285/pexels-photo-2467285.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + ], + bedRooms: 2, + bathroom: 1, + size: 861, + latitude: 51.5074, + longitude: -0.1278, + city: "London", + address: "1234 Broadway St", + school: "250m away", + bus: "100m away", + restaurant: "50m away", + description: + "Future alike hill pull picture swim magic chain seed engineer nest outer raise bound easy poetry gain loud weigh me recognize farmer bare danger. actually put square leg vessels earth engine matter key cup indeed body film century shut place environment were stage vertical roof bottom lady function breeze darkness beside tin view local breathe carbon swam declared magnet escape has from pile apart route coffee storm someone hold space use ahead sheep jungle closely natural attached part top grain your grade trade corn salmon trouble new bend most teacher range anybody every seat fifteen eventually", +}; + +export const userData = { + id: 1, + name: "John Doe", + img: "https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", +}; \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 51a8c5825..a734dc87e 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,6 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.jsx' +import './index.scss' ReactDOM.createRoot(document.getElementById('root')).render( diff --git a/src/responsive.css b/src/responsive.css new file mode 100644 index 000000000..7e97935dd --- /dev/null +++ b/src/responsive.css @@ -0,0 +1 @@ +/*# sourceMappingURL=responsive.css.map */ \ No newline at end of file diff --git a/src/responsive.css.map b/src/responsive.css.map new file mode 100644 index 000000000..8bd1735db --- /dev/null +++ b/src/responsive.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"responsive.css"} \ No newline at end of file diff --git a/src/responsive.scss b/src/responsive.scss new file mode 100644 index 000000000..ef79a8649 --- /dev/null +++ b/src/responsive.scss @@ -0,0 +1,15 @@ +@mixin sm { + @media (max-width: 738px) { + @content; + } +} +@mixin md { + @media (max-width: 1024px) { + @content; + } +} +@mixin lg { + @media (max-width: 1366px) { + @content; + } +} diff --git a/src/routes/homePage/homePage.css b/src/routes/homePage/homePage.css new file mode 100644 index 000000000..39dd7b394 --- /dev/null +++ b/src/routes/homePage/homePage.css @@ -0,0 +1,24 @@ +.homePage { + display: flex; + height: 100%; +} +.homePage .textContainer { + flex: 3; + padding: 100px; +} +.homePage .textContainer .wrapper { + padding-right: 100px; +} +.homePage .imgContainer { + flex: 2; + display: flex; + background-color: white; + position: relative; + display: flex; + align-items: center; +} +.homePage .imgContainer img { + width: 115%; + position: absolute; + right: 0; +}/*# sourceMappingURL=homePage.css.map */ \ No newline at end of file diff --git a/src/routes/homePage/homePage.css.map b/src/routes/homePage/homePage.css.map new file mode 100644 index 000000000..8f39cec73 --- /dev/null +++ b/src/routes/homePage/homePage.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["homePage.scss","homePage.css"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,YAAA;ACCF;ADCE;EACE,OAAA;EACA,cAAA;ACCJ;ADEI;EACI,oBAAA;ACAR;ADIE;EACE,OAAA;EACA,aAAA;EACA,uBAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;ACFJ;ADKI;EACE,WAAA;EACA,kBAAA;EACA,QAAA;ACHN","file":"homePage.css"} \ No newline at end of file diff --git a/src/routes/homePage/homePage.jsx b/src/routes/homePage/homePage.jsx new file mode 100644 index 000000000..8c6f1c565 --- /dev/null +++ b/src/routes/homePage/homePage.jsx @@ -0,0 +1,42 @@ +import React from "react"; +import SearchBar from "../../components/searchBar/SearchBar"; +import "./homePage.scss"; + +function homePage() { + return ( +
+
+
+

Find Real Estate & Get Your Dream

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quos + consequatur doloribus, aliquam, iusto, itaque possimus obcaecati + quaerat dolorem aperiam eligendi corporis nemo reprehenderit + officiis quibusdam quidem blanditiis! A, facilis? +

+ + +
+
+

16+

+

Years of Experience+

+
+
+

200+

+

Awards Gained

+
+
+

2000+

+

Properties Sold

+
+
+
+
+
+ +
+
+ ); +} + +export default homePage; diff --git a/src/routes/homePage/homePage.scss b/src/routes/homePage/homePage.scss new file mode 100644 index 000000000..b954f1511 --- /dev/null +++ b/src/routes/homePage/homePage.scss @@ -0,0 +1,76 @@ +@import "../../responsive.scss"; + +.homePage { + display: flex; + height: 100%; + + .textContainer { + flex: 3; + padding: 100px; + + .wrapper { + padding-right: 100px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 50px; + // background-color: beige; + height: 100%; + + @include md { + padding: 0px; + } + @include sm { + justify-content: start; + } + .title { + font-size: 64 px; + @include lg { + font-size: 48px; + } + } + .boxes { + display: flex; + justify-content: space-between; + + @include sm { + display: none; + } + } + h1 { + font-size: 36px; + @include lg { + font-size: 32px; + } + } + h2 { + font-size: 20px; + font-weight: 300; + } + } + } + + .imgContainer { + flex: 2; + display: flex; + background-color: white; + position: relative; + display: flex; + align-items: center; + // justify-content: center; + + @include md { + display: none; + } + + img { + width: 115%; + position: absolute; + right: 0; + + @include lg { + width: 105%; + } + } + } +} diff --git a/src/routes/layout/layout.jsx b/src/routes/layout/layout.jsx new file mode 100644 index 000000000..e39b9b6c3 --- /dev/null +++ b/src/routes/layout/layout.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Outlet } from 'react-router-dom'; +import Navbar from "../../components/navbar/Navbar"; +import "./layout.scss"; +function layout() { + return ( +
+
+ +
+ +
+ +
+
+ ) +} + +export default layout; \ No newline at end of file diff --git a/src/routes/layout/layout.scss b/src/routes/layout/layout.scss new file mode 100644 index 000000000..18e24a519 --- /dev/null +++ b/src/routes/layout/layout.scss @@ -0,0 +1,30 @@ +@import "../../responsive.scss"; + +.layout { + height: 100vh; + max-width: 1366px; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; + display: flex; + flex-direction: column; + + @include lg { + // background-color: rgb(237, 222, 222); + max-width: 1280px; + } + @include md { + // background-color: rgb(221, 221, 243); + max-width: 768px; + } + + @include sm { + // background-color: rgb(236, 222, 222); + max-width: 640px; + } +} + +.content { + flex: 1; +} diff --git a/src/routes/listPage/listPage.jsx b/src/routes/listPage/listPage.jsx new file mode 100644 index 000000000..98e146fbb --- /dev/null +++ b/src/routes/listPage/listPage.jsx @@ -0,0 +1,24 @@ +import { listData } from '../../lib/dummydata'; +import './listPage.scss'; +import Filter from "./../../components/filter/Filter" +import Card from "../../components/card/Card" +import React from 'react'; + +function ListPage() { + + const data = listData; + return ( +
+
+ + {data.map(item => ( + + ))} +
+
+
Map
+
+ ) +} + +export default ListPage; \ No newline at end of file diff --git a/src/routes/listPage/listPage.scss b/src/routes/listPage/listPage.scss new file mode 100644 index 000000000..ebd765266 --- /dev/null +++ b/src/routes/listPage/listPage.scss @@ -0,0 +1,18 @@ +.listPage { + display: flex; + height: 100%; + .listContainer { + flex: 3; + .wrapper { + padding-right: 50px; + display: flex; + flex-direction: column; + gap: 50px; + overflow-y: scroll; + } + } + .mapContainer { + flex: 2; + background-color: white; + } +} diff --git a/src/routes/login/login.jsx b/src/routes/login/login.jsx new file mode 100644 index 000000000..c4f4e8212 --- /dev/null +++ b/src/routes/login/login.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +function login() { + return ( +
login
+ ) +} + +export default login \ No newline at end of file diff --git a/src/routes/login/login.scss b/src/routes/login/login.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/routes/singlePage/singlePage.jsx b/src/routes/singlePage/singlePage.jsx new file mode 100644 index 000000000..6490d6453 --- /dev/null +++ b/src/routes/singlePage/singlePage.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +function singlePage() { + return ( +
singlePage
+ ) +} + +export default singlePage \ No newline at end of file diff --git a/src/routes/singlePage/singlePage.scss b/src/routes/singlePage/singlePage.scss new file mode 100644 index 000000000..e69de29bb