From b9e5943fd3b41f8b82e30140ae2de7800cf723cd Mon Sep 17 00:00:00 2001 From: Blessed Date: Fri, 21 Jun 2024 21:38:03 -0400 Subject: [PATCH 1/4] new --- index.html | 2 +- package-lock.json | 206 +++++++++++++++++- package.json | 4 +- src/App.jsx | 42 +++- src/components/Navbar/Navbar.jsx | 39 ++++ src/components/Navbar/navbar.scss | 110 ++++++++++ .../filter/filter.scss} | 0 src/components/searchBar/SeachBar.jsx | 53 +++++ src/components/searchBar/searchbar.scss | 87 ++++++++ src/index.scss | 9 + src/lib/dummydata.js | 120 ++++++++++ src/main.css | 0 src/main.jsx | 7 +- src/reponive.scss | 15 ++ src/routes/homepage/homepage.jsx | 40 ++++ src/routes/homepage/homepage.scss | 70 ++++++ src/routes/layout/Layout.jsx | 19 ++ src/routes/layout/layout.scss | 29 +++ src/routes/listpage/ListPage.jsx | 20 ++ src/routes/listpage/listpage.scss | 15 ++ src/routes/login/Login.jsx | 9 + src/routes/login/login.scss | 0 src/routes/singlepage/Singlepage.jsx | 9 + src/routes/singlepage/singlepage.scss | 0 24 files changed, 894 insertions(+), 11 deletions(-) create mode 100644 src/components/Navbar/Navbar.jsx create mode 100644 src/components/Navbar/navbar.scss rename src/{index.css => components/filter/filter.scss} (100%) create mode 100644 src/components/searchBar/SeachBar.jsx create mode 100644 src/components/searchBar/searchbar.scss create mode 100644 src/index.scss create mode 100644 src/lib/dummydata.js create mode 100644 src/main.css create mode 100644 src/reponive.scss create mode 100644 src/routes/homepage/homepage.jsx create mode 100644 src/routes/homepage/homepage.scss create mode 100644 src/routes/layout/Layout.jsx create mode 100644 src/routes/layout/layout.scss create mode 100644 src/routes/listpage/ListPage.jsx create mode 100644 src/routes/listpage/listpage.scss create mode 100644 src/routes/login/Login.jsx create mode 100644 src/routes/login/login.scss create mode 100644 src/routes/singlepage/Singlepage.jsx create mode 100644 src/routes/singlepage/singlepage.scss 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/@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 +1267,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 +1421,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 +1442,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 +1547,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 +2242,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 +2308,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 +2562,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 +2665,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 +2735,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 +2770,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 +2798,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 +3159,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 +3380,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 +3515,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 +3736,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 +3844,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 +3976,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..05c8b5594 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,9 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "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..a5593a4e8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,47 @@ +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"; + + + + + function App() { + const router = createBrowserRouter([ + { + path: "/", + element:, + children:[ + { + path:"/", + element: + }, + { + path:"/list", + element: + }, + { + path:"/:id", + 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..31fc222d3 --- /dev/null +++ b/src/components/Navbar/Navbar.jsx @@ -0,0 +1,39 @@ +import { useState } from "react"; +import "./navbar.scss"; + +const Navbar = () => { + const[Open,setOpen] =useState(false) + return ( +
+ +
+ Sign In + + Sign Up + +
+ setOpen(!Open)}/> +
+ +
+
+ ); +}; + +export default Navbar; diff --git a/src/components/Navbar/navbar.scss b/src/components/Navbar/navbar.scss new file mode 100644 index 000000000..fdac9e414 --- /dev/null +++ b/src/components/Navbar/navbar.scss @@ -0,0 +1,110 @@ +@import '../../reponive.scss'; + + +.Navbar{ + display:flex; + justify-content: space-between; + height: 100px; + align-items: center; + a{ + transition: all 0.4s ease; + @include sm{ + display: none; + } + + &:hover{ + scale: 1.05; + } + } + .leftbar{ + flex: 3.7; + display: flex; + gap: 50px; + align-items: center; + font-size: 20px; + .logo{ + display: flex; + font-weight: bold; + font-size: 20px; + align-items: center; + gap: 10px; + + img{ + object-fit: contain; + width: 2rem; + height: 3rem; + } + span{ + @include md{ + display: none; + } + @include sm{ + display: initial; + } + } + } + } + .rightbar{ + flex: 2; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 10px; + font-size: 20px; + background: #fcf5f3; + height: 100%; + + @include md{ + background-color: transparent; + + } + a{ + padding: 12px 20px; + margin: 20px; + } + .reg{ + background: #fece51; + border-radius: 20px 10px; + } + .menuicon{ + display: none; + z-index: 100; + img{ + width: 36px; + height: 36px; + object-fit: cover; + cursor: pointer; + } + @include sm{ + display: inline; + } + } + .menu{ + position: absolute; + top: 0; + right: -50%; + background: #000; + 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; + border-bottom: 1px solid white; + border-radius: 6px; + + } + } + } + } +} \ No newline at end of file diff --git a/src/index.css b/src/components/filter/filter.scss similarity index 100% rename from src/index.css rename to src/components/filter/filter.scss 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/index.scss b/src/index.scss new file mode 100644 index 000000000..6a481dab8 --- /dev/null +++ b/src/index.scss @@ -0,0 +1,9 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} +a{ + text-decoration: none; + color: inherit; +} \ No newline at end of file diff --git a/src/lib/dummydata.js b/src/lib/dummydata.js new file mode 100644 index 000000000..470727d2d --- /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.css b/src/main.css new file mode 100644 index 000000000..e69de29bb 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..c5c94caed --- /dev/null +++ b/src/routes/homepage/homepage.jsx @@ -0,0 +1,40 @@ +import "./homepage.scss"; +import SeachBar from "../../components/searchBar/SeachBar"; +const Homepage = () => { + return ( +
+
+
+

Find Real Estate & Get Your Dream Place

+
+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio eum + impedit labore sed! Doloremque nostrum, ipsa quae sunt fuga + consectetur harum enim, nam quasi, itaque modi veritatis qui + dignissimos numquam. +

+ +
+
+

16+

+

Years of Experience

+
+
+

200

+

Award Gained

+
+
+

1600+

+

Property Ready

+
+
+
+
+
+ +
+
+ ); +}; + +export default Homepage; diff --git a/src/routes/homepage/homepage.scss b/src/routes/homepage/homepage.scss new file mode 100644 index 000000000..f33a5ffc8 --- /dev/null +++ b/src/routes/homepage/homepage.scss @@ -0,0 +1,70 @@ +@import '../../reponive.scss'; +.homepage{ + display: flex; + height: 100%; + + .textcontainer{ + flex: 3; + .wapper{ + padding-right: 100px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 50px; + height: 100%; + @include md{ + padding: 0; + } + @include sm{ + justify-content: flex-start; + } + p{ + font-size: 20px; + line-height: 1.7rem; + } + + .tittle{ + font-size: 60px; + @include lg{ + font-size: 40px; + } + } + .boxs{ + display: flex; + justify-content: space-between; + @include sm{ + display: none; + } + } + .numb{ + font-style: 36px; + text-align: center; + @include lg{ + font-size: 32px; + } + } + h2{ + font-size: 20px; + font-weight: 300; + } + } + } + .imgcontainer{ + flex: 2; + display: flex; + background-color: #fcf5f3; + position: relative; + 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..21c8092c3 --- /dev/null +++ b/src/routes/layout/layout.scss @@ -0,0 +1,29 @@ +@import '../../reponive.scss'; + +.layout{ + height: 100vh; + max-width: 1200px; + 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); + } + + @include md{ + // background-color: rgb(186, 203, 234); + } + + @include sm{ + // background-color: rgb(239, 200, 200); + } + .content{ + flex:1; + + } + +} \ 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..da1103463 --- /dev/null +++ b/src/routes/listpage/ListPage.jsx @@ -0,0 +1,20 @@ +import { listData } from "../../lib/dummydata"; +import "./listpage.scss"; + +const ListPage = () => { + const data = listData; + + return ( +
+
+
+ +
+
+ +
map
+
+ ); +}; + +export default ListPage; diff --git a/src/routes/listpage/listpage.scss b/src/routes/listpage/listpage.scss new file mode 100644 index 000000000..a1dd7f85c --- /dev/null +++ b/src/routes/listpage/listpage.scss @@ -0,0 +1,15 @@ +.ListPage{ + display: flex; + height: 100%; + .listcontainer{ + flex: 3.7; + } + .wapper{ + padding-right: 50px; + } + .mapcontainer{ + flex: 2; + background: #fcf5f3; + } +} + 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/singlepage/Singlepage.jsx b/src/routes/singlepage/Singlepage.jsx new file mode 100644 index 000000000..cf1f6d9bd --- /dev/null +++ b/src/routes/singlepage/Singlepage.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const 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 From afa80232e85ccf00ae4a48fa60e459798dfd7f0c Mon Sep 17 00:00:00 2001 From: Blessed Date: Fri, 28 Jun 2024 08:35:28 -0400 Subject: [PATCH 2/4] new update --- .vscode/extensions.json | 5 ++ package-lock.json | 30 +++++++ package.json | 2 + src/components/card/Card.jsx | 47 ++++++++++ src/components/card/card.scss | 106 ++++++++++++++++++++++ src/components/filter/Filter.jsx | 82 +++++++++++++++++ src/components/filter/filter.scss | 48 ++++++++++ src/components/map/Map.jsx | 24 +++++ src/components/map/map.scss | 5 ++ src/components/pin/Pin.jsx | 23 +++++ src/components/pin/pin.scss | 16 ++++ src/components/slider/Slider.jsx | 12 +++ src/components/slider/slider.scss | 5 ++ src/index.scss | 4 + src/lib/dummydata.js | 125 ++++++++++++++++++++++---- src/routes/layout/layout.scss | 3 +- src/routes/listpage/ListPage.jsx | 13 ++- src/routes/listpage/listpage.scss | 8 ++ src/routes/singlepage/Singlepage.jsx | 43 +++++++-- src/routes/singlepage/singlepage.scss | 46 ++++++++++ 20 files changed, 622 insertions(+), 25 deletions(-) create mode 100644 .vscode/extensions.json create mode 100644 src/components/card/Card.jsx create mode 100644 src/components/card/card.scss create mode 100644 src/components/filter/Filter.jsx create mode 100644 src/components/map/Map.jsx create mode 100644 src/components/map/map.scss create mode 100644 src/components/pin/Pin.jsx create mode 100644 src/components/pin/pin.scss create mode 100644 src/components/slider/Slider.jsx create mode 100644 src/components/slider/slider.scss 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/package-lock.json b/package-lock.json index 7dac9cd08..304367259 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,10 @@ "name": "estateui", "version": "0.0.0", "dependencies": { + "leaflet": "^1.9.4", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-leaflet": "^4.2.1", "react-router-dom": "^6.23.1", "sass": "^1.77.4" }, @@ -928,6 +930,16 @@ "node": ">= 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", @@ -3057,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", @@ -3506,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", diff --git a/package.json b/package.json index 05c8b5594..a9077a898 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,10 @@ "preview": "vite preview" }, "dependencies": { + "leaflet": "^1.9.4", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-leaflet": "^4.2.1", "react-router-dom": "^6.23.1", "sass": "^1.77.4" }, diff --git a/src/components/card/Card.jsx b/src/components/card/Card.jsx new file mode 100644 index 000000000..07dd7e1d2 --- /dev/null +++ b/src/components/card/Card.jsx @@ -0,0 +1,47 @@ +import "./card.scss"; +import { Link } from "react-router-dom"; + +const Card = ({ item }) => { + return ( +
+ + + +
+ + {/* textcontainer */} +
+

+ {item.title} +

+

+ + {item.address} +

+

${item.price}

+
+
+
+ + {item.bedroom}:bedroom +
+
+ + {item.bathroom}:bathroom +
+
+
+
+ +
+
+ +
+
+
+
+
+ ); +}; + +export default Card; diff --git a/src/components/card/card.scss b/src/components/card/card.scss new file mode 100644 index 000000000..eacdcf815 --- /dev/null +++ b/src/components/card/card.scss @@ -0,0 +1,106 @@ +.Card { + display: flex; + gap: 20px; + + .imgcontainer { + flex: 2; + height: 200px; + display: flex; + align-items: center; + + img { + width: 150px; + height: 150px; + border-radius: 50px; + object-fit: cover; + } + } + hr{ + border: 1px solid black; + border-radius: 10px; + } + .textcontainer { + flex: 3; + display: flex; + flex-direction: column; + gap: 10px; + justify-content: space-between; + + img { + width: 16px; + height: 16px; + } + .title { + font-size: 20px; + font-weight: 600; + color: #444; + transition: all 0.4s ease; + &:hover { + color: black; + scale: 1.01; + } + } + .address { + font-size: 14px; + font-weight: 900; + display: flex; + flex-direction: column; + gap: 5px; + color: #888; + &:hover { + color: black; + } + } + .price{ + font-size: 20px; + font-weight: 300; + padding: 5px; + border-radius: 5px; + background-color: rgba(245,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: 10px; + img{ + object-fit: cover; + width: 15px; + } + + .icon{ + display: flex; + border: 1px solid #999; + padding: 10px 2px; + border-radius: 5px; + align-items: center; + justify-content: center; + + &:hover{ + background-color: lightgrey; + } + } + } + } + } +} diff --git a/src/components/filter/Filter.jsx b/src/components/filter/Filter.jsx new file mode 100644 index 000000000..421fd494f --- /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; diff --git a/src/components/filter/filter.scss b/src/components/filter/filter.scss index e69de29bb..131e31bca 100644 --- a/src/components/filter/filter.scss +++ b/src/components/filter/filter.scss @@ -0,0 +1,48 @@ +.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; + 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/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..747cf5467 --- /dev/null +++ b/src/components/map/map.scss @@ -0,0 +1,5 @@ +.map{ + width: 100%; + height: 700px; + border-radius: 5px; +} \ 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/slider/Slider.jsx b/src/components/slider/Slider.jsx new file mode 100644 index 000000000..495e10c89 --- /dev/null +++ b/src/components/slider/Slider.jsx @@ -0,0 +1,12 @@ +import'./slider.scss' +import { singlePostData } from '../../lib/dummydata'; +const Slider = () => { + const slider = singlePostData; + return ( +
+ +
+ ) +} + +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..9f7b6083b --- /dev/null +++ b/src/components/slider/slider.scss @@ -0,0 +1,5 @@ +.Slider{ + img{ + border-radius: 3rem ; + } +} \ No newline at end of file diff --git a/src/index.scss b/src/index.scss index 6a481dab8..8f585374f 100644 --- a/src/index.scss +++ b/src/index.scss @@ -2,6 +2,10 @@ padding: 0; margin: 0; box-sizing: border-box; + overflow-y: visible; +} +::-webkit-scrollbar{ + width: 0px; } a{ text-decoration: none; diff --git a/src/lib/dummydata.js b/src/lib/dummydata.js index 470727d2d..b7ed6dd71 100644 --- a/src/lib/dummydata.js +++ b/src/lib/dummydata.js @@ -5,8 +5,8 @@ export const listData = [ 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", + price: 150000, + address: "456 Macauley Street, nigeria", latitude: 51.5074, longitude: -0.1278, }, @@ -16,8 +16,8 @@ export const listData = [ 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", + price: 15000, + address: "789 Adebowale Street, nigeria", latitude: 52.4862, longitude: -1.8904, }, @@ -27,8 +27,8 @@ export const listData = [ 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", + price: 8000, + address: "101 Asaba street, nigeria", latitude: 53.4808, longitude: -2.2426, }, @@ -38,8 +38,8 @@ export const listData = [ 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,", + price: 5000, + address: "234 Kingsway, nigeria,", latitude: 53.8008, longitude: -1.5491, }, @@ -49,8 +49,8 @@ export const listData = [ 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", + price: 27000, + address: "567 Victoria Road, nigeria", latitude: 53.4084, longitude: -2.9916, }, @@ -60,8 +60,8 @@ export const listData = [ 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", + price: 8000, + address: "890 Regent Street, nigeria", latitude: 54.9783, longitude: -1.6174, }, @@ -71,8 +71,8 @@ export const listData = [ 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", + price: 10000, + address: "112 Piccadilly, nigeria", latitude: 53.3811, longitude: -1.4701, }, @@ -82,8 +82,99 @@ export const listData = [ 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", + 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, }, @@ -104,7 +195,7 @@ export const listData = [ size: 861, latitude: 51.5074, longitude: -0.1278, - city: "London", + city: "nigeria", address: "1234 Broadway St", school: "250m away", bus: "100m away", diff --git a/src/routes/layout/layout.scss b/src/routes/layout/layout.scss index 21c8092c3..f82fd6463 100644 --- a/src/routes/layout/layout.scss +++ b/src/routes/layout/layout.scss @@ -9,6 +9,7 @@ padding-right: 20px; display: flex; flex-direction: column; + @include lg{ // background-color: rgb(247, 210, 196); @@ -22,7 +23,7 @@ // background-color: rgb(239, 200, 200); } .content{ - flex:1; + height: calc(100vh - 100px); } diff --git a/src/routes/listpage/ListPage.jsx b/src/routes/listpage/ListPage.jsx index da1103463..15df7dd6e 100644 --- a/src/routes/listpage/ListPage.jsx +++ b/src/routes/listpage/ListPage.jsx @@ -1,5 +1,9 @@ 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"; + const ListPage = () => { const data = listData; @@ -8,11 +12,16 @@ const ListPage = () => {
- + + {data.map(item=>( + + ))}
-
map
+
+ +
); }; diff --git a/src/routes/listpage/listpage.scss b/src/routes/listpage/listpage.scss index a1dd7f85c..f060b0462 100644 --- a/src/routes/listpage/listpage.scss +++ b/src/routes/listpage/listpage.scss @@ -3,13 +3,21 @@ height: 100%; .listcontainer{ flex: 3.7; + height: 100%; } .wapper{ + height: 100%; padding-right: 50px; + display: flex; + flex-direction: column; + gap: 50px; + overflow-y: scroll; + padding-bottom: 60px; } .mapcontainer{ flex: 2; background: #fcf5f3; + } } diff --git a/src/routes/singlepage/Singlepage.jsx b/src/routes/singlepage/Singlepage.jsx index cf1f6d9bd..efb03d152 100644 --- a/src/routes/singlepage/Singlepage.jsx +++ b/src/routes/singlepage/Singlepage.jsx @@ -1,9 +1,42 @@ -import React from 'react' +import Slider from "../../components/slider/Slider"; +import "./singlepage.scss"; +import { singlePostData, userData } from "../../lib/dummydata"; const Singlepage = () => { return ( -
Singlepage
- ) -} +
+ +
+
+ +
+
+
+

{singlePostData.title}

+
+ + {singlePostData.address} +
+
$ {singlePostData.price}
+
+
+ + {userData.name} +
+
+
+
+
+
+ +
+
+ f +
+ +
+
+ ); +}; -export default Singlepage \ No newline at end of file +export default Singlepage; diff --git a/src/routes/singlepage/singlepage.scss b/src/routes/singlepage/singlepage.scss index e69de29bb..3b69120ae 100644 --- a/src/routes/singlepage/singlepage.scss +++ b/src/routes/singlepage/singlepage.scss @@ -0,0 +1,46 @@ +.Singlepage { + display: flex; + height: 100%; + .details { + flex: 3.7; + + .wrappersp { + padding-right: 50px; + .info { + .top { + display: flex; + justify-content: space-between; + .post { + h1 { + .address { + font-style: italic; + } + .price { + font-style: italic; + } + } + } + .user { + + .userimg{ + width: 50px; + height: 50px; + object-fit: cover; + border-radius: 50%; + } + } + } + .bottom { + font-style: italic; + } + } + } + } + .features { + flex: 2; + background-color: #fcf5f3; + .wrapperspg { + padding: 0px 20px; + } + } +} From 700f696f6986b7babac74168c18ca53775cc117e Mon Sep 17 00:00:00 2001 From: Blessed Date: Tue, 2 Jul 2024 18:44:48 -0400 Subject: [PATCH 3/4] new push --- src/components/Navbar/Navbar.jsx | 75 +++++--- src/components/Navbar/navbar.scss | 242 ++++++++++++++---------- src/components/card/Card.jsx | 35 ++-- src/components/card/card.scss | 183 +++++++++---------- src/components/filter/Filter.jsx | 2 +- src/components/filter/filter.scss | 1 + src/components/map/map.scss | 4 +- src/components/slider/Slider.jsx | 62 ++++++- src/components/slider/slider.scss | 104 ++++++++++- src/index.scss | 12 +- src/lib/dummydata.js | 2 +- src/routes/homepage/homepage.jsx | 40 ++-- src/routes/homepage/homepage.scss | 141 +++++++------- src/routes/layout/layout.scss | 14 +- src/routes/listpage/ListPage.jsx | 34 ++-- src/routes/listpage/listpage.scss | 47 +++-- src/routes/singlepage/Singlepage.jsx | 104 +++++++++-- src/routes/singlepage/singlepage.scss | 254 ++++++++++++++++++++++---- 18 files changed, 915 insertions(+), 441 deletions(-) diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 31fc222d3..9758a7e67 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -1,39 +1,62 @@ import { useState } from "react"; import "./navbar.scss"; +import { Link } from "react-router-dom"; -const Navbar = () => { - const[Open,setOpen] =useState(false) +function Navbar() { + const [open, setOpen] = useState(false); + + const user = true; return ( -
-
+ ); -}; +} -export default Navbar; +export default Navbar; \ No newline at end of file diff --git a/src/components/Navbar/navbar.scss b/src/components/Navbar/navbar.scss index fdac9e414..a2210e155 100644 --- a/src/components/Navbar/navbar.scss +++ b/src/components/Navbar/navbar.scss @@ -1,110 +1,154 @@ -@import '../../reponive.scss'; +@import "../../reponive.scss"; +nav { + height: 100px; + display: flex; + justify-content: space-between; + align-items: center; -.Navbar{ - display:flex; - justify-content: space-between; - height: 100px; - align-items: center; - a{ - transition: all 0.4s ease; - @include sm{ - display: none; - } - - &:hover{ - scale: 1.05; - } + a { + transition: all 0.4s ease; + + @include sm { + display: none; } - .leftbar{ - flex: 3.7; - display: flex; - gap: 50px; - align-items: center; - font-size: 20px; - .logo{ - display: flex; - font-weight: bold; - font-size: 20px; - align-items: center; - gap: 10px; - - img{ - object-fit: contain; - width: 2rem; - height: 3rem; - } - span{ - @include md{ - display: none; - } - @include sm{ - display: initial; - } - } - } + + &:hover { + scale: 1.05; } - .rightbar{ - flex: 2; - display: flex; - align-items: center; - justify-content: flex-end; - gap: 10px; - font-size: 20px; - background: #fcf5f3; - height: 100%; - - @include md{ - background-color: transparent; - + } + + .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; } - a{ - padding: 12px 20px; - margin: 20px; + + @include sm { + display: initial; } - .reg{ - background: #fece51; - border-radius: 20px 10px; + } + } + } + .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; } - .menuicon{ - display: none; - z-index: 100; - img{ - width: 36px; - height: 36px; - object-fit: cover; - cursor: pointer; - } - @include sm{ - display: inline; - } + } + + .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; } - .menu{ - position: absolute; - top: 0; - right: -50%; - background: #000; - 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; - border-bottom: 1px solid white; - border-radius: 6px; - - } - } + + } + } + + .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 index 07dd7e1d2..8887eea19 100644 --- a/src/components/card/Card.jsx +++ b/src/components/card/Card.jsx @@ -1,47 +1,44 @@ -import "./card.scss"; import { Link } from "react-router-dom"; +import "./card.scss"; -const Card = ({ item }) => { +function Card({ item }) { return ( -
- +
+ -
- - {/* textcontainer */} -
+

- {item.title} + {item.title}

- + {item.address}

-

${item.price}

+

$ {item.price}

- - {item.bedroom}:bedroom + + {item.bedroom} bedroom
- - {item.bathroom}:bathroom + + {item.bathroom} bathroom
- +
- +
); -}; +} -export default Card; +export default Card; \ No newline at end of file diff --git a/src/components/card/card.scss b/src/components/card/card.scss index eacdcf815..bfb08fea7 100644 --- a/src/components/card/card.scss +++ b/src/components/card/card.scss @@ -1,106 +1,103 @@ -.Card { +@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; - gap: 20px; + flex-direction: column; + justify-content: space-between; + gap: 10px; - .imgcontainer { - flex: 2; - height: 200px; - display: flex; - align-items: center; + img { + width: 16px; + height: 16px; + } - img { - width: 150px; - height: 150px; - border-radius: 50px; - object-fit: cover; - } + .title { + font-size: 20px; + font-weight: 600; + color: #444; + transition: all 0.4s ease; + + &:hover { + color: #000; + scale: 1.01; + } } - hr{ - border: 1px solid black; - border-radius: 10px; + + .address { + font-size: 14px; + display: flex; + align-items: center; + gap: 5px; + color: #888; } - .textcontainer { - flex: 3; - display: flex; - flex-direction: column; - gap: 10px; - justify-content: space-between; - img { - width: 16px; - height: 16px; - } - .title { - font-size: 20px; - font-weight: 600; - color: #444; - transition: all 0.4s ease; - &:hover { - color: black; - scale: 1.01; - } - } - .address { - font-size: 14px; - font-weight: 900; - display: flex; - flex-direction: column; - gap: 5px; - color: #888; - &:hover { - color: black; - } - } - .price{ - font-size: 20px; - font-weight: 300; - padding: 5px; - border-radius: 5px; - background-color: rgba(245,205,81,0.438); - width: max-content; - } - .bottom{ - display: flex; - justify-content: space-between; - gap: 10px; + .price { + font-size: 20px; + font-weight: 300; + padding: 5px; + border-radius: 5px; + background-color: rgba(254, 205, 81, 0.438); + width: max-content; + } - - .features{ - display: flex; - gap: 20px; - font-size: 14px; + .bottom { + display: flex; + justify-content: space-between; + gap: 10px; - .feature{ - display: flex; - align-items: center; - gap: 5px; - background-color: whitesmoke; - padding: 5px; - border-radius: 5px; - } + .features { + display: flex; + gap: 20px; + font-size: 14px; - } - .icons{ - display: flex; - gap: 10px; - img{ - object-fit: cover; - width: 15px; - } + .feature { + display: flex; + align-items: center; + gap: 5px; + background-color: whitesmoke; + padding: 5px; + border-radius: 5px; + } + } + + .icons { + display: flex; + gap: 20px; - .icon{ - display: flex; - border: 1px solid #999; - padding: 10px 2px; - border-radius: 5px; - align-items: center; - justify-content: center; + .icon { + border: 1px solid #999; + padding: 2px 5px; + border-radius: 5px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; - &:hover{ - background-color: lightgrey; - } - } - } + &:hover { + background-color: lightgray; + } } + } } -} + } +} \ No newline at end of file diff --git a/src/components/filter/Filter.jsx b/src/components/filter/Filter.jsx index 421fd494f..59d193382 100644 --- a/src/components/filter/Filter.jsx +++ b/src/components/filter/Filter.jsx @@ -79,4 +79,4 @@ const Filter = () => { ); }; -export default Filter; +export default Filter; \ No newline at end of file diff --git a/src/components/filter/filter.scss b/src/components/filter/filter.scss index 131e31bca..43d668bef 100644 --- a/src/components/filter/filter.scss +++ b/src/components/filter/filter.scss @@ -30,6 +30,7 @@ .bottom{ display: flex; justify-content: space-between; + flex-wrap: wrap; gap: 20px; } button{ diff --git a/src/components/map/map.scss b/src/components/map/map.scss index 747cf5467..c57a7a8c5 100644 --- a/src/components/map/map.scss +++ b/src/components/map/map.scss @@ -1,5 +1,5 @@ .map{ width: 100%; - height: 700px; - border-radius: 5px; + height: 100%; + border-radius: 20px; } \ No newline at end of file diff --git a/src/components/slider/Slider.jsx b/src/components/slider/Slider.jsx index 495e10c89..aa1b1aa3f 100644 --- a/src/components/slider/Slider.jsx +++ b/src/components/slider/Slider.jsx @@ -1,12 +1,58 @@ -import'./slider.scss' -import { singlePostData } from '../../lib/dummydata'; -const Slider = () => { - const slider = singlePostData; +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 +export default Slider; \ No newline at end of file diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss index 9f7b6083b..c6bb82bb1 100644 --- a/src/components/slider/slider.scss +++ b/src/components/slider/slider.scss @@ -1,5 +1,103 @@ -.Slider{ - img{ - border-radius: 3rem ; +@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 index 8f585374f..fbdeac609 100644 --- a/src/index.scss +++ b/src/index.scss @@ -2,12 +2,14 @@ padding: 0; margin: 0; box-sizing: border-box; - overflow-y: visible; } -::-webkit-scrollbar{ - width: 0px; -} -a{ + +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 index b7ed6dd71..3b469db33 100644 --- a/src/lib/dummydata.js +++ b/src/lib/dummydata.js @@ -183,7 +183,7 @@ export const itemsdata = [ export const singlePostData = { id: 1, title: "Beautiful Apartment", - price: 1200, + 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", diff --git a/src/routes/homepage/homepage.jsx b/src/routes/homepage/homepage.jsx index c5c94caed..212390040 100644 --- a/src/routes/homepage/homepage.jsx +++ b/src/routes/homepage/homepage.jsx @@ -1,40 +1,40 @@ +import SearchBar from "../../components/searchBar/SeachBar"; import "./homepage.scss"; -import SeachBar from "../../components/searchBar/SeachBar"; -const Homepage = () => { + +function HomePage() { return ( -
-
-
-

Find Real Estate & Get Your Dream Place

-
+
+
+
+

Find Real Estate & Get Your Dream Place

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio eum - impedit labore sed! Doloremque nostrum, ipsa quae sunt fuga - consectetur harum enim, nam quasi, itaque modi veritatis qui - dignissimos numquam. + 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+

+

16+

Years of Experience

-

200

+

200

Award Gained

-

1600+

+

2000+

Property Ready

-
- +
+
); -}; +} -export default Homepage; +export default HomePage; \ No newline at end of file diff --git a/src/routes/homepage/homepage.scss b/src/routes/homepage/homepage.scss index f33a5ffc8..4f41c1e31 100644 --- a/src/routes/homepage/homepage.scss +++ b/src/routes/homepage/homepage.scss @@ -1,70 +1,83 @@ -@import '../../reponive.scss'; -.homepage{ - display: flex; - height: 100%; - - .textcontainer{ - flex: 3; - .wapper{ - padding-right: 100px; - display: flex; - flex-direction: column; - justify-content: center; - gap: 50px; - height: 100%; - @include md{ - padding: 0; - } - @include sm{ - justify-content: flex-start; - } - p{ - font-size: 20px; - line-height: 1.7rem; - } - - .tittle{ - font-size: 60px; - @include lg{ - font-size: 40px; - } - } - .boxs{ - display: flex; - justify-content: space-between; - @include sm{ - display: none; - } - } - .numb{ - font-style: 36px; - text-align: center; - @include lg{ - font-size: 32px; - } - } - h2{ - font-size: 20px; - font-weight: 300; - } +@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; } - } - .imgcontainer{ - flex: 2; + } + + .boxes { display: flex; - background-color: #fcf5f3; - position: relative; - align-items: center; - @include md { - display: none; + justify-content: space-between; + + @include sm { + display: none; } - img{ - width: 115%; - position: absolute; - right: 0; - @include lg{ - width: 105%; - } + + 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.scss b/src/routes/layout/layout.scss index f82fd6463..6d9b1e2c7 100644 --- a/src/routes/layout/layout.scss +++ b/src/routes/layout/layout.scss @@ -2,7 +2,7 @@ .layout{ height: 100vh; - max-width: 1200px; + max-width: 1366px; margin-right: auto; margin-left: auto; padding-left: 20px; @@ -10,17 +10,19 @@ display: flex; flex-direction: column; - - @include lg{ + @include lg { // background-color: rgb(247, 210, 196); + max-width: 1280px; } - @include md{ + @include md { // background-color: rgb(186, 203, 234); + max-width: 768px; } - - @include sm{ + + @include sm { // background-color: rgb(239, 200, 200); + max-width: 640px; } .content{ height: calc(100vh - 100px); diff --git a/src/routes/listpage/ListPage.jsx b/src/routes/listpage/ListPage.jsx index 15df7dd6e..34381bf91 100644 --- a/src/routes/listpage/ListPage.jsx +++ b/src/routes/listpage/ListPage.jsx @@ -1,29 +1,25 @@ import { listData } from "../../lib/dummydata"; import "./listpage.scss"; -import Filter from "../../components/filter/Filter"; -import Card from "../../components/card/Card"; +import Filter from "../../components/filter/Filter" +import Card from "../../components/card/Card" import Map from "../../components/map/Map"; - -const ListPage = () => { +function ListPage() { const data = listData; - return ( -
-
-
- - {data.map(item=>( + return
+
+
+ + {data.map(item=>( - ))} -
-
- -
- + ))}
- ); -}; +
+ +
+
; +} -export default ListPage; +export default ListPage; \ No newline at end of file diff --git a/src/routes/listpage/listpage.scss b/src/routes/listpage/listpage.scss index f060b0462..2ab445fef 100644 --- a/src/routes/listpage/listpage.scss +++ b/src/routes/listpage/listpage.scss @@ -1,23 +1,30 @@ -.ListPage{ - display: flex; +@import "../../reponive.scss"; + +.listPage { + display: flex; + height: 100%; + + .listContainer { + flex: 3; height: 100%; - .listcontainer{ - flex: 3.7; - height: 100%; - } - .wapper{ - height: 100%; - padding-right: 50px; - display: flex; - flex-direction: column; - gap: 50px; - overflow-y: scroll; - padding-bottom: 60px; - } - .mapcontainer{ - flex: 2; - background: #fcf5f3; - + + .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/singlepage/Singlepage.jsx b/src/routes/singlepage/Singlepage.jsx index efb03d152..cca678657 100644 --- a/src/routes/singlepage/Singlepage.jsx +++ b/src/routes/singlepage/Singlepage.jsx @@ -1,42 +1,116 @@ +import './singlepage.scss' import Slider from "../../components/slider/Slider"; -import "./singlepage.scss"; +import Map from "../../components/map/Map"; import { singlePostData, userData } from "../../lib/dummydata"; -const Singlepage = () => { +function SinglePage() { return ( -
- +
-
- +
+

{singlePostData.title}

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

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; +export default SinglePage; \ No newline at end of file diff --git a/src/routes/singlepage/singlepage.scss b/src/routes/singlepage/singlepage.scss index 3b69120ae..90523fb76 100644 --- a/src/routes/singlepage/singlepage.scss +++ b/src/routes/singlepage/singlepage.scss @@ -1,46 +1,220 @@ -.Singlepage { - display: flex; +@import '../../reponive.scss'; + +.singlePage { + display: flex; + height: 100%; + ; + + + @include md { + flex-direction: column; + overflow: scroll; + } + + .details { + flex: 3; height: 100%; - .details { - flex: 3.7; - - .wrappersp { - padding-right: 50px; - .info { - .top { - display: flex; - justify-content: space-between; - .post { - h1 { - .address { - font-style: italic; - } - .price { - font-style: italic; - } - } - } - .user { - - .userimg{ - width: 50px; - height: 50px; - object-fit: cover; - border-radius: 50%; - } - } - } - .bottom { - font-style: italic; - } + 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; } - .features { - flex: 2; - background-color: #fcf5f3; - .wrapperspg { - padding: 0px 20px; + + .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 From 841790a30b7f38a0ebe92d88d9d26c3ea9a5d356 Mon Sep 17 00:00:00 2001 From: Blessed Date: Tue, 9 Jul 2024 15:07:58 -0400 Subject: [PATCH 4/4] finish work --- src/App.jsx | 5 + src/components/Navbar/Navbar.jsx | 6 +- src/components/chat/Chat.jsx | 170 +++++++++++++++++++++++++++++++ src/components/chat/chat.scss | 116 +++++++++++++++++++++ src/components/list/List.jsx | 17 ++++ src/components/list/list.scss | 5 + src/lib/dummydata.js | 2 +- src/routes/proflie/Proflie.jsx | 43 ++++++++ src/routes/proflie/proflie.scss | 69 +++++++++++++ 9 files changed, 429 insertions(+), 4 deletions(-) create mode 100644 src/components/chat/Chat.jsx create mode 100644 src/components/chat/chat.scss create mode 100644 src/components/list/List.jsx create mode 100644 src/components/list/list.scss create mode 100644 src/routes/proflie/Proflie.jsx create mode 100644 src/routes/proflie/proflie.scss diff --git a/src/App.jsx b/src/App.jsx index a5593a4e8..55bb66f90 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,6 +7,7 @@ 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"; @@ -30,6 +31,10 @@ function App() { path:"/:id", element: }, + { + path:'/profile', + element: + }, { path:"/login", element: diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 9758a7e67..df0072dc0 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -11,7 +11,7 @@ function Navbar() {
- LamaEstate + PrinceEstate Home About @@ -25,9 +25,9 @@ function Navbar() { src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="" /> - John Doe + Prince Ojo -
3
+
10
Profile
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/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/lib/dummydata.js b/src/lib/dummydata.js index 3b469db33..1b4782890 100644 --- a/src/lib/dummydata.js +++ b/src/lib/dummydata.js @@ -206,6 +206,6 @@ export const itemsdata = [ export const userData = { id: 1, - name: "John Doe", + 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/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%; + } + } +}