diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 000000000..2d8a391ea --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,5 @@ +{ + "recommendations": [ + "nikhilmjeby.black-box" + ] +} \ No newline at end of file diff --git a/index.html b/index.html index b49298254..1ee9d30f0 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Lama Real Estate UI + Prince Real Estate UI = 8" } }, + "node_modules/@react-leaflet/core": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz", + "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==", + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, + "node_modules/@remix-run/router": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz", + "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==", + "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 +1279,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 +1433,17 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/binary-extensions": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1409,6 +1454,17 @@ "concat-map": "0.0.1" } }, + "node_modules/braces": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dependencies": { + "fill-range": "^7.1.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/browserslist": { "version": "4.23.0", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", @@ -1503,6 +1559,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 +2254,17 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/fill-range": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "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 +2320,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 +2574,11 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz", + "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -2572,6 +2677,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 +2747,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 +2782,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 +2810,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", @@ -2947,6 +3069,11 @@ "json-buffer": "3.0.1" } }, + "node_modules/leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -3049,6 +3176,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 +3397,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", @@ -3377,6 +3523,19 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-leaflet": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz", + "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==", + "dependencies": { + "@react-leaflet/core": "^2.1.0" + }, + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -3386,6 +3545,47 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz", + "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==", + "dependencies": { + "@remix-run/router": "1.16.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz", + "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==", + "dependencies": { + "@remix-run/router": "1.16.1", + "react-router": "6.23.1" + }, + "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", @@ -3566,6 +3766,22 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sass": { + "version": "1.77.4", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.4.tgz", + "integrity": "sha512-vcF3Ckow6g939GMA4PeU7b2K/9FALXk2KF9J87txdHzXbUF9XRQRwSxcAs/fGaTnJeBFd7UoV22j3lzMLdM0Pw==", + "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 +3874,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 +4006,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..a9077a898 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,12 @@ "preview": "vite preview" }, "dependencies": { + "leaflet": "^1.9.4", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-leaflet": "^4.2.1", + "react-router-dom": "^6.23.1", + "sass": "^1.77.4" }, "devDependencies": { "@types/react": "^18.2.56", diff --git a/src/App.jsx b/src/App.jsx index 88a1fa927..55bb66f90 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,52 @@ +import { + createBrowserRouter, + RouterProvider, +} from "react-router-dom"; +import Homepage from './routes/homepage/homepage'; +import ListPage from './routes/listpage/ListPage'; +import Layout from './routes/layout/Layout'; +import Singlepage from "./routes/singlepage/Singlepage"; +import Login from "./routes/login/Login"; +import Proflie from "./routes/proflie/Proflie"; + + + + + function App() { + const router = createBrowserRouter([ + { + path: "/", + element:, + children:[ + { + path:"/", + element: + }, + { + path:"/list", + element: + }, + { + path:"/:id", + element: + }, + { + path:'/profile', + element: + }, + { + path:"/login", + element: + } + ] + }, + ]); + return ( -
Hello World
+ ) + } export default App \ No newline at end of file diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx new file mode 100644 index 000000000..df0072dc0 --- /dev/null +++ b/src/components/Navbar/Navbar.jsx @@ -0,0 +1,62 @@ +import { useState } from "react"; +import "./navbar.scss"; +import { Link } from "react-router-dom"; + +function Navbar() { + const [open, setOpen] = useState(false); + + const user = true; + return ( + + ); +} + +export default Navbar; \ 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..a2210e155 --- /dev/null +++ b/src/components/Navbar/navbar.scss @@ -0,0 +1,154 @@ +@import "../../reponive.scss"; + +nav { + height: 100px; + display: flex; + justify-content: space-between; + align-items: center; + + a { + transition: all 0.4s ease; + + @include sm { + display: none; + } + + &:hover { + scale: 1.05; + } + } + + .left { + flex: 3; + display: flex; + align-items: center; + gap: 50px; + + .logo { + font-weight: bold; + font-size: 20px; + display: flex; + align-items: center; + gap: 10px; + + img { + width: 28px; + } + + span { + @include md { + display: none; + } + + @include sm { + display: initial; + } + } + } + } + .right { + flex: 2; + display: flex; + align-items: center; + justify-content: flex-end; + background-color: #fcf5f3; + height: 100%; + + @include md { + background-color: transparent; + } + + a { + padding: 12px 24px; + margin: 20px; + } + + .user{ + display: flex; + align-items: center; + font-weight: bold; + + img{ + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; + margin-right: 20px; + } + + span{ + @include sm{ + display: none; + } + } + + .profile{ + padding: 12px 24px; + background-color: #fece51; + cursor: pointer; + border: none; + position: relative; + + .notification{ + position: absolute; + top: -8px; + right: -8px; + background-color: red; + color: white; + border-radius: 50%; + width: 26px; + height: 26px; + display: flex; + align-items: center; + justify-content: center; + } + + } + } + + .register { + background-color: #fece51; + } + + .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: black; + color: white; + 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; + } + } + } + } +} \ No newline at end of file diff --git a/src/components/card/Card.jsx b/src/components/card/Card.jsx new file mode 100644 index 000000000..8887eea19 --- /dev/null +++ b/src/components/card/Card.jsx @@ -0,0 +1,44 @@ +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..bfb08fea7 --- /dev/null +++ b/src/components/card/card.scss @@ -0,0 +1,103 @@ +@import "../../reponive.scss"; + +.card { + display: flex; + gap: 20px; + + .imageContainer { + flex: 2; + height: 200px; + + @include md { + display: none; + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 10px; + } + } + .textContainer { + flex: 3; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 10px; + + img { + width: 16px; + height: 16px; + } + + .title { + font-size: 20px; + font-weight: 600; + color: #444; + transition: all 0.4s ease; + + &:hover { + color: #000; + scale: 1.01; + } + } + + .address { + font-size: 14px; + display: flex; + align-items: center; + gap: 5px; + color: #888; + } + + .price { + font-size: 20px; + font-weight: 300; + padding: 5px; + border-radius: 5px; + background-color: rgba(254, 205, 81, 0.438); + 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; + padding: 5px; + border-radius: 5px; + } + } + + .icons { + display: flex; + gap: 20px; + + .icon { + border: 1px solid #999; + padding: 2px 5px; + border-radius: 5px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + + &:hover { + background-color: lightgray; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/components/chat/Chat.jsx b/src/components/chat/Chat.jsx new file mode 100644 index 000000000..6145ae2b3 --- /dev/null +++ b/src/components/chat/Chat.jsx @@ -0,0 +1,170 @@ +import { useState } from "react"; +import "./chat.scss"; + +const Chat = () => { + const [Chat, setChat] = useState(true); + return ( +
+
+

Messages

+
+ + Prince Ojo +

Lorem ipsum dolor sit amet...

+
+
+
+ + Prince Ojo +

Lorem ipsum dolor sit amet...

+
+
+ + Prince Ojo +

Lorem ipsum dolor sit amet...

+
+
+
+ + Prince Ojo +

Lorem ipsum dolor sit amet...

+
+
+
+ + Prince Ojo +

Lorem ipsum dolor sit amet...

+
+
+ + Prince Ojo +

Lorem ipsum dolor sit amet...

+
+
+
+ + Prince Ojo +

Lorem ipsum dolor sit amet...

+
+
+
+ + Prince Ojo +

Lorem ipsum dolor sit amet...

+
+
+
+ + Prince Ojo +

Lorem ipsum dolor sit amet...

+
+
+
+ + Prince Ojo +

Lorem ipsum dolor sit amet...

+
+
+
+ + {Chat && ( +
+
+
+ + Prince Ojo +
+ setChat(null)}> + X + +
+
+
+

Lorem ipsum dolor sit amet...

+ 1 hour ago +
+
+

Lorem ipsum dolor sit amet...

+ 2 hour ago +
+
+

Lorem ipsum dolor sit amet...

+ 4 hour ago +
+
+

Lorem ipsum dolor sit amet...

+ 8 hour ago +
+
+

Lorem ipsum dolor sit amet...

+ 11 hour ago +
+
+

Lorem ipsum dolor sit amet...

+ 24 hour ago +
+
+

Lorem ipsum dolor sit amet...

+ 1 week ago +
+
+

Lorem ipsum dolor sit amet...

+ 2 weeks ago +
+
+

Lorem ipsum dolor sit amet...

+ 1 month ago +
+
+

Lorem ipsum dolor sit amet...

+ 2 months ago +
+
+

Lorem ipsum dolor sit amet...

+ 1 year ago +
+
+
+ + +
+
+ )} +
+ ); +}; + +export default Chat; diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss new file mode 100644 index 000000000..93e42e00e --- /dev/null +++ b/src/components/chat/chat.scss @@ -0,0 +1,116 @@ +.Chat { + height: 100%; + display: flex; + flex-direction: column; + .massages { + flex: 1; + display: flex; + flex-direction: column; + gap: 20px; + overflow-y: scroll; + h1 { + font-weight: 300; + } + .message { + background-color: white; + display: flex; + align-items: center; + padding: 20px; + border-radius: 10px; + gap: 20px; + cursor: pointer; + span { + font-weight: bold; + } + .color{ + background-color: #fece51; + border-radius: 50%; + width: 10px; + height: 10px + } + + img { + width: 40px; + height: 40px; + border-radius: 50px; + object-fit: cover; + } + } + } + .chatBox { + flex: 1; + background-color: white; + display: flex; + flex-direction: column; + justify-content: space-between; + + .top { + display: flex; + background-color: #f7c14b85; + padding: 20px; + font-weight: bold; + justify-content: space-between; + + .User { + display: flex; + align-items: center; + gap: 20px; + img { + width: 30px; + height: 30px; + border-radius: 50px; + object-fit: cover; + } + } + .close { + cursor: pointer; + } + } + .center { + height: 350px; + overflow: scroll; + padding: 20px; + display: flex; + flex-direction: column; + gap: 20px; + + .chatmessage{ + width: 50%; + + &.own{ + align-self: flex-end; + text-align: right; + } + span{ + font-size: 12px; + background-color: #f7c14b39; + padding: 2px; + border-radius: 5px; + } + } + + } + .bottom { + border-top: 2px solid #f7c14b85; + height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + + textarea { + flex: 3; + height: 100%; + border: none; + padding: 20px; + } + + button { + flex: 1; + background-color: #f7c14b85; + height: 100%; + border: none; + cursor: pointer; + } + } + } +} diff --git a/src/components/filter/Filter.jsx b/src/components/filter/Filter.jsx new file mode 100644 index 000000000..59d193382 --- /dev/null +++ b/src/components/filter/Filter.jsx @@ -0,0 +1,82 @@ +import './filter.scss'; + + +const Filter = () => { + return ( +
+

+ Search results for Nigeria +

+ {/* top */} +
+
+ + +
+
+ + {/* bottom */} +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ ); +}; + +export default Filter; \ No newline at end of file diff --git a/src/components/filter/filter.scss b/src/components/filter/filter.scss new file mode 100644 index 000000000..43d668bef --- /dev/null +++ b/src/components/filter/filter.scss @@ -0,0 +1,49 @@ +.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 gray; + border-radius: 5px; + font-size: 14px; + } + } + .top{ + input{ + width: 100%; + } + } + .bottom{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: 20px; + } + button{ + width: 100px; + height: 50px; + padding:10px; + border: none; + cursor: pointer; + background-color: #fece51; + img{ + width: 24px; + height: 24px; + object-fit: cover; + } + } +} \ No newline at end of file diff --git a/src/components/list/List.jsx b/src/components/list/List.jsx new file mode 100644 index 000000000..69f18a899 --- /dev/null +++ b/src/components/list/List.jsx @@ -0,0 +1,17 @@ +import './list.scss' +import Card from '../card/Card' +import {listData} from '../../lib/dummydata' + + +const List = () => { + return ( +
+ {listData.map(item=>( + + + ))} +
+ ) +} + +export default List \ No newline at end of file diff --git a/src/components/list/list.scss b/src/components/list/list.scss new file mode 100644 index 000000000..f8bc77dd0 --- /dev/null +++ b/src/components/list/list.scss @@ -0,0 +1,5 @@ +.List{ + display: flex; + flex-direction: column; + gap: 50px; +} \ No newline at end of file diff --git a/src/components/map/Map.jsx b/src/components/map/Map.jsx new file mode 100644 index 000000000..b437e6899 --- /dev/null +++ b/src/components/map/Map.jsx @@ -0,0 +1,24 @@ +import { MapContainer, TileLayer } from 'react-leaflet'; +import './map.scss'; +import "leaflet/dist/leaflet.css"; +import Pin from '../pin/Pin'; +import { itemsdata } from '../../lib/dummydata'; + +function Map() { + const items = itemsdata; + console.log("items"); + + return ( + + + {items.map(items => ( + + ))} + + ); +} + +export default Map; diff --git a/src/components/map/map.scss b/src/components/map/map.scss new file mode 100644 index 000000000..c57a7a8c5 --- /dev/null +++ b/src/components/map/map.scss @@ -0,0 +1,5 @@ +.map{ + width: 100%; + height: 100%; + border-radius: 20px; +} \ No newline at end of file diff --git a/src/components/pin/Pin.jsx b/src/components/pin/Pin.jsx new file mode 100644 index 000000000..8aa1e6ab2 --- /dev/null +++ b/src/components/pin/Pin.jsx @@ -0,0 +1,23 @@ +import { Marker, Popup } from "react-leaflet"; +import "./pin.scss"; +import { Link } from "react-router-dom"; + + +function Pin({ items }) { + return ( + + +
+ +
+ {items.title} + {items.bedroom} bedroom + $ {items.price} +
+
+ + + ); +} + +export default Pin; \ No newline at end of file diff --git a/src/components/pin/pin.scss b/src/components/pin/pin.scss new file mode 100644 index 000000000..17d7c108c --- /dev/null +++ b/src/components/pin/pin.scss @@ -0,0 +1,16 @@ +.popupContainer{ + display: flex; + gap: 20px; + + img{ + width: 64px; + height: 48px; + object-fit: cover; + border-radius: 5px; + } + .textContainer{ + display: flex; + flex-direction: column; + justify-content: space-between; + } +} \ No newline at end of file diff --git a/src/components/searchBar/SeachBar.jsx b/src/components/searchBar/SeachBar.jsx new file mode 100644 index 000000000..01ce7e904 --- /dev/null +++ b/src/components/searchBar/SeachBar.jsx @@ -0,0 +1,53 @@ +import { useState } from "react"; +import "./searchbar.scss"; + +const types = ["buy", "rent"]; + +const SeachBar = () => { + 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 SeachBar; diff --git a/src/components/searchBar/searchbar.scss b/src/components/searchBar/searchbar.scss new file mode 100644 index 000000000..f4d86a90d --- /dev/null +++ b/src/components/searchBar/searchbar.scss @@ -0,0 +1,87 @@ +@import '../../reponive.scss'; + + +.SeachBar{ + .type{ + @include sm{ + margin-bottom: 5px; + } + button{ + padding: 16px 36px; + border: 1px solid gray; + background-color: white; + cursor: pointer; + text-transform: capitalize; + border-bottom: none; + &.active{ + background: #000; + color: white; + } + &:first-child{ + border-top-left-radius: 5px; + border-right: none; + + @include sm{ + border-bottom: 1px solid gray; + } + } + &:last-child{ + border-top-right-radius: 5px; + border-left: none; + } + } + } + form{ + border: 1px solid gray; + display: flex; + justify-content: space-between; + height: 64px; + gap: 5px; + + @include sm{ + flex-direction: column; + border: none; + } + + input{ + border: none; + padding: 0 10px; + width: 200px; + @include lg{ + padding: 0px 5px; + + &:nth-child(2),&:nth-child(3){ + width: 140px; + } + } + @include md{ + width: 200px; + &:nth-child(2),&:nth-child(3){ + width:200px; + } + } + @include sm{ + width: auto; + &:nth-child(2),&:nth-child(3){ + width:auto; + } + padding: 20px; + border: 1px solid gray; + } + } + button{ + border: none; + cursor: pointer; + background-color: #fece51; + flex: 2; + @include sm{ + padding: 10px; + } + } + img{ + width: 34px; + height: 34px; + object-fit: cover; + } + } +} \ No newline at end of file diff --git a/src/components/slider/Slider.jsx b/src/components/slider/Slider.jsx new file mode 100644 index 000000000..aa1b1aa3f --- /dev/null +++ b/src/components/slider/Slider.jsx @@ -0,0 +1,58 @@ +import { useState } from "react"; +import "./slider.scss"; + +function Slider({ images }) { + const [imageIndex, setImageIndex] = useState(null); + + const changeSlide = (direction) => { + if (direction === "left") { + if (imageIndex === 0) { + setImageIndex(images.length - 1); + } else { + setImageIndex(imageIndex - 1); + } + } else { + if (imageIndex === images.length - 1) { + setImageIndex(0); + } else { + setImageIndex(imageIndex + 1); + } + } + }; + + return ( +
+ {imageIndex !== null && ( +
+
changeSlide("left")}> + +
+
+ +
+
changeSlide("right")}> + +
+
setImageIndex(null)}> + X +
+
+ )} +
+ setImageIndex(0)} /> +
+
+ {images.slice(1).map((image, index) => ( + setImageIndex(index + 1)} + /> + ))} +
+
+ ); +} + +export default Slider; \ No newline at end of file diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss new file mode 100644 index 000000000..c6bb82bb1 --- /dev/null +++ b/src/components/slider/slider.scss @@ -0,0 +1,103 @@ +@import "../../reponive.scss"; + +.slider { + width: 100%; + height: 350px; + display: flex; + gap: 20px; + + @include sm { + height: 280px; + } + + .fullSlider { + position: absolute; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + background-color: black; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 9999; + + .arrow { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + + img { + width: 50px; + + @include md { + width: 30px; + } + + @include sm { + width: 20px; + } + + &.right { + transform: rotate(180deg); + } + } + } + .imgContainer { + flex: 10; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .close { + position: absolute; + top: 0; + right: 0; + color: white; + font-size: 36px; + font-weight: bold; + padding: 50px; + cursor: pointer; + } + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 10px; + cursor: pointer; + } + + .bigImage { + flex: 3; + + @include sm { + flex: 2; + } + } + .smallImages { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 20px; + + @include sm { + flex: 1; + } + + img { + height: 100px; + + @include sm { + height: 80px; + } + } + } +} \ No newline at end of file diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 000000000..fbdeac609 --- /dev/null +++ b/src/index.scss @@ -0,0 +1,15 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + +a { + text-decoration: none; + color: inherit; +} + +body{ + font-family: "Lato", sans-serif; + overflow: hidden; +} \ No newline at end of file diff --git a/src/lib/dummydata.js b/src/lib/dummydata.js new file mode 100644 index 000000000..1b4782890 --- /dev/null +++ b/src/lib/dummydata.js @@ -0,0 +1,211 @@ +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: 150000, + address: "456 Macauley Street, nigeria", + 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: 15000, + address: "789 Adebowale Street, nigeria", + 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: 8000, + address: "101 Asaba street, nigeria", + 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: 5000, + address: "234 Kingsway, nigeria,", + 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: 27000, + address: "567 Victoria Road, nigeria", + 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: 8000, + address: "890 Regent Street, nigeria", + 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: 10000, + address: "112 Piccadilly, nigeria", + 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: 15000, + address: "8765 Main High Street, nigeria", + latitude: 51.4545, + longitude: -2.5879, + }, + ]; + +export const itemsdata = [ + { + 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: 150000, + address: "456 Macauley Street, nigeria", + 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: 15000, + address: "789 Adebowale Street, nigeria", + 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: 8000, + address: "101 Asaba street, nigeria", + 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: 5000, + address: "234 Kingsway, nigeria,", + 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: 27000, + address: "567 Victoria Road, nigeria", + 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: 8000, + address: "890 Regent Street, nigeria", + 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: 10000, + address: "112 Piccadilly, nigeria", + 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: 15000, + address: "8765 Main High Street, nigeria", + latitude: 51.4545, + longitude: -2.5879, + }, + ]; + + export const singlePostData = { + id: 1, + title: "Beautiful Apartment", + price: 12000, + 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: "nigeria", + 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: "Prince Ojo", + 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/index.css b/src/main.css similarity index 100% rename from src/index.css rename to src/main.css diff --git a/src/main.jsx b/src/main.jsx index 51a8c5825..e31c18790 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 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/reponive.scss b/src/reponive.scss new file mode 100644 index 000000000..3d3ac4240 --- /dev/null +++ b/src/reponive.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.jsx b/src/routes/homepage/homepage.jsx new file mode 100644 index 000000000..212390040 --- /dev/null +++ b/src/routes/homepage/homepage.jsx @@ -0,0 +1,40 @@ +import SearchBar from "../../components/searchBar/SeachBar"; +import "./homepage.scss"; + +function HomePage() { + return ( +
+
+
+

Find Real Estate & Get Your Dream Place

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos + explicabo suscipit cum eius, iure est nulla animi consequatur + facilis id pariatur fugit quos laudantium temporibus dolor ea + repellat provident impedit! +

+ +
+
+

16+

+

Years of Experience

+
+
+

200

+

Award Gained

+
+
+

2000+

+

Property Ready

+
+
+
+
+
+ +
+
+ ); +} + +export default HomePage; \ No newline at end of file diff --git a/src/routes/homepage/homepage.scss b/src/routes/homepage/homepage.scss new file mode 100644 index 000000000..4f41c1e31 --- /dev/null +++ b/src/routes/homepage/homepage.scss @@ -0,0 +1,83 @@ +@import "../../reponive.scss"; + +.homePage { + display: flex; + height: 100%; + + .textContainer { + flex: 3; + + .wrapper { + padding-right: 100px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 50px; + height: 100%; + + @include lg{ + padding-right: 50px; + } + + @include md{ + padding: 0; + } + + @include sm{ + justify-content: flex-start; + } + + .title { + font-size: 64px; + + @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; + background-color: #fcf5f3; + position: relative; + display: flex; + align-items: center; + + @include md { + display: none; + } + + img { + width: 115%; + position: absolute; + right: 0; + + @include lg { + width: 105%; + } + } + } +} \ No newline at end of file diff --git a/src/routes/layout/Layout.jsx b/src/routes/layout/Layout.jsx new file mode 100644 index 000000000..0a712997f --- /dev/null +++ b/src/routes/layout/Layout.jsx @@ -0,0 +1,19 @@ +import "./layout.scss"; +import Navbar from "../../components/Navbar/Navbar"; +import { Outlet } from "react-router-dom"; + + +const layout = () => { + return ( +
+
+ +
+
+ +
+
+ ); +}; + +export default layout ; diff --git a/src/routes/layout/layout.scss b/src/routes/layout/layout.scss new file mode 100644 index 000000000..6d9b1e2c7 --- /dev/null +++ b/src/routes/layout/layout.scss @@ -0,0 +1,32 @@ +@import '../../reponive.scss'; + +.layout{ + height: 100vh; + max-width: 1366px; + margin-right: auto; + margin-left: auto; + padding-left: 20px; + padding-right: 20px; + display: flex; + flex-direction: column; + + @include lg { + // background-color: rgb(247, 210, 196); + max-width: 1280px; + } + + @include md { + // background-color: rgb(186, 203, 234); + max-width: 768px; + } + + @include sm { + // background-color: rgb(239, 200, 200); + max-width: 640px; + } + .content{ + height: calc(100vh - 100px); + + } + +} \ No newline at end of file diff --git a/src/routes/listpage/ListPage.jsx b/src/routes/listpage/ListPage.jsx new file mode 100644 index 000000000..34381bf91 --- /dev/null +++ b/src/routes/listpage/ListPage.jsx @@ -0,0 +1,25 @@ +import { listData } from "../../lib/dummydata"; +import "./listpage.scss"; +import Filter from "../../components/filter/Filter" +import Card from "../../components/card/Card" +import Map from "../../components/map/Map"; + +function ListPage() { + const data = listData; + + return
+
+
+ + {data.map(item=>( + + ))} +
+
+
+ +
+
; +} + +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..2ab445fef --- /dev/null +++ b/src/routes/listpage/listpage.scss @@ -0,0 +1,30 @@ +@import "../../reponive.scss"; + +.listPage { + display: flex; + height: 100%; + + .listContainer { + flex: 3; + height: 100%; + + .wrapper{ + height: 100%; + padding-right: 50px; + display: flex; + flex-direction: column; + gap: 50px; + overflow-y: scroll; + padding-bottom: 50px; + } + } + .mapContainer { + flex: 2; + height: 100%; + background-color: #fcf5f3; + + @include md{ + display: none; + } + } +} \ No newline at end of file diff --git a/src/routes/login/Login.jsx b/src/routes/login/Login.jsx new file mode 100644 index 000000000..45e3e9d29 --- /dev/null +++ b/src/routes/login/Login.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const 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/proflie/Proflie.jsx b/src/routes/proflie/Proflie.jsx new file mode 100644 index 000000000..a4f6bb6b7 --- /dev/null +++ b/src/routes/proflie/Proflie.jsx @@ -0,0 +1,43 @@ +import Chat from '../../components/chat/Chat' +import List from '../../components/list/List' +import './proflie.scss' + + +const Proflie = () => { + return ( +
+
+
+
+

User Imformation

+ +
+
+ + Avater: + + Username: Prince Ojo + Email: princeojo@gmail.com +
+
+

My List

+ +
+ +
+

Saved List

+
+ +
+
+ +
+
+ +
+
+
+ ) +} + +export default Proflie \ No newline at end of file diff --git a/src/routes/proflie/proflie.scss b/src/routes/proflie/proflie.scss new file mode 100644 index 000000000..c9ababba0 --- /dev/null +++ b/src/routes/proflie/proflie.scss @@ -0,0 +1,69 @@ +@import '../../reponive.scss'; + +.Proflie { + display: flex; + height: 100%; + @include md{ + flex-direction: column; + overflow: scroll; + } + .details { + flex: 3; + overflow-y: scroll; + padding-bottom: 50px; + @include md{ + flex: none; + height: max-content; + } + .wapper { + padding-right: 50px; + display: flex; + flex-direction: column; + gap: 50px; + .tittle { + display: flex; + align-items: center; + justify-content: space-between; + h1 { + font-weight: 300; + } + button { + padding: 12px 24px; + background-color: #fece51; + cursor: pointer; + border: none; + } + } + .info { + display: flex; + flex-direction: column; + gap: 20px; + span { + display: flex; + align-items: center; + gap: 20px; + } + + img { + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; + } + } + } + } + .chatcon { + flex: 2; + background-color: #fcf5f3; + height: 100%; + @include md{ + flex: none; + height: max-content; + } + .wapper { + padding: 0px 20px; + height: 100%; + } + } +} diff --git a/src/routes/singlepage/Singlepage.jsx b/src/routes/singlepage/Singlepage.jsx new file mode 100644 index 000000000..cca678657 --- /dev/null +++ b/src/routes/singlepage/Singlepage.jsx @@ -0,0 +1,116 @@ +import './singlepage.scss' +import Slider from "../../components/slider/Slider"; +import Map from "../../components/map/Map"; +import { singlePostData, userData } from "../../lib/dummydata"; + +function SinglePage() { + return ( +
+
+
+ +
+
+
+

{singlePostData.title}

+
+ + {singlePostData.address} +
+
$ {singlePostData.price}
+
+
+ + {userData.name} +
+
+
{singlePostData.description}
+
+
+
+
+
+

General

+
+
+ +
+ Utilities +

Renter is responsible

+
+
+
+ +
+ Pet Policy +

Pets Allowed

+
+
+
+ +
+ Property Fees +

Must have 3x the rent in total household income

+
+
+
+

Sizes

+
+
+ + 80 sqft +
+
+ + 2 beds +
+
+ + 1 bathroom +
+
+

Nearby Places

+
+
+ +
+ School +

250m away

+
+
+
+ +
+ Bus Stop +

100m away

+
+
+
+ +
+ Restaurant +

200m away

+
+
+
+

Location

+
+ +
+
+ + +
+
+
+
+ ); +} + +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..90523fb76 --- /dev/null +++ b/src/routes/singlepage/singlepage.scss @@ -0,0 +1,220 @@ +@import '../../reponive.scss'; + +.singlePage { + display: flex; + height: 100%; + ; + + + @include md { + flex-direction: column; + overflow: scroll; + } + + .details { + flex: 3; + height: 100%; + overflow-y: scroll; + + @include md { + flex: none; + height: max-content; + margin-bottom: 50px; + } + + .wrapper { + padding-right: 50px; + + @include lg { + padding-right: 20px; + } + @include md { + padding-right: 0px; + } + + .info { + margin-top: 50px; + .top { + display: flex; + justify-content: space-between; + + @include sm { + flex-direction: column; + gap: 20px; + } + + .post { + display: flex; + flex-direction: column; + gap: 20px; + h1 { + font-weight: 400; + } + .address { + display: flex; + gap: 5px; + align-items: center; + color: #888; + font-size: 14px; + + img { + width: 16px; + height: 16px; + } + } + .price { + padding: 5px; + background-color: rgba(254, 205, 81, 0.438); + border-radius: 5px; + width: max-content; + font-size: 20px; + font-weight: 300; + } + } + .user { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 20px; + padding: 0px 50px; + border-radius: 10px; + background: linear-gradient(90deg, rgba(253,145,29,1) 0%, rgba(61,140,164,1) 47%, rgba(252,176,69,1) 100%); + font-weight: 600; + + @include sm { + padding: 20px 50px; + } + + img { + width: 50px; + height: 50px; + border-radius: 50%; + object-fit: cover; + } + } + } + .bottom { + margin-top: 50px; + color: #555; + line-height: 20px; + } + } + } + } + .features { + flex: 2; + background-color: #fcf5f3; + height: 100%; + overflow-y: scroll; + padding-bottom: 1.5rem; + + @include md { + flex: none; + height: max-content; + margin-bottom: 50px; + } + + .wrapper { + padding: 0px 20px; + display: flex; + flex-direction: column; + gap: 20px; + + @include md { + padding: 20px; + } + + img { + width: 24px; + height: 24px; + } + + .title { + font-weight: bold; + font-size: 18px; + margin-bottom: 10px; + } + + .feature { + display: flex; + align-items: center; + gap: 10px; + + img { + background-color: rgba(254, 205, 81, 0.209); + } + + .featureText { + span { + font-weight: bold; + } + p { + font-size: 14px; + } + } + } + + .listVertical { + display: flex; + flex-direction: column; + gap: 20px; + padding: 20px 10px; + background-color: white; + border-radius: 10px; + } + .listHorizontal { + display: flex; + justify-content: space-between; + padding: 20px 10px; + background-color: white; + border-radius: 10px; + } + + .sizes { + display: flex; + justify-content: space-between; + + @include lg { + font-size: 12px; + } + + .size { + display: flex; + align-items: center; + gap: 10px; + background-color: white; + padding: 10px; + border-radius: 5px; + } + } + + .mapContainer { + width: 100%; + height: 300px; + border-radius: 10px; + } + + .buttons { + display: flex; + justify-content: space-between; + + button { + padding: 20px; + display: flex; + align-items: center; + gap: 5px; + background-color: white; + border: 1px solid #fece51; + border-radius: 5px; + cursor: pointer; + + img { + width: 16px; + height: 16px; + } + } + } + } + } +} \ No newline at end of file