From cdfa55c9750915c3c420e70be149ee649eb941f4 Mon Sep 17 00:00:00 2001
From: prajjwal2-3 <121849327+prajjwal2-3@users.noreply.github.com>
Date: Tue, 25 Jun 2024 23:04:12 +0530
Subject: [PATCH 1/7] landing page till category
---
package-lock.json | 240 +++++++++++++++++++++++++
package.json | 1 +
src/App.jsx | 15 +-
src/components/Button.jsx | 13 +-
src/components/Header.jsx | 24 ++-
src/components/{ => Home}/Carousel.jsx | 2 +-
src/components/Home/Categories.jsx | 16 ++
src/components/{ => Home}/Dropdown.jsx | 0
src/components/{ => Home}/Hero.jsx | 5 +-
src/components/Home/Heroimage.jsx | 17 ++
src/components/Home/Popular.jsx | 9 +
src/components/Navigationbar.jsx | 8 +-
src/components/Searchbar.jsx | 17 --
src/constants/Categories.jsx | 26 +++
tailwind.config.js | 2 +-
15 files changed, 350 insertions(+), 45 deletions(-)
rename src/components/{ => Home}/Carousel.jsx (99%)
create mode 100644 src/components/Home/Categories.jsx
rename src/components/{ => Home}/Dropdown.jsx (100%)
rename src/components/{ => Home}/Hero.jsx (55%)
create mode 100644 src/components/Home/Heroimage.jsx
create mode 100644 src/components/Home/Popular.jsx
delete mode 100644 src/components/Searchbar.jsx
create mode 100644 src/constants/Categories.jsx
diff --git a/package-lock.json b/package-lock.json
index adc79cc..ee241ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
+ "@material-tailwind/react": "^2.1.9",
"@mui/icons-material": "^5.15.20",
"@mui/material": "^5.15.20",
"react": "^18.3.1",
@@ -988,6 +989,20 @@
"@floating-ui/utils": "^0.2.0"
}
},
+ "node_modules/@floating-ui/react": {
+ "version": "0.19.0",
+ "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.19.0.tgz",
+ "integrity": "sha512-fgYvN4ksCi5OvmPXkyOT8o5a8PSKHMzPHt+9mR6KYWdF16IAjWRLZPAAziI2sznaWT23drRFrYw64wdvYqqaQw==",
+ "dependencies": {
+ "@floating-ui/react-dom": "^1.2.2",
+ "aria-hidden": "^1.1.3",
+ "tabbable": "^6.0.1"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
+ }
+ },
"node_modules/@floating-ui/react-dom": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
@@ -1000,6 +1015,18 @@
"react-dom": ">=16.8.0"
}
},
+ "node_modules/@floating-ui/react/node_modules/@floating-ui/react-dom": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.3.0.tgz",
+ "integrity": "sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==",
+ "dependencies": {
+ "@floating-ui/dom": "^1.2.1"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
+ }
+ },
"node_modules/@floating-ui/utils": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
@@ -1127,6 +1154,107 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
+ "node_modules/@material-tailwind/react": {
+ "version": "2.1.9",
+ "resolved": "https://registry.npmjs.org/@material-tailwind/react/-/react-2.1.9.tgz",
+ "integrity": "sha512-3uPlJE9yK4JF9DEQO4I1QbjR8o05+4fysLqoZ0v38TDOLE2tvDRhTBVhn6Mp9vSsq5CoJOKgemG7kbkOFAji4A==",
+ "dependencies": {
+ "@floating-ui/react": "0.19.0",
+ "classnames": "2.3.2",
+ "deepmerge": "4.2.2",
+ "framer-motion": "6.5.1",
+ "material-ripple-effects": "2.0.1",
+ "prop-types": "15.8.1",
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
+ "tailwind-merge": "1.8.1"
+ },
+ "peerDependencies": {
+ "react": "^16 || ^17 || ^18",
+ "react-dom": "^16 || ^17 || ^18"
+ }
+ },
+ "node_modules/@material-tailwind/react/node_modules/react": {
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+ "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+ "dependencies": {
+ "loose-envify": "^1.1.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/@material-tailwind/react/node_modules/react-dom": {
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+ "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+ "dependencies": {
+ "loose-envify": "^1.1.0",
+ "scheduler": "^0.23.0"
+ },
+ "peerDependencies": {
+ "react": "^18.2.0"
+ }
+ },
+ "node_modules/@motionone/animation": {
+ "version": "10.18.0",
+ "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.18.0.tgz",
+ "integrity": "sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw==",
+ "dependencies": {
+ "@motionone/easing": "^10.18.0",
+ "@motionone/types": "^10.17.1",
+ "@motionone/utils": "^10.18.0",
+ "tslib": "^2.3.1"
+ }
+ },
+ "node_modules/@motionone/dom": {
+ "version": "10.12.0",
+ "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+ "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+ "dependencies": {
+ "@motionone/animation": "^10.12.0",
+ "@motionone/generators": "^10.12.0",
+ "@motionone/types": "^10.12.0",
+ "@motionone/utils": "^10.12.0",
+ "hey-listen": "^1.0.8",
+ "tslib": "^2.3.1"
+ }
+ },
+ "node_modules/@motionone/easing": {
+ "version": "10.18.0",
+ "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.18.0.tgz",
+ "integrity": "sha512-VcjByo7XpdLS4o9T8t99JtgxkdMcNWD3yHU/n6CLEz3bkmKDRZyYQ/wmSf6daum8ZXqfUAgFeCZSpJZIMxaCzg==",
+ "dependencies": {
+ "@motionone/utils": "^10.18.0",
+ "tslib": "^2.3.1"
+ }
+ },
+ "node_modules/@motionone/generators": {
+ "version": "10.18.0",
+ "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.18.0.tgz",
+ "integrity": "sha512-+qfkC2DtkDj4tHPu+AFKVfR/C30O1vYdvsGYaR13W/1cczPrrcjdvYCj0VLFuRMN+lP1xvpNZHCRNM4fBzn1jg==",
+ "dependencies": {
+ "@motionone/types": "^10.17.1",
+ "@motionone/utils": "^10.18.0",
+ "tslib": "^2.3.1"
+ }
+ },
+ "node_modules/@motionone/types": {
+ "version": "10.17.1",
+ "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.1.tgz",
+ "integrity": "sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A=="
+ },
+ "node_modules/@motionone/utils": {
+ "version": "10.18.0",
+ "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.18.0.tgz",
+ "integrity": "sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==",
+ "dependencies": {
+ "@motionone/types": "^10.17.1",
+ "hey-listen": "^1.0.8",
+ "tslib": "^2.3.1"
+ }
+ },
"node_modules/@mui/base": {
"version": "5.0.0-beta.40",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
@@ -1840,6 +1968,17 @@
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
"dev": true
},
+ "node_modules/aria-hidden": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+ "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+ "dependencies": {
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/array-buffer-byte-length": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
@@ -2241,6 +2380,11 @@
"node": ">= 6"
}
},
+ "node_modules/classnames": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+ "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+ },
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2410,6 +2554,14 @@
"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
"dev": true
},
+ "node_modules/deepmerge": {
+ "version": "4.2.2",
+ "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+ "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/define-data-property": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -3178,6 +3330,49 @@
"url": "https://github.com/sponsors/rawify"
}
},
+ "node_modules/framer-motion": {
+ "version": "6.5.1",
+ "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+ "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+ "dependencies": {
+ "@motionone/dom": "10.12.0",
+ "framesync": "6.0.1",
+ "hey-listen": "^1.0.8",
+ "popmotion": "11.0.3",
+ "style-value-types": "5.0.0",
+ "tslib": "^2.1.0"
+ },
+ "optionalDependencies": {
+ "@emotion/is-prop-valid": "^0.8.2"
+ },
+ "peerDependencies": {
+ "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+ "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+ }
+ },
+ "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": {
+ "version": "0.8.8",
+ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+ "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+ "optional": true,
+ "dependencies": {
+ "@emotion/memoize": "0.7.4"
+ }
+ },
+ "node_modules/framer-motion/node_modules/@emotion/memoize": {
+ "version": "0.7.4",
+ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+ "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+ "optional": true
+ },
+ "node_modules/framesync": {
+ "version": "6.0.1",
+ "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+ "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+ "dependencies": {
+ "tslib": "^2.1.0"
+ }
+ },
"node_modules/fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3432,6 +3627,11 @@
"node": ">= 0.4"
}
},
+ "node_modules/hey-listen": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+ "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+ },
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -4085,6 +4285,11 @@
"yallist": "^3.0.2"
}
},
+ "node_modules/material-ripple-effects": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/material-ripple-effects/-/material-ripple-effects-2.0.1.tgz",
+ "integrity": "sha512-hHlUkZAuXbP94lu02VgrPidbZ3hBtgXBtjlwR8APNqOIgDZMV8MCIcsclL8FmGJQHvnORyvoQgC965vPsiyXLQ=="
+ },
"node_modules/merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4504,6 +4709,17 @@
"node": ">= 6"
}
},
+ "node_modules/popmotion": {
+ "version": "11.0.3",
+ "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+ "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+ "dependencies": {
+ "framesync": "6.0.1",
+ "hey-listen": "^1.0.8",
+ "style-value-types": "5.0.0",
+ "tslib": "^2.1.0"
+ }
+ },
"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",
@@ -5282,6 +5498,15 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/style-value-types": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+ "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+ "dependencies": {
+ "hey-listen": "^1.0.8",
+ "tslib": "^2.1.0"
+ }
+ },
"node_modules/stylis": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
@@ -5378,6 +5603,16 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/tabbable": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+ "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+ },
+ "node_modules/tailwind-merge": {
+ "version": "1.8.1",
+ "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.8.1.tgz",
+ "integrity": "sha512-+fflfPxvHFr81hTJpQ3MIwtqgvefHZFUHFiIHpVIRXvG/nX9+gu2P7JNlFu2bfDMJ+uHhi/pUgzaYacMoXv+Ww=="
+ },
"node_modules/tailwindcss": {
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
@@ -5485,6 +5720,11 @@
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
"dev": true
},
+ "node_modules/tslib": {
+ "version": "2.6.3",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+ "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
+ },
"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 ba813ea..90b90e6 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
+ "@material-tailwind/react": "^2.1.9",
"@mui/icons-material": "^5.15.20",
"@mui/material": "^5.15.20",
"react": "^18.3.1",
diff --git a/src/App.jsx b/src/App.jsx
index 6c34533..d6b27b6 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,18 +1,21 @@
import { useState } from 'react'
-import TopOrg from './components/TopOrganization'
+
import Header from './components/Header'
-import Hero from './components/Hero'
+import Hero from './components/Home/Hero'
+import Categories from './components/Home/Categories'
function App() {
const [count, setCount] = useState(0)
return (
- <>
-
TEAM NAME
Explore Categories
+{e.title}
+Explore Nearby Volunteering opportunities. Locally and Globally.
+
+ Explore Categories
{e.title}
+ Popular Volunteering Events +
++ {e.category} +
++ {e.month} +
++ {e.date} +
++ {e.title} +
++ {e.discription} +
+ ++ {e.location} +
+