From 80c042672a296358d61599ff8bf98db8ef6cc6bc Mon Sep 17 00:00:00 2001 From: Avilekh Kunwar Date: Mon, 11 Mar 2024 16:39:13 +1100 Subject: [PATCH 1/4] This is the first day of the website --- package-lock.json | 176 ++++++++++++++++++++- package.json | 5 +- src/App.jsx | 18 ++- src/components/navbar/Navbar.jsx | 40 +++++ src/components/navbar/navbar.css | 100 ++++++++++++ src/components/navbar/navbar.css.map | 1 + src/components/navbar/navbar.scss | 106 +++++++++++++ src/components/searchBar/SearchBar.jsx | 10 ++ src/components/searchBar/searchBar.css | 1 + src/components/searchBar/searchBar.css.map | 1 + src/components/searchBar/searchBar.scss | 3 + src/index.css | 10 ++ src/index.css.map | 1 + src/index.scss | 10 ++ src/layout.css | 32 ++++ src/layout.css.map | 1 + src/layout.scss | 31 ++++ src/main.jsx | 1 + src/responsive.css | 1 + src/responsive.css.map | 1 + src/responsive.scss | 15 ++ src/routes/homePage/homePage.css | 24 +++ src/routes/homePage/homePage.css.map | 1 + src/routes/homePage/homePage.jsx | 28 ++++ src/routes/homePage/homePage.scss | 30 ++++ 25 files changed, 638 insertions(+), 9 deletions(-) create mode 100644 src/components/navbar/Navbar.jsx create mode 100644 src/components/navbar/navbar.css create mode 100644 src/components/navbar/navbar.css.map create mode 100644 src/components/navbar/navbar.scss create mode 100644 src/components/searchBar/SearchBar.jsx create mode 100644 src/components/searchBar/searchBar.css create mode 100644 src/components/searchBar/searchBar.css.map create mode 100644 src/components/searchBar/searchBar.scss create mode 100644 src/index.css.map create mode 100644 src/index.scss create mode 100644 src/layout.css create mode 100644 src/layout.css.map create mode 100644 src/layout.scss create mode 100644 src/responsive.css create mode 100644 src/responsive.css.map create mode 100644 src/responsive.scss create mode 100644 src/routes/homePage/homePage.css create mode 100644 src/routes/homePage/homePage.css.map create mode 100644 src/routes/homePage/homePage.jsx create mode 100644 src/routes/homePage/homePage.scss diff --git a/package-lock.json b/package-lock.json index 4d60f86a5..2788cc34a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,10 @@ "version": "0.0.0", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "saas": "^1.0.0", + "sas": "^3.0.4", + "sass": "^1.71.1" }, "devDependencies": { "@types/react": "^18.2.56", @@ -1257,6 +1260,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 +1414,14 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "engines": { + "node": ">=8" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1409,6 +1432,17 @@ "concat-map": "0.0.1" } }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/browserslist": { "version": "4.23.0", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", @@ -1503,6 +1537,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 +2232,17 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -2219,7 +2298,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 +2552,11 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", + "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -2572,6 +2655,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 +2725,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 +2760,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 +2788,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 +3149,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 +3370,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 +3505,17 @@ "node": ">=0.10.0" } }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.5.tgz", @@ -3531,6 +3661,11 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/saas": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/saas/-/saas-1.0.0.tgz", + "integrity": "sha512-FgayhFS18BlPfcyMcOqxD7PIyNyUjqyv8R+rsr3X2KRK2icEUL4uvWBF+lZ0IPqJIO2kUO0d20OXY+R+pdriqg==" + }, "node_modules/safe-array-concat": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.0.tgz", @@ -3566,6 +3701,27 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sas": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/sas/-/sas-3.0.4.tgz", + "integrity": "sha512-Fi1sfAdsEpuNR1Ho7/lkrJYFU7kRPusFWFQP401lz0NIFX0OfcWhsUOXzEKyoNzW0TorfdmyC2yGorJ/CiNGqg==" + }, + "node_modules/sass": { + "version": "1.71.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.71.1.tgz", + "integrity": "sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/scheduler": { "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", @@ -3658,7 +3814,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 +3946,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..17ef378bb 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,10 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "saas": "^1.0.0", + "sas": "^3.0.4", + "sass": "^1.71.1" }, "devDependencies": { "@types/react": "^18.2.56", diff --git a/src/App.jsx b/src/App.jsx index 88a1fa927..3955b433b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,19 @@ +import Navbar from "./components/navbar/Navbar"; +import "./layout.scss"; +import HomePage from "./routes/homePage/homePage"; + function App() { return ( -
Hello World
- ) +
+
+ +
+ +
+ +
+
+ ); } -export default App \ No newline at end of file +export default App; diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx new file mode 100644 index 000000000..2efc33fa6 --- /dev/null +++ b/src/components/navbar/Navbar.jsx @@ -0,0 +1,40 @@ +import { useState } from "react"; +import "./navbar.scss"; + +function Navbar() { + const [open, setOpen] = useState(false) + return ( + + ); +} + +export default Navbar; diff --git a/src/components/navbar/navbar.css b/src/components/navbar/navbar.css new file mode 100644 index 000000000..8689ca663 --- /dev/null +++ b/src/components/navbar/navbar.css @@ -0,0 +1,100 @@ +nav { + display: flex; + justify-content: space-between; + height: 100px; + align-items: center; +} +nav a { + transition: all 0.4s ease; +} +@media (max-width: 738px) { + nav a { + display: none; + } +} +nav a:hover { + scale: 1.08; +} +nav .left { + flex: 3; + align-items: center; + display: flex; + gap: 50px; +} +nav .left .logo { + font-weight: bold; + font-size: 20px; + display: flex; + gap: 10px; + align-items: center; +} +nav .left .logo img { + width: 28px; +} +@media (max-width: 1024px) { + nav .left .logo span { + display: none; + } +} +@media (max-width: 738px) { + nav .left .logo span { + display: initial; + } +} +nav .right { + flex: 2; + display: flex; + align-items: center; + justify-content: end; + gap: 5px; + height: 100%; +} +@media (max-width: 1024px) { + nav .right { + background-color: transparent; + } +} +nav .right a { + padding: 12px 24px; + margin: 29px; +} +nav .right .register { + background-color: rgb(244, 244, 112); +} +nav .right .menuIcon { + display: none; + z-index: 999; +} +nav .right .menuIcon img { + width: 36px; + height: 36px; + cursor: pointer; +} +@media (max-width: 738px) { + nav .right .menuIcon { + display: inline; + } +} +nav .right .menu { + position: absolute; + top: 0; + right: -50%; + background-color: white; + color: black; + height: 100vh; + width: -50%; + transition: all 1s ease; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 24px; +} +nav .right .menu.active { + right: 0; +} +@media (max-width: 738px) { + nav .right .menu a { + display: initial; + } +}/*# sourceMappingURL=navbar.css.map */ \ No newline at end of file diff --git a/src/components/navbar/navbar.css.map b/src/components/navbar/navbar.css.map new file mode 100644 index 000000000..56a3cf5d0 --- /dev/null +++ b/src/components/navbar/navbar.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["navbar.scss","navbar.css","../../responsive.scss"],"names":[],"mappings":"AAEA;EACE,aAAA;EACA,8BAAA;EACA,aAAA;EACA,mBAAA;ACDF;ADEE;EACE,yBAAA;ACAJ;ACPE;EFMA;IAII,aAAA;ECCJ;AACF;ADCI;EACE,WAAA;ACCN;ADEE;EACE,OAAA;EAEA,mBAAA;EACA,aAAA;EACA,SAAA;ACDJ;ADEI;EACE,iBAAA;EACA,eAAA;EACA,aAAA;EACA,SAAA;EACA,mBAAA;ACAN;ADEM;EACE,WAAA;ACAR;AC1BE;EF6BI;IAEI,aAAA;ECDR;AACF;ACpCE;EFkCI;IAKI,gBAAA;ECCR;AACF;ADIE;EACE,OAAA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,QAAA;EACA,YAAA;ACFJ;AC5CE;EFwCA;IASI,6BAAA;ECDJ;AACF;ADEI;EACE,kBAAA;EACA,YAAA;ACAN;ADEI;EACE,oCAAA;ACAN;ADII;EACE,aAAA;EACA,YAAA;ACFN;ADIM;EACE,WAAA;EACA,YAAA;EACA,eAAA;ACFR;ACtEE;EFiEE;IAUI,eAAA;ECDN;AACF;ADII;EACE,kBAAA;EACA,MAAA;EACA,WAAA;EACA,uBAAA;EACA,YAAA;EACA,aAAA;EACA,WAAA;EACA,uBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ACFN;ADIM;EACE,QAAA;ACFR;AC7FE;EFkGM;IACE,gBAAA;ECFR;AACF","file":"navbar.css"} \ No newline at end of file diff --git a/src/components/navbar/navbar.scss b/src/components/navbar/navbar.scss new file mode 100644 index 000000000..fb577a30a --- /dev/null +++ b/src/components/navbar/navbar.scss @@ -0,0 +1,106 @@ +@import "../..//responsive.scss"; + +nav { + display: flex; + justify-content: space-between; + height: 100px; + align-items: center; + a { + transition: all 0.4s ease; + + @include sm { + display: none; + } + + &:hover { + scale: 1.08; + } + } + .left { + flex: 3; + // background-color: beige; + align-items: center; + display: flex; + gap: 50px; + .logo { + font-weight: bold; + font-size: 20px; + display: flex; + gap: 10px; + align-items: center; + + img { + width: 28px; + } + + span { + @include md { + display: none; + } + @include sm { + display: initial; + } + } + } + } + // for the right hand side tabs + .right { + flex: 2; + display: flex; + align-items: center; + justify-content: end; + gap: 5px; + height: 100%; + + @include md { + background-color: transparent; + } + a { + padding: 12px 24px; + margin: 29px; + } + .register { + background-color: rgb(244, 244, 112); + // border: 80px; + } + + .menuIcon { + display: none; + z-index: 999; + + img { + width: 36px; + height: 36px; + cursor: pointer; + } + @include sm { + display: inline; + + } + } + .menu { + position: absolute; + top: 0; + right: -50%; + background-color: white; + color: black; + height: 100vh; + width: -50%; + transition: all 1s ease; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 24px; + + &.active { + right: 0; + } + @include sm { + a { + display: initial; + } + } + } + } +} diff --git a/src/components/searchBar/SearchBar.jsx b/src/components/searchBar/SearchBar.jsx new file mode 100644 index 000000000..07cfd019e --- /dev/null +++ b/src/components/searchBar/SearchBar.jsx @@ -0,0 +1,10 @@ + +import './searchBar.scss' + +function Searchbar () { + return ( +
SearchBar
+ ) +} + +export default Searchbar; diff --git a/src/components/searchBar/searchBar.css b/src/components/searchBar/searchBar.css new file mode 100644 index 000000000..189e70088 --- /dev/null +++ b/src/components/searchBar/searchBar.css @@ -0,0 +1 @@ +/*# sourceMappingURL=searchBar.css.map */ \ No newline at end of file diff --git a/src/components/searchBar/searchBar.css.map b/src/components/searchBar/searchBar.css.map new file mode 100644 index 000000000..17edd4c35 --- /dev/null +++ b/src/components/searchBar/searchBar.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"searchBar.css"} \ No newline at end of file diff --git a/src/components/searchBar/searchBar.scss b/src/components/searchBar/searchBar.scss new file mode 100644 index 000000000..692d25531 --- /dev/null +++ b/src/components/searchBar/searchBar.scss @@ -0,0 +1,3 @@ +.searchBar { + +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index e69de29bb..e06558c52 100644 --- a/src/index.css +++ b/src/index.css @@ -0,0 +1,10 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +a { + text-decoration: none; + overflow: hidden; +}/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/src/index.css.map b/src/index.css.map new file mode 100644 index 000000000..0839e2bb3 --- /dev/null +++ b/src/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;ACCJ;;ADEA;EACI,qBAAA;EACA,gBAAA;ACCJ","file":"index.css"} \ No newline at end of file diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 000000000..7506a6c40 --- /dev/null +++ b/src/index.scss @@ -0,0 +1,10 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +a{ + text-decoration: none; + overflow: hidden; +} \ No newline at end of file diff --git a/src/layout.css b/src/layout.css new file mode 100644 index 000000000..5d17d9c71 --- /dev/null +++ b/src/layout.css @@ -0,0 +1,32 @@ +.layout { + height: 100vh; + max-width: 1366px; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; + display: flex; + flex-direction: column; +} +@media (max-width: 1366px) { + .layout { + background-color: rgb(237, 222, 222); + max-width: 1280px; + } +} +@media (max-width: 1024px) { + .layout { + background-color: rgb(221, 221, 243); + max-width: 768px; + } +} +@media (max-width: 738px) { + .layout { + background-color: rgb(236, 222, 222); + max-width: 640px; + } +} + +.content { + flex: 1; +}/*# sourceMappingURL=layout.css.map */ \ No newline at end of file diff --git a/src/layout.css.map b/src/layout.css.map new file mode 100644 index 000000000..12e5dc90a --- /dev/null +++ b/src/layout.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["layout.scss","layout.css","responsive.scss"],"names":[],"mappings":"AAEA;EACE,aAAA;EACA,iBAAA;EACA,iBAAA;EACA,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,aAAA;EACA,sBAAA;ACDF;ACEE;EFTF;IAWI,oCAAA;IACA,iBAAA;ECAF;AACF;ACTE;EFJF;IAeI,oCAAA;IACA,gBAAA;ECEF;AACF;ACpBE;EFCF;IAoBI,oCAAA;IACA,gBAAA;ECGF;AACF;;ADAA;EACE,OAAA;ACGF","file":"layout.css"} \ No newline at end of file diff --git a/src/layout.scss b/src/layout.scss new file mode 100644 index 000000000..c19c75550 --- /dev/null +++ b/src/layout.scss @@ -0,0 +1,31 @@ +@import "./responsive.scss"; + +.layout { + height: 100vh; + max-width: 1366px; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; + display: flex; + flex-direction: column; + + @include lg { + background-color: rgb(237, 222, 222); + max-width: 1280px; + } + @include md { + background-color: rgb(221, 221, 243); + max-width: 768px; + } + + @include sm { + background-color: rgb(236, 222, 222); + max-width: 640px; + } +} + +.content { + flex: 1; + +} diff --git a/src/main.jsx b/src/main.jsx index 51a8c5825..a734dc87e 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,6 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.jsx' +import './index.scss' ReactDOM.createRoot(document.getElementById('root')).render( diff --git a/src/responsive.css b/src/responsive.css new file mode 100644 index 000000000..7e97935dd --- /dev/null +++ b/src/responsive.css @@ -0,0 +1 @@ +/*# sourceMappingURL=responsive.css.map */ \ No newline at end of file diff --git a/src/responsive.css.map b/src/responsive.css.map new file mode 100644 index 000000000..8bd1735db --- /dev/null +++ b/src/responsive.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"responsive.css"} \ No newline at end of file diff --git a/src/responsive.scss b/src/responsive.scss new file mode 100644 index 000000000..ef79a8649 --- /dev/null +++ b/src/responsive.scss @@ -0,0 +1,15 @@ +@mixin sm { + @media (max-width: 738px) { + @content; + } +} +@mixin md { + @media (max-width: 1024px) { + @content; + } +} +@mixin lg { + @media (max-width: 1366px) { + @content; + } +} diff --git a/src/routes/homePage/homePage.css b/src/routes/homePage/homePage.css new file mode 100644 index 000000000..39dd7b394 --- /dev/null +++ b/src/routes/homePage/homePage.css @@ -0,0 +1,24 @@ +.homePage { + display: flex; + height: 100%; +} +.homePage .textContainer { + flex: 3; + padding: 100px; +} +.homePage .textContainer .wrapper { + padding-right: 100px; +} +.homePage .imgContainer { + flex: 2; + display: flex; + background-color: white; + position: relative; + display: flex; + align-items: center; +} +.homePage .imgContainer img { + width: 115%; + position: absolute; + right: 0; +}/*# sourceMappingURL=homePage.css.map */ \ No newline at end of file diff --git a/src/routes/homePage/homePage.css.map b/src/routes/homePage/homePage.css.map new file mode 100644 index 000000000..8f39cec73 --- /dev/null +++ b/src/routes/homePage/homePage.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["homePage.scss","homePage.css"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,YAAA;ACCF;ADCE;EACE,OAAA;EACA,cAAA;ACCJ;ADEI;EACI,oBAAA;ACAR;ADIE;EACE,OAAA;EACA,aAAA;EACA,uBAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;ACFJ;ADKI;EACE,WAAA;EACA,kBAAA;EACA,QAAA;ACHN","file":"homePage.css"} \ No newline at end of file diff --git a/src/routes/homePage/homePage.jsx b/src/routes/homePage/homePage.jsx new file mode 100644 index 000000000..c86dba92d --- /dev/null +++ b/src/routes/homePage/homePage.jsx @@ -0,0 +1,28 @@ +import Searchbar from "../../components/searchBar/SearchBar"; +import "./homePage.scss"; + +function homePage() { + return ( +
+
+
+

Find Real Estate & Get Your Dream

+

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

+ + +
+
+
+
+ +
+
+ ); +} + +export default homePage; diff --git a/src/routes/homePage/homePage.scss b/src/routes/homePage/homePage.scss new file mode 100644 index 000000000..b1a684db3 --- /dev/null +++ b/src/routes/homePage/homePage.scss @@ -0,0 +1,30 @@ +.homePage { + display: flex; + height: 100%; + + .textContainer { + flex: 3; + padding: 100px; + + + .wrapper { + padding-right: 100px; + } + } + + .imgContainer { + flex: 2; + display: flex; + background-color: white; + position: relative; + display: flex; + align-items: center; + // justify-content: center; + + img { + width: 115%; + position: absolute; + right: 0; + } + } +} From da00af91d767e438a7f95ead92c1a0ed17845ec1 Mon Sep 17 00:00:00 2001 From: Avilekh Kunwar Date: Tue, 12 Mar 2024 10:06:38 +1100 Subject: [PATCH 2/4] Checking if all the files are upto date --- react-estate-ui | 1 + src/components/searchBar/SearchBar.jsx | 21 ++++++++++++++++----- src/components/searchBar/searchBar.scss | 10 +++++++++- src/routes/homePage/homePage.jsx | 15 ++++++++++++++- src/routes/homePage/homePage.scss | 22 ++++++++++++++++++++++ 5 files changed, 62 insertions(+), 7 deletions(-) create mode 160000 react-estate-ui diff --git a/react-estate-ui b/react-estate-ui new file mode 160000 index 000000000..80c042672 --- /dev/null +++ b/react-estate-ui @@ -0,0 +1 @@ +Subproject commit 80c042672a296358d61599ff8bf98db8ef6cc6bc diff --git a/src/components/searchBar/SearchBar.jsx b/src/components/searchBar/SearchBar.jsx index 07cfd019e..ed1c05bce 100644 --- a/src/components/searchBar/SearchBar.jsx +++ b/src/components/searchBar/SearchBar.jsx @@ -1,10 +1,21 @@ +import "./searchBar.scss"; -import './searchBar.scss' - -function Searchbar () { +function Searchbar() { return ( -
SearchBar
- ) +
+
+
+ + + + + + +
+
+ ); } export default Searchbar; diff --git a/src/components/searchBar/searchBar.scss b/src/components/searchBar/searchBar.scss index 692d25531..ca831d587 100644 --- a/src/components/searchBar/searchBar.scss +++ b/src/components/searchBar/searchBar.scss @@ -1,3 +1,11 @@ .searchBar { - + + .type { + + } + .form{ + display: flex; + align-items: center; + justify-content: center; + } } \ No newline at end of file diff --git a/src/routes/homePage/homePage.jsx b/src/routes/homePage/homePage.jsx index c86dba92d..98471d329 100644 --- a/src/routes/homePage/homePage.jsx +++ b/src/routes/homePage/homePage.jsx @@ -15,7 +15,20 @@ function homePage() {

-
+
+
+

16+

+

Years of Experience+

+
+
+

200+

+

Awards Gained

+
+
+

2000+

+

Properties Sold

+
+
diff --git a/src/routes/homePage/homePage.scss b/src/routes/homePage/homePage.scss index b1a684db3..73df3b301 100644 --- a/src/routes/homePage/homePage.scss +++ b/src/routes/homePage/homePage.scss @@ -9,6 +9,28 @@ .wrapper { padding-right: 100px; + display: flex; + flex-direction:column ; + justify-content: center; + gap: 50px; + // background-color: beige; + height: 100%; + + .title { + font-size: 64 px; + + } + .boxes{ + display: flex; + justify-content: space-between; + } + h1{ + font-size: 36px; + } + h2{ + font-size: 20px; + font-weight: 300; + } } } From 725eee3dd30a6020da67e0e8e721cd4a63f2a357 Mon Sep 17 00:00:00 2001 From: Avilekh Kunwar Date: Tue, 12 Mar 2024 15:54:23 +1100 Subject: [PATCH 3/4] Added listPage, singlePage, Login, and finished with HomePage --- package-lock.json | 39 +++++++++ package.json | 1 + react-estate-ui | 2 +- src/App.jsx | 49 +++++++++--- src/components/searchBar/SearchBar.jsx | 68 ++++++++++++---- src/components/searchBar/searchBar.scss | 100 ++++++++++++++++++++++-- src/layout.scss | 31 -------- src/routes/homePage/homePage.jsx | 12 +-- src/routes/homePage/homePage.scss | 64 ++++++++++----- src/routes/layout/layout.jsx | 19 +++++ src/routes/layout/layout.scss | 30 +++++++ src/routes/listPage/listPage.jsx | 11 +++ src/routes/listPage/listPage.scss | 0 src/routes/login/login.jsx | 0 src/routes/login/login.scss | 0 src/routes/singlePage/singlePage.jsx | 0 src/routes/singlePage/singlePage.scss | 0 17 files changed, 336 insertions(+), 90 deletions(-) delete mode 100644 src/layout.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/package-lock.json b/package-lock.json index 2788cc34a..a21f21b9e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3", "saas": "^1.0.0", "sas": "^3.0.4", "sass": "^1.71.1" @@ -929,6 +930,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.12.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.0.tgz", @@ -3505,6 +3514,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "dependencies": { + "@remix-run/router": "1.15.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "dependencies": { + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", diff --git a/package.json b/package.json index 17ef378bb..3e575d097 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3", "saas": "^1.0.0", "sas": "^3.0.4", "sass": "^1.71.1" diff --git a/react-estate-ui b/react-estate-ui index 80c042672..da00af91d 160000 --- a/react-estate-ui +++ b/react-estate-ui @@ -1 +1 @@ -Subproject commit 80c042672a296358d61599ff8bf98db8ef6cc6bc +Subproject commit da00af91d767e438a7f95ead92c1a0ed17845ec1 diff --git a/src/App.jsx b/src/App.jsx index 3955b433b..68b55a03d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,18 +1,43 @@ -import Navbar from "./components/navbar/Navbar"; -import "./layout.scss"; -import HomePage from "./routes/homePage/homePage"; +import React from "react"; +import { + RouterProvider, + createBrowserRouter +} from "react-router-dom"; + +import HomePage from ".//routes/homePage/homePage"; +import Layout from "./routes/layout/layout"; +import ListPage from "./routes/listPage/listPage"; function App() { +const router = createBrowserRouter([ + { + path: "/", + element: , + children: [ + { + path: "/", + element: , + + + + + }, + { + path: "/list", + element: + } + ] + } + +]); + + + + + return ( -
-
- -
- -
- -
-
+ + ); } diff --git a/src/components/searchBar/SearchBar.jsx b/src/components/searchBar/SearchBar.jsx index ed1c05bce..a818a06ec 100644 --- a/src/components/searchBar/SearchBar.jsx +++ b/src/components/searchBar/SearchBar.jsx @@ -1,21 +1,61 @@ +import { useState } from "react"; import "./searchBar.scss"; +import React from "react"; -function Searchbar() { +const types = ["buy", "rent"]; + +function SearchBar() { + const [query, setQuery] = useState({ + type: "buy", + location: "", + minPrice: 0, + maxPrice: 0, + }); + + const switchType = (val) => { + setQuery((prev) => ({ ...prev, type: val })); + }; return (
-
-
- - - - - - -
-
+
+ {types.map((type) => ( + + ))} +
+
+ + + + + +
+
+ ); } -export default Searchbar; +export default SearchBar; diff --git a/src/components/searchBar/searchBar.scss b/src/components/searchBar/searchBar.scss index ca831d587..464ad82a6 100644 --- a/src/components/searchBar/searchBar.scss +++ b/src/components/searchBar/searchBar.scss @@ -1,11 +1,99 @@ +@import "../../responsive.scss"; + .searchBar { + .type { + @include sm { + margin-bottom: 5px; + } + button { + padding: 16px 36px; + border: 1px solid grey; + border-bottom: none; + cursor: pointer; + background-color: white; + text-transform: capitalize; + + &.active { + background-color: black; + color: white; + } + + &:first-child { + border-top-left-radius: 5px; + border-right: none; + } - .type { + &:last-child { + border-top-right-radius: 5px; + border-left: none; + @include sm { + border-bottom: 1px solid grey; + } + } } - .form{ - display: flex; - align-items: center; - justify-content: center; + } + + form { + display: flex; + // align-items: center; + justify-content: space-between; + height: 64px; + gap: 5px; + border: 1px solid grey; + + @include sm { + flex-direction: column; + border: none; + } + + input { + border: none; + padding: 0px 10px; + width: 200px; + + @include lg { + padding: 0px 5px; + width: 200px; + &:nth-child(2), + &:nth-child(3) { + width: 140px; + } + + } + @include md { + width: 200px; + + &:nth-child(2), + &:nth-child(3) { + width: 200px; + } + } + @include sm { + padding: 20px; + width: auto; + &:nth-child(2), + &:nth-child(3) { + width: auto; + } + border: 1px solid black; + } + } + + button { + border: none; + cursor: pointer; + background-color: #fece51; + flex: 1; + + @include sm { + padding: 20px; + } + + img { + width: 24px; + height: 24px; + } } -} \ No newline at end of file + } +} diff --git a/src/layout.scss b/src/layout.scss deleted file mode 100644 index c19c75550..000000000 --- a/src/layout.scss +++ /dev/null @@ -1,31 +0,0 @@ -@import "./responsive.scss"; - -.layout { - height: 100vh; - max-width: 1366px; - margin-left: auto; - margin-right: auto; - padding-left: 20px; - padding-right: 20px; - display: flex; - flex-direction: column; - - @include lg { - background-color: rgb(237, 222, 222); - max-width: 1280px; - } - @include md { - background-color: rgb(221, 221, 243); - max-width: 768px; - } - - @include sm { - background-color: rgb(236, 222, 222); - max-width: 640px; - } -} - -.content { - flex: 1; - -} diff --git a/src/routes/homePage/homePage.jsx b/src/routes/homePage/homePage.jsx index 98471d329..0ecef06c5 100644 --- a/src/routes/homePage/homePage.jsx +++ b/src/routes/homePage/homePage.jsx @@ -17,16 +17,16 @@ function homePage() {
-

16+

-

Years of Experience+

+

16+

+

Years of Experience+

-

200+

-

Awards Gained

+

200+

+

Awards Gained

-

2000+

-

Properties Sold

+

2000+

+

Properties Sold

diff --git a/src/routes/homePage/homePage.scss b/src/routes/homePage/homePage.scss index 73df3b301..b954f1511 100644 --- a/src/routes/homePage/homePage.scss +++ b/src/routes/homePage/homePage.scss @@ -1,3 +1,5 @@ +@import "../../responsive.scss"; + .homePage { display: flex; height: 100%; @@ -6,31 +8,45 @@ flex: 3; padding: 100px; - .wrapper { - padding-right: 100px; - display: flex; - flex-direction:column ; - justify-content: center; - gap: 50px; - // background-color: beige; - height: 100%; + padding-right: 100px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 50px; + // background-color: beige; + height: 100%; - .title { - font-size: 64 px; - - } - .boxes{ - display: flex; - justify-content: space-between; + @include md { + padding: 0px; + } + @include sm { + justify-content: start; + } + .title { + font-size: 64 px; + @include lg { + font-size: 48px; } - h1{ - font-size: 36px; + } + .boxes { + display: flex; + justify-content: space-between; + + @include sm { + display: none; } - h2{ - font-size: 20px; - font-weight: 300; + } + h1 { + font-size: 36px; + @include lg { + font-size: 32px; } + } + h2 { + font-size: 20px; + font-weight: 300; + } } } @@ -43,10 +59,18 @@ align-items: center; // justify-content: center; + @include md { + display: none; + } + img { width: 115%; position: absolute; right: 0; + + @include lg { + width: 105%; + } } } } diff --git a/src/routes/layout/layout.jsx b/src/routes/layout/layout.jsx new file mode 100644 index 000000000..e39b9b6c3 --- /dev/null +++ b/src/routes/layout/layout.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Outlet } from 'react-router-dom'; +import Navbar from "../../components/navbar/Navbar"; +import "./layout.scss"; +function layout() { + return ( +
+
+ +
+ +
+ +
+
+ ) +} + +export default layout; \ No newline at end of file diff --git a/src/routes/layout/layout.scss b/src/routes/layout/layout.scss new file mode 100644 index 000000000..18e24a519 --- /dev/null +++ b/src/routes/layout/layout.scss @@ -0,0 +1,30 @@ +@import "../../responsive.scss"; + +.layout { + height: 100vh; + max-width: 1366px; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; + display: flex; + flex-direction: column; + + @include lg { + // background-color: rgb(237, 222, 222); + max-width: 1280px; + } + @include md { + // background-color: rgb(221, 221, 243); + max-width: 768px; + } + + @include sm { + // background-color: rgb(236, 222, 222); + max-width: 640px; + } +} + +.content { + flex: 1; +} diff --git a/src/routes/listPage/listPage.jsx b/src/routes/listPage/listPage.jsx new file mode 100644 index 000000000..8b4b69d82 --- /dev/null +++ b/src/routes/listPage/listPage.jsx @@ -0,0 +1,11 @@ +import './listPage.scss'; + +import React from 'react'; + +function ListPage() { + return ( +
ListPage
+ ) +} + +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..e69de29bb diff --git a/src/routes/login/login.jsx b/src/routes/login/login.jsx new file mode 100644 index 000000000..e69de29bb 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..e69de29bb diff --git a/src/routes/singlePage/singlePage.scss b/src/routes/singlePage/singlePage.scss new file mode 100644 index 000000000..e69de29bb From 178fca21372c460a31a1207cc25a04d2a3900e4b Mon Sep 17 00:00:00 2001 From: Avilekh Kunwar Date: Tue, 19 Mar 2024 18:32:38 +1100 Subject: [PATCH 4/4] This is updated with all database and pausing on 1hr:38 --- src/components/card/Card.jsx | 48 +++++++++++ src/components/card/card.scss | 93 +++++++++++++++++++++ src/components/filter/Filter.jsx | 52 ++++++++++++ src/components/filter/filter.scss | 50 +++++++++++ src/lib/dummydata.js | 120 +++++++++++++++++++++++++++ src/routes/homePage/homePage.jsx | 5 +- src/routes/listPage/listPage.jsx | 17 +++- src/routes/listPage/listPage.scss | 18 ++++ src/routes/login/login.jsx | 9 ++ src/routes/singlePage/singlePage.jsx | 9 ++ 10 files changed, 417 insertions(+), 4 deletions(-) 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/filter/filter.scss create mode 100644 src/lib/dummydata.js diff --git a/src/components/card/Card.jsx b/src/components/card/Card.jsx new file mode 100644 index 000000000..a70aadcdc --- /dev/null +++ b/src/components/card/Card.jsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { Link } from "react-router-dom"; +import "./card.scss"; +function Card({item}) { + return ( +
+ + +
+

+ {item.title} +

+ +

+ + {item.address} +

+

${item.price}

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

Search results for London

+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ ) +} + +export default Filter; diff --git a/src/components/filter/filter.scss b/src/components/filter/filter.scss new file mode 100644 index 000000000..9adbe749c --- /dev/null +++ b/src/components/filter/filter.scss @@ -0,0 +1,50 @@ +.filter { + display: flex; + flex-direction: column; + gap: 10px; + + h1 { + font-weight: 300; + font-size: 24px; + } + + .item { + display: flex; + flex-direction: column; + gap: 2px; + label { + font-size: 10px; + } + input,select { + width: 100px; + padding: 10px; + border: 1px solid grey; + border-radius: 5px; + font-size: 14px; + } + } + .top { + input { + width: 100%; + } + + } + + .bottom { + display: flex; + justify-content: space-between; + gap: 20px; + + button { + width: 100px; + border: none; + cursor: pointer; + background-color: darkkhaki; + padding: 10px; + } + img { + width: 24px; + height: 24px; + } + } +} diff --git a/src/lib/dummydata.js b/src/lib/dummydata.js new file mode 100644 index 000000000..1de1d78ff --- /dev/null +++ b/src/lib/dummydata.js @@ -0,0 +1,120 @@ +export const listData = [ + { + id: 1, + title: "A Great Apartment Next to the Beach!", + img: "https://images.pexels.com/photos/1918291/pexels-photo-1918291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 2, + bathroom: 1, + price: 1000, + address: "456 Park Avenue, London", + latitude: 51.5074, + longitude: -0.1278, + }, + { + id: 2, + title: "An Awesome Apartment Near the Park! Almost too good to be true!", + img: "https://images.pexels.com/photos/1428348/pexels-photo-1428348.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 3, + bathroom: 2, + price: 1500, + address: "789 Oxford Street, London", + latitude: 52.4862, + longitude: -1.8904, + }, + { + id: 3, + title: "A New Apartment in the City!", + img: "https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 1, + bathroom: 1, + price: 800, + address: "101 Baker Street, London", + latitude: 53.4808, + longitude: -2.2426, + }, + { + id: 4, + title: "Great Location! Great Price! Great Apartment!", + img: "https://images.pexels.com/photos/2467285/pexels-photo-2467285.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 2, + bathroom: 1, + price: 1000, + address: "234 Kingsway, London,", + latitude: 53.8008, + longitude: -1.5491, + }, + { + id: 5, + title: "Apartment 5", + img: "https://images.pexels.com/photos/276625/pexels-photo-276625.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 3, + bathroom: 2, + price: 1500, + address: "567 Victoria Road, London", + latitude: 53.4084, + longitude: -2.9916, + }, + { + id: 6, + title: "Apartment 6", + img: "https://images.pexels.com/photos/271816/pexels-photo-271816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 1, + bathroom: 1, + price: 800, + address: "890 Regent Street, London", + latitude: 54.9783, + longitude: -1.6174, + }, + { + id: 7, + title: "Apartment 7", + img: "https://images.pexels.com/photos/2029667/pexels-photo-2029667.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 2, + bathroom: 1, + price: 1000, + address: "112 Piccadilly, London", + latitude: 53.3811, + longitude: -1.4701, + }, + { + id: 8, + title: "Apartment 8", + img: "https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 3, + bathroom: 2, + price: 1500, + address: "8765 Main High Street, London", + latitude: 51.4545, + longitude: -2.5879, + }, +]; + +export const singlePostData = { + id: 1, + title: "Beautiful Apartment", + price: 1200, + images: [ + "https://images.pexels.com/photos/1918291/pexels-photo-1918291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + "https://images.pexels.com/photos/1428348/pexels-photo-1428348.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + "https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + "https://images.pexels.com/photos/2467285/pexels-photo-2467285.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + ], + bedRooms: 2, + bathroom: 1, + size: 861, + latitude: 51.5074, + longitude: -0.1278, + city: "London", + address: "1234 Broadway St", + school: "250m away", + bus: "100m away", + restaurant: "50m away", + description: + "Future alike hill pull picture swim magic chain seed engineer nest outer raise bound easy poetry gain loud weigh me recognize farmer bare danger. actually put square leg vessels earth engine matter key cup indeed body film century shut place environment were stage vertical roof bottom lady function breeze darkness beside tin view local breathe carbon swam declared magnet escape has from pile apart route coffee storm someone hold space use ahead sheep jungle closely natural attached part top grain your grade trade corn salmon trouble new bend most teacher range anybody every seat fifteen eventually", +}; + +export const userData = { + id: 1, + name: "John Doe", + img: "https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", +}; \ No newline at end of file diff --git a/src/routes/homePage/homePage.jsx b/src/routes/homePage/homePage.jsx index 0ecef06c5..8c6f1c565 100644 --- a/src/routes/homePage/homePage.jsx +++ b/src/routes/homePage/homePage.jsx @@ -1,4 +1,5 @@ -import Searchbar from "../../components/searchBar/SearchBar"; +import React from "react"; +import SearchBar from "../../components/searchBar/SearchBar"; import "./homePage.scss"; function homePage() { @@ -13,7 +14,7 @@ function homePage() { quaerat dolorem aperiam eligendi corporis nemo reprehenderit officiis quibusdam quidem blanditiis! A, facilis?

- +
diff --git a/src/routes/listPage/listPage.jsx b/src/routes/listPage/listPage.jsx index 8b4b69d82..98e146fbb 100644 --- a/src/routes/listPage/listPage.jsx +++ b/src/routes/listPage/listPage.jsx @@ -1,10 +1,23 @@ +import { listData } from '../../lib/dummydata'; import './listPage.scss'; - +import Filter from "./../../components/filter/Filter" +import Card from "../../components/card/Card" import React from 'react'; function ListPage() { + + const data = listData; return ( -
ListPage
+
+
+ + {data.map(item => ( + + ))} +
+
+
Map
+
) } diff --git a/src/routes/listPage/listPage.scss b/src/routes/listPage/listPage.scss index e69de29bb..ebd765266 100644 --- a/src/routes/listPage/listPage.scss +++ b/src/routes/listPage/listPage.scss @@ -0,0 +1,18 @@ +.listPage { + display: flex; + height: 100%; + .listContainer { + flex: 3; + .wrapper { + padding-right: 50px; + display: flex; + flex-direction: column; + gap: 50px; + overflow-y: scroll; + } + } + .mapContainer { + flex: 2; + background-color: white; + } +} diff --git a/src/routes/login/login.jsx b/src/routes/login/login.jsx index e69de29bb..c4f4e8212 100644 --- a/src/routes/login/login.jsx +++ b/src/routes/login/login.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +function login() { + return ( +
login
+ ) +} + +export default login \ No newline at end of file diff --git a/src/routes/singlePage/singlePage.jsx b/src/routes/singlePage/singlePage.jsx index e69de29bb..6490d6453 100644 --- a/src/routes/singlePage/singlePage.jsx +++ b/src/routes/singlePage/singlePage.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +function singlePage() { + return ( +
singlePage
+ ) +} + +export default singlePage \ No newline at end of file