diff --git a/components.json b/components.json new file mode 100644 index 0000000..ebf7e6e --- /dev/null +++ b/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": false, + "tsx": false, + "tailwind": { + "config": "tailwind.config.js", + "css": "src/index.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index fdbb9f9..ada4fa8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,24 +13,33 @@ "@mui/icons-material": "^6.1.10", "@mui/material": "^6.1.10", "@mui/styles": "^6.1.10", + "@radix-ui/react-slot": "^1.1.2", "bootstrap": "^5.3.3", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-react": "^0.484.0", "react": "^18.3.1", "react-bootstrap": "^2.10.7", "react-dom": "^18.3.1", "react-icons": "^5.5.0", - "react-router-dom": "^7.0.2", - "survey-react-ui": "^1.12.13" + "react-router-dom": "^7.4.0", + "survey-react-ui": "^1.12.13", + "tailwind-merge": "^3.0.2", + "tw-animate-css": "^1.2.5" }, "devDependencies": { "@eslint/js": "^9.15.0", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@vitejs/plugin-react": "^4.3.4", + "autoprefixer": "^10.4.21", "eslint": "^9.15.0", "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.14", "globals": "^15.12.0", + "postcss": "^8.5.3", + "tailwindcss": "^4.0.17", "vite": "^6.0.1" } }, @@ -1345,6 +1354,37 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz", + "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz", + "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@react-aria/ssr": { "version": "3.9.7", "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz", @@ -1957,6 +1997,43 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/autoprefixer": { + "version": "10.4.21", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz", + "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "browserslist": "^4.24.4", + "caniuse-lite": "^1.0.30001702", + "fraction.js": "^4.3.7", + "normalize-range": "^0.1.2", + "picocolors": "^1.1.1", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -2037,9 +2114,9 @@ } }, "node_modules/browserslist": { - "version": "4.24.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz", - "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz", + "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==", "dev": true, "funding": [ { @@ -2056,9 +2133,9 @@ } ], "dependencies": { - "caniuse-lite": "^1.0.30001669", - "electron-to-chromium": "^1.5.41", - "node-releases": "^2.0.18", + "caniuse-lite": "^1.0.30001688", + "electron-to-chromium": "^1.5.73", + "node-releases": "^2.0.19", "update-browserslist-db": "^1.1.1" }, "bin": { @@ -2096,9 +2173,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001686", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz", - "integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==", + "version": "1.0.30001707", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001707.tgz", + "integrity": "sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==", "dev": true, "funding": [ { @@ -2131,6 +2208,17 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/class-variance-authority": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz", + "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==", + "dependencies": { + "clsx": "^2.1.1" + }, + "funding": { + "url": "https://polar.sh/cva" + } + }, "node_modules/classnames": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", @@ -2370,9 +2458,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.68", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.68.tgz", - "integrity": "sha512-FgMdJlma0OzUYlbrtZ4AeXjKxKPk6KT8WOP8BjcqxWtlg8qyJQjRzPJzUtUn5GBg1oQ26hFs7HOOHJMYiJRnvQ==", + "version": "1.5.128", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.128.tgz", + "integrity": "sha512-bo1A4HH/NS522Ws0QNFIzyPcyUUNV/yyy70Ho1xqfGYzPUme2F/xr4tlEOuM6/A538U1vDA7a4XfCd1CKRegKQ==", "dev": true }, "node_modules/error-ex": { @@ -2879,6 +2967,19 @@ "is-callable": "^1.1.3" } }, + "node_modules/fraction.js": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", + "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", + "dev": true, + "engines": { + "node": "*" + }, + "funding": { + "type": "patreon", + "url": "https://github.com/sponsors/rawify" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -3787,6 +3888,14 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.484.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.484.0.tgz", + "integrity": "sha512-oZy8coK9kZzvqhSgfbGkPtTgyjpBvs3ukLgDPv14dSOZtBtboryWF5o8i3qen7QbGg7JhiJBz5mK1p8YoMZTLQ==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -3829,11 +3938,20 @@ "dev": true }, "node_modules/node-releases": { - "version": "2.0.18", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", - "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==", + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", + "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==", "dev": true }, + "node_modules/normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", + "dev": true, + "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", @@ -4051,9 +4169,9 @@ } }, "node_modules/postcss": { - "version": "8.4.49", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", - "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", + "version": "8.5.3", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz", + "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==", "dev": true, "funding": [ { @@ -4070,7 +4188,7 @@ } ], "dependencies": { - "nanoid": "^3.3.7", + "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -4078,6 +4196,12 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -4199,9 +4323,9 @@ } }, "node_modules/react-router": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.2.tgz", - "integrity": "sha512-m5AcPfTRUcjwmhBzOJGEl6Y7+Crqyju0+TgTQxoS4SO+BkWbhOrcfZNq6wSWdl2BBbJbsAoBUb8ZacOFT+/JlA==", + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.0.tgz", + "integrity": "sha512-Y2g5ObjkvX3VFeVt+0CIPuYd9PpgqCslG7ASSIdN73LwA1nNWzcMLaoMRJfP3prZFI92svxFwbn7XkLJ+UPQ6A==", "dependencies": { "@types/cookie": "^0.6.0", "cookie": "^1.0.1", @@ -4222,11 +4346,11 @@ } }, "node_modules/react-router-dom": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.0.2.tgz", - "integrity": "sha512-VJOQ+CDWFDGaWdrG12Nl+d7yHtLaurNgAQZVgaIy7/Xd+DojgmYLosFfZdGz1wpxmjJIAkAMVTKWcvkx1oggAw==", + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.4.0.tgz", + "integrity": "sha512-VlksBPf3n2bijPvnA7nkTsXxMAKOj+bWp4R9c3i+bnwlSOFAGOkJkKhzy/OsRkWaBMICqcAl1JDzh9ZSOze9CA==", "dependencies": { - "react-router": "7.0.2" + "react-router": "7.4.0" }, "engines": { "node": ">=20.0.0" @@ -4643,6 +4767,21 @@ "survey-core": "1.12.13" } }, + "node_modules/tailwind-merge": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.0.2.tgz", + "integrity": "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, + "node_modules/tailwindcss": { + "version": "4.0.17", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.17.tgz", + "integrity": "sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw==", + "dev": true + }, "node_modules/tiny-warning": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", @@ -4658,6 +4797,14 @@ "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==" }, + "node_modules/tw-animate-css": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.2.5.tgz", + "integrity": "sha512-ABzjfgVo+fDbhRREGL4KQZUqqdPgvc5zVrLyeW9/6mVqvaDepXc7EvedA+pYmMnIOsUAQMwcWzNvom26J2qYvQ==", + "funding": { + "url": "https://github.com/sponsors/Wombosvideo" + } + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -5809,6 +5956,20 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" }, + "@radix-ui/react-compose-refs": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz", + "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==", + "requires": {} + }, + "@radix-ui/react-slot": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz", + "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==", + "requires": { + "@radix-ui/react-compose-refs": "1.1.1" + } + }, "@react-aria/ssr": { "version": "3.9.7", "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz", @@ -6234,6 +6395,20 @@ "is-shared-array-buffer": "^1.0.2" } }, + "autoprefixer": { + "version": "10.4.21", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz", + "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==", + "dev": true, + "requires": { + "browserslist": "^4.24.4", + "caniuse-lite": "^1.0.30001702", + "fraction.js": "^4.3.7", + "normalize-range": "^0.1.2", + "picocolors": "^1.1.1", + "postcss-value-parser": "^4.2.0" + } + }, "available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -6288,14 +6463,14 @@ } }, "browserslist": { - "version": "4.24.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz", - "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz", + "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001669", - "electron-to-chromium": "^1.5.41", - "node-releases": "^2.0.18", + "caniuse-lite": "^1.0.30001688", + "electron-to-chromium": "^1.5.73", + "node-releases": "^2.0.19", "update-browserslist-db": "^1.1.1" } }, @@ -6318,9 +6493,9 @@ "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==" }, "caniuse-lite": { - "version": "1.0.30001686", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz", - "integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==", + "version": "1.0.30001707", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001707.tgz", + "integrity": "sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==", "dev": true }, "chalk": { @@ -6333,6 +6508,14 @@ "supports-color": "^7.1.0" } }, + "class-variance-authority": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz", + "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==", + "requires": { + "clsx": "^2.1.1" + } + }, "classnames": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", @@ -6512,9 +6695,9 @@ } }, "electron-to-chromium": { - "version": "1.5.68", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.68.tgz", - "integrity": "sha512-FgMdJlma0OzUYlbrtZ4AeXjKxKPk6KT8WOP8BjcqxWtlg8qyJQjRzPJzUtUn5GBg1oQ26hFs7HOOHJMYiJRnvQ==", + "version": "1.5.128", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.128.tgz", + "integrity": "sha512-bo1A4HH/NS522Ws0QNFIzyPcyUUNV/yyy70Ho1xqfGYzPUme2F/xr4tlEOuM6/A538U1vDA7a4XfCd1CKRegKQ==", "dev": true }, "error-ex": { @@ -6906,6 +7089,12 @@ "is-callable": "^1.1.3" } }, + "fraction.js": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", + "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", + "dev": true + }, "fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -7542,6 +7731,12 @@ "yallist": "^3.0.2" } }, + "lucide-react": { + "version": "0.484.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.484.0.tgz", + "integrity": "sha512-oZy8coK9kZzvqhSgfbGkPtTgyjpBvs3ukLgDPv14dSOZtBtboryWF5o8i3qen7QbGg7JhiJBz5mK1p8YoMZTLQ==", + "requires": {} + }, "minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -7569,9 +7764,15 @@ "dev": true }, "node-releases": { - "version": "2.0.18", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", - "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==", + "version": "2.0.19", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", + "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==", + "dev": true + }, + "normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", "dev": true }, "object-assign": { @@ -7722,16 +7923,22 @@ "dev": true }, "postcss": { - "version": "8.4.49", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", - "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", + "version": "8.5.3", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz", + "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==", "dev": true, "requires": { - "nanoid": "^3.3.7", + "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, + "postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true + }, "prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -7823,9 +8030,9 @@ "dev": true }, "react-router": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.2.tgz", - "integrity": "sha512-m5AcPfTRUcjwmhBzOJGEl6Y7+Crqyju0+TgTQxoS4SO+BkWbhOrcfZNq6wSWdl2BBbJbsAoBUb8ZacOFT+/JlA==", + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.0.tgz", + "integrity": "sha512-Y2g5ObjkvX3VFeVt+0CIPuYd9PpgqCslG7ASSIdN73LwA1nNWzcMLaoMRJfP3prZFI92svxFwbn7XkLJ+UPQ6A==", "requires": { "@types/cookie": "^0.6.0", "cookie": "^1.0.1", @@ -7834,11 +8041,11 @@ } }, "react-router-dom": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.0.2.tgz", - "integrity": "sha512-VJOQ+CDWFDGaWdrG12Nl+d7yHtLaurNgAQZVgaIy7/Xd+DojgmYLosFfZdGz1wpxmjJIAkAMVTKWcvkx1oggAw==", + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.4.0.tgz", + "integrity": "sha512-VlksBPf3n2bijPvnA7nkTsXxMAKOj+bWp4R9c3i+bnwlSOFAGOkJkKhzy/OsRkWaBMICqcAl1JDzh9ZSOze9CA==", "requires": { - "react-router": "7.0.2" + "react-router": "7.4.0" } }, "react-transition-group": { @@ -8135,6 +8342,17 @@ "integrity": "sha512-ha12Kq1FX76zE1BbDOlhcIqn4Ob+48F8qnxZu/nfhXsn5E33NrvPfgRLmHaiTiHbgqEDkzyPyo+MupUA/ahtiw==", "requires": {} }, + "tailwind-merge": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.0.2.tgz", + "integrity": "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==" + }, + "tailwindcss": { + "version": "4.0.17", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.17.tgz", + "integrity": "sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw==", + "dev": true + }, "tiny-warning": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", @@ -8150,6 +8368,11 @@ "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==" }, + "tw-animate-css": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.2.5.tgz", + "integrity": "sha512-ABzjfgVo+fDbhRREGL4KQZUqqdPgvc5zVrLyeW9/6mVqvaDepXc7EvedA+pYmMnIOsUAQMwcWzNvom26J2qYvQ==" + }, "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 8787999..a41e2c8 100644 --- a/package.json +++ b/package.json @@ -15,24 +15,33 @@ "@mui/icons-material": "^6.1.10", "@mui/material": "^6.1.10", "@mui/styles": "^6.1.10", + "@radix-ui/react-slot": "^1.1.2", "bootstrap": "^5.3.3", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-react": "^0.484.0", "react": "^18.3.1", "react-bootstrap": "^2.10.7", "react-dom": "^18.3.1", "react-icons": "^5.5.0", - "react-router-dom": "^7.0.2", - "survey-react-ui": "^1.12.13" + "react-router-dom": "^7.4.0", + "survey-react-ui": "^1.12.13", + "tailwind-merge": "^3.0.2", + "tw-animate-css": "^1.2.5" }, "devDependencies": { "@eslint/js": "^9.15.0", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@vitejs/plugin-react": "^4.3.4", + "autoprefixer": "^10.4.21", "eslint": "^9.15.0", "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.14", "globals": "^15.12.0", + "postcss": "^8.5.3", + "tailwindcss": "^4.0.17", "vite": "^6.0.1" } } diff --git a/src/App.jsx b/src/App.jsx index d10b39c..5eeda6f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,28 +1,29 @@ import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Navbar from './Components/Navbar'; -import Pay from './Components/Register'; + import Contact from './Components/Contact'; -import Donor from './Components/Donor'; import Footer from './Components/Footer'; import FormBuilder from './Components/FormBuilder'; import AboutUs from './Components/AboutUs'; import './App.css'; import Home from './Components/Home'; import 'bootstrap/dist/css/bootstrap.min.css'; +import Supporter from './Components/Supporter'; +import FundDrive from './Components/FundDrive'; function App() { return ( - } /> - } /> + } /> + } /> } /> } /> - } /> - + } /> + } /> ); diff --git a/src/Components/Carousel.css b/src/Components/Carousel.css index e34a209..3bc7232 100644 --- a/src/Components/Carousel.css +++ b/src/Components/Carousel.css @@ -1,13 +1,22 @@ .carousel { - position: relative; - width: 100%; - margin: 0 auto; - overflow: hidden; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); - padding: 20px 0px; - max-height: 600px; - position: relative; - } + position: relative; + width: 100%; + margin: 0 auto; + overflow: hidden; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); + max-height: 600px; + padding: 0; /* Remove padding */ +} + +.carousel-image { + width: 100%; + height: 600px; /* Ensures full height */ + object-fit: cover; /* Covers the container without distortion */ + display: block; /* Removes any inline spacing */ + margin: 0; /* Removes any margins */ + padding: 0; /* Ensures no extra spacing */ +} + .carousel .carousel-slider{ @@ -19,13 +28,6 @@ overflow: hidden; } - - .carousel-image { - width: 90%; - height: auto; - transition: opacity 1s ease-in-out; - } - .carousel-indicators { position: absolute; bottom: 10px; diff --git a/src/Components/Carousel.jsx b/src/Components/Carousel.jsx index 7cd4536..ce5c3e6 100644 --- a/src/Components/Carousel.jsx +++ b/src/Components/Carousel.jsx @@ -17,7 +17,8 @@ const Carousel = ({ images }) => { {`Slide
{images.map((_, index) => ( diff --git a/src/Components/Contact.jsx b/src/Components/Contact.jsx index b4dff91..5d0e881 100644 --- a/src/Components/Contact.jsx +++ b/src/Components/Contact.jsx @@ -9,7 +9,7 @@ const Contact = () => { Email: VETRIVEL.EDUCATION.TRUST@gmail.com

- +91 7604883357 + +91 9632828337

Valli's LinkedIn diff --git a/src/Components/Donar.css b/src/Components/Donar.css deleted file mode 100644 index 981f1a3..0000000 --- a/src/Components/Donar.css +++ /dev/null @@ -1,50 +0,0 @@ -.donar-form { - width: 50%; - margin: 0 auto; - padding: 20px; - background-color: #f9f9f9; - border-radius: 8px; - box-shadow: 0 0 10px rgb(241, 235, 235); -} - -.donar-form h2 { - text-align: center; - margin-bottom: 20px; -} - -form { - display: flex; - flex-direction: column; -} - -.form-group { - margin-bottom: 15px; -} - -label { - font-weight: bold; - margin-bottom: 5px; - display: block; -} - -input { - width: 100%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 4px; - font-size: 16px; -} - -button { - padding: 10px; - border: none; - background-color: #4CAF50; - color: white; - font-size: 16px; - border-radius: 4px; - cursor: pointer; -} - -button:hover { - background-color: #45a049; -} diff --git a/src/Components/Donar.jsx b/src/Components/Donar.jsx deleted file mode 100644 index dbcb8bc..0000000 --- a/src/Components/Donar.jsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import './Donar.css'; - -const Donar = () => { - return ( -

-

Donar Details

-
- - -
- - -
- -
- - -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- - - - - - - -
-
- ); -}; - -export default Donar; diff --git a/src/Components/Donor.jsx b/src/Components/Donor.jsx deleted file mode 100644 index 5742135..0000000 --- a/src/Components/Donor.jsx +++ /dev/null @@ -1,111 +0,0 @@ -import React, { useState } from 'react'; -import './Donar.css'; - -const Donor = () => { - const [submitted, setSubmitted] = useState(false); - const [images, setImages] = useState({ - aadharFront: null, - aadharBack: null, - medicalDoc1: null, - medicalDoc2: null, - medicalDoc3: null, - medicalDoc4: null, - }); - - const handleSubmit = (event) => { - event.preventDefault(); - setSubmitted(true); - }; - - const handleImageChange = (event) => { - const { name } = event.target; - const file = event.target.files[0]; - - if (file) { - const reader = new FileReader(); - reader.onload = (e) => { - setImages((prevImages) => ({ - ...prevImages, - [name]: e.target.result, - })); - }; - reader.readAsDataURL(file); - } - }; - - return ( -
- - - {!submitted ? ( -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- - -
- ) : ( -
-

Upload Documents

-
- {["aadharFront", "aadharBack", "medicalDoc1", "medicalDoc2", "medicalDoc3", "medicalDoc4"].map((doc) => ( -
- - - {images[doc] && ( - Preview - )} -
- ))} - - -
-
- )} -
- ); -}; - -export default Donor; - - diff --git a/src/Components/FundDrive.css b/src/Components/FundDrive.css new file mode 100644 index 0000000..14e62dc --- /dev/null +++ b/src/Components/FundDrive.css @@ -0,0 +1,205 @@ +/* Centering the form container */ +.form-container { + + + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: linear-gradient(135deg, #f3f4f6, #e0e0e0); + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + box-sizing: border-box; + overflow: auto; + +} +/* Styling for labels */ +label { + font-size: 20px; /* Increased label font size */ + font-weight: bold; +} +/* Container for each radio button */ +.radio-box { + display: flex; + align-items: center; + justify-content: flex-start; + width: 380px; /* Reduced width */ + height: 35px; /* Smaller height */ + padding: 6px; + border: 1.5px solid #ccc; + border-radius: auto; + border: none; + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); + background-color: #f9f9f9; + transition: 0.3s ease-in-out; + font-size: 14px; /* Increased font size */ +} + +.radio-box:hover { + background-color: #e0e0e0; +} +.radio-label { + font-size: 14px; /* Reduce label font size */ +} +/* Bigger radio buttons */ +.radio-input { + width: 14px; + height: 14px; + margin-right: 6px; + cursor: pointer; +} + +/* Buttons container */ +.button-group { + display: flex; + justify-content: center; + gap: 10px; + margin-top: 10px; +} + +/* Bigger buttons for Next, Back, and Submit */ +.form-button { + padding: 8px 20px; + font-size: 18px; /* Increased font size */ + font-weight: bold; + background-color: #2563eb; + color: white; + border: none; + border-radius: auto; + cursor: pointer; + transition: background 0.3s ease-in-out; + width: 150px; + text-align: center; +} + +.form-button:hover { + background-color: #1e40af; +} + +.form-button:disabled { + background-color: #a1a1aa; + cursor: not-allowed; +} + +/* Upload section adjustments */ +.upload-section { + text-align: center; +} + +.upload-title { + font-size: 20px; /* Increased font size */ + margin-bottom: 8px; +} + +.file-input { + margin: 8px 0; + font-size: 18px; /* Increased font size */ +} + +/* Image preview styling */ +.image-preview { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; + margin-top: 8px; +} + +.uploaded-image { + width: 70px; + height: 70px; + object-fit: cover; + border-radius: 5px; + border: 1px solid #ddd; +} + +.upload-box { + border: 2px dashed #ccc; + padding: 20px; + text-align: center; + width: 100%; + max-width: 400px; + margin: 10px auto; + background-color: #f9f9f9; + cursor: pointer; + font-size: 18px; /* Increased font size */ +} + +.upload-box:hover { + border-color: #007bff; +} + +.upload-placeholder { + color: #888; + font-size: 18px; /* Increased font size */ +} + +/* Grey color for Next and Back buttons */ +.form-button.next-button, +.form-button.back-button { + background-color: #4b5563; + width: 100px; + height: 35px; + font-size: 18px; /* Increased font size */ +} + +.form-button.next-button:hover, +.form-button.back-button:hover { + background-color: #4b5563; /* Darker Grey on hover */ +} + +/* Blue color for Submit button */ +.form-button.submit-button { + background-color: #2563eb; /* Blue */ + width: 100px; + height: 35px; + font-size: 18px; /* Increased font size */ +} + +.form-button.submit-button:hover { + background-color: #1e40af; /* Darker Blue on hover */ +} + +/* Input Fields */ +.input-small { + font-size: 14px; + margin-top: 5px; + background-color: #f5f5f5; + border: 1px solid #ccc; + border-radius: 5px; + border: none; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1); + transition: all 0.2s ease-in-out; + width: 380px; /* Reduced width */ + height: 30px; /* Smaller height */ + padding: 8px; + } + + + .container-box{ + border: 3px solid #eeeeee; + padding: 20px; + margin: 15px auto 0 auto; + width: 33%; + background-color: #eeeeee; /* Lighter Grey Background */ + border-radius: 10px; + color: black; + } + + .center-wrapper { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #ffffff; /* or any background you like */ + + } + + + + + + \ No newline at end of file diff --git a/src/Components/FundDrive.jsx b/src/Components/FundDrive.jsx new file mode 100644 index 0000000..1ce1a91 --- /dev/null +++ b/src/Components/FundDrive.jsx @@ -0,0 +1,218 @@ +import React, { useState } from "react"; +import "./FundDrive.css"; + +const FundDrive = () => { + const [step, setStep] = useState(1); + const [formData, setFormData] = useState({ + name: "", + email: "", + phone: "", + age: "", + dob: "", + category: "", + customCategory: "", + images: [] + }); + + const categories = [ + "Medical Fundraising", + "Education & Scholarships", + "Disaster Relief & Aid", + "Memorial & Tribute Funds", + "Community Development", + "Social Causes", + "Religious & Faith-Based Giving", + "Crowdfunding for Needs", + "Nonprofit & NGO Fundraising", + "Others", + ]; + + const handleInputChange = (e) => { + setFormData({ ...formData, [e.target.name]: e.target.value }); + }; + + const handleImageUpload = (event) => { + const files = Array.from(event.target.files); + setFormData({ ...formData, images: [...formData.images, ...files] }); + }; + + const handleNext = () => { + setStep(step + 1); + }; + + const handleBack = () => { + if (step > 1) setStep(step - 1); + }; + + const handleSubmit = () => { + alert("Fundraising submission successful!"); + }; + + return ( +
+ +
+
+ {step === 1 && ( +
+

Step 1:Personal Details

+ + + + + + + + + + +

+ +
+ )} + + + {step === 2 && ( +
+

Step 2:Select a category

+ {categories.map((item, index) => ( +
+ + +
+ ))} + {formData.category === "Others" && ( + + )} +
+ + +
+
+ )} + + + {step === 3 && ( +
+

Step 3:Upload an Image

+

{formData.category === "Others" ? formData.customCategory : formData.category}

+
+ +

Click or Drag & Drop to upload images

+
+
+ {formData.images.map((image, index) => ( + {`Proof + ))} +
+
+ + +
+
+ )} + +
+
+
+ + + ); +}; + +export default FundDrive; + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/Components/FundRaised.jsx b/src/Components/FundRaised.jsx deleted file mode 100644 index df02b5f..0000000 --- a/src/Components/FundRaised.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from "react"; - -const FundRaised = () => { - return ( -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- - -
- ); -}; - -export default FundRaised; - diff --git a/src/Components/Navbar.css b/src/Components/Navbar.css index 2b347fc..ad89ca7 100644 --- a/src/Components/Navbar.css +++ b/src/Components/Navbar.css @@ -7,14 +7,16 @@ color: #fff; width: 100%; position: sticky; - padding: 20px !important; + top: 0; + z-index: 1000; + padding: 15px 20px; } .navbar .logo { width: 80px; height: auto; border-radius: 35%; - padding: 20px; + padding: 10px; } .navbar .brand { @@ -22,16 +24,15 @@ font-weight: bold; cursor: pointer; display: flex; - justify-content: start; align-items: center; } .navbar .brand-section { display: flex; flex-direction: column; - justify-content: start; - align-items: start; - line-height: 15px; + align-items: flex-start; + line-height: 1.2; + margin-left: 10px; } .navbar .college-name { @@ -40,70 +41,102 @@ .navbar p { font-size: 15px; + margin: 0; } +/* Links Container */ +.navbar .links { + display: flex; + align-items: center; + padding: 5px 20px; +} + +/* Default Navbar Links */ .navbar .links a { margin: 0 10px; text-decoration: none; color: #fff; font-size: 18px; + transition: all 0.3s ease-in-out; } -.navbar .links { - padding: 5px 20px; +/* Fundraising Button */ +.navbar .links .fundraising-link { + background-color: #28a745; /* Green background */ + color: white !important; + padding: 8px 15px; + border-radius: 8px; + font-weight: bold; + border: 2px solid transparent; + transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; } -.navbar .links a:hover { - color: #28a745; +.navbar .links .fundraising-link:hover { + background-color: white; + color: #28a745 !important; + border: 2px solid #28a745; } +/* Navbar Header */ .navbar-header { background-color: rgba(245, 146, 38, 1); height: 30px; width: 100%; } -/* Add hamburger menu for small screens */ +/* Hamburger menu for small screens */ .hamburger { display: none; font-size: 30px; cursor: pointer; + background: none; + border: none; + color: #fff; + padding: 10px; } -.navbar p{ - margin: 0; -} - -/* For screens smaller than 450px */ +/* Mobile Responsiveness */ @media (max-width: 900px) { .navbar .links { - display: none; /* Hide the links by default */ + display: flex; flex-direction: column; - position: absolute; - top: 60px; /* Adjust the position */ - right: 0; + position: fixed; + top: 0; + right: -100%; + width: 60%; + height: 100vh; background-color: #343a40; - width: 100%; - padding: 10px 0; + padding-top: 60px; + transition: right 0.3s ease-in-out; } .navbar .links.open { - display: flex; /* Show links when the menu is open */ - z-index: 10; - position: absolute; - top:100px; - transition: 2s linear ease-in-out; - } - - - /* Show the hamburger menu on small screens */ - .hamburger { - display: block; /* Show hamburger */ - color: #fff; + right: 0; } .navbar .links a { - padding: 10px 20px; + padding: 15px 20px; text-align: center; + display: block; + width: 100%; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + } + + .navbar .links .fundraising-link { + display: inline-block; + text-align: center; + margin-top: 10px; + } + + .hamburger { + display: block; + } + + /* Prevent scrolling when menu is open */ + body.menu-open { + overflow: hidden; } } + + + diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx index 35953b7..8814594 100644 --- a/src/Components/Navbar.jsx +++ b/src/Components/Navbar.jsx @@ -2,14 +2,14 @@ import React, { useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import "./Navbar.css"; -const Navbar = () => { +function Navbar() { const [menuOpen, setMenuOpen] = useState(false); // State to handle the hamburger menu toggle const navigate = useNavigate(); // Toggle menu visibility - const toggleMenu = () => { + function toggleMenu() { setMenuOpen(!menuOpen); - }; + } return (
{/* Hamburger icon */} -
+
+ {/* Links */}
- Home + Home About Us - Register + Contact - Donor - FundRaised + + Projects + Donor +
); -}; +} export default Navbar; + diff --git a/src/Components/Register.jsx b/src/Components/Register.jsx deleted file mode 100644 index d4dc00f..0000000 --- a/src/Components/Register.jsx +++ /dev/null @@ -1,154 +0,0 @@ -import React, { useState } from "react"; -import { TextField, Button, Container, Typography, Grid } from "@mui/material"; - -const Register = () => { - const [step, setStep] = useState(1); // Track the form step (1 for basic info, 2 for donation) - const [userInfo, setUserInfo] = useState({ - name: "", - email: "", - phone: "", - donationAmount: "", - }); - - // Handle changes in input fields - const handleChange = (e) => { - const { name, value } = e.target; - setUserInfo({ - ...userInfo, - [name]: value, - }); - }; - - const sendOTPviaEmail = () => { - const payload = { - userInfo, // Ensure `userInfo` is defined and contains valid data - }; - fetch(`http://localhost:3333/api/v1/sendOTPviaEmail`, { // Correctly points to the backend route - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(payload), // Payload is properly serialized - }) - .then((response) => { - console.log("response ==== ", response); - if(response.ok && response.status == 200){ - setStep(2) - } - }) - .catch((error) => { - console.log("error ===== ", error); - }); -}; - - - const handleSubmit = (e) => { - e.preventDefault(); - if (step === 1) { - sendOTPviaEmail(); - } else { - console.log("Form Data Submitted:", userInfo); - } - }; - - return ( - - - Register and Donate - - - Support our cause by donating. Your contributions help us make education - accessible to all. - - -
- {step === 1 ? ( - <> - - Step 1: Basic Information - - - - - - - - - - - - - - - - - - - - ) : ( - <> - - Step 2: Donation Information - - - - - - - - - - - - )} -
- - ); -}; - -export default Register; diff --git a/src/Components/Supporter.css b/src/Components/Supporter.css new file mode 100644 index 0000000..6b6f20b --- /dev/null +++ b/src/Components/Supporter.css @@ -0,0 +1,212 @@ +/* Overall Supporter Container */ +.supporter-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + +} + +/* Styling for labels */ +label { + font-size: 20px; /* Increased label font size */ + font-weight: bold; +} +h3 { + text-align: center; + margin-bottom: 15px; + color: #333; +} + +label { + display: block; + font-size: 14px; + font-weight: bold; + margin-top: 10px; + color: #555; +} + +/* Input Fields */ +.input-small { + font-size: 14px; + margin-top: 5px; + background-color: #f5f5f5; + border: 1px solid #ccc; + border-radius: 5px; + border: none; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1); + transition: all 0.2s ease-in-out; + width: 380px; /* Reduced width */ + height: 30px; /* Smaller height */ + padding: 8px; +} + +.input-small:focus { + background-color: #ffffff; + border-color: #2563eb; + outline: none; +} + +/* File Input */ +input[type="file"] { + padding: 5px; + background-color: #fff; + border-radius: 5px; + border: 1px solid #ccc; + font-size: 14px; +} + +input[type="file"]:hover { + cursor: pointer; +} + +/* Button Container */ +.button-group { + display: flex; + justify-content: center; + gap: 10px; + margin-top: 15px; +} + +/* Button Styling */ +.form-button { + padding: 10px 20px; + font-size: 14px; + font-weight: bold; + background-color: #2563eb; /* Default to blue */ + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background 0.3s ease-in-out; + width: 150px; + text-align: center; +} + +.form-button:hover { + background-color: #1e40af; +} + +.form-button:disabled { + background-color: #a1a1aa; + cursor: not-allowed; +} + +/* Image Preview */ +.preview-image { + width: 100%; + max-height: 200px; + object-fit: contain; + margin-top: 10px; + border-radius: 5px; + border: 1px solid #ddd; +} + +/* Responsive Design */ +@media (max-width: 500px) { + .supporter-container { + max-width: 100%; + padding: 15px; + } + + .form-button { + width: 100%; + } +} + +/* Dark Grey color for Next and Back buttons */ + + +.form-button.next-button{ + background-color: #4b5563; /* Dark grey */ + width: 100px; + height: 35px; +} +.form-button.back-button { + background-color: #4b5563; /* Dark grey */ + width: 100px; + height: 35px; +} +form-button.next-button:hover{ + background-color: #374151; /* Darker grey on hover */ +} +.form-button.back-button:hover { + background-color: #374151; /* Darker grey on hover */ +} + +/* Blue color for Submit button */ +.form-button.submit-button { + background-color: #2563eb; /* Blue */ + width: 100px; + height: 35px; +} + +.form-button.submit-button:hover { + background-color: #1e40af; /* Darker blue on hover */ +} + +/* Highlight the required fields if they are not filled */ +input:invalid, select:invalid, input[type="file"]:invalid { + border-color: #ccc; /* Default border for invalid fields (no color change) */ + background-color: #f5f5f5; /* Keep the default background for invalid fields */ +} + +input:valid, select:valid, input[type="file"]:valid { + border-color: #ccc; /* Default border for valid fields (no color change) */ + background-color: #f5f5f5; /* Keep the default background for valid fields */ +} + +/* Add a "required" text next to input fields to indicate they are mandatory */ +label::after { + content: "*"; + color: red; + padding-left: 5px; +} + +.form-button.upi-button +{ + background-color: #008712; /* Blue */ + width: 200px; + height: 35px; +} + +.form-button.upi-button:hover { + background-color: #008712; /* Darker blue on hover */ +} +.form-button.net-banking-button +{ + background-color: #008712; /* Blue */ + width: 215px; + height: 35px; +} +.form-button.net-banking-button:hover{ + background-color:#008712; /* Darker blue on hover */ +} ; + +.step-box { + border: 3px solid #eeeeee; + padding: 25px; + margin: 20px auto; + width: 80%; + background-color: #eeeeee; /* Lighter Grey Background */ + border-radius: 10px; + color: black; /* Adjusted text color for better contrast */ +} + +.step1-box, .step2-box, .step3-box, .step4-box { + border: 3px solid #eeeeee; + padding: 20px; + margin: 15px 0; + background-color: #eeeeee; /* Even Lighter Grey Background */ + border-radius: 8px; + color: black; +} + + + + + + + + + \ No newline at end of file diff --git a/src/Components/Supporter.jsx b/src/Components/Supporter.jsx new file mode 100644 index 0000000..3a8e66d --- /dev/null +++ b/src/Components/Supporter.jsx @@ -0,0 +1,354 @@ +import React, { useState } from "react"; +import "./Supporter.css"; + +const Supporter = () => { + const [step, setStep] = useState(1); + const [isSubmitting, setIsSubmitting] = useState(false); + const [formData, setFormData] = useState({ + name: "", + email: "", + phone: "", + age: "", + dob: "", + aadharFront: null, + aadharBack: null, + paymentMethod: "", + paymentScreenshot: null, + }); + + const [showPaymentScreenshot, setShowPaymentScreenshot] = useState(false); + + const handleChange = (e) => { + const { name, value, files } = e.target; + setFormData((prev) => ({ + ...prev, + [name]: files ? files[0] : value, + })); + }; + + const nextStep = () => { + if (isValid()) setStep((prev) => prev + 1); + }; + + const prevStep = () => setStep((prev) => prev - 1); + + const isValid = () => { + if (step === 1) { + return formData.name && formData.email && formData.phone && formData.age && formData.dob; + } + if (step === 2) { + return formData.aadharFront && formData.aadharBack; + } + if (step === 3) { + return formData.paymentMethod; + } + if (step === 4 && formData.paymentMethod === "UPI") { + return formData.paymentScreenshot; + } + return true; + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + setIsSubmitting(true); + try { + console.log("Submitting Form Data:", formData); + setTimeout(() => { + alert("Form Submitted Successfully!"); + setIsSubmitting(false); + setFormData({ + name: "", + email: "", + phone: "", + age: "", + dob: "", + aadharFront: null, + aadharBack: null, + paymentMethod: "", + paymentScreenshot: null, + }); + }, 2000); + } catch (error) { + console.error("Submission Error:", error); + alert("Something went wrong. Please try again."); + setIsSubmitting(false); + } + }; + + const handleUPIPayment = () => { + const upiUrl = + "upi://pay?pa=157511100001246@UBIN0815756.ifsc.npci&pn=Ashoka%20Windows%20and%20Annex%20Apartment%20Owners%20Association&cu=INR&am=50&tn=113%20Dec%202021%20fine&tr=202112113fine&refUrl=https%3A%2F%2Fwww.ashokawindows.com"; + + // Open the UPI payment app + window.location.href = upiUrl; + + // Immediately show the upload screenshot field after clicking Pay via UPI + setShowPaymentScreenshot(true); + }; + + const handleNetBankingPayment = () => { + // Placeholder for actual Net Banking redirection or API call + alert("Redirecting to Net Banking Payment Gateway..."); + }; + + return ( +
+
+
+ {step === 1 && ( +
+

Step 1:Personal Details

+ + + + + + + + + + +
+
+ +
+ )} + + {step === 2 && ( +
+

Step 2:Upload a Images

+ + + + +
+
+ +
+ +
+
+ )} + + {step === 3 && ( +
+

Step 3:Select Payment Method

+ + +
+
+ +
+ +
+
+ )} + + {step === 4 && formData.paymentMethod === "UPI" && ( +
+

Step 4:Pay via UPI

+

+

+ + {/* Upload screenshot field appears after Pay via UPI is clicked */} + {showPaymentScreenshot && ( +
+ + +
+ )} +
+
+ +
+ +
+
+ )} + + {step === 4 && formData.paymentMethod === "Net Banking" && ( +
+

Step 4:Pay via Net banking

+

+

+ {/* Net Banking - Redirection or Process */} + + {/* Upload screenshot field appears after Pay via Net Banking is clicked */} + {showPaymentScreenshot && ( +
+ + +
+ )} +
+
+ +
+ +
+
+ )} +
+
+
+ ); +}; + +export default Supporter; + + + + + + + + + + + + + diff --git a/src/components/ui/button.jsx b/src/components/ui/button.jsx new file mode 100644 index 0000000..69ad71f --- /dev/null +++ b/src/components/ui/button.jsx @@ -0,0 +1,55 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva } from "class-variance-authority"; + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", + { + variants: { + variant: { + default: + "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", + destructive: + "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + outline: + "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", + secondary: + "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", + ghost: + "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-9 px-4 py-2 has-[>svg]:px-3", + sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", + lg: "h-10 rounded-md px-6 has-[>svg]:px-4", + icon: "size-9", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +function Button({ + className, + variant, + size, + asChild = false, + ...props +}) { + const Comp = asChild ? Slot : "button" + + return ( + + ); +} + +export { Button, buttonVariants } diff --git a/src/components/ui/card.jsx b/src/components/ui/card.jsx new file mode 100644 index 0000000..fc6aeb0 --- /dev/null +++ b/src/components/ui/card.jsx @@ -0,0 +1,101 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +function Card({ + className, + ...props +}) { + return ( +
+ ); +} + +function CardHeader({ + className, + ...props +}) { + return ( +
+ ); +} + +function CardTitle({ + className, + ...props +}) { + return ( +
+ ); +} + +function CardDescription({ + className, + ...props +}) { + return ( +
+ ); +} + +function CardAction({ + className, + ...props +}) { + return ( +
+ ); +} + +function CardContent({ + className, + ...props +}) { + return (
); +} + +function CardFooter({ + className, + ...props +}) { + return ( +
+ ); +} + +export { + Card, + CardHeader, + CardFooter, + CardTitle, + CardAction, + CardDescription, + CardContent, +} diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx new file mode 100644 index 0000000..1e9bbd1 --- /dev/null +++ b/src/components/ui/input.jsx @@ -0,0 +1,24 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +function Input({ + className, + type, + ...props +}) { + return ( + + ); +} + +export { Input } diff --git a/src/index.css b/src/index.css index 6119ad9..1233cd2 100644 --- a/src/index.css +++ b/src/index.css @@ -66,3 +66,5 @@ button:focus-visible { background-color: #f9f9f9; } } + + diff --git a/src/lib/utils.js b/src/lib/utils.js new file mode 100644 index 0000000..b20bf01 --- /dev/null +++ b/src/lib/utils.js @@ -0,0 +1,6 @@ +import { clsx } from "clsx"; +import { twMerge } from "tailwind-merge" + +export function cn(...inputs) { + return twMerge(clsx(inputs)); +}